shuzi/pages/user/myvip.vue

<template>
	<view class="content">
		<view class="list">
			<view @click="actionIndex=index" class="list-box" v-for="(item,index) in list" :key='index'
				:class="{'action':actionIndex==index}">
				<view class="list-foot">
					<view class="list-pir">
						¥{{item.pir}}
					</view>
				</view>
				<view class="list-level">
					{{item.level}}
				</view>
			</view>
		</view>
		<view class="top">
			<view class="top-sub">
				申请加盟立享特权
			</view>
		</view>
		<view class="app margin-t-30">
			<view class="pay-type-list">
				<!-- v-if="ispg == 'android'" -->
				<!-- #ifdef APP-PLUS -->
				<!-- <view class="type-item b-b" @click="type = 'wechat'">
					<text class="icon iconfont iconweixin"></text>
					<view class="con">
						<text class="tit">微信支付</text>
						<text>推荐使用微信支付</text>
					</view>
					<label class="radio">
						<radio value="" color="#5dbc7c" :checked="type == 'wechat'"></radio>
					</label>
				</view> -->
				<view class="type-item b-b" @click="type = 'ali'">
					<text class="icon iconfont iconzhifubao"></text>
					<view class="con"><text class="tit">支付宝支付</text></view>
					<label class="radio">
						<radio value="" color="#5dbc7c" :checked="type == 'ali'"></radio>
					</label>
				</view>
				<!-- #endif -->
				<view class="type-item" @click="type = 'yue'">
					<text class="icon iconfont iconyue"></text>
					<view class="con">
						<text class="tit">余额支付</text>
						<text>可用余额 ¥{{ now_money }}</text>
					</view>
					<label class="radio">
						<radio value="" color="#5dbc7c" :checked="type == 'yue'"></radio>
					</label>
				</view>
			</view>
		</view>
		
		<view class="box-content" v-if="actionIndex==1">
			<view class="content-title">
				<view class="title">
					加盟即送：{{partner.name}}
				</view>
			</view>
			<view class="img">
				<image :src="partner.uri" mode=""></image>
			</view>
		</view>
		
		
		
		
		<view class="footer">
			<view class="price-content">
				<text>{{list[actionIndex].level}}</text>
				<text class="price-tip">￥</text>
				<text class="price">{{ list[actionIndex].pir }}</text>
			</view>
			<text class="submit" :class="{ submitNo: !payType }" @click="payType ? submit() : ''">提交订单</text>
		</view>
	</view>
</template>

<script>
	import {
		vipList,
		vipCompany,
		vipPartner
	} from '@/api/user.js';
	import { balance } from '@/api/wallet.js';
	export default {
		data() {
			return {
				actionIndex: 0,
				type: 'yue',
				now_money: 0,
				payType: true,
				list: [{
						src: '../../static/img/le1.png',
						level: '分公司',
						pir: 0,
					},
					{
						src: '../../static/img/le1.png',
						level: '分销商',
						pir: 0,
					},
				],
				// 赠送商品
				partner:{}

			}
		},
		onLoad() {
			this.vipList();
			this.getBalance();
		},
		methods: {
			// 获取vipList
			vipList() {
				const list = this.list
				vipList().then((e) => {
					list[0].pir = e.data.company;
					list[1].pir = e.data.partner;
					this.partner = e.data.partner_gift;
				}).catch((e) => {
					console.log(e);
				})
			},
			getBalance(){
				// 载入余额
				balance({}).then(({
					data
				}) => {
					// 获取余额
					this.now_money = data.now_money;
				});
			},
			// 支付回调
			payChecked(data){
				console.log(data,'fanhui ');
				console.log(this.type);
				console.log(data.payConfig,'payConfig ');
				const that = this;
				// #ifdef APP-PLUS
				if (that.type == 'ali') {
					const url = data.data.payConfig;
					console.log(url, 'url');
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: url,
						success: res => {
							console.log(res);
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
							obj.paySuccessTo();
						},
						fail: e => {
							console.log(e);
						},
						complete: () => {}
					});
					obj.payLoding = false;
					return
				}
				// #endif
				if (that.type == 'yue') {
					that.paySuccess();
					that.getBalance()
				}
			},
			// 支付成功
			paySuccess(){
				const that = this;
				uni.showModal({
					title: '恭喜',
					content: '成功开通'+that.list[that.actionIndex].level,
					showCancel: false,
				});
				that.payType = true;
			},
			// 提交订单
			submit() {
				const that = this;
				if (!that.payType) {
					return
				}
				that.payType = false;
				if (that.actionIndex == 0) {
					vipCompany({
						pay_type: that.type
					}).then((data) => {
						
						that.payChecked(data)
					}).catch(() => {
						that.payType = true;
					})
				}
				if (that.actionIndex == 1) {
					vipPartner({
						pay_type: that.type
					}).then((data) => {
						that.payChecked(data)
					}).catch(() => {
						that.payType = true;
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.box-content {
		margin-bottom: 50rpx;
		background-color: rgb(15, 15, 15);
		overflow: hidden;
		.img {
			width: 750rpx;
			height: 750rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.content-title {
			padding: 30rpx 20rpx;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			background-color: rgb(29, 28, 33);
			.title {
				font-size: 39rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 20rpx;
	
			}
	
			.text {
				margin: 10rpx 0;
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}
	}
	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.iconyue {
			color: #fe8e2e;
		}

		.iconweixin {
			color: #36cb59;
		}

		.iconzhifubao {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.content {
		line-height: 1;
		padding-top: 50rpx;
		padding-bottom: 50px;
		.top {
			padding-top: 40rpx;
			position: relative;

			.top-sub {
				width: 377rpx;
				margin: 0 auto;
				height: 65rpx;
				background: #554637;
				border-radius: 33rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #E2D29F;
				display: flex;
				align-items: center;
				justify-content: center;
				// margin:0rpx auto;
			}
		}

		.center {
			text-align: center;
			margin: 40rpx 0;

			.center-img {
				width: 331rpx;
				height: 31rpx;
			}
		}

		.list {
			padding-left: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.list-box {
				width: 345rpx;
				padding-top: 30rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
				border-radius: 10rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				&.action {
					border: 2px solid #E2D29F;
					;
				}

				.list-level {
					padding-left: 20rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #554637;
					line-height: 70rpx;
					text-align: center;
					padding-bottom: 30rpx;
				}

				.list-foot {
					text-align: center;
					padding: 0 20rpx;
					font-size: 50rpx;
					color: #E2D29F;
					font-weight: bold;
					padding: 30rpx 0;
				}
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90rpx;
		justify-content: space-between;
		font-size: 30rpx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

		.price-content {
			padding-left: 30rpx;
		}

		.price-tip {
			color: $font-color-base;
			margin-left: 8rpx;
		}

		.price {
			font-size: 36rpx;
			color: $font-color-base;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280rpx;
			height: 100%;
			color: #9F570E;
			font-size: 32rpx;
			background: $bgBaseBg;

			&.submitNo {
				background-color: $font-color-disabled;
			}
		}
	}
</style>