uniapp-shikongwang/pages/center/bestar.vue

<template>
	<view>
		<view class="flex lf-p-30">
			<view>
				<image :src="info.avatar" style="height: 120rpx;width: 120rpx;border-radius: 50%;" mode="aspectFill"></image>
			</view>
			<view class="flex flex-direction lf-p-l-20 justify-center">
				<view class="lf-font-32 lf-m-b-10 text-black1 lf-line-2">{{info.nickname}}</view>
				<view class="lf-font-28 lf-color-gray" v-if="!info.isTalnet">会员未开通</view>
				<view class="lf-font-28 lf-color-gray" v-else>会员已开通</view>
			</view>
		</view> 
		<self-line/>
		<view>
			<view class="lf-p-t-30 lf-p-l-32 lf-flex-wrap">
				<view class="paynum" style="overflow: hidden;">
					<view class="lf-color-white flex justify-center" style="background-color: #F93A3A;border-radius: 0 0 10rpx 0;width: 168rpx;height: 46rpx;">
						<text class="lf-font-24" style="padding: 6rpx 12rpx;">成为分销达人</text>
					</view>
					<view class="lf-m-t-28 text-black lf-font-24 lf-m-l-20">
						需要支付
					</view>
					<view class="lf-m-l-20 lf-m-t-16">￥<text class="lf-font-60 lf-font-bold">{{prcie}}</text></view>
				</view>
			</view>
		</view>
		<view class="lf-p-l-32 lf-m-t-40 lf-font-32 text-black1 solid-bottom lf-p-b-20">
			支付方式
		</view>
		<view class="flex justify-between align-center text-center lf-p-l-32 lf-p-r-32 lf-p-t-30 lf-p-b-30 solid-bottom">
			<view class="flex justify-around align-center text-center">
				<view class="lf-row-center">
					<text class="lf-iconfont lf-icon-weixinzhifu lf-font-48" style="color: #09BB07;"></text>
				</view>
				<view class="lf-font-36 lf-m-l-20 lf-w-100 text-black1">微信支付</view>
			</view>
			<view>
				<view>
					<checkbox-group @change="checkboxChangepay" style="display: inline-block;">
						<checkbox class="lf-text-vertical" style="" :checked="checkedpay"></checkbox>
					</checkbox-group>
				</view>
			</view>
		</view>
		
		
		
		<view class="btn-bottom" style="bottom: 60rpx;">
			<view class="padding-lr-lg lf-m-b-18">
				<checkbox-group @change="checkboxChange" style="display: inline-block;">
					<checkbox class="lf-text-vertical" style="" :checked="checked"></checkbox>
				</checkbox-group>
				<view class="lf-m-l-10 lf-font-24 lf-color-gray" style="display: inline-block;">
					<text>已阅读并同意</text>
					<text @click="enterAgree" class="text-orange">《{{agreement.title}}》</text>
				</view>
			</view>
			<view class="padding-lr-lg">
				<button class="cu-btn block bg-orange lg" style="border-radius: 42rpx;" @tap="subimitApply()">
					<text class="lf-font-32 text-white">购买并支付¥{{prcie}}</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false, // 是否勾选协议
				info: {},
				ifPay: true,
				checkedpay: true,
				agreement: '',
				prcie: ''
			}
		},
		methods: {
			getPrice(){
				this.$http(this.API.API_MEMBERPRICE).then(res => {
					this.prcie = res.data.price || 0
				})
			},
			// 勾选协议发生变化
			checkboxChange(event){
				this.checked = event.detail.value.length > 0;
			},
			//勾选支付方式
			checkboxChangepay(event){
				this.checkedpay = event.detail.value.length > 0;
			},
			getAgree(){
				this.$http(this.API.API_WXLOGIN_VIEW,{type: 'vip'}).then(res => {
					this.agreement = res.data.agreement;
				})
			},
			// 进入查看协议
			enterAgree(){
				this.$url('/pages/agreement/agreement?id='+ this.agreement.article_id);
			},
			getData(){
				this.$http(this.API.API_USER_CENTER).then(res => {
					this.info = res.data;
				})
			},
			subimitApply() {
				if(!this.checkedpay) {
					this.$msg('请选择付款方式!')
					return
				}
				if(!this.checked) {
					this.$msg('请认真阅读并同意协议!')
					return
				}
				if(!this.ifPay) return;
				this.ifPay = false;
				this.$http(this.API.API_PRPAID, {
					goods_id: 0,
					goods_specs_id: 0,
					number: 1,
					payment_desc: 3,
					share_one: this.info.id
				}).then(res => {
					this.order_id = res.data.order_id
					uni.requestPayment({
						orderInfo: res.data.order_num,
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: (res) => {
							this.ifPay = true
							this.$url('/pages/order/pay-success?ifSuccess=1&type=3&order_id='+this.order_id,{type: 'redirect'})
						},
						fail: (err) => {
							this.ifPay = true
							this.$url('/pages/order/pay-success?ifSuccess=2&type=3&order_id='+this.order_id,{type: 'redirect'})
						},
					})
					
				}).catch(err => {
					this.ifPay = true
					if(err.code == 9997) {
						uni.showModal({
							title: '提示',
							content: '是否同意前往手机授权？',
							success: e => {
								if (!e.confirm) return;
								this.$routerGo('/pages/login/index?type=phone')
							}
						});
					}
				});
				
			}
		},
		onLoad() {
			this.getData()
			this.getAgree()
			this.getPrice()
		}
	}
</script>

<style>
	.paynum {
		width: 280rpx;
		height: 280rpx;
		border: 1px solid #FE9903;
		background-color: #FFF4E4;
		border-radius: 10rpx;
	}
</style>