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

<template>
	<view class="container">
	    <view class="status-box">
	        <view class='status_tap_box' style="position: relative;">
	            <view @tap="statusTap" class="status-label" v-for="(item,index) in statusType" :key="index" :class="item[0] == currentType ? 'active' : ''" :data-index="item[0]">
	                {{item[1]}} <!-- {{index && (index+1) != statusType.length ? item[2] ? '(' + item[2] + ')' : '(0)' : ''}} -->
	            </view>
	        </view>
	    </view>
	    <not-goods v-if="haveGoods" textStr="抱歉！暂无相关订单" />
	    <view class="order-list" v-if="orderList && orderList.length > 0">
	        <view v-for="(li,index) in orderList"  :key="index">
	            <!-- 未付款 -->
	            <view class="a-order">
	                <view class='overflow' :data-id="li.id">
	                    <view class="list-title flex_r flex_ac flex_jb ellipsis">
	                        <view class="flex_r flex_ac">
	                            <view class="imgs_bar avaImgs">
	                                <image class="image" :src="pt.platFormLogo" mode="widthFix" />
	                            </view>{{pt.platFormName}}
	                        </view>
	                        <view class="fz_text r_color" v-if="li.data.assembleType != 1 && li.data.assembleStatus == 1">正在拼团中</view>
	                        <view class="fz_text" v-else>{{li.data.statusMsg}}</view>
	                    </view>
	                    <view class="goods-info flex_r flex_ac flex_jb" :data-type="li.type" :data-id="li.data.orderDetailId" @tap="toDetails(li)">
	                        <view class="goods-info-bar overflow flex_r flex_ac">
	                            <block v-if="li.type == 1 || li.data.orderTypes == 4">
	                                <view class="imgs_bar img-box">
	                                    <image :src="li.data.image" mode='' class="goods-img"></image>
	                                </view>
	                                <view class='goods_name ellipsis2'>{{li.data.goodsName || ''}}</view>
	                            </block>
	                            <block v-else>
	                                <scroll-view class="goods-img-container" scroll-x="true">
	                                    <view class="imgs_bar img-box" v-for="(item,ind) in li.data.imgs" :key="ind">
	                                        <image :src="item" mode='' class="goods-img"></image>
	                                    </view>
	                                </scroll-view>
	                            </block>
	                        </view>
	                        <view class='goodsDetail_info'>
	                            <view class='goods_price r_color' v-if="li.data.orderTypes!=5">￥<text class="r_color">{{li.data.totalPrice}}</text></view>
								<view class='goods_price r_color' v-if="li.data.orderTypes==5"><text class="r_color">{{li.data.integral}}</text>积分</view>
	                            <view class='unimport'>共{{li.data.buyCount}}件</view>
	                        </view>
	                    </view>
	                </view>
	                <view class="price-box flex_r flex_ac">
						<view class="ptz" v-if="li.data.orderTypes == 7">
							拼团金：{{li.data.totalAccountSpell}}
						</view>
	                    <view class="btn cancel-btn" :data-type="li.type" :data-types="li.data.orderTypes" :data-id="li.data.orderDetailId" @tap="toCancel" v-if="li.data.status == 2">取消订单</view>
	                    <view class="btn topay-btn" :data-id="li.data.orderDetailId" :data-index="index" :data-ojsType="li.data.ojsType" @tap="toPay" v-if="li.data.status == 2">立即支付</view>
	                    
						<block v-else>
							<block v-if="(li.data.status == 4 || li.data.status == 5) && li.returnType == 1 && li.data.orderTypes!=2">
								<view class="btn" :data-orderno="li.data.orderNo" v-if="li.data.assembleStatus==2">拼团成功</view>
								<view
									v-if="li.refundId"
								    class="btn"
									:class="li&&li.refundId ? 'topay-btn':'cancel-btn'"
								    :data-type="li.type"
								    :data-id="li.data.orderDetailId"
								    :data-reid="li.refundId"
								    @tap="toRefundDetails(li)"
								>
								    退款中
								</view>
								<view
									v-else
								    class="btn"
									:class="li&&li.refundId ? 'topay-btn':'cancel-btn'"
								    :data-type="li.type"
								    :data-id="li.data.orderDetailId"
								    :data-reid="li.refundId"
								    @tap="toRefund(li)"
								>
								    退货/退款
								</view>
							</block>
	                        <view class="btn cancel-btn" v-if="li.data.status != 2" :data-type="li.type" :ata-id="li.data.orderDetailId" @tap="toDetail(li)">查看订单</view>
	                        <view class="btn topay-btn" :data-id="li.data.orderDetailId" :data-status="li.data.status" :data-type="li.type" @tap="toTake" v-if="li.data.status == 4 || li.data.status == 3">确认收货</view>
							<view class="btn topay-btn" :data-type="li.type" :data-id="li.data.orderDetailId" :data-no="li.data.orderNo" @tap="toCommen" v-if="li.comType && li.comType == 1">去评价</view>
						</block>
	                </view>
	            </view>
	            <!-- 未付款 end -->
	        </view>
	    </view>
	    <view class="loading-indicator" :class="loadingMoreHidden ? 'opacity' : ''">{{loadingTip}}</view>
	</view>
</template>

<script>
var reqApi = new ReqApi();
var toPayOpre = new ToPayOpre();
var app = getApp();
var appEv = app.$vm.$options;
var page = 1;
import notGoods from '@/components/not-goods/index'
// import terraceTagbar from '@/components/terrace-tagbar/index'
// import { ReqApi, ToPayOpre } from "../../utils/reqTools.js";
	export default {
		components:{
			notGoods,
			// terraceTagbar
		},
		data() {
			return {
				statusType: [
				    ["1", "全部"],
				    ["2", "待付款"],
				    ["3", "待发货"],
				    ["4", "待收货"],
				    ["5", "已收货"]
				],
				orderList: [],
				currentType: "1",
				haveGoods: false,
				loadingMoreHidden: true,
				loadingTip: '没有更多了',
				userId:"",
				isweixin:'',
				pt:{}
			};
		}, 
		onLoad: function (options) {
			var that = this;
			this.currentType=options.status ? options.status : 1
		},
		onShow:function(){
			let that=this
			const userId = app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId ? app.globalData.systemUserInfo.userId : '';
			if (!userId || userId == '' || userId==undefined) {
				// that.showAuth=true
				appEv.authorizeUserInfo(res=>{
					if(res){
						that.clearData()
						that.loadData()
					}
				},true)
			}else{
				that.clearData()
				that.loadData()
			}
		},
		methods:{
			returnBtn:function(){
				uni.navigateBack({})
			},
			clearData(isclearCat = true, callBack){
			    page = 1;
			    this.orderList=[]
			    this.haveGoods=false
			    if (callBack){
			        callBack();
			    }
			},
			loadData: function() {
			    if (page == -1){
			        return;
			    }
			    uni.showLoading({
			        title: '加载中…',
			        mask: true
			    });
			    var data = {
			        page,
			        status: this.currentType == 1 ? '' : this.currentType
			    };
			    
			    var orderList = reqApi.pendingPayment(data);
			    var that = this;
			    
			    if (orderList) {
			        orderList.then(res => {
			            setTimeout(() => {
			                uni.hideLoading();
			            }, 100)
			            uni.stopPullDownRefresh();
			            var resData = res.data.mallGoods;
			            if (resData && resData.length <= 0) {
			                if (page <= 1) {
			                    that.haveGoods=true
			                    that.loadingMoreHidden=true
			                } else {
			                    that.loadingMoreHidden=false
			                }
			            }
			
			            if (res.data.status == 200) {
			                var obj = res.data.data;
			                
			                // that.arrangeData(obj);
			                
			                if (resData && resData.length > 0) {
			                    var orderList = that.orderList;
			                    var list = orderList.concat(resData);
								that.pt=res.data.platform
			                    that.orderList=list
			                    that.haveGoods=false
			                    that.loadingMoreHidden=true
			                }
			            } else {
			                appEv.errTips(res.data.msg || '');
			                if (res.data.status == 999) {
			                    // that.arrangeData(res.data.data);
			                    page = -1;
			                    that.loadingMoreHidden=false
			                }
			            }
			        })
			    }
			},
			toDetails(data){
				if(data.data.orderTypes == 4){
					uni.navigateTo({
					    url: '/pages/szw-order-details/index?id=' + data.data.orderDetailId + '&type=1',
					})
				}else{
					uni.navigateTo({
					    url: '/pages/szw-order-details/index?id=' + data.data.orderDetailId + '&type=' + data.type,
					})
				}
			},
			toDetail:function(data){
				if(data.data.orderTypes == 4){
					uni.navigateTo({
					    url: '/pages/szw-order-details/index?id=' + data.data.orderDetailId + '&type=1',
					})
				}else{
					uni.navigateTo({
					    url: '/pages/szw-order-details/index?id=' + data.data.orderDetailId + '&type=' + data.type,
					})
				}
			},
			toRefund(data){
			    uni.navigateTo({
			        url: '/pages/order-refund/index?id=' + data.data.orderDetailId + '&type=' + data.type,
			    })
			},
			toRefundDetails(data){
			    uni.navigateTo({	
			        url: '/pages/order-refund-details/index?id=' + data.refundId,
			    })
			},
			// 立即支付
			toPay(e){
				var orderDetailIds = e.currentTarget.dataset.id;
				var index = e.currentTarget.dataset.index;
				var price = this.orderList[index].data.totalPrice;
				var type = this.orderList[index].data.patType;
				var teaIntegral = this.orderList[index].data.totalTeaInt;
				var pfIntegral = this.orderList[index].data.totalPfInt;
				var xfIntegral = this.orderList[index].data.totalXfInt;
				var totalAccount = this.orderList[index].data.totalAccount;
				var orderNo = this.orderList[index].data.orderNo;
				let data = {
					orderDetailIds:orderDetailIds,
					types:1,
					price:price,
					account:totalAccount,
					teaIntegral:teaIntegral,
					pfIntegral:pfIntegral,
					xfIntegral:xfIntegral,
					zfType:type,
					ojsType:e.currentTarget.dataset.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 || '支付失败');
			            }
			        });
			    }
			},
			// 取消订单
			toCancel(e){
			    var isTuan = e.currentTarget.dataset.tuan;
			    if (isTuan){
			        uni.showModal({
			            title: '温馨提示',
			            content: '发起拼单24小时后，若未拼单成功将自动取消订单并退款哦~',
			            showCancel: false,
			            confirmText: "知道了",
			            confirmColor: "#f02f2f"
			        })
			    }else{
					var orderDetailId = e.currentTarget.dataset.id, type = e.currentTarget.dataset.type;
					let types =e.currentTarget.dataset.types;
					console.log(types)
					if(types == 4){
						type = 1;
					}
			        const info = reqApi.cancelOrder({ orderDetailId, type });
			        var that = this;
			        if (info) {
			            info.then(res => {
			                if (res.data.status == 200) {
			                    uni.showToast({
			                        title: res.data.msg || '订单已取消',
			                        duration: 1200,
			                        mask: true
			                    })
			                    setTimeout(function () {
			                        that.clearData(false, () => {
			                            that.loadData();
			                        });
			                    }, 1200);
			                } else {
			                    appEv.errTips(res.data.msg || '取消失败');
			                }
			            });
			        }
			    }
			},
			// 确认收货
			toTake(e){
				let type = e.currentTarget.dataset.type;
			    var that = this;
			    uni.showModal({
			        content: '亲，“确定收货”代表着本订单的交付流程已经完成，不再支持任何形式的退换货。',
			        confirmText: "确认收货",
			        confirmColor: "#fa2f2e",
			        cancelText: "取消",
			        cancelColor: "#bbb",
			        success(res) {
			            if (res.confirm) {
			                var orderDetailId = e.currentTarget.dataset.id
			                const info = reqApi.takeOrder({ orderDetailId:orderDetailId, type:type });
			                if (info) {
			                    info.then(res => {
			                        if (res.data.status == 200) {
			                            appEv.errTips(res.data.msg);
			                            setTimeout(function () {
			                                that.clearData(false, () => {
			                                    that.loadData();
			                                });
			                            }, 1200);
			                        } else {
			                            appEv.errTips(res.data.msg || '收货失败');
			                        }
			                    });
			                }
			            } else if (res.cancel) {
			                // console.log('用户点击取消');
			            }
			        }
			    })
			},
			// 整理数据
			arrangeData(data = appEv.parameter("data")){
			    var statusType = this.data.statusType;
			    statusType[0][2] = data.wholeCount;
			    statusType[1][2] = data.AlreadyPaymentCount;
			    statusType[2][2] = data.AlreadyCompleteCount;
			    statusType[3][2] = data.AlreadySettlementCount;
			    this.statusType=statusType
			},
			//菜单切换
			statusTap: function(e) {
			    //重置数据
			    var curType = e.currentTarget.dataset.index;
			    this.currentType=curType
			    this.clearData(false, this.loadData);
			},
			// 跳转拼团分享页面
			toTuanShare(e){
			    uni.navigateTo({
			        url: '/pages/tuan-share-info/index?orderNo=' + e.currentTarget.dataset.orderno
			    })
			},
			// 加评价
			toCommen(e) {
				let id = e.currentTarget.dataset.id
				let no = e.currentTarget.dataset.no
				let orderType = e.currentTarget.dataset.type
				uni.navigateTo({
					url: '/pages/add-goods-commen/index?orderId=' + id + '&orderNo=' + no + '&orderType=' + orderType
				})
			},
			pageBack:function(){
				uni.reLaunch({
				    url: '/pages/my/index'
				});
			}
		},
		//上拉加载事件
		onReachBottom: function () {
		    if (page != -1) {
		        var that = this;
		        setTimeout(function () {
		            // 为页数迭加1
		            ++page;
		            that.loadData();
		        }, 800);
		    }
		},
		// 下拉刷新
		onPullDownRefresh: function () {
		    var that = this;
		    that.clearData(false, () => {
		        that.loadData();
		    });
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f3f5f7;
}
.container {
    width: 100%;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.overflow{
	overflow: hidden;
}
.r_color{
	color: #fa2f2e;
}
.loading-indicator{
	width: 100%;
	text-align: center;
	font-size: 24rpx;
	color: #666;
	margin: 20rpx 0;
	line-height: 1.5;
}
.opacity{
	opacity: 0;
	display: none;
}
.terraceComp{
    height: 84rpx;
}
.terraceComp_fix{
    position: fixed;
    top: -12rpx;
    left: 0;
    right: 0;
    z-index: 15;
}
.status-box {
    width: 100%;
    height: 94rpx;
}
.status_tap_box{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	overflow: hidden;
	line-height: 88rpx;
	display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
	z-index: 300;
	box-shadow: 0rpx 8rpx 8rpx rgba(0,0,0,0.025);
}
.status-box .status-label {
	flex-grow: 1;
    height: 100%;
    text-align: center;
    font-size: 28rpx;
    color: #353535;
    box-sizing: border-box;
    position: relative;
    border-bottom: 6rpx solid transparent;
}

.status-box .status-label.active {
    color: #E05F0B;
    border-bottom-color: #E05F0B;
}

.order-list {
    width: 100%;
	overflow: hidden;
}

.order-list .a-order {
    width: 100%;
    background-color: #fff;
    margin-top: 24rpx;
}

.order-list .a-order .order-date {
    padding: 16rpx 30rpx 20rpx;
	line-height: 40rpx;
    font-size: 26rpx;
    color: #000;
	overflow: hidden;
}

.order-list .a-order .order-date .red {
    font-size: 26rpx;
    color: #fa2f2e;
}
.order-list .a-order .order-date text.r_color{
    font-weight: 600;
}

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

.goods-info{
    width: 100%;
    line-height: 39rpx;
    font-size: 26rpx;
    color: #000;
    overflow: hidden;
	padding: 30rpx;
	background-color: #f3f5f7;
	box-sizing: border-box;
}
.goods-info-bar{
    width: calc(100% - 190rpx);
}
.goods-info .img-box {
    width: 172rpx;
    height: 120rpx;
    overflow: hidden;
    background-color: #fff;
    border-radius: 12rpx;
    margin-right: 20rpx;
}
.goods-info .img-box .goods-img {
	width: 100%;
	display: block;
    height: 100%;
}
.goods-img-container {
	overflow: hidden;
	box-sizing: border-box;
    width: 100%;
    height: 172rpx;
    white-space: nowrap;
}
.goods-img-container .img-box{
    display: inline-block;
}
.goods-img-container .img-box:last-of-type{
    margin-right: 0;
}
.goods-info .goods_name{
    width: calc(100% - 192rpx);
	font-size: 28rpx;
    font-weight: 500;
    color: #121212;
}
.goodsDetail_info{
	overflow: hidden;
	width: 180rpx;
	line-height: 1.5;
    text-align: right;
}
.goodsDetail_info .unimport{
	font-size: 24rpx;
	color: #999;
}
.goodsDetail_info .goods_price{
	font-size: 26rpx;
    line-height: 1.2;
    font-weight:600;
    margin-bottom: 10rpx;
}
.goodsDetail_info .goods_price text{
    font-size: 36rpx;
}

.order-list .a-order .price-box {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 16rpx 30rpx;
    display: flex;
	justify-content: flex-end;
    font-size: 26rpx;
}

.a-order .price-box .btn {
    box-sizing: border-box;
    text-align: center;
    border-radius: 40rpx;
    margin-left: 20rpx;
	border: 1rpx solid #ccc;
    padding: 12rpx 24rpx;
}
.order-list .a-order .price-box .total-price {
    color: #E05F0B;
}

.a-order .price-box .topay-btn {
    border-color: #E05F0B;
    color: #E05F0B;
}

.a-order .price-box .r_topay-btn {
    border-color: #E05F0B;
    background-color: #E05F0B;
    color: #fff;
}

//拼团金
.flot_left{
	// float: left;
	margin-left:auto;
}
.ptz{
	color: #18BB88;font-size: 30rpx;
	position: absolute;
	left: 30rpx;
}
</style>