kly_uniapp/pages/order/index.vue

<!-- 工单列表 -->

<template>
	<view class="my_bg">
		<view style="background-color: #ffffff;">
			<!-- 顶部tab栏 -->
			<view class="nav">
				<view @click="change_status(index)" :style="'border-color:'+item.color+';'"
					:class="index==status_arr_index?'bar_view_focus':'bar_view'" :key="index"
					v-for="(item, index) in status_arr">
					<image style="width: 98upx;height: 98upx;" :src="serverUrlImg+'order'+(index+1)+'.png'"></image>
					<view :style="'color:'+(status_arr_index==index?item.color:'#B7BECF')+';'">
						{{item.name}}
					</view>
					<view v-if="status_num_arr[index]!=0" class="bar_view_num">{{status_num_arr[index]}}</view>
				</view>
			</view>

			<!-- 小状态筛选 -->
			<view v-if="status_arr[status_arr_index]['children']" style="margin: 6upx;margin-top: 10upx;"
				class="type_child_box">
				<view :key="index" :class="order_status_child==index?'type_child_focus':'type_child'"
					@click="change_status_child(index)"
					v-for="(item, index) in status_arr[status_arr_index]['children']">
					{{item.name}}
					<view v-if="status_arr_index==4"
						:class="order_status_child==index?'type_child_focus2':'type_child2'">
						{{user_info[item.key]>0?('+'+user_info[item.key]):''}}
					</view>
				</view>
			</view>
		</view>
		<!-- 主数据 -->
		<view class="t_show">
			<view class="loading_text" v-if="loading">加载中...</view>
			<view v-else>
				<view class="each_data" style="position: relative;margin-top: 20upx;margin-bottom: 25upx;" :key="index"
					v-for="(item, index) in data">
					<navigator :url="'/pages/order/detail?detailType=1&id='+item.biz_recruitid+'&orderId='+item.id"
						style="width: 92%;font-size: 30upx;border-bottom: 1rpx solid #cfd6e3;padding:15upx 4%;"
						class="nowrap">{{item.recruit_title}}</navigator>
					<!-- 工单显示 区域-->
					<view style="margin-left: 2%;margin-top: 10upx;" class="order_box">
						<view style="color: #FF663D;font-weight: bold;text-align: right;" v-if="status_arr_index==2">
							等待商家结算</view>
						<view v-else style="color: #FF663D;font-weight: bold;text-align: right;">
							{{item.statusName||item.teamstatusName}}{{item.salary_status==1?'（部分结算）':''}}
						</view>
						<view v-if="item.tdwk_settlecatalogName" style="color: #FF663D;font-weight: bold;">
							结算类别：{{item.tdwk_settlecatalogName}}</view>
						<view style="display: flex;">
							报名类型：{{item.urgent_level==1?'今日零工':'完工即结'}}
							<navigator :url="'../personal/myGroupsDetail?catalog=3&id='+item.workteamid"
								style="margin-left: 10upx;color: #00c0c6;" v-if="item.workteam_mode!=0">查看报名人员
							</navigator>
						</view>
						<view>
							上班日期：{{item.plan_dotime}}
						</view>
						<view>开始结束时间：
							<text
								v-if="item.btr_settle_catalog==0">{{((item.btr_begindatetime==item.btr_finishdatetime)||!item.btr_finishdatetime)?item.btr_begindatetime.slice(5):(item.btr_begindatetime.slice(5)+'~'+item.btr_finishdatetime.slice(5))}}</text>
							<text v-else>{{item.btr_begindatetime.slice(5)+'开始报名'}}</text>
							<text style="margin-left: 6upx;">{{item.btr_begin_hour+'~'+item.btr_finish_hour}}</text>
						</view>
						<view v-if="item.worked_begintime||item.worked_finishtime"
							style="background-color: #f9f9f9;padding: 5upx 0;">
							<view style="">开始工作时间：{{item.worked_begintime}}
							</view>
							<view style="">
								结束工作时间：{{item.worked_finishtime}}</view>
						</view>
						<view style="color: #999999;">{{item.remark}}</view>
						<view class="order_btn_box" v-if="status_arr_index==0">
							<view>
								<view
									@click="open_modal('enrollCancel',item.workteam_mode!=0?item.workteamid: item.id,item.workteam_mode!=0?1:0)"
									class="cancel">取消报名</view>
							</view>
						</view>
						<view style="padding: 20upx 0 10upx;" v-if="status_arr_index==3">
							<!-- 商家对我的评价 -->
							<view style="width: 100%;" v-if="item.td_appraiseLevel!=-1">
								<view v-if="item.td_appraiseLevel">
									<view style="display: flex;align-items: center;height: 50upx;">
										<view style="margin-right: 10upx;color: #ff5500;">商家对我的评价</view>
										<trailerStars allowTap="0" :innerScore="item.td_appraiseLevel">
										</trailerStars>
									</view>
									<view style="color: #8E97AE;margin-top: 0upx;">评价内容：
										{{item.td_appraiseRemark}}
									</view>
								</view>
								<view style="color: #ff5500;" v-else>待商家评价</view>
							</view>

							<!-- 我的评价 -->
							<view style="width: 100%;margin-top: 20upx;" v-if="item.wk_appraiseLevel!=-1">
								<view v-if="item.wk_appraiseLevel">
									<view style="display: flex;align-items: center;height: 50upx;">
										<view style="margin-right: 10upx;color: #ff5500;">我的评价</view>
										<trailerStars allowTap="0" :innerScore="item.wk_appraiseLevel">
										</trailerStars>
									</view>
									<view style="color: #8E97AE;margin-top: 0upx;">评价内容：
										{{item.wk_appraiseRemark}}
									</view>
								</view>
								<view style="display: flex;" v-else>
									<view @click="open_modal('appraise',item.id)" class="confirm">评价该商家</view>
								</view>
							</view>
						</view>
						<view class="order_btn_box" v-if="status_arr_index==1">
							<view v-if="order_status_child==0">
								<view @click="open_modal('startWork',item.id)" class="confirm">开始工作</view>
							</view>
							<view v-if="order_status_child==1">
								<view @click="open_modal('finishWork',item.id)" class="cancel">完成工作</view>
							</view>
						</view>
						<view class="order_btn_box" v-if="status_arr_index==2&&item.btr_settle_mode==0">
							<view @click="open_modal('showQRCode',item.payqr, 0, item.id)" class="confirm">显示核销二维码
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading_text" v-if="data.length==0&&!loading">暂无数据</view>
		</view>
		<!-- 遮罩内容 -->
		<uni-popup ref="popup" :mask-click="false">
			<view v-if="todo!='showQRCode'" style="overflow: hidden;" class="modal_box">
				<view v-if="status_arr_index==3" style="margin-top: 30upx;margin-left: 30upx;">
					<trailerStars allowTap="1" v-on:changeScore="changeScore" :innerScore="score">
					</trailerStars>
				</view>
				<view style="margin-top: 30upx;">
					<textarea v-model="reason" @input="textarea_ipt" style="text-indent: 20upx;"
						:placeholder="todo_remarks"></textarea>
					<view class="modal_btn">
						<view @click="close_modal()" class="modal_btn_cancel">取消</view>
						<view @click="process()" class="modal_btn_confirm">确认{{todo_title}}</view>
					</view>
				</view>
			</view>
			<view v-else style="overflow: hidden;text-align: center;" class="modal_box">
				<image style="width: 400upx;height: 400upx;margin-top: 30upx;" :src="qrcode">
				</image>
				<view style="justify-content: space-around;" class="modal_btn">
					<view @click="test_is_set()" class="modal_btn_cancel">关闭</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'
	import trailerStars from '../../components/starts/index.vue'

	export default {
		data() {
			return {
				serverUrlImg: this.serverUrl + 'show/',
				loading: false, //加载中...
				status_arr_index: 0, //数据状态列的当前索引
				order_status_child: 0, //招聘列表小状态index
				status_arr: commonData.order_status_arr_merchant, //订单类型数组
				data: [],
				workId: '',
				todo_title: '',
				todo_remarks: '',
				todo: '',
				reason: '',
				score: 5,
				qrcode: '', //核销二维码
				teamid: '', //组团取消的团组id
				picurls: '',
				is_group: 0,
				user_info: {},
				status_num_arr: [0, 0, 0, 0, 0],
				current_id: '',
			};
		},
		methods: {
			// 检测是否已结算
			test_is_set() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let params = {
					bizCatalog: 'TodoWorkEntity',
					handleMode: 'fetch',
					workid: this.current_id,
				}
				commonFun.requestUrl('&WsAjaxBiz=Worker&WsAjaxAction=entityDataHandle', params, res => {
					if (res.status) {
						console.log('检测是否已结算', res.data)
						uni.hideLoading()
						if (res.data.Result.status == 4) {
							uni.showModal({
								title: '商家未结算',
								confirmText: '关闭',
								showCancel: false,
								success: () => {
									this.close_modal()
								}
							})
						} else {
							this.change_status(3)
							this.close_modal()
						}
					} else {
						this.close_modal()
					}
				})
			},
			// 获取个人信息
			get_info() {
				commonFun.get_user_info(res => {
					if (res.status) {
						uni.hideLoading()
						let user_info = res.data.Result
						this.user_info = user_info
						// 右上角红点数字
						this.status_num_arr = [
							this.user_info.ss_waitEnrollTotal,
							this.user_info.ss_workingTotal,
							this.user_info.ss_waitSettleTotal,
							0,
							this.user_info.ss_unreadWKTotal_ALL,
						]
						uni.setStorageSync('USER_INFO', this.user_info)
						console.log('工单页面获取个人信息', this.user_info)
					}
				})
			},
			// 输入操作备注
			textarea_ipt(e) {
				this.reason = e.target.value
			},
			// 打开遮罩
			open_modal(todo, workId, is_group = 0, current_id = '') {
				this.is_group = is_group
				this.todo = todo
				this.$refs.popup.open('top')

				if (todo == 'showQRCode') {
					this.qrcode = commonFun.serverUrlReq + workId
					this.current_id = current_id
					console.log('核销二维码路径', this.qrcode)
				} else {
					if (is_group == 1) {
						this.teamid = workId
					} else {
						this.workId = workId
						this.teamid = 0
					}
					this.todo_remarks = commonData.todo_title_obj[todo]['remarks'] + (commonData.todo_title_obj[todo][
							'is_require'
						] ?
						'（必填）' : '')
					this.todo_title = commonData.todo_title_obj[todo]['title']
				}
			},
			// 关闭遮罩
			close_modal() {
				this.$refs.popup.close('top')
			},
			// 处理
			process() {
				let params = {
					bizCatalog: 'TodoWorkEntity',
					handleMode: commonData.todo_title_obj[this.todo]['handleMode'],
					todo: commonData.todo_title_obj[this.todo]['todo'],
					remark: this.reason,
					reason: this.reason,
					workid: this.workId,
					appraiseLevel: this.score,
					appraiseRemark: this.reason,
				}

				if (this.is_group == 1) {
					params.teamid = this.teamid
				} else {
					params.workId = this.workId
					params.workIds = [this.workId]
				}

				if (this.status_arr_index == 3 && this.score == 0) {
					uni.showModal({
						content: '请对会员进行评分',
						showCancel: false
					})
					return
				}
				if (commonData.todo_title_obj[this.todo]['is_require'] && params.reason == '') {
					uni.showModal({
						content: commonData.todo_title_obj[this.todo]['title'] + '备注是必填的！',
						showCancel: false
					})
					return
				}
				console.log('处理请请求参数', params)
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				commonFun.requestUrl('&WsAjaxBiz=Worker&WsAjaxAction=entityDataHandle', params, res => {
					if (res.status) {
						uni.showModal({
							content: this.todo_title + '成功！',
							showCancel: false,
							success: res => {
								this.reason = ''
								this.close_modal()
								if (this.todo == 'startWork') {
									this.order_status_child = 1
								}
								if (this.todo == 'finishWork') {
									this.status_arr_index = 2
									this.order_status_child = 0
								}
								this.get_data()
							}
						})
					}
					uni.hideLoading()
				})
			},
			// 评价星星回调
			changeScore(e) {
				this.score = e
			},
			// 获取数据
			get_data() {
				this.get_info()
				this.loading = true
				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				let children = this.status_arr[this.status_arr_index]['children']
				let params = {
					bizCatalog: 'TodoWorkEntity',
					handleMode: 'fetchall',
					pageIndex: 1,
					pageSize: 1000,
					orderby: 0,
					query: {
						recuritStatus: 3,
						status: children ? children[this.order_status_child]['wkstatus'] : this.status_arr[this
							.status_arr_index]['wkstatus'],
						teamrole: "", //0空-全部；1-单报项；2-所有团项；3-开团项；4-参团项； 
						teamstatus: "", //0空-全部；1-待参团；2-已提交参团待审核；3-已审核入团；4-参团被驳回；5-参团被踢出；6-已解散；7-被动取消；            
						recuritTitle: '', //招聘标题筛选  
						memberName: "", //成员姓名
					},
				}
				console.log('我的工单列表请求参数', params)
				commonFun.requestUrl('&WsAjaxBiz=Worker&WsAjaxAction=fetchPageData', params, res => {
					if (res.status) {
						this.data = res.data.Result.pageData
						this.check_box = this.data.map(item => false)
						console.log('我的工单获取数据列表', this.data)
					}
					this.loading = false
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			// 修改大状态列
			change_status(index) {
				this.status_arr_index = index
				this.order_status_child = 0
				this.get_data()
			},
			//招聘信息阶段小状态筛选
			change_status_child(index) { //招聘信息阶段小状态筛选
				this.order_status_child = index
				this.get_data()
			},
		},
		components: {
			trailerStars
		},
		onLoad(e) {
			this.status_arr_index = Number(e.status) || 0
			this.get_data()
		},
		onPullDownRefresh() {
			this.get_data()
		},
	};
</script>

<style>
	@import url("./index.css");
</style>