| | |
| | | <template> |
| | | <view class="client-visit-detail"> |
| | | <PageHeader title="客户拜访详情" @back="goBack" /> |
| | | |
| | | <PageHeader title="客户拜访详情" |
| | | @back="goBack" /> |
| | | <!-- 内容容器 --> |
| | | <view class="content-container"> |
| | | <!-- 客户信息 --> |
| | |
| | | <text class="info-value">{{ form.contactPhone || '-' }}</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 拜访信息 --> |
| | | <view class="section"> |
| | | <view class="section-title">拜访信息</view> |
| | |
| | | <text class="info-label">拜访人</text> |
| | | <text class="info-value">{{ form.visitingPeople || '-' }}</text> |
| | | </view> |
| | | <view class="info-item" v-if="form.latitude && form.longitude"> |
| | | <view class="info-item" |
| | | v-if="form.latitude && form.longitude"> |
| | | <text class="info-label">经纬度</text> |
| | | <text class="info-value">{{ form.latitude }}, {{ form.longitude }}</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 备注信息 --> |
| | | <view class="section"> |
| | | <view class="section-title">备注信息</view> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | // 替换 toast 方法 |
| | | const showToast = (message) => { |
| | | uni.showToast({ |
| | | title: message, |
| | | icon: 'none' |
| | | }) |
| | | } |
| | | // 替换 toast 方法 |
| | | const showToast = message => { |
| | | uni.showToast({ |
| | | title: message, |
| | | icon: "none", |
| | | }); |
| | | }; |
| | | |
| | | import { ref, onMounted } from 'vue' |
| | | import PageHeader from '@/components/PageHeader.vue' |
| | | import useUserStore from "@/store/modules/user" |
| | | import { ref, onMounted } from "vue"; |
| | | import PageHeader from "@/components/PageHeader.vue"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | |
| | | const userStore = useUserStore() |
| | | const userStore = useUserStore(); |
| | | |
| | | // 表单数据 |
| | | const form = ref({ |
| | | customerName: '', |
| | | contact: '', |
| | | contactPhone: '', |
| | | visitingPeople: '', |
| | | purposeVisit: '', |
| | | purposeDate: '', |
| | | visitAddress: '', |
| | | latitude: '', |
| | | longitude: '', |
| | | locationAddress: '', |
| | | remark: '' |
| | | }) |
| | | // 表单数据 |
| | | const form = ref({ |
| | | customerName: "", |
| | | contact: "", |
| | | contactPhone: "", |
| | | visitingPeople: "", |
| | | purposeVisit: "", |
| | | purposeDate: "", |
| | | visitAddress: "", |
| | | latitude: "", |
| | | longitude: "", |
| | | locationAddress: "", |
| | | remark: "", |
| | | }); |
| | | |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | // 返回时清除本地存储的ID |
| | | uni.removeStorageSync('clientVisit') |
| | | uni.navigateBack() |
| | | } |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | // 返回时清除本地存储的ID |
| | | uni.removeStorageSync("clientVisit"); |
| | | uni.navigateBack(); |
| | | }; |
| | | |
| | | // 初始化页面数据 |
| | | const initPageData = () => { |
| | | // 从本地存储获取拜访记录详情 |
| | | const row = uni.getStorageSync('clientVisit') |
| | | if (row) { |
| | | form.value = { ...row } |
| | | } else { |
| | | showToast('暂无拜访记录数据') |
| | | } |
| | | } |
| | | // 初始化页面数据 |
| | | const initPageData = () => { |
| | | // 从本地存储获取拜访记录详情 |
| | | const row = uni.getStorageSync("clientVisit"); |
| | | if (row) { |
| | | form.value = { ...row }; |
| | | } else { |
| | | showToast("暂无拜访记录数据"); |
| | | } |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | initPageData() |
| | | }) |
| | | onMounted(() => { |
| | | initPageData(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | @import '@/static/scss/form-common.scss'; |
| | | @import "@/static/scss/form-common.scss"; |
| | | |
| | | .client-visit-detail { |
| | | min-height: 100vh; |
| | | background-color: #f8f9fa; |
| | | } |
| | | .client-visit-detail { |
| | | min-height: 100vh; |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | .content-container { |
| | | padding: 16px; |
| | | } |
| | | .content-container { |
| | | padding: 16px; |
| | | } |
| | | |
| | | .section { |
| | | background-color: #ffffff; |
| | | border-radius: 12px; |
| | | margin-bottom: 16px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| | | } |
| | | .section { |
| | | background-color: #ffffff; |
| | | border-radius: 12px; |
| | | margin-bottom: 16px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| | | } |
| | | |
| | | .section-title { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #333333; |
| | | padding: 16px 16px 12px; |
| | | border-bottom: 1px solid #f0f0f0; |
| | | } |
| | | .section-title { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #333333; |
| | | padding: 16px 16px 12px; |
| | | border-bottom: 1px solid #f0f0f0; |
| | | } |
| | | |
| | | .info-item { |
| | | display: flex; |
| | | padding: 14px 16px; |
| | | border-bottom: 1px solid #f8f8f8; |
| | | align-items: flex-start; |
| | | } |
| | | .info-item { |
| | | display: flex; |
| | | padding: 14px 16px; |
| | | border-bottom: 1px solid #f8f8f8; |
| | | align-items: flex-start; |
| | | } |
| | | |
| | | .info-item:last-child { |
| | | border-bottom: none; |
| | | } |
| | | .info-item:last-child { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .info-label { |
| | | font-size: 14px; |
| | | color: #666666; |
| | | min-width: 80px; |
| | | flex-shrink: 0; |
| | | line-height: 22px; |
| | | } |
| | | .info-label { |
| | | font-size: 14px; |
| | | color: #666666; |
| | | min-width: 80px; |
| | | flex-shrink: 0; |
| | | line-height: 22px; |
| | | } |
| | | |
| | | .info-value { |
| | | font-size: 14px; |
| | | color: #333333; |
| | | flex: 1; |
| | | line-height: 22px; |
| | | text-align: right; |
| | | } |
| | | .info-value { |
| | | font-size: 14px; |
| | | color: #333333; |
| | | flex: 1; |
| | | line-height: 22px; |
| | | text-align: right; |
| | | } |
| | | |
| | | .multi-line { |
| | | text-align: left; |
| | | word-break: break-all; |
| | | line-height: 1.6; |
| | | } |
| | | .multi-line { |
| | | text-align: left; |
| | | word-break: break-all; |
| | | line-height: 1.6; |
| | | } |
| | | |
| | | .remark-item { |
| | | padding-bottom: 16px; |
| | | } |
| | | .remark-item { |
| | | padding-bottom: 16px; |
| | | } |
| | | </style> |