huazhiyu/pages/OrderDetails/OrderDetails.vue

<template>
	<view class="page">
		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status">
				<text class="iconfont icon-zhuyi"></text>
				<text>{{orderDetails.status==0?'待支付':orderDetails.status==1?'待确认':orderDetails.status==2?'待委托':orderDetails.status==3?'已投诉':orderDetails.status==4?'待发货':orderDetails.status==5?'待收货':orderDetails.status==-1?'已取消':''}}</text>
				<!-- <view class="time" v-if="orderDetails.status==0">
					剩余<text>19小时59分钟24秒</text>，请您尽快完成支付
				</view> -->
			</view>
		
		</view>
		
		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view class="list" v-for="(item,index) in orderInfo" :key="index">
					<view class="sellerInfo">
						<view class="title">{{orderDetails.seller?orderDetails.seller.nickname:'-'}}</view>
						<view class="content" style="margin-left:20rpx;">
							<text>{{orderDetails.seller?orderDetails.seller.mobile:'-'}}</text>
						</view>
					</view>
					<view class="orderNum">
						<view class="title">订单号:</view>
						<view class="content">
							<text>{{orderDetails.order_sn}}</text>
						</view>
					</view>
					<view class="orderInfo">
						<view class="thumb">
							<image :src="item.goods_image" mode="aspectFill"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="one-omit">{{item.goods_name}}</text>
							</view>
							<!-- <view class="num-size">
								<text>数量：{{item.num}}</text>
							</view> -->
							<view class="price">
								<text>￥{{item.goods_price}}</text>
							</view>
							
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-list">
				<view class="list">
					<view class="title">订单提交时间:</view>
					<view class="content">
						<text>{{getTime(orderDetails.createtime)}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">付款确认时间:</view>
					<view class="content">
						<text>{{orderDetails.pay_time_text}}</text>
					</view>
				</view>
				
				
			</view>
		</view>
		<!-- 订单明细 -->
		<view class="order-details">
			<view class="details-list">
				<view class="list">
					<view class="title">
						<text>商品总额</text>
					</view>
					<view class="price">
						<text>￥{{orderDetails.order_amount}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>实付款</text>
					</view>
					<view class="price">
						<text>￥{{orderDetails.pay_amount}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="pic">
			<view class="title">
				付款凭证
			</view>
			<image :src="orderDetails.pay_voucher" v-if="orderDetails.pay_voucher" @click="lookPic([orderDetails.pay_voucher])" mode="aspectFit"></image>
			<text v-else>暂无付款凭证</text>
		</view>
		<view class="btnContainer"  v-if="orderDetails.status==0">
			<view class="btnItem" @click="uploadPay">上传凭证</view>
			<view class="btnItem" @click="goPayHandle">去支付</view>
			<view class="btnItem" @click="confirmPay">支付确认</view>
		</view>
		<u-upload
			:previewFullImage="false" 
			@afterRead="afterRead"
			width="176" height="176"
			style="display: none;"
			ref="uploadPay"
			name="1"
		></u-upload>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getToken} from '@/common/auth.js'
	import {orderDetail,orderPay} from '@/common/api.js'
	export default {
		data() {
			return {
				orderInfo:[],
				warehouse:[],
				orderDetails:{}
			};
		},
		methods:{
			lookPic(imgArr){
				uni.previewImage({
					// current: imgArr[indez],
					urls: imgArr,
					success: (res) => {
						
					}
				});
			},
		
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					this.$refs.uToast.show({
						message:'上传成功'
					})
					if(event.name==1){
						this.getOrderDetails()
						// this.tableData[this.selectedIndex].pay_voucher = JSON.parse(result).data.url;
					}
				}
				
			},
			//上传照片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.baseUrl+'api/common/upload', 
						filePath: url,
						name: 'file',
						header:{
							token:getToken()
						},
						formData: {
						},
						success: (res) => {
							
							if(JSON.parse(res.data).code==1){
								setTimeout(() => {
									resolve(res.data)
								}, 1000)
							}else{
								uni.$u.toast(JSON.parse(res.data).msg)
								
								resolve(res.data)
							}
						},
						fail: (res) => {
							console.log(res,"rrr")
						}
					});
				})
			},
			uploadPay(item,index){
				this.$refs.uploadPay.chooseFile();
				
			},
			confirmPay(item){
				if(!this.orderDetails.pay_voucher){
					this.$refs.uToast.show({
						message:'请上传支付凭证'
					})
					return;
				}
				let params={
					pay_voucher:this.orderDetails.pay_voucher,
					id:this.orderDetails.id,
					status:1
				}
				orderPay(params).then(res=>{
					this.getOrderDetails()
				})
			},
			goPayHandle(){
				console.log("999")
				uni.navigateTo({
					url:"/pages/warehouse/pay?num="+this.orderDetails.order_amount+'&id='+this.orderDetails.id
				})
			},
			getOrderDetails(){
				orderDetail({id:this.id,custom: { auth: true }}).then(res=>{
					
					this.orderDetails = Object.assign({},this.orderDetails,res.data);
					this.orderInfo = res.data.order_goods
					this.warehouse = res.data.warehouse
				})
			},
			getTime(time){
				// 时间戳 
				let timestamp = time
				// 此处时间戳以毫秒为单位
				let date = new Date(parseInt(timestamp) * 1000);
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
				return GMT
				// console.log(GMT)  // 2022-09-07 15:56:07
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getOrderDetails()
		}
	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
</style>