zhonglxcx/zhonglmini/pages/pay/pay.vue

<template>
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{paymoney|toFixed}}</text>
			<text v-if="isDefault.isopen&&dikmoney">使用{{usejfnum}}个积分抵扣{{dikmoney|toFixed}}元</text>
		</view>
	
		<view class="pay-type-list">
	
			<view class="type-item b-b" @click="changePayType(1)">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<label class="radio">
					<radio value="1" color="#fa436a" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			<view class="type-item" v-if="yue>0" @click="changePayType(2)">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">余额(优先)+微信</text>
					<text>可用余额 ¥{{yue}}</text>
				</view>
				<label class="radio">
					<radio value="2" color="#fa436a" :checked='payType == 2' />
					</radio>
				</label>
			</view>
			<view class="type-item" v-else>
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">余额混合</text>
					<text>可用余额 ¥{{yue}}</text>
				</view>
				<label class="radio" style="color: #909399;">
					余额不足
				</label>
			</view>
			<view class="type-item">
				<view class="icon yticon jifenicon">
					<image src="../../static/img/jificon.png"/>
				</view>
				<view class="con">
					<text class="tit">积分抵扣</text>
					<text v-if="jifen>lessjifen">
						当前积分{{jifen}}个
						<text class="moreuse" v-if="morejifen">,最多可使用{{morejifen}}个</text>
					</text>
					<text v-else>当前积分：{{jifen}}&nbsp;,满{{lessjifen}}可用</text>
				</view>
				<view class="input switch" v-if="jifen>lessjifen">
					<switch color="#f06c7a" :checked="isDefault.isopen" @change="isDefaultChange" />
				</view>
			</view>
		</view>
		<view class="shuom">{{zfsmtext}}</view>
		
		<text class="mix-btn" @click="confirm">确认支付</text>
		<button style="color:#909399; background-color: white; height: 60rpx; width: 300rpx; text-align: center; font-size: 26rpx; border: 0px solid #ffffff;" plain="true" open-type="share">找人代付？</button>
	</view>
</template>

<script>
import {throttle} from '@/common/util';  
	export default {
		data() {
			return {
				payType: 1,
				orderInfo: [],
				paymoney:0,
				dhid:0,
				yue:0,
				jifen:0,
				usejfnum:0,
				lessjifen:0,//积分起步数量
				morejifen:0,//最多可使用积分，0表示不限制
				dikmoney:0,
				isDefault:{isopen:false},
				zfsmtext:'支付方式优先级是积分抵扣 > 余额 > 微信'
			};
		},
		computed: {
		
		},
		onLoad(options) {
			this.paymoney=options.paymoney;
			this.dhid=options.dhid;
			if(options.df==1)
			{
				uni.login({
					success:function(e){
						t.daiflogin(e.code);
					}
				})
			}
			uni.getStorage({
					key:'paymentOrder',
					success: (e) => {
						//console.log(e,'值？')
						let paygoodlist= e.data;
						let len = paygoodlist.length;
						for(let i=0;i<len;i++){
							this.deleteGoods(paygoodlist[i].id)
						}
					}
				})
			
		},
		filters: {
			toFixed:function(x) {
				return parseFloat(x).toFixed(2);
			}
		},
		onShow(){
			let getuserinfo=uni.getStorageSync('userinfo');
			this.getuserinfo(getuserinfo.uid,getuserinfo.aid);
			this.baseinfo('zftip');
		},
		methods: {
			async daiflogin(code){
				let logininfo = await this.$api.login({action:'daiflogin',code:code});
				if(logininfo.data){
					uni.setStorage({
						key:'userinfo',
						data:logininfo.data,
						success: () => {
						}
					})
				}
			},
			//找人代付
			onShareAppMessage(res) {
				if (res.from === 'button') {// 来自页面内分享按钮
				  console.log(res.target)
				}
				return {
				  title: '朋友找您代付，需支付'+this.paymoney+'元！',
				  path: '/pages/pay/pay?dhid='+this.dhid+'&paymoney='+this.paymoney+'&df=1'
				}
			},
			async baseinfo(key) {
				let reinfo=await this.$api.baseinfo({action:'baseinfo',key:key});
				this.zfsmtext=reinfo.data.info
			},
			async getuserinfo(uid,aid) {
				let reinfo=await this.$api.userinfo({action:'userinfo',uid:uid,dhid:this.dhid,aid:aid});
				this.yue=reinfo.data.yue;
				this.jifen=reinfo.data.jifen;
				this.dikmoney=reinfo.data.dikmoney;
				this.lessjifen=reinfo.data.lessjifen;
				this.morejifen=reinfo.data.morejifen;
				this.usejfnum=reinfo.data.usejfnum;
				this.paymoney=reinfo.data.paymoney
			},
			async wxpay(dhid,openid) {
				let getuserinfo=uni.getStorageSync('userinfo');
				let reinfo=await this.$api.wxpay({action:'wxpayall',aid:getuserinfo.aid,openid:openid,dhid:dhid,paytype:this.payType,isjifen:this.isDefault.isopen});
				//console.log(reinfo,'返回');
				if(reinfo.code==1){
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp: reinfo.data.timeStamp,
					    nonceStr: reinfo.data.nonceStr,
					    package: reinfo.data.package,
					    signType: 'MD5',
					    paySign: reinfo.data.paySign,
					    success: function (res) {
					        //console.log('success:' + JSON.stringify(res));
							uni.redirectTo({
								url: '/pages/pay/paySuccess'
							})
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								title:'已放弃支付',icon:'none'
							})
					    }
					});
				}else if(reinfo.code==2){
					uni.redirectTo({
						url: '/pages/pay/paySuccess'
					})
				}else{
					uni.showToast({
						title:reinfo.msg,icon:'none'
					})
				}
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
				if(type==2){
					let t=this;
					uni.showModal({
						title: '支付说明',
						showCancel:false,
						confirmText:'明白了',
						content: t.zfsmtext,
						success: function (res) {}
					});
				}
			},
			//确认支付
			confirm: throttle( function() {
				let openid=uni.getStorageSync('userinfo');
				this.wxpay(this.dhid,openid['openid'])
			}),
			//删除本地购物车列表对应商品
			deleteGoods(id){
				let getcartlist=uni.getStorageSync('cartlist');
				let len = getcartlist.length;
				for(let i=0;i<len;i++){
					if(id==getcartlist[i].id){
						getcartlist.splice(i, 1);
						break;
					}
				}
				//更新本地储存
				uni.setStorageSync('cartlist',getcartlist);
			},
			isDefaultChange(e){
				let t=this;
				t.$set(this.isDefault,'isopen',e.detail.value)
				if(t.isDefault.isopen&&this.dikmoney<=0){
					uni.showModal({
						title: '提示',
						content: '当前积分不足',
						success: function (res) {
							if (res.confirm) {
								t.$set(t.isDefault,'isopen',false)
								//console.log('用户点击确定')
							} else if (res.cancel) {
								 // 手动修改switch的状态，视图会同步更新
								t.$set(t.isDefault,'isopen',false)
								//console.log('用户点击取消');
							}
						}
					});
				}else{
					if(this.isDefault.isopen){
						this.paymoney-=parseFloat(this.dikmoney*100)/100;
					}else{
						this.paymoney+=parseFloat(this.dikmoney*100)/100;
					}
				}
				
			},
		}
	}
</script>
<style lang='scss'>
	.app {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;
		.price{
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;
			&:before{
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.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;
		}
		.jifenicon{
			image{
				width: 60upx;
				height: 60upx;
			}
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			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;
			.moreuse{
				margin-left: 5upx;
				font-size: 24upx;
				color: #909399;
			}
		}
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 50upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
.shuom{
	text-align: center;
	font-size: 28upx;
	color: #DD524D;
	padding: 15upx;
	}
</style>