dengrui/pages/tabbar/product/product.vue

407 lines
13 KiB
Vue
Raw Permalink Normal View History

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>