This commit is contained in:
gyq
2025-11-20 18:48:07 +08:00
26 changed files with 1508 additions and 153 deletions

View File

@@ -1,10 +1,13 @@
<template>
<view>
<view style="height: 180rpx"></view>
<view class="zhanwei" :class="[direction == 'column' ? 'zhanwei1' : '']"></view>
<view class="fixed-bottom u-flex gap-20">
<view
class="fixed-bottom u-flex gap-20"
:class="[direction == 'column' ? 'u-flex-column' : '']"
>
<view class="u-flex-1">
<my-button type="primary" @click="save" shape="circle">
<my-button type="primary" @click="save" shape="circle">
保存
</my-button>
</view>
@@ -18,7 +21,15 @@
</template>
<script setup>
const emit= defineEmits(["save", "cancel"]);
const emit = defineEmits(["save", "cancel"]);
const props = defineProps({
//方向 row横向布局 column 纵向布局
direction: {
type: String,
default: "row",
},
});
function save() {
emit("save");
@@ -27,3 +38,17 @@ function cancel() {
emit("cancel");
}
</script>
<style lang="scss">
.zhanwei {
height: 180rpx;
}
.zhanwei1{
height: 240rpx;
}
.fixed-bottom {
&.u-flex-column{
align-items: stretch;
}
}
</style>

View File

@@ -1,39 +1,57 @@
<template>
<view>
<up-checkbox-group v-model="useType" placement="row" shape="square" size="28rpx">
<up-checkbox v-for="item in dinetyps" :key="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-checkbox>
</up-checkbox-group>
</view>
<view>
<up-checkbox-group
v-model="useType"
placement="row"
shape="square"
size="28rpx"
>
<up-checkbox
v-for="item in dinetyps"
:key="item.value"
:name="item.value"
:label="item.label"
:customStyle="radioCustomStyle"
></up-checkbox>
</up-checkbox-group>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { ref } from "vue";
const customStyle = ref({
marginRight: '15px'
});
// 可使用类型dine堂食/pickup自取/deliv配送/express快递
const dinetyps = [
{
value: 'dine-in',
label: '堂食'
},
{
value: 'take-out',
label: '自取'
},
{
value: 'post',
label: '配送'
},
{
value: 'take-away',
label: '快递'
}
{
value: "dine-in",
label: "堂食",
},
{
value: "take-out",
label: "自取",
},
{
value: "post",
label: "配送",
},
{
value: "take-away",
label: "快递",
},
];
const props = defineProps({
radioCustomStyle: {
type: Object,
default: () => {
return { marginRight: "15px" };
},
},
});
const useType = defineModel({
default: () => [],
type: Array
default: () => [],
type: Array,
});
</script>

View File

@@ -1,97 +1,118 @@
<template>
<view>
<up-radio-group v-model="useTimeType" placement="row">
<up-radio v-for="item in useTimeTypeList" :key="item.value" :value="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-radio>
</up-radio-group>
<view class="u-flex u-m-t-30 box" v-if="useTimeType == 'custom'">
<view class="u-flex u-flex-1">
<view class="item" @click="pirckerShow(startValue, 'startValue')">
<text class="u-m-r-12" v-if="!startValue">开始时间</text>
<text class="u-m-r-12" v-else>{{ startValue }}</text>
</view>
<view class="u-m-l-8 u-m-r-8" style="padding: 0 30rpx"></view>
<view class="item" @click="pirckerShow(endValue, 'endValue')">
<text class="u-m-r-12" v-if="!endValue">结束时间</text>
<text class="u-m-r-12" v-else>{{ endValue }}</text>
</view>
</view>
<up-icon name="clock"></up-icon>
</view>
<up-datetime-picker :show="show" v-model="value1" closeOnClickOverlay @close="close" @cancel="close" @confirm="confirm" mode="time"></up-datetime-picker>
</view>
<view>
<up-radio-group v-model="useTimeType" placement="row">
<up-radio
v-for="item in useTimeTypeList"
:key="item.value"
:value="item.value"
:name="item.value"
:label="item.label"
:customStyle="customStyle"
></up-radio>
</up-radio-group>
<view class="container" v-if="useTimeType == 'custom'">
<view class="u-flex u-m-t-30 box" >
<view class="u-flex u-flex-1">
<view class="item" @click="pirckerShow(startValue, 'startValue')">
<text class="u-m-r-12" v-if="!startValue">开始时间</text>
<text class="u-m-r-12" v-else>{{ startValue }}</text>
</view>
<view class="u-m-l-8 u-m-r-8" style="padding: 0 30rpx"></view>
<view class="item" @click="pirckerShow(endValue, 'endValue')">
<text class="u-m-r-12" v-if="!endValue">结束时间</text>
<text class="u-m-r-12" v-else>{{ endValue }}</text>
</view>
</view>
<up-icon name="clock"></up-icon>
</view>
</view>
<up-datetime-picker
:show="show"
v-model="value1"
closeOnClickOverlay
@close="close"
@cancel="close"
@confirm="confirm"
mode="time"
></up-datetime-picker>
</view>
</template>
<script setup>
import { computed, ref } from 'vue';
import { computed, ref } from "vue";
function cancel(){
union.navigateBack()
}
const customStyle = ref({
marginRight: '15px'
marginRight: "15px",
});
const useTimeType = defineModel('useTimeType', {
type: String,
default: 'all'
const useTimeType = defineModel("useTimeType", {
type: String,
default: "all",
});
const useTimeTypeList = [
{
value: 'all',
label: '全时段可用'
},
{
value: 'custom',
label: '指定时间段可用'
}
{
value: "all",
label: "全时段可用",
},
{
value: "custom",
label: "指定时间段可用",
},
];
import dayjs from 'dayjs';
const startValue = defineModel('startValue', {
type: String,
default: ''
import dayjs from "dayjs";
const startValue = defineModel("startValue", {
type: String,
default: "",
});
const endValue = defineModel('endValue', {
type: String,
default: ''
const endValue = defineModel("endValue", {
type: String,
default: "",
});
function close() {
show.value = false;
show.value = false;
}
const value1 = ref('');
const value1 = ref("");
const show = ref(false);
const nowKey = ref('');
const nowKey = ref("");
function pirckerShow(date, key) {
nowKey.value = key;
show.value = true;
value1.value = date || '';
nowKey.value = key;
show.value = true;
value1.value = date || "";
}
function confirm(e) {
console.log(e);
console.log(e);
if (nowKey.value == 'startValue') {
startValue.value = e.value;
} else if (nowKey.value == 'endValue') {
endValue.value = e.value;
}
value1.value = e.value;
show.value = false;
if (nowKey.value == "startValue") {
startValue.value = e.value;
} else if (nowKey.value == "endValue") {
endValue.value = e.value;
}
value1.value = e.value;
show.value = false;
}
</script>
<style lang="scss" scoped>
.item {
font-size: 28rpx;
color: #666;
line-height: 48rpx;
padding: 0 12rpx;
display: flex;
font-size: 28rpx;
color: #666;
line-height: 48rpx;
padding: 0 12rpx;
display: flex;
}
.box {
border: 2rpx solid #dddfe6;
padding: 16rpx 30rpx;
box-sizing: border-box;
width: 564rpx;
border-radius: 4rpx;
overflow: hidden;
border: 2rpx solid #dddfe6;
padding: 16rpx 30rpx;
box-sizing: border-box;
width: 564rpx;
border-radius: 4rpx;
overflow: hidden;
}
</style>

View File

@@ -2,13 +2,13 @@
<view>
<view class="u-flex">
<view class="item" @click="pirckerShow(startDate, 'startDate')">
<text class="u-m-r-12" v-if="!startDate">请选择日期范围</text>
<text class="u-m-r-12" v-if="!startDate">{{ startText }}</text>
<text class="u-m-r-12" v-else>{{ startDate }}</text>
<up-icon name="arrow-down" size="14"></up-icon>
</view>
<view class="u-m-l-8 u-m-r-8"></view>
<view class="item" @click="pirckerShow(endDate, 'endDate')">
<text class="u-m-r-12" v-if="!endDate">请选择日期范围</text>
<text class="u-m-r-12" v-if="!endDate">{{ endText }}</text>
<text class="u-m-r-12" v-else>{{ endDate }}</text>
<up-icon name="arrow-down" size="14"></up-icon>
</view>
@@ -29,6 +29,16 @@
<script setup>
import { computed, ref } from "vue";
import dayjs from "dayjs";
const props=defineProps({
startText: {
type: String,
default: "请选择开始时间",
},
endText: {
type: String,
default: "请选择结束时间",
},
});
const startDate = defineModel("startDate", {
type: String,
default: "",

View File

@@ -3,6 +3,7 @@
<up-checkbox-group v-model="selectedWeek" :options="week">
<up-checkbox
:customStyle="customStyle"
:shape="shape"
v-for="item in week"
:key="item.value"
:value="item.value"
@@ -19,7 +20,12 @@ const customStyle={
marginRight: '40rpx',
marginBottom: '16rpx',
}
const props = defineProps({
shape: {
type: String,
default: 'square' // circle
},
});
const selectedWeek=defineModel({
type: Array,
default: () => [],