massage-front/pages_order/product/productDetail.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<uv-swiper :list="bannerList" indicator indicatorMode="dot" height="475rpx"></uv-swiper>

		<view class="overview">
			<view class="flex sale">
				<view class="flex price" :class="[role]">
          <view>
						<text class="price-unit">￥</text>
						<text>{{ productDetail.price }}</text>
					</view>
					
          <view class="flex tag" v-if="role === 'member-personal'">
            <image class="icon" src="@/static/image/home/icon-member-personal.png"></image>
            <text>个人会员价</text>
          </view>
          <view class="flex tag" v-else-if="role === 'member-business'">
            <image class="icon" src="@/static/image/home/icon-member-business.png"></image>
            <text>企业会员价</text>
          </view>
				</view>
				<view>
          <text>{{ `已售出：${productDetail.sales}单` }}</text>
				</view>
			</view>
			<view class="title">
				<text>{{ productDetail.title }}</text>
			</view>
			<view class="flex desc">
				<view v-for="tag in productDetail.tags" :key="tag"
					class="flex tag"
				>
					<view class="dot"></view>
					<text>{{ tag }}</text>
				</view>
			</view>
		</view>

		
		<!-- 商品详情 -->
		<view class="detail">
			<cardTitle class="header">商品详情</cardTitle>
			<uv-parse :content="productDetail.details"></uv-parse>
		</view>

		<!-- 分享和购买按钮 -->
		<view class="flex bar">
			<button plain class="flex flex-column btn btn-share" open-type="share">
				<image class="btn-share-icon" src="../static/productDetail/icon-share.png"></image>
				<text>分享</text>
			</button>
			<view class="flex count">
				<text>合计：</text>
				<view class="price">
					<text class="price-unit">¥</text>
					<!-- todo: check -->
					<text>{{ productDetail.price }}</text>
				</view>
			</view>
			<button plain class="btn btn-pay" @click="submit">立即支付</button>
		</view>
	</view>
</template>

<script>
	import cardTitle from '../components/cardTitle.vue'

	export default {
		components: {
			cardTitle,
		},
		data() {
			return {
				productDetail: {
					image: '',
					details: '',
				},
				id: 0,
        role: 'member-business', // member-personal | member-business
			}
		},
		computed: {
			bannerList() {
				const { image } = this.productDetail

				if (!image) {
					return []
				}

				return Array.isArray(image) ? image : image.split(',')
			}
		},
		onLoad(args) {
			this.id = args.id
		},
		onShow() {
			this.getRiceProductDetail()
		},
    onShareAppMessage(res) {
      const {
        title,
      } = this.productDetail

      // todo: check
      let o = {
        title: title,
        imageUrl: bannerList[0],
        query: `id=${this.productDetail.id}`,
      }

      return o
    },
		methods: {
			// 立即下单
			submit() {
				this.$store.commit('setPayOrderProduct', [
					this.productDetail
				])

				this.$utils.navigateTo('/pages_order/order/createOrder')
			},
			toSend(){
				this.$store.commit('setPayOrderProduct', [
					this.productDetail
				])
				
				// this.$utils.navigateTo('/pages_order/order/receiveGift?id=1894006757315850241')
				
				this.$utils.navigateTo('/pages_order/order/createOrder?type=give')
			},
			// 获取商品
			getRiceProductDetail() {
				// todo: delete test data

				const TEMP_BANNER_IMG_URL = 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280'

				this.productDetail = {
					imgUrl: TEMP_BANNER_IMG_URL,
					image: new Array(4).fill(1).map(() => TEMP_BANNER_IMG_URL),
					price: 99,
					num: 1,
					sales: 235,
					title: '60分钟肩颈推拿按摩',
					desc: '疏通经络 放松肌肉',
					tags: ['专业技师', '舒适环境', '深度放松'],
					details: '<p>这里是商品详情..............<br/>这里是商品详情..............</p>'
				}

				return
				this.$api('getRiceProductDetail', {
					id: this.id
				}, res => {
					if (res.code == 200) {
						res.result.num = 1
						this.productDetail = res.result
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	$bar-height: 132rpx;

	.page {
		padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));

		background-color: #F3F3F3;
		
		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}

		.overview {
			padding: 16rpx 31rpx 18rpx 24rpx;
			background-color: $uni-fg-color;

			.sale {
				justify-content: space-between;
				color: #949494;
				font-size: 20rpx;

				.price {
					color: #FF2A2A;
					font-size: 45rpx;

					&-unit {
						font-size: 30rpx;
						margin-right: 3rpx;
					}
					
					.tag {
						font-size: 18rpx;
						font-weight: 700;
						padding: 9rpx 12rpx 9rpx 19rpx;
						margin-left: 15rpx;

						.icon {
							width: 27rpx;
							height: 19rpx;
							margin-right: 3rpx;
						}
					}

					&.member-personal {
						color: $uni-color-light;
						.tag {
							background-color: rgba($color: #D8FF8F, $alpha: 0.72);
						}
					}

					&.member-business {
						color: #FFB465;
						.tag {
							background-color: rgba($color: #FFFBC4, $alpha: 0.72);
						}
					}
				}
			}

			.title {
				color: #3A3A3A;
				font-size: 28rpx;
				font-weight: 700;
				margin-top: 15rpx;
			}

			.desc {
				justify-content: space-between;
				margin-top: 20rpx;

				.tag {
					color: #949494;
					font-size: 22rpx;

					.dot {
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						background-color: #949494;
						margin-right: 16rpx;
					}
				}
			}
		}

		.detail {
			margin-top: 12rpx;
			padding: 18rpx 28rpx;
			background-color: $uni-fg-color;
		}
		
		.bar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: $bar-height;
			padding-bottom: env(safe-area-inset-bottom);
			background-color: $uni-fg-color;

			.count {
				flex: 1;
				color: #000000;
				font-size: 28rpx;
				margin-left: 29rpx;
				padding-left: 40rpx;
				border-left: 1rpx solid #B3997E;

				justify-content: flex-start;

				.price {
					color: #FF2A2A;
					font-size: 30rpx;

					&-unit {
						font-size: 18rpx;
					}
				}
			}

			.btn {
				border: none;
				line-height: 1;
				background-color: transparent;
				padding: 0;
				width: auto;
				height: auto;
				margin: 0;

				&-share {
					margin-left: 58rpx;
					color: #000000;
					font-size: 22rpx;

					&-icon {
						width: 48rpx;
						height: 50rpx;
						margin-bottom: 11rpx;
					}
				}

				&-pay {
					margin-right: 27rpx;
					padding: 24rpx 137rpx;
					color: $uni-text-color-inverse;
					font-size: 28rpx;
					border-radius: 44rpx;
					background-image: linear-gradient(to right, #84A73F, #D8FF8F);
				}

			}
		}

	}
</style>