pet-front-order/pages/details/detail.vue

<template>
	<view class="container">
		<view class="details-container">
			<uni-swiper-dot class="uni-swiper-dot-box" field="content">
				<swiper style="height: 245px;" indicator-dots indicator-color="rgba(255, 255, 255, 0.50)"
					indicator-active-color="#ffffff" autoplay interval="3000">
					<swiper-item class="swiper-box" v-for="(item,index) in slideshow" :key="index">
						<img :src="item" style="width: 100%; height:100%" />
					</swiper-item class="swiper-box">
				</swiper>
			</uni-swiper-dot>
			<view class="details-price">
				<view class="details-price1">
					<view class="details-price-normal">
						<text class="details-price-big">￥{{detailInfo.price}}.00</text>
						<text>{{detailInfo.unit}}</text>
					</view>
					<button open-type="share" @click="sharePage" class="share-btn">
						<img src="../../static/images/details/share.svg"
							style="width: 14px;height: 14px; margin-right:5px" alt="share" srcset="">
					</button>

				</view>
				<view class="details-price2">
					<text class="details-price-item">{{detailInfo.name}}</text>
					<button class="details-price-share share-btn" open-type="share" @click="sharePage">分享</button>
				</view>
			</view>
			<view class="details-banner">
				<view class="details-banner-item">
					<!-- <img src="../../static/images/details/right.svg" alt="right">
					<text>全程直播</text> -->
					<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/spzb.png"
						style="width: 96px;" mode="widthFix" alt="">
				</view>
				<view class="details-banner-item">
					<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/fwdj.png"
						style="width: 109px;" mode="widthFix" alt="">
					<!-- <img src="../../static/images/details/right.svg" alt="right">
					<text>1v1服务</text> -->
				</view>
				<view class="details-banner-item">
					<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/second_stage/kspp.png"
						style="width: 96px;" mode="widthFix" alt="">
					<!-- <img src="../../static/images/details/right.svg" alt="right">
					<text>及时匹配</text> -->
				</view>

			</view>
			<view class="details-img">
				<img :src="detailInfo.detailPic" style="width: 100%;" mode="widthFix" show-menu-by-longpress />
			</view>

		</view>
		<view class="details-subscribe">
			<button v-if="isMember" class="details-btn" @click="goSubscribe">去预约</button>
			<button v-else class="details-btn" open-type="getPhoneNumber"
				@getphonenumber="onGetPhoneNumber">去预约</button>
		</view>
		<Kefu></Kefu>
	</view>

</template>

<script>
	import {
		setToken,
		getToken,
		getOpenIdKey
	} from '@/utils/auth'
	import Kefu from '../common/kefu.vue'
	import {
		getProductDetails,
		getPhoneNumber
	} from '@/api/system/user.js'

	export default {
		data() {
			return {
				currentProductId: '',
				isAgree: false,
				code: '',
				detailInfo: {},
				skus: null,
				slideshow: [],
				isMember: false,
			};
		},
		components: {
			Kefu
		},
		mounted() {
			// this.currentProductId = this.$globalData.selectedProductId;
			console.log(this.currentProductId);
			this.getDetailInfo();
		},

		methods: {
			getDetailInfo() {
				getProductDetails(this.currentProductId).then(response => {
					this.detailInfo = response.product
					this.skus = response.skus
					if (response.product && response.product.albumPics) {
						this.slideshow = response.product.albumPics.split(",")
					}
				})
			},
			sharePage() {
				uni.shareAppMessage({
					title: '猫妈狗爸',
					path: `/pages/details/detail?id=${this.currentProductId}`,
					imageUrl: this.detailInfo.pic
				})
			},
			changeAgree() {
				console.log(this.isAgree);
				if (this.isAgree) {
					this.isAgree = false
				} else {
					this.isAgree = true
				}
			},

			goSubscribe() {
				if (this.skus) {
					let productSku = {
						"skuId": this.skus[0].id,
						"quantity": 1
					}
					this.$globalData.mainSku = [productSku]
					this.$globalData.newOrderData = {
						currentAddress: {},
						currentPets: [],
						totalPrice: 0,
						needPreFamiliarize: []
					}
					uni.navigateTo({
						url: `/pages/newOrder/serviceNew`
						// url: `/pages/details/service?price=${this.detailInfo.price}`
					});
				} else {
					this.$modal.showToast('产品SKU有误,请联系系统管理员');
				}

			},
			init() {
				this.$globalData.itemPrice = []
				this.$globalData.submitData = {
					"phone": "",
					"wechatId": "",
					"note": "",
					"totalPrice": "",
					"address": {
						"province": "上海市",
						"city": "上海市",
						"district": "",
						"detailAddress": ""
					},
					"skuList": [],
					"service": {
						"serviceFrequency": "once_a_day",
						"serviceDate": [],
						"serviceTimeFirst": "",
						"serviceTimeSecond": "",
						"pet": []
					}
				}
			},
			onGetPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户拒绝授权  
					//拒绝授权后弹出一些提示  
				} else { //允许授权  
					if (getOpenIdKey()) {
						this.getPhoneNumber({
							"openId": getOpenIdKey(),
							"code": e.detail.code
						})
					}
				}
			},
			getPhoneNumber(data) {
				getPhoneNumber(data).then(res => {
					if (res && res.code == 200) {
						let token = res.data.token
						setToken(token)
						this.isMember = true
						this.goSubscribe()
					} else {
						uni.showToast({
							icon: 'error',
							title: '获取手机号失败'
						})
					}
				})
			},

		},

		onLoad: function(option) {

			this.init();
			this.currentProductId = option.id;
			this.isMember = getToken() ? true : false
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '猫妈狗爸',
				path: `/pages/details/detail?id=${this.currentProductId}`,
				imageUrl: this.detailInfo.pic
			}
		}



	}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100%;
		padding-bottom: 58px;

		.details-subscribe {
			background-color: #FFFFFF;
			padding: 10px;
			width: 100%;
			height: 58px;
			position: fixed;
			bottom: 0;
			z-index: 100;

			.details-btn {
				width: 100%;
				border-radius: 6px;
				background: #FFB13F;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
	}

	.details-container {
		.share-btn {
			margin: 0;
			border: 0;
			padding: 0 !important;
			background: #fff;
			border-color: #fff;
			display: flex;
			border-radius: 0px;
		}

		.share-btn::after {
			border: none;
		}

		.details-price {
			background: #FFFFFF;
			padding: 10px 19px 15px;
			margin-top: -5px;

			.details-price1 {
				display: flex;
				justify-content: space-between;
				align-items: baseline;

				.details-price-normal {

					color: #FF530A;
					font-size: 16px;
					font-style: normal;
					font-weight: bold;
					line-height: normal;

					.details-price-big {
						font-size: 24px;
					}
				}
			}

			.details-price2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 5px;

				.details-price-item {
					color: #333;
					font-size: 18px;
					font-weight: bold;
					line-height: 16px;
					/* 100% */
					margin-left: 5px;
				}

				.details-price-share {
					color: #666;
					font-size: 14px;
					font-weight: 400;
					line-height: 13px;
					/* 92.857% */
				}
			}

		}

		.details-banner {
			width: 100%;
			height: 36px;
			background-color: #FFF8DF;
			display: flex;
			justify-content: space-around;

			.details-banner-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				line-height: 13px;
				color: #A94F20;

				img {
					width: 13px;
				}


			}
		}

		.details-img {
			background: #F5F5F7;
			padding: 10px;
		}
	}
</style>