407 lines
13 KiB
Vue
407 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<view v-if="pageShow" class="padding-x120">
|
||
<!-- 使用标题栏 -->
|
||
<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>
|
||
</view>
|
||
</view>
|
||
<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>
|
||
</view>
|
||
<!-- 列表 -->
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<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)"
|
||
:class="shaiCurrentt==indexs?'dangShait colorh':'xbort color6'"
|
||
class="fon24 disac shaiEnd" v-for="(item,indexs) in shaiArrt"
|
||
:key="indexs" style="padding: 30rpx;">
|
||
<view class="flexs ">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
</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>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<backTop :showTop="showTop" @backTop="backTop"></backTop>
|
||
</view>
|
||
<foot-tab :current="1"></foot-tab>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import backTop from '@/components/backTop.vue';
|
||
export default {
|
||
components:{
|
||
backTop
|
||
},
|
||
data() {
|
||
return {
|
||
current:0,
|
||
chooseShai:false,
|
||
isasce:true,
|
||
productList:[],
|
||
zanList:[],//暂存产品列表不显示
|
||
shaiArr:[],
|
||
shaiArrt:[],
|
||
shaiCurrent:0,
|
||
shaiCurrentt:'-1',
|
||
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,
|
||
showJian:true,
|
||
user_type:uni.getStorageSync('user_type'),//权限
|
||
daCateId:''
|
||
}
|
||
},
|
||
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
|
||
this.shaiCurrent = '-1'
|
||
this.shaiCurrentt = '-1'
|
||
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,
|
||
hasChildren:item.hasChildren,
|
||
children:item.children
|
||
}
|
||
this.shaiArr.push(obj)
|
||
})
|
||
this.shaiArr.unshift({id:0,name:'全部',pid:0,hasChildren:false})
|
||
if(this.shaiArr[0].hasChildren){
|
||
this.shaiArr[0].children.forEach(item=>{
|
||
let obj = {
|
||
id:item.id,
|
||
name:item.name,
|
||
pid:item.pid,
|
||
hasChildren:item.hasChildren,
|
||
}
|
||
this.shaiArrt.push(obj)
|
||
})
|
||
this.shaiArrt.unshift({id:0,name:'全部',pid:0,hasChildren:false})
|
||
}
|
||
}
|
||
},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
|
||
this.shaiCurrentt = '-1'
|
||
if(id=='') this.cid = 0
|
||
else this.daCateId = this.cid = id
|
||
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)
|
||
})
|
||
this.shaiArrt.unshift({id:0,name:'全部',pid:0,hasChildren:false})
|
||
}
|
||
},
|
||
checkShait(id,index){
|
||
this.shaiCurrentt = index
|
||
console.log(id);
|
||
if(id==0) this.cid = this.daCateId
|
||
else this.cid = id
|
||
this.page = 1
|
||
this.isZanw = true
|
||
this.checkList()
|
||
}
|
||
},
|
||
onHide() {
|
||
this.isShai = false
|
||
this.yin = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {background-color: #f5f5f5;}
|
||
</style>
|