cosmetics_shop_wxapp/pages/index/index.vue

<template>
	<view class="index">
		<!-- section -->
		<view class="section">
			<view v-for="(item, index) in typeList" :key="index" class="item padding bg-white ">
				<view class="flex">
					<view style="width: 20upx;background-color: #4d6bab;" class="margin-right-xs"></view>
					<view style="flex: auto; background-image: linear-gradient(120deg,#4d6bab  0%, #fff 80%);" class="padding-tb-sm text-white bg-white padding-left-sm">
						{{ item.name }}
					<!-- 	<view @click="commodityFunc(item.id)" class="text-grey" style="float: right;">
							查看更多<text class="cuIcon-right"></text>
						</view> -->
					</view>
				</view>
				<view class="content padding-tb flex flex-wrap align-center">
					<view
						@click="handler(it.id)"
						v-for="(it, ind) in item.commodity_list"
						:key="ind"
						class="content-item  margin-bottom"
						style="width: calc(100vw / 3 - 40upx);border-radius: 20upx;overflow: hidden;"
					>
						<image
							style="width: calc(100vw / 3 - 40upx);height: calc(100vw / 3 - 40upx);"
							lazy-load="true"
							:src="it.show_image_url | lazyImage"
							mode="aspectFit"
						></image>
						<view class="padding-xs">
							<view class="name text-black">{{ it.name }}</view>
							<view class="text-gray">销量：{{ it.sale_count }}</view>
							<view class="flex justify-between ">
								<view>
									<view v-if="it.type == 1" class="text-red text-price"><cu-price :value="it.price" size="32" /></view>
									<view v-else class="text-yellow">{{ it.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">{{ it.vip_price }}</text>
									</view>
								</view>
								<text class="cuIcon-cart text-xl"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<cu-bar active="0" />
	</view>
</template>

<script>
import { mapState } from 'vuex';
import api from './api.js';
export default {
	data() {
		return {
			typeList: []
		};
	},
	computed: {
		...mapState(['customer_id'])
	},
	async onLoad(options) {
		let { referrer } = options;
		if (referrer) uni.setStorageSync('referrer', referrer);
		var result = await api.index();
		if (result.code != 0) return false;
		if (result.data.length == 0) return false;
		result.data = result.data.filter(item => {
			return item['commodity_list'] && item['commodity_list'].length > 0;
		});
		this.typeList = result.data;
	},
	methods: {
		handler(id) {
			uni.navigateTo({
				url: `/pages/detail/index?id=${id}`
			});
		},
		commodityFunc(id){
			uni.switchTab({
				url:`/pages/commodity/index`
			})
		}
	},
	onShareAppMessage() {
		return {
			title: '首页',
			path: '/pages/index/index?referrer=' + this.customer_id
		};
	},
	onShareTimeline() {
		return {
			title: '首页',
			query: 'referrer=' + this.customer_id
		};
	}
};
</script>

<style lang="scss" scoped>
.index {
	.section {
		.item {
			.content {
				.content-item {
					margin-right: 30upx;
					image {
						vertical-align: top;
					}
					.name {
						text-align: justify;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
				.content-item:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
}
</style>