2021-8-2

api/product.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 商品列表
+export function lala(data) {
+	return request({
+		url: '/api/lala',
+		method: 'get',
+		data
+	});
+}
+// 商品详情
+export function lalaDetial(data,id) {
+	return request({
+		url: '/api/lala/'+id,
+		method: 'get',
+		data
+	});
+}
+// 购买产品
+export function buylala(data,id) {
+	return request({
+		url: '/api/lala/'+id,
+		method: 'post',
+		data
+	});
+}

pages/index/index.vue

@@ -13,68 +13,181 @@
 					</view>
 				</view>
 			</view>
-			<view class="shopBox">
+			<view class="shopBox" v-for="(item,index) in list" :key="index">
 				<view class="shopBox-top">
 					<view class="left"><image src="../../static/img/index4.png" mode=""></image></view>
-					<view class="between" style="margin-left: -140rpx;">
-						<text id="one">FilsCoin矿机拼购</text>
-						<text id="two">36轮</text>
+					<view class="between" style="margin-left: -340rpx;">
+						<text id="one">{{item.name}}</text>
+						<text id="two">{{item.lun}}轮</text>
 					</view>
 					<text id="three">预约中</text>
 				</view>
 				<view class="shopBox-between">
 					<view class="number">
-						<text class="number-left">100</text>
-						<text class="number-right">USDT/份</text>
+						<text class="number-left">{{1*item.cost}}</text>
+						<text class="number-right">{{item.cost_money_type}}/份</text>
 					</view>
 					<view class="quotient"><text class="quotient-children">每轮限购1组，每组限购一份</text></view>
 				</view>
-				<image src="../../static/img/index5.png" style="width: 635rpx; height: 170rpx; margin: 40rpx 0;" mode=""></image>
+				<image :src="item.background_image" style="width: 635rpx; height: 170rpx; margin: 40rpx 0;" mode=""></image>
 				<view class="shopBox-bottom">
 					<view class="forward">
-						<view class="forward-left">我得预约:&nbsp 0</view>
-						<view class="forward-right">每组分数:&nbsp 11份</view>
+						<view class="forward-left"></view>
+						<view class="forward-right">每组分数:&nbsp {{item.join_number}}份</view>
 					</view>
 					<view class="consume">
 						GAS消耗:
-						<text>0.50%LALA</text>
+						<text>{{1*item.ticket}}{{item.ticket_money_type}}</text>
 					</view>
 					<view class="appointmentTime">
 						预约时间:
-						<text>2021-07-21 08:00:00-2021-07-21 09:30:00</text>
+						<text>{{ item.start }}-{{ item.end}}</text>
 					</view>
 					<view class="lotteryTime">
 						开奖时间:
-						<text>2021-07-21 08:00:00</text>
+						<text>{{item.jiang}}</text>
 					</view>
 				</view>
-				<view class="submit" @click="buy()">预购</view>
+				<view class="btn-box flex">
+					<view class="submit1">查看更多</view>
+					<view class="submit" @click="buy(item)">预购</view>
+				</view>
 			</view>
 		</view>
-		<u-popup v-model="show" mode="bottom" border-radius="40" height="868rpx" :closeable="true" close-icon="关闭"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
+		<u-popup v-model="show" mode="bottom" border-radius="40" height="868rpx" :closeable="true">
+			<view class="yugo">
+				<view class="zhu">
+					注：每轮限购1组，每组限购1份
+					<span class="zhu-right">
+						最多可预约：
+						<span class="zhu-num">1份</span>
+					</span>
+				</view>
+				<view class="info-main">
+					<view class="info-box">
+						<view class="info-left">预约份数：</view>
+						<view class="info-right"><u-number-box max="1" v-model="value" @change="valChange"></u-number-box></view>
+					</view>
+					<view class="info-box">
+						<view class="info-left">预约金额：</view>
+						<view class="info-right">{{money}}</view>
+					</view>
+					<view class="info-box">
+						<view class="info-left">预约手续费：</view>
+						<view class="info-right">{{souxu}}</view>
+					</view>
+				</view>
+				<view class="btn" @click="submit()">确定</view>
+			</view>
+		</u-popup>
+		<u-popup v-model="show1" mode="center" width="548rpx" border-radius="14">
+			<view class="psw-wrapper">
+				<view class="psw-title">请输入支付密码</view>
+				<input type="password" v-model="password" class="psw-ipt" />
+				<view class="psw-btn">
+					<text @click="cancel">取消</text>
+					<text class="psw-qd" @click="pswQd">确定</text>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 <script>
+import { lala,lalaDetial,buylala } from '@/api/product.js'
+import {getTime} from '@/utils/rocessor.js'
 export default {
 	data() {
 		return {
 			show: false, //支付数量
-			show1: false //支付密码
+			show1: false, //支付密码
+			password: '',
+			value: 1,
+			list:[],
+			money:'',//预约金额
+			souxu:'',//预约手续费
+			id:'',//购买产品
 		};
 	},
 	//页面加载即刻发生
-	onload() {
+	onShow() {
+		this.loadDate();
+	},
+	onLoad() {
 		this.loadDate();
 	},
 	methods: {
+		async loadDate() {
+			const obj = this;
+			lala(
+			{
+				page:1,
+				limit:10,
+			}).then(({data}) => {
+				obj.list = data.list.data
+				obj.list.forEach((e,index) => {
+					lalaDetial({page:1,limit:1},e.id)
+					.then(les =>{
+						console.log(les)
+						let end = getTime(les.data.next_pink - les.data.close_join*60);
+						let start = getTime(les.data.next_pink - les.data.close_join*60 - 2*60*60);
+						let jiang = getTime(les.data.next_pink);
+						e.end = end;
+						e.start = start;
+						e.jiang = jiang;
+						// les.data.next_pink
+						if('history_list' in les.data){
+							e.lun = 1*les.data.history_list[0].group_num+1
+						}else{
+							e.lun = 1
+						}
+						e.childList = les.data
+						console.log(obj.list,"1111111")
+					})
+				})
+				
+			})
+		},
 		nav(url) {
 			uni.navigateTo({
 				url: url
 			});
 		},
-		async loadDate() {},
-		buy() {
+		buy(item) {
+			this.money = (1*item.cost) + item.cost_money_type;
+			this.souxu = item.ticket+item.ticket_money_type;
+			this.id = item.id;
 			this.show = true;
+		},
+		valChange(e) {
+			console.log(e);
+			if(this.value > 1){
+				e.value = 1
+				this.value = 1;
+				console.log(this.value)
+				this.$api.msg("每组限购一份");
+			}
+			
+		},
+		submit() {
+			if(this.value == 0){
+				this.$api.msg("预约份数不能为0")
+			}
+			else{
+				this.show = false;
+				this.show1 = true;
+			}
+		},
+		cancel() {
+			this.show1 = false;
+		},
+		pswQd() {
+			buylala({
+				trade_psw: this.password
+			},this.id).then(e => {
+				console.log(e)
+			}).catch(e => {
+				console.log(e)
+			})
 		}
 	}
 };
@@ -256,7 +369,7 @@ export default {
 			color: #000000;
 		}
 		.submit {
-			width: 600rpx;
+			width:295rpx;
 			height: 70rpx;
 			background: linear-gradient(90deg, #60bab0, #45969b);
 			border-radius: 35rpx;
@@ -266,8 +379,113 @@ export default {
 			color: #ffffff;
 			text-align: center;
 			line-height: 70rpx;
-			margin: 40rpx auto;
+			margin: 40rpx 10rpx;
+		}
+		.submit1 {
+			width:295rpx;
+			height: 70rpx;
+			border: 1px solid #60bab0;
+			background: #fff;
+			border-radius: 35rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #60bab0;
+			text-align: center;
+			line-height: 70rpx;
+			margin: 40rpx 10rpx;
 		}
 	}
 }
+.yugo {
+	padding-top: 80rpx;
+	position: relative;
+	height: 100%;
+	.zhu {
+		height: 112rpx;
+		border-top: 1px #eeeeee solid;
+		border-bottom: 1px #eeeeee solid;
+		line-height: 112rpx;
+		padding: 0 32rpx;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #6d7c88;
+		.zhu-right {
+			display: inline-block;
+			padding-left: 60rpx;
+		}
+		.zhu-num {
+			color: #000000;
+		}
+	}
+	.info-main {
+		padding: 0 32rpx;
+		.info-box {
+			padding-top: 22rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.info-left {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #6d7c88;
+			}
+			.info-right {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #0f253a;
+			}
+		}
+	}
+	.btn {
+		position: absolute;
+		bottom: 50rpx;
+		left: 50%;
+		margin-left: -342rpx;
+		width: 684rpx;
+		height: 86rpx;
+		background: linear-gradient(90deg, #60bab0, #60bab0, #45969b);
+		border-radius: 10rpx;
+		text-align: center;
+		line-height: 86rpx;
+		font-size: 36rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #ffffff;
+	}
+}
+.psw-wrapper {
+		width: 548rpx;
+		height: 344rpx;
+		background-color: #FFFFFF;
+		.psw-title {
+			width: 100%;
+			font-size: 35rpx;
+			padding: 43rpx 0 49rpx;
+			text-align: center;
+			font-weight: 800;
+		}
+		.psw-ipt {
+			display: block;
+			background-color: #dce3ed;
+			height: 90rpx;
+			width: 464rpx;
+			padding-left: 30rpx;
+			margin: 0 auto;
+			font-size: 80rpx;
+		}
+		.psw-btn text{
+			display: inline-block;
+			text-align: center;
+			width: 50%;
+			padding-top: 29rpx;
+			font-size: 35rpx;
+		}
+		.psw-qd {
+			color:#45969B;
+		}
+	}
 </style>

pages/index/node.vue

@@ -315,24 +315,5 @@ page {
 			color:#45969B;
 		}
 	}
-	.psw-ipt {
-		display: block;
-		background-color: #dce3ed;
-		height: 90rpx;
-		width: 464rpx;
-		padding-left: 30rpx;
-		margin: 0 auto;
-		font-size: 80rpx;
-	}
-	.psw-btn text {
-		display: inline-block;
-		text-align: center;
-		width: 50%;
-		padding-top: 29rpx;
-		font-size: 35rpx;
-	}
-	.psw-qd {
-		color: #5771df;
-	}
 
 </style>

pages/user/user.vue

@@ -135,7 +135,7 @@ export default {
 			// 				interceptor();
 			// 			}
 			// 		},
-			// 		fail: e => {
+			// 		fail: e => {{}
 			// 			console.log(e);
 			// 		}
 			// 	});