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

<template>
	<view>
		<view class="address" v-if="storeInfo && storeInfo.service_type==2">
			
		</view>
	
		<view class="location" @click="toDetail">
			<view class="left">
				<view class="name">{{poi_name}}</view>
				<view class="desc"><image src="/static/image/location.png"></image>距您{{juli}}公里</view>
			</view>
			<view class="right"><image src="/static/image/right.png"></image></view>
		</view>
		
		<view class="goods" v-if="goodsInfo">
			<view class="goods-info">
				<view class="image"><image :src="goodsInfo.product_img"></image></view>
				<view class="info">
					<view class="name">{{ goodsInfo.product_name }}</view>
					<view class="desc">x {{goodsInfo.count}}</view>
				</view>
			</view>
			<view class="goods-item">
				<view class="left">商品总额</view>
				<view class="right">￥{{goodsInfo.order_amount}}</view>
			</view>
			<view class="goods-item">
				<view class="left">商品优惠</view>
				<view class="right red">￥{{goodsInfo.order_amount}}</view>
			</view>
		</view>
		<view class="empty-data" v-else>
			<u-skeleton
				rows="3"
				title
				loading
			></u-skeleton>
		</view>
		
		<view class="order-time" v-if="storeInfo && storeInfo.service_type==1">
			<view class="title">期望时间</view>
			<view class="msg" @click="selectTime(1)">
				{{timeStr?timeStr:'请选择'}}
				<view class="right"><image src="/static/image/right.png"></image></view>
			</view>
		</view>
		
		<view class="order-msg">
			<view class="title">订单备注</view>
			<view class="msg"><textarea class="textarea" placeholder="请输入" v-model="msg" :rows="5"></textarea></view>
		</view>
		
		<view class="flx-footer">
			<view class="footer-btn">
				<view class="price"><text class="desc">已优惠：￥{{goodsInfo.order_amount}}，</text>合计<text class="money">￥0</text></view>
				<view class="btn-group"><button :disabled="disabled" class="btn">{{disabled?'处理中...':'确认兑换'}}</button></view>
			</view>
			<view class="footer-safe"></view>
		</view>
		
		<uni-popup ref="timepopup" type="bottom" borderRadius="10px 10px 0 0" backgroundColor="#F8F8F8">
			<view class="time-select">
				<view class="title">选择时间<view class="close" @click="selectTime(2)"><image src="/static/image/round_close.png"></image></view> </view>
			</view>
			<view class="time-body">
				<view class="time-left"></view>
				<view class="time-right"></view>
			</view>
			<view class="time-btn">
				<button class="btn">确认选择</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
export default {
	data() {
		return {
			disabled:false,
			order:"",
			poi_name:"",
			poi_id:"",
			juli:"",
			goodsInfo:null,
			storeInfo:null,
			timeStr:null,
			timeState:false,
			timeData:[]
		}
	},
	onLoad({order,poi_id,poi_name,juli}) {
		app = this;
		app.order = order;
		app.poi_id = poi_id;
		app.poi_name = poi_name;
		app.juli = juli;
		app.getOrder();
	},
	methods: {
		selectTime(type){
			if (type == 1) {
				app.$refs.timepopup.open()
			}
			if (type == 2) {
				app.$refs.timepopup.close()
			}
		},
		getOrder(){
			Api.detail({"order":app.order}).then((res)=>{
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.info,"none",function(){
						uni.navigateBack()
					});
				}
				app.goodsInfo = res.data.order;
				app.storeInfo = res.data.store;
				app.timeData = res.data.time
			});
		},
		toDetail(){
			uni.navigateTo({
				url:"/pages/order/store?type=1&order="+app.order
			})
		},
	}
}
</script>

<style>
	
.time-body{height: 30vh;}
.time-body .time-left{width: 30%;background-color: #F5FAFD;height: 100%;overflow-y: auto;}
.time-body .time-right{width: calc(70% - 20upx);margin-left: 20upx;}
.time-select .title{height: 100upx;line-height: 100upx;display: flex;align-items: center;justify-content: space-between;font-size: 28upx;padding: 0 20upx;font-weight: bold;}
.time-select image{width: 40upx;height: 40upx;vertical-align: middle;}
.time-btn{padding: 20upx;}	

.location,.order-time{background-color: #fff;border-radius: 20upx;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;display: flex;align-items: center;justify-content: space-between;}
.location .right image{width: 40upx;height: 40upx;vertical-align: middle;}
.location .name{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20upx;}
.location .desc{color: #666;font-size: 28upx;display: flex;align-items: center;}
.location .desc image{width: 40upx;height: 40upx;margin-right: 20upx;}
.goods,.order-msg{background-color: #fff;border-radius: 20upx;padding: 20upx;width: calc(95% - 40upx);margin: 20upx auto;}
.goods .goods-info{display: flex;align-items: center;}
.goods .goods-info .info{flex: 1;margin-left: 20upx;}
.goods .goods-info .image image{width: 160upx;height: 160upx;}
.goods .goods-info .name{font-size: 32upx;color: #333;line-height: 46upx;font-weight: bold;margin-bottom: 20upx;}
.goods .goods-info .desc{color: #666;font-size: 28upx;line-height: 48upx;}
.goods .goods-item{display: flex;align-items: center;border-top: 2upx solid #f8f8f8;line-height: 80upx;justify-content: space-between;font-size: 28upx;color: #333;}
.goods .goods-item .right.red{color: #f00;}

.order-time .title{font-size: 28upx;}
.order-time image{width: 40upx;height: 40upx;vertical-align: middle;}
.order-time .msg{display: flex;align-items: center;font-size: 28upx;color: #333;}

.order-msg .title{color: #333;font-size: 28upx;border-bottom: 2upx solid #f8f8f8;margin-bottom: 20upx;padding-bottom: 20upx;}
.order-msg .textarea{width: 100%;height: 120upx;font-size: 28upx;}

.flx-footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;}
.flx-footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}
.flx-footer .btn,.time-btn .btn{font-size: 28rpx;height: 80upx;border-radius: 10upx;line-height: 80upx;text-align: center;width: 100%;color: #333;background-color: #224d7a;color: #fff;border:2upx solid #224d7a;}
.flx-footer .btn[disabled],.flx-footer .btn.disabled{background-color: rgba(34, 77, 122, 0.3);}
.flx-footer .footer-btn{display: flex;align-items: center;justify-content: space-between;}
.flx-footer .footer-btn text.desc{color: #666;font-size: 24upx;}
.flx-footer .footer-btn text.money{color: #f00;font-size: 28upx;font-weight: bold;}
.flx-footer .footer-btn .price{color: #333;font-size: 28upx;}
</style>