<template> <view class="main"> <scroll-view scroll-y :show-scrollbar="false" style="height: 100vh;" @scrolltolower="search()" @scroll="scroll" > <view class="top_card"> <view class="fixed"> <view class="top_bar"> <view class="left" @click="$backup"> <text class="eosfont left_icon"></text>l <text class="close_title">关闭</text> </view> <view class="middle" :style="[has ? {'margin-left':'68rpx'} : null]"> <view class="title1">包年计划</view> <view class="title2">自由搭配 7折钜惠</view> </view> <view class="right_btn" v-if="!month_apply_id" @click="joinMonthly">加入计划</view> <view class="join_plan" v-else @click="$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${month_apply_id}`,2)">我的包年计划</view> </view> <view class="search_bar"> <text class="eosfont" @click="search(1)"></text> <input type="text" class="search_input" @confirm="search(1)" v-model="keyword"> </view> </view> <view class="monthly_title">想你所想·灵活采购</view> <view class="monthly_sub"> <text>宠医省钱更灵活</text> <text>新型自选采购方式</text> </view> <view class="join_title">谛宝多多邀请您加入包年计划~</view> <view class="card_detail"> <view class="detail_flex"> <text class="flex_title">自由搭配 7折钜惠</text> <view class="flex_right" @click="$jump(`/pages/monthlyIntroduce/monthlyIntroduce?login_flg=${login_flg}`,2)"> <text>包年计划说明</text> <text class="eosfont" style="font-size: 20rpx;"></text> </view> </view> <view class="detail_flex"> <view class="pre_item"> <image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month1%402x.png" /> <view class="pre_desc"> <view>参与包年计划</view> <view>商品低至7折</view> </view> </view> <view class="pre_item"> <image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month2%402x.png" /> <view class="pre_desc"> <view>随时采购</view> <view>不限次数</view> </view> </view> <view class="pre_item"> <image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month3%402x.png" /> <view class="pre_desc"> <view>正品保证</view> <view>7日可退货</view> </view> </view> <view class="pre_item"> <image class="icon_img" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/month4%402x.png" /> <view class="pre_desc"> <view>重复采购</view> <view>不限数量</view> </view> </view> </view> </view> </view> <view class="join_btn" v-if="!month_apply_id" @click="joinMonthly"> <view class="title1">加入包年计划</view> <view class="title2"> 可选 <text v-for="(item, index) in month_rule_list" :key="index">{{item.contract_period}}个月<text v-if="index+1 !== month_rule_list.length">/</text></text> 计划 </view> </view> <view class="check_btn" v-else @click="$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${month_apply_id}`,2)">查看我的包年计划</view> <view class="recommend_bar"> <text class="left_text">精品推荐</text> <view class="right_text" @click="openDrawer">筛选<text class="eosfont"></text></view> </view> <view class="recommend_box"> <view class="recommend_item" v-for="(item, index) in goodsList" :key="index"> <text class="label">包年计划</text> <image class="recommend_img" :src="item.default_image || $noGoodsImg" @click="$jumpGoodDetail(item.goods_id)" /> <view class="recommend_goods_name">{{item.goods_name}}</view> <view class="recommend_goods_sub">{{item.goods_sub_name}}</view> <view class="recommend_flex"> <view class="left" v-if="login_flg"> <text>¥ </text> <text>{{(item.discount === '0.00' || item.discount === null) ? (Number(item.price)*Number(min_discount)).toFixed(2) : (Number(item.price)*Number(item.discount)).toFixed(2)}}</text> </view> <view v-else class="no_price">登录显示价格</view> <text class="right eosfont" @click="$addCart(item.default_spec, 1, login_flg)"></text> </view> </view> </view> <uni-load-more :status="loadingType"></uni-load-more> </scroll-view> <view class="screen_btn" v-if="screen" @click="openDrawer"> <text>筛选商品</text> <text class="eosfont"></text> </view> <uni-drawer ref="drawer" mode="right" :width="280"> <view class="screen_content"> <view class="screen_title">筛选</view> <view class="screen_item"> <view class="screen_name">品牌</view> <view class="screen_detail"> <view class="detail_item" v-for="(item, index) in brand_list" :key="index" :class="{act: brand === item.brand}" @click="chooseFilter(1, item.brand)">{{item.brand}}</view> </view> </view> <view class="screen_item"> <view class="screen_name">类别</view> <view class="screen_detail"> <view class="detail_item" v-for="(item, index) in category_list" :key="index" :class="{act: cate_id_1 === item.cate_id}" @click="chooseFilter(2, item.cate_id)">{{item.cate_name}}</view> </view> </view> <view class="screen_item"> <view class="screen_name">包年计划</view> <view class="screen_detail"> <view class="detail_item" v-for="(item, index) in ruleList" :key="index" :class="{act: contract_period === item.contract_period}" @click="chooseFilter(3, item.contract_period, index)">{{item.contract_period}}个月</view> </view> </view> <view class="screen_item"> <view class="screen_name">起订量(元)</view> <view class="screen_detail"> <view class="detail_item" v-for="(item, index) in minumum" :key="index" :class="{act: min_index === index}" @click="chooseFilter(4, null, index)">{{item.min_quantity}}</view> </view> </view> <view class="bottom_box"> <view class="reset_btn" @click="resetFilter">重置</view> <view class="confirm_btn" @click="search(2)">确定</view> </view> </view> </uni-drawer> <BottomBar /> </view> </template> <script> import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"; import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; import BottomBar from "@/components/BottomBar/BottomBar.vue"; import { login } from '@/common/util.js'; export default { data() { return { screen: false, has: true, goodsList: [], month_apply_id: '', ruleList: [], min_discount: 1, store_min_discount: 1, // 暂存最小折扣,重置时使用 current: 1, loadingType: 'more', requestFlag: true, login_flg: 0, brand_list: [], category_list: [], month_rule_list: [], minumum: [], min_index: '', plan_index: 0, brand: '', cate_id_1: '', contract_period: '', keyword: '' } }, onLoad() { this.getData(); // #ifdef H5 //默认请求微信分享 if (this.$wechat && this.$wechat.isWechat()) { this.$wechat.share({titie: this.$getNavigationBarTitle()}); } this.postData(); // #endif }, methods: { openDrawer() { this.$refs.drawer.open(); }, getData() { if(!this.requestFlag) return this.loadingType = 'loading'; uni.request({ url: '/uni/api/month_index/MonthIndex', method: 'GET', dataType: 'json', success: (res) => { if(res.data.code === 0) { this.month_apply_id = res.data.data.month_apply_id; this.ruleList = res.data.data.ruleList; this.minumum = res.data.data.ruleList[0].child; this.min_discount = res.data.data.min_discount; this.store_min_discount = res.data.data.min_discount; this.brand_list = res.data.data.brand_list; this.category_list = res.data.data.category_list; this.month_rule_list = res.data.data.month_rule_list; this.data = res.data.data; this.login_flg = res.data.login_flg; this.search(); } } }); }, // 向小程序发送数据 postData(){ jWeixin.miniProgram.getEnv(function (res) { //获取当前环境 if(res.miniprogram){ // this.$wechat.postData('谛宝多多商城-首页'); const postData = { link: window.location.href, title: '谛宝多多商城-连续包月' } jWeixin.miniProgram.postMessage({ data: JSON.stringify(postData) }); } }); }, // 加入计划 joinMonthly() { if(!this.login_flg) { login(); return } this.$jump('/pages/monthlyJoin/monthlyJoin',2) }, chooseFilter(type, val, key) { // type: 1品牌 2分类 3包年计划 if(type === 1) { this.brand = val; } if(type === 2) { this.cate_id_1 = val; } if(type === 3) { this.contract_period = val; this.min_discount = this.ruleList[key]['child'][0]['discount']; this.minumum = this.ruleList[key]['child']; this.min_index = 0; this.plan_index = key; } if(type === 4) { this.min_index = key; this.min_discount = this.ruleList[this.plan_index]['child'][key]['discount']; } }, resetFilter() { this.brand = ''; this.cate_id_1 = ''; this.contract_period = ''; this.plan_index = 0; this.min_index = ''; this.min_discount = this.store_min_discount; this.minumum = this.ruleList[0]['child']; }, search(type) { // type 1是搜索,current,goodsList,requestFlag,brand,cate_id_1,contract_period重置 // type 2是筛选 if(type === 1) { this.brand = ''; this.cate_id_1 = ''; this.contract_period = ''; this.current = 1; this.goodsList = []; this.requestFlag = true; } if(type === 2) { this.current = 1; this.goodsList = []; this.requestFlag = true; } if(!this.requestFlag) return uni.request({ url: '/uni/api/search_goods/search_month_goods_list', method: "POST", data: { keyword: this.keyword, current: this.current, pageSize: 10, brand: this.brand, cate_id_1: this.cate_id_1, contract_period: this.contract_period }, dataType: 'json', success: (res) => { if(res.data.code === 0) { let goods = []; res.data.data !== null && res.data.data.map((item, index) => { goods.push(item._source); }); this.goodsList = this.goodsList.concat(goods); const totalPage = Math.ceil(res.data.page.total/res.data.page.page_size); if(this.current < totalPage) { this.current += 1; this.loadingType = 'more'; } else { this.requestFlag = false; this.loadingType = 'nomore' } this.$refs.drawer.close(); } } }) }, scroll(e) { if(e.detail.scrollTop >= 375 && !this.screen) { this.screen = true; } else if (e.detail.scrollTop < 370 && this.screen) { this.screen = false; } } }, components: { uniDrawer, uniLoadMore, BottomBar } } </script> <style lang="scss" scoped> .main { background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(248,249,251,1) 100%); box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.05); padding-bottom: 98rpx; .top_card { height: 410rpx; background:linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%); border-radius: 0 0 24rpx 24rpx; padding: 168rpx 20rpx 0; .fixed { position: fixed; left: 0; top: 0; background: linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%); z-index: 10; width: 100%; box-sizing: border-box; padding: 0 24rpx; height: 136rpx; border-radius: 0 0 24rpx 24rpx; } .top_bar { display: flex; justify-content: space-between; align-items: center; margin-top: 8rpx; .left { display: flex; align-items: center; color: #7c7c7c; .left_icon { font-weight: 900; margin-right: 10rpx; color: #000; font-size: 40rpx; } .close_title { font-size: 28rpx; color: #212121; margin-left: 10rpx; } } .middle { text-align: center; .title1 { font-size: 32rpx; color: #000; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; height: 44rpx; line-height: 44rpx; } .title2 { font-size: 20rpx; color: #575757; height: 28rpx; line-height: 28rpx; letter-spacing:2px; } } .right_btn { width: 140rpx; height: 56rpx; line-height: 56rpx; border-radius: 16rpx; text-align: center; background-color: #FAE0BB; text-align: center; color: #323233; font-size: 26rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; } .join_plan { width: 192rpx; height: 56rpx; line-height: 56rpx; text-align: center; background:linear-gradient(141deg,rgba(74,86,103,1) 0%,rgba(45,50,57,1) 100%); border-radius: 28rpx 0 0 28rpx; font-size: 26rpx; color: #FCE3C1; position: relative; right: -24rpx; } } .search_bar { width: 100%; height: 64rpx; border-radius: 32rpx; background-color: #fff; margin-top: 24rpx; display: flex; align-items: center; padding: 0 20rpx; box-sizing: border-box; box-shadow:0px 20rpx 40rpx 0px rgba(0,0,0,0.1); text { font-size: 32rpx; } .search_input { font-size: 28rpx; padding-left: 10rpx; width: 100%; } } .monthly_title { height:78rpx; font-size:64rpx; font-family:FZZCHJW--GB1-0,FZZCHJW--GB1; font-weight:normal; color:rgba(110,67,0,1); line-height:78rpx; letter-spacing:2rpx; background:linear-gradient(180deg, rgba(110,67,0,0.5) 0%, rgba(110,67,0,1) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin: 32rpx auto 0; text-align: center; font-weight: 900; } .monthly_sub { height:42rpx; font-size:30rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:rgba(145,99,32,1); line-height:42rpx; letter-spacing:2rpx; text-align: center; margin-top: 6rpx; text:nth-of-type(1) { margin-right: 36rpx; } } .join_title { color: #C18221; font-size: 24rpx; height: 34rpx; line-height: 34rpx; text-align: center; margin-top: 12rpx; } .card_detail { height: 328rpx; background-color: #fff; box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1); border-radius:20rpx; margin-top: 20rpx; padding: 32rpx 32rpx 36rpx; box-sizing: border-box; .detail_flex { display: flex; justify-content: space-between; align-items: center; .flex_title { color: #000; font-size: 32rpx; height: 44rpx; line-height: 44rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; } .flex_right { font-size: 26rpx; color: #7c7c7c; height: 36rpx; line-height: 36rpx; } .pre_item { width: 160rpx; text-align: center; margin-top: 40rpx; .icon_img { width: 100rpx; height: 100rpx; } .pre_desc { color: #744902; font-size: 22rpx; line-height: 32rpx; } } } } } .join_btn { width: 702rpx; height: 88rpx; border-radius: 20rpx; background:linear-gradient(314deg,rgba(238,190,114,1) 0%,rgba(255,224,176,1) 100%); box-shadow:0px 4rpx 40rpx 0px rgba(242,199,130,0.5); margin: 164rpx auto 34rpx; text-align: center; color: #744902; display: flex; flex-direction: column; justify-content: center; .title1 { font-size: 32rpx; height: 44rpx; line-height: 44rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; letter-spacing:1px; } .title2 { font-size: 20rpx; height: 28rpx; line-height: 28rpx; font-size: 20rpx; } } .check_btn { width: 702rpx; height: 88rpx; line-height: 88rpx; margin: 164rpx auto 34rpx; background:linear-gradient(141deg,rgba(74,86,103,1) 0%,rgba(45,50,57,1) 100%); border-radius: 20rpx; text-align: center; color: #FDDCA8; font-size: 32rpx; letter-spacing: 2rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; } .recommend_bar { display: flex; justify-content: space-between; align-items: center; padding: 0 24rpx; .left_text { color: #000; font-size: 36rpx; height: 50rpx; line-height: 50rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; } .right_text { width: 126rpx; height: 56rpx; line-height: 56rpx; border-radius: 28rpx; background:rgba(255,255,255,1); box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.05); text-align: center; color: #000; font-size: 28rpx; .eosfont { color: #151515; margin-left: 6rpx; font-size: 24rpx; opacity: 0.3; } } } .recommend_box { width: 702rpx; margin: 32rpx auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; .recommend_item { width: 340rpx; box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06); border-radius: 16rpx; background-color: #fff; overflow: hidden; margin-bottom: 20rpx; position: relative; .label { width: 100rpx; height: 40rpx; text-align: center; line-height: 40rpx; background:linear-gradient(141deg,rgba(32,34,36,1) 0%,rgba(90,74,53,1) 100%); box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06); border-radius:16rpx 0px 16rpx 0px; color: #F2D8A4; font-size: 20rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; position: absolute; top: 20rpx; left: 20rpx; z-index: 9; } .recommend_img { width: 340rpx; height: 340rpx; display: block; } .recommend_goods_name { color: #212121; font-size: 26rpx; text-shadow: 0px 4rpx 60rpx rgba(0,0,0,0.06); line-height: 36rpx; width: 300rpx; margin: 20rpx auto 14rpx; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .recommend_goods_sub { color: #979797; font-size: 24rpx; height: 34rpx; line-height: 34rpx; width: 300rpx; margin: 0 auto 38rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recommend_flex { width: 300rpx; margin: 0 auto 18rpx; display: flex; justify-content: space-between; align-items: baseline; .no_price { font-size: 24rpx; } .left { color: #F54903; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; text-shadow:0px 4px 60px rgba(0,0,0,0.06); height: 44rpx; line-height: 44rpx; text:nth-of-type(1) { font-size: 24rpx; margin-right: 6rpx; } text:nth-of-type(2) { font-size: 32rpx; } } .right { font-size: 32rpx; height: 32rpx; line-height: 32rpx; text-shadow:0px 4px 60px rgba(0,0,0,0.06); color: #AEAEAE; position: relative; top: -2rpx; } } } } .screen_btn { width: 200rpx; height: 72rpx; text-align: center; line-height: 72rpx; box-shadow:0px 4rpx 60rpx 0px rgba(247,208,147,0.7); background-color: #F7D093; border-radius: 36rpx; font-size: 28rpx; color: #000; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; position: fixed; bottom: 144rpx; left: 50%; margin-left: -100rpx; z-index: 11; .eosfont { font-size: 24rpx; font-weight:900; } } .screen_content::-webkit-scrollbar { display: none; } .screen_content { padding: 24rpx; height: 100%; box-sizing: border-box; overflow-y: scroll; .screen_title { font-size: 36rpx; height: 50rpx; line-height: 50rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; margin-bottom: 80rpx; } .screen_item { margin-bottom: 60rpx; .screen_name { font-size: 26rpx; height: 36rpx; line-height: 36rpx; } .screen_detail { overflow: hidden; display: flex; flex-wrap: wrap; .detail_item { height: 60rpx; line-height: 60rpx; padding: 0 22rpx; border-radius: 8rpx; background-color: #F8F9FB; color: #333333; font-size: 26rpx; margin: 24rpx 24rpx 0 0; } .detail_item:nth-of-type(3n) { margin-right: 0; } .act { background-color: #FFF8E9; color: #BF9B43; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; } } } .screen_item:last-child { margin-bottom: 0; } .bottom_box { position: fixed; bottom: 24rpx; width: 492rpx; left: 24rpx; display: flex; .reset_btn { width: 160rpx; height: 80rpx; text-align: center; line-height: 80rpx; border-radius: 16rpx; background-color: #FFF8E9; font-size: 26rpx; color: #BF9B43; } .confirm_btn { width: 312rpx; height: 80rpx; line-height: 80rpx; text-align: center; background-color: #35363E; border-radius: 16rpx; font-size: 26rpx; color: #FCE3C0; margin-left: 20rpx; } } } } </style>