2021-08-26 01:49:06 +00:00
|
|
|
|
<template>
|
2021-08-28 06:23:27 +00:00
|
|
|
|
<view>
|
2021-08-29 02:59:58 +00:00
|
|
|
|
<view v-if="pageShow" class="padding-x120">
|
2021-08-28 06:23:27 +00:00
|
|
|
|
<!-- 使用标题栏 -->
|
|
|
|
|
<status-nav @inputConfirm="inputConfirm" :statusBackg="true" :statusInput="true" :whereCome="whereCome*1" :backgroudColor="'#ffffff'" :tabcolor="'#ffffff'"></status-nav>
|
|
|
|
|
<!-- 导航 -->
|
|
|
|
|
<view class="disaa color33 bacb zIn1 ptab" :style="{top:statusHNH+'px'}">
|
|
|
|
|
<view :class="current==0?'bold':''" @tap="choose(0)">综合推荐</view>
|
|
|
|
|
<view :class="current==1?'bold':''" @tap="choose(1)">销量</view>
|
|
|
|
|
<view :class="current==2?'bold':''" @tap="choose(2)" class="disac">
|
|
|
|
|
<view>价格</view>
|
|
|
|
|
<view class=" margin-z10">
|
|
|
|
|
<view v-if="showJian" class="discc">
|
|
|
|
|
<image class="ascedesc" src="/static/img/product/ascendingOrder.png"></image>
|
|
|
|
|
<image class="ascedesc" style="transform: rotateZ(180deg);" src="/static/img/product/ascendingOrder.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else class="discc">
|
|
|
|
|
<image v-if="!isasce" @tap.stop="asecedescEvent(0)" class="ascedesc" src="/static/img/product/ascendingOrder.png"></image>
|
|
|
|
|
<image v-else class="ascedesc" style="transform: rotateZ(180deg);" src="/static/img/product/descendingOrder.png"></image>
|
|
|
|
|
<image v-if="isasce" @tap.stop="asecedescEvent(1)" class="ascedesc" style="transform: rotateZ(180deg);" src="/static/img/product/ascendingOrder.png"></image>
|
|
|
|
|
<image v-else class="ascedesc" src="/static/img/product/descendingOrder.png"></image>
|
|
|
|
|
</view>
|
2021-08-26 01:49:06 +00:00
|
|
|
|
</view>
|
|
|
|
|
</view>
|
2021-08-28 06:23:27 +00:00
|
|
|
|
<view :class="chooseShai?'catebold':''" @tap="chooseShaiEv" class="disac">
|
|
|
|
|
<view>筛选</view>
|
|
|
|
|
<!-- 筛选图标 -->
|
|
|
|
|
<image v-if="chooseShai" style="width: 22rpx;height: 22rpx;" src="/static/img/product/screen_02.png"></image>
|
|
|
|
|
<image v-else style="width: 22rpx;height: 22rpx;" src="/static/img/product/screen.png"></image>
|
|
|
|
|
</view>
|
2021-08-26 01:49:06 +00:00
|
|
|
|
</view>
|
2021-08-28 06:23:27 +00:00
|
|
|
|
<!-- 列表 -->
|
|
|
|
|
<view class="padding20 bacb plist" v-if="productList.length!=0" :style="{marginTop:(statusHNH+42)+'px'}">
|
|
|
|
|
<view @tap="goDetail(item.spu_id)" class="disba padding-x30 padding-s20 borbot margin-s10" v-for="(item,index) in productList" :key="index">
|
|
|
|
|
<image class="proimg flexs radius10" :src="item.src"></image>
|
|
|
|
|
<view class="padding-sx20 padding-z20 width100">
|
|
|
|
|
<view class="clips2 fon28">{{item.title}}</view>
|
|
|
|
|
<view class="fon24 color9 margin-sx10 clips1">{{item.content}}</view>
|
|
|
|
|
<view class="dis flw">
|
|
|
|
|
<label class="colorf6 fon24 radius16 pro margin-y10" v-for="(itemc,indexc) in item.cate" :key="indexc">{{itemc.name}}</label>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="disba margin-s20">
|
|
|
|
|
<view class="colorf6 fon24 bold">¥<text class="fon28">{{item.price}}</text>.0</view>
|
|
|
|
|
<!-- 加入购物车图片 -->
|
|
|
|
|
<image v-if="user_type!='personal'" @tap.stop="addGou(item.id)" class="progc" src="/static/img/public/gouwcar.png"></image>
|
|
|
|
|
</view>
|
2021-08-26 01:49:06 +00:00
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
2021-08-28 06:23:27 +00:00
|
|
|
|
<view v-if="productList.length==0" class="zanwu">暂无相关产品</view>
|
|
|
|
|
<!-- 筛选弹框 -->
|
|
|
|
|
<view v-if="yin" :class="isShai?'fadeInRight':chuout+' '+xiao" class="pchoose animated" :style="{top:(statusHNH+32)+'px'}">
|
|
|
|
|
<view class="padding-sx20" style="display: flex;background-color: rgba(0,0,0,.3);flex-direction: row-reverse;">
|
|
|
|
|
<!-- 筛选弹框,关闭图片 -->
|
|
|
|
|
<image @tap="closeCate" class="margin-y20" style="width: 28rpx;height: 28rpx;" src="/static/img/product/pclose.png" mode=""></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="dis" style="height: 100%;">
|
|
|
|
|
<scroll-view v-if="shaiArrt.length!=0" scroll-y style="background-color: #FFFFFF;height: 100%;">
|
|
|
|
|
<view>
|
|
|
|
|
<view @tap="checkShait(item.id,indexs)"
|
2021-09-02 01:00:12 +00:00
|
|
|
|
:class="shaiCurrentt==indexs?'dangShait colorh':'xbort color6'"
|
2021-08-28 06:23:27 +00:00
|
|
|
|
class="fon24 disac shaiEnd" v-for="(item,indexs) in shaiArrt"
|
|
|
|
|
:key="indexs" style="padding: 30rpx;">
|
|
|
|
|
<view class="flexs ">{{item.name}}</view>
|
|
|
|
|
</view>
|
2021-08-27 08:01:51 +00:00
|
|
|
|
</view>
|
2021-08-28 06:23:27 +00:00
|
|
|
|
</scroll-view>
|
|
|
|
|
<scroll-view scroll-y style="background-color: #f5f5f5;height: 100%;">
|
|
|
|
|
<view>
|
|
|
|
|
<view @tap="checkShai(item.id,indexs)"
|
|
|
|
|
:class="shaiCurrent==indexs?'dangShai':''"
|
|
|
|
|
class="fon24 disac shaiEnd" v-for="(item,indexs) in shaiArr"
|
|
|
|
|
:key="indexs" style="padding: 30rpx;">
|
|
|
|
|
<view class="flexs">{{item.name}}</view>
|
|
|
|
|
<!-- 筛选弹框,右侧图片 -->
|
|
|
|
|
<image v-if="shaiCurrent==indexs" class="posia" style="right: 0;width: 4rpx;height: 49rpx;" src="/static/img/product/pyxian.png" mode=""></image>
|
|
|
|
|
</view>
|
2021-08-27 08:01:51 +00:00
|
|
|
|
</view>
|
2021-08-28 06:23:27 +00:00
|
|
|
|
</scroll-view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<backTop :showTop="showTop" @backTop="backTop"></backTop>
|
|
|
|
|
</view>
|
|
|
|
|
<foot-tab :current="1"></foot-tab>
|
2021-08-26 01:49:06 +00:00
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import backTop from '@/components/backTop.vue';
|
|
|
|
|
export default {
|
|
|
|
|
components:{
|
|
|
|
|
backTop
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
current:0,
|
|
|
|
|
chooseShai:false,
|
|
|
|
|
isasce:true,
|
|
|
|
|
productList:[],
|
|
|
|
|
zanList:[],//暂存产品列表不显示
|
|
|
|
|
shaiArr:[],
|
2021-08-27 08:01:51 +00:00
|
|
|
|
shaiArrt:[],
|
2021-08-26 01:49:06 +00:00
|
|
|
|
shaiCurrent:0,
|
2021-08-27 08:01:51 +00:00
|
|
|
|
shaiCurrentt:'-1',
|
2021-08-26 01:49:06 +00:00
|
|
|
|
isShai:false,
|
|
|
|
|
yin:false,
|
|
|
|
|
chuout:'',
|
|
|
|
|
xiao:'',
|
|
|
|
|
showTop:false,
|
|
|
|
|
whereCome:2,
|
|
|
|
|
page:1,
|
|
|
|
|
size:10,
|
|
|
|
|
total:'',
|
|
|
|
|
isZanw:true,
|
|
|
|
|
cid:0,//分类ID
|
|
|
|
|
filed:'',//默认:synthetical 取值view_amount、sale_amount、sort_price
|
|
|
|
|
direction:'down',//取值down/up
|
|
|
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|
|
|
|
moIndex:0,
|
|
|
|
|
pageShow:false,
|
2021-08-27 08:01:51 +00:00
|
|
|
|
showJian:true,
|
2021-09-02 01:00:12 +00:00
|
|
|
|
user_type:uni.getStorageSync('user_type'),//权限
|
|
|
|
|
daCateId:''
|
2021-08-26 01:49:06 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onShow() {
|
|
|
|
|
this.$toolAll.tools.guoq()
|
|
|
|
|
uni.showTabBar()
|
|
|
|
|
uni.getStorageSync('whereCome') !='' ? this.whereCome = uni.getStorageSync('whereCome') : ''
|
|
|
|
|
uni.removeStorageSync('proDetail')
|
|
|
|
|
// console.log('清除产品详情缓存成功',uni.getStorageSync('proDetail'));
|
|
|
|
|
this.showJian = true
|
|
|
|
|
this.isasce = true
|
|
|
|
|
this.moIndex = 0
|
|
|
|
|
this.direction = 'up'
|
|
|
|
|
this.current = 0
|
|
|
|
|
this.filed = 'synthetical'
|
|
|
|
|
this.cid = 0
|
|
|
|
|
this.size = 10
|
|
|
|
|
this.page = 1
|
|
|
|
|
this.checkList()
|
|
|
|
|
},
|
|
|
|
|
onReachBottom() {
|
|
|
|
|
if(this.total!=this.productList.length){
|
|
|
|
|
this.page++
|
|
|
|
|
this.checkList()//调用自主预约列表事件
|
|
|
|
|
} else {
|
|
|
|
|
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多商品列表','none',1000)
|
|
|
|
|
this.isZanw = false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
this.shaiEv()
|
|
|
|
|
},
|
|
|
|
|
onPageScroll(e) {
|
|
|
|
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
|
|
|
|
},
|
|
|
|
|
// onReachBottom() {
|
|
|
|
|
// console.log('触底了');
|
|
|
|
|
// let that = this;
|
|
|
|
|
// this.page++
|
|
|
|
|
// that.checkList();
|
|
|
|
|
// },
|
|
|
|
|
methods: {
|
|
|
|
|
checkList(){
|
|
|
|
|
let paramCate ={
|
|
|
|
|
category_id:this.cid,
|
|
|
|
|
page:this.page,
|
|
|
|
|
size:this.size,
|
|
|
|
|
sort_filed:this.filed,
|
|
|
|
|
sort_direction:this.direction
|
|
|
|
|
}
|
|
|
|
|
// console.log('参数:',paramCate);
|
|
|
|
|
this.$requst.post('product/spu/list',paramCate).then(res=>{
|
|
|
|
|
// console.log('产品',res);
|
|
|
|
|
if(res.code==0){
|
|
|
|
|
this.pageShow = true
|
|
|
|
|
if(this.page==1) this.productList = []
|
|
|
|
|
this.total = res.data.total
|
|
|
|
|
if(res.data.list.length!=0){
|
|
|
|
|
// this.cid = res.data.list[0].cid//获取分类ID,以便加载更多使用
|
|
|
|
|
this.zanList = res.data.list
|
|
|
|
|
res.data.list.forEach(item=>{
|
|
|
|
|
let cateObj = {
|
|
|
|
|
id:item.main_sku.id,//商品ID
|
|
|
|
|
spu_id:item.id,
|
|
|
|
|
src:this.$http + item.main_sku.main_image,//商品图片
|
|
|
|
|
title:item.name,//商品名称
|
|
|
|
|
content:item.sub_title,//商品标题
|
|
|
|
|
cate:item.tag_list,//标签列表
|
|
|
|
|
price:item.main_sku.cur_price/100//商品原价
|
|
|
|
|
}
|
|
|
|
|
this.productList.push(cateObj)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
// this.$toolAll.tools.showToast('没找到相关产品o(╥﹏╥)o')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},error=>{})
|
|
|
|
|
},
|
|
|
|
|
inputConfirm(e){
|
|
|
|
|
// console.log(e);
|
|
|
|
|
this.keySearch(e)
|
|
|
|
|
},
|
|
|
|
|
keySearch(key){
|
|
|
|
|
this.productList = []
|
|
|
|
|
if(key!='' || key=='') this.cid = ''
|
|
|
|
|
let paramCate ={
|
|
|
|
|
category_id:this.cid,
|
|
|
|
|
page:this.page,
|
|
|
|
|
size:this.size,
|
|
|
|
|
sort_filed:this.filed,
|
|
|
|
|
sort_direction:this.direction,
|
|
|
|
|
keyword:key
|
|
|
|
|
}
|
|
|
|
|
this.$requst.post('product/spu/list',paramCate).then(res=>{
|
|
|
|
|
// console.log('产品',res);
|
|
|
|
|
if(res.data.list.length!=0){
|
|
|
|
|
this.cid = res.data.list[0].cid//获取分类ID,以便加载更多使用
|
|
|
|
|
this.zanList = res.data.list
|
|
|
|
|
res.data.list.forEach(item=>{
|
|
|
|
|
let cateObj = {
|
|
|
|
|
id:item.id,//商品ID
|
|
|
|
|
src:this.$http + item.main_sku.main_image,//商品图片
|
|
|
|
|
title:item.name,//商品名称
|
|
|
|
|
content:item.sub_title,//商品标题
|
|
|
|
|
cate:item.tag_list,//标签列表
|
|
|
|
|
price:item.main_sku.cur_price/100//商品原价
|
|
|
|
|
}
|
|
|
|
|
this.productList.push(cateObj)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
// this.$toolAll.tools.showToast('没找到相关产品o(╥﹏╥)o')
|
|
|
|
|
}
|
|
|
|
|
},error=>{})
|
|
|
|
|
},
|
|
|
|
|
backTop(){//回到顶部事件
|
|
|
|
|
uni.pageScrollTo({
|
|
|
|
|
scrollTop: 0,
|
|
|
|
|
duration: 300
|
|
|
|
|
});
|
|
|
|
|
this.isShai = false
|
|
|
|
|
},
|
|
|
|
|
choose(index){//标题选择
|
|
|
|
|
let ya = this
|
2021-08-27 08:01:51 +00:00
|
|
|
|
this.shaiCurrent = '-1'
|
|
|
|
|
this.shaiCurrentt = '-1'
|
2021-08-26 01:49:06 +00:00
|
|
|
|
this.cid = 0
|
|
|
|
|
this.page = 1
|
|
|
|
|
this.size = 10
|
|
|
|
|
this.current = index
|
|
|
|
|
if(index==0){this.filed = 'synthetical'}
|
|
|
|
|
else if(index==1){this.filed = 'sale_amount';this.direction = 'down'}
|
|
|
|
|
else if(index==2){//价格点击事件判断
|
|
|
|
|
this.showJian = false
|
|
|
|
|
this.moIndex++
|
|
|
|
|
if(this.moIndex==1){
|
|
|
|
|
// console.log('2');
|
|
|
|
|
if(!this.isasce){
|
|
|
|
|
this.direction = 'down'
|
|
|
|
|
} else this.direction = 'up'
|
|
|
|
|
} else {
|
|
|
|
|
// console.log('3');
|
|
|
|
|
this.isasce = !this.isasce
|
|
|
|
|
if(!this.isasce){
|
|
|
|
|
this.direction = 'down'
|
|
|
|
|
} else {
|
|
|
|
|
this.direction = 'up'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.filed = 'sort_price';this.checkList();return false
|
|
|
|
|
} else {
|
|
|
|
|
this.isShai = false
|
|
|
|
|
this.hideEv()
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
this.checkList()
|
|
|
|
|
},
|
|
|
|
|
chooseShaiEv(){
|
|
|
|
|
this.cid = 0
|
|
|
|
|
this.page = 1
|
|
|
|
|
this.size = 10
|
|
|
|
|
this.yin = true
|
|
|
|
|
this.isShai= true
|
|
|
|
|
this.chooseShai = true
|
|
|
|
|
this.chuout='fadeOutRight'
|
|
|
|
|
},
|
|
|
|
|
closeCate(){//关闭按钮事件
|
|
|
|
|
this.isShai = false
|
|
|
|
|
this.hideEv()
|
|
|
|
|
},
|
|
|
|
|
hideEv(){//隐藏筛选弹框延迟事件
|
|
|
|
|
let ya = this
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
ya.yin = false
|
|
|
|
|
},500)
|
|
|
|
|
},
|
|
|
|
|
shaiEv(){//商品分类查询事件
|
|
|
|
|
this.$requst.post('product/spu/category').then(res=>{
|
|
|
|
|
// console.log('筛选',res);
|
|
|
|
|
if(res.data.length!=0){
|
|
|
|
|
res.data.forEach(item=>{
|
|
|
|
|
let obj = {
|
|
|
|
|
id:item.id,
|
|
|
|
|
name:item.name,
|
|
|
|
|
pid:item.pid,
|
2021-08-27 08:01:51 +00:00
|
|
|
|
hasChildren:item.hasChildren,
|
|
|
|
|
children:item.children
|
2021-08-26 01:49:06 +00:00
|
|
|
|
}
|
|
|
|
|
this.shaiArr.push(obj)
|
|
|
|
|
})
|
2021-09-02 01:00:12 +00:00
|
|
|
|
this.shaiArr.unshift({id:0,name:'全部',pid:0,hasChildren:false})
|
|
|
|
|
if(this.shaiArr[0].hasChildren){
|
2021-08-27 08:01:51 +00:00
|
|
|
|
this.shaiArr[0].children.forEach(item=>{
|
|
|
|
|
let obj = {
|
|
|
|
|
id:item.id,
|
|
|
|
|
name:item.name,
|
|
|
|
|
pid:item.pid,
|
|
|
|
|
hasChildren:item.hasChildren,
|
|
|
|
|
}
|
|
|
|
|
this.shaiArrt.push(obj)
|
|
|
|
|
})
|
2021-09-02 01:00:12 +00:00
|
|
|
|
this.shaiArrt.unshift({id:0,name:'全部',pid:0,hasChildren:false})
|
2021-08-27 08:01:51 +00:00
|
|
|
|
}
|
2021-08-26 01:49:06 +00:00
|
|
|
|
}
|
|
|
|
|
},error=>{})
|
|
|
|
|
},
|
|
|
|
|
asecedescEvent(index){//升序
|
|
|
|
|
this.cid = 0
|
|
|
|
|
this.page = 1
|
|
|
|
|
this.size = 10
|
|
|
|
|
this.current = 2
|
|
|
|
|
if(index==0){
|
|
|
|
|
this.isasce = false
|
|
|
|
|
this.direction = 'up'
|
|
|
|
|
} else {
|
|
|
|
|
this.isasce = true
|
|
|
|
|
this.direction = 'down'
|
|
|
|
|
}
|
|
|
|
|
this.checkList()
|
|
|
|
|
},
|
|
|
|
|
addGou(e){//加入购物车
|
|
|
|
|
// console.log('加入购物车'+e);
|
|
|
|
|
// uni.showToast({title:'加入购物车'+e+'成功',icon:'none'})
|
|
|
|
|
if(uni.getStorageSync('is_active')==0) {
|
|
|
|
|
this.$toolAll.tools.showToast('您目前是游客,请授权登录')
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
uni.navigateTo({url:'/pages/login/login'})
|
|
|
|
|
},1500)
|
|
|
|
|
} else {
|
|
|
|
|
this.$requst.post('order/shopping-cart-add',{sku_id:e,num:1}).then(res=>{
|
|
|
|
|
if(res.code==0){
|
|
|
|
|
this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)')
|
|
|
|
|
}
|
|
|
|
|
},error=>{})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
goDetail(id){//查看详情
|
|
|
|
|
// console.log(id);
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url:'/pagesA/productDetail/productDetail?id='+id
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
checkShai(id,index){//筛选框item点击事件 按类别查询商品
|
|
|
|
|
// console.log(id,index);
|
|
|
|
|
this.shaiCurrent = index
|
2021-08-27 08:01:51 +00:00
|
|
|
|
this.shaiCurrentt = '-1'
|
|
|
|
|
if(id=='') this.cid = 0
|
2021-09-02 01:00:12 +00:00
|
|
|
|
else this.daCateId = this.cid = id
|
2021-08-27 08:01:51 +00:00
|
|
|
|
this.page = 1
|
|
|
|
|
this.isZanw = true
|
|
|
|
|
this.checkList()
|
|
|
|
|
this.shaiArrt = []
|
|
|
|
|
if(this.shaiArr[index].hasChildren==true && this.shaiArr[index].children.length!=0){
|
|
|
|
|
this.shaiArr[index].children.forEach(item=>{
|
|
|
|
|
let obj = {
|
|
|
|
|
id:item.id,
|
|
|
|
|
name:item.name,
|
|
|
|
|
pid:item.pid,
|
|
|
|
|
hasChildren:item.hasChildren,
|
|
|
|
|
}
|
|
|
|
|
this.shaiArrt.push(obj)
|
|
|
|
|
})
|
2021-09-02 01:00:12 +00:00
|
|
|
|
this.shaiArrt.unshift({id:0,name:'全部',pid:0,hasChildren:false})
|
2021-08-27 08:01:51 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
checkShait(id,index){
|
|
|
|
|
this.shaiCurrentt = index
|
2021-09-02 01:00:12 +00:00
|
|
|
|
console.log(id);
|
|
|
|
|
if(id==0) this.cid = this.daCateId
|
2021-08-26 01:49:06 +00:00
|
|
|
|
else this.cid = id
|
|
|
|
|
this.page = 1
|
|
|
|
|
this.isZanw = true
|
|
|
|
|
this.checkList()
|
2021-08-27 08:01:51 +00:00
|
|
|
|
}
|
2021-08-26 01:49:06 +00:00
|
|
|
|
},
|
|
|
|
|
onHide() {
|
|
|
|
|
this.isShai = false
|
|
|
|
|
this.yin = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
page {background-color: #f5f5f5;}
|
|
|
|
|
</style>
|