cosmetics_shop_wxapp/pages/detail/index.vue

<template>
	<view class="detail">
		<!-- header -->
		<cu-custom isBack custom bgColor="bg-gradual-blue"><view slot="content">商品详情</view></cu-custom>
		<!-- section -->
		<view class="section">
			<cu-swiper :value="swiperList" />
			<view class="bg-white padding">
				<view class="flex align-center">
					<view style="flex: auto;" class="text-xl text-bold">{{ detail.name }}</view>
					<view @click="favoriteFunc" style="min-width: 100upx;" class="text-center">
						<text v-if="dynamic.favorite" class="cuIcon-likefill text-red  text-xxl"></text>
						<text v-else class="cuIcon-like text-xxl"></text>
					</view>
				</view>
				<view class="flex justify-between align-end margin-top-sm">
					<view class="text-price text-red"><cu-price :value="detail.price" size="64" /></view>
					<view class="text-grey">销量：{{ detail.sale_count }}</view>
				</view>
				<!-- <view class="margin-top-sm text-grey">商品详情</view> -->
			</view>
			<view class="margin-tb-sm  padding	bg-white flex">
				<view style="min-width: 100upx;" class="text-black text-bold">配送至</view>
				<view style="flex: auto;">
					<view class="text-grey">
						河南省郑州市中原区是否真
						<text class="cuIcon-location lg margin-left-sm"></text>
					</view>
					<view class="">张三 18864585256</view>
				</view>
			</view>
			<view class="padding margin-tb-sm  bg-white">
				<view class="flex justify-between">
					<view class="text-bold text-black text-bold">评价（265）</view>
					<view @click="evaluateFunc">
						查看全部
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<cu-evaluate :value="evaluate" />
			</view>
			<view class="bg-white padding-tb">
				<view class="text-black text-bold margin-bottom-sm padding-lr">图文介绍</view>
				<image
					v-for="(item, index) in detailList"
					:key="index"
					lazy-load="true"
					style="width: 100%;vertical-align: top;display: block;"
					:src="item"
					mode="widthFix"
				></image>
			</view>
		</view>
		<!-- footer -->
		<view class="footer">
			<view class=" cu-bar bg-white tabbar border shop">
				<view @click="favoriteFunc" v-if="dynamic.favorite" class="action text-orange">
					<view class="cuIcon-favorfill"></view>
					已收藏
				</view>
				<view @click="favoriteFunc" v-else class="action ">
					<view class="cuIcon-favor"></view>
					收藏
				</view>
				<view @click="shoppingCart" class="action">
					<!-- <view class="cuIcon-cart"><view class="cu-tag badge">99</view></view> -->
					购物车
				</view>
				<view class="btn-group">
					<button @click="show=true" :disabled="bind != 1" class="cu-btn bg-orange round shadow-blur">
						<text v-if="shoplock" class="cuIcon-loading2 iconfont-spin"></text>
						添加购买
					</button>
				</view>
			</view>
		</view>
		<!-- 工具 -->
		<cu-goodA :value="value" @addcart="addcart" @buyclicked="buyclicked" :number="number" @changeNum="val=>number=val" :show.sync="show" />
	</view>
</template>

<script>
import api from './api.js';
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['bind']),
		value(){
			let {name,price,show_image}=this.detail;
			return {
				name,price,img:show_image
			}
		}
	},
	data() {
		return {
			number:1,
			show: false,
			shoplock: false,
			detail: {},
			// 动态操作
			dynamic: { favorite: false },
			swiperList: [],
			detailList: [],
			evaluate: {
				avator: 'https://gd-hbimg.huaban.com/1f50f2135ba51e4b9aa20caef41860b15005c9386f0b-LxqWsh_fw658/format/webp',
				nickname: '用户昵称',
				rate: 3,
				createTime: '20220622 17:05:30',
				detail: "项目 'demo' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。",
				imgs: [
					{
						id: 0,
						type: 'video',
						url: 'https://st0.dancf.com/gaoding/gaoding/229e7928-fb34-4a0c-b12b-b26fc0aba91453332268.mp4'
					},
					{
						id: 1,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg'
					},
					{
						id: 2,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
					},
					{
						id: 3,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
					},
					{
						id: 4,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
					},
					{
						id: 5,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
					},
					{
						id: 6,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
					}
				]
			}
		};
	},
	async onLoad(options) {
		var result = await api.detail(options);
		if (result.code != 0) return false;
		let { carousel_urls, details_urls, is_collection, ...keys } = result.data;
		// 轮播
		this.swiperList = carousel_urls.map(item => ({ type: 'image', url: item }));
		// 收藏
		let dynamic = {};
		dynamic['favorite'] = is_collection;
		this.dynamic = dynamic;
		// 详情
		this.detail = keys;
		// 图文详情
		this.detailList = details_urls;
	},
	methods: {
		// 添加购物车
		async addcart(){
		 	var result= await api.shoppingCart({quantity:this.number,commodity_details:this.detail.id});
			if(result.code==0){
				uni.showToast({
					title:"添加成功",
					icon:'success'
				})
			}
		},
		async buyclicked(){},
		async favoriteFunc() {
			if (this.bind != 1) return false;
			let dynamic = JSON.parse(JSON.stringify(this.dynamic));
			dynamic['favorite'] = !dynamic.favorite;
			let result;
			if (dynamic['favorite']) {
				result = await api.favorite({ id: this.detail.id });
			} else {
				result = await api.unfavorite({ id: this.detail.id });
			}
			if (result.code != 0) return false;
			this.dynamic = dynamic;
		},
		shoppingCartAdd() {},
		shoppingCart() {
			uni.switchTab({
				url: '/pages/shoppingCart/index'
			});
		},
		evaluateFunc() {
			uni.navigateTo({
				url: '/detailPages/evaluate/index'
			});
		}
	},
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.detail {
	.footer {
		height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		.cu-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
		}
	}
}
</style>