meishidaYH/msdYongHu/pages/OrderList/OrderList.vue

<template>
	<view class="">
		<customNav :shownav="false"></customNav>
		<view class="toptalbarCtv" :style="{top: statusBarHeight+'rpx'}">
			<view v-if="!iszhongwen" class="toptalbar">
				<view v-for="(item,index) in tableList">
					<view :class="index==toptableindex?'tableLab textfontB4 tableselect':'tableLab textfontS1'">
						<text @click="tableselct(item.value,index)">{{item.text}}</text>
					</view>
				</view>
			</view>
			<view v-if="iszhongwen" class="toptalbar">
				<view v-for="(item,index) in tableList">
					<view :class="index==toptableindex?'tableLabzh textfontB4 tableselect':'tableLabzh textfontS1'">
						<text @click="tableselct(item.value,index)">{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
	<view class="list">
		
		<view class="tips" :class="{ 'tips-ani': tipShow }">{{$t('index.liebiaogengxin')}}</view>
		
			<uni-list>

				<uni-list-item :border="true" class="uni-list-item--waterfall"  v-for="(item,index) in orderlist" :key="index" >
					<view slot="body" class="shop">
						<view v-if="item.store" class="item_content2">
							<view class="buyBT" style="margin-bottom: 10rpx;">
								<view class="buyBTL" @click="gotoDetail(item.ddId)">
									<netImage width="130" height="130" bradius="65" :mysrc="item.store.logo" mymode="scaleToFill"></netImage>
									<view class="contentColumn">
										<text class="dianpuming" >{{item.store.posName}}</text>
										<view class="item_content2" @click="gotoDetail(item.ddId)">
											<view class="buyBTL">
												<image class="xingxing" src="/static/images/time@3x.png" mode="widthFix"></image>
												<text class="pingfentext">{{item.cretim}}</text>
											</view>
											<view class="buyBTL">
												<text class="pingfentext">{{$t('order.danhao')}}: {{item.ddId}}</text>
											</view>
										</view>
									</view>
								</view>
								<text class="stateText">{{getstate(item.state,item.type)}}</text>
							</view>
							<view class="contentColumn">
								<view class="contentInRowR" @click="gotoDetail(item.ddId)">
									<text class="pingfentext">{{$t('order.gong')}} {{item.food.length}} {{$t('order.jian')}}</text>
									<text v-if="item.type==0" class="pingfentext" style="margin-left: 20rpx;">{{$t('order.jiner')}}: {{$formPr(item.amount)}}{{$t('locale.huobidw')}}</text>
									<text v-if="item.type!=0" class="pingfentext" style="margin-left: 20rpx;">{{$t('order.jiner')}}: {{$formPr(item.amount-item.freight)}}{{$t('locale.huobidw')}}</text>
								</view>
								<view class="contentInRowL">
									<view v-if="item.collectPayment==0" class="buyBTR">
										<text v-if="item.state==0" class="youhuixinxi" @click="dowithdingdan(10,item.id,item.ddId)">{{$t('order.quxiaodingdan')}}</text>
										<text v-if="item.state==0&&item.collectPayment==0" class="quzhifuText" @click="dowithdingdan(1,item.id,item.ddId)">{{$t('order.quzhifu')}}</text>
									</view>
									<view v-if="item.collectPayment==1" class="buyBTR">
										<!-- <text v-if="item.state==1" class="youhuixinxi">{{$t('order.tuikuan')}}</text> -->
										<text class="youhuixinxi">{{$t('index.huodaofukan')}}</text>
										<!-- <text v-if="item.state>=1&&item.state<5" class="youhuixinxi" @click="dowithdingdan(6,item.id,item.ddId)">{{$t('order.shenqingtuikuan')}}</text> -->
									</view>
								</view>
								
							</view>
						</view>
						
					</view>
				</uni-list-item>
			</uni-list>
			<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
			<uni-load-more v-if="loading || status === 'noMore' " :status="status" />
		<!--</unicloud-db>-->
	</view>
	<uni-popup style="z-index: 999;" ref="popzhif" type="center" :isMaskClick="true" :safeArea="true">
		<view class="contentColumnC" style="width: 100%;background-color: whitesmoke;">
			<view style="height: 40rpx;"></view>
			<text>{{$t('order.zhifufangshi')}}</text>
			<text class="zhifbut" style="background-color: deeppink;" @click="huodaofukuan">{{$t('index.huodaofukan')}}</text>
			<text class="zhifbut" style="background-color:#00A6FF;" @click="getVNPay">VNPAY</text>
			<view style="height: 40rpx;"></view>
		</view>
	</uni-popup>
</view>
</template>

<script>
	import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				// 数据表名
				//collection: 'opendb-mall-goods',
				// 查询字段，多个字段用 , 分割
				//field: 'goods_thumb,name,goods_tip,tag,goods_price,comment_count,month_sell_count,shop_name',
				formData: {
					status: 'loading', // 加载状态
				},
				tipShow: false ,// 是否显示顶部提示框
				
				tableList:[],
				orderlist:[],
				status:'more',
				loading:true,
				typeID:'',
				clickable:true,
				toptableindex:0,
				state:-1,				
				ddid:'',
				orderxq:'',
				rid:'',
				page:1,
				iszhongwen:true,
				statusBarHeight:0,
				
			};
		},
		onLoad() {
			this.tableList=[
				{ value: -1, text: this.$t('order.quanbudd') },
				{ value: 0, text: this.$t('order.daifukuan') },
				{ value: 1, text: this.$t('order.yizhifu') },
				{ value: 3, text: this.$t('order.daishouhuo')},
				{ value: 5, text: this.$t('order.yiwancheng')},
				{ value: 6, text: this.$t('order.shouhou') },
			];
			//this.getorderList(1,-1);
			this.formData.status = 'loading'
			var systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight=systemInfo.statusBarHeight*2+30;
			var tmpstate = uni.getStorageSync("OrderList");
			if(''==tmpstate||undefined==tmpstate||null==tmpstate){
				uni.setStorageSync("OrderList",'');
			}
			else{
				if(tmpstate==1){
					this.state=1;
					this.toptableindex=2;
				}
				uni.setStorageSync("OrderList",'');
			}
		},
		onShow() {
			this.tableList=[
				{ value: -1, text: this.$t('order.quanbudd') },
				{ value: 0, text: this.$t('order.daifukuan') },
				{ value: 1, text: this.$t('order.yizhifu') },
				{ value: 3, text: this.$t('order.daishouhuo')},
				{ value: 5, text: this.$t('order.yiwancheng')},
				{ value: 6, text: this.$t('order.shouhou') },
			];
			this.getorderList(1,this.state);
			var language = uni.getStorageSync('language');
			if('zh-Hans'==language){
				this.iszhongwen = true;
			}
			else{
				this.iszhongwen = false;
			}
		},
		methods: {
			tableselct(id,index){
				this.toptableindex=index;
				this.state = id;
				if(id==3){
					this.state='z23412';
				}
				if(id==6){
					this.state='z678911';
				}
				this.getorderList(1,this.state);
			},
			gotoDetail(e){
				console.log(e);
				uni.navigateTo({
					url:'/pages/OrderList/OrderDetail?ddid='+e+'&isShangjia=0'
				})
				// uni.navigateTo({
				// 	url:'/pages/OrderList/MainOrderDetail/MainOrderDetail'
				// })
			},
			getorderList(page,state){
				if(state<0){
					state='';
				}
				console.log(state);
				var that = this;
				this.formData.status = 'more'
				this.tipShow = true;
				uni.showLoading({
					mask:true
				});
				if(page==1){
					this.orderlist=[];
				}
				api('getorderList',{
					page:page,
					size:10,
					state:state
				},res=>{
					uni.hideLoading();
					console.log(res);
					if(page>1){
						if(res.data.data&&res.data.data.length>0){
							var temp = this.orderlist;
							for(var i=0;i<res.data.data.length;i++){
								temp.push(res.data.data[i]);
							}
							this.orderlist=temp;
						}
						else{
							this.status = 'noMore';
						}
					}
					else{
						this.orderlist=res.data.data;
						this.status = 'more';
					}
					uni.stopPullDownRefresh()
					this.tipShow = false
				},failc=>{
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.tipShow = false;
					uni.showToast({
					    title: that.$t('api.wangluoshibai'),
					    icon: 'none',
					    duration: 2500
					})
				})
			},
			getstate(state,type){
				//未支付	0 已支付	1 已接单	2 骑手接单3 骑手取餐4 已完成5 申请退款6 同意退款7 拒绝退款8 客服介入9 作废10
				switch(state){
					case 0:
					return this.$t('order.weizhifu');
					case 1:
					return this.$t('order.daishouli');
					case 2:
					return this.$t('order.daichuchan');
					case 3:
					{
						if(type==0){
							return this.$t('order.daishouhuo');
						}
						return this.$t('order.daishiyong');
					}
					case 4:
					{
						if(type==0){
							return this.$t('order.daishouhuo');
						}
						return this.$t('order.daishiyong');
					}
					case 5:
					return this.$t('order.yiwancheng');
					case 6:
					return this.$t('order.shenqingtuikuan');
					case 7:
					return this.$t('order.tongyituik');
					case 8:
					return this.$t('order.jujuetuiK');
					case 9:
					return this.$t('order.kefujs');
					case 10:
					return this.$t('order.zuofei');
					case 11:
					return this.$t('order.shouhwc');
					case 12:
					return this.$t('order.songda');
				}
			},
			dowithdingdan(state,id,ddid){
				// this.setorderuzt(1,id);
				// return;
				for(var i=0;i<this.orderlist.length;i++){
					this.orderxq = this.orderlist[i];
					if(this.orderxq.id==id){
						break;
					}
				}
				
				var that = this
				if(state==1){
					console.log('调用支付完成支付');
					// this.ddid = ddid;
					// this.getVNPay();//支付链接不能重复利用
					
					this.rid=id;
					this.ddid = ddid;
					this.panduanbingzhifu(state,id,ddid);
				}
				if(state==6){//申请退款
					if(this.orderxq.state==1){
						console.log('quanertuikuan');
						that.quanertuikuan(this.orderxq);
						return;
					}
					uni.showModal({
						cancelText:that.$t('order.quxiao'),
						confirmText:that.$t('comp.queren'),
					    title: that.$t('api.message'),
					    content: that.$t('order.shifoushenq')+that.orderxq.ddId+that.$t('order.dingdantk')+'?',
					    success: function (res) {
							if (res.confirm) { //这里是点击了确定以后
								that.setorderuzt(6,that.orderxq.id);
							} else { //这里是点击了取消以后
							  console.log('用户点击取消')
							}
							
					    }
					})
					return;
				}
				if(state==10){
					uni.showModal({
						cancelText:that.$t('order.quxiao'),
						confirmText:that.$t('comp.queren'),
					    title: that.$t('api.message'),
					    content: that.$t('order.shifouqx')+ddid+'?',
					    success: function (res) {
							if (res.confirm) { //这里是点击了确定以后
								that.setorderuzt(state,id);
							} else { //这里是点击了取消以后
							  console.log('用户点击取消')
							}
							
					    }
					})
				}
			},
			panduanbingzhifu(state,id,ddid){
				console.log('panduanbingzhifu11111')
				this.$refs.popzhif.open('bottom');
			},
			setorderuzt(state,ddid){
				
				api('setorderuzt',{
					id:ddid,
					state:state
				},res=>{
					this.getorderList(1,this.state);
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			huodaofukuan(){
				this.$refs.popzhif.close();
				uni.showLoading({
					title:'Loading...',
					mask:true
				})
				api('setorderuzt',{
					id:this.rid,
					"collectPayment":1
				},res=>{
					console.log('setorderuzt:',res)
					uni.hideLoading();
					if(res.data.code==200){
						this.getorderList(1,this.state);
					}
					else{
						uni.showToast({
						    title: res.data.msg,
						    icon: 'none',
						    duration: 2000
						})
					}
					
				},failc=>{
					uni.hideLoading();
					//console.log('getadvertis----',failc)
				})
			},
			getVNPay(){
				this.$refs.popzhif.close();
				
			},
			quanertuikuan(obj){
				console.log('quanertuikuan');
				api('VNtuikuan',{
					"order_id": obj.ddId, //需要退款的订单号
					"amount": parseInt(obj.amount), //退款金额
					"trantype": '02', //退款类型：02全额退款，03部份退款
					'illustrate':'全额退款',
					"transaction":'' //交易号，不存在可为空
				},res=>{
					console.log('VNtuikuan',res);
					if(res.data.code==200){
						if(res.data.data.vnp_ResponseCode=='00'){
							uni.showToast({
							    title:this.$t('order.tuikuanchg'),
							    icon: 'none',
							    duration: 2500
							})
							this.setorderuzt(7,obj.id);
						}else if(res.data.data.vnp_ResponseCode=='94'){
							uni.showToast({
							    title:this.$t('order.tuikuanchg'),
							    icon: 'none',
							    duration: 2500
							})
							this.setorderuzt(7,obj.id);
						}
						else{
							uni.showToast({
							    title: res.data.data.vnp_Message,
							    icon: 'none',
							    duration: 2500
							})
						}
					}
					else{
						uni.showToast({
						    title: res.data.msg,
						    icon: 'none',
						    duration: 2500
						})
					}
				},failc=>{
					console.log('VNtuikuan',failc)
				})
			},
		},
		
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.getorderList(1,this.state);
			this.page=1;
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			console.log('onReachBottom')
			this.page=this.page+1;
			this.getorderList(this.page,this.state);
		},
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	.toptalbarCtv{
		position: fixed;
		background-color: white;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
	}
	.toptalbar{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
		background-color: whitesmoke;
		padding-top: 20rpx;
		height: 64rpx;
	}
	.tableLab{
		text-align: center;
		margin-left: 14rpx;
		margin-right: 14rpx;
		height: 64rpx;
		color: darkgray;
	}
	
	.tableLabzh{
		text-align: center;
		margin-left: 14rpx;
		margin-right: 14rpx;
		height: 60rpx;
		color: darkgray;
	}
	
	.tableselect{
		border-bottom-width: 6rpx;
		border-bottom-style:solid;
		border-bottom-color:#40AE36;
		color: #40AE36;
	}
	

	.tips {
		margin-top: 90rpx;
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}

	// 默认加入 scoped ，所以外面加一层提升权重
	.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			/deep/ .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5rpx;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
				/deep/
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;
					
					.uni-list-item__container {
						padding: 0rpx;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}
	
	.item_content2{
		background: white;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.buyct{
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items: center;
	}
	.storeimage{
		width: 100%;
		height: 240rpx;
	}
	.buyimage{
		width: 200rpx;
		height: 160rpx;
	}
	.buyBT{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	.buyBTR{
		display: flex;
		flex-direction: row;
		justify-content:flex-end;
		align-items: center;
	}
	.buyBTL{
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items: center;
	}
	.msText{
		padding-left: 10rpx;
		text-align: left;
		font-size: 22rpx;
		line-height: 32rpx;
		width: 100%;
	}
	.dianpuming{
		font-size: 30rpx;
		line-height: 32rpx;
		height: 32rpx;
		font-weight: bold;
	}
	.xingxing{
		width: 30rpx;
		height: 30rpx;
	}
	.pingfentext{
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		color:black;
	}
	
	.spnametext{
		font-size: 26rpx;
		line-height: 40rpx;
		height: 40rpx;
		padding-right: 20rpx;
		color:darkgray;
	}
	
	.youhuixinxi{
		font-size: 30rpx;
		padding: 6rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;
		background-color: #F1F1F1;
		color: black;
		border-radius: 16rpx;
		margin-left: 20rpx;
	}
	
	.quzhifuText{
		font-size: 30rpx;
		padding: 6rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;
		background-color: black;
		color: white;
		border-radius: 16rpx;
		margin-left: 20rpx;
	}
	
	.stateText{
		font-size: 26rpx;
		color: darkgray;
	}
	.zhifbut{
		text-align:center;
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		width:660upx;
		border-radius: 10rpx;
		color: white;
		line-height: 70rpx;
	}
</style>