163 lines
3.6 KiB
Vue
163 lines
3.6 KiB
Vue
<template>
|
|
<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="9">
|
|
<view class="u-p-32 box u-font-28">
|
|
<view class="u-flex u-relative u-row-center">
|
|
<view class="u-font-32">编辑</view>
|
|
<view class="u-absolute close">
|
|
<up-icon @click="close" :size="16" color="#000" name="close-circle-fill"></up-icon>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-36">
|
|
<view class="u-flex u-row-between">
|
|
<view class="">
|
|
售卖时间管控
|
|
</view>
|
|
<my-switch v-model="category.useTime"></my-switch>
|
|
</view>
|
|
<view v-if="category.useTime" class="u-flex u-row-between u-col-center u-m-t-30 u-p-b-12">
|
|
<view class="u-flex timesel" @click="changeTime('start')">
|
|
<up-icon name="clock" size="14"></up-icon>
|
|
<view class="u-m-l-20">
|
|
<text v-if="!category.saleStartTime" class="color-999">起始时间</text>
|
|
<text v-else>{{category.saleStartTime}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="u-p-l-30 u-p-r-30">至</view>
|
|
<view class="u-flex timesel" @click="changeTime('end')">
|
|
<up-icon name="clock" size="14"></up-icon>
|
|
<view class="u-m-l-20">
|
|
<text v-if="!category.saleEndTime" class="color-999">结束时间</text>
|
|
<text>{{category.saleEndTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-38">
|
|
<view class="u-m-b-32">
|
|
</view>
|
|
|
|
<view class="u-m-t-60">
|
|
<my-button type="primary" shape="circle" @tap="save">
|
|
<view class="u-font-32">
|
|
保存
|
|
</view>
|
|
</my-button>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<up-datetime-picker @cancel="timeCancel" @confirm="timeConfirm" format="HH:mm" :show="time.show" v-model="time.val" mode="time"></up-datetime-picker>
|
|
</view>
|
|
</up-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, watch, computed } from 'vue';
|
|
import infoBox from '@/commons/utils/infoBox.js'
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
item: {
|
|
type: Object,
|
|
default: () => {
|
|
name: ''
|
|
}
|
|
}
|
|
})
|
|
|
|
const category =reactive({
|
|
useTime: 0,
|
|
saleEndTime:'',
|
|
saleStartTime:'',
|
|
})
|
|
|
|
const time=reactive({
|
|
show:false,
|
|
val:'',
|
|
key:''
|
|
})
|
|
function timeCancel(){
|
|
time.show = false
|
|
}
|
|
function timeConfirm(e){
|
|
console.log(e);
|
|
if(time.key=='start'){
|
|
category.saleStartTime=e.value+':00'
|
|
}else{
|
|
category.saleEndTime=e.value+':00'
|
|
}
|
|
time.val=''
|
|
time.show=false
|
|
}
|
|
function changeTime(key) {
|
|
time.key=key;
|
|
time.val=key=='start'?category.saleStartTime:category.saleEndTime
|
|
time.show=true;
|
|
}
|
|
|
|
const data = ref(props.item)
|
|
const emits = defineEmits(['update:show', 'save'])
|
|
|
|
let popShow = ref(props.show)
|
|
|
|
watch(() => props.show, (newval) => {
|
|
popShow.value = newval
|
|
if (newval) {
|
|
data.value = props.item
|
|
Object.assign(category,props.item)
|
|
}
|
|
})
|
|
const isSku = computed(() => {
|
|
// return data.value.typeEnum == '多规格'
|
|
return false
|
|
})
|
|
watch(() => popShow.value, (newval) => {
|
|
emits('update:show', newval)
|
|
})
|
|
|
|
function close() {
|
|
popShow.value = false
|
|
}
|
|
|
|
function open() {
|
|
|
|
}
|
|
|
|
function save() {
|
|
if(category.useTime){
|
|
if(!category.saleStartTime){
|
|
return infoBox.showToast('请选择起始时间')
|
|
}
|
|
if(!category.saleEndTime){
|
|
return infoBox.showToast('请选择结束时间')
|
|
}
|
|
}
|
|
emits('save', {
|
|
...data.value,...category
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
width: 600rpx;
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.timesel {
|
|
border: 1px solid #eee;
|
|
border-radius: 10rpx;
|
|
padding: 10rpx 20rpx;
|
|
flex: 1;
|
|
}
|
|
.close {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.number {
|
|
color: #EE4646;
|
|
}
|
|
</style> |