|
|
@@ -1,6 +1,22 @@
|
|
|
<template>
|
|
|
- <view class="flex-common-css iPhone-bottom">
|
|
|
+ <view class="flex-common-css iPhone-bottom box-border-box">
|
|
|
<Nav :title="shop_name" :bgckgroundBox='"transparent"' leftIconColor="#333" titleColor="#333"></Nav>
|
|
|
+ <uni-popup ref="popup" type="top" border-radius="0 0 10px 10px">
|
|
|
+ <view class="pop-box bgc-f" :style="[{'padding-top': popTop + 'px'}]">
|
|
|
+ <view class="p-24 box-border-box">
|
|
|
+ <view class="fs-32 fc-3 mb-20">
|
|
|
+ 全部团购
|
|
|
+ </view>
|
|
|
+ <view class="align-items-center flex-wrap-wrap">
|
|
|
+ <view class="w-50 p-24 box-border-box text-overflow-ellipsis-one"
|
|
|
+ v-for="(item,index) in sift_data" :key="index" :class="{'active':isActive==index}"
|
|
|
+ @click="popChenked(index)">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
<view class="sift-box p-12-24 box-border-box align-items-center">
|
|
|
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="scrollLeft" class="flex-1 tab-scroll">
|
|
|
<view class="max-w-200 text-overflow-ellipsis-one tab-scroll_item fs-28"
|
|
|
@@ -9,126 +25,140 @@
|
|
|
{{item.title}}
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
- <uni-icons class="flex-shrink0 ml-16" type="bars" size="22"></uni-icons>
|
|
|
+ <uni-icons @click="openPop" class="flex-shrink0 ml-16" type="bars" size="22"></uni-icons>
|
|
|
</view>
|
|
|
- <swiper @change="change" :current="isActive" class="swiper-content scroll-view-css">
|
|
|
- <swiper-item class="swiperitem-content scroll-view-css" v-for="(item,index) in swiper_data" :key="index">
|
|
|
- <scroll-view v-if="item!==''" :scroll-y="true" class="scroll-view-css p-12-24 box-border-box">
|
|
|
- <view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
|
|
|
- <view class="fs-36 fw-600 fc-3 letter-spacing-3 mb-18">
|
|
|
- {{item.title}}
|
|
|
- </view>
|
|
|
- <view class="p-b-20 mb-20 b-b-F9F9F9">
|
|
|
- <swiper class="swiper-goods">
|
|
|
- <swiper-item class="swiper-item-goods" v-for="(goods_item, goods_index) in item.image"
|
|
|
- :key="goods_index">
|
|
|
- <image class="goods-img" :src="goods_item" mode="aspectFill"></image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
- <view class="align-items-flex-start mb-16"
|
|
|
- v-show="item.is_quota != 0 && item.restricted_num != 1">
|
|
|
- <view class="mr-18 fs-26">
|
|
|
- 限制
|
|
|
+ <swiper @change="change" :current="isActive" class="swiper-content common-view-css">
|
|
|
+ <swiper-item class="swiperitem-content w-h-100" v-for="(item,index) in swiper_data" :key="index">
|
|
|
+ <view class="w-h-100 flex-direction">
|
|
|
+ <scroll-view v-if="item!==''" :scroll-y="true" class="scroll-view-css p-12-24 box-border-box">
|
|
|
+ <view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
|
|
|
+ <view class="fs-36 fw-600 fc-3 letter-spacing-3 mb-18">
|
|
|
+ {{item.title}}
|
|
|
</view>
|
|
|
- <view class="align-items-center">
|
|
|
- <view class="mr-8 fs-26" v-show="item.is_quota === 1">
|
|
|
- 每人限购{{item.quota_num}}张,
|
|
|
- </view>
|
|
|
- <view class="fs-26" v-show="item.restricted === 2">
|
|
|
- 每张卷限{{item.restricted_num}}人使用
|
|
|
+ <view class="p-b-20 mb-20 b-b-F9F9F9">
|
|
|
+ <swiper class="swiper-goods">
|
|
|
+ <swiper-item class="swiper-item-goods" v-for="(goods_item, goods_index) in item.image"
|
|
|
+ :key="goods_index">
|
|
|
+ <image class="goods-img" :src="goods_item" mode="aspectFill"></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="align-items-flex-start mb-16"
|
|
|
+ v-show="item.is_quota != 0 && item.restricted_num != 1">
|
|
|
+ <view class="mr-18 fs-26">
|
|
|
+ 限制
|
|
|
</view>
|
|
|
- <view class="fs-26" v-show="item.restricted === 3">
|
|
|
- 每桌限用{{item.restricted_num}}张
|
|
|
+ <view class="align-items-center">
|
|
|
+ <view class="mr-8 fs-26" v-show="item.is_quota === 1">
|
|
|
+ 每人限购{{item.quota_num}}张,
|
|
|
+ </view>
|
|
|
+ <view class="fs-26" v-show="item.restricted === 2">
|
|
|
+ 每张卷限{{item.restricted_num}}人使用
|
|
|
+ </view>
|
|
|
+ <view class="fs-26" v-show="item.restricted === 3">
|
|
|
+ 每桌限用{{item.restricted_num}}张
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="align-items-flex-start mb-16">
|
|
|
- <view class="mr-18 fs-26">
|
|
|
- 须知
|
|
|
- </view>
|
|
|
- <view class="fs-26" v-show="item.usable_time == 1">
|
|
|
- 24小时可用
|
|
|
+ <view class="align-items-flex-start mb-16">
|
|
|
+ <view class="mr-18 fs-26">
|
|
|
+ 须知
|
|
|
+ </view>
|
|
|
+ <view class="fs-26" v-show="item.usable_time == 1">
|
|
|
+ 24小时可用
|
|
|
+ </view>
|
|
|
+ <view class="" v-show="item.usable_time == 2">
|
|
|
+ {{item.timeData}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="" v-show="item.usable_time == 2">
|
|
|
- {{item.timeData}}
|
|
|
+ <view class="align-items-flex-start">
|
|
|
+ <view class="mr-18 fs-26">
|
|
|
+ 保障
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 随时退，过期自动退
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="align-items-flex-start">
|
|
|
- <view class="mr-18 fs-26">
|
|
|
- 保障
|
|
|
- </view>
|
|
|
- <view class="">
|
|
|
- 随时退，过期自动退
|
|
|
- </view>
|
|
|
+ <view class="fs-34 fc-3 mb-18">
|
|
|
+ 团购详情
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="fs-34 fc-3 mb-18">
|
|
|
- 团购详情
|
|
|
- </view>
|
|
|
- <view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
|
|
|
- <view class="item-info" v-for="(item_item,item_index) in item.item" :key="item_index">
|
|
|
- <view class="align-items-center mb-10">
|
|
|
- <view class="d"></view>
|
|
|
- <view class="fs-32">
|
|
|
- {{item_item.name}}
|
|
|
+ <view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
|
|
|
+ <view class="item-info" v-for="(item_item,item_index) in item.item" :key="item_index">
|
|
|
+ <view class="align-items-center mb-10">
|
|
|
+ <view class="d"></view>
|
|
|
+ <view class="fs-32">
|
|
|
+ {{item_item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="align-items-center flex-justify-space goods-info"
|
|
|
+ v-for="(goods_item,goods_index) in item_item.goods" :key="goods_index">
|
|
|
+ <view class="">
|
|
|
+ {{goods_item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ {{goods_item.number}}{{goods_item.unit}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="align-items-center flex-justify-space goods-info"
|
|
|
- v-for="(goods_item,goods_index) in item_item.goods" :key="goods_index">
|
|
|
- <view class="">
|
|
|
- {{goods_item.name}}
|
|
|
+ <view class="item-info">
|
|
|
+ <view class="align-items-center mb-10">
|
|
|
+ <view class="d"></view>
|
|
|
+ <view class="fs-32">
|
|
|
+ 备注
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
- {{goods_item.number}}{{goods_item.unit}}
|
|
|
+ <view class="fs-24">
|
|
|
+ 温馨提示：套餐用餐前请提前验券
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item-info">
|
|
|
- <view class="align-items-center mb-10">
|
|
|
+ <view class="fs-34 fc-3 mb-18">
|
|
|
+ 购买须知
|
|
|
+ </view>
|
|
|
+ <view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
|
|
|
+ <view class="mb-10 fs-30 fw-600 fc-3">
|
|
|
+ 有效期
|
|
|
+ </view>
|
|
|
+ <view class="b-b-F9F9F9 pb-10 mb-10" v-if="item.time_type === 1">
|
|
|
+ {{item.start_time}} 至 {{item.end_time}}
|
|
|
+ </view>
|
|
|
+ <view class="b-b-F9F9F9 pb-10 mb-10" v-else>
|
|
|
+ 购买后{{item.valid_day}}天
|
|
|
+ </view>
|
|
|
+ <view class="mb-10 fs-30 fw-600 fc-3">
|
|
|
+ 使用时间
|
|
|
+ </view>
|
|
|
+ <view class="b-b-F9F9F9 pb-10 mb-10">
|
|
|
+ {{item.usable_time == 1?'24小时可用':item.timeData}}
|
|
|
+ </view>
|
|
|
+ <view class="mb-10 fs-30 fw-600 fc-3">
|
|
|
+ 使用规则
|
|
|
+ </view>
|
|
|
+ <view class="align-items-center mb-10"
|
|
|
+ v-for="(use_message_item,use_message_index) in item.use_message" :key="use_message_index">
|
|
|
<view class="d"></view>
|
|
|
- <view class="fs-32">
|
|
|
- 备注
|
|
|
+ <view class="">
|
|
|
+ {{use_message_item.notice}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="fs-24">
|
|
|
- 温馨提示：套餐用餐前请提前验券
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="fs-34 fc-3 mb-18">
|
|
|
- 购买须知
|
|
|
- </view>
|
|
|
- <view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
|
|
|
- <view class="mb-10 fs-30 fw-600 fc-3">
|
|
|
- 有效期
|
|
|
</view>
|
|
|
- <view class="b-b-F9F9F9 pb-10 mb-10" v-if="item.time_type === 1">
|
|
|
- {{item.start_time}} 至 {{item.end_time}}
|
|
|
- </view>
|
|
|
- <view class="b-b-F9F9F9 pb-10 mb-10" v-else>
|
|
|
- 购买后{{item.valid_day}}天
|
|
|
- </view>
|
|
|
- <view class="mb-10 fs-30 fw-600 fc-3">
|
|
|
- 使用时间
|
|
|
- </view>
|
|
|
- <view class="b-b-F9F9F9 pb-10 mb-10">
|
|
|
- {{item.usable_time == 1?'24小时可用':item.timeData}}
|
|
|
- </view>
|
|
|
- <view class="mb-10 fs-30 fw-600 fc-3">
|
|
|
- 使用规则
|
|
|
- </view>
|
|
|
- <view class="align-items-center mb-10"
|
|
|
- v-for="(use_message_item,use_message_index) in item.use_message" :key="use_message_index">
|
|
|
- <view class="d"></view>
|
|
|
- <view class="">
|
|
|
- {{use_message_item.notice}}
|
|
|
+ </scroll-view>
|
|
|
+ <view class="but-box p-24 box-border-box bgc-f">
|
|
|
+ <view class="but bgc-3 align-items-center flex-justify-space plr-24 box-border-box">
|
|
|
+ <view class="fc-f fs-32">
|
|
|
+ 折后 <text class="fc-f fs-34">￥</text>{{item.price}}
|
|
|
+ </view>
|
|
|
+ <view class="but-right fc-f fs-32 bgc-41ABF5" @click="goToUrl">
|
|
|
+ 立即团购
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -151,7 +181,8 @@
|
|
|
scrollLeft: 0, // 横向滚动条位置
|
|
|
isActive: 0,
|
|
|
swiper_data: [],
|
|
|
- goodsList: []
|
|
|
+ goodsList: [],
|
|
|
+ popTop: 0
|
|
|
};
|
|
|
},
|
|
|
onLoad(data) {
|
|
|
@@ -187,9 +218,26 @@
|
|
|
setTimeout(() => {
|
|
|
this.getScrollW()
|
|
|
}, 500)
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (e) => {
|
|
|
+ let statusBarH = e.statusBarHeight + 10
|
|
|
+ let custom = 0;
|
|
|
+ custom = wx.getMenuButtonBoundingClientRect()
|
|
|
+ let customBarH = custom.height;
|
|
|
+ this.popTop = statusBarH + customBarH;
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ goToUrl() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages-buy/group-pay?shop_id=' + this.sift_data[this.isActive].shop_id + '&goods_id=' + this.sift_data[this.isActive].id
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openPop() {
|
|
|
+ this.$refs.popup.open()
|
|
|
+ },
|
|
|
setTimeData(timeData) {
|
|
|
let time = ''
|
|
|
let array = ''
|
|
|
@@ -239,6 +287,10 @@
|
|
|
}
|
|
|
}).exec()
|
|
|
},
|
|
|
+ popChenked(index) {
|
|
|
+ this.chenked(index)
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
chenked(index) {
|
|
|
this.isActive = index;
|
|
|
this.scrollLeft = 0;
|
|
|
@@ -248,47 +300,89 @@
|
|
|
console.log(this.scrollLeft);
|
|
|
};
|
|
|
},
|
|
|
- groupIndexGoods() {
|
|
|
+ groupIndexGoods() {
|
|
|
groupIndexGoods({
|
|
|
goods_id: this.goods_id,
|
|
|
shop_id: this.shop_id
|
|
|
}).then((res) => {
|
|
|
if (res.code === 1) {
|
|
|
this.sift_data = res.data
|
|
|
- this.sift_data.forEach((v, k) => {
|
|
|
- this.groupInfo(v.id)
|
|
|
- })
|
|
|
+ this.swiper_data = []
|
|
|
+ this.processGroupInfo(0);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- groupInfo(goodsId) {
|
|
|
- groupInfo({
|
|
|
- id: goodsId,
|
|
|
- shop_id: this.shop_id
|
|
|
- }).then((res) => {
|
|
|
- if (res.code === 1) {
|
|
|
- // if (res.data.usable_time === 2) {
|
|
|
- // res.data.timeData = this.setTimeData(res.data.usable_time_arr)
|
|
|
- // }
|
|
|
- // this.swiper_data.push(res.data)
|
|
|
- this.goodsList[goodsId]=res.data
|
|
|
- this.setGoods()
|
|
|
- }
|
|
|
- })
|
|
|
+ processGroupInfo(index) {
|
|
|
+ if (index < this.sift_data.length) {
|
|
|
+ const v = this.sift_data[index];
|
|
|
+ this.groupInfo(v.id).then(() => {
|
|
|
+ this.processGroupInfo(index + 1);
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
- setGoods(){
|
|
|
- this.swiper_data=[]
|
|
|
- this.goodsList.forEach(goods=>{
|
|
|
- if (goods!==''){
|
|
|
- this.swiper_data.push(goods)
|
|
|
- }
|
|
|
- })
|
|
|
+ groupInfo(goodsId) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ groupInfo({
|
|
|
+ id: goodsId,
|
|
|
+ shop_id: this.shop_id
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ if (res.data.usable_time === 2) {
|
|
|
+ res.data.timeData = this.setTimeData(res.data.usable_time_arr)
|
|
|
+ }
|
|
|
+ this.swiper_data.push(res.data);
|
|
|
+ }
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .w-h-100 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .overflow-auto {
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .but-box {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .but {
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .but-right{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 30%;
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ padding: 0 24rpx 0 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 0 200rpx 200rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .w-50 {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-box {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 40vh;
|
|
|
+ overflow: auto;
|
|
|
+ border-radius: 0 0 20rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
.d {
|
|
|
width: 10rpx;
|
|
|
height: 10rpx;
|
