jiaoyi-uni2/奥莱优品/pages/goods/detail.vue

<template>
	<view class="content">
		<block v-if="isLoading">
			<view class="skeleton-line max animate" style="height: 400rpx;"></view>
			<view class="skeleton">
				<view class="skeleton-line animate mt15"></view>
				<view class="skeleton-line min animate mt15"></view>
				<view class="skeleton-line min animate mt15"></view>
			</view>
			<view class="skeleton-line max animate mt15" style="height: 200upx;"></view>
			<view class="skeleton-line max animate mt15" style="height: 200upx;"></view>
		</block>
		<view class="goods-content" v-else>
			<scroll-view class="goods-body" scroll-y scroll-with-animation>
				<view class="home-banner" v-if="bannerData.length>0">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :style="{ height: swiperHeight + 'px' }" :current="currIndex" @change="changeSwiper" :autoplay="false" :interval="2000" :duration="200">
						<swiper-item class="swiper-item" v-for="(item,idex) in bannerData" :key="idex">
							<image :src="item.url" :id="'wrap' + idex" mode="widthFix"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="goods-top" v-if="goodsData">
					<view class="price">
						<view class="price-sale">{{ goodsData.price?$dialog.formatMoney(goodsData.price):'0.00'}}</view>
						<view class="sale">{{$dialog.disFormat(goodsData.price,goodsData.line_price)}}折</view>
						<view class="line-price">{{ goodsData.line_price ? $dialog.formatMoney(goodsData.line_price) : '0.00'}}</view>
						<view class="desc-num">已售{{goodsData.sale_stock}}</view>
					</view>
					<view class="goods-info">
						<view class="title">{{goodsData.product_name}}</view>
						<view class="goods-rule" @click="openRule(1)">
							购买须知<view class="right">
							<span class="mix-item" v-if="goodsData.use_date_type==1">
								自购买之日起{{ goodsData.day_duration }}天有效
							</span>
							<span class="mix-item" v-else>
								有效期：{{ $dialog.dateFormat(goodsData.use_time_start,'yyyy-MM-dd') }}至{{ $dialog.dateFormat(goodsData.use_time_end,'yyyy-MM-dd') }}
							</span>
							 <image src="/static/image/right-black.png"></image></view>
						</view>
						<view class="goods-safe">
							<view class="safe-item"><image src="/static/image/check.png"></image>过期退</view>
							<view class="safe-item"><image src="/static/image/check.png"></image>随时退</view>
						</view>
					</view>
					<view class="goods-store" v-if="goodsData.poi">
						<view class="title">适用门店</view>
						<view class="store-info">
							<view class="store-left">
								<view class="name">{{goodsData.poi?goodsData.poi.poi_name:'-'}}</view>
								<view class="address">{{goodsData.poi?goodsData.poi.poi_address:'-'}}</view>
							</view>
							<view class="store-right">
								<view class="right-item" @click="toMap">
									<image src="/static/image/amap.png"></image>
									<view class="desc">导航</view>
								</view>
							</view>
						</view>
					</view>

					<view class="buy-rule">
						<view class="title">购买须知</view>
						<view class="rule-list">
							<view class="rule-item">
								<view class="icon"><image src="/static/image/rule-date.png"></image></view>
								<view class="item-top">
									<view class="name">可用日期</view>
									<view class="desc">
										<span class="mix-item" v-if="goodsData.use_date_type==1">
											自购买之日起{{ goodsData.day_duration }}天有效
										</span>
										<span class="mix-item" v-else>
											有效期：{{ $dialog.dateFormat(goodsData.use_time_start,'yyyy-MM-dd') }}至{{ $dialog.dateFormat(goodsData.use_time_end,'yyyy-MM-dd') }}
										</span>
									</view>
								</view>
							</view>
							<view class="rule-item">
								<view class="icon"><image src="/static/image/rule-time.png"></image></view>
								<view class="item-top">
									<view class="name">可用时间</view>
									<view class="desc" v-if="goodsData.can_no_use_date==1">商家营业时间可用</view>
								</view>
							</view>
							<view class="rule-item">
								<view class="icon"><image src="/static/image/rule-rule.png"></image></view>
								<view class="item-top">
									<view class="name">预约规则</view>
									<view class="desc" v-if="goodsData.booking_type==1">无需预约，高峰期可能需要排队</view>
									<view class="desc" v-if="goodsData.booking_type==2">
										需要提前<span>{{ goodsData.booking_date }}</span>{{ goodsData.booking_unit==1?'天':'小时' }}预约
									</view>
								</view>
							</view>
							<view class="rule-item">
								<view class="icon"><image src="/static/image/rule-refund.png"></image></view>
								<view class="item-top">
									<view class="name">退款政策<view class="tips">随时退/过期退</view></view>
									<view class="desc">随时退款：未核销的商品支持随时申请退款；过期自动退：商品若在有效时间内未核销使用，到期之后系统将自动发起退款</view>
								</view>
							</view>
						</view>
					</view>

					<view class="other-content">
						<view class="title">更多详情</view>
						<view class="rule-content">
							<template v-if="goodsData.content">
								<view class="content-data" v-html="goodsData.content"></view>
							</template>
							<template v-if="otherImg.length > 0">
								<view class="rule-img" v-for="(item,indx) in otherImg" :key="indx">
									<image :src="item" mode="widthFix"></image>
								</view>
							</template>
						</view>
					</view>

				</view>
				<view class="line-height"></view>
			</scroll-view>
			<view class="footer">
				<view class="footer-op">
					<view class="footer-left">
						<view class="item" @click="toNav('home')"><image src="/static/image/goods/home.png"></image>首页</view>
						<view class="item" @click="kfPop"><image src="/static/image/goods/service.png"></image>客服</view>
						<view class="item" @click="toNav('order')"><image src="/static/image/goods/order.png"></image>订单</view>
					</view>
					<view class="footer-right" @click="buyOrder(1)" v-if="isLogin">立即购买 {{ goodsData?$dialog.formatMoney(goodsData.price):'0.00'}}</view>
					<button class="footer-right" @click="toLogin" v-else>登录下单 {{ goodsData?$dialog.formatMoney(goodsData.price):''}}</button>
				</view>
				<view class="footer-safe"></view>
			</view>
		</view>
		<uni-popup ref="rulepopup" type="bottom" border-radius="10px 10px 0 0" background-color="#f1f1f1" :mask-click="false">
			<view class="rule-popup">
				<view class="title">
					购买须知
					<view class="close" @click="openRule(2)"><image src="/static/image/close.png"></image></view>
				</view>
				<view class="buy-rule" v-if="goodsData">
					<view class="rule-list">
						<view class="rule-item">
							<view class="icon"><image src="/static/image/rule-date.png"></image></view>
							<view class="item-top">
								<view class="name">可用日期</view>
								<view class="desc">
									<span class="mix-item" v-if="goodsData.use_date_type==1">
										自购买之日起{{ goodsData.day_duration }}天有效
									</span>
									<span class="mix-item" v-else>
										有效期：{{ $dialog.dateFormat(goodsData.use_time_start,'yyyy-MM-dd') }}至{{ $dialog.dateFormat(goodsData.use_time_end,'yyyy-MM-dd') }}
									</span>
								</view>
							</view>
						</view>
						<view class="rule-item">
							<view class="icon"><image src="/static/image/rule-time.png"></image></view>
							<view class="item-top">
								<view class="name">可用时间</view>
								<view class="desc" v-if="goodsData.can_no_use_date==1">商家营业时间可用</view>
							</view>
						</view>
						<view class="rule-item">
							<view class="icon"><image src="/static/image/rule-rule.png"></image></view>
							<view class="item-top">
								<view class="name">预约规则</view>
								<view class="desc" v-if="goodsData.booking_type==1">无需预约，高峰期可能需要排队</view>
								<view class="desc" v-if="goodsData.booking_type==2">
									需要提前<span>{{ goodsData.booking_date }}</span>{{ goodsData.booking_unit==1?'天':'小时' }}预约
								</view>
							</view>
						</view>
						<view class="rule-item">
							<view class="icon"><image src="/static/image/rule-refund.png"></image></view>
							<view class="item-top">
								<view class="name">退款政策<view class="tips">随时退/过期退</view></view>
								<view class="desc">随时退款：未核销的商品支持随时申请退款；过期自动退：商品若在有效时间内未核销使用，到期之后系统将自动发起退款</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="buypopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="service-popup popup-flex popup-height" v-if="goodsData">
				<view class="tags-top">
					<view class="tags">
						<view class="safe-item"><image src="/static/image/check.png"></image>过期退</view>
						<view class="safe-item"><image src="/static/image/check.png"></image>随时退</view>
					</view>
					<view class="close" @click="buyOrder(2)"><image src="/static/image/close.png"></image></view>
				</view>
				<view class="buy-godos-top">
					<view class="goods-top-info">
						<view class="imgs"><image :src="buyGoods.img" mode="widthFix"></image></view>
						<view class="price-body">
							<view class="title">{{goodsData.product_name}}</view>
							<view class="price">
								<view class="price-sale">{{ buyGoods.price?$dialog.formatMoney(buyGoods.price):'0.00'}}</view>
								<view class="sale">{{$dialog.disFormat(buyGoods.price,buyGoods.line_price)}}折</view>
								<view class="line-price">{{ buyGoods.line_price ? $dialog.formatMoney(buyGoods.line_price) : '0.00'}}</view>
							</view>
							<view class="name">已选：{{ buyGoods.name }}</view>
						</view>
					</view>
				</view>
				<view class="buy-godos-mib">
					<view class="mib-title">规格</view>
					<view class="mib-body" v-if="goodsData.mult_sku==2">
						<view :class="indx==skuIndex?'mib-body-item active':'mib-body-item'" v-for="(item,indx) in skuSpecs" :key="indx" @click="checkSku(item,indx)">{{item.name}}</view>
					</view>
					<view class="mib-body" v-else>
						<view class="mib-body-item active">默认</view>
					</view>
				</view>
				<view class="buy-godos-footer">
					<!-- <view class="btn-item-c">
						<button class="cancel-btn" @click="buyOrder(2)">再看看</button>
					</view> -->
					<view class="btn-item fex1">
						<pay-button-sdk
							class="pay-button"
							:mode="2"
							:goods-type="1"
							:goods-id="goodsData.goods_id"
							bind:getgoodsinfo="getGoodsInfo"
							bind:placeorder="userLogin"
							bind:error="onErrors"
							bind:pay="onPay"
						></pay-button-sdk>
					</view>
				</view>
			</view>
		</uni-popup>
		<halfLogin ref="loginCom" @success="loginSuccess"></halfLogin>
		<kfService ref="kfService"></kfService>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			options:null,
			isLogin:null,
			isLoading:false,
			goodsData:null,
			bannerData:[],
			buyGoods:null,
			currIndex:0,
			swiperHeight:240,
			userState:0
		}
	},
	onLoad(options) {
		app = this;
		const data = uni.getLaunchOptionsSync();
		options.scene = data.scene
		app.options = options
		app.isLogin = uni.getStorageSync("user_token");
		app.getDetail()
	},
	created() {
		this.$scope.getGoodsInfo = this.getGoodsInfo;
		this.$scope.userLogin = this.userLogin;
		this.$scope.onErrors = this.onErrors;
		this.$scope.onPay = this.onPay;
	},
	methods: {
		openRule(type){
			if (type == 1) {
				app.$refs.rulepopup.open()
			} else {
				app.$refs.rulepopup.close()
			}
		},
		getGoodsInfo(){
			return new Promise(resolve => {
				resolve({
					minLimits: 1,
					maxLimits: app.goodsData.limit_rule_type==1?99:app.goodsData.limit_rule,
					dateRule: '周一至周日可用',
					relationType: 1,
					goodsLabels:[
						{type: 'EXPIRED_RETURNS'}, // 过期退
						{type: 'REFUND_ANYTIME'}, // 随时退
					],
					validation: {
						phoneNumber: {
							required: true  // 手机号是否必填
						}
					},
					extra:app.buyGoods,
					// 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段
					marketingVersion: 2,
				});
			})
		},
		userLogin(){
			return new Promise((resolve, reject) => {
				tt.login({
					success(){
						console.log("next")
						resolve()
					},
					fail: () => reject()
				});
			});
		},
		onErrors(){},
		onPay(event){
			const { status, outOrderNo, result } = event.detail;
			console.log(status, outOrderNo, result)
			const { code } = result;
			app.buyOrder(2)
			if (code === 0) { // 支付成功
				app.$dialog.showSuccess("支付成功","none",function(){
					uni.redirectTo({
						url:"usr://pages/order/detail?order="+outOrderNo
					})
				})
			} else {
				app.$dialog.showSuccess("支付失败","none",function(){
					uni.redirectTo({
						url:"usr://pages/order/detail?order="+outOrderNo
					})
				})
				// 继续支付失败（超时、取消、关闭）
			}
		},
		buyOrder(type){
			if (!app.isLogin) {
				return ;
			}
			if (type == 1) {
				app.$refs.buypopup.open()
			} else {
				app.$refs.buypopup.close()
			}
			return ;
		},
		toMap(){
			var poi = app.goodsData.poi;
			uni.openLocation({
				latitude:poi.latitude,
				longitude:poi.longitude,
				name:poi.poi_name,
				address:poi.poi_address,
				success() {
					console.log("open success")
				},
				fail(err) {
					app.$dialog.showSuccess("打开导航失败")
					console.log(err)
				}
			})
		},
		async getDetail(){
			app.isLoading = true;
			var res = await app.$api.goods.detail.get(app.options);
			app.isLoading = false;
			if (res.code && res.code == 0) {
				return app.$dialog.showSuccess(res.msg);
			}
			if (!app.storeData) {
				app.storeData = res.data.poi;
				uni.setStorageSync("contact",res.data.poi);
			}
			uni.setStorageSync("poiId",res.data.poi.poi_id);
			app.goodsData = res.data;
			app.bannerData = res.data.image_list
			if (res.data.skuSpecs.length > 0) {
				var skuSpecs = app.skuSpecs[0]
				var buyGoods = {
					img:skuSpecs.image,
					price:skuSpecs.price,
					line_price:skuSpecs.line_price,
					name:skuSpecs.name,
					number:1,
					product_id:skuSpecs.product_id,
					sku_id:skuSpecs.sku_id,
					goods_id:skuSpecs.goods_id,
					scene:app.scene
				}
			} else {
				var buyGoods = {
					img:res.data.image_list[0].url,
					price:res.data.price,
					line_price:res.data.line_price,
					name:"默认",
					number:1,
					product_id:res.data.product_id,
					sku_id:res.data.product_id,
					goods_id:res.data.goods_id,
					scene:app.scene
				}
			}
			app.buyGoods = buyGoods
			setTimeout(function(){
				app.setSwiperHeight(); // 动态设置 swiper 的高度
			},800)
		},
		/* 切换 swiper 滑块 */
		changeSwiper(e) {
			app.currIndex = e.detail.current;
			app.$nextTick(() => {
				app.setSwiperHeight(); // 动态设置 swiper 的高度
			});
		},
		/* 动态设置 swiper 的高度 */
		setSwiperHeight() {
			const element = "#wrap" + app.currIndex;
			const query = uni.createSelectorQuery().in(this);
			query.select(element).boundingClientRect();
			query.exec(res => {
				if (res && res[0]) this.swiperHeight = res[0].height==0?res[0].width:res[0].height;
			});
		},
		toLogin(){
			this.$refs.loginCom.open();
		},
		async kfPop(){
			if (!app.isLogin) {
				this.$refs.loginCom.open();
				return ;
			}
			var resp = await this.$api.goods.check.get();
			if (resp.code == 0) {
				return app.$dialog.showSuccess(resp.msg);
			}
			if (resp.data.user == 0) {
				this.$refs.loginCom.open(2);
				return ;
			}
			this.$refs.kfService.open(app.storeData);
		},
		loginSuccess(token){
			if (token) {
				app.isLogin = token;
			}
		},
		toNav(type) {
			var url = "";
			switch (type) {
				case "order":
					url = "/pages/order/order"
				break;
				case "home":
				default:
					url = "/pages/index/index"
				break;
			}
			uni.switchTab({
				url:url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tags-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 20rpx;
	.tags{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		flex: 1;
		.safe-item{
			display: flex;align-items: center;
			image{width: 30upx;height: 30upx;margin-right: 10upx;}
		}
	}
	.close{
		margin-left: auto;margin-right: 0;display: flex;align-items: center;justify-content: center;
		image{width: 40upx;height: 40upx;}
	}
}
.buy-godos-top{
	display: flex;padding: 30rpx 15rpx 15rpx;align-items: start;
	.close{
		margin-left: auto;margin-right: 0;display: flex;align-items: center;justify-content: center;
		image{width: 40upx;height: 40upx;}
	}
	.imgs{
		height: 200upx;overflow: hidden;
		image{width: 200upx;border-radius: 10upx;}
	}
	.goods-top-info{
		display: flex;align-items: center;gap: 20rpx;
		.price-body {
			flex: 1;
			.title{
				font-size: 32rpx;color: #000;font-weight: bold;
			}
		}
		.price{
			display: flex;align-items: self-end;flex: 1;gap:20rpx;
			.line-price{color: #999999;font-size: 24rpx;text-decoration-line: line-through;}
			.price-sale{color: #FF4747;font-size: 32rpx;font-weight: bold;}
			.sale{background-color: #FDEBE5;border: 4rpx;font-size: 22rpx;color: #FF4747;padding: 10rpx;display: inline-block;}
		}
		.desc-num{color: #999;font-size: 24upx;margin-left: auto;margin-right: 0;}
		.name{font-size: 22rpx;margin-top: 15upx;color: #666;}
	}
}
.buy-godos-footer{
	padding: 20upx;display: flex;align-items: center;justify-content: space-between;gap: 20upx;
	.btn-item {
		&.fex1{flex: 1;}
		.pay-button{
			width: 100% !important;
			background-color: $main-color;
		}
	}
	.cancel-btn{
		font-size: 32upx;
		border-radius: 10upx;
		color: #333;
		background-color: #fff;
		border: 2upx solid #ddd;
		height: 48px;
		line-height: 48px;
	}
	.cancel-btn::after{border: 0;}
}
.buy-godos-mib{
	padding: 20upx;flex: 1;
	.mib-number{margin-top: 20upx;display: flex;align-items: center;justify-content: space-between;font-size: 28upx;color: #666;}
	.mib-title{font-size: 28upx;color: #666;}
	.mib-body{
		margin-top: 15upx;display: flex;align-items: center;flex-wrap: wrap;gap: 20upx;
		.mib-body-item{
			font-size: 24upx;color: #666;padding: 10upx;background-color: #f8f8f8;border-radius: 5upx;
			&.active{background-color: #007aff;color: #fff;}
		}
	}
}
.rule-popup {
	.buy-rule {
		padding: 20rpx;
	}
	.title{
		line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;display: flex;align-items: center;
		border-bottom: 2upx solid #f8f8f8;
		padding: 0 20rpx;
		justify-content: space-between;
		image{width: 40upx;height: 40upx;}
	}
}
.buy-rule{
	background-color: #fff;
	width: 95%;
	margin:20rpx auto;
	padding: 0 20rpx 20rpx;
	border-radius: 20rpx;
	.title{
		line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;display: flex;align-items: center;
		border-bottom: 2upx solid #f8f8f8;
	}
	.rule-item{
		display: flex;margin-top: 40upx;align-items: start;gap:20rpx;
		image{width: 50upx;height: 50upx;}
		.name{
			font-size: 28rpx;color: #333;font-weight: bold;margin-bottom: 10upx;display: flex;align-items: center;
			.tips{color: #333;border: 2upx solid #ddd;border-radius: 5upx;font-size: 22rpx;font-weight: normal;margin-left: 40upx;background-color: #fff;padding: 5upx 10upx;}
		}
	}
}
.content {
	background-color: #f8f8f8;
	height: 100vh;
	.skeleton{
		width: 95%;
		margin: 0 auto;
	}
	.line-height{
		height: 40rpx;
		width: 100%;
	}
	.goods-top{
		border-radius: 20rpx 20rpx 0 0;
		.other-content{
			background-color: #fff;
			width: 95%;
			margin:20rpx auto;
			padding: 0 20rpx 20rpx;
			border-radius: 20rpx;
			.title{
				line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;display: flex;align-items: center;
				border-bottom: 2upx solid #f8f8f8;
				margin-bottom: 20rpx;
			}
		}
		.goods-store{
			background-color: #fff;
			width: 95%;
			margin:20rpx auto;
			padding: 0 20rpx 20rpx;
			border-radius: 20rpx;
			.title{
				line-height: 80upx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #f8f8f8;
			}
			.store-info{
				display: flex;align-items: center;padding: 20upx 0;
				.store-right{
					margin-left: auto;margin-right: 0;font-size: 24rpx;color: #999;
					image{width: 50upx;height: 50upx;margin-bottom: 10upx;}
				}
				.store-left {
					.name{font-size: 30rpx;color: #333;font-weight: bold;line-height: 80upx;}
					.address{font-size: 24rpx;color: #999;}
				}
			}
		}
		.goods-info{
			background-color: #fff;
			width: 95%;
			margin:0 auto;
			padding: 20rpx;
			border-radius: 20rpx;
			.title{
				font-size: 32rpx;color: #000;font-weight: bold;
			}
			.goods-rule{
				margin: 20upx 0;display: flex;align-items: center;font-size: 24rpx;color: #999;height: 80upx;line-height: 80upx;
				.right{
					display: flex;align-items: center;flex: 1;color: #000;margin-left: 40upx;
					image{width: 30upx;height: 30upx;margin-left: auto;margin-right: 0;}
				}
			}
			.goods-safe{
				display: flex;align-items: center;font-size: 24rpx;color: #999;gap: 40upx;
				.safe-item{
					display: flex;align-items: center;
					image{width: 30upx;height: 30upx;margin-right: 10upx;}
				}
			}
		}
		.price{
			display: flex;
			align-items: self-end;
			padding: 20rpx 30rpx;
			gap: 20rpx;
			.price-sale{
				font-size: 38rpx;
				font-weight: 800;
				color: $main-color;
			}
			.sale{
				background-color: #FDEBE5;
				border: 4rpx;font-size: 22rpx;
				color: #FF4747;
				padding: 10rpx;
				display: inline-block;
			}
			.line-price{
				color: #999999;
				font-size: 24rpx;
				text-decoration-line: line-through;
			}
			.desc-num{
				color: #999;font-size: 24upx;margin-left: auto;margin-right: 0;
			}
		}
	}
	.goods-content{
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #ededed;
		display: flex;
		flex-direction: column;
	}
	.goods-body{
		height: 0;
		flex: 1;
		.home-banner {
			.swiper{
				height: 380upx;
				transition: height 0.5s ease;
				image{width: 100%;height: auto;}
			}
		}
	}
	.footer{
		background-color: #fff;padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;
		.footer-op{
			display: flex;align-items: center;
			.footer-left{
				display: flex;align-items: center;gap: 40upx;justify-content: center;
				.item{flex-direction: column;display: flex;font-size: 24rpx;color: #333;align-items: center;}
				image{width: 40upx;height: 40upx;}
			}
			.footer-right{
				background-color: $main-color;
				color: #fff;
				font-size: 28rpx;
				flex: 1;
				margin-left: 40upx;
				height: 80upx;
				border-radius: 10upx;
				line-height: 80upx;
				text-align: center;
			}
		}
		.footer-safe {
			height: env(safe-area-inset-bottom);width: 100%;
		}
	}
}
</style>