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>
		<!-- section -->
		<cu-treeSelectB @change="changeSelect" :value="label" :height="height">
			<view class="section-right">
				<view class="item bg-white radius padding flex margin-tb-sm">
					<!-- 图片 -->
					<image lazy-load="true" class="image radius margin-right-sm" src="https://gd-hbimg.huaban.com/d478a9c4bd0167adae79806c6ccaa2d7f59ded5dd101-WmmTdI_fw658/format/webp" mode="aspectFit"></image>
					<view class="content">
						<view class="text-xl">商品名称</view>
						<view class="text-gray">
							销量：1000
						</view>
						<view class="text-red">￥<cu-price value="100" size="32" /></view>
						<view class="cart">
							<text class="cuIcon-cart text-xl"></text>
						</view>
					</view>
				</view>
			</view>
		</cu-treeSelectB>
		<!-- footer -->
		<cu-bar active="1" />
	</view>
</template>

<script>
import { CustomBarHeight } from '@/common/device/index.js';
export default {
	data() {
		return {
			label: []
		};
	},
	computed: {
		height() {
			return `calc(100vh - 100rpx - ${CustomBarHeight}px)`;
		}
	},
	onLoad() {
		let label = [];
		for (var i = 0; i < 20; i++) {
			label.push({ label: 'Tab-' + i, id: i });
		}
		this.label = label;
	},
	methods: {
		changeSelect(item) {
			console.log(item);
		}
	},
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.section-right {
	.item {
		.image {
			width: 160upx;
			min-width: 160upx;
			height: 160upx;
			background-size: cover;
			background-position: center;
		}
		.content{
			flex: auto;
			.cart{
				float: right;
			}
		}
	}
}
</style>