You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
8.6 KiB
379 lines
8.6 KiB
<template>
|
|
<view class="themes-activity position-a" :style="{height: 'calc(100vh - ' + hearHeight + ')' }">
|
|
<view class="" >
|
|
<view class="title-box">
|
|
<image
|
|
:src="event_rul + '/static/theme/title-bg.svg'"
|
|
class="img-n"
|
|
mode="widthFix"
|
|
/>
|
|
<view class="title-txt">团购活动</view>
|
|
</view>
|
|
|
|
<view class="nav-list flex j-between al-item-center">
|
|
|
|
<view
|
|
@tap.stop="sortClick"
|
|
class="search-navbar-item"
|
|
:style="!field || field == 'sort' ? 'color:' + '#ED5925' : ''"
|
|
data-field="sort"
|
|
data-order="desc"
|
|
>推荐</view
|
|
>
|
|
<view
|
|
@tap.stop="sortClick"
|
|
class="search-navbar-item"
|
|
:style="field == 'sales' ? 'color:' + '#ED5925' : ''"
|
|
data-field="sales"
|
|
data-order="desc"
|
|
>销量</view
|
|
>
|
|
<view
|
|
@tap.stop="sortClick"
|
|
class="search-navbar-item"
|
|
data-field="sell_price"
|
|
:data-order="order == 'asc' ? 'desc' : 'asc'"
|
|
>
|
|
<text :style="field == 'sell_price' ? 'color:' + '#ED5925' : ''"
|
|
>价格</text
|
|
>
|
|
<text
|
|
style="font-size: 26rpx"
|
|
class="iconfont icon-danbianjiantou1"
|
|
:style="{
|
|
color:
|
|
field == 'sell_price' && order == 'asc' ? '#ED5925' : '#999',
|
|
}"
|
|
></text>
|
|
<text
|
|
style="font-size: 26rpx; margin-left: -10rpx"
|
|
class="iconfont icon-danbianjiantou"
|
|
:style="{
|
|
color:
|
|
field == 'sell_price' && order == 'desc' ? '#ED5925' : '#999',
|
|
}"
|
|
></text>
|
|
</view>
|
|
<view @tap="open" >筛选 <text class="iconfont icon-shaixuan" style="font-size: 26rpx; margin-left: 4rpx;color: #999;"></text></view>
|
|
</view>
|
|
</view>
|
|
<scroll-view
|
|
class="scroll-list lise-t"
|
|
:scroll-y="true"
|
|
@scrolltolower="getmorecomment"
|
|
v-if="shopTuangou && shopTuangou.length > 0"
|
|
>
|
|
<themes-tuangou-item v-if="isActivity" :data="shopTuangou" :timestamp="timestamp" :menuindex="menuindex"></themes-tuangou-item>
|
|
<view class="flex flex-colum" v-else>
|
|
<image class="n-thing" :src="event_rul + '/static/images/n-thing.png'" mode="widthFix"></image>
|
|
<view class="text-center color-gray">暂无活动～</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view
|
|
v-if="visibleSync"
|
|
:class="{ 'uni-drawer--visible': showDrawer }"
|
|
class="uni-drawer"
|
|
@touchmove.stop.prevent="clear"
|
|
>
|
|
<view
|
|
class="uni-drawer__mask"
|
|
:class="{ 'uni-drawer__mask--visible': showDrawer && mask }"
|
|
@tap="close('mask')"
|
|
/>
|
|
<view
|
|
class="uni-drawer__content"
|
|
:class="{
|
|
'uni-drawer--right': !rightMode,
|
|
'uni-drawer--left': rightMode,
|
|
'uni-drawer__content--visible': showDrawer,
|
|
}"
|
|
>
|
|
<view class="bolting-box">
|
|
<view class="name">筛选</view>
|
|
<view class="title">商品分类</view>
|
|
<view class="content flex flex-w">
|
|
<view
|
|
class="text"
|
|
:style="{
|
|
color: boltingListIndex === 0 ? '#EA4E34' : '#333333',
|
|
backgroundColor: boltingListIndex === 0 ? '#FFE4C2' : '#F7F7F7 ',
|
|
}"
|
|
@tap="bolting(0)"
|
|
>全部</view
|
|
>
|
|
<block v-for="(item, idx) in boltingList" :key="idx">
|
|
<view
|
|
class="text"
|
|
v-show="boltingList.length != 0"
|
|
:style="{
|
|
color: boltingListIndex === idx + 1 ? '#EA4E34' : '#333333',
|
|
backgroundColor: boltingListIndex === idx + 1 ? '#FFE4C2' : '#F7F7F7 ',
|
|
}"
|
|
@tap="bolting(idx + 1)"
|
|
>{{ item.name }}</view
|
|
>
|
|
</block>
|
|
</view>
|
|
<view class="bolting-box-b flex j-between">
|
|
<view class="res btn" @tap="boltingAll()">重置</view>
|
|
<view
|
|
class="comf btn"
|
|
:style="{ 'background-color': '' }"
|
|
@tap="filterConfirm(cpid)"
|
|
>确定</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<loading v-if="loading"></loading>
|
|
<nodata text="没有查找到相关商品" v-if="nodata"></nodata>
|
|
<loading v-if="loading"></loading>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixin } from '../logic/activity.js';
|
|
import themesShop from "./components/themes-shop.vue";
|
|
import themesTuangouItem from "./components/themes-tuangou-item.vue";
|
|
|
|
export default {
|
|
mixins: [myMixin],
|
|
components: {
|
|
themesShop,
|
|
themesTuangouItem
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.themes-activity {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
border-radius: 20rpx 20rpx 0;
|
|
flex: 1;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 30rpx,#f4f4f4 30rpx, #f4f4f4 100%);
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 20rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: linear-gradient(180deg, #FFD7B7 0, #f4f4f4 100%);
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
}
|
|
}
|
|
.title-box {
|
|
flex-shrink: 0;
|
|
margin-top: -20rpx;
|
|
height: 114rpx;
|
|
position: relative;
|
|
|
|
.img-n {
|
|
width: 354rpx;
|
|
height: 100%;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.title-txt {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 50rpx;
|
|
letter-spacing: 2rpx;
|
|
padding-top: 26rpx;
|
|
}
|
|
|
|
.txt {
|
|
padding: 0 30rpx;
|
|
}
|
|
}
|
|
.nav-list {
|
|
flex-shrink: 0;
|
|
padding: 34rpx 30rpx 34rpx;
|
|
.actived {
|
|
color: #FB5E00;
|
|
}
|
|
.selec {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
.scroll-list {
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
.n-thing {
|
|
width: 282rpx;
|
|
margin: 100rpx auto 0;
|
|
}
|
|
.lise-h {
|
|
height: 100%;
|
|
padding-top: 10rpx;
|
|
}
|
|
|
|
.select-box {
|
|
width: 100%;
|
|
height: calc(100% - 80rpx);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 80rpx;
|
|
.select-mxk {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 66;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.select-box-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 68;
|
|
|
|
.content-item {
|
|
border-top: 2rpx solid #f2f2f4;
|
|
}
|
|
}
|
|
}
|
|
// 筛选
|
|
.uni-drawer {
|
|
height: 100%;
|
|
width: 100%;
|
|
/* #ifndef APP-NVUE */
|
|
display: block;
|
|
/* #endif */
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
z-index: 999;
|
|
top: 20rpx;
|
|
}
|
|
|
|
.uni-drawer__content {
|
|
/* #ifndef APP-NVUE */
|
|
display: block;
|
|
/* #endif */
|
|
position: absolute;
|
|
top: 0;
|
|
width: 250px;
|
|
bottom: 0;
|
|
background-color: #ffffff;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.uni-drawer--left {
|
|
left: 0;
|
|
/* #ifdef APP-NVUE */
|
|
transform: translateX(-251px);
|
|
/* #endif */
|
|
/* #ifndef APP-NVUE */
|
|
transform: translateX(-100%);
|
|
/* #endif */
|
|
}
|
|
|
|
.uni-drawer--right {
|
|
right: 0;
|
|
/* #ifdef APP-NVUE */
|
|
transform: translateX(251px);
|
|
/* #endif */
|
|
/* #ifndef APP-NVUE */
|
|
transform: translateX(100%);
|
|
/* #endif */
|
|
}
|
|
|
|
.uni-drawer__content--visible {
|
|
transform: translateY(0px);
|
|
}
|
|
|
|
.uni-drawer__mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* #ifndef APP-NVUE */
|
|
display: block;
|
|
/* #endif */
|
|
opacity: 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.uni-drawer__mask--visible {
|
|
/* #ifndef APP-NVUE */
|
|
display: block;
|
|
/* #endif */
|
|
opacity: 1;
|
|
}
|
|
|
|
.bolting-box {
|
|
padding: 30rpx 0 30rpx 28rpx;
|
|
|
|
.name {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.title {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-top: 34rpx;
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
padding: 28rpx 0 10rpx;
|
|
margin: 0 -8rpx;
|
|
|
|
.text {
|
|
width: 140rpx;
|
|
height: 60rpx;
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
margin: 0 8rpx 18rpx;
|
|
font-size: 24rpx;
|
|
border-radius: 4rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.bolting-box-b {
|
|
margin-right: 28rpx;
|
|
padding-top: 58rpx;
|
|
border-top: 1rpx solid #ECECEC;
|
|
.btn {
|
|
width: 214rpx;
|
|
font-size: 28rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
border-radius: 6rpx;
|
|
}
|
|
.res {
|
|
color: #333333;
|
|
border: 1rpx solid #ECECEC;
|
|
}
|
|
.comf {
|
|
color: #FFFFFF;
|
|
background: linear-gradient(to right, #FF9F28 0, #FF5E07 100%);
|
|
}
|
|
}
|
|
}
|
|
</style>
|