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 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;" class=" text-black cut">{{ item.name }}</view>
						<view class="text-gray margin-bottom-xs ">已售{{ item.sale_count }}件</view>
						<view class="flex justify-between">
							<view class="bg-orange light padding-lr-xs">
								<text class="cuIcon-vip lg">会员价</text>
								<text class="text-price margin-left-xs">{{ item.vip_price }}</text>
							</view>
						</view>
						<view class="flex justify-between align-center">
							<view v-if="item.type==1" class="text-red">
								￥
								<cu-price :value="item.price" size="32" />
							</view>
							<view v-else>
								{{item.point_price}}积分
							</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>