表单样式优化

src/components/chat-content.vue

@@ -326,9 +326,9 @@
               </div>
             </div>
             <div class="chat-items">
-              <div class="content-left-main computing-text-box" style="padding: 0">
+              <div class="content-left-main computing-text-box" style="padding: 0;border-radius:12rem;background: linear-gradient(358deg, #ffffffb3 3%, #f7f8ff 97%);">
                 <intelligent-computing :itemList="item" :propsType="'yearOld'"
-                  :btnFloat="false"></intelligent-computing>
+                  :btnFloat="!isHistory"></intelligent-computing>
               </div>
             </div>
           </div>
@@ -345,7 +345,7 @@
             <div class="chat-items">
               <div class="content-left-main computing-text-box" style="padding: 0">
                 <intelligent-computing :itemList="item" :propsType="'observation'"
-                  :btnFloat="false"></intelligent-computing>
+                  :btnFloat="!isHistory"></intelligent-computing>
               </div>
             </div>
           </div>
@@ -362,7 +362,7 @@
             <div class="chat-items">
               <div class="content-left-main computing-text-box" style="padding: 0">
                 <intelligent-computing :itemList="item" :propsType="'gracePeriod'"
-                  :btnFloat="false"></intelligent-computing>
+                  :btnFloat="!isHistory"></intelligent-computing>
               </div>
             </div>
           </div>
@@ -379,7 +379,7 @@
             <div class="chat-items">
               <div class="content-left-main computing-text-box" style="padding: 0">
                 <intelligent-computing :itemList="item" :propsType="'takeEffect'"
-                  :btnFloat="false"></intelligent-computing>
+                  :btnFloat="!isHistory"></intelligent-computing>
               </div>
             </div>
           </div>

src/components/intelligent-computing.vue

@@ -4,122 +4,160 @@
 
     <div class="intelligent-computing-box" v-if="propsType == 'observation'">
       <h3 class="title">观察期计算</h3>
-      <div class="flex date-box">
+      <van-cell-group inset>
-        <em>保单生效日：</em>
+        <van-field
-        <input class="className" readonly is-link :value="timeValue" @click="showPopup" />
+          class="className"
-        <van-popup v-model:show="show" position="bottom" get-container="body">
+          readonly
-          <van-datetime-picker
+          is-link
-            v-model="currentDate"
+          input-align="right"
-            type="date"
+          v-model="timeValue"
-            title="请选择日期"
+          label="保单生效日"
-            :loading="isLoadingShow"
+          @click-input="showPopup"
-            :formatter="formatter"
+          :disabled="!btnFloat"
-            @change="seletTimeChange"
-            @cancel="show = false"
-            @confirm="confirmPicker"
         />
-        </van-popup>
+        <van-field
-      </div>
+          name="radio"
-      <div class="flex observation">
+          class="className"
-        <span>约定观察期：</span>
+          input-align="right"
-        <van-radio-group v-model="radio" direction="horizontal" @change="radioChange">
+          label="约定观察期"
+          :disabled="!btnFloat"
+        >
+          <template #input>
+            <van-radio-group
+              :disabled="!btnFloat"
+              v-model="radio"
+              direction="horizontal"
+              @change="radioChange"
+            >
               <van-radio name="90" shape="square">90天</van-radio>
               <van-radio name="180" shape="square">180天</van-radio>
             </van-radio-group>
-      </div>
+          </template>
-      <div class="flex">
+        </van-field>
-        <em>观察期截止日：</em><span class="end-date">{{ userComputedValue }}</span>
+        <van-field
-      </div>
+          name="radio"
-      <button class="compute-btn" @click="userComputed" v-if="btnFloat">计算</button>
+          class="className"
+          input-align="right"
+          label="观察期截止日"
+          :disabled="!btnFloat"
+        >
+          <template #input>
+            {{ userComputedValue }}
+          </template>
+        </van-field>
+      </van-cell-group>
+      <button class="compute-btn" @click="userComputed('observation')" :disabled="!btnFloat">
+        计算
+      </button>
     </div>
 
     <div class="intelligent-computing-box" v-if="propsType == 'gracePeriod'">
       <h3 class="title">宽限期计算</h3>
-      <div class="flex date-box flex-around">
+      <van-cell-group inset>
-        <em>应交费日期：</em>
+        <van-field
-        <input class="className" readonly is-link :value="timeValue" @click="showPopup" />
+          class="className"
-        <van-popup v-model:show="show" position="bottom" get-container="body">
+          readonly
-          <van-datetime-picker
+          is-link
-            v-model="currentDate"
+          input-align="right"
-            type="date"
+          v-model="timeValue"
-            title="请选择日期"
+          label="应交费日期"
-            :loading="isLoadingShow"
+          @click-input="showPopup"
-            :formatter="formatter"
+          :disabled="!btnFloat"
-            @change="seletTimeChange"
-            @cancel="show = false"
-            @confirm="confirmPicker"
         />
-        </van-popup>
+        <van-field
-      </div>
+          name="endDate"
-      <div class="flex observation flex-around">
+          class="className"
-        <em>宽限期截止日：</em><span class="end-date">{{ userComputedValue }}</span>
+          input-align="right"
-      </div>
+          label="宽限期截止日"
-      <button class="compute-btn" @click="userComputed" v-if="btnFloat">计算</button>
+          :disabled="!btnFloat"
+        >
+          <template #input>
+            {{ userComputedValue }}
+          </template>
+        </van-field>
+      </van-cell-group>
+      <button class="compute-btn" @click="userComputed('gracePeriod')" :disabled="!btnFloat">
+        计算
+      </button>
     </div>
 
     <div class="intelligent-computing-box" v-if="propsType == 'yearOld'">
       <h3 class="title">周岁计算</h3>
-      <div class="flex date-box flex-around">
+      <van-cell-group inset>
-        <em>出生年月日：</em>
+        <van-field
-        <input class="className" readonly is-link :value="timeValue" @click="showPopup" />
+          class="className"
-        <van-popup v-model:show="show" position="bottom" get-container="body">
+          readonly
-          <van-datetime-picker
+          is-link
-            v-model="currentDate"
+          v-model="timeValue"
-            type="date"
+          label="出生年月日"
-            title="请选择日期"
+          input-align="right"
-            :loading="isLoadingShow"
+          @click-input="showPopup"
-            :min-date="yearOld.minDate"
+          :disabled="!btnFloat"
-            :max-date="yearOld.maxDate"
-            :formatter="formatter"
-            @change="seletTimeChange"
-            @cancel="show = false"
-            @confirm="confirmPicker"
         />
-        </van-popup>
+        <van-field
-      </div>
+          name="age"
-      <div class="flex observation flex-around marginTop5">
+          class="className"
-        <em>周岁：</em><span class="end-date">{{ userComputedValue }}</span>
+          input-align="right"
-      </div>
+          label="周岁"
-      <button class="compute-btn" @click="userComputed" v-if="btnFloat">计算</button>
+          :disabled="!btnFloat"
+        >
+          <template #input>
+            {{ userComputedValue }}
+          </template>
+        </van-field>
+      </van-cell-group>
+      <button class="compute-btn" @click="userComputed('yearOld')" :disabled="!btnFloat">
+        计算
+      </button>
     </div>
 
     <div class="intelligent-computing-box" v-if="propsType == 'takeEffect'">
       <h3 class="title">生效日对应日计算</h3>
-      <div class="flex date-box flex-around">
+      <van-cell-group inset>
-        <em>保单生效日：</em>
+        <van-field
-        <input
           class="className"
-          style="width: 150px"
           readonly
           is-link
-          :value="timeValue"
+          input-align="right"
-          @click="showPopup"
+          v-model="timeValue"
+          label="保单生效日"
+          @click-input="showPopup"
+          :disabled="!btnFloat"
         />
-        <van-popup v-model:show="show" position="bottom" get-container="body">
+        <van-field
+          name="effectDate"
+          class="className"
+          input-align="right"
+          label="保单生效日对应日"
+          :disabled="!btnFloat"
+        >
+          <template #input>
+            {{ userComputedValue }}
+          </template>
+        </van-field>
+      </van-cell-group>
+      <button class="compute-btn" @click="userComputed('takeEffect')" :disabled="!btnFloat">
+        计算
+      </button>
+    </div>
+
+    <van-popup v-model:show="show" position="bottom" teleport="body" round>
       <van-date-picker
-            v-model="currentDate"
+        v-model="currentDateValues"
-            type="date"
         title="请选择日期"
-            :loading="isLoadingShow"
+        :min-date="minDate"
+        :max-date="maxDate"
         :formatter="formatter"
-            @change="seletTimeChange"
         @cancel="show = false"
         @confirm="confirmPicker"
       />
     </van-popup>
   </div>
-      <div class="flex observation flex-around">
-        <em>保单生效日对应日：</em
-        ><span class="end-date" style="width: 150px">{{ userComputedValue }}</span>
-      </div>
-      <button class="compute-btn" @click="userComputed" v-if="btnFloat">计算</button>
-    </div>
-  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
-import { showToast, Popup, DatePicker, Radio, RadioGroup } from 'vant'
+import { showToast } from 'vant'
 import { Post } from '@/utils/https'
 
 const props = defineProps({
@@ -129,85 +167,92 @@ const props = defineProps({
 })
 
 const show = ref(false)
-const isLoadingShow = ref(true)
-const currentDate = ref(new Date())
 const timeValue = ref('日期选择')
 const radio = ref('90')
 const userComputedValue = ref('')
 const userComputedRequest = ref(true)
-const yearOld = ref({ minDate: new Date(1970, 0, 1), maxDate: new Date() })
+
+const now = new Date()
+const currentDateValues = ref([
+  String(now.getFullYear()),
+  String(now.getMonth() + 1).padStart(2, '0'),
+  String(now.getDate()).padStart(2, '0'),
+])
+
+const minDate = computed(() =>
+  props.propsType === 'yearOld' ? new Date(1970, 0, 1) : new Date(1970, 0, 1),
+)
+const maxDate = computed(() =>
+  props.propsType === 'yearOld' ? new Date() : new Date(2099, 11, 31),
+)
+
+function valuesToDate(values) {
+  const [y, m, d] = (values || currentDateValues.value).map((v) => Number(v))
+  return new Date(y, (m || 1) - 1, d || 1)
+}
 
 function showPopup() {
+  console.log(23232);
+  // 历史记录中不允许点击选择日期
   if (!props.btnFloat) return
   show.value = true
-  isLoadingShow.value = true
-  setTimeout(() => {
-    isLoadingShow.value = false
-  }, 500)
 }
 
 function radioChange() {
+  if (!props.btnFloat) return
   userComputedRequest.value = true
+  userComputedValue.value = ''
 }
 
-function confirmPicker(val) {
+function confirmPicker({ selectedValues }) {
-  let year = val.getFullYear()
+  const values = selectedValues || currentDateValues.value
-  let month = val.getMonth() + 1
+  currentDateValues.value = values
-  let day = val.getDate()
+  const [year, month, day] = values
-  if (month >= 1 && month <= 9) month = `0${month}`
+  const next = `${year}年${month}月${day}日`
-  if (day >= 1 && day <= 9) day = `0${day}`
+  userComputedRequest.value = next !== timeValue.value
-
+  timeValue.value = next
-  if (`${year}-${month}-${day}` == timeValue.value) {
+  userComputedValue.value = ''
-    userComputedRequest.value = false
-  } else {
-    userComputedRequest.value = true
-  }
-  timeValue.value = `${year}年${month}月${day}日`
   show.value = false
 }
 
-function seletTimeChange() {
+function formatter(type, option) {
-  userComputedValue.value = ''
+  if (type === 'year') option.text = `${option.text || option.value}年`
+  if (type === 'month') option.text = `${option.text || option.value}月`
+  if (type === 'day') option.text = `${option.text || option.value}日`
+  return option
 }
 
-function formatter(type, value) {
+function userComputed(type) {
-  if (type === 'year') return `${value}年`
+  if (timeValue.value === '日期选择') {
-  if (type === 'month') return `${value}月`
+    showToast('请选择时间')
-  if (type === 'day') return `${value}日`
+    return
-  return value
   }
-
+  const info = valuesToDate(currentDateValues.value)
-function userComputed() {
-  if (currentDate.value && timeValue.value !== '日期选择') {
-    let info = new Date(currentDate.value)
   let title = ''
   let inputParams = ''
-    switch (props.propsType) {
+  switch (type) {
     case 'observation':
-        userComputedValue.value = DateAdd('d', parseInt(radio.value), info)
+      userComputedValue.value = DateAdd('d', parseInt(radio.value, 10), new Date(info))
-        inputParams = getNowFormatDate(currentDate.value) + '|' + radio.value
+      inputParams = getNowFormatDate(info) + '|' + radio.value
       title = '观察期'
       break
     case 'gracePeriod':
-        userComputedValue.value = DateAdd('d', 60, info)
+      userComputedValue.value = DateAdd('d', 60, new Date(info))
-        inputParams = getNowFormatDate(currentDate.value)
+      inputParams = getNowFormatDate(info)
       title = '宽限期'
       break
     case 'yearOld':
-        userComputedValue.value = getAges(info)
+      userComputedValue.value = getAges(new Date(info))
-        inputParams = getNowFormatDate(currentDate.value)
+      inputParams = getNowFormatDate(info)
       title = '周岁'
       break
     case 'takeEffect':
-        userComputedValue.value = DateAdd('y', 1, info)
+      userComputedValue.value = DateAdd('y', 1, new Date(info))
-        inputParams = getNowFormatDate(currentDate.value)
+      inputParams = getNowFormatDate(info)
       title = '生效日对应日'
       break
   }
   requestInfo(title, inputParams, userComputedValue.value)
-  } else {
-    showToast('请选择时间')
-  }
 }
 
 function DateAdd(interval, number, date) {
@@ -235,14 +280,15 @@ function getNowFormatDate(data) {
 }
 
 function getAges(data) {
-  let brith = data
+  const brith = data
-  let toDay = new Date()
+  const toDay = new Date()
   if (
     brith.getFullYear() === toDay.getFullYear() &&
     brith.getMonth() === toDay.getMonth() &&
-    brith.getDate() === brith.getDate()
+    brith.getDate() === toDay.getDate()
-  )
+  ) {
     return 0
+  }
   let age = toDay.getFullYear() - brith.getFullYear()
   if (toDay.getMonth() > brith.getMonth()) return age
   if (toDay.getMonth() < brith.getMonth()) return age - 1
@@ -260,81 +306,59 @@ function requestInfo(content, inputParams, outputParams) {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-.intelligent-computing,
+.intelligent-computing {
+  padding: 16rem;
+}
 .intelligent-computing-box .van-cell {
-  padding: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
-
 .intelligent-computing .hint-tit {
-  font-size: 14px;
+  font-size: 16rem;
-  background: #4f96ff;
+  line-height: 20rem;
-  border-radius: 18px 18px 0 0;
+  color: #17204d;
-  padding: 5px;
+  margin: 0;
-  color: #fff;
-  line-height: 28px;
 }
-
 .intelligent-computing-box {
-  padding: 0 15px 15px;
+  background: transparent;
-  font-size: 15px;
-  color: #666;
 }
-
 .intelligent-computing-box .title {
-  padding: 26px 0 13px;
+  font-size: 16rem;
-  font-size: 18px;
   font-weight: 600;
-  color: #333;
+  color: #17204d;
+  margin: 12rem 0;
 }
-
-.intelligent-computing-box .observation {
-  padding: 10px 0;
-}
-
 .intelligent-computing-box .compute-btn {
-  width: 156px;
+  width: 100%;
-  height: 33px;
+  height: 40rem;
-  line-height: 33px;
+  margin-top: 16rem;
-  border-radius: 50px;
+  border: 0;
-  background: #5a9cff;
+  border-radius: 22rem;
-  margin: 20px auto;
+  background: linear-gradient(90deg, #025cea 0%, #0595f6 100%);
-  font-size: 14px;
   color: #fff;
-  display: block;
+  font-size: 15rem;
-  border: none;
+  &:disabled {
-  cursor: pointer;
+    background: linear-gradient(270deg, #63a0ff 0%, #025cea 100%);
+    opacity: 0.3;
+    color: inherit;
+  }
 }
-
 .intelligent-computing-box .className {
-  border: 1px solid #b2b2b2;
+  background: transparent;
-  font-size: 13px;
+  min-height: 48rem;
-  border-radius: 4px;
+  align-items: center;
-  text-indent: 10px;
-  width: 200px;
-  height: 21px;
-  line-height: 21px;
-  background: url('../assets/images/drop_down_icon.png') no-repeat 95% center;
-  background-size: 16px;
-  margin-left: 14px;
-  text-align: center;
 }
-
+:deep(.van-cell-group--inset) {
-.intelligent-computing-box .end-date {
+  margin: 0;
-  font-size: 13px;
+  padding: 0 12rem;
-  border: 1px solid #b2b2b2;
+  border-radius: 8rem;
-  width: 200px;
-  height: 21px;
-  line-height: 21px;
-  text-align: center;
-  border-radius: 4px;
 }
-
+:deep(.van-field__label label) {
-.flex-around {
+  white-space: nowrap;
-  justify-content: space-between;
 }
-
+:deep(.van-cell__right-icon) {
-.marginTop5 {
+  line-height: 25rem;
-  margin-top: 5px;
+  height: 24rem;
 }
 </style>