123456

components/ljs-turntable/index.js

@@ -0,0 +1,182 @@
+const powerMax = 200; // 最大力量值
+const powerMin = Math.floor(powerMax/2) + 1; // 最小力量值
+const decline = powerMax/10000; // 衰退
+export default {
+	data() {
+		return {
+			truntableData: [], // 转盘数据
+			color: ["#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8a425","#ff7aab","#e84b1e","#552ce2","#e8861e","#d441ff","#9c7aff"],
+			timerRun: false, // 工具是否已开始
+			transform: null, 
+			allPower: [], // 力量集合
+		}
+	},
+	props: {
+		list: Array, // 转盘基础数据。基础数据参照‘list参数’
+		show: Boolean, // 显示组件：默认不显示
+		// 每次转完是否默认回起始位置
+		startPosition: {
+			type: Boolean,
+			default: true
+		},
+		// 是否启用概率算法，默认按照扇形面积占比的大小出奖。开启概率算法，需要同时设置startPosition为true，否则会出现异常。
+		probabilityTag: {
+			type: Boolean,
+			default: false
+		},
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		// 隐藏组件
+		close(){
+			if(this.timerRun){
+				uni.showToast({
+					title: '请耐心等待',
+					duration: 1500,
+					icon: "none"
+				});
+				return
+			}
+			this.$emit("turntableState", false);
+		},
+		// 点击开始按钮
+		go(){
+			if(this.timerRun){
+				uni.showToast({
+					title: '请耐心等待',
+					duration: 1500,
+					icon: "none"
+				});
+				return
+			}
+			this.timerRun = true;
+			let power = 0;
+			if (this.probabilityTag) {
+				power = this.allPower[Math.floor((Math.random()*this.allPower.length))]; //随机获取一个力量值 - 有概率
+			} else {
+				power = this.rand(powerMin, powerMax); //随机获取一个力量值 - 无概率
+			}
+			let jiaodu = 0; // 旋转的角度
+			let timer = setInterval(()=>{
+				if(Number(power.toFixed(4)) <= 0){
+					clearInterval(timer);
+					this.getData(jiaodu%360);
+				}
+				jiaodu += power;
+				// #ifdef H5
+				document.getElementById("rotateBoard").style.transform = 'rotate('+ jiaodu +'deg)';
+				// #endif
+				// #ifdef MP-WEIXIN || APP-PLUS
+				this.transform = 'rotate('+ jiaodu +'deg)'
+				// #endif
+				
+				power = (power - power*decline) < decline?0:power - power*decline;
+				// console.log(power)
+			}, 10)
+		},
+		// 获取[m, n]的随机数
+		rand(m, n)  {
+		    return Math.ceil(Math.random() * (n-m+1) + m-1)
+		},
+		// 按照概率获取力量的中奖数据集合
+		getPowerResult() {
+			const allPower = [];
+			for(let i = powerMin; i <= powerMax; i++){
+				allPower.push(i);
+			}
+			this.allPower = this.getModeResult(allPower);
+		},
+		// 获取模拟结果
+		getModeResult(allPower){
+			const powerPrizes = [];
+			const tempJs = powerMax - powerMin + 1;
+			allPower.forEach((item) => {
+				let power = item; //随机获取一个力量值
+				let jiaodu = 0; // 旋转的角度
+				while (Number(power.toFixed(4)) > 0) {
+					jiaodu += power;				
+					power = (power - power*decline) < decline?0:power - power*decline;
+				}
+				const deg = 360 - jiaodu%360;
+				let prize = null;
+				let nums = this.list.length;
+				for(let i = 0; i < nums; i++){
+					if(this.list[i].start <= deg && deg < this.list[i].start + this.list[i].prop*10){
+						if (this.list[i].result.length/tempJs < this.list[i].probability) {
+							this.list[i].result.push(item);
+							powerPrizes.push(item);
+						}
+						break;
+					}
+				}
+			});
+			// 不够的进行补入
+			let nums = this.list.length;
+			for(let i = 0; i < nums; i++){
+				if (this.list[i].result.length/tempJs < this.list[i].probability) {
+					const n = Number((Number((this.list[i].probability - this.list[i].result.length/tempJs).toFixed(2)) * tempJs).toFixed(0));
+					for(let j = 0; j < n; j++){
+						this.list[i].result.push(this.list[i].result[0]);
+						powerPrizes.push(this.list[i].result[0]);
+					}
+				}
+			}
+			return powerPrizes;
+		},
+		// 通过旋转得角度，获取当前指向得奖品
+		getData(deg){
+			deg = 360 - deg;
+			let prize = null;
+			let nums = this.list.length;
+			for(let i = 0; i < nums; i++){
+				if(this.list[i].start <= deg && deg < this.list[i].start + this.list[i].prop*10){
+					prize = this.list[i];
+					
+					this.$emit("getPrize", prize.state, prize.id, prize.name)
+					this.timerRun = false;
+					if (this.startPosition) {
+						this.initJiaodu();
+					}
+					// this.BASE.msg(prize.name, 2000);
+					break;
+				}
+			}
+		},
+		// 重置角度
+		initJiaodu(){
+			const jiaodu = 0;
+			setTimeout(() => {
+				// #ifdef H5
+				document.getElementById("rotateBoard").style.transform = 'rotate('+ jiaodu +'deg)';
+				// #endif
+				// #ifdef MP-WEIXIN || APP-PLUS
+				this.transform = 'rotate('+ jiaodu +'deg)'
+				// #endif
+			}, 10);
+		},
+		init(){
+			let tempStart = 0;
+			let tempScale = 0;
+			this.list.forEach((item, i)=>{
+				item["result"] = []; // 中奖的力量集合
+				item["scale"] = item.prop*10 - 90; // 所占弧度的度数
+				item["scaleText"] = tempScale + (90 + (item.prop*10 - 90))/2; // 文字的回旋角度
+				item["sin"] = Math.sin(Math.PI*2*item.scaleText/360)*160; // 正弦
+				item["cos"] = Math.cos(Math.PI*2*item.scaleText/360)*160; // 余弦
+				tempScale = tempScale + 90 + (item.prop*10 - 90);
+				if(i !== 0){
+					tempStart = tempStart + this.list[i - 1].prop*10;
+				}
+				item["start"] = tempStart;
+			});
+			this.truntableData = this.list;
+			
+			// 按照概率获取力量的中奖数据集合
+			if (this.probabilityTag) {
+				this.getPowerResult();
+			}
+		},
+	}
+}

components/ljs-turntable/ljs-turntable.vue

@@ -0,0 +1,35 @@
+<template>
+	<view class="ljs-turntable" v-if="show">
+		<!-- <view class="close" @click="close">
+			<image class="ico" :src="require('./images/ico_close.png')"></image>
+		</view> -->
+		<view class="box">
+		</view>
+		<view class="box2">
+		</view>
+		<view class="but" @click="go">
+			<image class="pic" src="../../static/user/prizebtn.png">
+			</image>
+		</view>
+		<view class="rotateBoard" id="rotateBoard" ref="rotateBoard"
+			:style="transform !== null?'transform:'+ transform:''">
+			<view v-for="(item, i) in truntableData" :key="i" class="sector"
+				:style="{'transform': `rotate(${item.start}deg) skewY(${item.scale}deg)`, 'background': color[i]}">
+			</view>
+			<view class="name" v-for="(item, i) in truntableData" :key="`t${i}`"
+				:style="{'transform': `rotate(${item.scaleText}deg)`, 'left': (310 + item.sin) + 'rpx', 'top': (160 - item.cos) +'rpx'}">
+				{{item.name}}
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import index from './index.js'
+	export default index
+</script>
+
+<style lang="scss" scoped>
+	@import "./style.scss"
+</style>

pages.json

@@ -77,7 +77,14 @@
 			"style": {
 				"navigationBarTitleText": "联盟礼包"
 			}
-		}, {
+		},
+		{
+			"path": "pages/product/supermarket",
+			"style": {
+				"navigationBarTitleText": "超市"
+			}
+		},
+		{
 			"path": "pages/myteam/myteam",
 			"style": {
 				"navigationBarTitleText": "我的团队",
@@ -468,6 +475,12 @@
 				}
 			}
 		},
+		{
+			"path": "pages/sign/prize",
+			"style": {
+				"navigationBarTitleText": "抽奖"
+			}
+		},
 		{
 			"path": "pages/redirect/redirect",
 			"style": {
@@ -572,6 +585,24 @@
 				}
 			}
 		},
+		{
+			"path": "pages/received/ipad",
+			"style": {
+				"navigationBarTitleText": "收款",
+				"app-plus": {
+					"titleNView": {
+						"backgroundColor": "#5DBC7C",
+						"titleColor": "#FFFFFF"
+					}
+				},
+				"h5": {
+					"titleNView": {
+						"backgroundColor": "#5DBC7C",
+						"titleColor": "#FFFFFF"
+					}
+				}
+			}
+		},
 		{
 			"path": "pages/received/list",
 			"style": {

pages/cart/cart.vue

@@ -466,7 +466,7 @@
 	/* 底部栏 */
 	.action-section {
 		/* #ifdef H5 */
-		margin-bottom: 97rpx;
+		margin-bottom: 168rpx;
 		/* #endif */
 		position: fixed;
 		left: 0rpx;
@@ -598,9 +598,10 @@
 		line-height: 88rpx;
 		padding-left: 28rpx;
 		padding-right: 26rpx;
-		position:sticky;
+		position: sticky;
 		top: 10rpx;
 		z-index: 99;
+
 		.hand-tit {
 			text {
 				color: #FF4C4C;
@@ -727,4 +728,4 @@
 
 		}
 	}
-</style>
+</style>

pages/index/index.vue

@@ -51,19 +51,19 @@
 				<image src="../../static/icon/in5.png"></image>
 				<text>消费券商城</text>
 			</view>
-			<view class="cate-item" @click="navTo('/pages/shoping/shopService')">
+			<view class="cate-item" @click="navTo('/pages/shoping/shopService','2')">
 				<image src="../../static/icon/in6.png"></image>
 				<text>养发馆</text>
 			</view>
-			<view class="cate-item">
+			<view class="cate-item" @click="navTo('/pages/product/supermarket')">
 				<image src="../../static/icon/in7.png"></image>
 				<text>超市</text>
 			</view>
 			<view class="cate-item" @click="navTo('/pages/product/classify?type=7')">
 				<image src="../../static/icon/in8.png"></image>
-				<text>商城</text>
+				<text>百业商品</text>
 			</view>
-			<view class="cate-item">
+			<view class="cate-item" @click="navTo('/pages/sign/prize')">
 				<image src="../../static/icon/in9.png"></image>
 				<text>签到</text>
 			</view>
@@ -73,13 +73,13 @@
 			</view>
 		</view>
 		<view class="cate-two flex">
-			<view class="catet-item">
+			<view class="catet-item" @click="navTo('/pages/sign/index','2')">
 				<image class="catet-icon" src="../../static/icon/in11.png" mode="heightFix"></image>
 				<view class="catet-font">
 					民间偏方
 				</view>
 			</view>
-			<view class="catet-item">
+			<view class="catet-item" @click="navTo('/pages/sign/index','2')">
 				<image class="catet-icon" src="../../static/icon/in12.png" mode="heightFix"></image>
 				<view class="catet-font">
 					成人用品
@@ -192,7 +192,11 @@
 		},
 		data() {
 			return {
-				indexList: [],
+				indexList: [{
+					stopTimeH: 1,
+					stopTimeM: 1,
+					stopTimeS: 1
+				}],
 				titleNViewBackground: '',
 				swiperCurrent: 0,
 				swiperLength: 0,
@@ -359,7 +363,10 @@
 					url: '/pages/product/search'
 				});
 			},
-			navTo(url) {
+			navTo(url, type = 1) {
+				if (type == 2) {
+					return this.$api.msg('敬请期待')
+				}
 				if (!this.hasLogin) {
 					url = '/pages/public/login';
 					// #ifdef H5

pages/myteam/myteam.vue

@@ -2,9 +2,13 @@
 	<view class="content">
 		<view class="content-money">
 			<view class="money-box">
-				<view class="bg"><image src="../../static/img/team.png" mode=""></image></view>
+				<view class="bg">
+					<image src="../../static/img/team.png" mode=""></image>
+				</view>
 				<view class="body-title">
-					<view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view>
+					<view class="goback-box" @click="toBack">
+						<image class="goback" src="../../static/icon/fanhui.png" mode=""></image>
+					</view>
 					<view class="header">我的团队</view>
 				</view>
 				<view>
@@ -13,12 +17,14 @@
 			</view>
 		</view>
 		<view class="navbar">
-			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
+			<view v-for="(item, index) in navList" :key="index" class="nav-item"
+				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
 				<text>{{ item.num }}</text>
 				<text>{{ item.text }}</text>
 			</view>
 		</view>
-		<swiper :current="tabCurrentIndex" :style="{ height: maxheight + 'px' }" class="swiper-box" duration="300" @change="changeTab">
+		<swiper :current="tabCurrentIndex" :style="{ height: maxheight + 'px' }" class="swiper-box" duration="300"
+			@change="changeTab">
 			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
 				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
 					<!-- 空白页 -->
@@ -29,7 +35,7 @@
 						<!-- 订单列表 -->
 						<image :src="item.avatar" class="andr-mt-avatar andr-mt-marR20"></image>
 						<view class="andr-mt-flex andr-mt-fdC">
-							<text class="andr-mt-lname">{{ item.nickname }}</text>
+							<text class="andr-mt-lname">{{ item.nickname || 'null' }}</text>
 							<text class="andr-mt-ltime">{{ item.time }}</text>
 						</view>
 					</view>
@@ -41,323 +47,362 @@
 </template>
 
 <script>
-import { spreadPeople } from '@/api/myteam.js';
-import { userinfo } from '@/api/user.js';
-import { mapState, mapMutations } from 'vuex';
-import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
-import empty from '@/components/empty';
-export default {
-	components: {
-		empty,
-		uniLoadMore
-	},
-	onReady(res) {
-		var _this = this;
-		uni.getSystemInfo({
-			success: resu => {
-				console.log(resu,'11111');
-				const query = uni.createSelectorQuery();
-				query.select('.swiper-box').boundingClientRect();
-				query.exec(function(res) {
-					console.log(res, 'ddddddddddddd');
-					_this.maxheight = resu.windowHeight - res[0].top;
-					console.log('打印页面的剩余高度', _this.maxheight);
-				});
-			},
-			fail: res => {}
-		});
-	},
-	data() {
-		return {
-			userInfo: {},
-			// 头部图高度
-			maxheight: '',
-			tabCurrentIndex: 0,
-			navList: [
-				{
-					state: 0,
-					text: '一级推广',
-					loadingType: 'more',
-					num: 0, //人数
-					orderList: [],
-					page: 1, //当前页数
-					limit: 10 //每次信息条数
+	import {
+		spreadPeople
+	} from '@/api/myteam.js';
+	import {
+		userinfo
+	} from '@/api/user.js';
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import empty from '@/components/empty';
+	export default {
+		components: {
+			empty,
+			uniLoadMore
+		},
+		onReady(res) {
+			var _this = this;
+			uni.getSystemInfo({
+				success: resu => {
+					console.log(resu, '11111');
+					const query = uni.createSelectorQuery();
+					query.select('.swiper-box').boundingClientRect();
+					query.exec(function(res) {
+						console.log(res, 'ddddddddddddd');
+						_this.maxheight = resu.windowHeight - res[0].top;
+						console.log('打印页面的剩余高度', _this.maxheight);
+					});
 				},
-				{
-					state: 1,
-					text: '二级推广',
-					num: 0, //团队人数
-					loadingType: 'more',
-					orderList: [],
-					page: 1, //当前页数
-					limit: 10 //每次信息条数
-				}
-			],
-			all: 0
-		};
-	},
-	onLoad(options) {},
-	onShow() {
-		this.loadData();
-		// 获取用户积分
-		let obj = this;
-		userinfo({})
-			.then(({ data }) => {
-				console.log(data);
-				obj.userInfo = data;
-			})
-			.catch(e => {});
-	},
-	methods: {
-		// 页面跳转
-		navto(e) {
-			uni.navigateTo({
-				url: e
+				fail: res => {}
 			});
 		},
-		//返回上一页面
-		toBack() {
-			console.log(111);
-			uni.navigateBack({});
+		data() {
+			return {
+				userInfo: {},
+				// 头部图高度
+				maxheight: '',
+				tabCurrentIndex: 0,
+				navList: [{
+						state: 0,
+						text: '一级推广',
+						loadingType: 'more',
+						num: 0, //人数
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 1,
+						text: '二级推广',
+						num: 0, //团队人数
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					}
+				],
+				all: 0
+			};
 		},
-		//获取收入支出信息
-		async loadData(source) {
+		onLoad(options) {},
+		onShow() {
+			this.loadData();
+			// 获取用户积分
 			let obj = this;
-			//这里是将订单挂载到tab列表下
-			let index = obj.tabCurrentIndex;
-			let navItem = obj.navList[index];
-			let state = navItem.state;
-			if (source === 'tabChange' && navItem.loaded === true) {
-				//tab切换只有第一次需要加载数据
-				return;
-			}
-			if (navItem.loadingType === 'loading') {
-				//防止重复加载
-				return;
-			}
-			// 修改当前对象状态为加载中
-			navItem.loadingType = 'loading';
-			spreadPeople({
-				page: navItem.page,
-				limit: navItem.limit,
-				grade: state,
-				keyword: '',
-				sort: ''
-			})
-				.then(({ data }) => {
-					obj.navList[0].num = data.total;
-					obj.navList[1].num = data.totalLevel;
-					if (data.list.length > 0) {
-						navItem.orderList = navItem.orderList.concat(data.list);
-						console.log(navItem.orderList);
-						navItem.page++;
-					}
-					obj.all = data.total*1 + data.totalLevel*1
-					if (navItem.limit == data.list.length) {
-						//判断是否还有数据， 有改为 more， 没有改为noMore
-						navItem.loadingType = 'more';
-						return;
-					} else {
-						//判断是否还有数据， 有改为 more， 没有改为noMore
-						navItem.loadingType = 'noMore';
-					}
-					uni.hideLoading();
-					obj.$set(navItem, 'loaded', true);
+			userinfo({})
+				.then(({
+					data
+				}) => {
+					console.log(data);
+					obj.userInfo = data;
 				})
-				.catch(e => {
-					console.log(e);
-				});
+				.catch(e => {});
 		},
+		methods: {
+			// 页面跳转
+			navto(e) {
+				uni.navigateTo({
+					url: e
+				});
+			},
+			//返回上一页面
+			toBack() {
+				console.log(111);
+				uni.navigateBack({});
+			},
+			//获取收入支出信息
+			async loadData(source) {
+				let obj = this;
+				//这里是将订单挂载到tab列表下
+				let index = obj.tabCurrentIndex;
+				let navItem = obj.navList[index];
+				let state = navItem.state;
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+				spreadPeople({
+						page: navItem.page,
+						limit: navItem.limit,
+						grade: state,
+						keyword: '',
+						sort: ''
+					})
+					.then(({
+						data
+					}) => {
+						obj.navList[0].num = data.total;
+						obj.navList[1].num = data.totalLevel;
+						if (data.list.length > 0) {
+							navItem.orderList = navItem.orderList.concat(data.list);
+							console.log(navItem.orderList);
+							navItem.page++;
+						}
+						obj.all = data.total * 1 + data.totalLevel * 1
+						if (navItem.limit == data.list.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+						}
+						uni.hideLoading();
+						obj.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
 
-		//swiper 切换
-		changeTab(e) {
-			this.tabCurrentIndex = e.target.current;
-			this.loadData('tabChange');
-		},
-		//顶部tab点击
-		tabClick(index) {
-			this.tabCurrentIndex = index;
+			//swiper 切换
+			changeTab(e) {
+				this.tabCurrentIndex = e.target.current;
+				this.loadData('tabChange');
+			},
+			//顶部tab点击
+			tabClick(index) {
+				this.tabCurrentIndex = index;
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-page {
-	background: #ffffff;
-	height: 100%;
-}
-
-.content-money {
-	background: $page-color-base;
-}
-.money-box {
-	background-color: $base-color;
-	padding-top: var(--status-bar-height);
-	height: 468rpx;
-	color: #ffffff;
-	text-align: center;
-	justify-content: center;
-	position: relative;
-	.body-title {
-		height: 80rpx;
+	page {
+		background: #ffffff;
+		height: 100%;
+	}
+
+	.content-money {
+		background: $page-color-base;
+	}
+
+	.money-box {
+		background-color: $base-color;
+		padding-top: var(--status-bar-height);
+		height: 468rpx;
+		color: #ffffff;
 		text-align: center;
-		font-size: 35rpx;
+		justify-content: center;
 		position: relative;
-		.header {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			font-size: 36rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #fffeff;
+
+		.body-title {
 			height: 80rpx;
-			font-size: 32rpx;
-			font-weight: 700;
-			z-index: 9;
-			display: flex;
-			justify-content: center;
-			align-items: center;
+			text-align: center;
+			font-size: 35rpx;
+			position: relative;
+
+			.header {
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				font-size: 36rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #fffeff;
+				height: 80rpx;
+				font-size: 32rpx;
+				font-weight: 700;
+				z-index: 9;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.goback-box {
+				position: absolute;
+				z-index: 10;
+				left: 24rpx;
+				top: 0;
+				height: 80rpx;
+				display: flex;
+				align-items: center;
+			}
+
+			.goback {
+				width: 30rpx;
+				height: 36rpx;
+			}
 		}
-		.goback-box {
+
+		.bg {
 			position: absolute;
-			z-index: 10;
-			left: 24rpx;
 			top: 0;
-			height: 80rpx;
-			display: flex;
-			align-items: center;
-		}
-		.goback {
-			width: 30rpx;
-			height: 36rpx;
-		}
-	}
-	.bg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		image {
+			left: 0;
 			width: 100%;
 			height: 100%;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
 		}
-	}
-	.money {
-		position: relative;
-		z-index: 10;
-		font-size: 36rpx;
-		height: 388rpx;
-		line-height: 288rpx;
-		text{
-			font-size: 82rpx;
+
+		.money {
+			position: relative;
+			z-index: 10;
+			font-size: 36rpx;
+			height: 388rpx;
+			line-height: 288rpx;
+
+			text {
+				font-size: 82rpx;
+			}
 		}
 	}
-}
-
-.navbar {
-	width: 700rpx;
-	margin: -60rpx auto 0;
-	display: flex;
-	height: 120rpx;
-	padding: 0 5px;
-	background: #fff;
-	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
-	position: relative;
-	z-index: 10;
-	.nav-item {
-		flex: 1;
+
+	.navbar {
+		width: 700rpx;
+		margin: -60rpx auto 0;
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		font-size: 15px;
-		color: $font-color-dark;
+		height: 120rpx;
+		padding: 0 5px;
+		background: #fff;
+		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
 		position: relative;
-		&.current {
-			color: $base-color;
-			&:after {
-				content: '';
-				position: absolute;
-				left: 50%;
-				bottom: 0;
-				transform: translateX(-50%);
-				width: 44px;
-				height: 0;
-				border-bottom: 2px solid $base-color;
+		z-index: 10;
+
+		.nav-item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			font-size: 15px;
+			color: $font-color-dark;
+			position: relative;
+
+			&.current {
+				color: $base-color;
+
+				&:after {
+					content: '';
+					position: absolute;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+					width: 44px;
+					height: 0;
+					border-bottom: 2px solid $base-color;
+				}
 			}
 		}
 	}
-}
-// 列表
-
-.swiper-box {
-	padding-top: 30rpx;
-	.order-item {
-		padding: 20rpx 30rpx;
-		line-height: 1.5;
-		.title-box {
-			.title {
-				font-size: $font-lg;
-				color: $font-color-base;
+
+	// 列表
+
+	.swiper-box {
+		padding-top: 30rpx;
+
+		.order-item {
+			padding: 20rpx 30rpx;
+			line-height: 1.5;
+
+			.title-box {
+				.title {
+					font-size: $font-lg;
+					color: $font-color-base;
+				}
+
+				.time {
+					font-size: $font-base;
+					color: $font-color-light;
+				}
 			}
-			.time {
-				font-size: $font-base;
-				color: $font-color-light;
+
+			.money {
+				color: #fd5b23;
+				font-size: $font-lg;
 			}
 		}
-		.money {
-			color: #fd5b23;
-			font-size: $font-lg;
+	}
+
+	.list-scroll-content {
+		height: 100%;
+	}
+
+	.content {
+		height: 100%;
+
+		.empty-content {
+			background-color: #ffffff;
 		}
 	}
-}
-.list-scroll-content {
-	height: 100%;
-}
-.content {
-	height: 100%;
-	.empty-content {
+
+	.andr-mt-avatar {
+		width: 78rpx;
+		height: 78rpx;
+		border-radius: 50rpx;
+	}
+
+	.andr-mt-avatarBd {
+		border: 2px solid #ffffff;
+	}
+
+	.andr-mt-cname {
+		font-size: 28rpx;
+		color: #ffffff;
+	}
+
+	.andr-mt-flex {
+		display: flex;
+	}
+
+	.andr-mt-lBox {
 		background-color: #ffffff;
+		height: 130rpx;
+		padding: 20rpx 20rpx;
+		border-bottom: 1px solid #f0f0f0;
+	}
+
+	.andr-mt-marR20 {
+		margin-right: 20rpx;
+	}
+
+	.andr-mt-fdC {
+		flex-direction: column;
+	}
+
+	.andr-mt-lname {
+		font-size: 30rpx;
+		color: #3f454b;
+	}
+
+	.andr-mt-ltime {
+		font-size: 22rpx;
+		color: #999999;
 	}
-}
-.andr-mt-avatar {
-	width: 78rpx;
-	height: 78rpx;
-	border-radius: 50rpx;
-}
-.andr-mt-avatarBd {
-	border: 2px solid #ffffff;
-}
-.andr-mt-cname {
-	font-size: 28rpx;
-	color: #ffffff;
-}
-.andr-mt-flex {
-	display: flex;
-}
-.andr-mt-lBox {
-	background-color: #ffffff;
-	height: 130rpx;
-	padding: 20rpx 20rpx;
-	border-bottom: 1px solid #f0f0f0;
-}
-.andr-mt-marR20 {
-	margin-right: 20rpx;
-}
-.andr-mt-fdC {
-	flex-direction: column;
-}
-.andr-mt-lname {
-	font-size: 30rpx;
-	color: #3f454b;
-}
-.andr-mt-ltime {
-	font-size: 22rpx;
-	color: #999999;
-}
-</style>
+</style>

pages/product/classify.vue

@@ -1,203 +1,203 @@
 <template>
 	<view class="container">
-		<!-- 头部轮播 -->
-		<!-- <view class="carousel-section">
-			<swiper class="carousel" autoplay="true" duration="400" interval="5000">
-				<swiper-item v-for="(item, index) in bannerImg" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
-					<image :src="item.img" mode=" scaleToFill" />
-				</swiper-item>
-			</swiper>
-		</view>
-		<view class="type-title-box flex">
-			<view class="title-border"></view>
-			<view class="title-content">
-				<text v-if="type == 1">精品推荐</text>
-				<text v-if="type == 2">热门榜单</text>
-				<text v-if="type == 3">首发新品</text>
-				<text v-if="type == 4">促销单品</text>
-				<text v-if="type == 5">套餐商品</text>
-			</view>
-			<view class="title-border"></view>
-		</view> -->
-
-		<view class="goodsList-box">
-			<view class="goodsList-item flex" :key="ind" v-for="(ls, ind) in list" @click="navTo(ls)">
-				<image :src="ls.image" mode=" scaleToFill"></image>
-				<view class="goodsList-content">
-					<view class="title">
-						<text>{{ ls.store_name }}</text>
+		<view class="jg"></view>
+		<view v-if="list.length != 0" class="good-wrapper flex" :key="ind" v-for="(good, ind) in list"
+			@click="navTo(good)">
+			<image :src="good.image" mode="" class="good-img"></image>
+			<view class="good-info flex">
+				<view class="tit clamp2">
+					{{good.store_name }}
+				</view>
+				<view class="price-wrap">
+					<view class="old-price">
+						<text class="old">￥{{good.ot_price}}</text>
+						<image src="../../static/icon/down.png" mode=""></image>
+						<text class="zj">直降{{good.price - good.ot_price}}元</text>
 					</view>
-					<view class="goods-money flex">
-						<view class="money-box">
-							<view class="money">
-								<text class="font-size-sm">￥</text>
-								{{ ls.price }}
-							</view>
-							<view class="otMoney-box">
-								<text class="otMoney">￥{{ ls.ot_price }}</text>
-								<text class="sales">已售{{ ls.sales }}件</text>
-							</view>
-						</view>
-						<view class="cart iconfont iconcart"></view>
+					<view class="integral-wrap">
+						<text class="price">￥{{good.ot_price}}</text>
 					</view>
 				</view>
+				<view class="btn">
+					立即购买
+				</view>
 			</view>
 		</view>
+		<empty v-if="list.length === 0"></empty>
+		<view class="jg"></view>
+	</view>
 	</view>
 </template>
 
 <script>
-import { groomList } from '@/api/product.js';
-export default {
-	data() {
-		return {
-			list: [],
-			bannerImg: []
-		};
-	},
-	onLoad(option) {
-		// 获取查询对象
-		this.type = option.type;
-		if (this.type == 7) {
-			uni.setNavigationBarTitle({
-				title: '商家礼包'
-			});
-		}
-		// 加载基础数据
-		this.loadData();
-	},
-	methods: {
-		navTo: function(ls) {
-			uni.navigateTo({
-				url: '/pages/product/product?id=' + ls.id
-			});
+	import empty from '@/components/empty';
+	import {
+		groomList
+	} from '@/api/product.js';
+	export default {
+		data() {
+			return {
+				list: [],
+				bannerImg: []
+			};
 		},
-		// 请求载入数据
-		async loadData() {
-			groomList({}, this.type)
-				.then(({ data }) => {
-					// 保存轮播图
-					this.bannerImg = data.banner;
-					// 保存商品信息
-					this.list = data.list;
-				})
-				.catch(e => {
-					console.log(e);
-				});
+		components: {
+			empty
 		},
-		// 轮播图跳转
-		bannerNavToUrl(item) {
-			// #ifdef H5
-			if (item.wap_link.indexOf('http') > 0) {
-				window.location.href = item.wap_link;
+		onLoad(option) {
+			// 获取查询对象
+			this.type = option.type;
+			if (this.type == 7) {
+				uni.setNavigationBarTitle({
+					title: '商家礼包'
+				});
 			}
-			// #endif
-			if (item.wap_link) {
+			// 加载基础数据
+			this.loadData();
+		},
+		methods: {
+			navTo: function(ls) {
 				uni.navigateTo({
-					url: item.wap_link
+					url: '/pages/product/product?id=' + ls.id
 				});
+			},
+			// 请求载入数据
+			async loadData() {
+				groomList({}, this.type)
+					.then(({
+						data
+					}) => {
+						// 保存轮播图
+						this.bannerImg = data.banner;
+						// 保存商品信息
+						this.list = data.list;
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+			// 轮播图跳转
+			bannerNavToUrl(item) {
+				// #ifdef H5
+				if (item.wap_link.indexOf('http') > 0) {
+					window.location.href = item.wap_link;
+				}
+				// #endif
+				if (item.wap_link) {
+					uni.navigateTo({
+						url: item.wap_link
+					});
+				}
 			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-page {
-	background: $page-color-base;
-}
-.carousel-section {
-	padding: 0;
-	.titleNview-placing {
-		padding-top: 0;
-		height: 0;
-	}
-	.swiper-dots {
-		left: 45rpx;
-		bottom: 40rpx;
+	page {
+		background: $page-color-base;
 	}
-	.carousel {
-		width: 100%;
-		height: 360rpx;
-		.carousel-item {
-			width: 100%;
-			height: 100%;
-			overflow: hidden;
+
+	.good-wrapper {
+		width: 690rpx;
+		height: 276rpx;
+		justify-content: flex-start;
+		align-items: flex-start;
+		margin: 0 auto 20rpx;
+		// &:last-of-type {
+		// 	margin-bottom: 0;
+		// }
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 10rpx;
+		padding: 20rpx 25rpx 20rpx 15rpx;
+
+		.good-img {
+			flex-shrink: 0;
+			background-color: #eee;
+			width: 236rpx;
+			height: 236rpx;
+			border-radius: 10rpx;
+			margin-right: 20rpx;
 		}
-		image {
+
+		.good-info {
+			flex-direction: column;
+			align-items: flex-start;
 			width: 100%;
 			height: 100%;
-		}
-	}
-}
-// 中间标题样式
-.type-title-box {
-	padding: 40rpx;
-	.title-content {
-		height: 100%;
-		width: 200rpx;
-		text-align: center;
-		font-size: $font-lg;
-		font-weight: 500;
-		color: $font-color-dark;
-	}
-	.title-border {
-		width: 250rpx;
-		height: 2rpx;
-		background-color: #e9e9e9;
-	}
-}
-// 商品列表
-.goodsList-box {
-	.goodsList-item {
-		margin-bottom: 40rpx;
-		background-color: #ffffff;
-		padding: 30rpx;
-		image {
-			flex-shrink: 0;
-			border-radius: $border-radius-sm;
-			height: 180rpx;
-			width: 180rpx;
-		}
-		.goodsList-content {
-			padding-left: 20rpx;
-			flex-grow: 1;
-			height: 180rpx;
-			.title {
-				font-size: $font-base;
-				color: $font-color-dark;
+			position: relative;
+
+			.tit {
+				padding-top: 10rpx;
+				padding-right: 15rpx;
+				font-size: 32rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+			}
+
+			.btn {
+				width: 137rpx;
+				line-height: 52rpx;
+				background: linear-gradient(0deg, #52C696 0%, #52C696 100%);
+				border-radius: 26rpx;
+				font-size: 26rpx;
+				font-family: PingFang SC;
 				font-weight: 500;
-				margin-bottom: 50rpx;
+				text-align: center;
+				color: #FFFFFF;
+				position: absolute;
+				bottom: 0;
+				right: 0;
 			}
-			.goods-money {
-				.money-box {
-					.money {
-						font-size: $font-lg;
-						color: $color-red;
-						margin-bottom: 10rpx;
-						font-weight: bold;
+
+			.price-wrap {
+				.old-price {
+
+					.old {
+						font-size: 26rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						text-decoration: line-through;
+						color: #999999;
 					}
-					.otMoney-box {
-						font-size: $font-sm;
-						.otMoney {
-							color: $font-color-dark;
-							padding-right: 20rpx;
-						}
-						.sales {
-							color: $font-color-light;
-						}
+
+					image {
+						display: inline-block;
+						width: 14rpx;
+						height: 20rpx;
+						margin: 0 6rpx 0 10rpx;
+					}
+
+					.zj {
+						font-size: 24rpx;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #B59467;
 					}
 				}
-				.cart {
-					border: 1px solid $color-red;
-					color: $color-red;
-					padding: 10rpx;
-					font-size: $font-base;
-					font-weight: bold;
-					border-radius: 99px;
+
+				.integral-wrap {
+					display: flex;
+					justify-content: flex-start;
+					padding-top: 14rpx;
+
+					image {
+						width: 40rpx;
+						height: 40rpx;
+						margin-right: 8rpx;
+					}
+
+					.price {
+						font-size: 36rpx;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #FF6F0F;
+						line-height: 40rpx;
+					}
 				}
 			}
+
 		}
 	}
-}
-</style>
+</style>

pages/product/supermarket.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="content">
+		<empty v-if="list.length === 0"></empty>
+		<view class="guess" v-if="list.length !=0">
+			<view v-for="(item, index) in list" :key="index" class="guess-item" @click="navToDetailPage(item)">
+				<image :src="item.image"></image>
+				<view class="guess-box">
+					<view class="title clamp">{{ item.store_name }}</view>
+					<view class="guessbtm-box flex">
+						<view class="price">￥{{ item.price }} <text class="yuan">￥{{ item.ot_price }}</text> </view>
+						<image @click.stop="toggleSpec(item.id)" class="btn" src="../../static/icon/cart.png" mode="">
+						</image>
+					</view>
+				</view>
+			</view>
+			<uni-load-more :status="loadingType"></uni-load-more>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import empty from '@/components/empty';
+	import {
+		getProducts,
+		cartAdd
+	} from '@/api/product.js';
+	export default {
+		data() {
+			return {
+				page: 1,
+				limit: 20,
+				loadingType: 'more',
+				list: [],
+			};
+		},
+		components: {
+			empty,
+			uniLoadMore
+		},
+		onLoad() {
+			this.loadData();
+		},
+		onShow() {},
+		onReachBottom() {
+			this.loadData();
+		},
+		onReady() {},
+		methods: {
+			loadData() {
+				if (this.loadingType == 'loading' || this.loadingType == 'nomore') {
+					return
+				}
+				this.loadingType = 'loading'
+				getProducts({
+					page: this.page,
+					limit: this.limit,
+					cid: 1
+				}).then(({
+					data
+				}) => {
+					this.list = this.list.concat(data)
+					this.page++
+					if (data.length != this.limit) {
+						this.loadingType = 'nomore'
+					} else {
+						this.loadingType = 'more'
+					}
+				})
+			},
+			toggleSpec(str) {
+				cartAdd({
+					cartNum: 1, //商品数量
+					uniqueId: '', //商品标签
+					new: 0, //商品是否新增加到购物车1为不加入0为加入
+					mer_id: 0,
+					is_consumer: 0,
+					productId: str
+				}).then(e => {
+					uni.showToast({
+						title: '成功加入购物车',
+						type: 'top',
+						duration: 2000
+					});
+				})
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	page,
+	.content {
+		min-height: 100%;
+		height: auto;
+	}
+
+	.guess {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		padding: 20rpx;
+	}
+
+	.guess-item {
+		margin-top: 20rpx;
+		width: 345rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
+		border-radius: 10rpx;
+
+		image {
+			width: 345rpx;
+			height: 345rpx;
+			border-radius: 10rpx;
+		}
+
+		.guess-box {
+			padding: 28rpx 20rpx;
+			width: 345rpx;
+
+			.title {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+
+
+			.price {
+				font-size: 36rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #FF6B2E;
+
+				.yuan {
+					display: inline-block;
+					margin-left: 10rpx;
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					text-decoration: line-through;
+					color: #989898;
+				}
+			}
+
+			.btn {
+				width: 44rpx;
+				height: 44rpx;
+				background: #00ca95;
+				border-radius: 50rpx;
+
+			}
+		}
+	}
+</style>

pages/received/index.vue

@@ -2,30 +2,19 @@
 	<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="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>
+					<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> -->
@@ -35,30 +24,41 @@
 							<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 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>
+					<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>
+					<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>
+					<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>
+					<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> -->
+		<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>
@@ -67,51 +67,56 @@
 					<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 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>
+			<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="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 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>
+						<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>
+						<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>
+						<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>
@@ -121,736 +126,834 @@
 </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 },
+	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
-	computed: {
-		...mapState(['weichatObj'])
-	},
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		weixindata
+	} from '@/utils/wxAuthorized';
 	// #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() {
-		// 开启倒计时
-		this.setTimePay();
-		Voice('打开收款码成功');
-	},
-	onHide() {
-		this.outInterval();
-	},
-	// 监听页面卸载
-	onUnload() {
-		// 关闭倒计时
-		this.outInterval();
-	},
-	// 监听页面后退
-	onBackPress() {
-		// 关闭倒计时
-		this.outInterval();
-	},
-	methods: {
-		// 关闭倒计时
-		outInterval() {
-			clearInterval(this.setTimeOutPay);
-			clearInterval(this.getMoneyList);
+	import Voice from '@/utils/QS-baiduyy.js';
+	export default {
+		components: {
+			tkiQrcodes,
+			uniPopup,
+			uniPopupDialog,
+			uniPopupMessage
 		},
-		// 获取收款记录
-		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 => {});
+		// #ifdef H5
+		computed: {
+			...mapState(['weichatObj'])
 		},
-		// 获取用户信息
-		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);
-				});
+		// #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'
+					}
+				]
+			};
 		},
-		/**
-		 * 点击取消按钮触发
-		 * @param {Object} done
-		 */
-		close(done) {
-			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
-			// ...
-			done();
+		onLoad(option) {
+			this.loadlist;
+			// this.userinfo = uni.getStorageSync('userInfo');
+			// 加载用户数据
+			this.getUserInfo();
+			// #ifdef H5
+			// 获取是否为微信内核浏览器
+			this.showSqr = uni.getStorageSync('weichatBrowser') || false;
+			weixindata();
+			// #endif
 		},
-		/**
-		 * 点击确认按钮触发
-		 * @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();
+		onReady() {
+			// Voice('成功收款100000000元')
 		},
-		// 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);
+		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('用户点击取消');
+			// 		}
+			// 	}
+			// });
+
 		},
-		bang() {
-			this.$refs.bang.open();
+		onHide() {
+			this.outInterval();
 		},
-		cancelpass() {
-			this.$refs.bang.close();
-			this.spread_uid = '';
+		// 监听页面卸载
+		onUnload() {
+			// 关闭倒计时
+			this.outInterval();
 		},
-		// 绑定上级
-		cast() {
-			m_spread({ spread_uid: this.spread_uid }).then(e => {
-				this.getUserInfo();
-				this.$api.msg('绑定成功');
-			});
+		// 监听页面后退
+		onBackPress() {
+			// 关闭倒计时
+			this.outInterval();
 		},
-		// 判断付款码是否可以使用
-		receivedCodeState() {
-			let obj = this;
-			// 查询是否过期
-			receivedCodeState({
-				code: obj.val
-			})
-				.then(e => {
-					// 无效
-					if (e.msg == 'overdue') {
-						obj.receivedPaymentCode();
-					}
-					// 已使用
-					else if (e.msg == 'use') {
+		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: '已支付成功',
+							content: '成功',
+							showCancel: false
+						});
+					})
+					.catch(e => {
+						uni.showModal({
+							title: '提示',
+							content: e.message,
 							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);
-					}
+					});
+				// 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('绑定成功');
 				});
-			}
-			// 更新收款码
-			if (item === 1) {
-				clearInterval(this.setTimeOutPay);
-				uni.setNavigationBarColor({
-					backgroundColor: '#5DBC7C',
-					frontColor: '#ffffff',
-					success: e => {
-						console.log(e);
-					},
-					fail: function(e) {
+			},
+			// 判断付款码是否可以使用
+			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);
-					}
-				});
-				this.receivedCollectionCode();
-			}
-			// 扫码收付款
-			if (item === 2) {
+					});
+			},
+			// 开启验证是否已经过期或使用付款成功
+			// receivedCodeState(){
+
+			// },
+			// 跳转到记录页面
+			openList() {
 				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();
+				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);
+						}
+					});
 				}
-			});
-			// #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();
+				// 更新收款码
+				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();
 				}
-			});
-			// #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);
+				// 扫码收付款
+				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();
+					}
 				});
-		},
-		// 获取收款码
-		receivedCollectionCode() {
-			receivedCollectionCode()
-				.then(e => {
-					this.val = e.msg;
-					console.log(e);
-				})
-				.catch(e => {
-					console.log(e);
+				// #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();
+					}
 				});
-		},
-		// 創建二维码
-		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;
+				// #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: #4b8fdb;
-}
-.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;
+	.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: #4b8fdb;
+	}
+
+	.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;
 			}
-		}
-		.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);
+
+	.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;
+
+		.qrbox {
+			width: 500rpx;
+			text-align: center;
 			font-weight: bold;
-		}
-		.setMoney {
-			font-size: $font-base;
-			color: $base-color;
-			margin-top: 20rpx;
+
+			.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;
+
+	/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 {
+
+	.popup-box {
 		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;
+		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;
+					}
+				}
 			}
-			.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;
+			}
 		}
-		.paybox-main {
-			padding-left: 40rpx;
+
+		.buttom {
+			position: relative;
+			z-index: 100;
 			width: 100%;
-			margin-top: 54rpx;
-			margin-bottom: 54rpx;
-			.zftype {
-				padding-left: 5rpx;
-				image {
-					width: 38rpx;
-					height: 40rpx;
-				}
-				.zf {
-					padding-left: 18rpx;
-					font-size: 28rpx;
+			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: 400;
-					color: #3f454b;
+					font-weight: bold;
+					color: #ff0000;
+
+					.money {
+						font-size: 36rpx;
+					}
 				}
 			}
-		}
-		.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;
+			.zhifu {
+				width: 50%;
+				height: 92rpx;
+				background: #5dbc7c;
+				text-align: center;
+				line-height: 92rpx;
+				font-size: 32rpx;
 				font-family: PingFang SC;
 				font-weight: bold;
-				color: #ff0000;
-				.money {
-					font-size: 36rpx;
-				}
+				color: #ffffff;
 			}
 		}
-		.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;
+	.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;
-		background: linear-gradient(270deg, #558dff, #aa6bff);
+		font-size: $font-lg;
+		color: #fff;
 		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 {
+
+	.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%;
-			height: 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>
+</style>

pages/received/ipad.vue

@@ -0,0 +1,861 @@
+<template>
+	<view class="content" :class="{ blueBg: actionInd != 1, greenBg: actionInd == 1 }">
+		<view class="coupon_transfer">
+			<view class="erwema">
+				<view class="qrbox">
+					<view class="payMoney" v-if="actionInd == 1">收款码</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>
+</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;
+			if (option.token) {
+				uni.setStorageSync('token', option.token);
+			}
+			console.log(option.token);
+			// this.userinfo = uni.getStorageSync('userInfo');
+			// 加载用户数据
+			this.getUserInfo();
+			// #ifdef H5
+			// 获取是否为微信内核浏览器
+			this.showSqr = uni.getStorageSync('weichatBrowser') || false;
+			weixindata();
+			// #endif
+		},
+		onReady() {
+			// Voice('成功收款100000000元')
+		},
+		onShow() {
+			// 开启倒计时
+			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() {
+				m_spread({
+					spread_uid: this.spread_uid
+				}).then(e => {
+					this.getUserInfo();
+					this.$api.msg('绑定成功');
+				});
+			},
+			// 判断付款码是否可以使用
+			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: #4b8fdb;
+	}
+
+	.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>

pages/received/list.vue

@@ -1,7 +1,8 @@
 <template>
 	<view class="content">
 		<view class="navbar">
-			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
+			<view v-for="(item, index) in navList" :key="index" class="nav-item"
+				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
 		</view>
 
 		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
@@ -32,255 +33,306 @@
 				</scroll-view>
 			</swiper-item>
 		</swiper>
+		<view class="btn-box">
+			<view class="btn" @click="navTo('/pages/merchant/newfinance')">
+				店铺收益
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
-import empty from '@/components/empty';
-import { receivedLst } from '@/api/received.js';
-import { spreadCommission } from '@/api/wallet.js';
-export default {
-	components: {
-		uniLoadMore,
-		empty
-	},
-	data() {
-		return {
-			tabCurrentIndex: 0,
-			navList: [
-				{
-					state: 5,
-					text: '收款',
-					loadingType: 'more',
-					orderList: [],
-					page: 1, //当前页数
-					limit: 10 //每次信息条数
-				},
-				{
-					state: 6,
-					text: '付款',
-					loadingType: 'more',
-					orderList: [],
-					page: 1, //当前页数
-					limit: 10 //每次信息条数
-				}
-			]
-		};
-	},
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import empty from '@/components/empty';
+	import {
+		receivedLst
+	} from '@/api/received.js';
+	import {
+		spreadCommission
+	} from '@/api/wallet.js';
+	export default {
+		components: {
+			uniLoadMore,
+			empty
+		},
+		data() {
+			return {
+				tabCurrentIndex: 0,
+				navList: [{
+						state: 5,
+						text: '收款',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					},
+					{
+						state: 6,
+						text: '付款',
+						loadingType: 'more',
+						orderList: [],
+						page: 1, //当前页数
+						limit: 10 //每次信息条数
+					}
+				]
+			};
+		},
 
-	onLoad(options) {
-		/**
-		 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
-		 * 替换onLoad下代码即可
-		 */
-		this.tabCurrentIndex = +options.state || 0;
-		// #ifndef MP
-		this.loadData();
-		// #endif
-		// #ifdef MP
-		if (options.state == 0) {
+		onLoad(options) {
+			/**
+			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
+			 * 替换onLoad下代码即可
+			 */
+			this.tabCurrentIndex = +options.state || 0;
+			// #ifndef MP
 			this.loadData();
-		}
-		// #endif
-	},
-
-	methods: {
-		//加载列表
-		loadData(source) {
-			//这里是将订单挂载到tab列表下
-			let index = this.tabCurrentIndex;
-			let navItem = this.navList[index];
-			let state = navItem.state;
-			if (source === 'tabChange' && navItem.loaded === true) {
-				//tab切换只有第一次需要加载数据
-				return;
-			}
-			if (navItem.loadingType === 'loading') {
-				//防止重复加载
-				return;
-			}
-			if (navItem.loadingType === 'noMore') {
-				//防止重复加载
-				return;
+			// #endif
+			// #ifdef MP
+			if (options.state == 0) {
+				this.loadData();
 			}
-			// 修改当前对象状态为加载中
-			navItem.loadingType = 'loading';
-			// 查询我的订单
-			spreadCommission({
-				// pay_type: state,
-				// way: '',
-				page: navItem.page,
-				limit: navItem.limit
-			},state)
-				.then(({ data }) => {
-					console.log(data);
-					let arr = data.map(e => {
-						return e;
-					});
-					console.log(arr,'arr++++++')
-					navItem.orderList = navItem.orderList.concat(arr);
-					// console.log(navItem.orderList);
-					navItem.page++;
-					if (navItem.limit == data.length) {
-						//判断是否还有数据， 有改为 more， 没有改为noMore
-						navItem.loadingType = 'more';
-						return;
-					} else {
-						//判断是否还有数据， 有改为 more， 没有改为noMore
-						navItem.loadingType = 'noMore';
-					}
-					uni.hideLoading();
-					this.$set(navItem, 'loaded', true);
-				})
-				.catch(e => {
-					console.log(e);
-				});
+			// #endif
 		},
 
-		//swiper 切换
-		changeTab(e) {
-			this.tabCurrentIndex = e.target.current;
-			this.loadData('tabChange');
-		},
-		//顶部tab点击
-		tabClick(index) {
-			this.tabCurrentIndex = index;
+		methods: {
+			navTo(url) {
+				uni.navigateTo({
+					url
+				})
+			},
+			//加载列表
+			loadData(source) {
+				//这里是将订单挂载到tab列表下
+				let index = this.tabCurrentIndex;
+				let navItem = this.navList[index];
+				let state = navItem.state;
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (navItem.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+				// 查询我的订单
+				spreadCommission({
+						// pay_type: state,
+						// way: '',
+						page: navItem.page,
+						limit: navItem.limit
+					}, state)
+					.then(({
+						data
+					}) => {
+						console.log(data);
+						let arr = data.map(e => {
+							return e;
+						});
+						console.log(arr, 'arr++++++')
+						navItem.orderList = navItem.orderList.concat(arr);
+						// console.log(navItem.orderList);
+						navItem.page++;
+						if (navItem.limit == data.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+
+			//swiper 切换
+			changeTab(e) {
+				this.tabCurrentIndex = e.target.current;
+				this.loadData('tabChange');
+			},
+			//顶部tab点击
+			tabClick(index) {
+				this.tabCurrentIndex = index;
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-page,
-.content {
-	background: $page-color-base;
-	height: 100%;
-}
+	page,
+	.content {
+		background: $page-color-base;
+		height: 100%;
+	}
 
-.swiper-box {
-	height: calc(100% - 40px);
-}
-.list-scroll-content {
-	height: 100%;
-}
-// 列表
-.item-list {
-}
-.swiper-box {
-	padding-top: 10rpx;
-	.order-item {
-		padding: 20rpx 30rpx;
-		line-height: 1.5;
-		.title-box {
-			.title {
-				font-size: $font-lg;
-				color: $font-color-base;
+	.swiper-box {
+		height: calc(100% - 40px);
+	}
+
+	.list-scroll-content {
+		height: 100%;
+		padding-bottom: 100rpx;
+	}
+
+	// 列表
+	.item-list {}
+
+	.swiper-box {
+		padding-top: 10rpx;
+
+		.order-item {
+			padding: 20rpx 30rpx;
+			line-height: 1.5;
+
+			.title-box {
+				.title {
+					font-size: $font-lg;
+					color: $font-color-base;
+				}
+
+				.time {
+					font-size: $font-base;
+					color: $font-color-light;
+				}
 			}
-			.time {
-				font-size: $font-base;
-				color: $font-color-light;
+
+			.money {
+				color: #fd5b23;
+				font-size: $font-lg;
 			}
 		}
-		.money {
-			color: #fd5b23;
-			font-size: $font-lg;
-		}
 	}
-}
-.navbar {
-	display: flex;
-	height: 40px;
-	padding: 0 5px;
-	background: #fff;
-	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
-	position: relative;
-	z-index: 10;
-	.nav-item {
-		flex: 1;
+
+	.navbar {
 		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		font-size: 15px;
-		color: $font-color-dark;
+		height: 40px;
+		padding: 0 5px;
+		background: #fff;
+		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
 		position: relative;
-		&.current {
-			color: $base-color;
-			&:after {
-				content: '';
-				position: absolute;
-				left: 50%;
-				bottom: 0;
-				transform: translateX(-50%);
-				width: 44px;
-				height: 0;
-				border-bottom: 2px solid $base-color;
+		z-index: 10;
+
+		.nav-item {
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			font-size: 15px;
+			color: $font-color-dark;
+			position: relative;
+
+			&.current {
+				color: $base-color;
+
+				&:after {
+					content: '';
+					position: absolute;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+					width: 44px;
+					height: 0;
+					border-bottom: 2px solid $base-color;
+				}
 			}
 		}
 	}
-}
 
-.uni-swiper-item {
-	height: auto;
-}
+	.uni-swiper-item {
+		height: auto;
+	}
 
-/* load-more */
-.uni-load-more {
-	display: flex;
-	flex-direction: row;
-	height: 80rpx;
-	align-items: center;
-	justify-content: center;
-}
+	/* load-more */
+	.uni-load-more {
+		display: flex;
+		flex-direction: row;
+		height: 80rpx;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-load-more__text {
+		font-size: 28rpx;
+		color: #999;
+	}
+
+	.uni-load-more__img {
+		height: 24px;
+		width: 24px;
+		margin-right: 10px;
+	}
 
-.uni-load-more__text {
-	font-size: 28rpx;
-	color: #999;
-}
+	.uni-load-more__img>view {
+		position: absolute;
+	}
 
-.uni-load-more__img {
-	height: 24px;
-	width: 24px;
-	margin-right: 10px;
-}
+	.uni-load-more__img>view view {
+		width: 6px;
+		height: 2px;
+		border-top-left-radius: 1px;
+		border-bottom-left-radius: 1px;
+		background: #999;
+		position: absolute;
+		opacity: 0.2;
+		transform-origin: 50%;
+		animation: load 1.56s ease infinite;
+	}
 
-.uni-load-more__img > view {
-	position: absolute;
-}
+	.uni-load-more__img>view view:nth-child(1) {
+		transform: rotate(90deg);
+		top: 2px;
+		left: 9px;
+	}
 
-.uni-load-more__img > view view {
-	width: 6px;
-	height: 2px;
-	border-top-left-radius: 1px;
-	border-bottom-left-radius: 1px;
-	background: #999;
-	position: absolute;
-	opacity: 0.2;
-	transform-origin: 50%;
-	animation: load 1.56s ease infinite;
-}
+	.uni-load-more__img>view view:nth-child(2) {
+		transform: rotate(180deg);
+		top: 11px;
+		right: 0;
+	}
 
-.uni-load-more__img > view view:nth-child(1) {
-	transform: rotate(90deg);
-	top: 2px;
-	left: 9px;
-}
+	.uni-load-more__img>view view:nth-child(3) {
+		transform: rotate(270deg);
+		bottom: 2px;
+		left: 9px;
+	}
 
-.uni-load-more__img > view view:nth-child(2) {
-	transform: rotate(180deg);
-	top: 11px;
-	right: 0;
-}
+	.uni-load-more__img>view view:nth-child(4) {
+		top: 11px;
+		left: 0;
+	}
 
-.uni-load-more__img > view view:nth-child(3) {
-	transform: rotate(270deg);
-	bottom: 2px;
-	left: 9px;
-}
+	.btn-box {
+		background: #ffffff;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 
-.uni-load-more__img > view view:nth-child(4) {
-	top: 11px;
-	left: 0;
-}
-</style>
+		.btn {
+			width: 622rpx;
+			height: 85rpx;
+			background: #24a17d;
+			border-radius: 15rpx;
+			text-align: center;
+			line-height: 85rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #ffffff;
+		}
+	}
+</style>

pages/set/phone.vue

@@ -1,163 +1,203 @@
 <template>
 	<view class="container">
-		<view class="row b-b">
-			<text class="tit">手机号</text>
-			<input class="input" v-model="account" type="text" placeholder="请填写手机号" placeholder-class="placeholder" />
+		<view class="bg">
+			<image src="../../static/user/setphone.png" mode=""></image>
 		</view>
-		<view>
+		<view class="main">
 			<view class="row b-b">
-				<text class="tit">验证码</text>
-				<input class="input" v-model="captcha" type="text" placeholder="请填写验证码" placeholder-class="placeholder" />
-				<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
+				<image class="tit" src="../../static/user/phone.png" mode="heightFix"></image>
+				<input class="input" v-model="account" type="text" placeholder="请填写手机号"
+					placeholder-class="placeholder" />
 			</view>
-			<button class="add-btn" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">提交</button>
+			<view class="row b-b">
+				<image class="tit" src="../../static/user/code.png" mode="heightFix"></image>
+				<input class="input" v-model="captcha" type="text" placeholder="请填写验证码"
+					placeholder-class="placeholder" />
+				<view class="code" @click="verification">{{ countDown == 0 ? '发送验证码' : countDown }}</view>
+			</view>
+			<button class="add-btn" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">确认绑定</button>
 		</view>
 	</view>
 </template>
 
 <script>
-import { verify } from '@/api/login.js';
-import { mapState, mapMutations } from 'vuex';
-import { registerReset, binding } from '@/api/set.js';
-import { getUserInfo } from '@/api/login.js';
-export default {
-	data() {
-		return {
-			time: '', //保存倒计时对象
-			countDown: 0, //倒计时
-			account: '', //手机号
-			captcha: '', //验证码
-			password: '', //新密码
-			loding: false //是否载入中
-		};
-	},
-	watch: {
-		// 监听倒计时
-		countDown(i) {
-			if (i == 0) {
-				clearInterval(this.time);
-			}
-		}
-	},
-	computed: {
-		...mapState(['userInfo'])
-	},
-	onLoad() {
-		if (this.userInfo.phone == null) {
-			this.account = '';
-		} else {
-			this.account = this.userInfo.phone;
-			this.show = false;
-		}
-	},
-	methods: {
-		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
-		//发送验证码
-		verification() {
-			let obj = this;
-			if (this.account == '') {
-				this.$api.msg('请输入电话号码');
-				return;
-			}
-			if (!/(^1[2|3|4|5|7|8|9][0-9]{9}$)/.test(this.account)) {
-				this.$api.msg('请输入正确的手机号');
-				return;
+	import {
+		verify
+	} from '@/api/login.js';
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		registerReset,
+		binding
+	} from '@/api/set.js';
+	import {
+		getUserInfo
+	} from '@/api/login.js';
+	export default {
+		data() {
+			return {
+				time: '', //保存倒计时对象
+				countDown: 0, //倒计时
+				account: '', //手机号
+				captcha: '', //验证码
+				password: '', //新密码
+				loding: false //是否载入中
+			};
+		},
+		watch: {
+			// 监听倒计时
+			countDown(i) {
+				if (i == 0) {
+					clearInterval(this.time);
+				}
 			}
-			// 判断是否在倒计时
-			if (obj.countDown > 0) {
-				return false;
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		onLoad() {
+			if (this.userInfo.phone == null) {
+				this.account = '';
 			} else {
-				obj.countDown = 60;
-				obj.time = setInterval(() => {
-					obj.countDown--;
-				}, 1000);
-				//调用验证码接口
-				verify({
-					phone: obj.account,
-					type: 'BDING_CODE'
-				})
-					.then(({ data }) => {})
+				this.account = this.userInfo.phone;
+				this.show = false;
+			}
+		},
+		methods: {
+			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+			//发送验证码
+			verification() {
+				let obj = this;
+				if (this.account == '') {
+					this.$api.msg('请输入电话号码');
+					return;
+				}
+				if (!/(^1[2|3|4|5|7|8|9][0-9]{9}$)/.test(this.account)) {
+					this.$api.msg('请输入正确的手机号');
+					return;
+				}
+				// 判断是否在倒计时
+				if (obj.countDown > 0) {
+					return false;
+				} else {
+					obj.countDown = 60;
+					obj.time = setInterval(() => {
+						obj.countDown--;
+					}, 1000);
+					//调用验证码接口
+					verify({
+							phone: obj.account,
+							type: 'BDING_CODE'
+						})
+						.then(({
+							data
+						}) => {})
+						.catch(err => {
+							console.log(err);
+						});
+				}
+			},
+			confirm(e) {
+				let obj = this;
+				obj.loding = true;
+				binding({
+						phone: obj.account,
+						captcha: obj.captcha
+					})
+					.then(({
+						data
+					}) => {
+						obj.$api.msg('绑定成功！');
+						setTimeout(function() {
+							obj.loding = false;
+							uni.switchTab({
+								url: '/pages/index/index'
+							});
+						}, 1000);
+					})
 					.catch(err => {
+						obj.loding = false;
 						console.log(err);
 					});
 			}
-		},
-		confirm(e) {
-			let obj = this;
-			obj.loding = true;
-			binding({
-				phone: obj.account,
-				captcha: obj.captcha
-			})
-				.then(({ data }) => {
-					obj.$api.msg('绑定成功！');
-					setTimeout(function() {
-						obj.loding = false;
-						uni.switchTab({
-							url: '/pages/index/index'
-						});
-					}, 1000);
-				})
-				.catch(err => {
-					obj.loding = false;
-					console.log(err);
-				});
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-page {
-	background: $page-color-base;
-}
-.row {
-	display: flex;
-	align-items: center;
-	position: relative;
-	padding: 0 30rpx;
-	height: 110rpx;
-	background: #fff;
+	page {
+		background: #f9fdfb;
+	}
 
-	.tit {
-		flex-shrink: 0;
-		width: 120rpx;
-		font-size: 30rpx;
-		color: $font-color-dark;
+	.bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 920rpx;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.main {
+		position: relative;
+		z-index: 2;
+		padding-top: 490rpx;
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		padding: 0 140rpx;
+		height: 110rpx;
+
+		.tit {
+			height: 40rpx;
+		}
+
+		.input {
+			margin-left: 40rpx;
+			flex: 1;
+			font-size: 30rpx;
+			color: $font-color-dark;
+		}
+
+		.iconlocation {
+			font-size: 36rpx;
+			color: $font-color-light;
+		}
 	}
-	.input {
-		flex: 1;
-		font-size: 30rpx;
-		color: $font-color-dark;
+
+	.add-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 90rpx auto 0;
+		width: 600rpx;
+		height: 90rpx;
+		background: #52c696;
+		border-radius: 10rpx;
+		font-size: 34rpx;
+		font-family: SourceHanSansCN;
+		font-weight: 400;
+		color: #FFFFFF;
 	}
-	.iconlocation {
-		font-size: 36rpx;
-		color: $font-color-light;
+
+	.bg-gray {
+		background-color: $color-gray;
 	}
-}
-.add-btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 690rpx;
-	height: 80rpx;
-	margin: 60rpx auto;
-	font-size: $font-lg;
-	color: #fff;
-	background-color: $base-color;
-	border-radius: 10rpx;
-	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
-}
 
-.bg-gray {
-	background-color: $color-gray;
-}
-.code {
-	color: #5dbc7c;
-	font-size: 23rpx;
-	border-left: 1px solid #eeeeee;
-	width: 150rpx;
-	flex-shrink: 0;
-	text-align: center;
-}
-</style>
+	.code {
+		color: #5dbc7c;
+		font-size: 23rpx;
+		border-left: 1px solid #eeeeee;
+		width: 150rpx;
+		flex-shrink: 0;
+		text-align: center;
+	}
+</style>

pages/sign/prize.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="content">
+		<view class="bg">
+			<image src="../../static/user/prizebg.png" mode="widthFix"></image>
+		</view>
+		<view class="title">
+			<image src="../../static/user/prizetitle.png" mode=""></image>
+		</view>
+		<view class="zp">
+			<ljs-turntable :show="true" @getPrize="getPrize" :startPosition="false" :list="awardList" />
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import ljsTurntable from '@/components/ljs-turntable/ljs-turntable.vue'
+	export default {
+		comments: {
+			ljsTurntable
+		},
+		data() {
+			return {
+				award: 1,
+				awardList: [{
+						name: "Iphone 13",
+						prop: 2,
+						probability: 0.01, // 概率，所有项和必须等于1。
+						state: true, // 是否中奖
+						id: 1
+					},
+					{
+						name: "谢谢参与",
+						prop: 5,
+						probability: 0.27,
+						state: true, // 是否中奖
+						id: 5
+					},
+					{
+						name: "10个积分",
+						prop: 12,
+						probability: 0.3,
+						state: true, // 是否中奖
+						id: 3
+					},
+					{
+						name: "蓝牙耳机",
+						prop: 5,
+						probability: 0.02,
+						state: true, // 是否中奖
+						id: 5
+					},
+					{
+						name: "66个积分",
+						prop: 4.5,
+						probability: 0.1,
+						state: true, // 是否中奖
+						id: 4
+					},
+					{
+						name: "精美大礼包",
+						prop: 7.5,
+						probability: 0.3,
+						state: true, // 是否中奖
+						id: 5
+					},
+				]
+			};
+		},
+		onLoad() {},
+		onShow() {},
+		onReachBottom() {},
+		onReady() {},
+		methods: {
+			getPrize(state, id, prizeName) {
+				console.log(state, id, prizeName)
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	page,
+	.content {
+		min-height: 100%;
+		height: auto;
+		background: #fd8c54;
+	}
+
+	.bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 750rpx;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.title {
+		margin: 0 auto;
+		width: 630rpx;
+		height: 210rpx;
+		padding-top: 50rpx;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.zp {
+		margin: 50rpx auto 0;
+		width: 750rpx;
+		height: 750rpx;
+	}
+</style>

utils/QS-baiduyy.js

@@ -57,7 +57,7 @@ export default function openVoice(objs) { // 传入需转为语音的文本内
 }
 
 function openVoiceFc(objs, returnAudio) {
-	console.log('准备获取语音tok');
+	console.log('准备获取语音tok', objs);
 	if (returnAudio) {
 		return new Promise((resolve, reject) => {
 			getBDVoicToken().then(res => {
@@ -90,6 +90,7 @@ function openVoiceFc(objs, returnAudio) {
 }
 
 function tts(objs, tok, returnAudio) {
+	console.log(objs, 'info');
 	if (typeof(objs) == 'string')
 		objs = {
 			voiceSet: {
@@ -131,6 +132,7 @@ function btts(param, options, audioCallback, lineUp, returnAudio) {
 	for (let k in param) {
 		fd.push(k + '=' + encodeURIComponent(encodeURIComponent(param[k])));
 	}
+	console.log(fd.join('&'), '123456');
 	audio.src = `${getAudioUrl}?${fd.join('&')}`;
 	console.log(audio.src, 'wangzhi')
 	// audio.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
@@ -158,7 +160,6 @@ function btts(param, options, audioCallback, lineUp, returnAudio) {
 		})
 		return audio;
 	}
-	console.log(audio);
 	audio.onPlay(() => {
 		console.log('音频播放开始');
 		if (audioCallback && audioCallback.onPlay && typeof(audioCallback.onPlay) == 'function') {
@@ -216,7 +217,7 @@ function btts(param, options, audioCallback, lineUp, returnAudio) {
 			}
 		}
 	})
-	audio.onError((e) => {
+	audio.onError(e => {
 		console.log(audioCallback, '错误')
 		if (audioCallback && audioCallback.onError && typeof(audioCallback.onError) == 'function') audioCallback
 			.onError(e);
@@ -226,4 +227,4 @@ function btts(param, options, audioCallback, lineUp, returnAudio) {
 		audio = null;
 	})
 	audio.play();
-}
+}