cosmetics_shop_wxapp/pages/distributionShop/index.vue

<template>
	<view  class="distributionShop">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">分销中心</view></cu-custom>
		<!-- section -->
		<image @click="handler" style="width: 100vw;" :src="params.show_image_url" mode="widthFix"></image>
		<view @click="handler" class="bg-white padding">
			<view class="flex align-center ">
				<view style="flex: auto;">
					<view class="text-xl text-bold">{{ params.name }}</view>
					<view class="text-price text-red"><cu-price :value="params.price" size="64" /></view>
				</view>
			</view>
			<view class="flex justify-between align-end margin-top-sm">
				<view class="bg-orange light padding-lr-xs">
					<text class="cuIcon-vip lg">会员价</text>
					<text class="text-price margin-left-xs">{{ params.vip_price }}</text>
				</view>
				<view class="">{{ params.point_price }}积分</view>
				<view class="text-grey">已售{{ params.sale_count }}件</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from './api.js';
export default {
	data() {
		return {
			params: {}
		};
	},
	async onShow() {
		var result = await api.detail();
		if (result.code !== 0) return false;
		this.params = result.data[0];
	},
	methods: {
		handler(){
			uni.navigateTo({
				url:`/pages/detail/index?id=${this.params.id}`
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.distributionShop {
	.section {
		.item {
			width: calc(50vw - 60upx);
			box-sizing: border-box;
			margin: 15upx 30upx;
			image {
				width: calc(50vw - 60upx);
				height: calc(50vw - 60upx);
			}
		}
		.item:nth-child(2n + 1) {
			margin-left: 15upx;
		}
		.item:nth-child(2n + 1) {
			margin-right: 15upx;
		}
	}
}
</style>