jili2-ph/pages/order/index.vue

<template>
	<view>
		 <view class="search-tab">
		    <view v-if="status == 0" data-status="0" @click="selectStatus" class="search-tab-list cur">
				<text>待分配</text>
		    </view>
			<view v-if="status != 0" data-status="0" @click="selectStatus" class="search-tab-list">
				<text>待分配</text>
			</view>
		    <view v-if="status == 1" data-status="1" @click="selectStatus" class="search-tab-list cur">
				<text>进行中</text>
		    </view>
			<view v-if="status != 1" data-status="1" @click="selectStatus" class="search-tab-list">
				<text>进行中</text>
			</view>
		    <view v-if="status == 2" data-status="2" @click="selectStatus" class="search-tab-list cur">
				<text>已完成</text>
		    </view>
			<view v-if="status != 2" data-status="2" @click="selectStatus" class="search-tab-list">
				<text>已完成</text>
			</view>
			 <view v-if="status == 3" data-status="2" @click="selectStatus" class="search-tab-list cur">
				 <text>已作废</text>
			 </view>
			 <view v-if="status != 3" data-status="2" @click="selectStatus" class="search-tab-list">
				 <text>已作废</text>
			 </view>
		</view>
		
		  <view class="container" style="padding-top: 110rpx;">
		      <view class="order-info" v-for="(item,index) in list" :key="index">
		          <view class="order-content" @click="goDetail(item.id)">
		            <view class="info-left">
		               <image src="../../images/address.png" />
		            </view>
		            <view class="info-right">
					  <view class="time">下单日期：{{item.createTime}} </view>
		              <view class="time">服务日期：{{item.start}} </view>
					  <view class="time">联系人：{{item.contact}} </view>
					  <view class="time">联系电话：{{item.phone}} </view>
		            </view>
		          </view>

		      </view>
		      <view v-if="list.length == 0" class="zanwushuju">暂无数据</view>
		  </view>
	</view>
</template>

<script>
	var app = getApp();
	import cpicker from "../../components/cpicker/cpicker.vue";
	import wpicker from "../../components/w-picker/w-picker.vue";
	import cmodal from "../../components/cmodel/cmodel.vue";
	export default {
		components: {
			cpicker,
			wpicker,
			cmodal
		},
		data() {
			return {
				list: [],
				page: 1,
				size: 10,
				flag: 0,
				status: 0,
				cancelReason: '',
				cancelShow: false,
				curOrderId: 0,
				end: '',
				finishShow: false,
				endShow: false,
				amount: '',
				preMoney: '',
			}
		},
		onLoad() {
			
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'order'){
					that.list = res.data.data;
					if (that.list.length < that.size) {
						that.flag = 1;
					} else {
						that.page++;
					}
				}else if(apiname == 'user'){
					uni.setStorageSync('orgId',res.data.data.orgs.orgId);
					uni.setStorageSync('orgName',res.data.data.orgs.orgName);
					app.globalData.userinfo.orgId = res.data.data.orgs.orgId;
					app.globalData.userinfo.orgName = res.data.data.orgs.orgName;
					this.flag = 0;
					this.page = 1;
					this.getOrder();
				}else if(apiname == 'cancel'){
					this.flag = 0;
					this.getOrder();
				}else if(apiname == 'finish'){
					this.flag = 0;
					this.getOrder();
				}else if(apiname == 'send'){
					this.flag = 0;
					this.getOrder();
				}
			}
			this.getOrder();
		},
		onPullDownRefresh() {
			this.flag = 0;
			this.page = 1;
			this.getOrder();
		},
		onReachBottom() { //上拉加载
		    this.getOrder();
		},
		methods: {
			addOrder(){
				uni.navigateTo({
				    url: '/pages/order/add'
				});
			},
			sendOrder(id){
				uni.navigateTo({
				    url: '/pages/order/send?orderId='+id
				});
			},
			goDetail(id){
				// uni.navigateTo({
				//     url: '/pages/order/detail?id='+id
				// });
				window.location.href = app.globalData.host+'/ph/#/pages/order/detail?id='+id;
			},
			selectStatus(e){
				this.status = e.currentTarget.dataset.status;
				this.flag = 0;
				this.page = 1;
				this.getOrder();
			},
			getUserInfo(){
				app.ajax({
					url: app.globalData.serverUrl + 'user/info',
					type: 'POST',
					apiname: 'user',
				});
			},
			getOrder(){
				if(this.flag == 1){
					return;
				}
				app.ajax({
					url: app.globalData.serverUrl + 'PhOrders/orderList',
					type: 'POST',
					apiname: 'order',
					data: {
						page: this.page,
						size: this.size,
						status: this.status
					}
				});
			},
			cancelBtn(orderId){
				this.curOrderId = orderId;
				this.cancelShow = true;
				console.log(orderId,this.cancelShow);
			},
			cancelConfirm(){
				app.ajax({
					url: app.globalData.serverUrl + 'Order/cancel',
					type: 'POST',
					apiname: 'cancel',
					data: {
						cancelReason: this.cancelReason,
						id: this.curOrderId
					}
				});
			},
			finishBtn(obj){
				this.curOrderId = obj.id;
				this.finishShow = true;
				this.endShow = false;
				this.end = '';
				this.preMoney = obj.preMoney;
				console.log(obj.id,this.cancelShow);
			},
			finishConfirm(){
				if(!this.end){
					uni.showToast({
						title: '未选择服务结束日期',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				app.ajax({
					url: app.globalData.serverUrl + 'Order/finish',
					type: 'POST',
					apiname: 'finish',
					data: {
						id: this.curOrderId,
						end: this.end,
						amount: this.amount,
					}
				});
			},
			cancelFinishConfirm(){
				this.end = '';
			},
			selectEnd(){
				this.endShow = true;
			},
			onConfirm(e,type){
				this.end = e.result;
			},
			getUrlCode (name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select-date{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		overflow: hidden;
		font-size: 30rpx;
		text-align: center;
	}
	.addOrderBtn{
		position: fixed;
		width: 110rpx;
		height: 90rpx;
		padding-top: 20rpx;
		border-radius: 50%;
		text-align: center;
		background-color: var(--themeColor);
		color: #FFFFFF;
		font-size: 28rpx;
		right: 40rpx;
		bottom: 100rpx;
		z-index: 100;
	}
	.search-tab{
	  position: absolute;
	  z-index: 11;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 90rpx;
	  line-height: 90rpx;
	  color: #FF706F;
	  font-size: 32rpx;
	  font-weight: bold;
	  background-color: #ffffff;
	  text-align: center;
	  overflow: hidden;
	}
	.search-box{
	  position: absolute;
	  z-index: 9;
	  left: 0;
	  top: 90rpx;
	  bottom: 0;
	  right: 0;
	  overflow: auto;
	}
	
	.search-tab .search-tab-list{
	  position: relative;
	  display: inline-block;
	  width: 33.3%;
	  background-color: #ffffff;
	  float: left;
	  color: #333333;
	  font-size: 28rpx;
	  font-weight: 400;
	}
	.search-tab .search-tab-list.cur{
	  color: var(--themeColor);
	  font-size: 32rpx;
	  font-weight: bold;
	}
	.search-tab .search-tab-list.cur::after{
	  content: '';
	  width: 44rpx;
	  height: 6rpx;
	  background-color: var(--themeColor);
	  position: absolute;
	  z-index: 5;
	  bottom: 0;
	  left: 50%;
	  margin-left: -22rpx;
	}
	.order-info {
	  width: 690rpx;
	  background: #FFFFFF;
	  border-radius: 10rpx;
	  margin: 0 auto;
	  margin-bottom: 20rpx;
	  overflow: hidden;
	}
	.order-content{
	  width: 710rpx;
	  height: 197rpx;
	  border-bottom: 1rpx solid #f1f1f1;
	}
	.info-left{
	  width: 150rpx;
	  height: 197rpx;
	  line-height: 225rpx;
	  float: left;
	  display: inline-block;
	  text-align: center;
	}
	.info-left image{
	    width: 70rpx;
	    height: 70rpx;
	} 
	.info-right {
	  width: 550rpx;
	  height: 157rpx;
	  display: inline-block;
	  float: left;
	  padding-top: 40rpx;
	}
	.info-right .time{
	  width: 550rpx;
	  height: 40rpx;
	  line-height: 1rpx;
	  // margin-top: 50rpx;
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  color: #333333;
	}
	.info-right .address{  
	  width: 550rpx;
	  height: 100rpx;
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  color: #333333;
	  margin-top: 10rpx;
	  overflow: hidden;
	}
	.bottom{
	  width: 710rpx;
	  height: 130rpx;
	}
	.bottom .bottom-left{
	  width: 300rpx;
	  height: 130rpx;
	  line-height: 130rpx;
	  display: inline-block;
	  float: left;
	  text-align: left;
	  padding-left: 20rpx;
	}
	// .bottom-left image{
	//   width: 36rpx;
	//   height: 36rpx;
	// }
	// .bottom-left text{
	//   margin-left: 10rpx;
	//   font-size: 34rpx;
	//   font-family: PingFang SC;
	//   font-weight: bold;
	//   color: #FF3F40;
	//   vertical-align: bottom;
	// }
	
	.bottom-right{
	  width: 360rpx;
	  height: 130rpx;
	  line-height: 130rpx;
	  display: inline-block;
	  float: left;
	  text-align: right;
	}
	.bottom-btn-cancel{
	  display: inline-block;
	  width: 158rpx;
	  height: 60rpx;
	  line-height: 60rpx;
	  font-size: 30rpx;
	  border: 1px solid #B3B3B3;
	  border-radius: 30rpx;
	  text-align: center;
	  color: #999999;
	}
	.bottom-btn-go{
	  display: inline-block;
	  width: 130rpx;
	  height: 60rpx;
	  line-height: 60rpx;
	  background: #FF7576;
	  border: 1px solid #FF7576;
	  border-radius: 30px;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 400;
	  color: #FFFFFF;
	  text-align: center;
	  margin-left: 20rpx;
	}
	.bottom-btn-add{
	  display: inline-block;
	  width: 158rpx;
	  height: 60rpx;
	  line-height: 60rpx;
	  background: #FF7576;
	  border-radius: 30px;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 400;
	  color: #FFFFFF;
	  text-align: center;
	  margin-left: 20rpx;
	}
	
	
.zanwushuju{
  width: 750rpx;
  text-align: center;
  padding-top: 20rpx;
  color: #666666;
  font-size: 32rpx;
}
.zanwushuju image{
  width: 374rpx;
  height: 288rpx;
  margin: 0 auto;
}

	
</style>