qjd-user-uniapp/pagesOrder/index.vue

<template>
	<view class="container">
		<view style="padding-bottom:68upx;">
			<view>
				<u-tabs :list="tabList" :is-scroll="false" bg-color="#F7F7F7" active-color="#FF7800" :current="type" @change="orderStateChange"></u-tabs>
			</view>
			<view class="order-list-box">
				<view v-if="list.length > 0">
					<view class="item" v-for="(item, index) in list" :key="item.id" @click="itemTap(item)">
						<view class="order-list-top">
							<view class="top-l" @click.stop="goShop(item.storeId)" v-if="isShowShop">
								<image src="/images/orderList-shop-img.png" class="shop-img"></image>
								<text class="shop-name">{{item.storeName}}</text>
								<image src="/images/arrow-right.png" class="arrow-img"></image>
							</view>
							<view class="top-l" v-else>
								
							</view>
							<!--订单状态： 退款中 交易关闭 待付款 待发货 待收货 已完成-->
							<view class="order-status" v-if='item.orderStatus==1'>待付款</view>
							<view class="order-status" v-else-if='item.orderStatus==2'>待发货</view>
							<view class="order-status" v-else-if='item.orderStatus==3'>待收货</view>
							<view class="order-status" v-else-if='item.orderStatus==4'>已完成</view>
							<view class="order-status" v-else-if='item.orderStatus==5'>交易关闭</view>
							<view class="order-status" v-else-if='item.returnType==1'>退款中</view>
						</view>
						<view class="order-info-box">
							<view class="order-info">
								<view class="order-info-item" v-for="(proItem, pIndex) in item.orderProductVOList" :key="proItem.id">
									<image :src="proItem.skuImg" class="product-img"></image>
									<view class="info-box">
										<text class="product-name">{{proItem.productName}}</text>
										<view class="product-sku">{{proItem.skuNameStr}}</view>
										<view class="price-sku-box">
										<view class="box-h">
											<text class="product-price"><text class="fuhao">￥</text>{{fenToYuan(proItem.sellPrice)}}</text>
											<text class="product-num">x {{proItem.buyNum}}</text>
											</view>
											<view v-if="proItem.commentStatus == 0" class="evaluate" @click.stop="evaluateTap(proItem,pIndex)">立即评价</view>
											<view v-if="proItem.commentStatus == 1 && proItem.additionalComment != null" class="evaluate2" @click.stop="evaluateTowTap(index)">追加评价</view>
										</view>
									</view>
								</view>
								<view class="total-price-box">总价¥{{fenToYuan(item.orderSum)}}
									<block v-if="item.paySum > 0">
										，实付¥{{fenToYuan(item.paySum)}}
									</block>
								</view>
							</view>
		
							<view class="order-btn-box">
								<text class="btn l" v-if='item.orderStatus==1' @click.stop="cancelOrder(item,index)">取消订单</text>
								<text class="btn r" v-if='item.orderStatus==1' @click.stop="payOrder(item,index)">立即付款</text>
								<text class="btn l" v-if='(item.orderStatus==2 || item.orderStatus==3 || item.orderStatus==4) && item.returnType == -1' @click.stop="applyTap(item,index)" >申请售后</text>
								<text class="btn l" v-if='item.logisticsNum && item.shipperCode' @click.stop="goLogisticsTap(item.shipperCode,item.logisticsNum)">查看物流</text>
								<text class="btn r" v-if='item.orderStatus==3' @click.stop="confirmReceiptTap(item,index)">确认收货</text>
								<text class="btn l" v-if='item.orderStatus==5' @click.stop="delOrder(item,index)">删除订单</text>
								<text class="btn l" v-if='item.returnType==1' @click.stop="refundDetail(item)">退款详情</text>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="emptyOrder-box flex-items-plus flex-column">
					<image class="emptyOrder-img" src=""></image>
					<label class="font-color-999 fs26 mar-top-30">你还没有订单哦～</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// const NET = require('../../utils/request')
	// const API = require('../../config/api')
	// var jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				type: 0,
				pageIndex: 1,
				pageSize: 50,
				list: [],
				scrollLeft: 0,
				isShowShop: false,
				tabList: [
					{
					name: '全部'
					},{
					name: '待付款'
					},{
					name: '待发货'
					},{
					name: '待收货'
					},{
					name: '待评价'
					},
				],
			}
		},
		onLoad(options) {
			this.type = options.type
			// this.getListData(options.type)
			// this.getGetStoreSwitch()
		},
		methods: {
			//退款详情
			refundDetail(item){
				uni.navigateTo({
					url:'refundDetails?item='+JSON.stringify(item)
				})
			},
			orderStateChange(index) {
				this.type = index;
				this.getListData(index)
			},
			getGetStoreSwitch() {
			    NET.request(API.GetStoreSwitch).then(res => {
			        this.isShowShop = res.data
			    })
			},
			// 订单列表数据
			getListData(type) {
			    uni.showLoading({
			      title: '加载中...',
			    })
			    NET.request(API.FindOrderList, {
			      orderStatus: type,
			      pageIndex: this.pageIndex,
			      pageSize: this.pageSize
			    }, 'POST').then(res => {
					
			      uni.hideLoading()
			        if (this.pageIndex == 1) {
			          uni.stopPullDownRefresh()
			          this.list = [];
			        }
			        let list = res.data.orderVOList
			        this.list = this.list.concat(list)
					console.log(res.data,8889999999999)
			    }).catch(res => {
			      uni.hideLoading()
			    })
			},
			cancelOrder(item,index) {
			    uni.showModal({
			      title: '温馨提示',
			      content: '您确定要取消该订单吗？',
			      confirmText: '确定取消',
			      cancelText: '点错了',
			      success: res => {
			        if (res.confirm) {
			          this.doCancel(item, index)
			        } else if (res.cancel) {
			          console.log('用户点击取消')
			        }
			      }
			    })
			},
			doCancel(item, index) {
			    uni.showLoading({
			      title: '提交中...',
			    })
			    NET.request(API.CancelOrder, {
			      id: item.id
			    }, 'POST').then(res => {
			      uni.hideLoading()
			      uni.showToast({
			        title: '取消成功',
			      })
			      setTimeout(() => {
			        this.list[index].orderStatus = 5
			        this.list = this.list
			      }, 1500);
			
			    }).catch(res => {
			      uni.hideLoading()
			    })
			},
			goLogisticsTap(shipperCode,logisticsNum){
			    uni.navigateTo({
					url:'logisticsInfo?shipperCode='+shipperCode+'&logisticsNum='+logisticsNum
			    })
			},
			confirmReceiptTap(item, index) {
			    uni.showModal({
			      title: '温馨提示',
			      content: '确定您已经收到货物，否则会造成财产损失',
			      confirmText: '确定收到',
			      cancelText: '点错了',
			      success: res => {
			        if (res.confirm) {
			          this.doConfirm(item, index)
			        } else if (res.cancel) {
			          console.log('用户点击取消')
			        }
			      }
			    })
			},
			doConfirm(item, index) {
			    NET.request(API.ConfirmReceive, {
			      id: item.id
			    }, 'POST').then(res => {
			      uni.hideLoading()
			      uni.showToast({
			        title: '确认成功',
			      })
			
			      this.list[index].orderStatus = 4
			      this.list = this.data.list
			    }).catch(res => {
			      uni.hideLoading()
			    })
			},
			delOrder(item, index) {
			    uni.showModal({
			      title: '温馨提示',
			      content: '您确定要删除该订单吗？',
			      confirmText: '确定删除',
			      cancelText: '点错了',
			      success: res => {
			        if (res.confirm) {
			          this.doDel(item, index)
			        } else if (res.cancel) {
			          console.log('用户点击取消')
			        }
			      }
			    })
			},
			doDel(item, index) {
			    uni.showLoading({
			      title: '提交中...',
			    })
			    NET.request(API.DelOrder, {
			      id: item.id
			    }, 'POST').then(res => {
			      uni.hideLoading()
			      uni.showToast({
			        title: '删除成功',
			      })
			      setTimeout(() => {
			        this.list.splice(index, 1)
			        this.list = this.list
			      }, 1500);
			
			    }).catch(res => {
			      uni.hideLoading()
			    })
			},
			// 跳转订单详情
			itemTap(item) {
			    uni.navigateTo({
					url:'orderDetails?orderId='+item.id
			    })
			},
			goShop(id) {
			    if (!this.isShowShop) {
			      return
			    }
			    uni.navigateTo({
					url:'orderDetails?id='+id
			    })
			
			},
			fenToYuan(value) {
				if(!value){
				return '0.00'
				}
				  value = value/100.0;
				return value.toFixed(2) // 此处2为保留两位小数，保留几位小数，这里写几
			},
			applyTap(item, index) {
			    // 申请售后
			    uni.navigateTo({
					url: 'afterSaleApply?item=' + JSON.stringify(item)
			    })
			},
			payOrder(item, index) {
			    uni.showLoading({
			      title: '加载中...',
			    })
			    NET.request(API.ContinuePay, {
			      orderCode: item.orderCode
			    }, 'POST').then(res => {
			        uni.hideLoading()
					this.payRequest(res.data)
			    }).catch(res => {
			      uni.hideLoading()
			    })
			},
			//H5支付
			// payRequest(payInfo){
			// 	jweixin.config({
			// 		debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			// 		appId:'unif0713a10bbae8732', // 必填，公众号的唯一标识
			// 		timestamp:payInfo.timeStamp, // 必填，生成签名的时间戳
			// 		nonceStr:payInfo.nonceStr, // 必填，生成签名的随机串
			// 		signature:payInfo.paySign, // 必填，签名，见附录1
			// 		jsApiList: ['chooseuniPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			// 	});
			// 	jweixin.ready(function() {
			// 		jweixin.checkJsApi({
			// 			jsApiList: ['chooseuniPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
			// 			success: function(res) {
			// 				console.log('checkjsapi Success')
			// 				console.log(res);
			// 			},
			// 			fail:function(res) {
			// 				console.log('res')
			// 				console.log(res);
			// 			}
			// 		});
			// 		jweixin.chooseuniPay({
			// 			timestamp: payInfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
			// 			nonceStr: payInfo.nonceStr, // 支付签名随机串，不长于 32 位
			// 			package: payInfo.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
			// 			signType: payInfo.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
			// 			paySign:payInfo.paySign, // 支付签名
			// 			success:function(res) {
			// 				// 支付成功后的回调函数
			// 				console.log('paysuccess')
			// 				console.log(res)
			// 				// uni.redirectTo({
			// 				//     url: 'index'
			// 				// });
			// 				setTimeout(() => {
			// 				  uni.navigateBack({
			// 				    delta: 2
			// 				  })
			// 				}, 1500)
			// 			},
			// 			cancel: function(r) {
			// 			},
			// 			fail:function(res) {
			// 				console.log(res)
			// 			}
			// 		});
			// 	});
			// 	jweixin.error(function(res) {
			// 		console.log('error')
			// 		console.log(res)
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: '支付失败了',
			// 			duration: 4000
			// 		});
			// 	});
			// },
			//立即评论
			evaluateTap(item, index){
			    uni.setStorageSync('evaluateItem', item)
			    uni.setStorageSync('pIndex', index)
			    uni.navigateTo({
			      url: '/pagesGoods/goodsModule/evaluate',
			    })
			},
			evaluateTowTap(index){
				console.log(this.list[index].orderProductVOList[0],454545)
			  uni.setStorageSync('addCommentVOList', this.list[index].orderProductVOList[0]);
			  uni.navigateTo({
			  	url:'/pagesGoods/goodsModule/addEvaluate?type=1'
			  })
			},
		}
	}
</script>

<style lang="scss">
	page {
	  width: 100%;
	  height: 100%;
	  background: #f6f6f6;
	}
	
	.nav-box-box {
	  height: 88upx;
	  background: #f6f6f6;
	  white-space: nowrap;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  z-index: 10;
	}
	
	.nav-box-box .item {
	  display: inline-view;
	  padding: 0 30upx;
	  box-sizing: border-box;
	  height: 88upx;
	  text-align: center;
	  line-height: 88upx;
	  font-size: 30upx;
	  color: #666;
	  font-weight: 500;
	}
	
	.nav-box-box .item.active text {
	  display: inline-view;
	  color: #ff7911;
	  box-sizing: border-box;
	  height: 88upx;
	  border-bottom: 2px solid #ff7911;
	}
	
	.order-list-box {
	  padding: 20upx 30upx 0;
	  box-sizing: border-box;
	}
	
	.order-list-box .item {
	  margin-bottom: 20upx;
	  background: #fff;
	  border-radius: 10upx;
	}
	
	.order-list-top {
	  height: 96upx;
	  padding: 0 30upx;
	  box-sizing: border-box;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: space-between;
	  border-bottom: 1px solid #eee;
	}
	
	.top-l {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	
	.shop-img {
	  width: 36upx;
	  height: 36upx;
	  margin-right: 10upx;
	}
	
	.shop-name {
	  font-size: 30upx;
	  color: #333;
	  font-weight: bold;
	}
	
	.arrow-img {
	  margin-left: 15upx;
	  width: 24upx;
	  height: 24upx;
	}
	
	.order-status {
	  font-size: 28upx;
	  color: #ff7911;
	  font-weight: 500;
	}
	
	.order-info-box {
	  padding: 0 30upx;
	  box-sizing: border-box;
	}
	
	.order-info {
	  border-bottom: 1px solid #eee;
	}
	
	.order-info-item {
	  display: flex;
	  flex-direction: row;
	  padding: 20upx 0;
	}
	
	.product-img {
	  width: 180upx;
	  height: 180upx;
	  border-radius: 10upx;
	  margin-right: 30upx;
	}
	
	.info-box {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	
	.product-name {
	  font-size: 26upx;
	  color: #333;
	  height: 68upx;
	  line-height: 34upx;
	  display: -webkit-box;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  word-break: break-all;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	}
	
	.price-sku-box {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	
	.product-sku {
	  font-size: 24upx;
	  color: #999;
	}
	
	.product-price {
	  font-size: 28upx;
	  color: #333;
	  font-weight: 400;
	}
	
	.product-price .fuhao {
	  font-size: 28upx;
	}
	
	.product-num {
	  display: inline-view;
	  font-size: 28upx;
	  margin-left: 20upx;
	  color: #999;
	}
	.total-price-box{
	  font-size: 26upx;
	  color:#333;
	  text-align: right;
	  padding: 30upx 0;
	}
	.order-btn-box {
	  padding: 20upx 0;
	  display: flex;
	  flex-direction: row;
	  justify-content: flex-end;
	}
	
	.order-btn-box .btn {
	  display: inline-view;
	  width: 150upx;
	  height: 56upx;
	  border-radius: 28upx;
	  text-align: center;
	  line-height: 56upx;
	  font-size: 26upx;
	  color:#333;
	  margin-left: 20upx;
	}
	.evaluate{
	  height: 56upx;
	  border-radius: 28upx;
	  text-align: center;
	  line-height: 56upx;
	  font-size: 26upx;
	  padding: 0 30upx;
	  border: 1px solid #FF7911;
	  color: #FF7911;
	}
	.evaluate2{
	  height: 56upx;
	  border-radius: 28upx;
	  text-align: center;
	  line-height: 56upx;
	  font-size: 26upx;
	  padding: 0 30upx;
	  border: 1px solid #BBBBBB;
	  color: #333;
	}
	.order-btn-box .btn.l {
	  border: 1px solid #BBBBBB;
	  color: #333;
	}
	
	.order-btn-box .btn.r {
	  border: 1px solid #FF7911;
	  color: #FF7911;
	}
	.emptyOrder-box{
		margin-top: 70upx;
		.emptyOrder-img{
			width: 270upx;
			height: 270upx;
		}
	}
</style>