技师闲时设置，视频圈增加状态显示

pages/my/mangshi.vue

@@ -2,28 +2,32 @@
 	<view>
 		<view class="timeView">
 			<view class="timeView-top">
-				<span class="dx_title">是否接单 <!-- <text class="switchTxt">{{switchTxt=='true'?'接单':'不接单'}}</text> --></span>
+				<span class="dx_title">是否接单
+					<!-- <text class="switchTxt">{{switchTxt=='true'?'接单':'不接单'}}</text> --></span>
 				<switch :checked='isTrue' style="transform:scale(0.7)" color="#029d88" @change="switch1Change" />
 			</view>
 			<view class="selectTimt">
 				<view class="dx_title">选择接单时间</view>
+				<view class="listTime">
 					<view class="selectTimt-bottom">
-					<hTimePicker class="selectTimt-time" dayNum='0' sTime="0" cTime="23" interval="30" @changeTime="bindTimeChange">
+						<view @click="showPopup">
-					  <view slot="pCon" class="changeTime">
+							<uni-title type="h4" title="开始时间" align="center" ></uni-title>
-					    <view class="selectTimt-time-title">开始时间</view>
 							<view class="uni-input">{{starTime}}</view>
 						</view>
-					</hTimePicker>
+						<!-- 弹出层本身 -->
-					<hTimePickerEnd class="selectTimt-time" dayNum='0' sTime="0" cTime="23" interval="30" @changeTime="bindTimeChangeEndTime">
+						<scrollbarPicker :visibleShow.sync="pickerVisible" @Time='bindTimeChange'/>
-					  <view slot="pCon" class="changeTime">
+					</view>
-					    <view class="selectTimt-time-title">结束时间</view>
+					<view class="selectTimt-bottom">
+						<view @click="showEndPopup">
+							<uni-title type="h4" title="结束时间" align="center" ></uni-title>
 							<view class="uni-input">
 								<span>{{endTime}}</span>
 							</view>
 						</view>
-					</hTimePickerEnd>
+						<!-- 弹出层本身 -->
+						<scrollbarEndPicker :visibleShow.sync="pickerEndVisible" @Time='bindTimeChangeEndTime'/>
+					</view>
 				</view>
-				
 			</view>
 			<view class="container-top">
 				<span>设置不可接单时间</span>
@@ -58,8 +62,9 @@
 </template>
 
 <script>
-	import hTimePicker from "@/components/h-timePicker/h-timePicker.vue";
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
-	import hTimePickerEnd from "@/components/h-timePicker/h-timePickerEnd.vue";
+	import scrollbarPicker from '@/pages/my/scrollbarPicker.vue'
+	import scrollbarEndPicker from '@/pages/my/scrollbarEndPicker.vue'
 	import {
 		tomorrow,
 		dayAfterTomorrow,
@@ -72,14 +77,17 @@
 	import times from '@/components/pretty-times/pretty-times.vue'
 	export default {
 		components: {
+			uniPopup,
+			scrollbarPicker,
+			scrollbarEndPicker,
 			times,
-			hTimePicker,
-			hTimePickerEnd
 		},
 		data() {
 			return {
-				today: [
+				isPopupShow: false,
-					{
+				pickerVisible:false,
+				pickerEndVisible:false,
+				today: [{
 					artificerTime: '00:00',
 					isSelected: false,
 					disable: false,
@@ -368,8 +376,7 @@
 					disable: false,
 					title: '可预约',
 					createTime: currentTime().date
-					}
+				}],
-				],
 				checkbox1: [],
 				selectedTabColor: 'rgb(40, 186, 146)',
 				dateActive: 0, //选中的日期索引
@@ -377,7 +384,7 @@
 				multiSelector: '',
 				isTrue: true,
 				starTime: '00:00',
-				endTime: '23:59',
+				endTime: '23:30',
 				appointTime: [],
 				disableTimeSlot: [],
 				newmsList: [],
@@ -395,7 +402,10 @@
 		onLoad() {
 
 			if (this.timeCurrent == '') {
-				this.timeCurrent=tomorrow().tomorrow+' '+this.endTime;
+				this.timeCurrent = currentTime().date + ' ' + this.starTime;
+			}
+			if (this.tomorrowTime == '') {
+				this.tomorrowTime = currentTime().date + ' ' + this.endTime;
 			}
 			// this.tomorrowTime=currentTime().date+' '+currentTime().times;
 			this.timeList = currentTime().date;
@@ -404,11 +414,26 @@
 			this.getTimeMs(currentTime().myDate)
 		},
 		methods: {
+			showPopup() {
+				this.pickerVisible = true;
+			},
+			showEndPopup(){
+				this.pickerEndVisible = true;
+			},
+			selectItem(item) {
+				console.log('选中的项目:', item);
+				// 处理选中项逻辑
+				// ...
+				this.isPopupShow = false;
+			},
+
 			isToday(date) {
 				const today = new Date();
 				return date.getDate() === today.getDate() // 比较日期
-				&& date.getMonth() === today.getMonth() // 比较月份
+					&&
-				&& date.getFullYear() === today.getFullYear(); // 比较年份
+					date.getMonth() === today.getMonth() // 比较月份
+					&&
+					date.getFullYear() === today.getFullYear(); // 比较年份
 			},
 			getTimeMs(someDate) {
 				// const someDate = new Date(); // 假设你有一个日期对象
@@ -521,12 +546,15 @@
 
 			},
 			bindTimeChange: function(e) { // 当天接单开始时间
+				console.log(e);
 				this.starTime = e;
-				this.tomorrowTime=currentTime().date+' '+this.starTime;
+				this.timeCurrent = currentTime().date + ' ' + this.starTime;
+				console.log(this.timeCurrent);
 			},
 			bindTimeChangeEndTime(e) { //次日接单结束时间
 				this.endTime = e;
-				this.timeCurrent=tomorrow().tomorrow+' '+this.endTime;
+				this.tomorrowTime = currentTime().date + ' ' + this.endTime;
+				console.log(this.tomorrowTime);
 			},
 			switch1Change: function(e) {
 				this.switchTxt = e.detail.value
@@ -556,6 +584,12 @@
 			getTime(time) {
 				this.msList = time;
 			},
+			scrollTo(titleNo) {
+				let index = this.list.indexOf(titleNo);
+				index -= 2;
+				let num = index * this.itemHeight;
+				this.$refs.scrollMenuRef.wrap.scrollTop = num;
+			},
 			sub() {
 				if (this.endTime >= this.starTime) {
 					this.saveMangShi();
@@ -598,6 +632,11 @@
 				}
 			},
 			saveMangShi() {
+				console.log(this.starTime);
+				console.log(this.endTime);
+				console.log(this.timeCurrent);
+				console.log(this.tomorrowTime);
+				this.$queue.showLoading('设置中...');
 				var time = [];
 				for (var i = 0; i < this.timeData.length; i++) {
 					time.push(
@@ -605,14 +644,16 @@
 					)
 				}
 				var data = {
-					idleTime:this.tomorrowTime+','+this.timeCurrent,
+					idleTime: this.timeCurrent + ',' + this.tomorrowTime,
 					busyTime: time.toString(),
 					artificerId: uni.getStorageSync('artificerId')
 				}
 				if (this.selectDate == '明天') {
-					data.idleTime=(this.timeList+' '+this.starTime)+','+(dayAfterTomorrow().dayAfterTomorrow+' '+this.endTime);
+					data.idleTime = (this.timeList + ' ' + this.starTime) + ',' + (dayAfterTomorrow().dayAfterTomorrow +
+						' ' + this.endTime);
 				} else if (this.selectDate == '后天') {
-					data.idleTime=(this.timeList+' '+this.starTime)+','+(dayAfterTomorrowD().dayAfterTomorrowD+' '+this.endTime);
+					data.idleTime = (this.timeList + ' ' + this.starTime) + ',' + (dayAfterTomorrowD().dayAfterTomorrowD +
+						' ' + this.endTime);
 				}
 				this.$Request.postT('/app/artificerTime/setArtificerTime', data).then(res => {
 					if (res.code == 0) {
@@ -625,7 +666,8 @@
 			},
 			getMsTime(artificerDate) {
 				// this.yearsDate = artificerDate;
-				this.$Request.getT('/app/artificerTime/selectArtificerTimeByArtificerId?artificerId=' + uni.getStorageSync('artificerId') + '&artificerDate=' + artificerDate).then(res => {
+				this.$Request.getT('/app/artificerTime/selectArtificerTimeByArtificerId?artificerId=' + uni.getStorageSync(
+					'artificerId') + '&artificerDate=' + artificerDate).then(res => {
 					if (res.code == 0) {
 						if (res.data != '') {
 							var data = [];
@@ -661,8 +703,8 @@
 							this.isTrue = false
 						}
 						if (res.startTime) {
-							this.starTime=res.startTime.slice(11,16);
+							this.starTime = res.startTime.slice(0, 5);
-							this.tomorrowTime=jintian+' '+this.starTime;
+							this.timeCurrent = jintian + ' ' + this.starTime;
 						} else {
 							// 获取当前时间
 							const now = new Date();
@@ -676,9 +718,9 @@
 							}
 							// 格式化输出
 							this.starTime = `${hours.toString().padStart(2, '0')}:${halfHour ? '30' : '00'}`;
-							this.tomorrowTime=jintian+' '+this.starTime;
+							this.timeCurrent = jintian + ' ' + this.starTime;
 						}
-						this.endTime=res.endTime.slice(11,16);
+						this.endTime = res.endTime.slice(0, 5);
 					} else {
 						this.isTrue = false
 					}
@@ -695,10 +737,12 @@
 		margin-right: 5px;
 		margin-left: 20rpx;
 	}
+
 	.container-top span:nth-child(2) {
 		font-size: 13px;
 		color: #ccc;
 	}
+
 	.container-top {
 		width: 100%;
 		display: flex;
@@ -707,24 +751,29 @@
 		padding-top: 10px;
 		padding-left: 5px;
 	}
+
 	.active {
 		border: 1px solid #28ba92;
 		font-weight: bold;
 		color: rgb(40, 186, 146);
 	}
+
 	.disable {
 		border: 1px solid #EEEEEE;
 		background: #F1F3F6 !important;
 		color: #999;
 	}
+
 	/deep/.checkbox__inner {
 		display: none;
 	}
+
 	.all {
 		white-space: nowrap;
 		font-size: 10px;
 		padding-top: 5px;
 	}
+
 	.item-box {
 		width: 100%;
 		height: 50px;
@@ -737,11 +786,13 @@
 		align-items: center;
 		justify-content: center;
 	}
+
 	.item {
 		width: 25%;
 		padding: 0 4px;
 		margin: 6px 0;
 	}
+
 	.time-box {
 		width: 100%;
 		padding: 13px 5px 12px;
@@ -749,6 +800,7 @@
 		flex-wrap: wrap;
 		background-color: #fff;
 	}
+
 	.flex-box .date-box {
 		border: none;
 		display: flex;
@@ -759,6 +811,7 @@
 		font-size: 14px;
 		color: #818181;
 	}
+
 	.flex-box {
 		display: inline-block;
 		height: 60px;
@@ -766,9 +819,11 @@
 		margin: 0 3px 0 3px;
 		box-sizing: border-box;
 	}
+
 	/deep/.uni-scroll-view-content {
 		display: flex;
 	}
+
 	/deep/.scroll-view_H {
 		width: 100%;
 		white-space: nowrap;
@@ -777,30 +832,32 @@
 		position: relative;
 		padding-top: 10px;
 	}
+
 	.borderb {
 		border-bottom: 2px solid rgb(40, 186, 146);
 	}
+
 	.selectTimt-time-title {
 		text-align: center;
 		margin-bottom: 5px;
 	}
+
 	/deep/.uni-input {
 		text-align: center;
 		color: #28BA92;
 	}
+
 	.selectTimt-time {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 	}
+
 	.selectTimt-bottom {
 		margin-top: 10px;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-around;
 		width: 100%;
 	}
+
 	.selectTimt {
 		display: flex;
 		flex-direction: column;
@@ -809,17 +866,20 @@
 		background: #fff;
 		margin: 10px auto;
 	}
+
 	.dx_title {
 		font-size: 14px;
 		font-weight: bold;
 		margin-left: 20rpx;
 	}
+
 	.switchTxt {
 		font-size: 13px;
 		font-weight: 400;
 		margin-left: 5px;
 		color: #28BA92;
 	}
+
 	.timeView-top {
 		display: flex;
 		flex-direction: row;
@@ -830,6 +890,7 @@
 		background: #fff;
 		margin: 10px auto;
 	}
+
 	page {
 		background: #f7f7f7;
 	}
@@ -946,6 +1007,7 @@
 		font-size: 30rpx;
 		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
 	}
+
 	.push-button {
 		width: 100%;
 		height: 48px;
@@ -956,6 +1018,7 @@
 		align-items: center;
 		margin: 0 auto;
 	}
+
 	.detail-btn {
 		display: inline-block;
 		width: 92%;
@@ -968,4 +1031,40 @@
 		margin-top: 4px;
 		font-size: 34rpx;
 	}
+
+	.list {
+		background-color: #fff;
+
+		/deep/ .uni-scroll-view-content {
+			display: flex;
+			flex-flow: column;
+			align-items: center;
+			overflow-x: hidden;
+		}
+
+	}
+
+	.list-item {
+		height: 40px;
+		box-sizing: border-box;
+		line-height: 40px;
+		color: #bfc2c9;
+	}
+
+	.active_li {
+		color: #000;
+		border-top: 1px solid #bfc2c9;
+		border-bottom: 1px solid #bfc2c9;
+	}
+
+	.popup-content {
+		display: flex;
+		justify-content: space-between;
+	}
+	.listTime{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+	}
 </style>

pages/my/scrollbarEndPicker.vue

@@ -0,0 +1,125 @@
+<template>
+	<div>
+		<VuePicker :data="pickData" :showToolbar="true" @cancel="cancel" @confirm="confirm"
+			:visible.sync="pickerVisible" />
+	</div>
+</template>
+
+<script>
+	import VuePicker from 'vue-pickers'
+	const tdata = [{
+			label: '00',
+		},
+		{
+			label: '01',
+		},
+		{
+			label: '02',
+		},
+		{
+			label: '03',
+		},
+		{
+			label: '04',
+		},
+		{
+			label: '05',
+		},
+		{
+			label: '06',
+		},
+		{
+			label: '07',
+		},
+		{
+			label: '08',
+		},
+		{
+			label: '09',
+		},
+		{
+			label: '10',
+		},
+		{
+			label: '11',
+		},
+		{
+			label: '12',
+		},
+		{
+			label: '13',
+		},
+		{
+			label: '14',
+		},
+		{
+			label: '15',
+		},
+		{
+			label: '16',
+		},
+		{
+			label: '17',
+		},
+		{
+			label: '18',
+		},
+		{
+			label: '19',
+		},
+		{
+			label: '20',
+		},
+		{
+			label: '21',
+		},
+		{
+			label: '22',
+		},
+		{
+			label: '23',
+		},
+	]
+	var tdata2 = [{
+			label: '00',
+		},
+		{
+			label: '30',
+		},
+	]
+
+	export default {
+		components: {
+			VuePicker
+		},
+		props: {
+			visibleShow: Boolean,
+		},
+		data() {
+			return {
+				pickData: [
+					tdata,
+					tdata2
+				],
+				pickerVisible: false,
+				result: ''
+			}
+		},
+		watch: {
+			visibleShow(val) {
+				this.pickerVisible = val
+			}
+		},
+		methods: {
+			cancel() {
+				this.result = 'click cancel result: null'
+				this.$emit('update:visibleShow', false);
+			},
+			confirm(res) {
+				//console.log("this.result",res[0].label)
+				this.$emit('update:visibleShow', false);
+				this.$emit('Time', `${res[0].label}:${res[1].label}`);
+			}
+		}
+	}
+</script>

pages/my/scrollbarPicker.vue

@@ -0,0 +1,125 @@
+<template>
+	<div>
+		<VuePicker :data="pickData" :showToolbar="true" @cancel="cancel" @confirm="confirm"
+			:visible.sync="pickerVisible" />
+	</div>
+</template>
+
+<script>
+	import VuePicker from 'vue-pickers'
+	const tdata = [{
+			label: '00',
+		},
+		{
+			label: '01',
+		},
+		{
+			label: '02',
+		},
+		{
+			label: '03',
+		},
+		{
+			label: '04',
+		},
+		{
+			label: '05',
+		},
+		{
+			label: '06',
+		},
+		{
+			label: '07',
+		},
+		{
+			label: '08',
+		},
+		{
+			label: '09',
+		},
+		{
+			label: '10',
+		},
+		{
+			label: '11',
+		},
+		{
+			label: '12',
+		},
+		{
+			label: '13',
+		},
+		{
+			label: '14',
+		},
+		{
+			label: '15',
+		},
+		{
+			label: '16',
+		},
+		{
+			label: '17',
+		},
+		{
+			label: '18',
+		},
+		{
+			label: '19',
+		},
+		{
+			label: '20',
+		},
+		{
+			label: '21',
+		},
+		{
+			label: '22',
+		},
+		{
+			label: '23',
+		},
+	]
+	var tdata2 = [{
+			label: '00',
+		},
+		{
+			label: '30',
+		},
+	]
+
+	export default {
+		components: {
+			VuePicker
+		},
+		props: {
+			visibleShow: Boolean,
+		},
+		data() {
+			return {
+				pickData: [
+					tdata,
+					tdata2
+				],
+				pickerVisible: false,
+				result: ''
+			}
+		},
+		watch: {
+			visibleShow(val) {
+				this.pickerVisible = val
+			}
+		},
+		methods: {
+			cancel() {
+				this.result = 'click cancel result: null'
+				this.$emit('update:visibleShow', false);
+			},
+			confirm(res) {
+				//console.log("this.result",res[0].label)
+				this.$emit('update:visibleShow', false);
+				this.$emit('Time', `${res[0].label}:${res[1].label}`);
+			}
+		}
+	}
+</script>

pages/video/index.vue

@@ -25,13 +25,18 @@
 			</view>	
 		</view>	
 		<scroll-view :style="'width: 100%; height: '+ (windowHeight) +'px; background-color: #fff;'" :scroll-y="true" @scrolltolower="scrolltolower" :lower-threshold="lowerThreshold">
-			<view style="display: flex; flex-direction: row; flex-wrap: wrap;padding-top: 46px;">
+			<view style="display: flex; flex-direction: row; flex-wrap: wrap;padding-top: 60px;">
 				<checkbox-group class="checkbox-group" @change="checkboxChange">
 					<view class="checkbox-group-list" v-for="(list,index) in dataList" :key="index">
 						<view class="data-list">
 							<image v-if="checkboxShow==1" @click="towxh5Video(list)" :src="list.picPath" mode="aspectFill" style="width: 100%; height: 100%;border-radius: 10rpx;"></image>
 							<image v-if="checkboxShow==0" :src="list.picPath" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 10rpx;"></image>
 							<checkbox v-if="checkboxShow==0" class="check-list" style="border-radius:50%;" activeBackgroundColor="#029d88" color="#029d88" :value="list.id.toString()" :checked="checkbox"/>
+							<view class="index-card-view-title-right">
+								<view v-if="list.status ==0" class="index-card-view-title-right-text-dsp">待审批</view>
+								<view v-if="list.status ==1" class="index-card-view-title-right-text-tg">通过</view>
+								<view v-if="list.status ==2" class="index-card-view-title-right-text-jj">拒绝</view>
+							</view>
 						</view>
 					</view>
 				</checkbox-group>
@@ -493,4 +498,33 @@
 	.service-deleimg{
 		width: 40rpx;
 		height:40rpx;}
+		
+	.index-card-view-title-right{
+		width: 65px;
+		height: 47rpx;
+		line-height: 47rpx;
+		text-align: center;
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #fff;
+		position: absolute;
+		top:10rpx;
+		left:10rpx;
+		/* margin-left: 85px; */
+	}
+	.index-card-view-title-right-text-dsp{
+		border-top-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		background: linear-gradient(90deg, #2794ff, #65aff7, #9accfd);
+	}
+	.index-card-view-title-right-text-tg{
+		border-top-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
+	}
+	.index-card-view-title-right-text-jj{
+		border-top-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		background: linear-gradient(90deg, #e54d42, #e1766f, #dda39f);
+	}
 </style>