From d85836bf6b1574122830f6db8770e98184edd51c Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期六, 20 九月 2025 09:49:01 +0800
Subject: [PATCH] 巡检上传页面
---
src/pages_template/pages/address/addSite.vue | 444 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 444 insertions(+), 0 deletions(-)
diff --git a/src/pages_template/pages/address/addSite.vue b/src/pages_template/pages/address/addSite.vue
new file mode 100644
index 0000000..9cbaa31
--- /dev/null
+++ b/src/pages_template/pages/address/addSite.vue
@@ -0,0 +1,444 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import tab from '@/plugins/tab';
+import citySelect from '@/components/u-city-select/u-city-select.vue';
+import { useAddressEditPage } from './index';
+
+// 浣跨敤缂栬緫椤甸潰Hook
+const {
+ isEdit,
+ form,
+ defaultAddress,
+ selectedTag,
+ addressTags,
+ initEditPage,
+ saveAddress,
+ deleteAddress
+} = useAddressEditPage();
+
+// 鍦板尯閫夋嫨鍣ㄦ樉绀虹姸鎬�
+const showRegionPicker = ref(false);
+
+// 琛ㄥ崟閿欒鐘舵�� - 绉诲埌Vue缁勪欢涓�
+const formErrors = reactive({
+ name: false,
+ phone: false,
+ region: false,
+ address: false
+});
+
+// 閲嶇疆琛ㄥ崟閿欒
+function resetFormErrors() {
+ formErrors.name = false;
+ formErrors.phone = false;
+ formErrors.region = false;
+ formErrors.address = false;
+}
+
+// 鍒濆鍖栭〉闈㈡暟鎹�
+onMounted(() => {
+ const pages = getCurrentPages();
+ const currentPage: any = pages[pages.length - 1];
+ const options = currentPage.$page?.options;
+
+ // 璋冪敤hook鐨勫垵濮嬪寲鏂规硶
+ initEditPage(options?.id);
+ // 閲嶇疆琛ㄥ崟閿欒鐘舵��
+ resetFormErrors();
+});
+
+// 璁剧疆榛樿鍦板潃
+function handleSetDefault(e: any) {
+ defaultAddress.value = e.detail.value;
+}
+
+// 鏄剧ず鍦板尯閫夋嫨鍣�
+function handleShowRegionPicker() {
+ showRegionPicker.value = true;
+}
+
+// 纭閫夋嫨鍦板尯
+function handleCityChange(e: any) {
+ form.region = e.province.label + e.city.label + e.area.label;
+ formErrors.region = false;
+}
+
+// 閫夋嫨鏍囩
+function handleSelectTag(tag: string) {
+ selectedTag.value = tag;
+}
+
+// 琛ㄥ崟楠岃瘉
+function validateForm(): boolean {
+ // 楠岃瘉濮撳悕
+ formErrors.name = !form.name.trim();
+
+ // 楠岃瘉鎵嬫満鍙�
+ const phoneReg = /^1[3-9]\d{9}$/;
+ formErrors.phone = !phoneReg.test(form.phone);
+
+ // 楠岃瘉鍦板尯
+ formErrors.region = !form.region;
+
+ // 楠岃瘉璇︾粏鍦板潃
+ formErrors.address = !form.address.trim();
+
+ // 濡傛灉鏈変换浣曢敊璇紝杩斿洖false
+ return !(formErrors.name || formErrors.phone || formErrors.region || formErrors.address);
+}
+
+// 淇濆瓨鍦板潃
+function handleSaveAddress() {
+ // 浣跨敤鏈湴楠岃瘉鏂规硶
+ if (!validateForm()) {
+ uni.showToast({
+ title: '璇峰～鍐欏畬鏁翠俊鎭�',
+ icon: 'none'
+ });
+ return;
+ }
+
+ try {
+ const success = saveAddress();
+
+ if (success) {
+ uni.showToast({
+ title: isEdit.value ? '淇敼鎴愬姛' : '娣诲姞鎴愬姛',
+ icon: 'success'
+ });
+
+ // 寤惰繜杩斿洖锛岃鐢ㄦ埛鐪嬪埌鎻愮ず
+ setTimeout(() => {
+ tab.navigateBack();
+ }, 1000);
+ } else {
+ uni.showToast({
+ title: '淇濆瓨澶辫触',
+ icon: 'none'
+ });
+ }
+ } catch (e) {
+ console.error('淇濆瓨鍦板潃澶辫触', e);
+ uni.showToast({
+ title: '淇濆瓨澶辫触',
+ icon: 'none'
+ });
+ }
+}
+
+// 鍒犻櫎鍦板潃
+function handleDeleteAddress() {
+ if (!isEdit.value) return;
+
+ uni.showModal({
+ title: '鎻愮ず',
+ content: '纭畾瑕佸垹闄ゆ鍦板潃鍚楋紵',
+ success: (res) => {
+ if (res.confirm) {
+ try {
+ const success = deleteAddress();
+
+ if (success) {
+ uni.showToast({
+ title: '鍒犻櫎鎴愬姛',
+ icon: 'success'
+ });
+
+ setTimeout(() => {
+ tab.navigateBack();
+ }, 1000);
+ } else {
+ uni.showToast({
+ title: '鍒犻櫎澶辫触',
+ icon: 'none'
+ });
+ }
+ } catch (e) {
+ console.error('鍒犻櫎鍦板潃澶辫触', e);
+ uni.showToast({
+ title: '鍒犻櫎澶辫触',
+ icon: 'none'
+ });
+ }
+ }
+ }
+ });
+}
+</script>
+
+<template>
+ <view class="wrap">
+ <view class="container">
+ <view class="top">
+ <view class="item">
+ <view class="left">
+ <text class="required">*</text>鏀惰揣浜�
+ </view>
+ <input type="text" v-model="form.name" placeholder-class="line" placeholder="璇峰～鍐欐敹璐т汉濮撳悕"
+ :class="{ 'error-input': formErrors.name }" />
+ <u-icon name="account" size="36rpx" color="#999"></u-icon>
+ </view>
+ <view class="error-msg" v-if="formErrors.name">璇疯緭鍏ユ敹璐т汉濮撳悕</view>
+
+ <view class="item">
+ <view class="left">
+ <text class="required">*</text>鎵嬫満鍙风爜
+ </view>
+ <input type="number" v-model="form.phone" placeholder-class="line" placeholder="璇峰～鍐欐敹璐т汉鎵嬫満鍙�" maxlength="11"
+ :class="{ 'error-input': formErrors.phone }" />
+ <u-icon name="phone" size="36rpx" color="#999"></u-icon>
+ </view>
+ <view class="error-msg" v-if="formErrors.phone">璇疯緭鍏ユ纭殑鎵嬫満鍙风爜</view>
+
+ <view class="item" @tap="handleShowRegionPicker">
+ <view class="left">
+ <text class="required">*</text>鎵�鍦ㄥ湴鍖�
+ </view>
+ <input disabled v-model="form.region" type="text" placeholder-class="line" placeholder="鐪佸競鍖哄幙銆佷埂闀囩瓑"
+ :class="{ 'error-input': formErrors.region }" />
+ <u-icon name="arrow-right" size="36rpx" color="#999"></u-icon>
+ </view>
+ <view class="error-msg" v-if="formErrors.region">璇烽�夋嫨鎵�鍦ㄥ湴鍖�</view>
+
+ <view class="item address">
+ <view class="left">
+ <text class="required">*</text>璇︾粏鍦板潃
+ </view>
+ <textarea v-model="form.address" type="text" placeholder-class="line" placeholder="琛楅亾銆佹ゼ鐗岀瓑"
+ :class="{ 'error-textarea': formErrors.address }" />
+ </view>
+ <view class="error-msg" v-if="formErrors.address">璇疯緭鍏ヨ缁嗗湴鍧�</view>
+ </view>
+
+ <view class="bottom">
+ <view class="tag">
+ <view class="left">鏍囩</view>
+ <view class="right">
+ <text v-for="tag in addressTags" :key="tag" class="tags" :class="{ 'active': selectedTag === tag }"
+ @tap="handleSelectTag(tag)">
+ {{ tag }}
+ </text>
+ <view class="tags plus"><u-icon size="22" name="plus" color="#999"></u-icon></view>
+ </view>
+ </view>
+ <view class="default">
+ <view class="left">
+ <view class="set">璁剧疆榛樿鍦板潃</view>
+ <view class="tips">鎻愰啋锛氭瘡娆′笅鍗曚細榛樿鎺ㄨ崘璇ュ湴鍧�</view>
+ </view>
+ <view class="right">
+ <switch color="#fa3534" :checked="defaultAddress" @change="handleSetDefault" />
+ </view>
+ </view>
+ </view>
+
+ <view class="button-group">
+ <view class="save-btn" @tap="handleSaveAddress">
+ {{ isEdit ? '淇濆瓨淇敼' : '淇濆瓨鍦板潃' }}
+ </view>
+ <view v-if="isEdit" class="delete-btn" @tap="handleDeleteAddress">
+ 鍒犻櫎鍦板潃
+ </view>
+ </view>
+ </view>
+
+ <city-select v-model="showRegionPicker" @city-change="handleCityChange"></city-select>
+ </view>
+</template>
+
+<style lang="scss" scoped>
+:v-deep(.line) {
+ color: $u-light-color;
+ font-size: 28rpx;
+}
+
+.wrap {
+ background-color: #f5f5f5;
+ min-height: 100vh;
+ padding: 20rpx;
+ box-sizing: border-box;
+
+ .container {
+ border-radius: 16rpx;
+ overflow: hidden;
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+ }
+
+ .top {
+ background-color: #ffffff;
+ padding: 30rpx;
+
+ .item {
+ display: flex;
+ font-size: 32rpx;
+ line-height: 100rpx;
+ align-items: center;
+ border-bottom: solid 1rpx #eeeeee;
+ position: relative;
+
+ .left {
+ width: 180rpx;
+ font-weight: 500;
+ color: #333;
+
+ .required {
+ color: #fa3534;
+ margin-right: 4rpx;
+ }
+ }
+
+ input {
+ text-align: left;
+ flex: 1;
+ height: 100rpx;
+ font-size: 30rpx;
+
+ &.error-input {
+ border-bottom: 1px solid #fa3534;
+ }
+ }
+
+ u-icon {
+ margin-left: 10rpx;
+ }
+ }
+
+ .error-msg {
+ color: #fa3534;
+ font-size: 24rpx;
+ padding-left: 180rpx;
+ margin-top: -10rpx;
+ margin-bottom: 10rpx;
+ }
+
+ .address {
+ padding: 20rpx 0;
+ align-items: flex-start;
+
+ .left {
+ padding-top: 20rpx;
+ }
+
+ textarea {
+ flex: 1;
+ height: 180rpx;
+ background-color: #f9f9f9;
+ line-height: 60rpx;
+ margin: 20rpx 0;
+ padding: 20rpx;
+ border-radius: 12rpx;
+ font-size: 30rpx;
+
+ &.error-textarea {
+ border: 1px solid #fa3534;
+ }
+ }
+ }
+ }
+
+ .bottom {
+ margin-top: 20rpx;
+ padding: 30rpx;
+ background-color: #ffffff;
+ font-size: 28rpx;
+ border-radius: 16rpx;
+
+ .tag {
+ display: flex;
+ align-items: center;
+
+ .left {
+ width: 160rpx;
+ font-weight: 500;
+ color: #333;
+ }
+
+ .right {
+ display: flex;
+ flex-wrap: wrap;
+ flex: 1;
+
+ .tags {
+ width: 150rpx;
+ padding: 20rpx 10rpx;
+ border: solid 2rpx #eeeeee;
+ text-align: center;
+ border-radius: 100rpx;
+ margin: 0 20rpx 20rpx 0;
+ display: flex;
+ font-size: 28rpx;
+ align-items: center;
+ justify-content: center;
+ color: #333;
+ line-height: 1;
+ transition: all 0.3s;
+
+ &.active {
+ background-color: #ffebec;
+ color: #fa3534;
+ border-color: #fa3534;
+ }
+ }
+
+ .plus {
+ background-color: #f5f5f5;
+ }
+ }
+ }
+
+ .default {
+ margin-top: 30rpx;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 20rpx;
+
+ .left {
+ .set {
+ font-weight: 500;
+ color: #333;
+ font-size: 30rpx;
+ }
+
+ .tips {
+ font-size: 24rpx;
+ color: #999;
+ margin-top: 10rpx;
+ }
+ }
+ }
+ }
+
+ .button-group {
+ display: flex;
+ flex-direction: column;
+ margin-top: 60rpx;
+
+ .save-btn {
+ background: linear-gradient(90deg, #ff4034, #fa3534);
+ color: #fff;
+ height: 90rpx;
+ line-height: 90rpx;
+ text-align: center;
+ font-size: 32rpx;
+ border-radius: 45rpx;
+ font-weight: bold;
+ box-shadow: 0 10rpx 20rpx rgba(250, 53, 52, 0.2);
+ letter-spacing: 2rpx;
+ }
+
+ .delete-btn {
+ margin-top: 30rpx;
+ background: #ffffff;
+ color: #fa3534;
+ border: 1px solid #fa3534;
+ height: 90rpx;
+ line-height: 90rpx;
+ text-align: center;
+ font-size: 32rpx;
+ border-radius: 45rpx;
+ letter-spacing: 2rpx;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3