198 lines
6.1 KiB
Vue
198 lines
6.1 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'积分商城'" :statusTitle="true"></status-nav>
|
||
<!-- 搜索输入框 -->
|
||
<view class="search-input-box bacf poszy jf-input-box" :style="{top: statusHeight+'px'}">
|
||
<view class="disac pad-zy30 mar-s20">
|
||
<!-- 输入框 -->
|
||
<input class="width100 fon34 radius10" @confirm="searchKey" type="text" v-model="searchVal" placeholder="请输入商品名称"/>
|
||
<!-- 搜索 -->
|
||
<view class="flexs mar-z30 radius10 pad-zy40 fon34 colf" @tap="searchKey" :style="{background:publicColor}">搜索</view>
|
||
</view>
|
||
<!-- 分类标题 -->
|
||
<view class="disjbac pad-zy20 pad-s20 bacf fon24">
|
||
<view v-for="(item,index) in shopCate" class="disjcac" @tap="chooseShopCate(index)" :class="activeIndex==index?'activecate':'shopMo'" :style="{background:activeIndex==index?publicColor:'#F2F2F2'}" :key="index">
|
||
<span>{{item}}</span>
|
||
<view class="disjcac fc mar-z10" v-if="index==2 || index==3">
|
||
<image src="/static/public/address-top.png" mode=""></image>
|
||
<image src="/static/public/address-down.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 数据列表 -->
|
||
<view :style="{marginTop:statusHeight+titleHeight+'px'}">
|
||
<score-list id="myComponent" :dataList="dataList" v-if="dataList.length!=0"></score-list>
|
||
<nothing-page v-if="dataList.length==0" :content="`暂无更多${searchVal}积分商品`"></nothing-page>
|
||
</view>
|
||
<!-- 底部tab -->
|
||
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='4'></foot-tab>
|
||
<!-- 购物车 -->
|
||
<navigator url="/pagesA/shopCart/shopCart?isScore=score" hover-class="none">
|
||
<view class="cart-box">
|
||
<view class="posir">
|
||
<view class="disjcac" style="width: 112rpx;height: 112rpx;border-radius: 100%" :style="{background:publicColor}">
|
||
<i class="icon icon-shop-cart colf" style="font-size: 60rpx;"></i>
|
||
</view>
|
||
<view class="posia" v-if="cartNum!=0"><view>{{cartNum}}</view></view>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
<!-- 用户信息授权，手机号授权 -->
|
||
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import scoreList from '@/components/score-list.vue';
|
||
export default {
|
||
components:{
|
||
scoreList
|
||
},
|
||
data() {
|
||
return {
|
||
activeIndex:0,
|
||
shopCate:['综合','最新','兑换量','积分'],
|
||
titleHeight:'',//标题高度
|
||
dataList:[],
|
||
searchVal:'',//关键词搜索
|
||
type:'normal',//type=normal综合 newest=最新
|
||
sort_field:'',//排序字段 score=积分 num=兑换量
|
||
sort_value:'asc',//排序值 asc=升序 desc=降序
|
||
cishu:0,
|
||
cartNum:0,
|
||
}
|
||
},
|
||
computed: {
|
||
// 底部标题
|
||
titleList() {
|
||
return this.$store.state.titleList
|
||
},
|
||
// 底部图标
|
||
imgList() {
|
||
return this.$store.state.imgList
|
||
},
|
||
// 主题颜色
|
||
publicColor() {
|
||
return this.$store.state.publicColor
|
||
},
|
||
statusHeight() {
|
||
return this.$store.state.statusHeight
|
||
}
|
||
},
|
||
onShow() {
|
||
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
|
||
this.cartNumEv();
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 缓存状态栏+标题栏的高度
|
||
const query = wx.createSelectorQuery()
|
||
query.select('.search-input-box').boundingClientRect((rect) => {
|
||
// console.log('状态栏+标题栏：',rect.height);
|
||
this.titleHeight = rect.height
|
||
}).exec()
|
||
|
||
|
||
// 调用tools.js中的种植埋点事件
|
||
this.$toolAll.tools.plantPoint(12);
|
||
|
||
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
|
||
this.checkList();
|
||
}
|
||
},
|
||
methods: {
|
||
cartNumEv(){//购物车数量
|
||
this.$requst.post('order/shopping-cart-count',{type:'score'}).then(res=>{
|
||
if(res.code==0){
|
||
this.cartNum = res.data.count;
|
||
}
|
||
})
|
||
},
|
||
checkList(){//查询列表事件
|
||
let params = {
|
||
keyword:this.searchVal,//商品关键字 支持模糊搜索
|
||
page:1,
|
||
size:10,
|
||
type:this.type,//type=normal综合 newest=最新
|
||
sort_field:this.sort_field,//排序字段 score=积分 num=兑换量
|
||
sort_value:this.sort_value//排序值 asc=升序 desc=降序
|
||
}
|
||
this.$requst.post('spu/score',params).then(res=>{
|
||
if(res.code==0){
|
||
this.dataList = [];
|
||
if(res.data.list.length!=0){
|
||
res.data.list.forEach(item=>{
|
||
let obj = {
|
||
id:item.id,
|
||
imgSrc: this.$http + item.cover,
|
||
saleable:item.saleable,//是否下架
|
||
stock:item.stock,//库存
|
||
title: item.name,
|
||
zhePrice:item.price,
|
||
yuanPrice:item.original_price,
|
||
integral:item.score,
|
||
isTuan:false,
|
||
isPing:false,
|
||
isXian:false,
|
||
isIntegral:true,
|
||
grade:item.level_id,
|
||
published_at:item.published_at,//发布时间
|
||
amount:item.amount,//销量
|
||
level_text:item.level_text//会员限制提示 如青铜会员可购买
|
||
}
|
||
this.dataList.push(obj)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
searchKey(){//搜索事件
|
||
if(this.activeIndex==0) {
|
||
this.clearVal();
|
||
this.type = 'normal';
|
||
}
|
||
if(this.activeIndex==2 || this.activeIndex==3) this.sort_value = 'asc';
|
||
this.checkList();
|
||
},
|
||
chooseShopCate(index){//大分类选择事件
|
||
this.activeIndex = index;
|
||
this.type = '';
|
||
this.sort_field = '';
|
||
if(index==0) this.type = 'normal';
|
||
if(index==1) this.type = 'newest';
|
||
this.cishu++
|
||
if(index==2) {
|
||
this.sort_field = 'amount';
|
||
if(this.cishu%2==0) {
|
||
this.sort_value = 'asc';
|
||
} else this.sort_value = 'desc';
|
||
}
|
||
if(index==3) {
|
||
this.sort_field = 'score';
|
||
if(this.cishu%2==0) {
|
||
this.sort_value = 'asc';
|
||
} else this.sort_value = 'desc';
|
||
}
|
||
this.checkList();
|
||
},
|
||
clearVal(){
|
||
this.type = '';
|
||
this.sort_field = '';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("@/commons/icon-font.css");
|
||
page{background: #F5F5F5;}
|
||
.activecate,.shopMo{border-radius: 20rpx;text-align: center;background-color: #f2f2f2;color: #333333;padding: 16rpx 25rpx;width: 100rpx;}
|
||
.activecate{color: #FFFFFF;}
|
||
.activecate image{
|
||
-webkit-filter: invert(1); /* Chrome, Safari, Opera */
|
||
filter: invert(1);
|
||
}
|
||
</style>
|