web-app/pages/good-detail1/good-detail1.vue

<template>
	<view class="good-detail1">
		<AddCart ref="addCart" />
		<swiper :indicator-dots="true" :circular="true" :autoplay="true" :interval="3456" :duration="234" indicator-color="#FFFFFF" indicator-active-color="#F76454">
			<swiper-item v-if="data.banner_img" v-for="(item, index) in data.banner_img" :key="index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="info">
			<text>{{ data.name }}</text>
			<text>￥{{ data.money }}/{{ data.unit }}</text>
		</view>
		<view class="size app-item" @tap="tapAdd">
			<text>规格</text>
			<text class="cuIcon-right"></text>
		</view>
		<view class="intr">
			
		</view>
		<view class="bottom-bar">
			<navigator open-type="switchTab" url="../shop-car1/shop-car1" class="left">
				<text class="cuIcon-cart"></text>
				<text>购物车</text>
				<view v-if="shopcarNum" class="num">{{ shopcarNum }}</view>
			</navigator>
			<view class="right" @tap="tapAdd">加入购物车</view>
		</view>
	</view>
</template>

<script>
	import { deepClone } from '@/common/util/index.js'
	import AddCart from '@/components/public/add-cart.vue'
	export default {
		components: { AddCart },
		data() {
			return {
				data: {}
			}
		},
		computed: {
			item() {
				const temp = deepClone(this.data)
				temp.cart = Array(temp.size.length).fill(0)
				const index = this.$store.state.cart.list.findIndex(e => e.attr_id === temp.attr_id)
				return index === -1 ? temp : Object.assign(temp, this.$store.state.cart.list[index])
			},
			shopcarNum() { return this.$store.getters['cart/shopcarNum'] },
		},
		onLoad({ data }) {
			this.data = JSON.parse(uni.getStorageSync('ggg'))
			if (!this.data.banner_img.length) {
				this.data.banner_img = [this.data.main_img]
			}
		},
		methods: {
			tapAdd() {
				this.$refs.addCart.show(deepClone(this.item))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.good-detail1 {
		height: 100vh;
		background: $app-base-bg;
		border-bottom: 99rpx solid #000000;
		swiper {
			height: 400rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.info {
			@include flex(column);
			height: 140rpx;
			background: #FFFFFF;
			padding: 24rpx 31rpx;
			box-sizing: border-box;
			align-items: flex-start;
			justify-content: space-between;
		}
		.size {
			height: 90rpx;
			margin: 10rpx 0;
			background: #FFFFFF;
		}
		.bottom-bar {
			height: 99rpx;
			position: fixed;
			width: 100vw;
			bottom: 0;
			background: #FFFFFF;
			@include flex();
			> view, > navigator {
				flex: 1;
				height: 100%;
				@include flex();
				position: relative;
				.num {
					position: absolute;
					right: 30%;
					top: 10%;
					background: red;
					font-size: 24rpx;
					height: 42rpx;
					min-width: 42rpx;
					line-height: 42rpx;
					text-align: center;
					border-radius: 42rpx;
					padding: 2rpx 8rpx;
					color: #FFFFFF;
				}
				&.left {
					flex-direction: column;
					font-size: 24rpx;
					.cuIcon-cart {
						font-size: 49rpx;
					}
				}
				&.right {
					font-size: 36rpx;
					color: #FFFFFF;
					background: $app-base-color;
				}
			}
		}
	}
</style>