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

<template>
	<view>
		<view class="text-center" style="margin-top: 120upx;">
			<view class="text-gray  text-df padding">待支付</view>
			<view class="theme-color ">
				<text style="font-size: 48upx;">￥</text>
				<text style="font-size: 72upx;">{{detail.cost}}</text>
			</view>
			<view class="text-black text-lg margin-top">渠道合伙人-保证金</view>
		</view>
		<view class="container">
			<view style="padding: 40upx 0 30upx 30upx;font-size: 30upx;font-weight: bold;">支付方式</view>
			<block v-for="(item, index) in ways" :key="index">
				<view class="flex align-center justify-between padding" @click="change(index)">
					<view class="flex align-center">
						<image class="margin-right" :src="item.icon" style="width: 50upx;height: 50upx;"></image>
						<view>{{item.name}}</view>
					</view>
					<view :class="current == index ? 'theme-color cuIcon-roundcheckfill' : 'cuIcon-round'" style="font-size: 40upx;"></view>
				</view>
			</block>
		</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="/static/agent/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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				successShow: false,
				ways: [
					{name: '微信支付', icon: '/static/agent/icon_weixin.png'}
				],
				current: 0,
				
				detail:{}
			}
		},
		onLoad() {
			this.fetchDetail()
		},
		methods: {
			fetchDetail(){
				this.$api.agenterType.detail({settingKey:this.$global.agenterTypeId}).then(res=>{
					this.detail=JSON.parse(res.data.settingValue)
				})
			},
			change(index) {
				this.current = index;
			},
			async pay() {
				let exTime= this.$dateTime.getExpireTime(5)
				let billRecord={
						appid:this.$global.wxParams.APPID,
						openid:this.$cache.get('userInfo').openId,
						payId:this.vuex_userId,
						price:this.detail.cost,
						channel: this.$global.paymentType.YEE_PAY,
						payway: this.$global.paymentScene.MINI_PROGRAM,
						cost:this.detail.cost,
						discount: 1.00,
						type:this.$global.orderType.AGENT_CHARGE,
						// payAmount:this.detail.cost,
						title:'渠道合伙人充值',
						exTime
				}
				let resp=await this.$api.billRecord.addAgentOrder(billRecord)
				if (!resp.success) {
					return
				}
				let params={
					orderType:this.$global.orderType.AGENT_CHARGE,
					orderId: resp.data.id,
					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:"../gain/gain?current=1",
				})
			}
		}
	}
</script>

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