|
|
@@ -0,0 +1,508 @@
|
|
|
+<template>
|
|
|
+ <view class="center">
|
|
|
+ <scroll-view scroll-y="true" style="padding-bottom: 20rpx;">
|
|
|
+ <view class="shopBox">
|
|
|
+ <view class="shopBox-top">
|
|
|
+ <view class="left"><image src="../../static/img/index4.png" mode=""></image></view>
|
|
|
+ <view class="between" style="margin-left: -340rpx;">
|
|
|
+ <text id="one">{{ list.data.name }}</text>
|
|
|
+ <text id="two">{{ list.lun }}轮</text>
|
|
|
+ </view>
|
|
|
+ <text id="three">预约中</text>
|
|
|
+ </view>
|
|
|
+ <view class="shopBox-between">
|
|
|
+ <view class="number">
|
|
|
+ <text class="number-left">{{ 1 * list.data.cost }}</text>
|
|
|
+ <text class="number-right">{{ list.data.cost_money_type }}/份</text>
|
|
|
+ </view>
|
|
|
+ <view class="quotient"><text class="quotient-children">每轮限购1组，每组限购一份</text></view>
|
|
|
+ </view>
|
|
|
+ <image :src="list.data.background_image" style="width: 635rpx; height: 170rpx; margin: 40rpx 0;" mode=""></image>
|
|
|
+ <view class="shopBox-bottom">
|
|
|
+ <view class="forward">
|
|
|
+ <view class="forward-left"></view>
|
|
|
+ <view class="forward-right">每组分数:  {{ list.data.join_number }}份</view>
|
|
|
+ </view>
|
|
|
+ <view class="consume">
|
|
|
+ GAS消耗:
|
|
|
+ <text>{{ 1 * list.data.ticket }}{{ list.data.ticket_money_type }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="appointmentTime">
|
|
|
+ 预约时间:
|
|
|
+ <text>{{ list.start }}-{{ list.end }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="lotteryTime">
|
|
|
+ 开奖时间:
|
|
|
+ <text>{{ list.jiang }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box flex">
|
|
|
+ <view class="submit" @click="buy()">预购</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shopBox">
|
|
|
+ <view class="shopBox-top">
|
|
|
+ <view class="left"><image src="../../static/img/index4.png" mode=""></image></view>
|
|
|
+ <view class="between" style="margin-left: -340rpx;">
|
|
|
+ <text id="one">{{ list.data.name }}</text>
|
|
|
+ <text id="two">{{ list.lun+1 }}轮</text>
|
|
|
+ </view>
|
|
|
+ <text id="three" style="color: #44969D;">待上架</text>
|
|
|
+ </view>
|
|
|
+ <view class="shopBox-between">
|
|
|
+ <view class="number">
|
|
|
+ <text class="number-left">{{ 1 * list.data.cost }}</text>
|
|
|
+ <text class="number-right">{{ list.data.cost_money_type }}/份</text>
|
|
|
+ </view>
|
|
|
+ <view class="quotient"><text class="quotient-children">每轮限购1组，每组限购一份</text></view>
|
|
|
+ </view>
|
|
|
+ <image :src="list.data.background_image" style="width: 635rpx; height: 170rpx; margin: 40rpx 0;" mode=""></image>
|
|
|
+ <view class="shopBox-bottom">
|
|
|
+ <view class="forward">
|
|
|
+ <view class="forward-left"></view>
|
|
|
+ <view class="forward-right">每组分数:  {{ list.data.join_number }}份</view>
|
|
|
+ </view>
|
|
|
+ <view class="consume">
|
|
|
+ GAS消耗:
|
|
|
+ <text>{{ 1 * list.data.ticket }}{{ list.data.ticket_money_type }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="appointmentTime">
|
|
|
+ 预约时间:
|
|
|
+ <text>{{ list.nstart }}-{{ list.nend }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="lotteryTime">
|
|
|
+ 开奖时间:
|
|
|
+ <text>{{ list.njiang }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box flex">
|
|
|
+ <view class="submit1">带上架</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="'history'">
|
|
|
+ <view class="shopBox" v-for="(item,index) in list.history_list" :key="index" v-if="item.group_num*1 != 0">
|
|
|
+ <view class="shopBox-top">
|
|
|
+ <view class="left"><image src="../../static/img/index4.png" mode=""></image></view>
|
|
|
+ <view class="between" style="margin-left: -340rpx;">
|
|
|
+ <text id="one">{{ list.data.name }}</text>
|
|
|
+ <text id="two">{{ item.group_num*1 }}轮</text>
|
|
|
+ </view>
|
|
|
+ <text id="three" style="color: #6D7C88;">已开奖</text>
|
|
|
+ </view>
|
|
|
+ <view class="shopBox-between">
|
|
|
+ <view class="number">
|
|
|
+ <text class="number-left">{{ 1 * list.data.cost }}</text>
|
|
|
+ <text class="number-right">{{ list.data.cost_money_type }}/份</text>
|
|
|
+ </view>
|
|
|
+ <view class="quotient"><text class="quotient-children">每轮限购1组，每组限购一份</text></view>
|
|
|
+ </view>
|
|
|
+ <image :src="list.data.background_image" style="width: 635rpx; height: 170rpx; margin: 40rpx 0;" mode=""></image>
|
|
|
+ <view class="shopBox-bottom">
|
|
|
+ <view class="forward">
|
|
|
+ <view class="forward-left"></view>
|
|
|
+ <view class="forward-right">每组分数:  {{ list.data.join_number }}份</view>
|
|
|
+ </view>
|
|
|
+ <view class="consume">
|
|
|
+ GAS消耗:
|
|
|
+ <text>{{ 1 * list.data.ticket }}{{ list.data.ticket_money_type }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="appointmentTime">
|
|
|
+ 预约时间:
|
|
|
+ <text>{{ item.hstart }}-{{ item.hend }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="lotteryTime">
|
|
|
+ 开奖时间:
|
|
|
+ <text>{{ item.hjiang }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box flex">
|
|
|
+ <view class="submit1">已开奖</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <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="max" 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 { lalaDetial,buylala } from '@/api/product.js';
|
|
|
+import {getTime} from '@/utils/rocessor.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loding: 'loading', //loading加载中 nomore没有数据
|
|
|
+ limit: 10,
|
|
|
+ page: 1,
|
|
|
+ id: '',
|
|
|
+ list: '',
|
|
|
+ history:false,
|
|
|
+ show: false, //支付数量
|
|
|
+ show1: false, //支付密码
|
|
|
+ password: '',
|
|
|
+ value: 1,
|
|
|
+ money:'',
|
|
|
+ souxu:'',
|
|
|
+ max: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.id = option.id;
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ uni.showLoading({
|
|
|
+ title:'加载中'
|
|
|
+ })
|
|
|
+ const obj = this
|
|
|
+ if (obj.loding == 'nomore') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ lalaDetial(
|
|
|
+ {
|
|
|
+ page: obj.page,
|
|
|
+ limit: obj.limit
|
|
|
+ },
|
|
|
+ obj.id
|
|
|
+ ).then(({ data }) => {
|
|
|
+
|
|
|
+ obj.list = data;
|
|
|
+ if('history_list' in data){
|
|
|
+ obj.history = true;
|
|
|
+ obj.list.lun = 1*data.history_list[0].group_num+1
|
|
|
+ obj.list.history_list.forEach(e => {
|
|
|
+ let hjiang = getTime(e.open_time*1)
|
|
|
+ let hend = getTime(e.open_time*1 - data.close_join*60);
|
|
|
+ let hstart = getTime(e.open_time*1 - data.close_join*60 - 2*60*60);
|
|
|
+ obj.$set(e,'hend',hend)
|
|
|
+ obj.$set(e,'hstart',hstart)
|
|
|
+ obj.$set(e,'hjiang',hjiang)
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ obj.history = false;
|
|
|
+ obj.list.lun = 1
|
|
|
+ }
|
|
|
+ let end = getTime(data.next_pink - data.close_join*60);
|
|
|
+ let start = getTime(data.next_pink - data.close_join*60 - 2*60*60);
|
|
|
+ let jiang = getTime(data.next_pink);
|
|
|
+ obj.$set(obj.list,'end',end)
|
|
|
+ obj.$set(obj.list,'start',start)
|
|
|
+ obj.$set(obj.list,'jiang',jiang)
|
|
|
+ let nend = getTime(data.next_next_pink - data.close_join*60);
|
|
|
+ let nstart = getTime(data.next_next_pink - data.close_join*60 - 2*60*60);
|
|
|
+ let njiang = getTime(data.next_next_pink);
|
|
|
+ obj.$set(obj.list,'nend',nend)
|
|
|
+ obj.$set(obj.list,'nstart',nstart)
|
|
|
+ obj.$set(obj.list,'njiang',njiang)
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log(obj.list);
|
|
|
+ }).catch(e =>{
|
|
|
+ console.log(e)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ buy() {
|
|
|
+ this.money = (1*this.list.data.cost) + this.list.data.cost_money_type;
|
|
|
+ this.souxu = this.list.data.ticket+this.list.data.ticket_money_type;
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ valChange(e) {
|
|
|
+
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if(this.value == 0){
|
|
|
+ this.$api.msg("预约份数不能为0")
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.show = false;
|
|
|
+ this.show1 = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.password = '';
|
|
|
+ this.show1 = false;
|
|
|
+ },
|
|
|
+ pswQd() {
|
|
|
+ buylala({
|
|
|
+ trade_psw: this.password
|
|
|
+ },this.id).then(e => {
|
|
|
+ this.password = ''
|
|
|
+ this.show1 = false;
|
|
|
+ console.log(e)
|
|
|
+ }).catch(e => {
|
|
|
+ this.password = ''
|
|
|
+ this.show1 = false;
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.shopBox {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ // height: 770rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0rpx 0rpx 17rpx 0rpx rgba(0, 0, 0, 0.05);
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .shopBox-top {
|
|
|
+ padding-top: 26rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 46rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ #one {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0f253a;
|
|
|
+ }
|
|
|
+
|
|
|
+ #two {
|
|
|
+ margin-left: 11rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #6d7c88;
|
|
|
+ }
|
|
|
+
|
|
|
+ #three {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ff4c4c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopBox-between {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ .number-left {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #44969d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number-right {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #44969d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .quotient {
|
|
|
+ .quotient-children {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #6d7c88;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .forward {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .forward-left {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #44969d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .forward-right {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #6d7c88;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .consume,
|
|
|
+ .appointmentTime,
|
|
|
+ .lotteryTime {
|
|
|
+ margin: 12rpx 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #6d7c88;
|
|
|
+ }
|
|
|
+ .consume > text,
|
|
|
+ .appointmentTime > text,
|
|
|
+ .lotteryTime > text {
|
|
|
+ font-size: 10rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .submit {
|
|
|
+ width: 600px;
|
|
|
+ height: 70rpx;
|
|
|
+ background: linear-gradient(90deg, #60bab0, #45969b);
|
|
|
+ border-radius: 35rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ margin: 40rpx 10rpx;
|
|
|
+ }
|
|
|
+ .submit1 {
|
|
|
+ width: 600px;
|
|
|
+ height: 70rpx;
|
|
|
+ background: #ECECEC;
|
|
|
+ border-radius: 35rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ 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>
|
