hx-mini-uni/pages/order/info.vue

<template>
	<view>
		<block v-if="loading">
			<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>
		</block>
		<block v-else>
			<view class="order-status">
				<view class="status-name" v-if="orderData.status == 1">已核销</view>
				<view class="status-name success" v-if="orderData.status == 2">预约中</view>
				<view class="status-name" v-if="orderData.status == 3">已撤销</view>
				<view class="status-name" v-if="orderData.status == 4">已完成</view>
				
				<view class="status-desc" v-if="orderData.status == 1">团购券已完成核销</view>
				<view class="status-desc success" v-if="orderData.status == 2">预约中，如有问题可以联系客服</view>
				<view class="status-desc" v-if="orderData.status == 3">已撤销，可在团购订单中申请退款</view>
				<view class="status-desc" v-if="orderData.status == 4">服务已完成,欢迎您再次使用</view>
				
			</view>
			<view class="order-goods">
				<view class="goods-img"><image :src="orderData.goods.product_img"></image></view>
				<view class="goods-info">
					<view class="name">{{ orderData.goods.product_name }}</view>
					<view class="desc">
						<view class="time" v-if="orderData.end_at">有效期至：{{ orderData.end_at }} </view>
						<view class="num">x {{ orderData.number?orderData.number:1 }}</view>
					</view>
					<view class="total">合计：¥ {{orderData.goods.product_price}}</view>
				</view>
			</view>
			<view class="goods-store" v-if="poiData">
				<view class="title">预约门店</view>
				<view class="store-info">
					<view class="store-left">
						<view class="name">{{poiData.poi_name}}</view>
						<view class="address">{{poiData.poi_address}}</view>
					</view>
					<view class="store-right">
						<view class="right-item">
							<image src="/static/image/map.png"></image>
							<view class="desc">导航</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="title">订单信息</view>
				<view class="info-item">
					<view class="name">订单编号</view>
					<view class="right">{{ orderData.order_id }} <text @click="copyOrder(orderData.order_id)">复制</text></view>
				</view>
				<view class="info-item">
					<view class="name">下单时间</view>
					<view class="right">{{ orderData.create_at }}</view>
				</view>
			</view>
			<view class="order-info" v-if="orderData.service_type==1">
				<view class="title">预约信息</view>
				<view class="info-item">
					<view class="name">到店时间</view>
					<view class="right">{{ orderData.time }}</view>
				</view>
			</view>
			<view class="order-info" v-if="orderData.service_type==2">
				<view class="title">会员资料</view>
				<view class="info-item">
					<view class="name"></view>
					<view class="right">{{ orderData.username }}<text>{{ orderData.mobile }}</text></view>
				</view>
				<view class="address-info">
					{{ orderData.region }}{{ orderData.address }}
				</view>
			</view>
			
			<view class="line-footer"></view>
			<view class="footer">
				<view class="footer-op" v-if="orderData.status == 1">
					<view class="footer-right">
						<view class="btn">已核销</view>
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 2">
					<view class="footer-left" @click="cancelOrder"><text>取消预约</text></view>
					<view class="footer-right">
						<pay-button-sdk
							:mode="1"
						  :goods-id="orderData.goods.out_id"
						  :order-id="orderData.order_sn"
						  :order-status="1"
						  :refund-total-amount="orderData.goods.product_price*100"
						  :apply-refund-params="applyRefundParams"
						/>
						<view class="btn">服务进行中</view>
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 3">
					<view class="footer-right" @click="toGoods">
						<view class="btn">已撤销</view>
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 4">
					<view class="footer-right">
						<view class="btn">已完成</view>
					</view>
				</view>
				<view class="footer-safe"></view>
			</view>
		</block>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
export default {
	data() {
		return {
			loading:true,
			order:"",
			poiData:null,
			goodsData:null,
			orderData:null,
			storeData:null,
			orderIdForRefundAmount:"",
			applyRefundParams:{
				orderId:""
			}
			
		}
	},
	onLoad({order}) {
		app = this;
		app.order = order;
		app.getOrder()
	},
	methods: {
		toRefund(){
			
		},
		applyrefund(event) { 
			console.log('退款申请',event);
			const { orderId } = event.detail; 
			console.log('退款申请-02',orderId);
			const extra = { orderId }; // 开发者需要透传的参数，可自定义内容 
			return new Promise(resolve => { 
				resolve(extra); 
			}); 
		},
		cancelOrder(){
			app.$dialog.showError("确定要取消该预约吗？",function(res){
				if (res.confirm) {
					Api.cancel({"order":app.order}).then((res)=>{
						if (res.code == 0) {
							return app.$dialog.showSuccess(res.msg)
						}
						app.$dialog.showSuccess(res.msg,"none",function(){
							app.getOrder()
						})
					})
				}
			},"取消预约")
		},
		getOrder(){
			Api.orderDetail({"order":app.order}).then((res)=>{
				app.loading = false;
				if (res.code !== 1) {
					app.$dialog.showSuccess(res.msg,function(){
						uni.navigateBack()
					});
					return ;
				}
				app.applyRefundParams.orderId = res.data.order_id;
				app.orderData = res.data
				app.poiData = res.data.poi;
			})
		}
	}
}
</script>

<style>

page{background-color: #f8f8f8;}
.skeleton{width: 90%;margin: 20upx auto;}
.line-footer{height: 200upx;}

.address-info{font-size: 28upx;color: #333;}
.footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;}
.footer .footer-op{display: flex;align-items: center;}
.footer .footer-op .footer-left{display: flex;align-items: center;gap: 10upx;justify-content: center;font-size: 32upx;color: #f00;font-weight: bold;}
.footer .footer-op .footer-left text{color: #666;font-size: 24upx;font-weight: normal;}
.footer .footer-op .footer-left .item{flex-direction: column;display: flex;font-size: 24rpx;color: #333;align-items: center;}
.footer .footer-op .footer-left image{width: 40upx;height: 40upx;}

.footer .footer-op .footer-right{margin-left: auto;margin-right: 0;display: flex;align-items: center;gap: 20upx;}
.footer .footer-op .footer-right .btn{font-size: 28rpx;height: 80upx;border-radius: 10upx;line-height: 80upx;text-align: center;width: 200upx;color: #333;border: 2upx solid #ccc;}
.footer .footer-op .footer-right .btn.danger{border:2upx solid #f00;color: #f00;}
.footer .footer-op .footer-right .btn.full{background-color: #007aff;color: #fff;border:2upx solid #007aff;}
.footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}

.order-status{padding: 40upx 20upx;text-align: center;}
.order-status .status-name{text-align: center;font-size: 32upx;color: #333;font-weight: bold;display: flex;align-items: center;justify-content: center;}
.order-status .status-desc{font-size: 24upx;color: #666;margin-top: 20upx;}

.order-info{background-color: #fff;padding: 20upx;margin-top: 20upx;}
.order-info .title{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20upx;}
.order-info .info-item{height: 80upx;line-height: 80upx;font-size: 28upx;display: flex;align-items: center;}
.order-info .info-item .right{color: #666;margin-left: auto;margin-right: 0;}
.order-info .info-item .right text{border: 2upx solid #ccc;color: #333;font-size: 24upx;padding: 0 15upx;margin-left: 20upx;border-radius: 5upx;}

.goods-safe{display: flex;align-items: center;font-size: 24rpx;color: #999;gap: 40upx;background: #fff;border-top: 2upx solid #f8f8f8;padding: 20upx;}
.goods-safe .safe-item{display: flex;align-items: center;}
.goods-safe image{width: 30upx;height: 30upx;margin-right: 10upx;}

.order-goods{display: flex;align-items: center;background-color: #fff;padding: 0 20upx;}
.order-goods image{width: 140upx;height: 140upx;}
.goods-info{margin-left: 20upx;font-size: 28upx;flex: 1;padding: 20upx 0;}
.goods-info .name{font-size: 30upx;color: #333;}
.goods-info .desc{font-size: 24upx;color: #999;display: flex;align-items: center;justify-content: space-between;margin: 20upx 0;}
.goods-info .total{font-size: 30upx;color: #333;text-align: right;font-weight: bold;}

.home-store{margin: 20upx auto;display: flex;align-items: center;background-color: #fff;border-radius: 10upx;display: flex;align-items: center;padding: 30upx;}
.home-store .store-right{width: 120upx;height: 120upx;background-color: #fff;text-align: center;display: flex;align-items: center;justify-content: center;margin-left: auto;margin-right: 0;border-radius: 10upx;}
.home-store .store-right image{width: 60upx;height: 60upx;}
.home-store .left{display: flex;align-items: center;}
.home-store .left image{width: 60upx;height: 60upx;margin-right: 20upx;}
.home-store .right {margin-left: auto;margin-right: 0;display: flex;align-items: center;}
.home-store .right image{width: 50upx;height: 50upx;}
.home-store .name{font-size: 32upx;color: #000;font-weight: bold;}
.home-store .desc{font-size: 26upx;color: #666;margin-top: 20upx;}
.home-store .status{color: #333;font-size: 28upx;padding:5upx 15upx;border-radius: 10upx;margin-left: 10upx;}
.home-store .status.error{background-color: #fef0f0;color: #f56c6c;}
.service-popup .item{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-bottom: 2upx solid #f8f8f8;}
.service-popup .item .btn{background-color: #fff;border: 0;height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;}
.service-popup .item .btn::after{border: 0;}
.service-popup .foot{height: 100upx;line-height: 100upx;text-align: center;font-size: 28upx;color: #333;border-top: 20upx solid #f8f8f8;}

.goods-store{background-color: #fff;padding: 0 20upx;margin-top: 20upx;}
.goods-store .title{line-height: 80upx;font-size: 32rpx;color: #333;font-weight: bold;display: flex;align-items: center;border-bottom: 2upx solid #f8f8f8;}
.goods-store .store-info{display: flex;align-items: center;padding: 20upx 0;}
.goods-store .store-info .store-right{margin-left: auto;margin-right: 0;font-size: 24rpx;color: #999;}
.goods-store .store-info .store-right image{width: 50upx;height: 50upx;margin-bottom: 10upx;}
.goods-store .store-info .store-left .name{font-size: 30rpx;color: #333;font-weight: bold;line-height: 80upx;}
.goods-store .store-info .store-left .address{font-size: 24rpx;color: #999;}
</style>