forest-H5/pages/usercenter/myorder/orderdetails/orderdetails.vue

<template>
	<view class="pages page-wrap">
		<view class="step-wrap" v-if="status == 0||status == 1||status == 2||status == 3">
			<view class="step-item" data-text="已拍下" :class="status == 0||status == 1||status == 2||status == 3?'active':''"></view>
			<view class="step-item" data-text="已付款" :class="status == 1||status == 2||status == 3?'active':''"></view>
			<view class="step-item" data-text="已发货" :class="status == 2||status == 3?'active':''"></view>
			<view class="step-item" data-text="交易成功" :class="status == 3?'active':''"></view>
		</view>
		<view class="status-wrap" v-if="status == 0">
				<view class="status-til" v-if="status == 0">等待付款</view>
				<view class="status-til" v-if="status == 1">待发货</view>
				<view class="status-til" v-if="status == 2">已发货</view>
				<view class="status-til" v-if="status == 3">已完成</view>
				<view class="status-til" v-if="status == 5">无效订单</view>
			<view class="status-con" v-if="status == 0">
				如超时未付款，订单将 <br> 自动关闭
			</view>
			<view class="status-con" v-if="status == 2">
				{{logistics}}
			</view>
			<view class="status-icon"><text class="iconfont iconhoutui"></text></view>
		</view>
		<view class="status-common" v-if="status == 1">
			等待发货
		</view>
		<view class="status-common delivery-company" v-if="status == 2">
			您的快递单号为:{{item.deliverySn}}
			<view class="company"  @click="gocheck(item.deliverySn)">{{item.deliveryCompany}}</view>
		</view>
		<view class="status-common" v-if="status == 4">
			<!-- 因交易超时，系统关闭了该笔交易 -->
			订单已关闭
		</view>
		<!-- status end -->		
		<view class="bill-info">
			<view class="bill-product" @click="jumpDetails(orderItemList.productId)">
				<view class="bill-product-imgwrap">
					<image :src="orderItemList.productPic" class="bill-product-img" mode="aspectFill"></image>
				</view>
				<view class="bill-product-info">
					<view class="bill-product-name">{{orderItemList.productName}}</view>
					<view class="bill-product-price-wrap">
						<view class="left">
							¥
							<text class="bill-product-price">{{orderItemList.productPrice}}</text>
							<text class="bill-product-unit" v-if="orderItemList.productUnit">/{{orderItemList.productUnit}}</text>								
						</view>
						<view class="bill-product-number">
							X {{orderItemList.productQuantity}}
						</view>
					</view>
				</view>
			</view>
			<!-- bill-product end -->
			<view class="form-item">
				<view class="form-item-til">商品总额</view>
				<view class="form-item-con amount">
					¥ {{ orderItemList.productPrice*orderItemList.productQuantity }}
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-til">配送方式</view>
				<view class="form-item-con">
					普通快递
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-til">运费</view>
				<view class="form-item-con">
					¥ 0
				</view>
			</view>
		</view>
		<!-- bill-info end -->
		<view class="addr">
			<view class="addr-up">
				<text class="addr-name">{{ item.receiverName }}</text>
				<text class="addr-phone">{{ item.receiverPhone }}</text>
			</view>
			<view class="addr-theaddr">
				收货地址：
				{{item.receiverProvince}}
				{{item.receiverCity}}
				{{item.receiverRegion}}
				{{item.receiverDetailAddress}}
			</view>
		</view>
		<!-- addr end -->
		<view class="order-info">
			<view class="order-info-til">订单信息</view>
			<view class="order-info-item">订单编号：{{item.orderSn}}</view>
			<view class="order-info-item">创建时间：{{item.createTime | formatDateTime}}</view>
			<view class="order-info-item" v-if="item.paymentTime">支付时间：{{item.paymentTime | formatDateTime}}</view>
			<view class="order-info-item" v-if="item.deliveryTime">发货时间：{{item.deliveryTime | formatDateTime}}</view>
			<view class="order-info-item" v-if="item.receiveTime">确收时间：{{item.receiveTime | formatDateTime}}</view>
			<view class="order-info-call" @click="callnumber" v-if="helpphone">联系客服</view>
		</view>
		<!-- order-info end -->
		<view class="bottom-flex-btn-wrap orderdetails" v-if="status == 0">
			<view class="bottom-flex-btn-content">
				<button type="default" class="bottom-flex-btn" @click="cancelOrder">取消订单</button>
				<button type="default" class="bottom-flex-btn primary" @click="pay">我要付款</button>
			</view>	
		</view>
		<view class="bottom-flex-btn-wrap orderdetails" v-if="status == 2">
			<view class="bottom-flex-btn-content">
				<button type="default" class="bottom-flex-btn primary" @click="received">确认收货</button>
			</view>	
		</view>
		<!-- bottom-flex-btn-wrap end -->
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog type="info"  :content="popupContent" :duration="2000" :before-close="true" @close="closepopup" @confirm="confirmpopup"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopup,
			uniPopupDialog,
		},
		data() {
			return {
				token:'',
				tokenhead:'',
				params: {
					orderid:'',
				},
				item:{},
				orderItemList:{},
				status:null,
				helpphone:null,
				logistics:'暂时无法获取物流信息',
				popupContent:'',
				popupType:'',

			}
		},
		onShow() {
			let serf = this;
		},
		onLoad(option) {
			this.params.orderid = option.orderid;
			let self = this;
			uni.getStorage({
				key:'token',
				success: function (res) {
					self.token = res.data;
				   // console.log(res.data);
				}
			});
			uni.getStorage({
				key:'tokenhead',
				success: function (res) {
					self.tokenhead = res.data;
				   // console.log(res.data);
				}
			});
			this.getdetails();

		},
		methods: {
			getdetails(){
				this.$api.http.get(this.config.apiBaseurl + '/order/detail/'+this.params.orderid,{
					header: {
					Accept:'application/json',
					Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
				},
				}).then(res => {
					this.item = res.data.data;
					this.orderItemList = res.data.data.orderItemList[0];
					// console.log('this.orderItemList',this.orderItemList);
					this.status = res.data.data.status;
					// console.log('status',this.status)
					console.log('res',JSON.parse(JSON.stringify(this.item)))
				}).catch(err =>{
					console.log('err',err)
				});
			},
			cancelOrder(){
				this.$refs.popup.open();
				this.popupContent = '确认取消此订单吗?';
				this.popupType = 'cancel';
			},
			received(){
				this.$refs.popup.open();
				this.popupContent = '确认收货?';
				this.popupType = 'received';
			},
			closepopup(done){
				done()
			},
			confirmpopup(done,value){
				if(this.popupType == 'cancel'){
					this.$api.http.post(this.config.apiBaseurl + '/order/cancelUserOrder/?orderId='+this.item.id,{},{
						header: {
						Accept:'application/json',
						Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
					},
					}).then(res => {
						this.getdetails();
						this.goOrderList(res.data.message);
						// console.log('res',res)
					}).catch(err =>{
						console.log('err',err)
					});
				}else if(this.popupType == 'received'){
					this.$api.http.post(this.config.apiBaseurl + '/order/confirmReceiveOrder/?orderId='+this.item.id,{},{
						header: {
						Accept:'application/json',
						Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
					},
					}).then(res => {
						this.getdetails();
						this.goOrderList(res.data.message);
						// console.log('res',res)
					}).catch(err =>{
						console.log('err',err)
					});
				}
				
				done()
			},
			pay(){
				let userInfo = uni.getStorageSync("userInfo");
					let params = {
						orderId:this.item.id,
						payType:this.item.payType,
						openid:userInfo.wxUsers.openid,
						"tradeType":"test"
					}
					this.$pay.wxPay(params).then(res =>{
						this.getdetails();
						this.goOrderList(res.data.message);
						// console.log('payres',res);
					}).catch(err =>{console.log('err',err);});
			},
			//打电话
			callnumber(number){
				if(!this.helpphone){
					uni.showToast({
						icon:'none',
						mask:true,
						title:`暂时没有客服`,
						duration: 2000
					});
					return;
				};
				uni.makePhoneCall({
				    phoneNumber: this.helpphone 
				});				
			},
			//产品跳转链接
			jumpDetails(id){
				uni.navigateTo({
					url:`/pages/product/product?id=${id}`,
					fail(err) {
						console.log(err)
					}
				})				
			},
			// 查快递
			gocheck(id){
				uni.setClipboardData({
					data: id
				});
				window.location.assign('https://m.kuaidi100.com/');
			},
			// 跳转到订单列表
			goOrderList(msg){
				uni.showToast({
					icon:"none",
					title:msg,
					duration: 2000
				});	
				setTimeout(()=>{
					uni.navigateTo({
						url: '/pages/usercenter/myorder/myorder',
						fail:function(err){
							console.log(err)
						}
					});
				},1000)
			}

		}
	}
</script>

<style scoped>
	@import url("./orderdetails.css");
</style>