jiaoyi-uni/pages/order/confirm.vue

<template>
	<view>
		<view v-if="pageLoad">
			<view class="goods-info" v-if="goodsData">
				<view class="poi-info">
					<view class="img"></view>
					<view class="name">{{ storeData.poi_name }}</view>
				</view>
				<view class="goods-body">
					<view class="img"><image :src="orderData.img" mode="widthFix"></image></view>
					<view class="body-info">
						<view class="goods-name">{{ goodsData.product_name }}</view>
						<view class="price">
							<view class="price-left">
								<view class="pay-price">{{$dialog.formatMoney(orderData.price,true)}}</view>
								<view class="line-price">{{$dialog.formatMoney(orderData.line_price,true)}}</view>
								<view class="sale">{{$dialog.disFormat(orderData.price,orderData.line_price)}}折</view>
							</view>
							<view class="price-right">x {{orderData.number}}</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>
			</view>
			<view class="order-mobile">
				<view class="name">联系方式（选填）</view>
				<view class="mobile-input">
					<view class="input-left">
						<input type="number" v-model="mobile" class="input" placeholder="输入手机号码（仅限于商家确认）" />
					</view>
					<view class="input-right"><button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" size="mini">一键填写</button></view>
				</view>
			</view>
			<view class="order-buy-read" @click="openRule(1)">
				<view class="name">购买须知</view>
				<view class="right"><image src="/static/image/right-black.png"></image></view>
			</view>
			<view class="order-pay-btn" v-if="orderData">
				<view class="pay-group">
					<view class="pay-money">
						<text>实付</text>
						{{orderData?$dialog.formatMoney(orderData.price,true):'0.00'}}
					</view>
					<view class="pay-btn">
						{{orderData.life_goods_id}}
						<pay-button-sdk
							:mode="2"
							:goods-type="2"
							:goods-id="orderData.life_goods_id"
							:order-id="orderData.order_sn"
							bind:getgoodsinfo="getGoodsInfo"  
							bind:placeorder="userLogin"  
							bind:error="onErrors"
							bind:pay="onPay"  
						></pay-button-sdk>
					</view>
				</view>
				
				<!-- <button type="primary" :disabled="disabled" @click="payOrder">立即支付 </button> -->
				<view class="safe-height"></view>
			</view>
		</view>
		<view class="" v-else>
			<view class="skeleton">
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
				<view class="skeleton-line animate"></view>
				<view class="skeleton-line min animate"></view>
				<view class="skeleton-line min animate"></view>
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
				<view class="skeleton-line max animate" style="height: 200upx;"></view>
			</view>
		</view>
		
		<uni-popup ref="rulepopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff">
			<view class="service-popup popup-height" v-if="goodsData">
				<view class="title" @click="openRule(2)">购买须知 <view class="close"><image src="/static/image/close.png"></image></view></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-if="goodsData.use_date_type==2">
									有效期：{{ $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>
		</uni-popup>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
var loadingPayBtn = false
export default {
	data() {
		return {
			pageLoad:true,
			orderData:null,
			goodsData:null,
			storeData:null,
			orderSn:"",
			mobile:"",
			loadingPayBtn:0
		}
	},
	onLoad({order}) {
		app = this;
		app.orderSn = order;
		app.getOrderDetail()
	},
	created() {
		this.$scope.getGoodsInfo = this.getGoodsInfo;
		this.$scope.userLogin = this.userLogin;
		this.$scope.onErrors = this.onErrors;
		this.$scope.onPay = this.onPay;
	},
	methods: {
		getPhoneNumber(e){
			var detail = e.detail;
			Api.mobile(detail).then((res)=>{
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg)
				}
				app.mobile = res.data.mobile;
			})
		},
		openRule(type){
			if (type == 1) {
				app.$refs.rulepopup.open()
			} else {
				app.$refs.rulepopup.close()
			}
		},
		onErrors(e){
			console.log("错误",e)
			if (app.loadingPayBtn == 1) {
				// app.payOrder()
				return ;
			}
			loadingPayBtn ++;
		},
		getGoodsInfo(event){
			console.log("getGoodsInfo",event)
			const { goodsId } = event.detail;
			// return new Promise(resolve => { 
			// 	// 在此处开发者可以进行商品数据请求，获取商品信息 
			// 	// 然后将商品信息传入 resolve 函数 
			// 	resolve({ 
			// 		minLimits: 1, 
			// 		maxLimits: 2, 
			// 		dateRule: '周一至周日可用', 
			// 		relationType: 1,
			// 		validation: { 
			// 			phoneNumber: { 
			// 				required: true  // 手机号是否必填 
			// 			}
			// 		}, 
			// 		// 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段 
			// 		marketingVersion: 2, 
			// 	}); 
			// }) 
			return new Promise(resolve => { 
				resolve({
					currentPrice: parseInt(app.orderData.price), 
					goodsName: app.goodsData.product_name, 
					goodsPhoto: app.goodsData.image_list[0].url, 
					goodsLabels: [ 
						{type: 'EXPIRED_RETURNS'}, // 过期退 
						{type: 'REFUND_ANYTIME'}, // 随时退
					], 
					minLimits: 1, 
					maxLimits: 2, 
					dateRule: '周一至周日可用',
					relationType: 1,
					validation: { 
						phoneNumber: { 
							required: false  // 手机号是否必填, 为 true则必填，false选填，默认选填 
						}
					}, 
					extra: {}, 
					tradeOption:{ 
						life_trade_flag :1, // 0：非融合链路（默认值）  1：走融合链路（标准融合/完全融合）
						is_use_tag:false // 泛知识是否接入交易规则，true：接入 false：不接入（默认值） 
					}, 
					// 在 bind:getgoodsinfo 返回的 promise 的 resolve 函数中新增 marketingVersion 字段 
					marketingVersion: 2, 
				}); 
			}); 
		},
		userLogin(event) {
			console.log("userLogin",event)
			return new Promise((resolve, reject) => {
				tt.login({
					success(e){
						console.log("登录成功",e)
						resolve()
					},
					fail: () => reject()
				});
			});
		},
		onPay(event){
			console.log("onpay",event)
			const { status, outOrderNo, result } = event.detail;
			console.log(status, outOrderNo, result)
			if (status === 'success') {
				const { code } = result;
				if (code === 0) {
					// 继续支付成功
				} else {
					// 继续支付失败（超时、取消、关闭）
				}
			} else {}
		},
		payOrder(){
			Api.toPay({order:app.orderSn,mobile:app.mobile}).then((res)=>{
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg)
				}
				uni.requestPayment({
					orderInfo:res.data.pay,
					service:5,
					success(resp){
						if (resp.code == 0) { // res.code=0时，才表示支付成功
							app.$dialog.showSuccess("支付成功","none",function(){
								uni.navigateTo({
									url:"/pages/order/detail?order="+app.orderSn
								})
							});
						}
					},
					fail(resp) {
						app.$dialog.showSuccess("支付失败，可再次重试","none",function(){
							uni.navigateTo({
								url:"/pages/order/detail?order="+app.orderSn
							})
						});
					}
				})
			})
		},
		getOrderDetail(){
			app.pageLoad = false
			Api.confirm({order:app.orderSn}).then((res)=>{
				app.pageLoad = true
				if (res.code && res.code == 0) {
					return app.$dialog.showSuccess(res.msg)
				}
				app.orderData = res.data;
				app.goodsData = res.data.product;
				app.storeData = res.data.poi;
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page{background-color: #f8f8f8;}
.order-mobile{margin-top: 20upx;padding: 0 20upx;background-color: #fff;}
.order-mobile .name{padding: 20upx 0;font-size: 28upx;color: #333;font-weight: bold;border-bottom: 2upx solid #f8f8f8;}
.order-mobile .mobile-input{padding: 20upx 0;display: flex;align-items: center;justify-content: space-between;gap: 20upx;}
.order-mobile .mobile-input .input-left{flex: 1;}
.order-mobile .mobile-input .input-left .input{font-size: 24upx;width: 100%;}
.order-buy-read{background-color: #fff;margin-top: 20upx;padding: 20upx;display: flex;align-items: center;justify-content: space-between;font-size: 28upx;}
.order-buy-read .right image{width: 40upx;height: 40upx;}
.order-pay-btn{
	background-color: #fff;
	padding: 20upx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.safe-height{
		height: env(safe-area-inset-bottom);
		width: 100%;
		background-color: #fff;
	}
	.pay-group{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pay-money{
			font-size: 32upx;
			color: #f00;
			font-weight: bold;
			text{
				font-size: 24upx;
				font-weight: normal;
				color: #666;
			}
		}
	}
}
.goods-info{background-color: #fff;padding: 0 20upx;margin-top: 20upx;}
.goods-info .poi-info{display: flex;align-items: center;font-size: 28upx;color: #666;padding: 20upx 0;border-bottom: 2upx solid #f8f8f8;}
.goods-info .goods-safe{display: flex;align-items: center;font-size: 24rpx;color: #999;gap: 40upx;}
.goods-info .goods-safe .safe-item{display: flex;align-items: center;}
.goods-info .goods-safe image{width: 30upx;height: 30upx;margin-right: 10upx;}
.goods-body{padding: 20upx 0;display: flex;align-items: flex-start;}
.goods-body .img{height: 200upx;overflow: hidden;}
.goods-body .img image{width: 200upx;border-radius: 10upx;}
.goods-body .body-info{flex: 1;margin-left: 20upx;}
.goods-body .goods-name{font-size: 28upx;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.goods-body .price{display: flex;align-items: center;margin: 20upx 0;}
.goods-body .price .price-left{display: flex;align-items: center;}
.goods-body .price .pay-price{color: #FF4747;font-size: 32rpx;font-weight: bold;margin-right: 10upx;}
.goods-body .price .line-price{color: #999999;font-size: 22rpx;text-decoration-line: line-through;margin-right: 10upx;}
.goods-body .price .sale{background-color: #FDEBE5;border: 4rpx;font-size: 22rpx;color: #FF4747;padding: 10rpx;}
.goods-body .price .price-right{margin-left: auto;margin-right: 20upx;font-size: 24upx;padding: 10upx;color: #666;}

.service-popup.popup-height{height: 60vh;}
.service-popup.popup-white{background-color: #fff;margin-top: 20upx;}
.service-popup.popup-white .title{border-bottom: 2upx solid #f8f8f8;}
.service-popup .title{line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;padding: 0 20upx;display: flex;align-items: center;}
.service-popup .title .close{margin-left: auto;margin-right: 0;display: flex;align-items: center;justify-content: center;}
.service-popup .title .close image{width: 40upx;height: 40upx;}
.service-popup.popup-white .rule-list{padding-bottom: 20upx;}

.service-popup .rule-item{display: flex;margin-top: 40upx;align-items: start;padding: 0 20upx;}
.service-popup .rule-item image{width: 50upx;height: 50upx;}
.service-popup .rule-item .item-top{margin-left: 20upx;}
.service-popup .rule-item .name{font-size: 28rpx;color: #333;font-weight: bold;margin-bottom: 10upx;display: flex;align-items: center;}
.service-popup .rule-item .name .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;}
.service-popup .rule-item .desc{color: #999;font-size: 24rpx;line-height: 40upx;}
</style>