mplace_source/pages/order/details.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack>
			<block slot="content">订单详情</block>
		</bar-title>
		
		<!--步骤条区域-->
		<!-- 有退款 -->
		<view class="bg-white padding solid-top" v-if="info.refund_status == 1">
			<!--步骤条-->
			<view class="cu-steps">
				<block v-for="(item,index) in info.refund_status_list" :key="index">
					<view class="cu-item" :class="item.selected?'select':''">
						<view class="icon-view" v-if="!item.selected">
							<text class="text-red" :class="'cuIcon-' + iconlist[index-1]"></text>
						</view>
						<view class="bg-red icon-view" v-else>
							<text :class="'cuIcon-' + iconlist[index-1]"></text>
						</view>
						<view class="text-sm text-black" v-if="!item.selected">{{item.name}}</view>
						<view class="text-sm text-black" v-else>{{item.name}}</view>
					</view>
				</block>
			</view>
			
			<!--提示-->
			<view class="text-sm text-center margin-top">
				<view class="text-black">{{info.refund.desc}}</view>
			</view>
		</view>
		
		<!-- 无退款 -->
		<view class="bg-white padding solid-top" v-if="info.status !== 9">
			<!--步骤条-->
			<view class="cu-steps">
				<block v-for="(item,index) in info.status_list" :key="index">
					<view class="cu-item" :class="item.selected?'select':''">
						<view class="icon-view" v-if="!item.selected">
							<text class="text-red" :class="'cuIcon-' + iconlist[index-1]"></text>
						</view>
						<view class="bg-red icon-view" v-else>
							<text :class="'cuIcon-' + iconlist[index-1]"></text>
						</view>
						<view class="text-sm text-black" v-if="!item.selected">{{item.name}}</view>
						<view class="text-sm text-black" v-else>{{item.name}}</view>
					</view>
				</block>
			</view>
			
			<!--提示-->
			<view class="text-sm text-center margin-top" v-if="info.status !== 5">
				<view class="text-black">{{info.status_msg}}</view>
				<view class="text-black" v-if="info.status == 4">
					<text class="text-red">9天23小时57分</text>
					<text>后将自动确认收货</text>
				</view>
				<view class="text-black" v-if="info.status == 1">
					<text class="text-red">{{info.time}}分</text>
					<text>后未支付，订单将自动关闭。</text>
				</view>
			</view>
		</view>
		
		<!--状态图标-->
		<view class="bg-white padding solid-top text-center zaiui-status-img-view" v-if="info.status == 5">
			<view class="are-img-view" @tap="cancel = true">
				<image class="are-img" src="/static/zaiui/img/are.png" mode="widthFix"/>
			</view>
			<view class="text-sm text-black">交易成功，待发表评价</view>
		</view>
		
		<!--状态图标-->
		<view class="bg-white padding solid-top text-center zaiui-status-img-view" v-if="info.status == 9">
			<view class="are-img-view" @tap="cancel = false">
				<image class="are-img" src="/static/zaiui/img/arg.png" mode="widthFix"/>
			</view>
			<view class="text-sm text-black">订单已取消</view>
		</view>
		
		<!--广告区域-->
<!-- 		<view class="bg-white zaiui-card-box" v-if="basics == 0">
			<view class="zaiui-card-view zaiui-goods-ad-view">
				<view class="cu-avatar radius lg" :style="[{backgroundImage:'url('+ bg_img +')'}]"/>
				<view class="goods-info-view">
					<text class="cu-tag bg-gradual-pink">现在卖最值钱</text>
					<view class="text-black">手机即刻变现</view>
					<view class="text-sm">
						<text>比回收平均多卖</text>
						<text class="text-red text-xl">42%</text>
					</view>
				</view>
				<view class="goods-btn-view">
					<button class="cu-btn bg-red radius sm">立即卖钱</button>
				</view>
			</view>
		</view> -->
		
		<!--物流信息-->
		<view class="bg-white zaiui-card-box" v-if="info.address">
			<view class="zaiui-card-view zaiui-address-view">
				<view class="text-lg text-bold text-black">物流信息</view>
				<view class="solid-line"></view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="bg-grey icon-view">
							<text class="cuIcon-locationfill"/>
						</view>
						<view class="content">
							<view class="text-black">
								<text>收货人：</text>
								<text>{{info.address.name}}</text>
								<text class="margin-left">{{info.address.phone}}</text>
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">{{info.address.area_string}}{{info.address.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!--商品信息-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-shop-view">
				<view class="shop-info-view">
					<view class="cu-avatar round sm" :style="[{backgroundImage:'url('+ info.pic +')'}]"/>
					<view class="text-black text-bold text-lg title-view">{{info.order_num}}</view>
				</view>
				<view class="goods-list-view" v-for="item in info.detail" :key="item.id">
					<view class="cu-avatar radius" :style="[{backgroundImage:'url('+ item.pic +')'}]"/>
					<view class="goods-info-view">
						<view class="text-black text-cut name">{{item.name}} </view>
						<view class="text-gray text-sm text-cut introduce">数量：x{{item.num}}, {{item.sku_name}}</view>
						<view class="text-cut tag-view">
							<!-- <text class="cu-tag sm line-blue radius">支持验机</text>
							<text class="cu-tag sm line-blue radius">专业质检</text> -->
						</view>
						<view class="text-red text-lg">{{item.cash}}</view>
					</view>
				</view>
				<!-- <view class="zaiui-foot-view">
					<view class="left-view">
						<image class="af5-img" src="/static/zaiui/img/af5.png" mode="widthFix"/>
						<text class="text-black">{{info.info}}</text>
					</view>
					<text class="text-black text-right">{{info.cash}}</text>
				</view> -->
			</view>
		</view>
		
		<!--商品金额-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-price-view">
				<view class="text-black title-view">
					<view class="title">商品总额</view>
					<view class="text-right">
						<text>{{info.cash}}</text>
					</view>
				</view>
				<view class="text-black title-view">
					<view class="title">运费</view>
					<view class="text-right">
						<text class="margin-right-xs"></text>
						<text class="">{{info.yun}}</text>
					</view>
				</view>
				<!-- <view class="text-black title-view">
					<view class="title">特色服务费</view>
					<view class="text-right">
						<text class="margin-right-xs">+</text>
						<text class="text-price">39.00</text>
					</view>
				</view> -->
				<view class="text-black text-bold title-right-view">
					<text class="margin-right-xs">付款：</text>
					<text>{{info.cash}}</text>
				</view>
				
				<!-- <view class="solid-line"></view> -->
				
				<!-- <view class="text-center text-black">联系客服</view> -->
			</view>
		</view>
		
		<!--订单信息-->
		<view class="bg-white zaiui-card-box">
			<view class="zaiui-card-view zaiui-order-view">
				<view class="text-lg text-bold text-black">订单信息</view>
				<view class="solid-line"></view>
				<view class="text-black title-view">
					<view class="title">订单编号</view>
					<view class="text-right">
						<text class="margin-right-xs">{{info.order_num}}</text>
						<button class="cu-btn sm line-black" @click="copy">复制</button>
					</view>
				</view>
				<view class="text-black title-view">
					<view class="title">支付方式</view>
					<view class="text-right">
						<text>微信<block v-if="info.status<2">(未支付)</block></text>
					</view>
				</view>
				<view class="text-black title-view">
					<view class="title">下单时间</view>
					<view class="text-right">
						<text>{{info.cdate_str}}</text>
					</view>
				</view>
				<view class="text-black title-view" v-if="info.pdate_str">
					<view class="title">支付时间</view>
					<view class="text-right">
						<text>{{info.pdate_str}}</text>
					</view>
				</view>
				<view class="text-black title-view" v-if="info.ddate_str">
					<view class="title">发货时间</view>
					<view class="text-right">
						<text>{{info.ddate_str}}</text>
					</view>
				</view>
				<view class="text-black title-view" v-if="info.qdate_str">
					<view class="title">签收时间</view>
					<view class="text-right">
						<text>{{info.qdate_str}}</text>
					</view>
				</view>
				<view class="text-black title-view" v-if="info.fdate_str">
					<view class="title">完成时间</view>
					<view class="text-right">
						<text>{{info.fdate_str}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bg-white zaiui-card-hight-box"/>
		
		<!--为您推荐-->
		<!-- <view class="zaiui-title-view">
			<view class="flex flex-wrap">
				<view class="basis-sm text-right">
					<image class="img-anc" src="/static/zaiui/img/anc.png" mode="widthFix"/>
				</view>
				<view class="basis-xs text-center">
					<text class="text-black text-lg">为您推荐</text>
				</view>
				<view class="basis-sm text-left">
					<image class="img-anc" src="/static/zaiui/img/anc.png" mode="widthFix"/>
				</view>
			</view>
		</view>
		 -->
		<!--推荐列表-->
		<!-- <view class="zaiui-recommend-goods-list-view">
			<view class="flex flex-wrap">
				<view class="basis-df padding-sm padding-right-xs">
					<view class="bg-white margin-bottom-sm list-itme">
						<view class="cu-avatar" :style="[{backgroundImage:'url('+ bg_img +')'}]"/>
						<view class="goods-info-view">
							<view class="text-cut text-black">苹果X 苹果X256G无锁99新 有现货</view>
							<view class="text-price text-red text-lg">2199</view>
							<view class="foot-box">
								<view class="text-gray text-sm address">重庆 渝北</view>
								<text class="cu-tag line-red sm radius">找相似</text>
							</view>
						</view>
					</view>	
				</view>
				<view class="basis-df padding-sm padding-right-xs">
					<view class="bg-white margin-bottom-sm list-itme">
						<view class="cu-avatar" :style="[{backgroundImage:'url('+ bg_img +')'}]"/>
						<view class="goods-info-view">
							<view class="text-cut text-black">苹果X 苹果X256G无锁99新 有现货</view>
							<view class="text-price text-red text-lg">2199</view>
							<view class="foot-box">
								<view class="text-gray text-sm address">重庆 渝北</view>
								<text class="cu-tag line-red sm radius">找相似</text>
							</view>
						</view>
					</view>	
				</view>
				<view class="basis-df padding-sm padding-right-xs">
					<view class="bg-white margin-bottom-sm list-itme">
						<view class="cu-avatar" :style="[{backgroundImage:'url('+ bg_img +')'}]"/>
						<view class="goods-info-view">
							<view class="text-cut text-black">苹果X 苹果X256G无锁99新 有现货</view>
							<view class="text-price text-red text-lg">2199</view>
							<view class="foot-box">
								<view class="text-gray text-sm address">重庆 渝北</view>
								<text class="cu-tag line-red sm radius">找相似</text>
							</view>
						</view>
					</view>	
				</view>
				<view class="basis-df padding-sm padding-right-xs">
					<view class="bg-white margin-bottom-sm list-itme">
						<view class="cu-avatar" :style="[{backgroundImage:'url('+ bg_img +')'}]"/>
						<view class="goods-info-view">
							<view class="text-cut text-black">苹果X 苹果X256G无锁99新 有现货</view>
							<view class="text-price text-red text-lg">2199</view>
							<view class="foot-box">
								<view class="text-gray text-sm address">重庆 渝北</view>
								<text class="cu-tag line-red sm radius">找相似</text>
							</view>
						</view>
					</view>	
				</view>
			</view>
		</view>
		 -->
		<!--底部-->
		<view class="foot-hight-view"/>
		
		<block v-if="info.refund_status == 1">
			<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="info.refund.status == 2">
				<!-- <button class="cu-btn bg-orange sm" @tap="nextTap">测试下一步</button> -->
				<button class="cu-btn line-black radius" @click="refundGoods">退货发货</button>
			</view>
			
		</block>
		<block v-else>
			<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="info.status == 1">
				<!-- <button class="cu-btn bg-orange sm" @tap="nextTap">测试下一步</button> -->
				<button class="cu-btn line-black radius" @click="cancelOrder">取消订单</button>
				<button class="cu-btn bg-red">确认支付</button>
			</view>
			
			<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="info.status == 2">
				<!-- <button class="cu-btn bg-orange sm" @tap="nextTap">测试下一步</button> -->
				<button class="cu-btn line-black radius" @click="toRefund">申请退款</button>
				<!-- <button class="cu-btn bg-red">提醒发货</button> -->
			</view>
			
			<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="info.status == 3">
				<!-- <button class="cu-btn bg-orange sm" @tap="nextTap">测试下一步</button> -->
				<button class="cu-btn line-black radius" @click="toRefund">申请退款</button>
			</view>
			
			<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="info.status == 4">
				<!-- <button class="cu-btn bg-orange sm" @tap="nextTap">测试下一步</button> -->
				<button class="cu-btn line-black radius" @click="toRefund">申请退款</button>
				<button class="cu-btn bg-red" @tap="confirmReceipt">确认收货</button>
			</view>
			
			<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom" v-if="info.status == 5">
				<!-- <button class="cu-btn bg-orange sm" @tap="nextTap">测试第一步</button> -->
				<button class="cu-btn line-black radius" @tap="appraiseTap">发表评价</button>
				<!-- <button class="cu-btn bg-red">查看钱款去向</button> -->
			</view>
		</block>
		
		<!--弹出框-->
		<view class="cu-modal bottom-modal" :class="bottomModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-form-group margin-top">
					<view class="title">申请类型</view>
					<picker @change="expressPickerChange" :value="expressIndex" :range="expressList" range-key="name">
						<view class="picker">
							{{expressList[expressIndex] && expressList[expressIndex].name}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">快递单号</view>
					<input placeholder="请输入快递单号" v-model="number"></input>
				</view>
				
				<view class="zaiui-footer" style="padding: 20upx;">
					<view class="flex flex-direction">
						<button class="cu-btn bg-red lg" @click="submitExpress">确定</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle
		},
		data() {
			return {
				id: '',
				basics: 0, bg_img: '/static/images/home/goods/1.png', avatar: '/static/images/avatar/1.jpg', cancel: false,
				iconlist: ['cartfill','card','deliver_fill','formfill','presentfill'],
				bottomModal: false, 
				codeKey: [], 
				btnKey: true,
				info: {},
				expressList: [],
				expressIndex: 0,
				number: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.loadInfo()
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.info.order_num
				})
			},
			expressPickerChange(e) {
				this.expressIndex = e.detail.value
			},
			refundGoods() {
				this.loadExpress()
				this.bottomModal = true
			},
			loadExpress() {
				this.reqByuser({
					url: '?l=resource.express', 
					data: {
						type: 3,
						id: this.id
					},
					success: res => {
						if(res.data.status == 1) {
							this.expressList = res.data.data.express;
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			submitExpress() {
				this.reqByuser({
					url: '?l=resource.expressAct', 
					data: {
						type: 3,
						id: this.id,
						number: this.number,
						express_id: this.expressList[this.expressIndex].id
					},
					success: res => {
						if(res.data.status == 1) {
							uni.showToast({
								icon: 'success',
								title: '提交成功'
							})
							this.bottomModal = false
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			loadInfo() {
				this.reqByuser({
					url: '?l=resource.getOrderView', 
					data: {
						type: 3,
						id: this.id
					},
					success: res => {
						if(res.data.status == 1) {
							this.info = res.data.data.info;
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			cancelOrder() {
				uni.showModal({
				    title: '提醒',
				    content: '您确认要取消订单吗',
					confirmText: '确认',
					class: 'zaiui-modal',
				    success: res => {
				        if (res.confirm) {
							this.reqByuser({
								url: '?l=resource.upOrderCancel', 
								data: {
									type: 3,
									id: this.id
								},
								success: res => {
									if(res.data.status == 1) {
										uni.showToast({
											icon: 'success',
											title: '提交成功'
										})
										this.loadInfo()
									}else {
										uni.showToast({
											icon: 'error',
											title: res.data.msg
										})
									}
								}
							})
							
							
				        }
				    }
				});
			},
			confirmReceipt() {
				uni.showModal({
				    title: '收货提醒',
				    content: '请务必确认已收到商品后再确认收货，让您提前确认收货的都是骗子、不走平台交易的都是骗子、让您私下打款的都是骗子',
					confirmText: '确认收货',
					confirmColor: '#0081ff',
					class: 'zaiui-modal',
				    success: res => {
				        if (res.confirm) {
							this.reqByuser({
								url: '?l=resource.upOrderFinish', 
								data: {
									type: 3,
									id: this.id
								},
								success: res => {
									if(res.data.status == 1) {
										uni.showToast({
											icon: 'success',
											title: '提交成功'
										})
										this.loadInfo()
									}else {
										uni.showToast({
											icon: 'error',
											title: res.data.msg
										})
									}
								}
							})
							
							
				        }
				    }
				});
			},
			closeModalTap () {
				this.bottomModal = false;
			},
			codeKeyTap (index) {
				if(this.codeKey.length < 4) {
					this.codeKey.push(index);
				}
			},
			codeKeyDelTap() {
				this.codeKey.pop();
			},
			getCodeKey() {
				this.btnKey = false;
			},
			appraiseTap() {
				uni.navigateTo({
					url: "/pages/order/appraise?id="+this.id
				});
			},
			toRefund() {
				uni.navigateTo({
					url: '/pages/order/refund?id='+this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
	@import "../../static/zaiui/style/order-details.scss";
</style>