GuangYuYuan-shanghu/src/pages/order/order.vue

<template>
	<view class="page-container">
    <webviewPoint ref="webviewRef"/>
		<z-paging ref="paging" v-model="dataList"
			:paging-style="{
				background: 'linear-gradient(180deg, #C1FFF8 0%, #B8FFF3 34%, #F5FFFF 100%)'
			}" @query="queryList">
			<template #top>
				<view class="tab-box">
					<view v-for="(item,index) in statusList" :key="index"
						:class="{ item: true, active: current === index }"
						@click="onTabChange(item.code, index)">
						{{item.info}}
					</view>
				</view>
			</template>
			<view class="list-box" v-if="dataList && dataList.length > 0">
				<view class="item" v-for="(item,index) in dataList" :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 ? 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">
						<view class="count_down">
							<text>￥</text>{{item.totalPrice}}
							<!-- 剩余<u-count-down :time="item.remainingTime" @finish="" v-if="item.dtCreateTime>0"></u-count-down> -->
						</view>
						<view class="button">
							<text class="pay" @click="onCancleOrder(item)" v-if="[0, 1, 2, 3, 6].includes(item.nStatus)">取消订单</text>
							<text class="pay" @click="onCancleApply(item)" v-if="item.nStatus == 7">取消申请</text>
							<text class="pay" @click="onPayOrder(item)" 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="onDelOrder(item)" v-if="item.nStatus <= -2 || item.nStatus == 5">删除订单</text>
						</view>
					</view>
				</view>
			</view>

			<template v-slot:empty>
				<u-empty
					:text="!isLogin ? '您还没有登录' : '您还没有相关订单呦~'"
					icon="/static/common/logo1.png"
				>
					<u-button
						size="small"
						text="去登录"
						color="linear-gradient(to right, #35c99d, #27aea7)"
						:customStyle="{ marginTop: '20rpx' }"
						v-if="!isLogin"
						@click="goLogin"
					>
					</u-button>
				</u-empty>
			</template>
		</z-paging>
    <!-- 取消订单弹窗 -->
    <u-popup :show="cancelOrderPopup.show" mode="center" :width="700" :round="10" closeable @close="closePopup">
      <view class="popup-content">
        <view v-if="cancelOrderPopup.isOk" class="success-tip">{{ cancelOrderPopup.successTip }}</view>
        <view v-else>
          <uni-table border stripe>
	    	    <uni-tr class="table-header">
	    	    	<uni-th width="200rpx" align="center">项目</uni-th>
	    	    	<uni-th width="150rpx" align="center">实付金额</uni-th>
	    	    	<uni-th width="180rpx" align="center">已服务时间</uni-th>
	    	    </uni-tr>
	    	    <uni-tr v-for="(item, index) in cancelOrderPopup.orderList" :key="index">
	    	    	<uni-td align="center"> {{ item.cTitle }} </uni-td>
	    	    	<uni-td align="center"> {{ item.dYuanPrice }} </uni-td>
	    	    	<uni-td align="center"> {{ item.serviceDuration }} </uni-td>
	    	    </uni-tr>
	        </uni-table>
          <u--textarea v-model="cancelOrderPopup.reason" placeholder="请输入退单原因" count maxlength="50" class="reson"></u--textarea>
        </view>
        <view v-if="!cancelOrderPopup.isOk" class="popup-btn">
          <u-button size="small" plain shape="circle" text="取消" style="margin-right: 50rpx;" @click="closePopup"></u-button>
          <u-button size="small" shape="circle" type="error" text="提交申请" @click="onSubmitApply"></u-button>
        </view>
        <view class="popup-btn">
          <u-button v-if="cancelOrderPopup.isOk" size="small" shape="circle" color="linear-gradient(135deg, #1AD8CF 0%, #21C8C0 100%)" text="确认" @click="closePopup"></u-button>
        </view>
      </view>
	  </u-popup>
	</view>
</template>

<script>
import {
  getIsLottery,
  getStatusList,
} from '@/api/index.js';
import {
	delOrder,
	cancleOrder,
	cancleApply,
	orderDeatails,
} from '@/api/order.js';
import webviewPoint from "@/components/webviewPoint.vue";
export default {
  components: { webviewPoint },
	data() {
		return {
			dataList: [],
			current: 0,
			statusList: [],
			nStatus: '',
			isLogin: false,
      // 取消订单
      cancelOrderPopup: {
				show: false, // 弹窗显示状态
        isOk: false, // 是否确认
        successTip: '您的申请已提交，客服审核中，请注意接听客服电话：19936963696',
        orderList: [],
				orderInfo: null, // 当前要取消的订单信息
				cId: '', // 订单ID
				reason: '' // 用户输入的取消原因
			}
		}
	},
	onLoad(query) {
		this.isLogin = !!uni.getStorageSync('wx_copenid');
	},
	onShow() {
    var _this = this;
    getIsLottery({types:[1,3]}).then(res=>{
      if(res.data.data?.isLottery === 1){
        _this.$refs.webviewRef?.getRow(res.data.data);
      }
    })
		this.getStatus()
	},
	methods: {
		queryList(pageNo, pageSize) {
			let params = {
				current: pageNo,
				size: pageSize,
				cOpenId: uni.getStorageSync('wx_copenid'),
				nStatus: this.nStatus,
			}
			orderDeatails(params).then(res => {
				if (res.data.code === 200) {
          this.dataList = res.data.data.records;
					// let data = res.data.data.records.forEach(item => {
					// 	item.dtCreateTime = item.dtCreateTime.replace('T', ' ')
					// });
					this.$refs.paging.complete(this.dataList);
				} else {
					this.$refs.paging.complete([]);
				}
			});
		},
		onPayOrder(item) {
			if (item.remainingTime <= 0) {
				uni.showToast({
					title: '订单已超时',
					icon: 'none'
				})
			} else {
				let str = uni.$u.queryParams({
					page: 'order',
					orderNo: item.orderNo
				});
				uni.navigateTo({
					url: `/pages/identify/pay_order${str}`
				})
			}

		},
    // 取消退单申请
    onCancleApply(item) {
			uni.showModal({
				title: '提示',
				content: '确定取消退单申请吗？',
				showCancel: true,
				success: (res) => {
					if (res.confirm) {
						let params = {
							cId: item.cId
						}
						cancleApply(params).then(res => {
							if (res.data.code == 200) {
								this.$refs.paging.reload();
								uni.showToast({
									title: '已取消',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						})
					}
				}
			})
		},
    // 取消订单
		onCancleOrder(item) {
      this.cancelOrderPopup.cId = item.cId
      this.cancelOrderPopup.orderList = item.cGoods || []
      this.cancelOrderPopup.show = true;
		},
    // 提交退单申请
    onSubmitApply() {
      if (this.cancelOrderPopup.reason === '') {
        uni.showToast({
          title: '请输入退单原因',
          icon: 'none'
        })
        return
      }
      let params = {
				cId: this.cancelOrderPopup.cId,
        cancelReason: this.cancelOrderPopup.reason
			}
			cancleOrder(params).then(res => {
				if (res.data.code == 200) {
          this.cancelOrderPopup.isOk = true
					this.$refs.paging.reload();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			})
    },
    // 关闭弹窗
    closePopup() {
      this.cancelOrderPopup.show = false;
      this.cancelOrderPopup.isOk = false;
      this.cancelOrderPopup.reason = '';
    },
		// 删除订单
		onDelOrder(item) {
			uni.showModal({
				title: '提示',
				content: '确定删除订单吗？',
				showCancel: true, // 是否显示取消按钮
				success: (res) => {
					if (res.confirm) {
						let params = {
							cId: item.cId
						}
						delOrder(params).then(res => {
							if (res.data.code == 200) {
								this.$refs.paging.reload();
								uni.showToast({
									title: '删除订单成功！',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						})
					}
				}
			})
		},
		getStatus() {
			getStatusList().then(res => {
				this.statusList = res.data.data,
				this.nStatus = '';
				// 判断其它页面跳转过来
				let orderTab = this.$store.state.other.orderTab;
				if (orderTab !== '') {
					let i = this.statusList.findIndex(item => item.code === orderTab);
					// 请求数据
					this.onTabChange(orderTab, i);
					// 赋值完成后清除
					this.$store.dispatch('setOrderTab', '');
				}
			});
		},
		// 切换订单
		onTabChange(code, index) {
			this.current = index;
			this.nStatus = code;
			this.$refs.paging.reload();
		},
		// 跳转订单详情
		goDetails(cid) {
			let str = uni.$u.queryParams({
				cid
			});
			uni.navigateTo({
				url: `/pages/order/order_detail${str}`
			});
		},
		goEvaluate(item) {
      console.log(item)
			let str = uni.$u.queryParams({
				orderNo: item.orderNo,
				cId: item.cId,
				cJsId: item.cJsId,
				cName: item.js.cName,
        nickName:item.wxUser.nickName
			});
			uni.navigateTo({
				url: `/pages/order/comment${str}`
			});
		},
		goLogin() {
			uni.navigateTo({
				url: '/setting/myNew/phone',
			})
			// uni.navigateTo({
			// 	url: '/pages/login/wxLogin'
			// })
		},
	},
}
</script>

<style scoped lang="scss">
.page-container {
	background: linear-gradient(180deg, #C1FFF8 0%, #B8FFF3 34%, #F5FFFF 100%);

	.tab-box {
		height: 90rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 30rpx;
		z-index: 999;
		background: radial-gradient(circle, #fcfdff, #fcfdff);

		.item {
			height: 100%;
			padding: 0 10rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
		}

		.active {
			font-weight: 400;
			font-size: 30rpx;
			color: #03C8BE;
			position: relative;

			&::after{
				content: '';
				width: 36rpx;
				height: 4rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				background-color: #03C8BE;
			}
		}
	}

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

		.item {
			width: 100%;
			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;
				line-height: 45rpx;
			}

			.btn {
				height: 48rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.count_down {
					font-size: 26rpx;
					color: #F53E54;

					text {
						font-size: 20rpx;
					}
				}

				.button {
					.pay {
						display: inline-block;
						background-color: rgb(46, 188, 215);
						color: #fff;
						margin-left: 20rpx;
						padding: 0rpx 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;
					}
				}
			}
		}
	}

  .popup-content {
    width: 90vw;
  	padding: 100rpx 30rpx 30rpx;
  	box-sizing: border-box;

    .table-header {
      background-color: #FBFBFB;
    }

    .success-tip {
      padding: 50rpx;
      font-size: 32rpx;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .reson {
      margin: 30rpx;
    }

    .popup-btn {
      padding: 0 80rpx;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>