first
This commit is contained in:
250
pageWorkControl/setting/components/add-banci.vue
Normal file
250
pageWorkControl/setting/components/add-banci.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<my-model ref="model" :borderRadius="18" :title="title" iconColor="#000" @close="resetForm">
|
||||
<template #desc>
|
||||
<view class="u-text-left u-p-30 ">
|
||||
<view class="u-m-t-40 ">
|
||||
<view>班名次</view>
|
||||
<view class="u-p-l-32 border u-m-t-24 u-flex-1">
|
||||
<uni-easyinput paddingNone :inputBorder="false" v-model="form.name"
|
||||
placeholder="请输入班次名称"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="active!=1">
|
||||
<view class="u-m-t-40 " @tap="timePickerShow(form.start,'start')">
|
||||
<view>开始时间</view>
|
||||
<view class="u-p-l-32 border lh35 u-flex u-m-t-24 u-flex-1">
|
||||
<view class="u-flex">
|
||||
<image src="/pageWorkControl/static/images/icon-time.svg" class="icon-time" mode=""></image>
|
||||
</view>
|
||||
<view class="u-m-l-12">
|
||||
<text v-if="!form.start" class="color-666">请选择开始时间</text>
|
||||
<text v-else>{{form.start}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-40 " @tap="timePickerShow(form.end,'end')">
|
||||
<view>结束时间</view>
|
||||
<view class="u-p-l-32 border lh35 u-flex u-m-t-24 u-flex-1">
|
||||
<view class="u-flex">
|
||||
<image src="/pageWorkControl/static/images/icon-time.svg" class="icon-time" mode=""></image>
|
||||
</view>
|
||||
<view class="u-m-l-12">
|
||||
<text v-if="!form.end" class="color-666">请选择结束时间</text>
|
||||
<text v-else>{{form.end}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-p-30">
|
||||
<view class="u-m-t-10">
|
||||
<my-button @tap="confirm" shape="circle" showShadow>{{props.title==='添加'?'添加':'提交'}}</my-button>
|
||||
<my-button type="cancel" bgColor="#fff" @tap="close">取消</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
|
||||
<my-pickerview autoClear :isLink="false" mode="time" @confirm="timeConfirm" :showTitle="false" ref="timePicker"
|
||||
:defaultIndex="times.defaultIndex"
|
||||
></my-pickerview>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
nextTick,
|
||||
ref
|
||||
} from 'vue';
|
||||
import myPickerview from '@/components/my-components/my-pickerview'
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
const props = defineProps({
|
||||
active:{
|
||||
type:[String,Number],
|
||||
default:1
|
||||
},
|
||||
mode:{
|
||||
//time none
|
||||
type:String,
|
||||
default:'none'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
|
||||
function timeConfirm(e){
|
||||
form[times.selType]=e.join(':')
|
||||
}
|
||||
|
||||
const times=reactive({
|
||||
defaultIndex:[0,0],
|
||||
selType:'',
|
||||
})
|
||||
|
||||
|
||||
|
||||
const timePicker = ref(null)
|
||||
function timePickerShow(time,timeshowKey){
|
||||
times.selType=timeshowKey
|
||||
const date=new Date()
|
||||
if(time===''){
|
||||
times.defaultIndex=[date.getHours(),date.getMinutes()]
|
||||
}else{
|
||||
console.log(time.split(':').map(v=>parseInt(v)));
|
||||
times.defaultIndex=time.split(':').map(v=>parseInt(v))
|
||||
}
|
||||
timePicker.value.open()
|
||||
}
|
||||
|
||||
function currentPriceChange(newval){
|
||||
nextTick(()=>{
|
||||
form.discount=(newval*100/form.price).toFixed()
|
||||
})
|
||||
}
|
||||
function discountChange(newval){
|
||||
nextTick(()=>{
|
||||
form.currentPrice=(form.price*newval/100).toFixed(2)
|
||||
})
|
||||
}
|
||||
|
||||
const $form = {
|
||||
name:'',
|
||||
start:'',
|
||||
end:'',
|
||||
}
|
||||
const form = reactive({
|
||||
...$form
|
||||
})
|
||||
|
||||
function resetForm() {
|
||||
Object.assign(form, {
|
||||
...$form
|
||||
})
|
||||
}
|
||||
|
||||
const model = ref(null)
|
||||
|
||||
function open(item) {
|
||||
if(item){
|
||||
Object.assign(form,item)
|
||||
}
|
||||
model.value.open()
|
||||
emits('open')
|
||||
}
|
||||
|
||||
function close() {
|
||||
model.value.close()
|
||||
resetForm()
|
||||
emits('close')
|
||||
}
|
||||
const emits = defineEmits(['confirm','close','open'])
|
||||
|
||||
function confirm() {
|
||||
const {
|
||||
name,start,end
|
||||
} = form
|
||||
if(!name){
|
||||
return uni.showToast({
|
||||
title:'请输入班次名',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
if(props.active==0){
|
||||
if(!start){
|
||||
return uni.showToast({
|
||||
title:'请选择开始时间',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
if(!end){
|
||||
return uni.showToast({
|
||||
title:'请选择结束时间',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
emits('confirm',{...form})
|
||||
close()
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.lh35{
|
||||
line-height: 35px;
|
||||
}
|
||||
.icon-time{
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.border{
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.lh34 {
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: #fff;
|
||||
border: 1px solid #E5E5E5;
|
||||
line-height: inherit;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.active {
|
||||
border-color: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-class {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
|
||||
.discount {
|
||||
.u-absolute {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bg1 {
|
||||
background: #F7F7FA;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0 80rpx;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
padding: 22rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user