|
|
@@ -1,6 +1,7 @@
|
|
|
<template>
|
|
|
<view class="flex-common-css iPhone-bottom box-border-box">
|
|
|
- <Nav :title="shop_name" :bgckgroundBox='"transparent"' leftIconColor="#333" titleColor="#333"></Nav>
|
|
|
+ <Nav :title="shop_name" :bgckgroundBox='"transparent"' leftColor="#fff" titleColor="#fff"></Nav>
|
|
|
+ <image src="/pages-buy/static/bg-2.png" mode="" class="bg-img"></image>
|
|
|
<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">
|
|
|
@@ -19,84 +20,101 @@
|
|
|
</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"
|
|
|
- v-for="(item,index) in sift_data" :key="index" :class="{'active':isActive==index}"
|
|
|
- @click="chenked(index)">
|
|
|
- {{item.title}}
|
|
|
+ <view class="max-w-200 text-overflow-ellipsis-one tab-scroll_item" v-for="(item,index) in sift_data"
|
|
|
+ :key="index" @click="chenked(index)">
|
|
|
+ <view class="text-overflow-ellipsis-one fs-28 fc-f mb-16">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view v-if="isActive==index" class="title-hr bgc-f"></view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
- <uni-icons @click="openPop" class="flex-shrink0 ml-16" type="bars" size="22"></uni-icons>
|
|
|
+ <!-- <uni-icons @click="openPop" class="flex-shrink0 ml-16 z-2" type="bars" size="22"></uni-icons> -->
|
|
|
</view>
|
|
|
<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">
|
|
|
+ <swiper class="swiper-goods mb-30">
|
|
|
+ <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 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 class="align-items-center flex-justify-space mb-30">
|
|
|
+ <view class="fs-32 fw-b fc-0 letter-spacing-3">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view class="xl-box">
|
|
|
+ <image src="/pages-buy/static/xl.png" mode="" class="xl-img"></image>
|
|
|
+ <view class="fc-F7663A fs-24 text-align-center z-2">
|
|
|
+ 已拼{{item.sales}}+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</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 class="align-items-center flex-justify-space mb-60 fg-box">
|
|
|
+ <view class="by-box"></view>
|
|
|
+ <view class="fg-hr"></view>
|
|
|
+ <view class="by-box-two"></view>
|
|
|
</view>
|
|
|
<view class="align-items-flex-start mb-16" v-show="item.is_quota == 1">
|
|
|
- <view class="mr-18 fs-26">
|
|
|
- 限购
|
|
|
+ <view class="mr-24 fs-28 fw-b fc-0">
|
|
|
+ 使用限制
|
|
|
</view>
|
|
|
<view class="align-items-center">
|
|
|
- <view class="mr-8 fs-26">
|
|
|
+ <view class="mr-8 fs-28 fc-0">
|
|
|
每人限购{{item.quota_num}}张,
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="align-items-flex-start mb-16">
|
|
|
- <view class="mr-18 fs-26">
|
|
|
- 限用
|
|
|
+ <view class="mr-24 fs-28 fw-b fc-0">
|
|
|
+ 使用限制
|
|
|
</view>
|
|
|
<view class="align-items-center">
|
|
|
- <view class="fs-26" v-show="item.restricted === 1">
|
|
|
+ <view class="fs-28 fc-0" v-show="item.restricted === 1">
|
|
|
不限用
|
|
|
</view>
|
|
|
- <view class="fs-26" v-show="item.restricted === 2">
|
|
|
+ <view class="fs-28 fc-0" v-show="item.restricted === 2">
|
|
|
每张卷限{{item.restricted_num}}人使用
|
|
|
</view>
|
|
|
- <view class="fs-26" v-show="item.restricted === 3">
|
|
|
+ <view class="fs-28 fc-0" v-show="item.restricted === 3">
|
|
|
每桌限用{{item.restricted_num}}张
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="align-items-flex-start mb-16">
|
|
|
- <view class="mr-18 fs-26">
|
|
|
- 须知
|
|
|
+ <view class="mr-24 fs-28 fw-b fc-0">
|
|
|
+ 消费须知
|
|
|
</view>
|
|
|
- <view class="fs-26" v-show="item.usable_time == 1">
|
|
|
+ <view class="fs-28 fc-0" v-show="item.usable_time == 1">
|
|
|
24小时可用
|
|
|
</view>
|
|
|
- <view class="" v-show="item.usable_time == 2">
|
|
|
+ <view class="fs-28 fc-0" v-show="item.usable_time == 2">
|
|
|
{{item.timeData}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="align-items-flex-start">
|
|
|
- <view class="mr-18 fs-26">
|
|
|
- 保障
|
|
|
+ <view class="mr-24 fs-28 fw-b fc-0">
|
|
|
+ 服务保障
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
+ <view class="fs-28 fc-0">
|
|
|
随时退，过期自动退
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="fs-34 fc-3 mb-18">
|
|
|
- 团购详情
|
|
|
+ <view class="align-items-center flex-justify-center mb-32">
|
|
|
+ <view class="tm-hr"></view>
|
|
|
+ <view class="fs-28 fc-0 plr-12">
|
|
|
+ 团购详情
|
|
|
+ </view>
|
|
|
+ <view class="tm-hr"></view>
|
|
|
</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 fw-b">
|
|
|
+ <view class="fs-28 fw-b">
|
|
|
{{item_item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -104,25 +122,24 @@
|
|
|
v-for="(goods_item,goods_index) in item_item.goods" :key="goods_index">
|
|
|
<div class="align-items-center">
|
|
|
<view class="d d-c"></view>
|
|
|
- <view class="fs-28">
|
|
|
+ <view class="fs-24">
|
|
|
{{goods_item.name}}
|
|
|
</view>
|
|
|
</div>
|
|
|
<view class="align-items-center">
|
|
|
- <view class="fc-9 mr-18">
|
|
|
+ <view class="fc-a mr-18 fs-24">
|
|
|
({{goods_item.number}}{{goods_item.unit}})
|
|
|
</view>
|
|
|
- <view class="w-100 text-align-right">
|
|
|
+ <view class="w-100 text-align-right fs-24">
|
|
|
￥{{goods_item.price}}
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="item-info">
|
|
|
<view class="align-items-center mb-10">
|
|
|
<view class="d"></view>
|
|
|
- <view class="fs-32 fw-b">
|
|
|
+ <view class="fs-28 fw-b">
|
|
|
备注
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -131,45 +148,81 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="fs-34 fc-3 mb-18">
|
|
|
+ <!-- <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="item-goods-box b-rad-20 bgc-f p-38-20-24 box-border-box mb-32">
|
|
|
+ <view class="align-items-center pb-36 mb-24 b-b-EAEAEC">
|
|
|
+ <image src="/pages-buy/static/gmxz.png" mode="" class="gmxz-img mr-10"></image>
|
|
|
+ <view class="fs-28 fc-F7663A">
|
|
|
+ 购买须知
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="b-b-F9F9F9 pb-10 mb-10" v-if="item.time_type === 1">
|
|
|
- {{item.start_time}} 至 {{item.end_time}}
|
|
|
+ <view class="align-items-center mb-24">
|
|
|
+ <view class="d"></view>
|
|
|
+ <view class="fs-28 fw-600 fc-3">
|
|
|
+ 有效期
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="b-b-F9F9F9 pb-10 mb-10" v-else>
|
|
|
- 购买后{{item.valid_day}}天
|
|
|
+ <view class="align-items-center mb-40">
|
|
|
+ <view class="d d-c"></view>
|
|
|
+ <view class="fs-24" v-if="item.time_type === 1">
|
|
|
+ {{item.start_time}} 至 {{item.end_time}}
|
|
|
+ </view>
|
|
|
+ <view class="fs-24" v-else>
|
|
|
+ 购买后{{item.valid_day}}天
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="mb-10 fs-30 fw-600 fc-3">
|
|
|
- 使用时间
|
|
|
+ <view class="align-items-center mb-24">
|
|
|
+ <view class="d"></view>
|
|
|
+ <view class="fs-28 fw-600 fc-3">
|
|
|
+ 使用时间
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="b-b-F9F9F9 pb-10 mb-10">
|
|
|
- {{item.usable_time == 1?'24小时可用':item.timeData}}
|
|
|
+ <view class="align-items-center mb-40">
|
|
|
+ <view class="d d-c"></view>
|
|
|
+ <view class="fs-24">
|
|
|
+ {{item.usable_time == 1?'24小时可用':item.timeData}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="mb-10 fs-30 fw-600 fc-3">
|
|
|
- 使用规则
|
|
|
+ <view class="align-items-center mb-24">
|
|
|
+ <view class="d"></view>
|
|
|
+ <view class="fs-28 fw-600 fc-3">
|
|
|
+ 使用规则
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="align-items-center mb-10"
|
|
|
+ <view class="align-items-center mb-30"
|
|
|
v-for="(use_message_item,use_message_index) in item.use_message"
|
|
|
:key="use_message_index">
|
|
|
- <view class="d"></view>
|
|
|
- <view class="">
|
|
|
+ <view class="d d-c"></view>
|
|
|
+ <image src="/pages-buy/static/right.png" mode="" class="right-icon"></image>
|
|
|
+ <view class="fs-24">
|
|
|
{{use_message_item.notice}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</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 class="but-box box-border-box">
|
|
|
+ <view class="but align-items-center flex-justify-space">
|
|
|
+ <view class="align-items-baseline pl-42 box-border-box">
|
|
|
+ <view class="fs-24 fc-f">
|
|
|
+ 折后 ￥
|
|
|
+ </view>
|
|
|
+ <view class="fs-40 fc-f fw-b mr-12">
|
|
|
+ {{item.price}}
|
|
|
+ </view>
|
|
|
+ <view class="zk-box text-align-center">
|
|
|
+ <image src="/pages-buy/static/zk.png" mode="" class="zk-img"></image>
|
|
|
+ <view class="fs-24 fc-F7663A z-2">
|
|
|
+ {{toFixedOne(item.price,item.line_price)}}折
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="but-right fc-f fs-32 bgc-41ABF5" @click="goToUrl">
|
|
|
- 立即团购
|
|
|
+ <view class="ljtg-box text-align-center" @click="goToUrl">
|
|
|
+ <image src="/pages-buy/static/ljtg.png" mode="" class="ljtg-bg"></image>
|
|
|
+ <view class="fc-F6531E fs-32 fw-b z-2">
|
|
|
+ 立即团购
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -249,6 +302,18 @@
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ toFixedOne(price, line_price) {
|
|
|
+ let num = (Number(price) / Number(line_price) * 10).toFixed(1)
|
|
|
+ // 转换为字符串，以便进行操作
|
|
|
+ var numStr = num.toString();
|
|
|
+ // 检查是否有小数部分
|
|
|
+ if (numStr.indexOf('.') !== -1) {
|
|
|
+ // 有小数部分，则移除多余的零
|
|
|
+ numStr = numStr.replace(/0+$/, '').replace(/\.$/, '');
|
|
|
+ }
|
|
|
+ // 返回处理后的数字或整数
|
|
|
+ return parseFloat(numStr);
|
|
|
+ },
|
|
|
goToUrl() {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages-buy/group-pay?shop_id=' + this.sift_data[this.isActive].shop_id + '&goods_id=' +
|
|
|
@@ -316,7 +381,7 @@
|
|
|
this.scrollLeft = 0;
|
|
|
console.log(this.scrollLeft);
|
|
|
for (let i = 0; i < index - 1; i++) {
|
|
|
- this.scrollLeft += this.sift_data[i].width
|
|
|
+ this.scrollLeft += this.sift_data[i].width + (this.sift_data[i].width / 2)
|
|
|
console.log(this.scrollLeft);
|
|
|
};
|
|
|
},
|
|
|
@@ -361,9 +426,124 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .ljtg-box {
|
|
|
+ width: 247rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ljtg-bg {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 247rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zk-box {
|
|
|
+ width: 83rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zk-img {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 83rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gmxz-img {
|
|
|
+ width: 27rpx;
|
|
|
+ height: 27rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fg-box {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .by-box {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #F5F5F5;
|
|
|
+ position: absolute;
|
|
|
+ left: -48rpx;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fg-hr {
|
|
|
+ width: 100%;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #EAEAEC;
|
|
|
+ position: relative;
|
|
|
+ top: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .by-box-two {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #F5F5F5;
|
|
|
+ position: absolute;
|
|
|
+ right: -48rpx;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tm-hr {
|
|
|
+ width: 55rpx;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xl-box {
|
|
|
+ width: 126rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: -3rpx;
|
|
|
+ top: 16rpx;
|
|
|
+ padding-top: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xl-img {
|
|
|
+ width: 126rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-goods-box {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-hr {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ position: relative;
|
|
|
+ left: calc(50% - 24rpx);
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-img {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 427rpx;
|
|
|
+ }
|
|
|
+
|
|
|
.w-100 {
|
|
|
min-width: 100rpx;
|
|
|
}
|
|
|
+
|
|
|
.w-h-100 {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -374,28 +554,18 @@
|
|
|
}
|
|
|
|
|
|
.but-box {
|
|
|
+ padding: 0 30rpx 0;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.but {
|
|
|
width: 100%;
|
|
|
- height: 90rpx;
|
|
|
- line-height: 90rpx;
|
|
|
- border-radius: 200rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
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;
|
|
|
+ background: linear-gradient(-90deg, #FF7D2D, #F54F1D);
|
|
|
+ box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(246, 83, 30, 0.32);
|
|
|
}
|
|
|
|
|
|
.w-50 {
|
|
|
@@ -410,10 +580,10 @@
|
|
|
}
|
|
|
|
|
|
.d {
|
|
|
- width: 10rpx;
|
|
|
- height: 10rpx;
|
|
|
+ width: 6rpx;
|
|
|
+ height: 6rpx;
|
|
|
border-radius: 50%;
|
|
|
- background: #ccc;
|
|
|
+ background: #000000;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
@@ -423,13 +593,13 @@
|
|
|
|
|
|
.swiper-goods {
|
|
|
width: 100%;
|
|
|
- height: 470rpx;
|
|
|
+ height: 381rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
|
|
|
.swiper-item-goods {
|
|
|
display: block;
|
|
|
- height: 470rpx;
|
|
|
+ height: 381rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
|
|
|
@@ -446,8 +616,11 @@
|
|
|
}
|
|
|
|
|
|
.tab-scroll {
|
|
|
- width: calc(100% - 62rpx);
|
|
|
+ width: 100%;
|
|
|
+ // width: calc(100% - 62rpx);
|
|
|
white-space: nowrap;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
}
|
|
|
|
|
|
.box-b {
|
|
|
@@ -473,8 +646,19 @@
|
|
|
}
|
|
|
|
|
|
.goods-info:last-child {
|
|
|
- padding-bottom: 10rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- border-bottom: 1rpx solid #F9F9F9;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ border-bottom: 1rpx solid #EAEAEC;
|
|
|
+ }
|
|
|
+
|
|
|
+ .z-2 {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-icon {
|
|
|
+ width: 6rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
}
|
|
|
</style>
|
