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">商品名称</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="100" size="64" /></view>
					<view class="text-grey">销量：1000</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 5" :key="index" lazy-load="true" style="width: 100%;vertical-align: top;display: block;" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg" 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 class="cu-btn bg-orange round shadow-blur">加入购物车</button>
						<button class="cu-btn bg-red round shadow-blur">立即订购</button>
					</view>
				</view>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dynamic: { favorite: true },
			swiperList: [
				{
					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'
				}
			],
			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'
				}
				]
			}
		};
	},
	methods: {
		favoriteFunc() {
			let dynamic = JSON.parse(JSON.stringify(this.dynamic));
			dynamic['favorite'] = !dynamic.favorite;
			this.dynamic = dynamic;
		},
		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>