cosmetics_shop_wxapp/pages/commodity/index.vue

<template>
	<view class="commodity">
		<!-- header -->
		<cu-custom custom bgColor="bg-gradual-blue"><view slot="content">商品列表</view></cu-custom>
		<view class="cu-bar search bg-white border">
		  <view @click="searchFunc" class="search-form round flex justify-center">
		    <text class="cuIcon-search"></text>
			<text class="text-grey">搜索</text>
		  </view>
		</view>
		<!-- section -->
		<cu-treeSelectB  @change="changeSelect" :value="label" :height="height">
			<cu-scrollView @refresherpulling="refresherpulling" @scroll="scroll" :height="height" class="section-right">
				<view @click="detailFunc(item)" v-for="(item,index) in ListValue" :key="index" class="item bg-white radius padding flex margin-tb-sm margin-right">
					<!-- 图片 -->
					<image lazy-load="true" class="image radius margin-right-sm" :src="item.show_image_url | lazyImage" mode="aspectFit"></image>
					<view class="content">
						<view style="text-align: justify;" class=" text-black cut">{{item.name}}</view>
						<view class="text-gray">
							销量：{{item.sale_count}}
						</view>
						<view class="flex justify-between align-end">
							<view class="text-red">￥<cu-price :value="item.price" size="32" /></view>
							<view @click.stop="custom(item)" class="cart">
								<text class="cuIcon-cart text-xl"></text>
							</view>
						</view>
					</view>
				</view>
			    <!-- 状态管理 -->
				<view class="cu-load"  :class="{'loading':currentPage<=totalPage,'over':currentPage>totalPage}"></view>
			</cu-scrollView>
		</cu-treeSelectB>
		<!-- footer -->
		<cu-bar active="1" />
		<!-- 工具 -->
		<!-- 工具 -->
		<cu-goodA :value="value" @addcart="addcart" @buyclicked="buyclicked" :number="number" @changeNum="val=>number=val" :show.sync="show" />
	</view>
</template>

<script>
import { CustomBarHeight } from '@/common/device/index.js';
import { mapState,mapActions } from 'vuex';
import api from "./api.js";
export default {
	data() {
		return {
			number:1,
			value:{},
			show:false,
			label: [],
			activeId:''
		};
	},
	computed: {
		...mapState(['bind']),
		...mapState('requestList', ['ListValue','currentPage','totalPage']),
		height() {
			return `calc(100vh - 200rpx - ${CustomBarHeight}px)`;
		}
	},
	async onLoad() {
		var result =await api.typeList();
		if(result.code!=0) return false;
		this.label=result.data;
		await this.reset();
		this.activeId=result['data'][0]['id'];
	    await this.requestFunc({method:"get",url:`/customer/commodity/list/`,data:{category:result['data'][0]['id'],limit:10}})
	},
	methods: {
		...mapActions('requestList', ['reset','requestFunc']), 
		custom(item){
			if(this.bind!=1) return false;
			this.value={id:item.id,price:item.price,img:item.show_image_url};
			this.show=true;
		},
		// 添加购物车
		async addcart(){
		 	var result= await api.shoppingCart({quantity:this.number,commodity_details:this.value.id});
			if(result.code==0){
				this.number=1;
				this.value={};
				this.show=false;
				uni.showToast({
					title:"添加成功",
					icon:'success'
				})
			}
		},
		async buyclicked(){},
		// 改变类型
		async changeSelect(item) {
			await this.reset();
			this.activeId=item.id;
			await this.requestFunc({method:"get",url:`/customer/commodity/list/`,data:{category:item.id,limit:10}})
		},
		// 下拉刷新
		async refresherpulling(){
			await this.reset();
			await this.requestFunc({method:"get",url:`/customer/commodity/list/`,data:{category:this.activeId,limit:10}})
		},
		// 上拉加载
		async scroll(){
			await this.requestFunc({method:"get",url:`/customer/commodity/list/`,data:{category:this.activeId,limit:10}})
		},
		// 商品详情
		detailFunc(item){
			uni.navigateTo({
				url:`/pages/detail/index?id=${item.id}`
			})
		},
		searchFunc(){
			uni.navigateTo({
				url:"/commodityPages/search/index"
			})
		}
	},
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.section-right {
	.item {
		.cut{
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.image {
			width: 160upx;
			min-width: 160upx;
			background-color: #f1f1f1;
			height: 160upx;
			background-size: cover;
			background-position: center;
		}
		.content{
			flex: auto;
			.cart{
				float: right;
			}
		}
	}
}
</style>