|
|
@@ -1,39 +1,47 @@
|
|
|
<template>
|
|
|
<view class="group-box iPhone-bottom box-border-box flex-common-css">
|
|
|
- <Nav title='团购专区'></Nav>
|
|
|
- <scroll-view :scroll-y="true" class="scroll-view-css">
|
|
|
- <image class="head-img" src="@/static/img/buy/group-bg.png" mode="scaleToFill"></image>
|
|
|
- <view class="box-border-box content-b">
|
|
|
- <view class="box-card box-border-box mb-20" v-for="(item,i) in list" :key="i" @click="todet(item)">
|
|
|
- <image class="goods-img mb-16" :src="item.cover_img" mode="aspectFill"></image>
|
|
|
- <view class="text-overflow-ellipsis fs-32 fw-600 mb-20 w-100100">
|
|
|
- {{item.title}}
|
|
|
+ <Nav class="nav-b" title='团购专区'></Nav>
|
|
|
+ <scroll-view :scroll-y="true" class="scroll-view-box" @scroll='scroll' @scrolltolower="scrolltolower"
|
|
|
+ :scroll-top='scroll_top' :scroll-with-animation="false">
|
|
|
+ <view class="">
|
|
|
+ <view class="p-12-24 box-border-box class-b">
|
|
|
+ <view class="display-flex p-24 box-border-box nav-list bgc-f b-rad-16 mb-12">
|
|
|
+ <view class="text-align-center nav-item" v-for="(item,i) in navList" :key="i"
|
|
|
+ @click="selectType(item.id)">
|
|
|
+ <image class="nav-img" :src="item.img" mode="scaleToFill"></image>
|
|
|
+ <view class="fs-24 w-96" :class="navId == item.id?'fw-600 fc-41ABF5':'fw-400'">{{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="mb-40 flex-justify-space align-items-center">
|
|
|
- <view class="jd-f">
|
|
|
- <view class="jd-1"></view>
|
|
|
- <view class="jd-2" :style="{width:setWidth(item.number,item.sales)+'rpx'}"></view>
|
|
|
+ </view>
|
|
|
+ <view class="p-12-24 box-border-box sift-box align-items-center" :class="siftType?'bgc-f':''">
|
|
|
+ <view class="mr-20 sift-item align-items-center flex-justify-center"
|
|
|
+ :class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 1}]"
|
|
|
+ @click="siftClick(1)">
|
|
|
+ <view class="" :class="[{'fc-41ABF5':siftClassID === 1}]">
|
|
|
+ {{siftDistance}}
|
|
|
</view>
|
|
|
- <view class="">
|
|
|
- <span class="fs-24 fc-9">已团</span>
|
|
|
- <span class="fs-24 ">{{item.sales}}件</span>
|
|
|
- <span class="fs-24 fc-9">/剩</span>
|
|
|
- <span class="fs-24 ">{{item.number - item.sales}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="mr-12 sift-item align-items-center flex-justify-center"
|
|
|
+ :class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 2}]"
|
|
|
+ @click="siftClick(2)">
|
|
|
+ <view class="" :class="[{'fc-41ABF5':siftClassID === 2}]">
|
|
|
+ {{siftSort}}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="info-box display-flex">
|
|
|
- <view class="flex-1">
|
|
|
- <span class="fs-28 fc-FB3D03 fw-400">团购价¥</span>
|
|
|
- <span class="fs-40 fc-FB3D03 fw-600">{{item.price}}</span>
|
|
|
- </view>
|
|
|
- <view class="info-box-qiang">
|
|
|
- <image class="qiang-img" src="@/static/img/buy/qiang.png" mode="scaleToFill"></image>
|
|
|
- <view class="jiang-box fc-65420c fs-24 fw-600">直降</view>
|
|
|
- <view class="jiang-box-1 fs-24 fc-65420c fw-600">¥{{item.line_price - item.price}}</view>
|
|
|
- <image class="jiang-img" src="@/static/img/buy/x-jt.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="pop-box" :style="[{'top': pop_top + 'px'}]" :class="[{'pop-box-z':pop_type}]">
|
|
|
+ <view class="pop-content" :class="pop_type?'pop-box-true':'pop-box-false'">
|
|
|
+ <view class="">
|
|
|
+ 1111111111111111111000000000000000000000000000000000000000000000000000000000
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view v-show="pop_type" class="pop-mask" @click="pop_type = !pop_type"></view>
|
|
|
+ </view>
|
|
|
+ <view class="p-12-24 box-border-box">
|
|
|
+ <view class="h-200" v-for="(item,index) in 10">
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
@@ -46,15 +54,34 @@
|
|
|
} from '@/api/groupOrder.js';
|
|
|
import tools from "@/service/tools";
|
|
|
import EnBlank from "@/components/en-utils/en-blank/en-blank";
|
|
|
+ import {
|
|
|
+ getGroup
|
|
|
+ } from "@/api/category.js"
|
|
|
export default {
|
|
|
components: {
|
|
|
EnBlank
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ navId: 0,
|
|
|
+ navList: [{
|
|
|
+ name: "全部",
|
|
|
+ id: 0,
|
|
|
+ img: require('@/static/img/buy/t-all.png')
|
|
|
+ }],
|
|
|
+ siftType: false, // 粘性状态
|
|
|
+ siftClassID: 0, // 粘性样式Id
|
|
|
+ scrollTopNum: 0, //当前滚动条高度
|
|
|
+ scroll_top: 0, //滚动条高度
|
|
|
+ pop_top: 0, // pop距头部距离
|
|
|
+ pop_type: false,
|
|
|
+ pop_type_two: false,
|
|
|
+ navListHeight: '', //头部模块高度
|
|
|
+ siftDistance: '附近', //距离筛选
|
|
|
+ siftSort: '距离优先', //排序筛选
|
|
|
page: 1,
|
|
|
total: 0,
|
|
|
- list: [],
|
|
|
+ list: []
|
|
|
}
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
@@ -64,12 +91,81 @@
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
+ this.getGroup()
|
|
|
this.page = 1;
|
|
|
this.list = [];
|
|
|
this.getList();
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ onLoad() {},
|
|
|
+ mounted() {
|
|
|
+ this.getHeight()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ siftClick(num) {
|
|
|
+ this.scroll_top = this.scrollTopNum
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.scroll_top = this.navListHeight
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.siftClassID = num
|
|
|
+ this.pop_type = true
|
|
|
+ }, 400)
|
|
|
+ },
|
|
|
+ scroll(e) {
|
|
|
+ this.scrollTopNum = e.detail.scrollTop
|
|
|
+ if (e.detail.scrollTop > (this.navListHeight - 1)) {
|
|
|
+ this.siftType = true
|
|
|
+ } else {
|
|
|
+ this.siftType = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getHeight() {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.select('.class-b').boundingClientRect(data => {
|
|
|
+ if (data) {
|
|
|
+ // data.height 就是元素的高度
|
|
|
+ this.navListHeight = data.height
|
|
|
+ }
|
|
|
+ }).exec()
|
|
|
+ let Hone = 0
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (e) => {
|
|
|
+ let statusBarH = e.statusBarHeight + 10
|
|
|
+ let custom = 0;
|
|
|
+ custom = wx.getMenuButtonBoundingClientRect()
|
|
|
+ let customBarH = custom.height;
|
|
|
+ Hone = statusBarH + customBarH;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let HTwo = 0
|
|
|
+ const navT = uni.createSelectorQuery().in(this);
|
|
|
+ navT.select('.sift-box').boundingClientRect(data => {
|
|
|
+ if (data) {
|
|
|
+ // data.height 就是元素的高度
|
|
|
+ HTwo = data.height
|
|
|
+ console.log(HTwo, '222222222');
|
|
|
+ }
|
|
|
+ }).exec();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pop_top = Number(Hone) + Number(HTwo)
|
|
|
+ console.log(this.pop_top, '-----------');
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ scrolltolower(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ getGroup() {
|
|
|
+ let operate_id = uni.getStorageSync('operate_id');
|
|
|
+ let school_id = uni.getStorageSync('school_id');
|
|
|
+ getGroup({
|
|
|
+ operate_id: operate_id,
|
|
|
+ school_id: school_id
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.navList = [...this.navList, ...res.data]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
getList() {
|
|
|
let school_id = uni.getStorageSync('school_id');
|
|
|
groupList({
|
|
|
@@ -82,127 +178,131 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
- setWidth(total, num) {
|
|
|
- let w = 0
|
|
|
- let tH = 434;
|
|
|
- w = (tH / total * num).toFixed(0)
|
|
|
- console.log(w);
|
|
|
- return w
|
|
|
- },
|
|
|
todet(item) {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages-buy/group-det?id=' + item.id
|
|
|
})
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .content-b {
|
|
|
- padding: 0 24rpx 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .jd-f {
|
|
|
- position: relative;
|
|
|
- width: 434rpx;
|
|
|
- height: 18rpx;
|
|
|
-
|
|
|
- .jd-1 {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 434rpx;
|
|
|
- height: 18rpx;
|
|
|
- background: #FEE0E0;
|
|
|
- border-radius: 200rpx 200rpx 200rpx 200rpx;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
-
|
|
|
- .jd-2 {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- height: 18rpx;
|
|
|
- background: linear-gradient(90deg, #FF545D 0%, #FF4B84 100%);
|
|
|
- // background-color: #FF2652;
|
|
|
- border-radius: 200rpx 200rpx 200rpx 200rpx;
|
|
|
- z-index: 12;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .group-box {
|
|
|
- background-color: #EF2864;
|
|
|
- height: 100vh;
|
|
|
-
|
|
|
- .head-img {
|
|
|
- width: 100%;
|
|
|
- height: 422rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .box-card {
|
|
|
- width: 100%;
|
|
|
- min-height: 100rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- padding: 16rpx;
|
|
|
- box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(51, 51, 51, 0.1);
|
|
|
- border-radius: 20rpx;
|
|
|
-
|
|
|
- .goods-img {
|
|
|
- width: 100%;
|
|
|
- height: 452rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- // margin-top: 24rpx;
|
|
|
- }
|
|
|
+ .pop-box {
|
|
|
+ width: 100%;
|
|
|
+ // height: 100vh;
|
|
|
+ height: 84rpx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ // z-index: -1;
|
|
|
+ // transition: all 0.3s ease-in-out;
|
|
|
+ }
|
|
|
+ // .pop-box-z {
|
|
|
+ // z-index: 2;
|
|
|
+ // transition: all 0.3s ease-in-out;
|
|
|
+ // }
|
|
|
+ .pop-box-true {
|
|
|
+ // display: block;
|
|
|
+ // transition: all .3s inherit;
|
|
|
+ /* 定义过渡效果 */
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
|
|
|
- .info-box {
|
|
|
- width: 100%;
|
|
|
- height: 72rpx;
|
|
|
- background: #FEE0E0;
|
|
|
- border-radius: 20rpx;
|
|
|
- line-height: 72rpx;
|
|
|
- padding-left: 14rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .info-box-qiang {
|
|
|
- width: 148rpx;
|
|
|
- height: 72rpx;
|
|
|
- background: #F63E36;
|
|
|
- border-radius: 0rpx 20rpx 20rpx 0rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .qiang-img {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- margin: 6rpx 22rpx 0 auto;
|
|
|
- }
|
|
|
+ .pop-box-false {
|
|
|
+ // display: none;
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+ transform: translateY(-100%);
|
|
|
+ }
|
|
|
|
|
|
- .jiang-box {
|
|
|
- position: absolute;
|
|
|
- top: -30rpx;
|
|
|
- left: -22rpx;
|
|
|
- z-index: 20;
|
|
|
- }
|
|
|
+ .pop-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0 0 20rpx 20rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ // top: var(--pop_top)px;
|
|
|
+ z-index: 10;
|
|
|
+ // transition: all .3s inherit;
|
|
|
+ /* 定义过渡效果 */
|
|
|
+ /* 初始平移状态 */
|
|
|
+ }
|
|
|
|
|
|
- .jiang-box-1 {
|
|
|
- position: absolute;
|
|
|
- top: 0rpx;
|
|
|
- left: -30rpx;
|
|
|
- z-index: 20;
|
|
|
- }
|
|
|
+ .pop-mask {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, .5);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ // top: 0;
|
|
|
+ }
|
|
|
|
|
|
- .jiang-img {
|
|
|
- position: absolute;
|
|
|
- width: 120rpx;
|
|
|
- height: 90rpx;
|
|
|
- left: -60rpx;
|
|
|
- bottom: 0;
|
|
|
- z-index: 11;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .siftClass {
|
|
|
+ color: #41ABF5;
|
|
|
+ border: 1rpx solid #41ABF5;
|
|
|
+ background: #deeffb;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-200 {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: rebeccapurple;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view-box {
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sift-box {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 200;
|
|
|
+ overflow-x: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sift-content-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 74rpx;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sift-item {
|
|
|
+ min-width: 150rpx;
|
|
|
+ max-width: 280rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ transition: all .5s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group-box {}
|
|
|
+
|
|
|
+ .nav-list {
|
|
|
+ overflow-x: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 126rpx;
|
|
|
+ margin-right: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 auto 12rpx auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w-96 {
|
|
|
+ // width: 96rpx;
|
|
|
}
|
|
|
</style>
|