discounts-minapp/detail/virtualGoods/detail.vue

<template>
	<view class="virtualGoods-detail">
		<view class="content">
			<!-- <view class="popup-title">会员充值</view> -->
			<view class="goods-box">
				<image class="icon" :src="chooseInfo.cover.length&&chooseInfo.cover[0]" mode=""></image>
				<view class="goods-info">
					<view class="goods-title">
						{{chooseInfo.title}}
					</view>
					<view class="goods-desc">
						{{chooseInfo.title}}
					</view>
				</view>
				<view class="price">
					￥{{chooseInfo.salePrice}}
				</view>
			</view>

			<view class="notice">
				暂不提供IOS用户进行充值业务
			</view>

			<u--form labelPosition="top" :model="form" ref="uForm" borderBottom labelWidth="180rpx" :labelStyle="{'color': '#222222',
		'font-weight': 'bold','line-height':'60rpx','font-size': '28rpx'}">
				<u-form-item label="账号类型" borderBottom ref="item1">
					<view class="type-box" @click="open">
						<view class="">
							{{type}}
						</view>
						<image class="icon" src="../../static/right.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="充值账号" prop="account" borderBottom ref="item1">
					<u--input v-model.trim="form.account" placeholder="请输入充值账号" border="none"></u--input>
				</u-form-item>
			</u--form>
			<view class="goods-describe">

				<rich-text :nodes="chooseInfo.goodsDescribe"></rich-text>
			</view>
			
			<view class="sub-title">
				商品说明
			</view>
			<view class="notice-text">
				<view class="">
					充值方式：自动充值，填写登录时绑定的手机号/邮箱号等对应账号；
				</view>
				<view class="">
					有效期说明：有效期自购买之日算起，过期即失效。
				</view>
			</view>
			
			<view class="sub-title">
				温馨提示
			</view>
			<view class="notice-text">
				<view class="">
					1、仅支持在中国境内使用。
				</view>
				<view class="">
					2、本产品为虚拟商品，一经付款，无法办理退款退货；
				</view>
				<view class="">
					3、充值前请核对充值账号，切勿填错，如因用户个人原因充错，责任自行承担；
				</view>
				<view class="">
					4、充值成功后，请登录官方网站/APP查询您的会员状态和有效期；
				</view>
				<view class="">
					5、如有其他限制，以所充值会员的官方规定为准。
				</view>
			</view>
			
			
			
			<button class="btn" type="default" :loading="loading" @click="handleBuy">确认</button>
		</view>
		
		<!-- 商品说明
		充值方式：自动充值，填写登录时绑定的手机号/邮箱号等对应账号；
		有效期说明：有效期自购买之日算起，过期即失效。
		温馨提示
		1、仅支持在中国境内使用。
		2、本产品为虚拟商品，一经付款，无法办理退款退货；
		3、充值前请核对充值账号，切勿填错，如因用户个人原因充错，责任自行承担；
		4、充值成功后，请登录官方网站/APP查询您的会员状态和有效期；
		5、如有其他限制，以所充值会员的官方规定为准。 -->
		
		<u-modal :show="iosShow" content='暂不提供IOS用户进行充值业务' @confirm="confirm"></u-modal>
		
		<!-- 选择账号类型 -->
		<u-picker :show="show" :value='shopIndex' keyName="label" :closeOnClickOverlay="false" :columns="list" @confirm="choose" @cancel="cancel"></u-picker>
		
	</view>
</template>

<script>
	import {SHOP_ID} from '@/utils/config.js'
	export default {
		data() {
			return {
				show:false,
				iosShow: false,
				chooseInfo: {channel_price:0},
				type:'手机号',
				form:{
					account:'',
					accountType:1,
					productId:''
				},
				list:[
					[
						{
							label:'手机号',
							value:1,
						},
						{
							label:'QQ号',
							value:2,
						},
						{
							label:'邮箱',
							value:0,
						},
					]
				]
			}
		},
		methods: {
			confirm(){
				this.iosShow = false
			},
			cancel(){
				this.show = false
			},
			open(){
				this.show = true
			},
			choose(val){
				console.log(val.value[0]);
				this.type = val.value[0].label
				this.form.accountType = val.value[0].value
				this.$nextTick(()=>{
					this.show = false
				})
			},
			// 创建订单
			handleBuy() {
				if (uni.getStorageSync('token')) {
					if(JSON.parse(uni.getStorageSync('userInfo')).setMealCode != 0&&JSON.parse(uni.getStorageSync('userInfo')).setMealCode){
						if(!this.form.account) return uni.showToast({
							title:'请输入充值账号',
							icon:'none'
						})
						let that = this
						uni.getSystemInfo({
							success(res){
								console.log(res.osName);
								if(res.osName == 'ios'){
									that.show = false
									that.iosShow = true
								}else{
									if(that.form.accountType == 1 &&!uni.$u.test.mobile(that.form.account)){
										return uni.showToast({
											title:'账号格式错误',
											icon:'none'
										})
									}else if(that.form.accountType == 2 && !uni.$u.test.digits(that.form.account)){
										return uni.showToast({
											title:'账号格式错误',
											icon:'none'
										})
									}else if(that.form.accountType == 0 &&!uni.$u.test.email(that.form.account)){
										return uni.showToast({
											title:'账号格式错误',
											icon:'none'
										})
									}
									
									let info = {
										price:that.chooseInfo.salePrice,
										goodsName:that.chooseInfo.title,
										accountType:that.form.accountType,
										rechargeAccount:that.form.account,
										productId:that.chooseInfo.pid,
										goodsImg:that.chooseInfo.cover&&that.chooseInfo.cover.length?that.chooseInfo.cover[0]:'',
										
									}
									uni.navigateTo({
										url:`/detail/virtualGoods/pay`,
										  success: function(res) {
											// 通过eventChannel向被打开页面传送数据
											res.eventChannel.emit('pay', info)
										  }
									})
								}
							}
						})
					}else{
						uni.showModal({
							title:'此商品需要开通会员才能购买',
							cancelText:'下次再说',
							confirmText:'立即开通',
							success(res) {
								if(res.confirm){
									uni.navigateTo({
										url:'/my/memberCenter/index'
									})
								}
							}
						})
					}
					
					
				} else {
					uni.showModal({
						title:'请登录',
						confirmText:'去登录',
						success(res){
							console.log(res);
							if(res.confirm){
								uni.navigateTo({
									url:'/login/login/login?redirect=/detail/virtualGoods/index'
								})
							}
						}
					})
				}
			
			}
		},
		onLoad() {
			let that = this
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('data', function(data) {
				console.log('da',data);
				that.chooseInfo = data
				that.chooseInfo.salePrice = (that.chooseInfo.salePrice/100).toFixed(2)
				
			})
		}
	}
</script>

<style lang="scss" scoped>
	.virtualGoods-detail {
		padding-bottom: 200rpx;
		.content{
			padding: 24rpx;
			.popup-title{
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
			}
			.type-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.icon{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.goods-box{
				display: flex;
				margin-top: 28rpx;
				.icon{
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
					background: #F0F0F0;
				}
				.goods-info{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					flex: 1;
					margin-left: 20rpx;
					.goods-title{
						color: #222222;
						font-weight: bold;
						font-size: 36rpx;
					}
					.goods-desc{
						font-size: 28rpx;
						color: #AAAAAA;
					}
				}
				.price{
					color: $uni-color-primary;
					font-size: 36rpx;
					font-weight: bold;
					align-self: center;
				}
			}
			.notice{
				font-size: 24rpx;
				color: #AAAAAA;
				padding: 26rpx 0;
				border-bottom: 2rpx solid #F0F0F0;
			}
			.goods-describe{
				color: #222222;
				font-size: 24rpx;
				max-height: 480rpx;
				padding-top: 28rpx;
				overflow: auto;
			}
			.sub-title{
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				margin: 20rpx 0;
			}
			.notice-text{
				font-size: 24rpx;
				color: #AAAAAA;
				line-height: 44rpx;
			}
			.btn{
				position: fixed;
				left: 30rpx;
				bottom: env(safe-area-inset-bottom);
				width: 690rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: $uni-color-primary;
				border-radius: 46rpx;
				margin-top: 54rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
</style>