liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
modendeveloper
2025-01-21 00:15:37 +08:00
parent a6816e1469
commit 4e28ef3d37
5 changed files with 686 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/timePickerPopup/README.md
+87
View File
@@ -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
+159
View File
@@ -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
+69
View File
@@ -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
+316
View File
@@ -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
+55 -3
View File
@@ -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
},