GuangYuYuan-app/pages/order/order.vue

<template>
	<view class="order">
		<view class="top">
			<view v-for="(item,index) in status" :key="index" :class="checkedIndex === index ? 'active' : '' "
				@click="statusTap(item.code,index)">
				{{item.info}}
			</view>
		</view>
		<!-- <view class="list" v-if="isLogin"> -->
		<mescroll-uni class="list" :fixed="false" ref="mescrollRef" @up="getList" @init="mescrollInit" v-if="isLogin">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="lTitle" @click="goDetails(item.cId)">
					<view style="font-weight: bold;">上门时间：{{item.dtCreateTime}}</view>
					<!-- <view class="status">{{item.nStatus === 0 ? "待接单" : item.nStatus === 1 ? "服务中": item.nStatus === 2 ? "待评价": item.nStatus === 3 ? "已完成": item.nStatus === -1 ? "待付款" : item.nStatus === -2 ? "已取消" :'已拒绝'}}</view>-->
					<view class="status" :style="{color:item.statusName ==='已取消'?'#999':''}">{{item.statusName}}</view>
				</view>
				<view class="cont" @click="goDetails(item.cId)">
					<view>商家：{{item.js.cNickName}}</view>
					<view>项目：{{item.cGoods[0].cTitle}}</view>
				</view>
				<!-- <view class="cont" @click="goDetails(item.cId)">
					<view>订单金额：</view>
					<view style="color: #333;font-weight: bold;">￥{{item.totalPrice}}</view>
				</view> -->
				<view class="cont" @click="goDetails(item.cId)">
					<view>下单时间：{{item.dtCreateTime}}</view>
					<!-- <view style="color: #333;font-weight: bold;">￥{{item.totalPrice}}</view> -->
				</view>
				<!-- <view class="btn" v-if="item.nStatus < 1"> -->
				<view class="btn">
					<view class="count_down">
						<span>￥</span>{{item.totalPrice}}
						<!-- 剩余<u-count-down :timestamp="item.remainingTime" @end="getList"  v-if="item.dtCreateTime>0"></u-count-down> -->
					</view>
					<view class="button">
						<text class="cancel" @click="cancle(item.cId)" v-if="item.nStatus > -2 && item.nStatus < 1">取消订单</text>
						<text class="pay" @click="nowYuyue(item,item.cId,item.dTotalMoney,item.remainingTime)"
							v-if="item.nStatus == -1 && item.nStatus < 1 ">支付订单</text>
						<text class="pay" @click="goEvaluate(item)" v-if="item.nStatus == 4">去评价</text>
						<text class="pay" @click="deleteOrder(item.cId)" v-if="item.nStatus <= -2 || item.nStatus == 5">删除订单</text>
					</view>
				</view>
				<!-- <view class="btn" v-if="item.nStatus <= -2 || item.nStatus == 5">
						<text @click="deleteOrder(item.cId)">删除订单</text>
					</view> -->
			</view>
		</mescroll-uni>
		<!-- </view> -->
		<view class="login" v-else>
			<text>您还没有登录</text>
			<view class="login_btn" @click="goLogin">
				去登录
			</view>
		</view>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		statusList,
		cancleOrder,
		orderDeatails,
		delOrder,
		getInfo,
		payoff
	} from '../../api/index.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				timeStamp: 90,
				status: [],
				checkedIndex: 0,
				list: [],
				nStatus: '',
				money: 0,
				dTotalMoney: 0,
				isLogin: false,
				current: 1
			}
		},
		methods: {
			goEvaluate(item) {
				uni.navigateTo({
					url: './comment?orderNo=' + item.orderNo + '&cJsId=' + item.cJsId + '&cId=' + item.cId + '&cName=' + item
						.js.cName
				})
			},
			nowYuyue(item, cId, dTotalMoney, remainingTime) {
				if (remainingTime == 0) {
					uni.showToast({
						title: '订单已超时',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/identify/pay_order?orderNo=' + item.orderNo + '&page=' + 'order'
					})
				}

			},
			goLogin() {
				uni.navigateTo({
					url: '../login/wxLogin'
				})
			},
			// 取消订单
			cancle(cId) {
				var id = {
					cId: cId
				}
				cancleOrder(id).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '已取消',
							icon: 'none'
						})
						this.$router.go(0)
						// this.mescroll.resetUpScroll()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			getStatus() {
				var that = this
				statusList().then(res => {
					this.status = res.data.data,
						this.nStatus = ''
					// that.$router.go(0)
					// this.mescroll.resetUpScroll();
				})
			},
			getInfo() {
				getInfo().then(res => {
					// this.setData({
					//   money:res.data.data.dBalance
					// })
				})
			},
			refresh() {

			},
			getList(page) {
				console.log('++++++')
				var openid = {
					cOpenId: uni.getStorageSync('wx_copenid'),
					nStatus: this.nStatus,
					current: page.num,
					size: page.size,
				}
				orderDeatails(openid).then(res => {
					console.log(res)
					if (res.data.data.code == 401) {
						this.isLogin = false
					}
					var charToRemove = "T";
					res.data.data.records.forEach(element => {
						element.dtCreateTime = element.dtCreateTime.replace(charToRemove, ' ')
					});
					// this.list = res.data.data.records
					this.mescroll.endSuccess(res.data.data.records.length);
					this.list = this.list.concat(res.data.data.records)

				})
			},
			// 删除订单
			deleteOrder(e) {
				var that = this
				var id = {
					cId: e
				}
				uni.showModal({
					title: '提示',
					content: '确定删除订单吗？',
					showCancel: true, // 是否显示取消按钮
					success(res) {
						if (res.confirm) {
							delOrder(id).then(res => {
								if (res.data.code == 200) {
									// that.mescroll.resetUpScroll();
									that.$router.go(0)
									that.getList()
									uni.showToast({
										title: '删除订单成功！',
										icon: 'none'
									})
									// setTimeout(() => {
									// }, 100)
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			//订单详情
			goDetails(cid) {
				uni.navigateTo({
					url: '../../pages/order/order_detail?cid=' + cid
				})
			},
			//切换订单
			statusTap(code, index) {
				this.checkedIndex = index
				this.list = []
				this.nStatus = code
				this.mescroll.resetUpScroll();
			},
		},
		mounted() {
			this.mescroll.optDown.use = false
		},
		onLoad() {
			const value = uni.getStorageSync('wx_copenid');
			if (value == '') {
				this.isLogin = false
			} else {
				this.isLogin = true
			}
		},

		onShow() {
			this.getStatus()
			this.mescroll.resetUpScroll()
			// this.checkedIndex = 0,
			// this.nStatus = 100
			// this.getInfo()
		},
		onHide() {
			this.checkedIndex = 0
			this.nStatus = 100
			this.list = []
		}

	}
</script>


<style scoped lang="scss">
	// ::v-deep.mescroll-uni-fixed {
	// 	position: static;
	// 	overflow-y: auto;
	// }
	.order {
		width: 100vw;
		height: 100%;
		// background: radial-gradient(circle, #b1fffc, #fcfdff);
		background: linear-gradient(180deg, #C1FFF8 0%, #B8FFF3 34%, #F5FFFF 100%);
		// display: flex;
		// flex-direction: column;
		position: fixed;
		box-sizing: border-box;

		.top {
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 30rpx;
			// padding: 20rpx 0;
			box-sizing: border-box;
			z-index: 999;
			background: radial-gradient(circle, #fcfdff, #fcfdff);

			view {
				height: 100%;
				display: flex;
				align-items: center;
				padding: 0px 10rpx;
				background-color: #fff;
				box-sizing: border-box;
				// padding-bottom: 12rpx;
				// border-radius: 8rpx;
			}

			.active {
				font-size: 30rpx;
				color: #03C8BE;
				font-weight: 400;
				position: relative;
			}
			.active::after{
				content: '';
				  position: absolute;
				  bottom: 0;
				  left: 50%;
					transform: translateX(-50%);
				  width: 36rpx;
				  height: 4rpx; /* 设置你需要的高度 */
				  background-color: #03C8BE;
			}
		}

		.list {
			padding: 32rpx;
			flex: 1;

			// overflow-y: auto;
			// padding-top: 20rpx;
			// .list_box{
			// height: 100%;
			.item {
				// margin: 0 20rpx;
				width: 100%;
				// height: 292rpx;
				padding: 24rpx 32rpx;
				margin-bottom: 10rpx;
				font-size: 28rpx;
				margin-bottom: 28rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 0px 4px 12px 0px rgba(88, 209, 187, 0.1);
				border-radius: 24px 24px 24px 24px;

				.lTitle {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #eeeeee;
					margin-bottom: 10rpx;
					padding-bottom: 20rpx;
					font-size: 28rpx;

					.status {
						color: #03C8BE;
					}
				}

				.cont {
					color: rgb(162, 162, 162);
					font-size: 26rpx;
					// display: flex;
					// justify-content: space-between;
					line-height: 45rpx;
				}

				.btn {
					height: 48rpx;
					// text-align: right;
					// padding-top: 20rpx;
					margin-top: 20rpx;
					// margin-bottom: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.count_down {
						// width: 41%;
						// text-align: left;
						font-size: 26rpx;
						color: #F53E54;

						span {
							font-size: 20rpx;
						}
					}

					.button {
						.pay {
							display: inline-block;
							background-color: rgb(46, 188, 215);
							color: #fff;
							margin-left: 20rpx;
							padding: 5rpx 30rpx;
							height: 48rpx;
							line-height: 48rpx;
							background: linear-gradient(135deg, #1AD8CF 0%, #21C8C0 100%);
							border-radius: 98rpx 98rpx 98rpx 98rpx;
						}

						.cancel {
							width: 152rpx;
							height: 48rpx;
							border-radius: 98rpx;
							border: 2rpx solid #BBBBBB;
								padding: 5rpx 30rpx;
						}
					}


				}
			}

			// }
		}
	}



	.login {
		margin-top: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;

		text {
			margin-bottom: 50px;
			color: gray;
		}

		.login_btn {
			width: 100px;
			height: 30px;
			border-radius: 30px;
			text-align: center;
			color: #FFF;
			line-height: 30px;
			background: linear-gradient(to right, #35c99d, #27aea7);
		}
	}



	.nodate {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
		text-align: center;

		image {
			width: 300rpx;
			margin-bottom: 30rpx;
		}
	}

	::-webkit-scrollbar {
		display: none;
	}
</style>