cte-share/pages/OrderList/OrderList.vue

<template>

	<!--
	本页面模板教程：https://ext.dcloud.net.cn/plugin?id=2672
	uni-list 文档：https://ext.dcloud.net.cn/plugin?id=24
	uniCloud 文档：https://uniapp.dcloud.io/uniCloud/README
	unicloud-db 组件文档：https://uniapp.dcloud.io/uniCloud/unicloud-db
	DB Schema 规范：https://uniapp.dcloud.net.cn/uniCloud/schema
	 -->
	<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>
			<!--
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"
		 :field="field" @load="load">
		 -->
			<!-- 基于 uni-list 的页面布局 -->
			<uni-list>
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<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.state!=0&&item.store" class="item_content2">
							<view class="buyBT" style="margin-bottom: 10rpx;">
								<view class="buyBTL" @click="gotoDetail(item.ddId)">
									<image style="width: 36rpx;margin-right: 6rpx;" src="/static/images/spgl@3x.png"
										mode="widthFix"></image>
									<text class="dianpuming">{{item.store.posName}}</text>
								</view>
								<text class="stateText">{{getstate(item.state,item.type)}}</text>
							</view>
							<view class="buyct">
								<myImage class="buyimage" :mysrc="item.store.image" mymode="scaleToFill"
									v-on:Emyimageclick="gotoDetail(item.ddId)"></myImage>
								<view class="msText">
									<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 class="buyBTL" @click="gotoDetail(item.ddId)">
										<view v-for="itemT in item.food">
											<text class="spnametext">{{itemT.name}}</text>
										</view>
									</view>
									<view class="buyBT" @click="gotoDetail(item.ddId)">
										<text class="pingfentext">{{$t('order.gong')}} {{item.food.length}}
											{{$t('order.jian')}}</text>
										<text class="pingfentext" style="margin-left: 20rpx;">{{$t('order.jiner')}}:
											{{$formPr(item.amount)}}{{$t('locale.huobidw')}}</text>
									</view>
									<view v-if="item.collectPayment==0" class="buyBTR">
										<!-- <text v-if="item.state==1" class="youhuixinxi">{{$t('order.tuikuan')}}</text> -->
										<!-- <text v-if="item.collectPayment==1" 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 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 v-if="item.state==0&&item.store" class="item_content2">
							<myImage class="storeimage" :mysrc="item.store.image" mymode="scaleToFill"
								v-on:Emyimageclick="gotoDetail(item.ddId)"></myImage>
							<view class="buyct" style="margin-top: 10rpx;">
								<view class="msText">
									<view class="buyBTL" @click="gotoDetail(item.ddId)">
										<image style="width: 36rpx;margin-right: 6rpx;" src="/static/images/spgl@3x.png"
											mode="widthFix"></image>
										<text class="dianpuming">{{item.store.posName}}</text>
									</view>
									<view class="buyBTL" @click="gotoDetail(item.ddId)">
										<view v-for="itemT in item.food">
											<text class="spnametext">{{itemT.name}}</text>
										</view>
									</view>
									<view class="buyBT" @click="gotoDetail(item.ddId)">
										<text
											class="pingfentext">{{$t('order.gong')}}{{item.food.length}}{{$t('order.jian')}}</text>
										<text class="pingfentext" style="margin-left: 20rpx;">{{$t('order.jiner')}}:
											{{$formPr(item.amount)}}{{$t('locale.huobidw')}}</text>
									</view>
									<view class="buyBT" @click="gotoDetail(item.ddId)">
										<text class="pingfentext">{{$t('order.zhifutishi')}}</text>
									</view>
									<view 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>
										<text v-if="item.collectPayment==1"
											class="youhuixinxi">{{$t('index.huodaofukan')}}</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'
				})
			},
			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();
				var language = uni.getStorageSync('language');
				var lg;
				if (language == 'yuenan') {
					lg = 'vi';
				} else {
					lg = 'en';
				}

				api('VNPay', {
					orderid: this.ddid,
					amount: this.orderxq.amount,
					language: lg
				}, res => {
					if (res.data.code != 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 3500
						})
						return;
					}
					uni.navigateTo({
						url: '/pages/OrderList/buy/Zhifuyemian?url=' + encodeURIComponent(JSON.stringify(
							res.data.data)) + '&ddid=' + this.ddid
					})
				}, failc => {
					//console.log('getadvertis----',failc)
				})
			},
			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: 124rpx;
	}

	.tableLab {
		text-align: center;
		margin-left: 14rpx;
		margin-right: 14rpx;
		height: 124rpx;
		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: #00A6FF;
		color: #00A6FF;
	}


	.tips {
		margin-top: 140rpx;
		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 */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			::v-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 ，所以样式会无法穿透
				::v-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>