jiaoyi-uni/pages/order/detail.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 == 0 && orderTime">
					待支付
					<template v-if="orderTime.min>0&&orderTime.sec>=0">
						，剩余时间
						<uni-countdown :show-day="false" :showHour="false" :minute="orderTime.min" :second="orderTime.sec" splitorColor="#ff0000" color="#ff0000"></uni-countdown>
					</template>
					<template v-else>，已超时</template>
				</view>
				<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-name" v-if="orderData.status == 5">已关闭</view>
				
				<view class="status-desc" v-if="orderData.status == 0">超过30分钟未支付，订单将自动取消</view>
				<view class="status-desc-qrcode" v-if="orderData.status == 1">
					<view class="qrcode-img">
						<ikun-qrcode
							width="200"
							height="200"
							unit="rpx"
							color="#000000"
							:data="orderData.out_order_no">
						</ikun-qrcode>
					</view>
					<view class="qrcode-text">券码 {{orderData.out_order_no}} <text @click="copyOrder(orderData.out_order_no)">复制</text></view>
				</view>
				<view class="status-desc success" v-if="orderData.status == 2">服务已完成,欢迎您再次使用</view>
				<view class="status-desc" v-if="orderData.status == 3">{{ $dialog.formatMoney(orderData.pay_money,true) }} 已原路退回</view>
				<view class="status-desc" v-if="orderData.status == 4">已申请退款，钱款预计1-3个自然日到账</view>
				<view class="status-desc" v-if="orderData.status == 5">订单已取消或已关闭</view>
				
			</view>
			<view class="order-goods">
				<view class="goods-img"><image :src="orderData.img" mode="widthFix"></image></view>
				<view class="goods-info">
					<view class="name">{{ goodsData.product_name }}</view>
					<view class="desc">
						<view class="time" v-if="orderData.end_at">有效期至：{{ orderData.end_at }} </view>
						<view class="num">x {{ orderData.number }}</view>
					</view>
					<view class="total">合计：{{ $dialog.formatMoney(orderData.price,true) }}</view>
				</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 class="home-store">
				<view class="service-detail" @click="showService(1)">
					<view class="left">
						<image src="/static/image/kefu.png"></image>
						<view class="name">联系客服<text v-if="storeData">{{storeData.start_at}}-{{storeData.end_at}}</text></view>
					</view>
					<view class="right" v-if="storeData">
						<!-- <text class="status success">{{storeData.start_at}}-{{storeData.end_at}}</text> -->
						<image src="/static/image/right-black.png"></image>
					</view>
				</view>
				<view class="service-btn" @click="orderTs(1)">
					<image src="/static/image/face.svg"></image>
					<view class="btn-name">我要投诉</view>
					<image src="/static/image/right-black.png"></image>
				</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="toMap">
							<image src="/static/image/amap.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_sn }} <text @click="copyOrder(orderData.order_sn)">复制</text></view>
				</view>
				<!-- <view class="info-item">
					<view class="name">订单编号</view>
					<view class="right">{{ orderData.out_order_no }} <text @click="copyOrder(orderData.out_order_no)">复制</text></view>
				</view> -->
				<view class="info-item">
					<view class="name">下单时间</view>
					<view class="right">{{ orderData.create_at }}</view>
				</view>
				<view class="info-item" v-if="orderData.status == 4">
					<view class="name">退款时间</view>
					<view class="right">{{ orderData.refund_at }}</view>
				</view>
			</view>
			<uni-popup ref="maskpopup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
				<view class="service-popup">
					<view class="top">
						<view class="item">客服时间：{{storeData.start_at}}-{{storeData.end_at}}</view>
						<view class="item">
							<button class="btn" @click="$dialog.jumpUri('/pages/service/chat/chat?poi='+storeData.poi_id+'&source=detail&order='+orderData.order_sn,1);showService(2)">在线咨询商家</button>
						</view>
						<view class="item" v-if="storeData.service_mobile" @click="callMobile(storeData.service_mobile)">商家客服电话</view>
					</view>
					<view class="foot" @click="showService(2)">取消</view>
				</view>
			</uni-popup>
			<view class="line-footer"></view>
			<view class="footer">
				<view class="footer-op" v-if="orderData.status == 0">
					<view class="footer-left"><text>实付</text>{{ $dialog.formatMoney(orderData.price,true) }}</view>
					<view class="footer-right">
						<view class="btn" @click="toCancel(orderData.order_sn)">取消订单</view>
						<pay-button-sdk
							v-if="orderTime.min>0&&orderTime.sec>=0"
							class="btn full"
							:mode="1"
							:goods-type="1"
							:order-status="0"
							:order-id="orderData.out_order_no"
							:goods-id="orderData.life_goods_id"
							:refund-total-amount="orderData.pay_money"
							bind:pay="onPay" 
							bind:error="onErrors"
						></pay-button-sdk>
						<!-- <view class="btn" @click="payOrder">继续支付</view> -->
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 1">
					<view class="footer-right">
						<!-- <navigator hover-class="none" :url="'/pages/order/refund?order='+orderData.order_sn" class="btn">申请退款</navigator> -->
						<pay-button-sdk
							class="btn"
							:mode="1"
							:goods-type="1"
							:order-status="1"
							:order-id="orderData.out_order_no"
							:goods-id="orderData.life_goods_id"
							:refund-total-amount="orderData.pay_money"
							bind:applyrefund="applyRefund" 
							bind:error="onErrors"
						></pay-button-sdk>
						<view class="btn full" @click="$dialog.jumpUri('/pages/service/chat/chat?poi='+storeData.poi_id+'&source=apply&order='+orderData.order_sn,1);">立即预约</view>
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 2">
					<view class="footer-right">
						<view class="btn" @click="toGoods">再来一单</view>
						<view class="btn full" @click="toAfter">申请售后</view>
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 5">
					<view class="footer-right">
						<view class="btn" @click="toGoods">再次购买</view>
					</view>
				</view>
				<view class="footer-op" v-if="orderData.status == 3 || orderData.status == 4">
					<view class="footer-right" @click="toGoods">
						<view class="btn">再次购买</view>
					</view>
				</view>
				<view class="footer-safe"></view>
			</view>
			
			<uni-popup ref="tspopup" type="bottom" border-radius="10px 10px 0 0" background-color="#f8f8f8">
				<view class="ts-body">
					<view class="ts-title">
						选择投诉问题
						<view class="right" @click="orderTs(2)"><image src="/static/image/close.png"></image></view>
					</view>
					<view class="ts-content">
						<view class="ts-list">
							<view class="ts-sub-title">订单与退款问题</view>
							<view class="ts-item-body">
								<view class="ts-item" @click="toTs('未按约定提供服务')">未按约定提供服务<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('买错了/不想要')">买错了/不想要<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('无退款入口')">无退款入口<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('催促退款')">催促退款<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('支付后找不到订单')">支付后找不到订单<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('无故被扣费/核销')">无故被扣费/核销<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('其他')">其他<image src="/static/image/right-black.png"></image></view>
							</view>
						</view>
						<view class="ts-list">
							<view class="ts-sub-title">商品与履约问题</view>
							<view class="ts-item-body">
								<view class="ts-item" @click="toTs('商品/内容描述不符')">商品/内容描述不符<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('商品/内容质量差')">商品/内容质量差<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('符合退款条件不退款')">符合退款条件不退款<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('未收到货')">未收到货<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('申请退款仍然发货')">申请退款仍然发货<image src="/static/image/right-black.png"></image></view>
							</view>
						</view>
						<view class="ts-list">
							<view class="ts-sub-title">客服问题</view>
							<view class="ts-item-body">
								<view class="ts-item" @click="toTs('客服不回复/回复慢')">客服不回复/回复慢<image src="/static/image/right-black.png"></image></view>
								<view class="ts-item" @click="toTs('涉及辱骂/骚扰')">涉及辱骂/骚扰<image src="/static/image/right-black.png"></image></view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</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,
			orderTime:null,
			tsStatus:false
		}
	},
	created() {
		this.$scope.applyRefund = this.applyRefund;
		this.$scope.onPay = this.onPay;
		this.$scope.onErrors = this.onErrors;
	},
	onLoad({order}) {
		app = this;
		app.order = order;
		app.storeData = uni.getStorageSync("contact");
		app.getOrder()
	},
	methods: {
		toTs(text){
			app.$refs.tspopup.close()
			uni.navigateTo({
				url:"/pages/order/complaint/complaint?order="+app.order+"&text="+text+"&poi_name="+app.poiData.poi_name+"&poi_address="+app.poiData.poi_address
			})
		},
		orderTs(type){
			if (type == 1) {
				app.$refs.tspopup.open()
			} else {
				app.$refs.tspopup.close()
			}
		},
		onPay(event){
			console.log("event",event)
			const { status, outOrderNo, result } = event.detail;
			console.log(status, outOrderNo, result)
			if (status === 'success') {
				const { code } = result;
				if (code === 0) { // 支付成功
					app.$dialog.showSuccess("支付成功","none",function(){
						app.getOrder()
					})
				} else {
					app.$dialog.showSuccess("支付失败","none",function(){
						app.getOrder()
					})
					// 继续支付失败（超时、取消、关闭）
				}
			} else {}
		},
		applyRefund(event){
			console.log("applyRefund",event)
			const { orderId } = event.detail; 
			const goodsDetail = [
				{
				  itemOrderId:app.orderData.item_order_id //商品单，可在预下单回调itemOrderlist里获取，或通过查询券状态接口获取
				}
			];
			const extra = { orderId , goodsDetail};
			 // 开发者需要透传的参数，可自定义内容 
			console.log(extra,"退款参数打印");
			return new Promise(resolve => { 
				resolve(extra); 
			}); 
		},
		onErrors(e){
			console.log("错误",e)
		},
		getOrder(){
			console.log(app.order)
			Api.detail({"order":app.order}).then((res)=>{
				app.loading = false;
				if (res.code && res.code !== 1) {
					app.$dialog.showSuccess(res.msg,"none",function(){
						uni.navigateBack()
					});
					return ;
				}
				console.log(res.data)
				app.poiData = res.data.poi;
				app.goodsData = res.data.product;
				app.orderData = res.data;
				app.orderTime = res.data.end_time
			})
		},
		toAfter(){
			uni.showModal({
				title: "提示",
				content: "当前阶段暂不支持退款，如遇特殊情况，请联系商家协商退款",
				confirmText: "联系商家",
				success(res) {
					if (res.confirm) {
						uni.navigateTo({
							url:'/pages/service/chat/chat?poi='+app.storeData.poi_id+'&source=detail&order='+app.orderData.order_sn
						})
					}
				}
			});
		},
		payOrder(){
			Api.toPay({"order":app.order}).then((res)=>{
				if (res.code !== 1) {
					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(){
								app.getOrder()
							});
						}
					},
					fail(resp) {
						app.$dialog.showSuccess("支付失败，可再次重试");
					}
				})
			})
		},
		toCancel(order){
			app.$dialog.showError("确定要取消该订单吗？",function(res){
				if (res.confirm) {
					Api.del({"order":order,"type":"cancel"}).then((resp)=>{
						if (resp.code !== 1) {
							return app.$dialog.showSuccess(resp.msg)
						}
						app.$dialog.showSuccess(resp.msg)
						app.getOrder()
					})
				}
			})
		},
		delOrder(order){
			app.$dialog.showError("删除后数据不可恢复，确定要删除吗",function(res){
				if (res.confirm) {
					Api.del({"order":order,"type":"del"}).then((resp)=>{
						if (resp.code !== 1) {
							return app.$dialog.showSuccess(resp.msg)
						}
						app.$dialog.showSuccess(resp.msg)
						uni.switchTab({
							url:"/pages/order/order"
						})
					})
				}
			})
		},
		toGoods(){
			uni.navigateTo({
				url:"/pages/goods/detail?goods="+app.orderData.product_id+"&spm="+app.orderData.goods_id
			})
		},
		copyOrder(order){
			uni.setClipboardData({
				data:order,
				success() {
					app.$dialog.showSuccess("复制成功")
				},
				fail() {
					app.$dialog.showSuccess("复制失败")
				}
			})
		},
		callMobile(mobile){
			uni.makePhoneCall({
				phoneNumber:mobile,
				success(res) {
					console.log(res)
				},fail(res) {
					console.log(res)
				}
			})
		},
		toMap(){
			var poi = app.poiData;
			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)
				}
			})
		},
		showService(type){
			if (type == 1) {
				app.$refs.maskpopup.open()
			} else {
				app.$refs.maskpopup.close()
			}
		}
	}
}
</script>

<style>

page{background-color: #f8f8f8;}
.skeleton{width: 90%;margin: 20upx auto;}
.line-footer{height: 200upx;}
.status-desc-qrcode{text-align: center;font-size: 24upx;padding-top: 30upx;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.status-desc-qrcode .qrcode-img{background-color: #fff;padding: 20upx;}
.status-desc-qrcode .qrcode-text{margin-top: 20upx;}
.status-desc-qrcode .qrcode-text text{margin-left: 10upx;color: #007aff;}
.ts-body .ts-title{display: flex;align-items: center;justify-content: space-between;font-size: 28upx;padding: 20upx;}
.ts-body .ts-title image{width: 40upx;height: 40upx;}
.ts-body .ts-content{height: 40vh;overflow: auto;padding: 20upx;}
.ts-body .ts-list{margin-top: 20upx;}
.ts-body .ts-list .ts-sub-title{line-height: 32upx;color: #666;font-size: 24upx;margin-bottom: 20upx;}
.ts-body .ts-list .ts-item-body{background-color: #fff;border-radius: 10upx;padding: 20upx;}
.ts-body .ts-list .ts-item-body .ts-item{font-size: 28upx;color: #333;display: flex;align-items: center;justify-content: space-between;border-bottom: 2upx solid #f8f8f8;padding: 20upx 0;}
.ts-body .ts-list .ts-item-body .ts-item:last-child{border-bottom: 0;}
.ts-body .ts-list .ts-item-body .ts-item image{width: 40upx;height: 40upx;}

.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.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: flex-start;background-color: #fff;padding: 20upx;}
.order-goods .goods-img{width: 200upx;overflow: hidden;}
.order-goods image{width: 200upx;border-radius: 10upx;}
.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;display: flex;align-items: center;gap: 20upx;justify-content: space-between;}
.home-store .service-detail{display: flex;align-items: center;background-color: #fff;border-radius: 10upx;flex: 1;height: 120upx;padding: 0 20upx;}
.home-store .service-btn{background-color: #fff;text-align: center;padding: 0 30upx;font-size: 28upx;height: 120upx;line-height: 120upx;display: flex;align-items: center;justify-content: space-between;}
.home-store .service-btn .btn-name{margin-left: 15upx;}
.home-store .service-btn image{width: 40upx;height: 40upx;}
.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: 50upx;height: 50upx;}
.home-store .left{display: flex;align-items: center;}
.home-store .left image{width: 50upx;height: 50upx;margin-right: 15upx;}
.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 .name text{font-size: 24upx;color: #666;font-weight: normal;margin-left: 20upx;}
.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>