hm-examples/pagesA/pointsMall/pointsMall.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>