guosen-ldt-client/pagesB/pages/agent/pay.vue

<template>
	<view>
		<view class="text-center" style="margin-top: 120upx;">
			<u-icon name="clock-fill" color="#FF9447" size="140"></u-icon>
			<view class="text-gray  text-df padding-20">待支付</view>
			<view class="theme-color ">
				<text style="font-size: 60upx;" class="price">{{agent.league}}</text>
			</view>
		</view>
		<view class="container" style="padding: 20rpx 30rpx;">
			<u-form :label-style="{'fontWeight':800,'fontSize':'30rpx'}" :border-bottom="false" :model="form" ref="uForm" label-width="150">
				<u-form-item label="代理级别"><u-input v-model="agent.level" type="select"  @click="levelsShow=true" :select-open="levelsShow"/></u-form-item>
			</u-form>
		</view>

		<view class="bottom-bar safe-area-inset-bottom " style="margin-top: 120rpx;">
			<view @click="pay" class="bg-gradual-base cu-btn round" style="width: 100%;padding: 46rpx;">
				确认支付
			</view>
		</view>

		<u-popup v-model="successShow" mode="center" :mask-close-able="false" width="550" height="500"
			border-radius="30">
			<view class="text-center padding">
				<image src="/pagesB/static/pic_agent.png" style="width: 109upx;height: 122upx;"></image>
				<view style="font-size: 34upx;color: #FF9447;font-weight: bold;padding: 30upx 0 10upx 0;">恭喜您成为代理</view>
				<view style="font-size: 28upx;color: #999999;padding-bottom: 60upx;">专享代理专属权益</view>
				<view @click="confirm" class="cu-btn bg-gradual-base round" style="width: 90%;padding: 40rpx;">
					确认
				</view>
			</view>
		</u-popup>
		
		<u-picker mode="selector" @confirm="levelConfirm" v-model="levelsShow" :range="levels" range-key="level" :default-selector="[0]"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				successShow: false,
				levelsShow:false,
				levels: [],
				
				agent:{},
				
			}
		},
		onLoad() {
			if (this.$isEmpty(this.vuex_userId)) {
				this.$dialog.showModal('系统错误', false).then(res => {
					uni.reLaunch({
						url: "/pages/gain/gain?current=1"
					})
				})
				return
			}
			this.fetchAgentLevelList()
		},
		methods: {
			levelConfirm(e){
				this.agent=this.levels[e[0]]
			},
			fetchAgentLevelList(){
				this.$api.agenter.agentLevelList().then(res=>{
					this.levels=res.data.records
					this.agent=this.levels[0]
				})
			},
			async pay() {
				let agentLeague={
					userId:this.vuex_userId,
					agentId:this.agent.id,
					league:this.agent.league,
					payStatus:'待付款',
					appid: this.$global.wxParams.APPID,
					openid: this.$cache.get('userInfo').openId,
				}
				let resp = await this.$api.agenter.addAgentOrder(agentLeague)
				if (!resp.success) {
					return
				}
				let params = {
					orderType: this.$global.orderType.AGENT_CHARGE,
					orderId: resp.data.tradeNo,
					payStatus: this.$global.payStatus.IS_WAIT
				}
				let res = await this.$api.pay.payOrder(params)
				let prePayTn = JSON.parse(res.data.prePayTn)
				this.$mpi.requestPayment(prePayTn).then(() => {
					this.successShow = true;
				})
			},
			confirm() {
				this.successShow = false
				this.$u.vuex('vuex_agenter_type', this.$global.userType.CHANNEL)
				uni.reLaunch({
					url: "../../../pages/gain/gain?current=1",
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #ffffff;
		margin: 30upx;
		border-radius: 20upx;
	}
</style>