Fix：3122 【商城小程序】填写入驻申请资料页面没有店铺营业时间

components/timePickerPopup/README.md

@@ -0,0 +1,87 @@
+### 使用组件
+
+```html
+<time-picker-popup ref="TimePickerPopupRef" :value="value" @confirm="confirm"></time-picker-popup>
+```
+
+### 引入组件
+
+```javascript
+import TimePickerPopup from '@/components/time-picker-popup/time-picker-popup.vue';
+```
+
+### 注册组件
+
+```javascript
+export default {
+    components: { TimePickerPopup },
+    data() {
+        return {
+            value: ['00', '00', '00', '00']
+        }
+    },
+	onReady() {
+		this.open();
+	},
+    methods: {
+        confirm(data) {
+			uni.showToast({
+				title: `${data[0]}:${data[1]}-${data[2]}:${data[3]}`
+			})
+        },
+		open() {
+			this.$refs.TimePickerPopupRef.open();
+		}
+    }
+}
+```
+
+### 参数
+
+```javascript
+// 当前选中的值
+value: {
+	type: Array,
+	default: () => (['00', '00', '00', '00'])
+},
+// 标题
+title: {
+	type: String,
+	default: '时间'
+},
+// 取消按钮文字
+cancelText: {
+	type: String,
+	default: '取消'
+},
+// 取消按钮颜色
+canceColor: {
+	type: String,
+	default: '#666666'
+},
+// 确定按钮文字
+confirmText: {
+	type: String,
+	default: '确定'
+},
+// 确定按钮颜色
+confirmColor: {
+	type: String,
+	default: '#2bb781'
+},
+// 分割符
+segmentation: {
+	type: String,
+	default: '-'
+},
+// 设置选择器中间选中框的类名 注意页面或组件的style中写了scoped时，需要在类名前写/deep/
+indicatorClass: {
+	type: String,
+	default: 'picker-view__indicator'
+},
+// 设置选择器中间选中框的样式
+indicatorStyle: {
+	type: String,
+	default: ''
+},
+```

components/timePickerPopup/time-picker-popup.vue

@@ -0,0 +1,159 @@
+<template>
+	<!-- 时间选择器弹窗 -->
+	<uni-popup ref="popup" type="bottom" :safe-area="false">
+		<view class="custom-picker">
+			<view class="custom-picker__header">
+				<view class="cancel" :style="{ color: canceColor }" @tap="onCancel">{{ cancelText }}</view>
+				<view class="title">{{ title }}</view>
+				<view class="confirm" :style="{ color: confirmColor }" @tap="onConfirm">{{ confirmText }}</view>
+			</view>
+			<picker-view :indicator-class="indicatorClass" :indicator-style="indicatorStyle" class="picker-view"
+				:value="value" @change="bindChange" @pickstart="pickstart" @pickend="pickend">
+				<picker-view-column>
+					<view class="picker-view__item" v-for="(item,index) in rangeList[0]" :key="index">{{item}}</view>
+				</picker-view-column>
+				<picker-view-column>
+					<view class="picker-view__item" v-for="(item,index) in rangeList[1]" :key="index">{{item}}</view>
+				</picker-view-column>
+				<view class="picker-view__segmentation">{{ segmentation }}</view>
+				<picker-view-column>
+					<view class="picker-view__item" v-for="(item,index) in rangeList[2]" :key="index">{{item}}</view>
+				</picker-view-column>
+				<picker-view-column>
+					<view class="picker-view__item" v-for="(item,index) in rangeList[3]" :key="index">{{item}}</view>
+				</picker-view-column>
+			</picker-view>
+		</view>
+	</uni-popup>
+</template>
+
+<script>
+	import utils, {
+		props,
+		range
+	} from './utils.js';
+	export default {
+		name: 'TimePickerPopup',
+		props: props,
+		data() {
+			return {
+				rangeList: utils.range,
+				pickerValue: [0, 0, 0, 0],
+				isScoll: false, // 是否正在滚动
+			}
+		},
+		methods: {
+			/**
+			 * 开启弹窗
+			 */
+			open() {
+				// 判断是否传入props -> value
+				if (Array.isArray(this.value) && this.value.length) {
+					this.pickerValue = this.value.map((item, index) => this.rangeList[index].findIndex(child =>
+						child == this.value[index]));
+				} else {
+					this.pickerValue = [0, 0, 0, 0];
+				}
+				this.$refs.popup.open();
+			},
+			/**
+			 * 关闭弹窗
+			 */
+			close() {
+				this.$refs.popup.close();
+				// 重置选中数据
+				this.pickerValue = [0, 0, 0, 0];
+			},
+			/**
+			 * 点击确定
+			 */
+			onConfirm() {
+				if (!this.isScoll) {
+					let data = this.value || ['00', '00', '00', '00'];
+					if (this.pickerValue && this.pickerValue.length) {
+						data = this.pickerValue.map((item, index) => String(this.rangeList[index][item]));
+					}
+					this.$emit('confirm', data);
+					this.close();
+				}
+			},
+			/**
+			 * 点击取消
+			 */
+			onCancel() {
+				this.close();
+			},
+			/**
+			 * 滚动开始
+			 */
+			pickstart() {
+				this.isScoll = true;
+			},
+			/**
+			 * 滚动结束
+			 */
+			pickend() {
+				this.isScoll = false;
+			},
+			/**
+			 * 选择器改变
+			 * @param {Object} e
+			 */
+			bindChange(e) {
+				this.pickerValue = e.detail.value;
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.custom-picker {
+		width: 100%;
+		height: 620rpx;
+		background-color: #fff;
+		padding-bottom: 0;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		&__header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 30rpx 40rpx;
+
+			.cancel {
+				color: #666;
+			}
+
+			.title {
+				font-size: 32rpx;
+				color: #333;
+			}
+
+			.confirm {
+				color: #2bb781;
+			}
+		}
+	}
+
+	.picker-view {
+		width: 100%;
+		height: 100%;
+		margin-top: 20rpx;
+
+		&__item {
+			line-height: 100rpx;
+			text-align: center;
+		}
+
+		/deep/ &__indicator {
+			height: 100rpx;
+			color: #2bb781;
+		}
+
+		&__segmentation {
+			display: flex;
+			align-items: center;
+		}
+	}
+</style>

components/timePickerPopup/utils.js

@@ -0,0 +1,69 @@
+// 组件props
+const props = {
+	// 当前选中的值
+	value: {
+		type: Array,
+		default: () => (['00', '00', '00', '00'])
+	},
+	// 标题
+	title: {
+		type: String,
+		default: '时间'
+	},
+	// 取消按钮文字
+	cancelText: {
+		type: String,
+		default: '取消'
+	},
+	// 取消按钮颜色
+	canceColor: {
+		type: String,
+		default: '#666666'
+	},
+	// 确定按钮文字
+	confirmText: {
+		type: String,
+		default: '确定'
+	},
+	// 确定按钮颜色
+	confirmColor: {
+		type: String,
+		default: '#2bb781'
+	},
+	// 分割符
+	segmentation: {
+		type: String,
+		default: '-'
+	},
+	// 设置选择器中间选中框的类名 注意页面或组件的style中写了scoped时，需要在类名前写/deep/
+	indicatorClass: {
+		type: String,
+		default: 'picker-view__indicator'
+	},
+	// 设置选择器中间选中框的样式
+	indicatorStyle: {
+		type: String,
+		default: ''
+	},
+}
+
+// 滚动数据
+let range = [
+	[],
+	[],
+	[],
+	[]
+];
+for (let i = 0; i < 24; i++) {
+	range[0].push(i >= 10 ? String(i) : `0${i}`);
+	range[2].push(i >= 10 ? String(i) : `0${i}`);
+}
+for (let i = 0; i < 60; i++) {
+	range[1].push(i >= 10 ? String(i) : `0${i}`);
+	range[3].push(i >= 10 ? String(i) : `0${i}`);
+}
+
+export default {
+	props,
+	range
+}

components/tpf-time-range/tpf-time-range.vue

@@ -0,0 +1,316 @@
+<template>
+	<uni-popup ref="popup" type="bottom">
+		<view class="tpf-time-range-section">
+			<view class="tpf-time-range-title-section flex flex-align-center flex-pack-justify">
+				<text class="tpf-time-range-title-txt tpf-time-range-cancel" @tap="closePopup('cancel')">取消</text>
+				<text class="tpf-time-range-title-txt tpf-time-range-title">营业时间</text>
+				<text class="tpf-time-range-title-txt tpf-time-range-sure" @tap="closePopup('sure')">确定</text>
+			</view>
+			<view class="tpf-time-range-main flex flex-l flex-align-center flex-pack-justify">
+				<view class="tpf-time-range-item flex flex-v flex-align-center">
+					<picker-view class="flex-1 tpf-picker-view" :value="startDefaultTimeArr" indicator-style="height: 50px;" @change="startTimeChange">
+						<picker-view-column>
+							<view class="tpf-time-range-picker-item flex flex-align-center flex-pack-center" v-for="(item,index) in createTimeRange.hours" :key="index">{{item}}</view>
+						</picker-view-column>
+						<picker-view-column>
+							<view class="tpf-time-range-picker-item flex flex-align-center flex-pack-center" v-for="(item,index) in createTimeRange.startMinutes" :key="index">{{item}}</view>
+						</picker-view-column>
+					</picker-view>
+				</view>
+				<text class="tpf-time-divide"> - </text>
+				<view class="tpf-time-range-item flex flex-v flex-align-center">
+					<picker-view class="flex-1 tpf-picker-view" :value="endDefaultTimeArr" indicator-style="height: 50px;" @change="endTimeChange">
+						<picker-view-column>
+							<view class="tpf-time-range-picker-item flex flex-align-center flex-pack-center" v-for="(item,index) in createTimeRange.hours" :key="index">{{item}}</view>
+						</picker-view-column>
+						<picker-view-column>
+							<view class="tpf-time-range-picker-item flex flex-align-center flex-pack-center" v-for="(item,index) in createTimeRange.endMinutes" :key="index">{{item}}</view>
+						</picker-view-column>
+					</picker-view>
+				</view>
+			</view>
+		</view>
+	</uni-popup>
+</template>
+
+<script>
+/**
+* TimeRange 时间范围选择
+* @description 对时间（时、分）区间进行选择，限制选择范围
+* @property {string} startTime 定义开始时间
+* @property {string} startDefaultTime 定义开始默认时间
+* @property {string} endTime 定义结束时间
+* @property {string} endDefaultTime 定义结束默认时间
+* @event {Function()} name 
+*/
+export default{
+	name:"TpfTimeRange",
+	props:{
+		// 开始时间
+		startTime:{
+			type:String,
+			default:"00:00",
+			validator:(value)=>{
+				return /(((2[0-3])|([0-1][0-9])):[0-5][0-9])|24:00/.test(value);
+			}
+		},
+		// 开始默认时间
+		startDefaultTime:{
+			type:String,
+			// #ifdef MP-WEIXIN
+			default:"00:00",
+			// #endif
+			// #ifndef MP-WEIXIN
+			default(){
+				return this.startTime;
+			},
+			// #endif
+			
+			validator:(value)=>{
+				return /(((2[0-3])|([0-1][0-9])):[0-5][0-9])|24:00/.test(value);
+			}
+		},
+		// 结束时间
+		endTime:{
+			type:String,
+			default:"23:59",
+			validator:(value)=>{
+				return /(((2[0-3])|([0-1][0-9])):[0-5][0-9])|24:00/.test(value);
+			}
+		},
+		// 结束默认时间
+		endDefaultTime:{
+			type:String,
+			// #ifdef MP-WEIXIN
+			default:"23:59",
+			// #endif
+			// #ifndef MP-WEIXIN
+			default(){
+				return this.endTime;
+			},
+			// #endif
+			validator:(value)=>{
+				return /(((2[0-3])|([0-1][0-9])):[0-5][0-9])|24:00/.test(value);
+			}
+		}
+	},
+	data(){
+		return {
+			startDefaultTimeArr:[0,0],
+			endDefaultTimeArr:[0,0],
+		}
+	},
+	methods:{
+		startTimeChange(e){
+			this.startDefaultTimeArr = e.detail.value;
+			if(this.compareTwoTimeRange(e.detail.value,this.endDefaultTimeArr)) this.endDefaultTimeArr = e.detail.value;
+		},
+		endTimeChange(e){
+			this.endDefaultTimeArr = e.detail.value;
+			if(this.compareTwoTimeRange(this.startDefaultTimeArr,e.detail.value)) this.startDefaultTimeArr = e.detail.value;
+		},
+		open(){
+			this.$refs.popup.open();
+		},
+		closePopup(action=""){
+			if(this.compareTwoTimeRange(this.startDefaultTimeArr , this.endDefaultTimeArr)){
+				uni.showToast({
+					title:"开始时间不能大于结束时间",
+					icon:'none'
+				});
+				return false;
+			}
+			let startTime = this.createTimeRange.hours[this.startDefaultTimeArr[0]]+":"+this.createTimeRange.startMinutes[this.startDefaultTimeArr[1]];
+			let endTime = this.createTimeRange.hours[this.endDefaultTimeArr[0]]+":"+this.createTimeRange.endMinutes[this.endDefaultTimeArr[1]];
+			this.$emit('timeRange',[
+				startTime,endTime
+			]);
+			this.$refs.popup.close();
+		},
+		compareTwoTimeRange(arr1=[],arr2=[]){
+			if(arr1[0]>arr2[0] || (arr1[0] == arr2[0] && arr1[1] > arr2[1])) return true;
+			return false;
+		},
+	},
+	beforeCreate(){
+		// 初始化小时
+		let hour = [],minute=[];
+		for(let h=0;h<=24;h++){
+			hour.push(h<10?'0'+h:h+'');
+		}
+		for(let m=0;m<60;m++){
+			minute.push(m<10?'0'+m:m+'');
+		}
+		this.timeRange = {hour,minute};
+	},
+	created() {
+		
+	},
+	computed:{
+		createTimeRange(){
+			let {startTime,startDefaultTime,endTime,endDefaultTime} = this.timeRangeDateChange;
+			let startTimeArr = startTime.split(":"),endTimeArr = endTime.split(":");
+			let hours = this.timeRange.hour.slice(
+				this.timeRange.hour.findIndex(item=>item == startTimeArr[0]),
+				this.timeRange.hour.findIndex(item=>item == endTimeArr[0])+1,
+			);
+
+			let startMinutes = null;
+			if(startTimeArr[0] == endTimeArr[0]){
+				startMinutes = this.timeRange.minute.slice(
+					this.timeRange.minute.findIndex(item=>item == startTimeArr[1]),
+					this.timeRange.minute.findIndex(item=>item == endTimeArr[1])+1,
+				);
+			}else{
+				if(this.startDefaultTimeArr[0] == 0){
+					startMinutes = this.timeRange.minute.slice(
+						this.timeRange.minute.findIndex(item=>item == startTimeArr[1])
+					);
+				}
+				else if(this.startDefaultTimeArr[0] == hours.length-1){
+					startMinutes = this.timeRange.minute.slice(
+						0,
+						this.timeRange.minute.findIndex(item=>item == endTimeArr[1])+1
+					);
+				}else{
+					startMinutes = this.timeRange.minute;	// 完整数据
+				}
+			}
+			let endMinutes = null;
+			if(startTimeArr[0] == endTimeArr[0]){
+				endMinutes = this.timeRange.minute.slice(
+					this.timeRange.minute.findIndex(item=>item == startTimeArr[1]),
+					this.timeRange.minute.findIndex(item=>item == endTimeArr[1])+1,
+				);
+			}
+			else{
+				if(this.endDefaultTimeArr[0] == 0){
+					endMinutes = this.timeRange.minute.slice(
+						this.timeRange.minute.findIndex(item=>item == startTimeArr[1])
+					);
+				}
+				else if(this.endDefaultTimeArr[0] == hours.length-1){
+					endMinutes = this.timeRange.minute.slice(
+						0,
+						this.timeRange.minute.findIndex(item=>item == endTimeArr[1])+1
+					);
+				}else{
+					endMinutes = this.timeRange.minute;	// 完整数据
+				}
+			}
+			return {
+				hours,
+				startMinutes,
+				endMinutes,
+			}
+		},
+		// 用于监听属性的变化
+		timeRangeDateChange(){
+			let {startTime,startDefaultTime,endTime,endDefaultTime} = this;
+			startTime = startTime<endTime?startTime:endTime;
+			startDefaultTime = startDefaultTime>=startTime && startDefaultTime<=endTime?startDefaultTime:startTime;
+			endDefaultTime = endDefaultTime>=startTime && endDefaultTime<=endTime && endDefaultTime>=startDefaultTime?endDefaultTime:startDefaultTime;
+			return {
+				startTime,
+				startDefaultTime,
+				endTime,
+				endDefaultTime
+			}
+		}
+	},
+	watch:{
+		timeRangeDateChange:{
+			handler(newVal,oldVal){
+				let {startTime,startDefaultTime,endTime,endDefaultTime} = newVal;
+				let startTimeArr = startTime.split(":"),endTimeArr = endTime.split(":");
+				let startDefaultTimeArr = startDefaultTime.split(":"),endDefaultTimeArr = endDefaultTime.split(":");
+				
+				let hours = this.timeRange.hour.slice(
+					this.timeRange.hour.findIndex(item=>item == startTimeArr[0]),
+					this.timeRange.hour.findIndex(item=>item == endTimeArr[0])+1,
+				);
+				
+				this.$set(this.startDefaultTimeArr,0, hours.includes(startDefaultTimeArr[0])?hours.findIndex(item=>item == startDefaultTimeArr[0]):0);
+				this.$set(this.endDefaultTimeArr,0, hours.includes(endDefaultTimeArr[0])?hours.findIndex(item=>item == endDefaultTimeArr[0]):this.startDefaultTimeArr[0]);
+				
+				let startMinute = null,endMinute = null;
+				if(startTimeArr[0] == endTimeArr[0]){
+					startMinute = endMinute = this.timeRange.minute.slice(
+						this.timeRange.minute.findIndex(item=>item == startTimeArr[1]),
+						this.timeRange.minute.findIndex(item=>item == endTimeArr[1])+1,
+					);
+				}
+				else{
+					if(startDefaultTime.split(":")[0] == startTimeArr[0]){
+						startMinute = this.timeRange.minute.slice(
+							this.timeRange.minute.findIndex(item=>item == startTimeArr[1]),
+						);
+					}
+					else if(startDefaultTime.split(":")[0] == endTimeArr[0]){
+						startMinute = this.timeRange.minute.slice(
+							0,
+							this.timeRange.minute.findIndex(item=>item == endTimeArr[1])+1,
+						);
+					}else{
+						startMinute = this.timeRange.minute;
+					}
+					if(endDefaultTime.split(":")[0] == startTimeArr[0]){
+						endMinute = this.timeRange.minute.slice(
+							this.timeRange.minute.findIndex(item=>item == startTimeArr[1]),
+						);
+					}else if(endDefaultTime.split(":")[0] == endTimeArr[0]){
+						endMinute = this.timeRange.minute.slice(
+							0,
+							this.timeRange.minute.findIndex(item=>item == endTimeArr[1])+1,
+						);
+					}else{
+						endMinute = this.timeRange.minute;
+					}
+				}
+				this.$set(this.startDefaultTimeArr,1, startMinute.includes(startDefaultTimeArr[1])?startMinute.findIndex(item=>item == startDefaultTimeArr[1]):0);
+				this.$set(this.endDefaultTimeArr,1, endMinute.includes(endDefaultTimeArr[1])?endMinute.findIndex(item=>item == endDefaultTimeArr[1]):this.startDefaultTimeArr[1]);
+			},
+			deep:true,		// 深度监听
+			immediate:true,	// 初始化立即执行
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.flex{display:flex;}
+.flex-v{flex-direction:column;}
+.flex-wrap{flex-wrap:wrap;}
+.flex-row-wrap{flex-flow:row wrap;}
+.flex-1{flex:1;}
+.flex-align-center{align-items:center;}
+.flex-pack-center{justify-content:center;}
+.flex-pack-justify{justify-content:space-between;}
+.flex-pack-around{justify-content:space-around;}
+.tpf-time-range-section{
+	background-color: #FFF;
+}
+.tpf-time-range-title-section{
+	padding: 20rpx;
+	border-bottom: 1px #f2f2f2 solid;
+}
+.tpf-time-range-title-txt{
+	font-size: 28rpx;
+}
+.tpf-time-range-title{
+	font-size:32rpx;
+}
+.tpf-time-range-main{
+	padding: 0 20rpx 20rpx;
+}
+.tpf-time-range-item{
+	height: 400rpx;
+	width: 300rpx;
+}
+.tpf-start-time{
+	padding: 20rpx 0;
+}
+.tpf-picker-view{
+	width:280rpx;
+}
+</style>

pkg_join/views/supplier.vue

@@ -187,6 +187,7 @@
             </template>
           </u-cell>
         </u-form-item>
+        
       </u-cell-group>
     </u--form>
     <u--form
@@ -425,6 +426,25 @@
             </template>
           </u-cell>
         </u-form-item>
+        <u-form-item prop="serviceTime">
+          <u-cell title="营业时间" :border="false" isLink @click="showTimePicker">
+            <template #icon>
+              <text class="required">*</text>
+            </template>
+            <template #value>
+              <u--text :text="form.serviceTime + ' - ' + form.serviceEndTime"></u--text>
+              <tpf-time-range
+                :startTime="form.serviceTime"
+                :endTime="form.serviceEndTime"
+                :startDefaultTime="form.serviceTime"
+                :endDefaultTime="form.serviceEndTime"
+                ref="TimePickerPopupRef" 
+                @timeRange="timeRange"
+                >
+              </tpf-time-range>
+            </template>
+          </u-cell>
+        </u-form-item>
         <u-form-item prop="content">
           <u-cell title="一句话介绍" :border="false">
             <template #icon>
@@ -497,6 +517,7 @@
 
 <script>
 import CitySelect from '@/components/CitySelect'
+import TimePickerPopup from '@/components/timePickerPopup/time-picker-popup.vue';
 import {
   getShopData,
   getShopInfo,
@@ -516,7 +537,8 @@ import { pageListenMixins } from '@/mixins/pageListenMixins'
 export default {
   name: 'PkgJoinSupplier',
   components: {
-    CitySelect
+    CitySelect,
+    TimePickerPopup
   },
   mixins: [pageListenMixins],
   data() {
@@ -536,7 +558,8 @@ export default {
         subType: '',
         area: '',
         address: '',
-        position: ''
+        position: '',
+        
       },
       form: {
         name: '',
@@ -551,7 +574,9 @@ export default {
         area: '',
         address: '',
         position: '',
-        content: ''
+        content: '',
+        serviceTime: '00:00',
+        serviceEndTime: '23:59'
       },
       rulesSupplier: {
         'name': {
@@ -699,6 +724,24 @@ export default {
     this.partnerId = options.partnerId || ''
     const type = options.type
     const local = uni.getStorageSync(type)
+    const local_form = uni.getStorageSync(type + '_form')
+    this.form = local_form || {
+      name: '',
+      cover: '',
+      coverVideo: '',
+      // coverType: 1-图片,2-视频
+      coverType: 1,
+      logo: '',
+      type: 0,
+      typeText: '',
+      phone: '',
+      area: '',
+      address: '',
+      position: '',
+      content: '',
+      serviceTime: '00:00',
+      serviceEndTime: '23:59'
+    }
     this.formSupplier = local || {
       name: '',
       avatar: '',
@@ -726,12 +769,21 @@ export default {
   },
   onUnload() {
     uni.setStorageSync(this.formSupplier.subType, this.formSupplier)
+    uni.setStorageSync(this.formSupplier.subType + '_form', this.form)
   },
   onReady() {
     this.$refs.shopForm.setRules(this.rules)
     this.$refs.supplierForm.setRules(this.rulesSupplier)
   },
   methods: {
+    timeRange(e) {
+      this.form.serviceTime = e[0]
+      this.form.serviceEndTime = e[1]
+      this.$forceUpdate()
+    },
+    showTimePicker() {
+      this.$refs.TimePickerPopupRef.open()
+    },
     changeRemove(state){
       this.showRemove = state
     },