From 77861fcc5ee1c4f8e7c6412b373cb438c7313930 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 03 九月 2025 10:06:26 +0800
Subject: [PATCH] 头部样式修改、适配不同机型
---
src/pages/cooperativeOffice/clientVisit/detail.vue | 207 ++++++++++++++++++++++++---------------------------
1 files changed, 98 insertions(+), 109 deletions(-)
diff --git a/src/pages/cooperativeOffice/clientVisit/detail.vue b/src/pages/cooperativeOffice/clientVisit/detail.vue
index e22638a..3dbee0c 100644
--- a/src/pages/cooperativeOffice/clientVisit/detail.vue
+++ b/src/pages/cooperativeOffice/clientVisit/detail.vue
@@ -1,123 +1,112 @@
<template>
- <view class="client-visit">
- <!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 -->
- <PageHeader title="瀹㈡埛鎷滆鐧昏" @back="goBack" />
+ <view class="client-visit-detail">
+ <PageHeader title="瀹㈡埛鎷滆璇︽儏" @back="goBack" />
- <!-- 绛惧埌琛ㄥ崟 -->
- <van-form @submit="handleSignIn" ref="formRef" label-width="110px" input-align="right" error-message-align="right">
+ <u-form @submit="handleSignIn" ref="formRef" label-width="90">
<!-- 瀹㈡埛淇℃伅 -->
- <van-cell-group title="瀹㈡埛淇℃伅" inset>
- <van-field
- v-model="form.customerName"
- label="瀹㈡埛鍚嶇О"
- placeholder="璇疯緭鍏ュ鎴峰悕绉�"
- required
- name="customerName"
- clearable
- />
- <van-field
- v-model="form.contact"
- label="鑱旂郴浜�"
- placeholder="璇疯緭鍏ヨ仈绯讳汉"
- name="contact"
- clearable
- />
- <van-field
- v-model="form.contactPhone"
- label="鑱旂郴鐢佃瘽"
- placeholder="璇疯緭鍏ヨ仈绯荤數璇�"
- name="contactPhone"
- clearable
- />
- </van-cell-group>
-
+ <u-cell-group title="瀹㈡埛淇℃伅">
+ <u-form-item label="瀹㈡埛鍚嶇О" prop="customerName" required border-bottom>
+ <u-input
+ v-model="form.customerName"
+ placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+ />
+ </u-form-item>
+ <u-form-item label="鑱旂郴浜�" prop="contact" border-bottom>
+ <u-input
+ v-model="form.contact"
+ placeholder="璇疯緭鍏ヨ仈绯讳汉"
+ />
+ </u-form-item>
+ <u-form-item label="鑱旂郴鐢佃瘽" prop="contactPhone" border-bottom>
+ <u-input
+ v-model="form.contactPhone"
+ placeholder="璇疯緭鍏ヨ仈绯荤數璇�"
+ />
+ </u-form-item>
+ </u-cell-group>
+
<!-- 鎷滆淇℃伅 -->
- <van-cell-group title="鎷滆淇℃伅" inset>
- <van-field
- v-model="form.visitingPeople"
- label="鎷滆浜�"
- placeholder="鎷滆浜�"
- name="visitingPeople"
- readonly
- clearable
- />
- <van-field
- v-model="form.purposeVisit"
- label="鎷滆鐩殑"
- placeholder="璇疯緭鍏ユ嫓璁跨洰鐨�"
- name="purposeVisit"
- required
- clearable
- />
- <van-field
- v-model="form.purposeDate"
- label="鎷滆鏃堕棿"
- placeholder="璇烽�夋嫨鎷滆鏃堕棿"
- name="purposeDate"
- required
- readonly
- @click="showTimePicker"
- clearable
- />
- <van-field
- v-model="form.visitAddress"
- label="褰撳墠浣嶇疆"
- placeholder="鐐瑰嚮鑾峰彇褰撳墠浣嶇疆"
- name="visitAddress"
- :readonly="true"
- :disabled="true"
- type="textarea"
- @click="getCurrentLocation"
- clearable
- >
- <template #right-icon>
- <van-icon name="location-o" @click.stop="getCurrentLocation" class="location-icon" />
- </template>
- </van-field>
- </van-cell-group>
-
+ <u-cell-group title="鎷滆淇℃伅">
+ <u-form-item label="鎷滆鐩殑" prop="purposeVisit" required border-bottom>
+ <u-input
+ v-model="form.purposeVisit"
+ placeholder="璇疯緭鍏ユ嫓璁跨洰鐨�"
+ />
+ </u-form-item>
+ <u-form-item label="鎷滆鏃堕棿" prop="purposeDate" required border-bottom>
+ <u-input
+ v-model="form.purposeDate"
+ placeholder="璇烽�夋嫨鎷滆鏃堕棿"
+ readonly
+ @click="showTimePicker"
+ />
+ <template #right>
+ <up-icon
+ name="arrow-right"
+ @click="showTimePicker"
+ ></up-icon>
+ </template>
+ </u-form-item>
+ <u-form-item label="鎷滆鍦扮偣" prop="visitAddress" required border-bottom>
+ <u-input
+ v-model="form.visitAddress"
+ placeholder="璇疯緭鍏ユ嫓璁垮湴鐐�"
+ >
+ <template #suffix>
+ <u-icon name="map" @click="getCurrentLocation" class="location-icon" />
+ </template>
+ </u-input>
+ </u-form-item>
+ </u-cell-group>
+
<!-- 澶囨敞淇℃伅 -->
- <van-cell-group title="澶囨敞淇℃伅" inset>
- <van-field
- v-model="form.remark"
- label="澶囨敞"
- name="remark"
- type="textarea"
- placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�"
- rows="3"
- autosize
- clearable
- />
- </van-cell-group>
-
+ <u-cell-group title="澶囨敞淇℃伅">
+ <u-form-item label="澶囨敞" prop="remark" border-bottom>
+ <u-textarea
+ v-model="form.remark"
+ placeholder="璇疯緭鍏ュ娉ㄤ俊鎭�"
+ :maxlength="200"
+ count
+ :autoHeight="true"
+ />
+ </u-form-item>
+ </u-cell-group>
+
<!-- 鎻愪氦鎸夐挳 -->
<view class="footer-btns">
- <van-button class="cancel-btn" @click="goBack">鍙栨秷</van-button>
- <van-button class="sign-btn" native-type="submit" form-type="submit" :loading="loading">绛惧埌</van-button>
+ <u-button class="cancel-btn" @click="goBack">鍙栨秷</u-button>
+ <u-button class="sign-btn" type="primary" @click="handleSignIn" :loading="loading">绛惧埌</u-button>
</view>
- </van-form>
-
+ </u-form>
+
<!-- 鏃堕棿閫夋嫨鍣� -->
- <van-popup v-model:show="showTime" position="bottom">
- <van-date-picker
- v-model="currentTime"
- type="datetime"
- @confirm="onTimeConfirm"
- @cancel="showTime = false"
- title="閫夋嫨鎷滆鏃堕棿"
- />
- </van-popup>
+ <up-datetime-picker
+ :show="showTime"
+ v-model="currentTime"
+ @confirm="onTimeConfirm"
+ @cancel="showTime = false"
+ mode="datetime"
+ />
</view>
</template>
<script setup>
+// 鏇挎崲 toast 鏂规硶
+defineOptions({name: 'client-visit-detail'})
+const showToast = (message) => {
+ uni.showToast({
+ title: message,
+ icon: 'none'
+ })
+}
+
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import PageHeader from '@/components/PageHeader.vue'
import { clientVisitSignIn } from '@/api/cooperativeOffice/clientVisit'
import useUserStore from "@/store/modules/user"
-import { showToast } from 'vant'
import dayjs from "dayjs"
+import { formatDateToYMD } from '@/utils/ruoyi'
const userStore = useUserStore()
@@ -141,7 +130,7 @@
const formRef = ref(null)
// 鏃堕棿鐩稿叧
-const currentTime = ref(new Date())
+const currentTime = ref(Date.now())
const showTime = ref(false)
// 杩斿洖涓婁竴椤�
@@ -155,10 +144,11 @@
}
// 纭鏃堕棿閫夋嫨
-const onTimeConfirm = ({ selectedValues }) => {
- form.value.purposeDate = selectedValues.join('-')
- currentTime.value = selectedValues.join('-')
- showTime.value = false
+const onTimeConfirm = (e) => {
+ console.log(e)
+ form.value.purposeDate = e.value
+ currentTime.value = e.value
+ showTime.value = false;
}
// 鑾峰彇褰撳墠浣嶇疆
@@ -222,8 +212,6 @@
// 鎻愪氦绛惧埌
const handleSignIn = async () => {
- console.log('form.value----', form.value);
-
if (!form.value.customerName) {
showToast('璇疯緭鍏ュ鎴峰悕绉�')
return
@@ -278,7 +266,7 @@
const initPageData = () => {
// 璁剧疆榛樿鎷滆鏃堕棿涓哄綋鍓嶆椂闂�
form.value.purposeDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
- currentTime.value = new Date()
+ currentTime.value = Date.now()
// 璁剧疆鎷滆浜轰负褰撳墠鐧诲綍鐢ㄦ埛鐨勬樀绉�
form.value.visitingPeople = userStore.nickName || ''
@@ -290,6 +278,7 @@
</script>
<style scoped lang="scss">
+@import '@/static/scss/form-common.scss';
.client-visit {
min-height: 100vh;
background: #f8f9fa;
--
Gitblit v1.9.3