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.parent.expire_at">有效期至：{{ orderData.parent.expire_at }} </view>
					</view>
					<view class="desc">x {{ orderData.number?orderData.number:1 }} <text>{{ orderData.sku }}</text></view>
					<!-- <view class="total">合计：¥ {{orderData.goods.product_price}}</view> -->
				</view>
			</view>
			<view class="goods-item">
				<view class="left">商品总额</view>
				<view class="right">￥{{orderData.parent.order_amount}}</view>
			</view>
			<view class="goods-item">
				<view class="left">商品优惠</view>
				<view class="right red">￥{{orderData.parent.order_amount}}</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" @click="openLocation">
							<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" @click="cancelOrder(1)">取消预约</view>
						<view class="btn full" @click="callMobile">联系商家</view>
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 2">
					<view class="footer-right">
						<view class="btn" @click="cancelOrder(2)">取消服务</view>
						<view class="btn full" @click="callMobile">联系商家</view>
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 3">
					<view class="footer-right" @click="delOrder()">
						<view class="btn full">删除订单?</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,
			goodsPrice:0,
			storeData:null,
			orderIdForRefundAmount:"",
			applyRefundParams:{
				orderId:""
			}
			
		}
	},
	onLoad({order}) {
		app = this;
		app.order = order;
		app.getOrder()
	},
	methods: {
		copyOrder(order){
			setTimeout(function(){
				uni.setClipboardData({
					data:order,
					success() {
						app.$dialog.showSuccess("复制成功")
					},
					fail() {
						app.$dialog.showSuccess("复制失败")
					}
				})
			},300)
		},
		openLocation(){
			uni.openLocation({
				latitude:app.poiData.latitude,
				longitude:app.poiData.longitude,
				name:app.poiData.poi_name,
				address:app.poiData.poi_address,
				fail() {
					app.$dialog.showSuccess("打开地图失败");
				}
			})
		},
		callMobile(){
			if (!app.storeData.service_mobile) return ;
			uni.makePhoneCall({
				phoneNumber:app.storeData.service_mobile,
				fail() {
					app.$dialog.showSuccess("联系失败")
				}
			})
		},
		delOrder(){
			app.$dialog.showError("确定要删除该笔预约订单吗",function(res){
				if (res.confirm) {
					Api.del({"order":app.order}).then((res)=>{
						if (res.code == 0) {
							return app.$dialog.showSuccess(res.msg)
						}
						app.$dialog.showSuccess(res.msg,"none",function(){
							uni.switchTab({
								url:"/pages/order/order"
							})
						})
					})
				}
			},"删除提示")
		},
		cancelOrder(type){
			if (type == 1) {
				var msg = "确定要取消该预约吗？";
			} else {
				var msg = "该订单已在服务中，取消服务需商家审核，如需加急审核，请点击确定后，尽快致电商家！";
			}
			app.$dialog.showError(msg,function(res){
				if (res.confirm) {
					Api.cancel({"order":app.order,"type":type}).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.goodsPrice = res.data.parent.pay_amount * 100;
				app.applyRefundParams.orderId = res.data.order_id;
				app.orderData = res.data
				app.poiData = res.data.poi;
				app.storeData = res.data.store;
			})
		}
	}
}
</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: #fe2c56;font-weight: bold;}
.footer .footer-op .footer-left text{color: #333;font-size: 28upx;font-weight: normal;}
.footer .footer-op .footer-left text.red{color: #f56c6c;font-weight: bold;}
.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 #fe2c56;color: #fe2c56;}
.footer .footer-op .footer-right .btn.full{background-color: #fe2c56;color: #fff;border:2upx solid #fe2c56;}
.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;margin: 20upx 0;}
.goods-info .desc text{margin-left: 20upx;}
.goods-info .total{font-size: 30upx;color: #333;text-align: right;font-weight: bold;}
.goods-item{display: flex;align-items: center;line-height: 80upx;justify-content: space-between;font-size: 28upx;color: #333;background-color: #fff;padding: 0 20upx;border-top: 2upx solid #f8f8f8;}
.goods-item .right.red{color: #fe2c56;}

.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>