kly_uniapp/pages/merchant/index.vue

<!-- 商家-首页 -->

<template>
	<view class="main_width" style="padding-bottom: 70upx;">

		<!-- 发布招聘/扫码核销 -->
		<view class="img_box">
			<image @click="open_modal" mode="widthFix" :src="img_url_release"></image>
			<image @click="scanning" mode="widthFix" :src="img_url_scan"></image>
		</view>

		<!-- tab选择 -->
		<view class="index_tab">
			<view @click="change_tab_status(0)" class="index_tab_each">
				<image class="img_index_tab" :src="img_url_index_tab1"></image>
				<view :style="'font-weight: '+(tab_status==0?'bold;':'normal;')" class="title_index_tab">查看招聘</view>
				<view :style="tab_status==0?'color: #f56954;':'color: #afafaf;'" class="num_index_tab">
					{{count_one||''}}
				</view>
				<image class="num_bg_index_tab" :src="tab_status==0?img_url_pop_orange:img_url_pop_grey"
					v-if="count_one>0"></image>
			</view>
			<view @click="change_tab_status(1)" class="index_tab_each">
				<image class="img_index_tab" :src="img_url_index_tab2"></image>
				<view :style="'font-weight: '+(tab_status==1?'bold;':'normal;')" class="title_index_tab">查看工作</view>
				<view :style="tab_status==1?'color: #f56954;':'color: #afafaf;'" class="num_index_tab">
					{{count_two||''}}
				</view>
				<image class="num_bg_index_tab" :src="tab_status==1?img_url_pop_orange:img_url_pop_grey"
					v-if="count_two>0"></image>
			</view>
			<view @click="change_tab_status(2)" class="index_tab_each">
				<image class="img_index_tab" :src="img_url_index_tab3"></image>
				<view :style="'font-weight: '+(tab_status==2?'bold;':'normal;')" class="title_index_tab">历史发布</view>
				<view :style="tab_status==2?'color: #f56954;':'color: #afafaf;'" class="num_index_tab">
					{{count_three||''}}
				</view>
				<image class="num_bg_index_tab" :src="tab_status==2?img_url_pop_orange:img_url_pop_grey"
					v-if="count_three>0"></image>
			</view>
		</view>

		<!-- 主数据列表 -->
		<view class="index_mian_data">
			<view :key="item.id" v-for="(item,index) in data" class="index_mian_data_each">
				<view style="position: relative;">
					<navigator :url="'./../order/detail?id='+item.id" class="index_mian_title nowrap">{{item.title}}
					</navigator>
					<image v-if="tab_status==2" @click="delete_recruit(item.id)"
						style="width: 50upx;height: 50upx;position: absolute;right: 0upx;top: 20upx;"
						src="../../static/close-circle.png"></image>
					<view class="data_each_top">
						<view style="width: 45%;">
							<view :style="'background-color: '+(item.urgent_level=='0'?'#01bcc3;':'#00a2a7;')"
								class="tag_urgent">{{item.urgent_level=='0'?'完工即结':'今日零工'}}</view>
							<view class="needs">总需求：{{item.need_total}}</view>
							<view class="needs">已录用：{{item.count_signed_num}}</view>
						</view>
						<view v-if="show_canvas&&!loading" style="width: 55%;display: flex;align-items: center;">
							<canvasChart :value="item.chart_value">
							</canvasChart>
							<view @click="show_status(status_obj[item.status])" class="chart_right">
								进度{{item.chart_value*100}}%</view>
						</view>
					</view>
				</view>
				<view class="data_each_bot">
					<view @click="fuck_recruit(item.id,'terminate', '终止')" v-if="tab_status==0" class="each_btn">
						终止招聘</view>
					<view @click="fuck_recruit(item.id,'breakoff' ,'违约')" v-if="tab_status==1"
						style="background-color: #ff0000;" class="each_btn">违约招聘</view>
					<view @click="releaseInfo(item.urgent_level, item.id)" v-if="tab_status==2" class="each_btn">再发一单
					</view>
					<view style="background-color: #01bcc3;position: relative;" class="each_btn">
						<navigator :url="'./memberList?id='+item.id+'&status=2'" v-if="tab_status==0">
							待录用：{{item.accepted_no||''}}</navigator>
						<navigator :url="'./memberList?id='+item.id+'&status=6'" v-if="tab_status==1">
							待结算：{{item.todowork_status_four||''}}</navigator>
						<navigator :url="'./memberList?id='+item.id" style="color: #ffffff;" v-if="tab_status==2">评价
						</navigator>
						<!-- <view class="red_point"></view> -->
					</view>
				</view>
				<view class="data_each_bot">
					<view style="color: #f7942d;display: flex;align-items: center;">
						<image style="width: 35upx;height: 35upx;margin-right: 8upx;" :src="img_url_clock_orange">
						</image>
						<text
							v-if="item.settle_catalog==0">{{((item.begin_datetime_bright==item.finish_datetime_bright)||!item.finish_datetime_bright)?item.begin_datetime_bright.slice(5,10):(item.begin_datetime_bright.slice(5,10)+'~'+item.finish_datetime_bright.slice(5,10))}}</text>
						<text v-else>{{item.begin_datetime_bright.slice(5,10)+'开始'}}</text>
						<text style="margin-left: 15upx;">{{item.begin_hour}}~{{item.finish_hour}}</text>
					</view>

					<navigator v-if="tab_status!=2" :url="'./memberList?id='+item.id">
						<view style="display: flex;align-items: center;">
							<view style="margin-right: 15upx;color: #01bcc3;">
								{{item.enrolled_heads.length>0?'已报名人员':'查看全部'}}
							</view>
							<view class="has_signed">
								<image :key="index" v-for="(item2,index) in item.enrolled_heads"
									:src="serverUrl+'touxiang/'+item2+'.png'"></image>
							</view>
						</view>
					</navigator>
					<view style="margin-right: 15upx;color: #01bcc3;" v-else>{{status_obj[item.status]}}</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 30upx;" v-if="!loading&&data.length === 0">暂无数据</view>

		<!-- 点击发布招聘按钮后显示需要发布的招聘类型遮罩 -->
		<uni-popup ref="popup" :mask-click="false">
			<view style="position: relative;width: 100%;background-color: rgba(255,255,255,0.9);">
				<view class="cancel_btn" @click="close_release_popup">取消
				</view>
				<view class="popup">
					<view @click="releaseInfo(0)" class="image">
						<image mode="widthFix" :src="img_url_release2"></image>
						<view>完工即结</view>
					</view>
					<view @click="releaseInfo(1)" class="image">
						<image mode="widthFix" :src="img_url_release1"></image>
						<view>今日零工</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 商家终止/违约处理遮罩内容 -->
		<uni-popup ref="popup_mer" :mask-click="false">
			<view style="overflow: hidden;" class="modal_box">
				<view style="color: #01bcc3;font-weight: bold;text-align: center;line-height: 70upx;">
					{{todo_title}}招聘
				</view>
				<view style="display: flex;justify-content: center;">
					<view class="choose_add_break" v-if="todo=='breakoff'"
						style="text-align: center;margin-top: 10upx;margin-bottom: 10px;" @click="select_breakdate">
						{{breakdate||'选择违约日期'}}
					</view>
				</view>
				<view v-if="todo=='breakoff'" style="color: red;margin-bottom: 10upx;text-align: center;">
					*如违约，会扣除部分费用作为会员补偿金</view>
				<view style=" margin-top: 10upx;">
					<textarea v-model="reason" @input="textarea_ipt" style="text-indent: 20upx;"></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>
		</uni-popup>

		<!-- 违约日期选择遮罩 -->
		<uni-popup ref="popup_date" :mask-click="false">
			<view class="modal_box">
				<view style="padding-top: 30upx;">
					<view style="width: 50%;float: left;color: #01bcc3;line-height: 70upx;text-align: center;"
						:key="index" @click="picker_data(item)" v-for="(item,index) in pickDateList">{{item}}</view>
				</view>
				<view class="modal_btn">
					<view style="width: 50%;clear: both;top: ;" @click="close_date_modal" class="modal_btn_cancel">取消
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'
	import canvasChart from '../../components/canvas.vue'

	export default {
		data() {
			return {
				serverUrl: this.serverUrl,
				img_url_scan: commonFun.serverUrl + 'merchant/scan.png',
				img_url_release: commonFun.serverUrl + 'merchant/release.png',
				img_url_release1: commonFun.serverUrl + 'merchant/release1.png',
				img_url_release2: commonFun.serverUrl + 'merchant/release2.png',
				img_url_index_tab1: commonFun.serverUrl + 'merchant/index_tab1.png',
				img_url_index_tab2: commonFun.serverUrl + 'merchant/index_tab2.png',
				img_url_index_tab3: commonFun.serverUrl + 'merchant/index_tab3.png',
				img_url_pop_orange: commonFun.serverUrl + 'merchant/pop_orange.png',
				img_url_pop_grey: commonFun.serverUrl + 'merchant/pop_grey.png',
				img_url_clock_orange: commonFun.serverUrl + 'merchant/clock_orange.png',

				user_info: {}, //用户个人信息
				count_one: 0,
				count_two: 0,
				count_three: 0,
				has_get_user_info: false, //是否已经获取到了个人信息
				finance_numtotalbalance: 0, //当前可用发布次数
				finance_balance: 0, //账户余额
				tab_status: 0, //状态栏索引
				count_num_obj: {},
				loading: true, //主数据加载中
				data: [], //主数据
				todo_id: '', //当前违约/终止的招聘id
				todo_title: '', //违约/招聘标题
				todo: '', //terminate或breakoff代表终止招聘和违约招聘
				reason: '', //操作备注
				breakdate: '', //选择违约的日期
				pickDateList: [], //违约招聘可选日期数组
				show_canvas: true, //是否显示图表
				status_obj: {
					'-2': '违约中断',
					'-1': '被驳回',
					'0': '待提交',
					'1': '待审核',
					'2': '已审核',
					'3': '已终止',
					'4': '手工下架',
					'5': '招满自动下架',
					'6': '过期自动下架',
				},
			}
		},
		onLoad() {},
		onShow() {
			this.show_canvas = true
			this.$refs.popup.close('top')
			this.get_data()
		},
		onPullDownRefresh() {
			this.data = []
			this.get_data()
		},
		methods: {
			// 删除招聘信息
			delete_recruit(trader_recruit_id) {
				let that = this
				uni.showModal({
					title: '确认删除？',
					content:'删除之后不能恢复',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...',
								mask: true
							})
							let params = {
								bizCatalog: 'TraderRecruitIsDelete',
								handleMode: 'UpdateIsDelete',
								trader_recruit_id,
							}
							commonFun.requestUrl('&WsAjaxBiz=Trader&WsAjaxAction=entityDataHandle', params,
								res => {
									if (res.status) {
										uni.showModal({
											content: '删除成功！',
											showCancel: false,
											success: res => {
												that.get_data()
											}
										})
									}
									uni.hideLoading()
								})
						}
					}
				})
			},
			show_status(content) {
				uni.showModal({
					content,
					showCancel: false
				})
			},
			// 点击发布招聘
			releaseInfo(urgent_level, id = '') {
				if (!this.has_get_user_info) {
					uni.showModal({
						content: '个人信息加载中，请稍后重试！',
						showCancel: false
					})
					return
				}
				// 账户余额检查
				if (Number(this.user_info.finance_balance) < 0) {
					uni.showModal({
						title: '请充值后发布',
						content: '您有订单未及时支付，平台已垫付，请补齐欠款',
						confirmText: '去充值',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../personal/wallet'
								})
							}
						}
					})
					return
				}
				// 实名认证检查
				if (this.user_info.lawer_idcard) {
					if (urgent_level == 0) {
						uni.navigateTo({
							url: './releaseInfo?trader_level=' + this.user_info.trader_level + '&id=' + id
						})
					} else {
						uni.navigateTo({
							url: './releaseInfoUrgent?trader_level=' + this.user_info.trader_level + '&id=' + id
						})
					}
				} else {
					uni.showModal({
						content: '实名后即可发布招聘信息！',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '../personal/authentication_merchant'
								})
							}
						}
					})
				}
			},
			// 点击扫码核销
			scanning() {
				let paySettleMer = commonFun.paySettleMer
				uni.scanCode({
					success: (res) => {
						// 测试开始20220527
						// uni.showModal({
						// 	title: '扫码错误',
						// 	content: '请在【查看工作】中手动结算！',
						// 	showCancel: false
						// })
						// return
						// 测试结束

						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						if (res.scanType != 'QR_CODE' || res.scanType == '') {
							uni.showModal({
								title: '扫码错误',
								content: '请扫描正确的二维码！',
								showCancel: false
							})
						} else {
							paySettleMer(res.result.replace('workid=', ''), () => {
								this.get_data()
							})
						}
					},
					fail: res => {
						if (res.errMsg.indexOf('cancel') == -1) {
							uni.showModal({
								title: '扫码错误',
								content: JSON.stringify(res),
								showCancel: false
							})
						}
					}
				});
			},
			// 获取用户信息
			get_info() {
				this.has_get_user_info = false
				this.finance_balance = 0
				commonFun.get_user_info(res => {
					if (res.status) {
						uni.hideLoading()
						this.has_get_user_info = true
						let user_info = res.data.Result
						this.user_info = user_info
						uni.setStorageSync('USER_INFO', this.user_info)
						this.finance_balance = user_info.finance_balance //当前余额
						this.finance_numtotalbalance = this.user_info.finance_numFreeCount + this.user_info
							.finance_numtotalbalance //当前剩余次数
						console.log('商家首页打印个人信息', this.user_info)
						commonFun.init_go_easy(this.user_info, 'mer_')
						setTimeout(() => {
							commonFun.get_message_data()
						}, 2000)
					}
					uni.stopPullDownRefresh()
				})
			},
			//商家首页获取数据
			get_data(callback = () => {}) {
				this.loading = true
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let params = {
					bizCatalog: 'TodoWorkEntity',
					handleMode: 'fetchallRecuritNew',
					pageIndex: 1,
					pageSize: 1000,
					status: String(this.tab_status + 1)
				}
				console.log('商家首页列表请求参数', params)
				commonFun.requestUrl('&WsAjaxBiz=Trader&WsAjaxAction=fetchPageData', params, res => {
					if (res.status) {
						this.count_one = res.data.Result.count_one
						this.count_two = res.data.Result.count_two
						// this.count_three = res.data.Result.count_three
						this.get_info()
						this.data = res.data.Result.pageData.map(item => {
							let count_signed_num = Number(item.accepted_ok) + Number(item
								.todowork_status_three) + Number(item.todowork_status_four) + Number(
								item.todowork_status_five)
							console.log(count_signed_num)
							return ({
								...item,
								count_signed_num,
								enrolled_heads: commonFun.formate_enrolled_heads(item
									.enrolled_heads, (
										count_signed_num)),
								chart_value: (count_signed_num / Number(item.need_total))
									.toFixed(2)
							})
						})
						console.log('商家首页获取招聘信息列表', this.data)
					}
					this.loading = false
					uni.hideLoading()
					uni.stopPullDownRefresh()
					callback()
				})
			},
			// 获取招聘情数据（目的是获取 违约招聘可选日期）
			get_detail_data(bizId, type) {
				uni.showLoading({
					title: '加载中...'
				})
				commonFun.requestUrl('&WsAjaxBiz=Worker&WsAjaxAction=entityDataHandle', {
					bizCatalog: 'RecruitEntity',
					handleMode: 'fetch',
					bizId
				}, res => {
					if (res.status) {
						let pickDateList = res.data.Result.pickDateList
						let itemList = []
						for (let i in pickDateList) {
							itemList.push(pickDateList[i])
						}
						this.pickDateList = itemList
						if (this.pickDateList.length === 1) {
							this.breakdate = this.pickDateList[0]
						}
						if (type == 'fuck_recruit') {
							if (this.pickDateList == 0) {
								uni.showModal({
									content: '此招聘不可违约！',
									showCancel: false
								})
							} else {
								this.$refs.popup_mer.open('top')
								this.show_canvas = false
							}
						}
						if (type == 'process') {
							this.get_data()
						}
					}
					uni.hideLoading()
				})
			},
			// 打开商家处理遮罩后，点击确认违约/终止按钮
			process() {
				let params = {
					bizCatalog: 'RecruitEntity',
					handleMode: this.todo,
					recuritIds: [this.todo_id],
					reason: this.reason,
					breakdate: this.breakdate,
				}
				if (this.todo == 'breakoff' && this.breakdate == '') {
					uni.showModal({
						content: '请选择违约日期！',
						showCancel: false
					})
					return
				}
				if (this.reason == '') {
					uni.showModal({
						content: this.todo_title + '备注不可为空！',
						showCancel: false
					})
					return
				}
				console.log('商家处理违约或终止招聘请求参数', params)
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				commonFun.requestUrl('&WsAjaxBiz=Trader&WsAjaxAction=entityDataHandle', params, res => {
					if (res.status) {
						uni.showModal({
							content: this.todo_title + '成功！',
							showCancel: false,
							success: res => {
								this.breakdate = ''
								this.reason = ''
								this.close_modal()
								if (this.todo == 'breakoff') {
									this.get_detail_data(this.todo_id, 'process')
								} else {
									this.get_data()
								}
							}
						})
					}
					uni.hideLoading()
				})
			},
			// 打开选择日期遮罩
			select_breakdate() {
				this.$refs.popup_date.open('top')
				this.show_canvas = false
			},
			// 关闭日期选择遮罩
			close_date_modal() {
				this.$refs.popup_date.close('top')
				// this.show_canvas = true
			},
			// 关闭发布招聘遮罩
			close_release_popup() {
				this.$refs.popup.close('top')
				setTimeout(() => {
					this.show_canvas = true
				}, 300)
			},
			// 违约招聘选择违约日期
			picker_data(date) {
				this.close_date_modal()
				this.breakdate = date
			},
			// 打开商家处理遮罩
			open_modal() {
				this.$refs.popup.open('top')
				this.show_canvas = false
			},
			// 关闭商家处理遮罩
			close_modal() {
				this.$refs.popup_mer.close('top')
				setTimeout(() => {
					this.show_canvas = true
				}, 300)
			},
			// 输入操作备注
			textarea_ipt(e) {
				this.reason = e.target.value
			},
			// 切换tab
			change_tab_status(tab_status) {
				this.tab_status = tab_status
				this.data = []
				this.get_data()
			},
			// 点击违约/终止招聘按钮
			fuck_recruit(id, todo, todo_title) {
				this.todo = todo
				this.todo_title = todo_title
				this.todo_id = id
				if (todo == 'breakoff') {
					this.get_detail_data(id, 'fuck_recruit')
				} else {
					this.$refs.popup_mer.open('top')
					this.show_canvas = false
				}
			},
		},
		components: {
			canvasChart
		},
	}
</script>

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