增加点餐智能推荐

components/my-components/my-hour-area.vue

@@ -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>