juliancheng/pages/mine/order.vue

<template>
	<view class="main">
		<view class="top">
			<view class="tab" v-for="(item, index) in status" :key="index" :class="index == lindex ? 'native' : ''"
				@click="getthis(index)">{{ item.name }}</view>
		</view>
		<view class="list">
			<!-- <view class="nodata" v-if="orders.length == 0">暂无数据</view> -->
			<view class="order-box" v-for="(item, index) in orders" :key="index" v-if="orders.length > 0">
				<view class="order-box-item" @click="godetail(item)">
					<view class="title">
						<view class="id">订单号：{{ item.order_sn }}</view>
						<view
							:class="{ status: item.order_status_new == 2||item.order_status_new == 4, statusTwo: item.order_status_new == 1, statusThree: item.order_status_new == 5, statusFour: item.order_status_new == 3,statusFive:item.order_status_new == 6 }">
							{{ item.order_status_new == 1 ? '待支付' : item.order_status_new == 2 ? '待评估' : item.order_status_new == 3 ? '待审核' : item.order_status_new == 4 ?'已评估': item.order_status_new == 5 ?'已完成':'已取消'}}
						</view>
					</view>
					<view class="goods">
						<image v-if="item.type==2" src="../../static/index/3166d3d1d9b79004291261c7e8357a3.jpg"
							mode="" />
						<image v-if="item.type==1" src="../../static/index/47e8bab2b5b68f3fff001bce06e0a11.jpg"
							mode="" />
						<view class="margin-left-sm">
							<view class="name">{{ item.type_text }}</view>
							<view class="name" style="font-size: 24rpx;" v-if="item.type==1">项目类型：个人征信异议申诉</view>
							<view class="name" style="font-size: 24rpx;" v-else>项目类型：企业信用问题咨询</view>
							<view class="name" style="font-size: 24rpx;">创建时间：{{ item.created_at }}</view>
						</view>
						<view
							v-if="item.order_status_new == 1||item.order_status_new == 2||item.order_status_new == 3||item.order_status_new == 6"
							class="price">
							<text style="color:#555864 ;"></text>
							¥{{ item.place_payment_amount/100 }}
						</view>
						<view v-else-if="item.order_status_new == 4||item.order_status_new == 5" class="price">
							<text style="color:#555864 ;"></text>
							¥{{ item.total_price }}
						</view>
					</view>
					<view class="goods" v-if="item.managers!=null">
						<image style="border-radius: 50%;" :src="item.managers.avatar" mode="" />
						<view class="margin-left-sm">
							<view class="name">信用管理师姓名：{{item.managers.name}}</view>
							<view class="name" style="font-size: 24rpx;">信用管理师接单时间：{{item.morders.start_time||'未接单'}}</view>
							<view class="name" style="font-size: 24rpx;">信用管理师联系电话：{{ item.managers.phone }}</view>
						</view>
					</view>
				</view>
				<view class="btns" v-if="item.order_status_new == 1||item.order_status_new == 6">
					<view v-if="item.order_status_new == 1" class="btn" style="border-color:#f5cc57;color: #f5cc57;"
						@click="paymentOrder(item)">
						支付订单
					</view>
					<!-- <view class="btn" @click="godetail(item)" data-target="cancel">查看详情</view> -->
					<view v-if="item.order_status_new == 1" class="btn" @click="cancelOrder(item)" data-target="cancel">
						取消订单</view>
					<view v-if="item.order_status_new == 6" class="btn"
						style="background-color:rgb(222,132,133);color: #fff;border-color:rgb(222,132,133);"
						@click="delOrder(item)">
						删除订单
					</view>
				</view>
			</view>
			<uni-load-more :loadingType="loadingType" :contentText="contentText" />
		</view>
		<!-- 弹出框 -->
		<view class="cu-modal" :class="modalName == 'cancel' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">订单取消</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close yellow"></text>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub yellow solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="cancel">确定</view>
				</view>
			</view>
		</view>
		<!-- 是否支付 -->
		<view class="cu-modal" :class="modalName == 'ispay' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">订单提示</view>
					<!-- <view class="action" @tap="hideModal">
						<text class="cuIcon-close yellow" />
					</view> -->
				</view>
				<view class="padding-xl">是否完成支付?</view>
				<view class="cu-bar bg-white">
					<!-- <view class="action margin-0 flex-sub yellow solid-left" @tap="hideModal">取消</view> -->
					<view class="action margin-0 flex-sub  solid-left" @tap="ispaytrue">已经完成支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				orders: [],
				param: {
					screen_status: 1
				},
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				status: [{
						name: '全部',
						param: {
							screen_status: 0
						}
					},
					{
						name: '评估中',
						param: {
							screen_status: 1
						}
					},
					{
						name: '修复中',
						param: {
							screen_status: 2
						}
					},
					{
						name: '已完成',
						param: {
							screen_status: 3
						}
					},
					{
						name: '已取消',
						param: {
							screen_status: 4
						}
					}
				],
				lindex: 0,
				modalName: null,
				thisOrder: {},
				order_sn_num: ""
			};
		},
		onLoad(option) {
			this.lindex = option.index;
		},
		onShow() {
			this.findOrderList();
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			this.loadPage();
		},
		methods: {
			async ispaytrue() {
				this.modalName = ''
				let res = await this.$request.post("/api/payment/getWebPayResult", {
					trade_sn: this.order_sn_num
				}, false)
				if (res.code == 200) {
					uni.redirectTo({
						url: "paysource?id=" + this.id + "&payment_status=" + this.order.order.payment_status
					})
				} else {
					uni.showToast({
						title: "支付失败",
						icon: "none",
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			},
			async paymentOrder(item) {
				this.thisOrder = item
				if (this.$util.is_weixin()) {
					let res = await this.$request.post('/api/payment/payPlaceOrder', {
						order_id: item.id,
						plat_type: 1
					}, true);
					if (res.code == 200) {
						this.modalName = 'ispay'
						this.order_sn_num = res.data.trade_sn
						if (typeof WeixinJSBridge == "undefined") {
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
								document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
							}
						} else {
							this.onBridgeReady(res)
						}
					} else {
						uni.showModal({
							title: '错误信息',
							content: res.message,
							showCancel: false
						});
					}
				} else {
					let res = await this.$request.post("/api/payment/wbePayPlaceOrder", {
						order_id: item.id
					})
					if (res.code == 200) {
						this.modalName = 'ispay'
						this.order_sn_num = res.data.trade_sn
						window.location.href = res.data.mweb_url
					}
				}
			},
			onBridgeReady: function(res) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": res.data.appId,
						"timeStamp": res.data.timeStamp,
						"nonceStr": res.data.nonceStr,
						"package": res.data.package,
						"signType": res.data.signType,
						"paySign": res.data.paySign
					},
					function(re) {
						if (re.err_msg == "get_brand_wcpay_request:ok") {
							uni.navigateTo({
								url: "paysource?id=" + this.thisOrder.id + "&payment_status=" + this
									.thisOrder.payment_status
							})
						}
					});
			},
			// 下拉刷新
			// onPullDownRefresh: function(){
			// 	this.loadPage();
			// 	console.log('下拉刷新')
			// 	setTimeout(function () {
			// 		uni.stopPullDownRefresh();
			// 	}, 1000);
			// },
			// 下拉刷新
			onPullDownRefresh() {
				this.findOrderList();
			},
			getthis(e) {
				this.lindex = e;
				this.findOrderList();
			},
			godetail(e) {
				uni.navigateTo({
					url: '/pages/mine/detail?id=' + e.id + '&payment_status=' + e.payment_status
				});
			},
			delOrder(item) {
				uni.showModal({
					title: "提示",
					content: "你确定要删除吗?",
					success: (res) => {
						if (res.confirm) {
							this.$request.post("/api/order/orderHandle", {
								order_id: item.id,
								handle_type: 2
							}).then(data => {
								if (data.code == 200) {
									this.findOrderList();
								}
							}).catch(err => {})
						}
					}
				})
			},
			cancelOrder(item) {
				this.modalName = 'cancel';
				this.thisOrder = item;
			},
			async cancel(e) {
				let data = await this.$request.post('/api/order/cancelOrder', {
					order_id: this.thisOrder.id
				}, false);
				console.log(data)
				if (data.code == 200) {
					this.findOrderList();
					this.modalName = '';
				} else {
					uni.showToast({
						icon: 'none',
						title: data.message
					});
				}
			},
			hideModal(e) {
				this.modalName = null;
			},
			findOrderList: function() {
				this.loadingType = 1;
				this.param.page = 0;
				this.loadPage();
			},
			loadPage: async function() {
				if (this.loadingType == 2) {
					return;
				}
				try {
					this.param = Object.assign(this.param, this.status[this.lindex].param);
					this.param.page++;
					console.log(this.param)
					let data = await this.$request.post('/api/order/orderList', this.param, false);
					console.log(data)
					if (data.code == 200) {
						if (data.data.current_page == 1) {
							this.orders = [];
						}
						this.orders = this.orders.concat(data.data.data);
						if (data.data.current_page == data.data.last_page) {
							this.loadingType = 2;
						} else {
							this.loadingType = 0;
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: data.message
						});
						this.loadingType = 0;
					}
				} catch (e) {
					console.info(e)
					uni.showToast({
						icon: 'none',
						title: '数据获取失败'
					});
					this.loadingType = 0;
				}
				uni.stopPullDownRefresh();
			}
		}
	};
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.main {
		width: 100vw;
		height: auto;
		margin-bottom: 20px;
	}

	.main .top {
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-around;
	}

	.top .tab {
		width: auto;
		height: 40px;
		font-size: 16px;
		line-height: 50px;
		text-align: center;
		color: #666;
	}

	.top .native {
		border-bottom: 2px solid #f5cc57;
		color: #f5cc57;
	}

	.list {
		width: 90vw;
		height: auto;
		margin: 20px 5vw;
	}

	.list .nodata {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #888;
	}

	.order-box {
		position: relative;
		width: 90vw;
		height: auto;
		padding: 14px;
		background: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		font-size: 14px;
	}

	.order-box .title {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		color: #8c8e96;
		border-bottom: 1px solid rgba(216, 216, 216, 1);
	}

	.status {
		color: #f5cc57;
	}

	.statusTwo {
		color: #ed462f;
	}

	.statusThree {
		color: #00b563;
	}

	.statusFour {
		color: #00a3dd;
	}

	.statusFive {
		color: #8c8e96;
	}

	.order-box .goods {
		width: 100%;
		height: 95px;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		padding: 15px 0;
		border-bottom: 1px solid rgba(216, 216, 216, 1);
	}

	.goods image {
		width: 70px;
		height: 70px;
		background: #eee;
	}

	.goods .price {
		position: absolute;
		right: 4px;
		top: 70px;
		width: auto;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		color: #ed462f;
	}

	.goods .name {
		/* position: absolute;
		left: 95px; */
		width: auto;
		/* height: 80px; */
		/* line-height: 80px; */
		color: #555864;
		margin-bottom: 15rpx;
	}

	.btns {
		width: 100%;
		height: 40px;
	}

	.btns .btn {
		width: auto;
		height: 30px;
		line-height: 30px;
		padding: 0 15px;
		border: 1px solid #979797;
		color: #979797;
		margin: 5px;
		float: right;
		border-radius: 5px;
	}

	.yellow {
		color: #f5cc57;
	}
</style>