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;">
						<view  class="text-xl text-bold">{{ detail.name }}</view>
						<view class="text-price text-red"><cu-price :value="detail.price" size="64" /></view>
					</view>
					<view @click="favoriteFunc" style="min-width: 80upx;" class="text-right">
						<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="bg-orange light padding-lr-xs">
						<text class="cuIcon-vip lg">会员价</text>
						<text class="text-price margin-left-xs">{{ detail.vip_price }}</text>
					</view>
					<view class="">
						{{detail.point_price}}积分
					</view>
					<view class="text-grey">已售{{ detail.sale_count }}件</view>
				</view>
			</view>
			<view v-if="Object.keys(addressValue).length>0" @click="addressListFunc" 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">
						{{addressValue.province}}{{addressValue.city}}{{addressValue.area}}{{addressValue.address}}
						<text class="cuIcon-location lg margin-left-sm"></text>
					</view>
					<view class="">{{addressValue.name}} {{addressValue.tel}}</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">
				<button open-type="share" class="action ">
					<view class="cuIcon-share"></view>
					分享
				</button>
				<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>
					购物车
				</view>
				<view class="btn-group">
					<button @click="show=true" :disabled="bind != 1" class="cu-btn bg-orange round shadow-blur">
						添加购买
					</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, mapActions } from 'vuex';
export default {
	computed: {
		...mapState(['bind']),
		...mapState('addressDefault', ['addressValue']),
		value(){
			let {name,price,show_image,point_price,type}=this.detail;
			return {
				name,price,img:show_image,point_price,type
			}
		}
	},
	data() {
		return {
			number:1,
			show: 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 onShow(){
		if(this.bind==1) await this.requestFunc();
	},
	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: {
		...mapActions('addressDefault', ['requestFunc']),
		addressListFunc(){
			uni.navigateTo({
				url:"/loginPages/addressList/index"
			})
		},
		// 添加购物车
		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(){
			let arr=[{...this.detail,count:this.number,img:this.detail.show_image}];
			this.show=false;
			uni.navigateTo({
				url:`/indexPages/pay/index?list=${JSON.stringify(arr)}`
			})
		},
		async favoriteFunc() {
			if (this.bind != 1) {
				uni.switchTab({
					url:"/pages/login/index?status=true"
				})
				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;
		},
		shoppingCart() {
			uni.switchTab({
				url: '/pages/shoppingCart/index'
			});
		},
		evaluateFunc() {
			uni.navigateTo({
				url: '/detailPages/evaluate/index'
			});
		}
	},
	onShareAppMessage() {
		let {id,name,show_img}=this.detail;
		return {
			title: name,
			imageUrl: show_img,
			path: '/pages/detail/index?id='+id
		};
	},
	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>