Client-Teapay/src/pages/szw-order-details/index.vue

<template>
	<view class="container">
	    <view class='no_data' v-if="dataError">
	        <image src="/static/no_data.png" class='image' mode='widthFix' />
	        <view>没有找到该订单呢……</view>
	    </view>
	    <view class='orderDetail_box'>
	        <view class="sec-wrap" v-if="!dataError">
	            <view class="order-status">
	                <view class="icon-box">
						<block v-if="orderInfo.orderDetail">
							<image v-if="orderInfo.orderDetail.status==2" class="icon" src="/static/order-details/icon-ddfk.png"></image>
							    <image v-else-if="orderInfo.orderDetail.status==3" class="icon" src="/static/order-details/icon-ddfh.png"></image>
							    <image v-else-if="orderInfo.orderDetail.status==4" class="icon" src="/static/order-details/icon-ddsh.png"></image>
							    <image v-else-if="orderInfo.orderDetail.status==5" class="icon" src="/static/order-details/icon-jycg.png"></image>
							    <image v-else-if="orderInfo.orderDetail.status==6 || orderInfo.orderDetail.status==7" class="icon" src="/static/order-details/icon-ddgb.png"></image>
						</block>
	                </view>
	                <view class="right-text">
	                    <view class="status">{{orderInfo.orderDetail?orderInfo.orderDetail.statusMsg:''}}</view>
	                    <!-- <view class="des">{{changeTimeText}}</view> -->
	                </view>
	            </view>
	        </view>
	        <!-- 配送 -->
	        <view class="address-box">
	            <view class="show-address">
	                <view class="name-tel">{{orderInfo.address.name}} {{orderInfo.address.mobile}}</view>
	                <view class="addr-text">{{orderInfo.address.province}} {{orderInfo.address.city}} {{orderInfo.address.county}} {{orderInfo.address.address}}</view>
	            </view>
	        </view>
			
			<view class='logistics_btn' v-if="orderInfo.logistics && orderInfo.logistics.logistics_no && orderInfo.logistics.logistics_business" @tap="goLogistics">
				<view class='l_box' v-if="orderInfo.logistics.statusMsg && orderInfo.logistics.statusMsg != ''">{{orderInfo.logistics.statusMsg}}</view>
				<view class='l_box' v-else>已发货：{{orderInfo.logistics.logistics_business}}，快递单号：{{orderInfo.logistics.logistics_no}}</view>
			</view>
			
	        <view class="goods-list">
	            <view class="goods-info_box" v-for="(item,index) in orderInfo.mallGood" :key="index">
	                <scroll-view class="goods-img-container" :data-id="item.goodsId" @tap="toGoodsDetails">
	                    <view class="img-box">
	                        <image :src="item.image" mode='' class="goods-img"></image>
	                    </view>
	                    <view class='goodsDetail_info'>
	                        <view class='goods_name'>{{item.goodsName}}
	                            <view class='goods_num'>×{{item.buyCount}}</view>
	                        </view>
							<view class='goods_price r_color'>￥{{item.costPrice}}</view>
	                    </view>
	                </scroll-view>
	            </view>
	        </view>
			<!-- <view class="remark"><text>备注:</text>{{item}}</view> -->
	        <!-- <view class="goods-info">
	            <view class="row-box" v-if="orderInfo.coupon && orderInfo.coupon.id">
	                <view class="row-label">商品合计</view>
	                <view class="right-text r_color">¥ {{goodsTotalPrice}}</view>
	            </view>
	            <view class="row-box" v-if="orderInfo.coupon && orderInfo.coupon.id">
	                <view class="row-label">店铺优惠</view>
	                <view class="right-text r_color">
	                    {{orderInfo.coupon.type == 1?'- ￥':''}} {{orderInfo.coupon.actualCoupon}} {{orderInfo.coupon.type == 1?'':'折'}}
	                </view>
	            </view>
	        </view> -->
	        <view class='order_info'>
				<view class='li_box' v-if="orderInfo.orderDetail.statusMsg">订单状态：
				    <view class='info_data'>{{orderInfo.orderDetail.statusMsg}}</view>
				</view>
	            <view class='li_box' v-if="orderInfo.orderDetail.orderNo">订单编号：
	                <view class='info_data'>{{orderInfo.orderDetail.orderNo}}</view>
	            </view>
	            <view class='li_box' v-if="orderInfo.orderDetail.createTime">订单创建：
	                <view class='info_data'>{{orderInfo.orderDetail.createTime}}</view>
	            </view>
				<view class='li_box'>支付方式：
				    <view class='info_data'>{{orderInfo.orderDetail.patTypeDesc}}</view>
				</view>
				<view class='li_box' v-if="orderInfo.orderDetail.integral">商品合计：
				    <view class='info_data'>{{orderInfo.orderDetail.integral}}</view>
				</view>
				<view class='li_box' v-if="orderInfo.orderDetail.orderTypes == 2">批发积分：
				    <view class='info_data'>{{orderInfo.orderDetail.totalPfInt}}</view>
				</view>
				<view class='li_box' v-if="orderInfo.orderDetail.orderTypes == 2">茶宝：
				    <view class='info_data'>{{orderInfo.orderDetail.totalTeaInt}}</view>
				</view>
				<view class='li_box' v-if="orderInfo.orderDetail.orderTypes == 7">拼团金：
				    <view class='info_data'>{{orderInfo.orderDetail.totalAccountSpell}}</view>
				</view>
	        </view>
	        <view class="detail_btn-row-box">
	            <view class="detail_btn-row">
					<block>
					    <view class="btn cancel-btn" @tap="toCancel" v-if="orderInfo.orderDetail.status == 2">取消订单</view>
					    <view class="btn topay-btn" @tap="toPay" v-if="orderInfo.orderDetail.status == 2">立即支付</view>
					    <view class="btn topay-btn" @tap="toTake" v-if="orderInfo.orderDetail.status == 4 || orderInfo.orderDetail.status == 3">确认收货</view>
						<view class="btn topay-btn" @tap="toCommen" v-if="orderInfo.orderDetail.comType && orderInfo.orderDetail.comType == 1">去评价</view>
					    <block v-if="(orderInfo.orderDetail.status == 3 || orderInfo.orderDetail.status == 4 || orderInfo.orderDetail.status == 5) && orderInfo.returnType == 1 && orderInfo.orderDetail.orderTypes!=2">
					    	<view
					    		v-if="orderInfo.refundId"
					    	    class="btn"
					    		:class="orderInfo&&orderInfo.refundId ? 'topay-btn':'cancel-btn'"
					    	    :data-type="orderInfo.type"
					    	    :data-id="orderInfo.orderDetail.orderDetailId"
					    	    :data-reid="orderInfo.refundId"
					    	    @tap="toRefundDetails(orderInfo)"
					    	>
					    	    退款中
					    	</view>
					    	<view
					    		v-else
					    	    class="btn"
					    		:class="orderInfo&&orderInfo.refundId ? 'topay-btn':'cancel-btn'"
					    	    :data-type="orderInfo.type"
					    	    :data-id="orderInfo.orderDetail.orderDetailId"
					    	    :data-reid="orderInfo.refundId"
					    	    @tap="toRefund(orderInfo)"
					    	>
					    	    退货/退款
					    	</view>
					    </block>
					</block>
					<view class="btn cancel-btn" @tap='goBack'>返回</view>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script>
var utils = require('../../utils/util.js');
// import { ReqApi, ToPayOpre } from "../../utils/reqTools.js";
// var reqApi = new ReqApi();
// var toPayOpre = new ToPayOpre();
var app = getApp();
var appEv = app.$vm.$options;
	export default {
		data() {
			return {
				currentTpye: false,
				dataError: false,
				orderInfo: {},
				isTuanIng: false ,// 是否为拼团中订单
				isweixin:'',
				goodsNum:'',
				goodsTotalPrice:'',
				pt:''
			};
		},
		onLoad: function(e) {
		    if (!e.id) {
		        uni.navigateBack({
		            delta: 1
		        })
		        uni.showToast({
		            title: '参数错误',
		            image: '/static/static/images/toast_nothing.png',
		            duration: 1200
		        })
		        return
		    }
		    this.orderId=e.id
		    this.type=e.type
		    uni.showLoading({
		        title: '加载中…',
		        mask: true
		    });
		    this.loadData();
		},
		methods:{
			loadData: function() {
			    var orderDetailId = this.orderId, type = this.type;
			    var info = reqApi.goodsOrderDetails({ orderDetailId, type:this.type });
			    
			    var that = this;
			    if (info){
			        info.then(res => {
						uni.hideLoading()
						if(res.data.status == 200){
							that.orderInfo = res.data
						}else{
							uni.showModal({
							    title: '提示',
							    content: '网络较慢，请稍后重试',
							    success: function (res) {
							        if (res) {
										uni.navigateBack({
											delta:1
										})
									}
							    }
							});
						}
			        })
			    }
			
			},
			toRefund() {
			    var id = this.orderId, type = this.type;
			    uni.navigateTo({
			        url: '/pages/order-refund/index?id=' + id + '&type=' + type,
			    })
			},
			toRefundDetails(e) {
			    var refundId = this.orderInfo.refundId;
			    uni.navigateTo({
			        url: '/pages/order-refund-details/index?id=' + refundId,
			    })
			},
			// 取消订单
			toCancel() {
				var orderDetailId = this.orderId, type = this.type;
				const info = reqApi.cancelOrder({ orderDetailId, type });
				var that = this;
				if (info) {
					info.then(res => {
						if (res.data.status == 200) {
							appEv.errTips(res.data.msg || '订单已取消');
							setTimeout(function () {
								that.loadData();
							}, 1200);
						} else {
							appEv.errTips(res.data.msg || '取消失败');
						}
					});
				}
			},
			// 立即支付
			toPay(e){
				let data = {
					orderDetailIds:this.orderId,
					types:1,
					price:this.orderInfo.orderDetail.totalWxPrice,
					account:this.orderInfo.orderDetail.totalAccount,
					teaIntegral:this.orderInfo.orderDetail.totalTeaInt,
					pfIntegral:this.orderInfo.orderDetail.totalPfInt,
					xfIntegral:this.orderInfo.orderDetail.totalXfInt,
					zfType:this.orderInfo.orderDetail.patType,
					ojsType:this.orderInfo.orderDetail.ojsType
				}
				var info
			    info = reqApi.payOrder(data);
			    var that = this;
			    if (info) {
			        info.then(res => {
			            if (res.data.status == 200) {
			                toPayOpre.toPay(res.data.payParam);
			            } else {
			                appEv.errTips(res.data.msg || '支付失败');
			            }
			        });
			    }
			},
			// 确认收货
			toTake() {
			    var orderDetailId = this.orderId;
			    var that = this;
			    uni.showModal({
			        content: '亲，“确定收货”代表着本订单的交付流程已经完成，不再支持任何形式的退换货。？',
			        confirmText: "确认收货",
			        confirmColor: "#fa2f2e",
			        cancelText: "取消",
			        cancelColor: "#bbb",
			        success(res) {
			            if (res.confirm) {
			                const info = reqApi.takeOrder({ orderDetailId:orderDetailId, type:1 });
			                if (info) {
			                    info.then(res => {
			                        if (res.data.status == 200) {
			                            appEv.errTips(res.data.msg);
			                            setTimeout(function () {
			                                that.loadData();
			                            }, 1200);
			                        } else {
			                            appEv.errTips(res.data.msg || '收货失败');
			                        }
			                    });
			                }
			            } else if (res.cancel) {
			                // console.log('用户点击取消');
			            }
			        }
			    })
			},
			//计时
			timeChange: function(statusType, finsTime) {
			    var nowTime = utils.unxiNum();
			    finsTime = utils.unxiNum(finsTime);
			    var timeDiffNum = finsTime - nowTime;
			    var that = this,
			        text = '';
			    if (timeDiffNum > 0) {
			        var timer = setInterval(function() {
			            --timeDiffNum;
			            var back_text = utils.changeTimeStamp(timeDiffNum);
			            if (timeDiffNum <= 0 || !back_text) {
			                clearInterval(timer);
			                if (statusType == 0) {
			                    text = "订单未在规定时间内付款已自动关闭";
			                    that.currentTpye=7
			                    that.onShow();
			                }
			            } else {
			                if (statusType == 0) {
			                    text = "请于" + back_text + "内付款，超时订单将自动关闭";
			                }
			            }
			            that.timeOver= false//时间是否已结束
			            that.changeTimeTexttext
			        }, 1000);
			    } else {
			        if (statusType == 0) {
			            text = "订单未在规定时间内付款已自动关闭";
			        }
			        that.timeOver=true //时间是否已结束
			        that.changeTimeText=text
			    }
			},
			goBack: function() {
			    uni.navigateBack({})
			},
			// 跳转商品详情
			toGoodsDetails(e){
			    var url = '/pages/chengbei-goods-details/index?goods_id=' + e.currentTarget.dataset.id;
			    if (this.orderInfo.orderDetail.assembleType && this.orderInfo.orderDetail.assembleType != 1){
			        // 判断是否为拼团订单
			        url += "&type=TUAN";
			    }
			    uni.navigateTo({
			        url: url
			    })
			},
			// 跳转拼团分享页面
			toTuanShare() {
			    uni.navigateTo({
			        url: '/pages/tuan-share-info/index?orderNo=' + this.orderInfo.orderDetail.orderNo
			    })
			},
			// 跳转物流详情
			goLogistics(){
				uni.navigateTo({
					url: '/pages/logistics/index?id=' + this.orderInfo.orderDetail.orderDetaillId
				})
			},
			// 去评价
			toCommen(e) {
				var id = this.orderId,
					no = this.orderInfo.orderDetail.orderNo,
					orderType = this.type;
				uni.navigateTo({
					url: '/pages/add-goods-commen/index?orderId=' + id + '&orderNo=' + no + '&orderType=' + orderType
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
    background-color: #f3f5f7;
}

.r_color {
    color: #fa2f2e;
}

.sec-wrap {
    background-color: #21C792;
    margin: 2rpx 0 20rpx;
}

.bottom-fiexd {
    position: fixed;
    bottom: 0;
    left: 0;
}
.flex_hvcc{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}
.address-box {
    width: 100%;
    margin: -20rpx 0 20rpx;
    background: #fff url(http://xcx.soowin.com/images/addr-line.png) no-repeat center top;
    background-size: 100% 4rpx;
    overflow: hidden;
}

.show-address {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx 0 80rpx;
    background: url(http://xcx.soowin.com/images/ico-addr.png) no-repeat 25rpx 30rpx;
    background-size: 40rpx auto;
}

.show-address .name-tel {
    font-size: 28rpx;
    color: #000;
    padding: 30rpx 0 20rpx 0;
}
.show-address .name-tel-phone {
    padding: 30rpx 0;
}

.show-address .addr-text {
    font-size: 24rpx;
    color: #888;
    padding-bottom: 34rpx;
    line-height: 36rpx;
}
.show-address .addr-text_lit {
    padding-bottom: 10rpx;
}

.sec-wrap .order-status {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
    height: 160rpx;
    display: flex;
    align-items: center;
}

.order-status .icon-box {
    width: 80rpx;
    height: 80rpx;
    overflow: hidden;
    margin-right: 26rpx;
}

.order-status .icon-box .icon {
    width: 100%;
    height: 100%;
}

.order-status .right-text {
    width: calc(100% - 116rpx);
    overflow: hidden;
}

.order-status .right-text .status {
    font-size: 36rpx;
    color: #fff;
    padding: 2rpx 0 4rpx;
    font-weight: 500;
}

.order-status .right-text .red {
    color: #fa2f2e;
}

.order-status .right-text .des {
    font-size: 24rpx;
    color: #fff;
    padding: 4rpx 0;
}

.address-sec {
    width: 720rpx;
    margin-left: 30rpx;
    display: flex;
    align-items: center;
    padding: 30rpx 0;
}

.address-sec .icon-box {
    width: 30rpx;
    align-self: flex-start;
    overflow: hidden;
    margin-right: 35rpx;
}

.address-sec .icon-box .icon {
    width: 30rpx;
    height: 30rpx;
}

.address-sec  .right-box {
    width: 620rpx;
}

.address-sec  .right-box .name-tel {
    font-size: 28rpx;
    color: #000;
    margin-bottom: 20rpx;
}

.address-sec  .right-box .text {
    font-size: 24rpx;
    color: #888;
    line-height: 36rpx;
    height: 72rpx;
    overflow: hidden;
}

.wuliu-box {
    width: 720rpx;
    margin-left: 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    align-items: center;
    padding: 30rpx 0;
}

.wuliu-box .icon-box {
    width: 40rpx;
    height: 40rpx;
    overflow: hidden;
    margin-right: 31rpx;
    align-self: flex-start;
}

.wuliu-box .icon-box .icon {
    width: 40rpx;
    height: 40rpx;
}

.wuliu-box .arrow-right {
    width: 15rpx;
    height: 24rpx;
}

.wuliu-box .arrow-right .arrow {
    width: 15rpx;
    height: 24rpx;
}

.wuliu-box .right-text {
    width: 575rpx;
    margin-right: 30rpx;
}

.wuliu-box .right-text .order-number {
    font-size: 28rpx;
    color: #000;
    margin-bottom: 14rpx;
}

.wuliu-box .right-text .wuliu-text, .wuliu-box .right-text .wuliu-date {
    font-size: 24rpx;
    color: #888;
    line-height: 36rpx;
}

.goods-list {
    width: 100%;
    background-color: #fff;
	margin-bottom:24rpx;
}

.goods-list .list-title {
    font-size: 28rpx;
    color: #000;
    padding: 16rpx 24rpx;
}
.avaImgs{
    width: 50rpx;
    height: 50rpx;
    overflow: hidden;
    border-radius: 50%;
    background-color: #f3f5f7;
    margin-right: 20rpx;
}

.goods-info_box{
    width: 100%;
	overflow: hidden;
    border-top: 2rpx solid #eee;
}
.goods-img-container {
	overflow: hidden;
	padding: 30rpx;
	margin-bottom: 2rpx;
	box-sizing: border-box;
}

.goods-info  .goods-des {
    width: 540rpx;
    height: 78rpx;
    line-height: 39rpx;
    font-size: 26rpx;
    color: #000;
    overflow: hidden;
}

.goods-img-container .img-box {
    width: 170rpx;
    height: 118.56rpx;
    background-color: #f7f7f7;
    overflow: hidden;
	float: left;
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
}
.goodsDetail_info{
	overflow: hidden;
	float: right;
	width: calc(100% - 194rpx);
	line-height: 1.5;
	position: relative;
	height: 118rpx;
}
.goodsDetail_info .goods_name{
	padding-right: 66rpx;
	position: relative;
	font-size: 26rpx;
	margin-bottom: 6rpx;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.goodsDetail_info .goods_name .goods_num{
	font-size: 24rpx;
	color: #666;
	position: absolute;
	top: 0;
	right: 0;
}
.goodsDetail_info .unimport{
	font-size: 24rpx;
	color: #999;
}
.goodsDetail_info .goods_price{
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 28rpx;
    line-height: 1.2;
    font-weight:600;
}
.goods-img-container .img-box .goods-img {
	width: 100%;
	display: block;
    height: 100%;
}

.peisong-way {
    width: 100%;
    background-color: #fff;
    margin-bottom: 20rpx;
}

.peisong-way .row-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 24rpx 30rpx;
    font-size: 26rpx;
    line-height: 1.6;
}

.goods-info {
    width: 100%;
    background-color: #fff;
    margin-bottom: 20rpx;
}

.goods-info .row-box {
    width: calc(100% - 30rpx);
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    box-sizing: border-box;
    padding: 30rpx 30rpx 30rpx 0;
    margin-left: 30rpx;
    border-bottom: 1px solid #f5f5f5;
    font-size: 26rpx;
    color: #000;
}
.goods-info .row-box .row-label {
    width: calc(100% - 140rpx);
}

.goods-info .row-box .right-text {
    text-align: right;
}

.goods-info .row-box .right-text.r_color{
    font-weight: 600;
}

.order_info{
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 16rpx 30rpx;
    margin-bottom: 20rpx;
}

.order_info .li_box{
    line-height: 1.6;
    padding: 10rpx 0;
    font-size: 26rpx;
    color: #999; 
}

.order_info .li_box .info_data{
    display: inline-block;
    color: #000;
}

.jiesuan-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #eee;
    background-color: #fff;
}

.jiesuan-box .to-pay-btn {
    width: 250rpx;
    text-align: center;
    height: 100%;
    line-height: 100rpx;
    background-color: #fa2f2e;
    font-size: 32rpx;
    color: #fff;
    border-radius: 0;
}

.jiesuan-box  .left-price {
    display: flex;
    width: 500rpx;
    justify-content: flex-start;
    line-height: 100rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    box-sizing: border-box;
}

.jiesuan-box .total {
    text-align: right;
}

.jiesuan-box .total .total_price {
    color: #fa2f2e;
    font-weight: 600;
    display: inline-flex;
}

.logistics_btn{
	padding: 24rpx 24rpx 24rpx 30rpx;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	font-size: 26rpx;
	line-height: 1.6;
	background-color: #fff;
	margin-bottom: 20rpx;
}
.l_box{
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0 28rpx 0 64rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* background: url(http://xcx.soowin.com/images/logis_icon.png) no-repeat left top, url(http://xcx.soowin.com/images/arrow-right.png) no-repeat right center;
	background-size: 46rpx auto, 16rpx auto; */
    background: url(http://xcx.soowin.com/images/logis_icon.png) no-repeat left top;
	background-size: 46rpx auto;
}
.detail_btn-row-box{
    height: 104rpx;
}
.detail_btn-row{
	width: 100%;
	height: 104rpx;
	padding: 18rpx 30rpx;
	box-sizing: border-box;
	overflow: hidden;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #fff;
	display: flex;
	justify-content: flex-end;
	font-size: 26rpx;
    align-items: center;
    box-shadow: 0rpx -2rpx 16rpx rgba(0, 0, 0, 0.04);
}
.detail_btn-row .btn{
    box-sizing: border-box;
    text-align: center;
    border-radius: 6rpx;
    margin-left: 20rpx;
	border: 1rpx solid #ccc;
    padding: 16rpx 24rpx;
}
.detail_btn-row .topay-btn{
	border-color: #E05F0B;
	background-color: #E05F0B;
    color: #fff;
}
.footerMargin{
    margin-bottom: 104rpx;
}

// 备注
.remark{width: 100%;overflow: hidden;background: #fff;padding: 30rpx; box-sizing: border-box;margin-top: 3rpx;}
// 备注-end
</style>