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="res=>changeSelect(res.id)" :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-sm flex align-center 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;letter-space:2upx;" class=" text-black cut">{{ item.name }}</view>
						<view class="text-gray margin-bottom-xs ">已售{{ item.sale_count }}件</view>
						<view class="flex justify-between align-center">
						    <view>
								<view v-if="item.type==1" class="text-red">
									￥
									<cu-price :value="item.price" size="32" />
								</view>
								<view class="text-yellow" v-else>
									{{item.point_price}}积分
								</view>
								<view class="bg-orange light text-xs padding-lr-xs">
									<text class="cuIcon-vip lg">会员价</text>
									<text class="text-price margin-left-xs">{{ item.vip_price }}</text>
								</view>
							</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 onShow() {
		var result = await api.typeList();
		if (result.code != 0) return false;
		this.label = result.data;
		await this.reset();
		if(this.activeId=='') this.activeId = result['data'][0]['id'];
		await this.requestFunc({ method: 'get', url: `/customer/commodity/list/`, data: { category: this.activeId, limit: 10 } });
	},
	methods: {
		...mapActions('requestList', ['reset', 'requestFunc']),
		custom(item) {
			if (this.bind != 1) return false;
			item=JSON.parse(JSON.stringify(item));
			item['img']=item.show_image_url;
			delete item['show_image_url'];
			this.value = item;
			this.number=1;
			this.show = true;
		},
		// 添加购物车
		async addcart() {
			var result = await api.shoppingCart({ quantity: this.number, commodity_details: this.value.id });
			if (result.code == 0) {
				this.show = false;
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
			}
		},
		async buyclicked() {
			let arr=[{...this.value,count:this.number}];
			this.show=false;
			uni.navigateTo({
				url:`/indexPages/pay/index?list=${JSON.stringify(arr)}`
			})
		},
		// 改变类型
		async changeSelect(id) {
			await this.reset();
			this.activeId = id;
			await this.requestFunc({ method: 'get', url: `/customer/commodity/list/`, data: { category: this.activeId , 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'
			});
		}
	},
	watch:{
	
	}
};
</script>

<style lang="scss" scoped>
.section-right {
	.item {
		.cut {
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp:1;
			-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>