mycajt/pages/received/index.vue

<template>
	<view class="content" :class="{ blueBg: actionInd != 1, greenBg: actionInd == 1 }">
		<view class="coupon_transfer">
			<view class="user">
				<view class="imgbox">
					<image class="img" :src="userinfo.avatar" mode=" scaleToFill"></image>
				</view>
				<view class="niceName">{{ userinfo.nickname }}</view>
			</view>
			<view class="erwema">
				<view class="qrbox">
					<view class="payMoney" v-if="actionInd == 1">收款码</view>
					<view class="payMoney" v-if="actionInd == 0">付款码</view>
					<tki-qrcodes :cid="cid" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
						:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconSize" :lv="lv"
						:onval="onval" :loadMake="loadMake" :usingComponents="usingComponents"
						@result="qrR"></tki-qrcodes>
					<!-- <view class="setMoney" @click="openApp">
						设置金额
					</view> -->
					<view class="setType flex" v-if="actionInd == 0" @click="showChooseType">
						<image :src="showType[showPayType].img" mode="" class="type-logo"></image>
						<view class="type-wrapper">
							<view class="type-tit">{{ showType[showPayType].tit }}</view>
							<view class="type-info">使用{{ showType[showPayType].tit }}支付</view>
						</view>
						<view class="sele-wrap">
							<image src="../../static/img/back.png" mode="" class="selecte-ic"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomTab flex">
			<view class="item1" @click="clickItem(0)" :class="{ action: actionInd == 0 }">
				<view>
					<image class="img" src="../../static/icon/pay2.png" mode=" widthFix"></image>
				</view>
				<view class="text">付款码</view>
			</view>
			<view class="item1" @click="clickItem(1)" :class="{ action: actionInd == 1 }">
				<view>
					<image class="img" src="../../static/icon/pay1.png" mode=" widthFix"></image>
				</view>
				<view class="text">收款码</view>
			</view>
			<view class="item1" @click="clickItem(2)" :class="{ action: actionInd == 2 }">
				<view>
					<image class="img" src="../../static/icon/pay3.png" mode=" widthFix"></image>
				</view>
				<view class="text">扫一扫</view>
			</view>
			<view class="item1" @click="openList" :class="{ action: actionInd == 3 }">
				<view>
					<image class="img" src="../../static/icon/pay4.png" mode=" widthFix"></image>
				</view>
				<view class="text">记录</view>
			</view>
		</view>
		<view class="add-btn" :class="{ blueBg: actionInd == 1, greenBg: actionInd != 1 }"
			v-if="userinfo.m_spread_uid == 0" @click="bang()">绑定上级</view>
		<uni-popup ref="bang" type="center">
			<view class="psw-wrapper">
				<image class="tc-bg" src="../../static/img/tc1.png" mode=""></image>
				<view class="psw-wrapper-main">
					<view class="psw-title">请输入上级邀请码</view>
					<input type="number" v-model="spread_uid" class="psw-ipt" />
					<view class="psw-btn" @click="cast()">确定</view>
				</view>
				<view class="x" @click="cancelpass">
					<image src="../../static/img/x1.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
		<uniPopup ref="popup1" type="dialog">
			<uni-popup-dialog :isSkm="isSkm" mode="input" type="input" title="支付" placeholder="请输入支付金额" :duration="2000"
				:before-close="true" @close="close" @confirm="confirm"
				@changeShowPayType="changeShowPayType"></uni-popup-dialog>
		</uniPopup>
		<uniPopup ref="popup2" type="message"><uni-popup-message type="success" message="支付成功"
				:duration="2000"></uni-popup-message></uniPopup>
		<uniPopup ref="popupPay" type="bottom">
			<view class="popup-box">
				<view class="popup-pay">
					<view class="paybox-top flex">
						<view class="type">选择支付方式</view>
						<view class="image" @click="close">
							<image src="../../static/img/x.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="paybox-main flex" @click="changePayType(0)">
						<view class="zftype flex">
							<image src="../../static/img/yue.png" mode="aspectFill"></image>
							<view class="zf">流动积分兑换</view>
						</view>
						<label class="radio">
							<radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 0"
								color="#5dbc7c"></radio>
						</label>
					</view>
					<view class="paybox-main flex" @click="changePayType(2)">
						<view class="zftype flex">
							<image src="../../static/icon/jf.png" mode="aspectFill"></image>
							<view class="zf">积分支付</view>
						</view>
						<label class="radio1">
							<radio style="transform:scale(0.7)" value="" :checked="payType == 2" color="#5dbc7c">
							</radio>
						</label>
					</view>
					<view class="paybox-main flex" @click="changePayType(1)">
						<view class="zftype flex">
							<image src="../../static/icon/xfq.png" mode="aspectFill"></image>
							<view class="zf">消费券支付</view>
						</view>
						<label class="radio1">
							<radio style="transform:scale(0.7)" value="" :checked="payType == 1" color="#5dbc7c">
							</radio>
						</label>
					</view>
					<view class="paybtn" @click="qrchange">确定切换</view>
				</view>
			</view>
		</uniPopup>
	</view>
</template>

<script>
	import tkiQrcodes from '@/components/tki-qrcode/tki-qrcode.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import {
		m_spread
	} from '@/api/user.js';
	import {
		getUserInfo
	} from '@/api/login.js';
	import {
		receivedCollectionCode,
		receivedPaymentCode,
		receivedCodeState,
		receivedPaymentCreate,
		receivedLst,
		collectionLst,
		collectionSetTip
	} from '@/api/received.js';
	// #ifdef H5
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		weixindata
	} from '@/utils/wxAuthorized';
	// #endif
	import Voice from '@/utils/QS-baiduyy.js';
	export default {
		components: {
			tkiQrcodes,
			uniPopup,
			uniPopupDialog,
			uniPopupMessage
		},
		// #ifdef H5
		computed: {
			...mapState(['weichatObj'])
		},
		// #endif
		data() {
			return {
				spread_uid: '',
				isSkm: false,
				showPayType: 0,
				payType: 0, //付款码type 0-余额  1-消费券  2-积分
				payTypeShow: 0, //付款码type 0-余额  1-消费券  2-积分
				url: '',
				uid: '',
				qrsize: 80, // 二维码大小
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 500, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				// show: true,//默认使用组件中的image标签显示二维码
				val: '', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: false, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading
				loadingText: '二维码生成中', //loading文字
				src: '', // 二维码生成后的图片地址或base64
				ratio: 1, //页面比例用于计算
				ctxSrc: '', //要显示的图片
				loading: true, //是否载入图片中
				canHeight: '',
				canWeidth: '',
				userinfo: {}, //用户信息
				actionInd: 1, //默认展示收款码
				setTimeOutPay: null, //付款倒计时
				getMoneyList: null, //收款记录倒计时倒计时
				showSqr: true,
				code: '', //保存扫码code
				indexNum: 0, //默认没有商品
				showType: [{
						type: 0,
						tit: '余额',
						img: '../../static/img/yue.png'
					},
					{
						type: 1,
						tit: '消费券',
						img: '../../static/icon/xfq.png'
					},
					{
						type: 2,
						tit: '积分',
						img: '../../static/icon/jf.png'
					}
				]
			};
		},
		onLoad(option) {
			this.loadlist;
			// this.userinfo = uni.getStorageSync('userInfo');
			// 加载用户数据
			this.getUserInfo();
			// #ifdef H5
			// 获取是否为微信内核浏览器
			this.showSqr = uni.getStorageSync('weichatBrowser') || false;
			weixindata();
			// #endif
		},
		onReady() {
			// Voice('成功收款100000000元')
		},
		onShow() {
			// 开启倒计时
			// Voice('开启语音播报')
			this.setTimePay();
			// uni.showModal({
			// 	title: '提示',
			// 	content: '是否开启语音播报',
			// 	success: function(res) {
			// 		if (res.confirm) {
			// 			Voice({
			// 				voiceSet: {
			// 					tex: '开启语音播报'
			// 				},
			// 				audioSet: {
			// 					volume: 1
			// 				},
			// 				lineUp: true // 加入语音队列
			// 			});
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消');
			// 		}
			// 	}
			// });

		},
		onHide() {
			this.outInterval();
		},
		// 监听页面卸载
		onUnload() {
			// 关闭倒计时
			this.outInterval();
		},
		// 监听页面后退
		onBackPress() {
			// 关闭倒计时
			this.outInterval();
		},
		methods: {
			// 关闭倒计时
			outInterval() {
				clearInterval(this.setTimeOutPay);
				clearInterval(this.getMoneyList);
			},
			// 获取收款记录
			collectionLst() {
				collectionLst()
					.then(e => {
						console.log(e);
						// 循环处理播报语音
						e.data.data.forEach((d, ind) => {
							Voice({
								voiceSet: {
									tex: '满园春收款' + (+d.amount - d.service_charge) + '元',

								},
								audioSet: {
									volume: 1
								},
								lineUp: true // 加入语音队列
							});
							//清除记录
							collectionSetTip({
								id: d.id
							});
						});
					})
					.catch(e => {});
			},
			// 获取用户信息
			getUserInfo() {
				let obj = this;
				getUserInfo({})
					.then(({
						data
					}) => {
						obj.userinfo = data;
						// 加载收款码
						obj.receivedCollectionCode();
						// 调用循环
						// obj.setTimePay();
						// #ifdef H5
						// uni.showModal({
						// 	title: '提示',
						// 	content: '打开支付提示成功！',
						// 	showCancel: false
						// });
						// #endif
					})
					.catch(e => {
						console.log(e);
					});
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close(done) {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
				// ...
				done();
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(done, value) {
				// 输入框的值
				console.log(this.code, value, this.payTypeShow, '+++++++++++++++++++');
				receivedPaymentCreate({
						code: this.code,
						amount: value,
						type: this.payTypeShow
					})
					.then(e => {
						console.log(e, '123456');
						uni.showModal({
							title: '提示',
							content: '成功',
							showCancel: false
						});
					})
					.catch(e => {
						uni.showModal({
							title: '提示',
							content: e.message,
							showCancel: false
						});
						console.log(e);
					});
				// TODO 做一些其他的事情，手动执行 done 才会关闭对话框
				// ...
				done();
			},
			// payVdeo(){

			// 	    var mess = document.getElementById('ttsText').value;
			// 	    var msg = new SpeechSynthesisUtterance(mess);
			// 	    msg.volume = 100;
			// 	    msg.rate = 1;
			// 	    msg.pitch = 1.5;
			// 	    console.log(msg);
			// 	    window.speechSynthesis.speak(msg);
			// },
			// 开启循环倒计时
			setTimePay() {
				// 判断当前是否为付款码
				if (this.actionInd == 0) {
					this.setTimeOutPay = setInterval(() => {
						this.receivedCodeState();
					}, 5000);
				}
				// 获取首付款信息
				this.getMoneyList = setInterval(e => {
					this.collectionLst();
				}, 5000);
			},
			bang() {
				this.$refs.bang.open();
			},
			cancelpass() {
				this.$refs.bang.close();
				this.spread_uid = '';
			},
			// 绑定上级
			cast() {
				if (!this.spread_uid) {
					return this.$api.msg('请输入上级ID');
				}
				m_spread({
					spread_uid: this.spread_uid
				}).then(e => {
					this.getUserInfo();
					this.$api.msg('绑定成功');
					this.cancelpass();
				});
			},
			// 判断付款码是否可以使用
			receivedCodeState() {
				let obj = this;
				// 查询是否过期
				receivedCodeState({
						code: obj.val
					})
					.then(e => {
						// 无效
						if (e.msg == 'overdue') {
							obj.receivedPaymentCode();
						}
						// 已使用
						else if (e.msg == 'use') {
							uni.showModal({
								title: '提示',
								content: '已支付成功',
								showCancel: false
							});
							obj.receivedPaymentCode();
						}
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 开启验证是否已经过期或使用付款成功
			// receivedCodeState(){

			// },
			// 跳转到记录页面
			openList() {
				clearInterval(this.setTimeOutPay);
				clearInterval(this.getMoneyList);
				// this.$refs.popup1.open();
				// uni.navigateTo({
				// 	url: '/pages/wallet/wallet'
				// });
				uni.navigateTo({
					url: './list'
				});
			},
			//点击首付款事件
			clickItem(item) {
				// 更新付款码
				if (item === 0) {
					this.receivedPaymentCode();
					this.outInterval();
					this.setTimePay();
					uni.setNavigationBarColor({
						backgroundColor: '#4b8fdb',
						frontColor: '#ffffff',
						success: e => {
							console.log(e);
						},
						fail: function(e) {
							console.log(e);
						}
					});
				}
				// 更新收款码
				if (item === 1) {
					clearInterval(this.setTimeOutPay);
					uni.setNavigationBarColor({
						backgroundColor: '#5DBC7C',
						frontColor: '#ffffff',
						success: e => {
							console.log(e);
						},
						fail: function(e) {
							console.log(e);
						}
					});
					this.receivedCollectionCode();
				}
				// 扫码收付款
				if (item === 2) {
					clearInterval(this.setTimeOutPay);
					this.ToChangeInto();
					return;
				}
				// 赋值
				this.actionInd = item;
			},
			// 扫码
			ToChangeInto() {
				let obj = this;
				// #ifdef H5
				this.weichatObj.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						let i = res.resultStr.split(',');
						obj.code = i[0];
						obj.payTypeShow = i[1] * 1;
						obj.isSkm = /^\d+$/.test(obj.code);

						obj.$refs.popup1.open();
					}
				});
				// #endif
				// #ifndef H5
				uni.scanCode({
					onlyFromCamera: true,
					success: function(e) {
						let i = e.result.split(',');
						obj.code = i[0];
						obj.isSkm = /^\d+$/.test(obj.code);
						console.log(obj.isSkm);
						obj.payTypeShow = i[1] * 1;
						obj.$refs.popup1.open();
					}
				});
				// #endif
			},
			// 扫码成功数据处理
			scanQR(e) {},
			// 获取付款码
			receivedPaymentCode() {
				receivedPaymentCode({
						type: this.payType
					})
					.then(e => {
						this.val = e.data.code;
						let code = ',' + this.payType;
						this.val += code;
						console.log(e);
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 获取收款码
			receivedCollectionCode() {
				receivedCollectionCode()
					.then(e => {
						this.val = e.msg;
						console.log(e);
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 創建二维码
			creatQrcode() {
				console.log(this.$refs.qrcode._makeCode);
				this.$refs.qrcode._makeCode();
			},
			// 保存二维码到图库
			saveQrcode() {
				this.$refs.qrcode._saveCode();
			},
			// 生成二维码后返回base64
			qrR(res) {
				this.src = res;
			},
			//清空二维码（清空二维码会触发result回调 返回值为空）
			clearQrcode(e) {
				this.$refs.qrcode._clearCode();
				this.val = '';
			},
			// 保存二维码
			upload() {
				this.$refs.qrcode._saveCode();
			},
			openApp() {
				let weixinObj = require('jweixin-module');
			},
			showChooseType() {
				this.$refs.popupPay.open();
			},
			changePayType(index) {
				this.payType = index;
			},
			qrchange() {
				this.showPayType = this.payType;
				this.$refs.popupPay.close();
				console.log(this.payType);
				this.clickItem(0);
			},
			changeShowPayType(e) {
				this.payTypeShow = e;
			}
		}
	};
</script>

<style lang="scss">
	.content,
	page {
		// border-top: 2rpx solid #f2f3f5;
		background-color: $base-color;
		height: 100%;
	}

	// 共有底部高度
	$btHeight: 100rpx;

	.btHeight {
		height: $btHeight;
	}

	.greenBg {
		background-color: $base-color;
	}

	.blueBg {
		background-color: #e6b840;
	}

	.coupon_transfer {
		// background-color: #ffffff;
		padding: 20rpx 25rpx;
		padding-top: 50rpx;
		// padding-bottom: 130rpx;
		width: 100%;
		// margin-top: 25rpx;

		.user {
			margin-bottom: -125rpx;
			height: 200rpx;
			line-height: 1;

			.imgbox {
				margin: 0 auto;
				text-align: center;

				.img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 999rpx;
				}
			}

			.niceName {
				text-align: center;
				font-size: $font-lg;
				margin-top: 15rpx;
				font-weight: bold;
				color: $font-color-dark;
			}
		}
	}

	.erwema {
		width: 686rpx;
		// height: 817rpx;
		height: 900rpx;
		background-color: #ffffff;
		padding-top: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0rpx auto;

		.setType {
			height: 130rpx;
			justify-content: flex-start;

			.type-wrapper {
				text-align: left;
				flex-grow: 1;
			}

			.type-logo {
				width: 56rpx;
				height: 54rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
			}

			.sele-wrap {
				width: 50rpx;
				height: 100%;
				flex-shrink: 0;
				display: flex;
				align-items: center;

				.selecte-ic {
					justify-items: flex-end;
					width: 13rpx;
					height: 36rpx;
					transform: rotate(-90deg);
				}
			}
		}

		.qrbox {
			width: 500rpx;
			text-align: center;
			font-weight: bold;

			.payMoney {
				font-size: 50rpx;
				// margin-top: 80rpx;
				color: $font-color-dark;
				font-weight: bold;
			}

			.setMoney {
				font-size: $font-base;
				color: $base-color;
				margin-top: 20rpx;
			}
		}
	}

	/deep/ .qrbox .img {
		margin-top: -500rpx !important;
	}

	/deep/ .tki-qrcode {
		// height: 500rpx;
		line-height: 0;
		margin-top: 10rpx;
	}

	.bottomTab {
		padding: 50rpx;
		padding-top: 20rpx;
		// position: fixed;
		// padding-bottom: 50rpx;
		// left: 0;
		// bottom: 0;
		width: 100%;

		.item1 {
			text-align: center;
			color: #ffffff;
			opacity: 0.7;
			flex-grow: 1;
			line-height: 1;

			.img {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				font-size: $font-lg;
			}

			&.action {
				opacity: 1;
			}
		}
	}

	.popup-box {
		position: relative;
		z-index: 100;
		width: 100%;
		height: auto;
		background: #ffffff;

		.popup-pay {
			position: relative;
			justify-content: space-between;

			// padding: 0rpx 25rpx 32rpx 25rpx;
			.paybox-top {
				padding-top: 38rpx;
				padding-left: 32rpx;
				width: 100%;

				.type {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.image {
					padding-right: 24rpx;
					padding-bottom: 10rpx;

					image {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}

			.paybox-main {
				padding-left: 40rpx;
				width: 100%;
				margin-top: 54rpx;
				margin-bottom: 54rpx;

				.zftype {
					padding-left: 5rpx;

					image {
						width: 38rpx;
						height: 40rpx;
					}

					.zf {
						padding-left: 18rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #3f454b;
					}
				}
			}

			.paybtn {
				width: 750rpx;
				line-height: 93rpx;
				background: #75ba82;

				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				text-align: center;
			}
		}

		.buttom {
			position: relative;
			z-index: 100;
			width: 100%;
			height: 113rpx;
			padding-top: 20rpx;
			align-items: center;

			.heji {
				height: 100%;
				width: 50%;
				padding-left: 23rpx;
				padding-top: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3f454b;

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ff0000;

					.money {
						font-size: 36rpx;
					}
				}
			}

			.zhifu {
				width: 50%;
				height: 92rpx;
				background: #5dbc7c;
				text-align: center;
				line-height: 92rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}

	.add-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 16rpx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		font-size: $font-lg;
		color: #fff;
		border-radius: 10rpx;
	}

	.psw-wrapper {
		width: 634rpx;

		.tc-bg {
			width: 634rpx;
			height: 275rpx;
			vertical-align: top;
		}

		.psw-wrapper-main {
			position: relative;
			z-index: 3;
			margin-top: -10rpx;
			padding: 26rpx 62rpx 45rpx;
			width: 634rpx;
			background: #ffffff;
		}

		.psw-title {
			width: 100%;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #161222;
			padding: 10rpx 0 40rpx;
			text-align: center;
		}

		.psw-ipt {
			padding: 0 20rpx;
			width: 510rpx;
			height: 80rpx;
			background: #e4eef7;
			border-radius: 10rpx;
		}

		.psw-btn {
			width: 510rpx;
			height: 80rpx;
			background: linear-gradient(270deg, #558dff, #aa6bff);
			border-radius: 10rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 80rpx;
			text-align: center;
			margin-top: 30rpx;
		}

		.x {
			width: 80rpx;
			height: 80rpx;
			margin: 32rpx auto 0;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>