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="img"><image :src="orderData.product_img"></image></view>
					<view class="info">
						<view class="name">{{orderData.product_name}}</view>
						<view class="desc">x {{orderData.count}}张</view>
						<view class="desc">有效期至{{orderData.end_at}}</view>
					</view>
				</view>
				<view class="footer">
					<view class="state"></view>
					<button class="btn" type="primary" @click="toDetail(orderData.order_id)">立即使用</button>
				</view>
				<view class="state-img"><image src="/static/image/no.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>
</template>

<script>
var app;
import * as Api from "@/static/api/home.js";
export default {
	data() {
		return {
			order:"",
			msgDialog:true,
			orderData:null
		}
	},
	onLoad({order}) {
		app = this;
		if (!order) {
			return app.$dialog.showSuccess("参数错误","none",function(){
				uni.navigateBack()
			})
		}
		app.order = order;
		setTimeout(function(){
			app.msgDialog = false;
		},3000)
		app.getData();
	},
	methods: {
		toDetail(order){
			uni.navigateTo({
				url:"/pages/order/store?type=1&order="+order
			})
		},
		getData(){
			uni.login({
				success(lres){
					Api.detail({"code":lres.code,"order":app.order}).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;
					})
				},fail(res){
					app.$dialog.showSuccess("登录失败,请重启小程序")
				}
			})
		}
	}
}
</script>

<style>
page{background-color: #f8f8f8;}
.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;}
.coupon-item .img image{width: 160upx;height: 160upx;}
.coupon-item .info{margin-left: 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>