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

<template>
	<view>
		<view class="coupon-list" v-if="orderData">
			<view class="coupon-item">
				<view class="header">订单编号 {{orderData.order_id}}</view>
				<view class="body">
					<view class="info">
						<view class="name">{{orderData.product_name}}</view>
						<view class="desc">x {{orderData.count}}张</view>
						<view class="desc">有效期至{{orderData.expire_at}}</view>
					</view>
					<view class="right">
						<button class="btn" type="primary" @click="toDetail(orderData.order_id)" v-if="orderData.status==1">去使用</button>
						<button class="btn" type="default" @click="toView(orderData.order.order_sn)" v-if="orderData.status==2 && orderData.order">查看预约</button>
					</view>
				</view>
				<view class="state-img" v-if="orderData.status==1"><image src="/static/image/order-dot.png" mode="widthFix"></image></view>
				<view class="state-img" v-if="orderData.status==2"><image src="/static/image/fwz.png" mode="widthFix"></image></view>
				<view class="state-img" v-if="orderData.status==3"><image src="/static/image/end.png" mode="widthFix"></image></view>
				<view class="state-img" v-if="orderData.status==4"><image src="/static/image/ex.png" mode="widthFix"></image></view>
			</view>
			<navigator hover-class="none" url="/pages/user/license" class="tips">小程序资质亮照</navigator>
		</view>
		<view class="" v-else>
			<u-skeleton
				rows="3"
				title
				loading
			></u-skeleton>
		</view>
		<view class="dialog-msg" v-if="msgDialog">
			<view class="mark"></view>
			<view class="msg-body">
				<view class="title">第三方服务声明<image src="/static/image/round_close.png" @click="msgDialog=false"></image></view>
				<view class="desc">本商品信息、交易以及售后服务由第三方提供，如由问题请联系在线客服或电话客服</view>
			</view>
		</view>
		<view class="kf-service" @click="toService"><image src="/static/image/kefu.png"></image></view>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/home.js";
export default {
	data() {
		return {
			order:"",
			msgDialog:false,
			orderData:null,
			option:{}
		}
	},
	onLoad(option) {
		app = this;
		app.option = option;
		app.getData();
	},
	methods: {
		toView(orderSn){
			if (!orderSn) return ;
			uni.navigateTo({
				url:"/pages/order/info?order="+orderSn
			})
		},
		toService(){
			if (!app.orderData.store.service_mobile) return false;
			uni.makePhoneCall({
				phoneNumber:app.orderData.store.service_mobile,
				fail() {
					app.$dialog.showSuccess("联系失败")
				}
			})
		},
		toDetail(order){
			uni.navigateTo({
				url:"/pages/order/store?type=1&order="+order
			})
		},
		getData(){
			uni.login({
				success(lres){
					app.option.auth = lres.code
					Api.detail(app.option).then((res)=>{
						uni.hideLoading();
						if (res.code == 0) {
							return app.$dialog.showSuccess(res.msg);
						}
						uni.setStorageSync("user_data", res.data.user)
						uni.setStorageSync("user_token", res.data.user.access_token)
						app.orderData = res.data.order;
						app.msgDialog = true;
						setTimeout(function(){
							app.msgDialog = false;
						},3000)
					})
				},fail(res){
					app.$dialog.showSuccess("登录失败,请重启小程序")
				}
			})
		}
	}
}
</script>

<style>
page{background-color: #f8f8f8;}
.kf-service{
	position: fixed;
	right: 20upx;
	bottom: 20%;
	background-color: #fff;
	width: 80upx;
	height: 80upx;
	border-radius: 80upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kf-service image{
	width: 60upx;
	height: 60upx;
	vertical-align: middle;
}
.dialog-msg .mark{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 90;background-color: rgba(0, 0,0, 0.3);}
.dialog-msg .msg-body{position: fixed;background-color: #fff;z-index: 99;left: 5%;right: 5%;top: 50%;transform: translateY(-50%);border-radius: 10upx;padding: 40upx;}
.dialog-msg .msg-body .title{text-align: center;line-height: 48upx;color: #333;font-weight: bold;margin-bottom: 20upx;position: relative;padding: 20upx 0;}
.dialog-msg .msg-body .title image{width: 60upx;height: 60upx;position: absolute;top: 0;right: 0;}
.dialog-msg .msg-body .desc{line-height: 48upx;color: #666;font-weight: bold;font-size: 26upx;}

.coupon-item{background-color: #fff;border-radius: 10upx;width: calc(100% - 40upx);margin: 20upx auto;border: 2upx solid #fff;border-radius: 10upx;position: relative;}
.coupon-item .state-img{position: absolute;right: 0;top: 0;}
.coupon-item .state-img image{width: 100upx;height: 100upx;}
.coupon-item .header{padding: 20upx;font-size: 28upx;color: #333;line-height: 48upx;border-bottom: 2upx solid #f8f8f8;}
.coupon-item .footer{padding: 20upx;border-top: 2upx solid #f8f8f8;display: flex;justify-content: space-between;}
.coupon-item .footer .state{flex: 1;}
.coupon-item .footer .btn{width: 50%;font-size: 28upx;}
.coupon-item .body{display: flex;align-items: center;margin: 20upx 0;justify-content: space-between;}
.coupon-item .img image{width: 160upx;height: 160upx;}
.coupon-item .info{padding: 0 20upx;}
.coupon-item .btn{font-size: 28upx;margin-right: 20upx;}
.coupon-item .name{font-size: 32upx;color: #333;line-height: 46upx;}
.coupon-item .desc{color: #666;font-size: 28upx;line-height: 48upx;}
.tips{text-align: center;line-height: 80upx;color: #666;font-size: 28upx;}
</style>