我的房屋流程对接接口，缴费页面功能修改一版
This commit is contained in:
wangyuxin
@@ -54,6 +54,11 @@
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"permission": {
|
||||
"scope.camera": {
|
||||
"desc": "用于扫码"
|
||||
}
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
|
||||
90
property-uniapp-project/pageSubPack/api/apiSub.js
Normal file
90
property-uniapp-project/pageSubPack/api/apiSub.js
Normal file
@@ -0,0 +1,90 @@
|
||||
import request, {
|
||||
get,
|
||||
post,
|
||||
deleteMethod,
|
||||
putMethod
|
||||
} from "./request.js"
|
||||
|
||||
|
||||
// =======公告列表========
|
||||
export const getResidentNoticeList = (data) => {
|
||||
return get('/api/resident/notice/list', data)
|
||||
}
|
||||
// 我的房屋列表
|
||||
export const getMyHouseList = (data) => {
|
||||
return get('/api/resident/my/house/list', data)
|
||||
}
|
||||
// 提交房屋注册认证申请
|
||||
export const myHouseApply = (data) => {
|
||||
return post('/api/resident/my/house/apply', data)
|
||||
}
|
||||
// 查询小区列表
|
||||
export const getVillageList = (data) => {
|
||||
return get('/api/resident/village/list', data)
|
||||
} // 查询楼栋列表
|
||||
export const getHouseBuildings = (data) => {
|
||||
return get('/api/resident/house/buildings', data)
|
||||
}
|
||||
// 查询单元列表
|
||||
export const getHouseUnits = (data) => {
|
||||
return get('/api/resident/house/units', data)
|
||||
}
|
||||
// 查询楼层列表
|
||||
export const getHouseFloors = (data) => {
|
||||
return get('/api/resident/house/floors', data)
|
||||
}
|
||||
// 查询户号列表
|
||||
export const getHouseHouses = (data) => {
|
||||
return get('/api/resident/house/houses', data)
|
||||
}
|
||||
// 房屋绑定手机获取验证码
|
||||
export const getHouseAuthSendSmsCode = (data) => {
|
||||
return post('/api/resident/auth/sendSmsCode', data)
|
||||
}
|
||||
// 房屋详情
|
||||
export const getMyHouseDetail = (data) => {
|
||||
return get(`/api/resident/my/house/${data.id}`, data)
|
||||
}
|
||||
// 删除房屋
|
||||
export const deleteMyHouse = (data) => {
|
||||
return deleteMethod(`/api/resident/my/house/${data.id}`, data)
|
||||
}
|
||||
// 设置默认房屋
|
||||
export const setMyHouseDefault = (data) => {
|
||||
return post(`/api/resident/my/house/default`, data)
|
||||
}
|
||||
// 获取当前用户登录信息
|
||||
export const getUserProfile = (data) => {
|
||||
return get(`/api/resident/user/profile`, data)
|
||||
}
|
||||
// 发送新手机号验证码
|
||||
export const getAuthSendSmsCode = (data) => {
|
||||
return post(`/api/resident/auth/sendSmsCode`, data)
|
||||
}
|
||||
// 更改手机号
|
||||
export const getUserChangePhone = (data) => {
|
||||
return post(`/api/resident/user/changePhone`, data)
|
||||
}
|
||||
// 获取消息通知开关
|
||||
export const getUserNotify = (data) => {
|
||||
return get(`/api/resident/user/notify`, data)
|
||||
}
|
||||
// 更新消息通知开关
|
||||
export const changeUserNotify = (data) => {
|
||||
return post(`/api/resident/user/notify`, data)
|
||||
} // 修改密码(需登录)
|
||||
export const authChangePassword = (data) => {
|
||||
return post(`/api/resident/auth/changePassword`, data)
|
||||
} // 退出登录
|
||||
export const authLogout = (data) => {
|
||||
return post(`/api/resident/auth/logout`, data)
|
||||
}
|
||||
// 编辑房屋
|
||||
export const upDateMyHouse = (data) => {
|
||||
return putMethod(`/api/resident/my/house/${data.id}`, data)
|
||||
}
|
||||
|
||||
// 修改身份证照片
|
||||
export const uploadFileUploadImage = (data) => {
|
||||
return post(`/api/resident/file/uploadImage`, data)
|
||||
}
|
||||
@@ -1,15 +1,19 @@
|
||||
|
||||
let baseUrl = '';
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// http://192.168.1.215
|
||||
// http://192.168.0.224
|
||||
baseUrl = 'http://192.168.0.224:8080'; // 开发环境
|
||||
} else {
|
||||
baseUrl = 'http://192.168.1.224:8080'; // 生产环境
|
||||
baseUrl = 'http://192.168.0.224:8080'; // 生产环境
|
||||
}
|
||||
|
||||
export default function request(url, data = {}, method = "GET") {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 加载中提示（提升用户体验）
|
||||
uni.showLoading({ title: '请求中...', mask: true });
|
||||
uni.showLoading({
|
||||
title: '请求中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
uni.request({
|
||||
url: baseUrl + url,
|
||||
@@ -30,7 +34,11 @@ export default function request(url, data = {}, method = "GET") {
|
||||
// 处理HTTP状态码（网络层面）
|
||||
if (res.statusCode !== 200) {
|
||||
const errMsg = `请求失败（${res.statusCode}）`;
|
||||
uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
|
||||
uni.showToast({
|
||||
title: errMsg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
reject(errMsg);
|
||||
return;
|
||||
}
|
||||
@@ -40,10 +48,16 @@ export default function request(url, data = {}, method = "GET") {
|
||||
|
||||
// 优先处理token过期（401）
|
||||
if (resData.code === 401) {
|
||||
uni.showToast({ title: '登录过期，请重新登录', icon: 'none', duration: 2000 });
|
||||
uni.showToast({
|
||||
title: '登录过期，请重新登录',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
uni.clearStorageSync('token');
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({ url: '/pageSubPack/loginSub/pwd-login' });
|
||||
uni.reLaunch({
|
||||
url: '/pageSubPack/loginSub/pwd-login'
|
||||
});
|
||||
}, 1500);
|
||||
reject('token 过期');
|
||||
return;
|
||||
@@ -56,20 +70,31 @@ export default function request(url, data = {}, method = "GET") {
|
||||
// 业务失败（code=500）
|
||||
else if (resData.code === 500) {
|
||||
const errMsg = resData.msg || '请求失败';
|
||||
uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
|
||||
uni.showToast({
|
||||
title: errMsg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
// resolve(null)
|
||||
reject(errMsg);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
const errMsg = resData.msg || '业务异常';
|
||||
uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
|
||||
uni.showToast({
|
||||
title: errMsg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
reject(errMsg);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading(); // 关闭加载提示
|
||||
const errMsg = err.msg || '网络请求失败';
|
||||
uni.showToast({ title: errMsg, icon: "none", duration: 2000 });
|
||||
uni.showToast({
|
||||
title: errMsg,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
@@ -77,5 +102,5 @@ export default function request(url, data = {}, method = "GET") {
|
||||
}
|
||||
export const get = (url, data) => request(url, data, 'GET');
|
||||
export const post = (url, data) => request(url, data, 'POST');
|
||||
|
||||
|
||||
export const deleteMethod = (url, data) => request(url, data, 'DELETE');
|
||||
export const putMethod = (url, data) => request(url, data, 'PUT');
|
||||
173
property-uniapp-project/pageSubPack/api/useImageUpload.js
Normal file
173
property-uniapp-project/pageSubPack/api/useImageUpload.js
Normal file
@@ -0,0 +1,173 @@
|
||||
// 服务器地址（与 request.js 保持一致）
|
||||
const baseUrl = 'http://192.168.0.224:8080';
|
||||
|
||||
/**
|
||||
* 图片上传 Hook
|
||||
* 支持 uniapp 和微信小程序
|
||||
* 解决编辑回显后重新上传的问题
|
||||
*/
|
||||
|
||||
import { ref } from 'vue'
|
||||
|
||||
/**
|
||||
* @param {Object} options 配置
|
||||
* @param {string} options.uploadUrl - 上传接口地址
|
||||
* @param {string} options.fileKey - 上传文件的字段名，默认 'file'
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function useImageUpload(options = {}) {
|
||||
const {
|
||||
uploadUrl = '/api/resident/file/uploadImage',
|
||||
fileKey = 'file'
|
||||
} = options
|
||||
|
||||
// 当前显示的图片（前端展示用，支持 base64/blob URL/网络URL）
|
||||
const previewUrl = ref('')
|
||||
// 服务器返回的 URL（提交时使用）
|
||||
const serverUrl = ref('')
|
||||
// 临时的文件路径（重新上传时用）
|
||||
const tempFilePath = ref(null)
|
||||
// 上传状态
|
||||
const uploading = ref(false)
|
||||
|
||||
/**
|
||||
* 设置回显图片（编辑时从后端获取）
|
||||
* @param {string} url - 后端返回的图片URL
|
||||
*/
|
||||
const setPreviewUrl = (url) => {
|
||||
if (url) {
|
||||
previewUrl.value = url
|
||||
serverUrl.value = url
|
||||
tempFilePath.value = null // 重置临时文件，表示没有重新上传
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择图片并预览（不上传）
|
||||
* @returns {Promise<string>} 返回临时文件路径
|
||||
*/
|
||||
const chooseImage = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['camera', 'album'],
|
||||
success: (res) => {
|
||||
const path = res.tempFilePaths[0]
|
||||
// 设置预览
|
||||
previewUrl.value = path
|
||||
// 记录临时文件路径
|
||||
tempFilePath.value = path
|
||||
// 置空服务器URL，等实际上传后再获取
|
||||
serverUrl.value = ''
|
||||
resolve(path)
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传图片到服务器
|
||||
* @returns {Promise<string>} 返回服务器上的URL
|
||||
*/
|
||||
const uploadImage = () => {
|
||||
// 如果没有新选择临时文件，直接返回已有的服务器URL
|
||||
if (!tempFilePath.value) {
|
||||
return Promise.resolve(serverUrl.value)
|
||||
}
|
||||
|
||||
// 如果已经有服务器URL且没有重新选择，也直接返回
|
||||
if (serverUrl.value && !tempFilePath.value) {
|
||||
return Promise.resolve(serverUrl.value)
|
||||
}
|
||||
|
||||
uploading.value = true
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: baseUrl + uploadUrl,
|
||||
filePath: tempFilePath.value,
|
||||
name: fileKey,
|
||||
header: {
|
||||
'Authorization': 'Bearer ' + (uni.getStorageSync('token') || ''),
|
||||
'clientid': 'resident'
|
||||
},
|
||||
success: (res) => {
|
||||
try {
|
||||
const data = JSON.parse(res.data)
|
||||
if (data.code === 200 && data.data) {
|
||||
// 更新服务器URL（确保存的是字符串）
|
||||
const url = typeof data.data === 'string' ? data.data : (data.data?.url || '')
|
||||
serverUrl.value = url
|
||||
// 清空临时文件
|
||||
tempFilePath.value = null
|
||||
resolve(url)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: data.msg || '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
reject(new Error(data.msg || '上传失败'))
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
reject(e)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: err.message || '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
reject(err)
|
||||
},
|
||||
complete: () => {
|
||||
uploading.value = false
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最终可提交的URL
|
||||
* 如果有新上传的图片，先上传再返回URL
|
||||
* 如果没有新上传，直接返回已有的服务器URL
|
||||
* @returns {Promise<string>}
|
||||
*/
|
||||
const getSubmitUrl = async () => {
|
||||
// 如果重新选择了新图片，先上传
|
||||
if (tempFilePath.value) {
|
||||
return await uploadImage()
|
||||
}
|
||||
// 否则返回已有的服务器URL
|
||||
return serverUrl.value
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置状态
|
||||
*/
|
||||
const reset = () => {
|
||||
previewUrl.value = ''
|
||||
serverUrl.value = ''
|
||||
tempFilePath.value = null
|
||||
uploading.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
previewUrl, // 前端展示用
|
||||
serverUrl, // 提交时使用的URL
|
||||
tempFilePath, // 临时文件路径
|
||||
uploading, // 上传中状态
|
||||
setPreviewUrl, // 设置回显图片（编辑时用）
|
||||
chooseImage, // 选择图片（预览用，不上传）
|
||||
uploadImage, // 上传到服务器
|
||||
getSubmitUrl, // 获取最终可提交的URL（自动处理上传）
|
||||
reset // 重置
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,8 @@
|
||||
<!-- 点击这里弹出下拉选择 -->
|
||||
<view class="form-item" @click="showPopup = true">
|
||||
<text class="label">房屋状态</text>
|
||||
<text class="value" :class="{selected:formData.status}">{{ formData.status || '请选择' }}</text>
|
||||
<text class="value"
|
||||
:class="{selected:formData.status}">{{ formData.status.name || '请选择' }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
|
||||
@@ -86,9 +87,9 @@
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view :class="{ active: formData.status === item }" class="item"
|
||||
v-for="(item, index) in statusList" :key="index" @click="selectClick(item)">
|
||||
{{ item }}
|
||||
<view :class="{ active: formData.status.id == item.id }" class="item"
|
||||
v-for="(item, index) in statusList" :key="upDataListNum" @click="selectClick(item)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -127,7 +128,8 @@
|
||||
|
||||
<view class="form-item arrow-item" @click="openCardType">
|
||||
<text class="label">证件类型</text>
|
||||
<text class="value" :class="{selected:form.cardType}">{{ form.cardType || '请选择' }}</text>
|
||||
<text class="value"
|
||||
:class="{selected:form.cardType}">{{ form.cardType.name || '请选择' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
@@ -137,7 +139,8 @@
|
||||
|
||||
<view class="form-item arrow-item" @click="openRelation">
|
||||
<text class="label">与业主关系</text>
|
||||
<text class="value" :class="{selected:form.relation}">{{ form.relation || '请选择' }}</text>
|
||||
<text class="value"
|
||||
:class="{selected:form.relation}">{{ form.relation.name || '请选择' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item phone-item">
|
||||
@@ -164,15 +167,15 @@
|
||||
<!-- 身份证人像面 -->
|
||||
<view class="upload-item" @click="chooseIdCard('front')">
|
||||
<!-- 已上传 → 显示图片 -->
|
||||
<image :src="idCardFront?idCardFront:frontSideOfIDcardSrc" class="preview-img"
|
||||
mode="aspectFit">
|
||||
<image :src="idCardFrontUpload.previewUrl || frontSideOfIDcardSrc"
|
||||
class="preview-img" mode="aspectFit">
|
||||
</image>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 身份证国徽面 -->
|
||||
<view class="upload-item" @click="chooseIdCard('back')">
|
||||
<image :src="idCardBack?idCardBack:backSideOfIDcardSrc" class="preview-img"
|
||||
<image :src="idCardBackUpload.previewUrl || backSideOfIDcardSrc" class="preview-img"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
|
||||
@@ -196,14 +199,13 @@
|
||||
<text class="close" @click="showCardType=false">✕</text>
|
||||
</view>
|
||||
<view class="popup-list">
|
||||
<view :class="{ active: form.cardType === item }" class="item" v-for="item in cardTypes" :key="item"
|
||||
@click="selectCard(item)">
|
||||
{{item}}
|
||||
<view :class="{ active: form.cardType.id == item.id }" class="item" v-for="item in cardTypes"
|
||||
:key="item.id" @click="selectCard(item)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关系弹窗 -->
|
||||
<view v-if="showRelation" class="mask" @click="showRelation=false"></view>
|
||||
<view v-if="showRelation" class="popup">
|
||||
<view class="popup-header">
|
||||
@@ -211,9 +213,9 @@
|
||||
<text class="close" @click="showRelation=false">✕</text>
|
||||
</view>
|
||||
<view class="popup-list">
|
||||
<view :class="{ active: form.relation === item }" class="item" v-for="item in relations" :key="item"
|
||||
@click="selectRelation(item)">
|
||||
{{item}}
|
||||
<view :class="{ active: form.relation.id == item.id }" class="item" v-for="item,index in relations"
|
||||
:key="upDataListNum" @click="selectRelation(item)">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -231,72 +233,38 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
if (uni.getStorageSync('operationType') == 'update') {
|
||||
this.id = option.id;
|
||||
this.type = '修改';
|
||||
//根据id获取回显数据
|
||||
this.formData.community = '北境碧桂园小区';
|
||||
this.formData.building = '01栋';
|
||||
this.formData.unit = '01单元';
|
||||
this.formData.floor = '01层';
|
||||
this.formData.houseNumber = '01';
|
||||
this.formData.communityId = '1';
|
||||
this.formData.buildingId = '1';
|
||||
this.formData.unitId = '1';
|
||||
this.formData.floorId = '1';
|
||||
this.formData.houseNumberId = '1';
|
||||
this.formData.status = '租赁';
|
||||
this.formData.isDefault = true;
|
||||
this.form.name = '王芳';
|
||||
this.form.gender = '女';
|
||||
this.form.cardType = '身份证';
|
||||
this.form.cardNo = '370203200000000911';
|
||||
this.form.relation = '本人';
|
||||
this.form.phone = '17711111111';
|
||||
this.form.code = '';
|
||||
|
||||
|
||||
} else if (uni.getStorageSync('operationType') == 'add') {
|
||||
this.id = undefined;
|
||||
this.type = '添加';
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
frontSideOfIDcardSrc: 'http://47.104.199.163:9090/images/propertyImgs/frontSideOfIDcard.png',
|
||||
backSideOfIDcardSrc: 'http://47.104.199.163:9090/images/propertyImgs/backSideOfIDcard.png',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
id: undefined,
|
||||
type: '',
|
||||
currentStep: 0,
|
||||
showPopup: false,
|
||||
statusList: ["自住", "闲置", "租赁", "其他"],
|
||||
formData: {
|
||||
<!-- myHouseApply -->
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from 'vue'
|
||||
import {
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
myHouseApply,
|
||||
getHouseAuthSendSmsCode,
|
||||
getMyHouseDetail,
|
||||
upDateMyHouse,
|
||||
} from '/pageSubPack/api/apiSub.js'
|
||||
import {
|
||||
useImageUpload
|
||||
} from '/pageSubPack/api/useImageUpload.js'
|
||||
const form = reactive({
|
||||
name: '',
|
||||
gender: '男',
|
||||
cardType: {},
|
||||
cardNo: '',
|
||||
relation: {},
|
||||
phone: '',
|
||||
code: ''
|
||||
})
|
||||
const formData = reactive({
|
||||
community: uni.getStorageSync('communityName'),
|
||||
building: uni.getStorageSync('buildingName'),
|
||||
unit: uni.getStorageSync('unitName'),
|
||||
@@ -309,148 +277,505 @@
|
||||
houseNumberId: uni.getStorageSync('houseNumberId'),
|
||||
status: uni.getStorageSync('houseStatus'),
|
||||
isDefault: uni.getStorageSync('houseIsDefault') == true ? true : false, // 开关默认开启
|
||||
|
||||
})
|
||||
const statusList = ref([{
|
||||
id: 0,
|
||||
name: '自住'
|
||||
},
|
||||
form: {
|
||||
name: '',
|
||||
gender: '男',
|
||||
cardType: '',
|
||||
cardNo: '',
|
||||
relation: '',
|
||||
phone: '',
|
||||
code: ''
|
||||
{
|
||||
id: 1,
|
||||
name: '闲置'
|
||||
},
|
||||
cd: 0,
|
||||
timer: null,
|
||||
showCardType: false,
|
||||
showRelation: false,
|
||||
cardTypes: ['居民身份证', '护照', '其他'],
|
||||
relations: ['本人', '配偶', '父母', '子女', '亲属', '租户', '其他'],
|
||||
// 身份证图片路径
|
||||
idCardFront: '', // 人像面
|
||||
idCardBack: '' // 国徽面
|
||||
{
|
||||
id: 2,
|
||||
name: '租赁'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '其他'
|
||||
}
|
||||
])
|
||||
const cardTypes = ref([{
|
||||
id: 0,
|
||||
name: '居民身份证'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '护照'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '其他'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
chooseIdCard(type) {
|
||||
uni.chooseImage({
|
||||
count: 1, // 每次只选1张
|
||||
sizeType: ['compressed'], // 压缩
|
||||
sourceType: ['camera', 'album'], // 相机+相册
|
||||
success: (res) => {
|
||||
const tempPath = res.tempFilePaths[0]
|
||||
const relations = ref([{
|
||||
id: 0,
|
||||
name: '本人'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '配偶'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '父母'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '子女'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '亲属'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '租户'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '其他'
|
||||
}
|
||||
])
|
||||
|
||||
// 赋值回显
|
||||
if (type === 'front') {
|
||||
this.idCardFront = tempPath
|
||||
} else {
|
||||
this.idCardBack = tempPath
|
||||
const upDataListNum = ref(0)
|
||||
// const idCardFront = ref('')
|
||||
// const idCardBack = ref('')
|
||||
const frontSideOfIDcardSrc = ref('http://47.104.199.163:9090/images/propertyImgs/frontSideOfIDcard.png')
|
||||
const backSideOfIDcardSrc = ref('http://47.104.199.163:9090/images/propertyImgs/backSideOfIDcard.png')
|
||||
|
||||
const houseId = ref(undefined)
|
||||
const type = ref('')
|
||||
const currentStep = ref(0)
|
||||
const showPopup = ref(false)
|
||||
const cd = ref(0)
|
||||
const timer = ref(null)
|
||||
const showCardType = ref(false)
|
||||
const showRelation = ref(false)
|
||||
|
||||
// 身份证正面 - 使用 hook 管理上传
|
||||
const idCardFrontUpload = useImageUpload({
|
||||
uploadUrl: '/api/resident/file/uploadImage'
|
||||
})
|
||||
// 身份证反面 - 使用 hook 管理上传
|
||||
const idCardBackUpload = useImageUpload({
|
||||
uploadUrl: '/api/resident/file/uploadImage'
|
||||
})
|
||||
// ==================== 获取列表数据 ====================
|
||||
const getDetail = async () => {
|
||||
|
||||
try {
|
||||
const res = await getMyHouseDetail({
|
||||
id: houseId.value
|
||||
})
|
||||
|
||||
const data = res
|
||||
console.log(data);
|
||||
if (data.code === 200) {
|
||||
uni.setStorageSync('communityName', data.data.villageName)
|
||||
uni.setStorageSync('buildingName', data.data.buildingName)
|
||||
uni.setStorageSync('unitName', data.data.unitNo)
|
||||
uni.setStorageSync('floorName', data.data.floorNo)
|
||||
uni.setStorageSync('houseNumberName', data.data.houseNo)
|
||||
uni.setStorageSync('communityId', data.data.villageId)
|
||||
uni.setStorageSync('buildingId', data.data.buildingId)
|
||||
uni.setStorageSync('unitId', data.data.unitNo)
|
||||
uni.setStorageSync('floorId', data.data.floorNo)
|
||||
uni.setStorageSync('houseNumberId', data.data.houseId)
|
||||
uni.setStorageSync('houseStatus', data.data.houseStatus)
|
||||
uni.setStorageSync('houseIsDefault', data.data.isDefault)
|
||||
formData.community = uni.getStorageSync('communityName')
|
||||
formData.building = uni.getStorageSync('buildingName')
|
||||
formData.unit = uni.getStorageSync('unitName')
|
||||
formData.floor = uni.getStorageSync('floorName')
|
||||
formData.houseNumber = uni.getStorageSync('houseNumberName')
|
||||
formData.communityId = uni.getStorageSync('communityId')
|
||||
formData.buildingId = uni.getStorageSync('buildingId')
|
||||
formData.unitId = uni.getStorageSync('unitId')
|
||||
formData.floorId = uni.getStorageSync('floorId')
|
||||
formData.houseNumberId = uni.getStorageSync('houseNumberId')
|
||||
formData.status = uni.getStorageSync('houseStatus')
|
||||
formData.isDefault = uni.getStorageSync('houseIsDefault')
|
||||
form.name = data.data.name
|
||||
form.gender = data.data.gender == '0' ? '男' : data.data.gender == '1' ? '女' : ''
|
||||
form.cardNo = data.data.idCard
|
||||
// 房屋状态回显
|
||||
let checkHouseStatus = {}
|
||||
statusList.value.forEach(item => {
|
||||
if (item.id == data.data.houseStatus) {
|
||||
checkHouseStatus = {
|
||||
id: data.data.houseStatus,
|
||||
name: item.name
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
openCardType() {
|
||||
this.showCardType = true
|
||||
},
|
||||
openRelation() {
|
||||
this.showRelation = true
|
||||
},
|
||||
selectCard(v) {
|
||||
this.form.cardType = v
|
||||
this.showCardType = false
|
||||
},
|
||||
selectRelation(v) {
|
||||
this.form.relation = v
|
||||
this.showRelation = false
|
||||
},
|
||||
// 证件类型回显
|
||||
let checkCardType = {}
|
||||
cardTypes.value.forEach(item => {
|
||||
if (item.id == data.data.idCardType) {
|
||||
checkCardType = {
|
||||
id: data.data.idCardType,
|
||||
name: item.name
|
||||
}
|
||||
}
|
||||
})
|
||||
// 与户主关系回显
|
||||
let checkRelation = {}
|
||||
relations.value.forEach(item => {
|
||||
if (item.id == data.data.ownerRelationship) {
|
||||
checkRelation = {
|
||||
id: data.data.ownerRelationship,
|
||||
name: item.name
|
||||
}
|
||||
}
|
||||
})
|
||||
selectClick(checkHouseStatus)
|
||||
selectCard(checkCardType)
|
||||
selectRelation(checkRelation)
|
||||
|
||||
sendCode() {
|
||||
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||||
form.phone = data.data.phone
|
||||
form.code = ''
|
||||
// 使用 hook 设置回显图片
|
||||
idCardFrontUpload.setPreviewUrl(data.data.cardImageFront?.url || data.data.cardImageFront || '')
|
||||
idCardBackUpload.setPreviewUrl(data.data.cardImageBack?.url || data.data.cardImageBack || '')
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: `${res.msg}`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: `${err}`,
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onUnload(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
onLoad((option) => {
|
||||
console.log(uni.getStorageSync('updateHouseId'));
|
||||
if (option.id) {
|
||||
if (uni.getStorageSync('operationType') == 'update') {
|
||||
houseId.value = option.id;
|
||||
uni.setStorageSync('updateHouseId', houseId.value)
|
||||
type.value = '修改';
|
||||
getDetail()
|
||||
}
|
||||
} else {
|
||||
if (uni.getStorageSync('operationType') == 'update') {
|
||||
houseId.value = uni.getStorageSync('updateHouseId')
|
||||
} else
|
||||
if (uni.getStorageSync('operationType') == 'add') {
|
||||
houseId.value = undefined;
|
||||
type.value = '添加';
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
const chooseIdCard = async (type) => {
|
||||
try {
|
||||
const tempPath = await (type === 'front' ? idCardFrontUpload.chooseImage() : idCardBackUpload
|
||||
.chooseImage())
|
||||
// 已经由 hook 自动处理了 previewUrl 和 tempFilePath
|
||||
} catch (err) {
|
||||
// 用户取消选择，不处理
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const openCardType = () => {
|
||||
showCardType.value = true
|
||||
}
|
||||
const openRelation = () => {
|
||||
showRelation.value = true
|
||||
}
|
||||
const selectCard = (v) => {
|
||||
form.cardType = v
|
||||
showCardType.value = false
|
||||
upDataListNum.value++
|
||||
}
|
||||
const selectRelation = (v) => {
|
||||
form.relation = v
|
||||
showRelation.value = false
|
||||
upDataListNum.value++
|
||||
}
|
||||
const selectClick = (item) => {
|
||||
formData.status = item;
|
||||
uni.setStorageSync('houseStatus', item)
|
||||
showPopup.value = false;
|
||||
upDataListNum.value++
|
||||
}
|
||||
const sendCode = () => {
|
||||
if (!/^1[3-9]\d{9}$/.test(form.phone)) {
|
||||
return uni.showToast({
|
||||
title: '手机号格式错误',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
this.cd = 60
|
||||
this.timer = setInterval(() => {
|
||||
this.cd--
|
||||
if (this.cd <= 0) clearInterval(this.timer)
|
||||
cd.value = 60
|
||||
timer.value = setInterval(() => {
|
||||
cd.value--
|
||||
if (cd.value <= 0) clearInterval(timer)
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
let params = {
|
||||
phone: form.phone,
|
||||
scene: "house_bind"
|
||||
}
|
||||
getHouseAuthSendSmsCode(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: `发送成功！`,
|
||||
icon: 'error'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: `${res.msg}`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.msg || '发送失败',
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// 下一步
|
||||
const goNext = () => {
|
||||
console.log(typeof(uni.getStorageSync('communityId')));
|
||||
// 基础校验
|
||||
if (!formData.community) {
|
||||
uni.showToast({
|
||||
title: '请选择小区',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!formData.building) {
|
||||
uni.showToast({
|
||||
title: '请选择楼栋',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!formData.unit) {
|
||||
uni.showToast({
|
||||
title: '请选择单元',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!formData.floor) {
|
||||
uni.showToast({
|
||||
title: '请选择楼层',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!formData.houseNumber) {
|
||||
uni.showToast({
|
||||
title: '请选择户号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!formData.status) {
|
||||
uni.showToast({
|
||||
title: '请选择房屋状态',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
currentStep.value = 1
|
||||
//跳转
|
||||
}
|
||||
|
||||
|
||||
// 完整校验
|
||||
goSubmit() {
|
||||
if (!this.form.name) return uni.showToast({
|
||||
const goSubmit = async () => {
|
||||
// 1. 前端校验
|
||||
if (!form.name) return uni.showToast({
|
||||
title: '请输入住户姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.form.gender) return uni.showToast({
|
||||
if (!form.gender) return uni.showToast({
|
||||
title: '请选择住户性别',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.form.cardType) return uni.showToast({
|
||||
if (!form.cardType && form.cardType != 0) return uni.showToast({
|
||||
title: '请选择证件类型',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.form.cardNo) return uni.showToast({
|
||||
if (!form.cardNo) return uni.showToast({
|
||||
title: '请输入证件号',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.form.relation) return uni.showToast({
|
||||
if (!form.relation && form.relation != 0) return uni.showToast({
|
||||
title: '请选择关系',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) return uni.showToast({
|
||||
if (!/^1[3-9]\d{9}$/.test(form.phone)) return uni.showToast({
|
||||
title: '手机号错误',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.form.code || this.form.code.length !== 6) return uni.showToast({
|
||||
if (!form.code || form.code.length !== 6) return uni.showToast({
|
||||
title: '请输入6位验证码',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.idCardFront) return uni.showToast({
|
||||
if (!idCardFrontUpload.previewUrl) return uni.showToast({
|
||||
title: '请上传身份证人像面',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.idCardBack) return uni.showToast({
|
||||
if (!idCardBackUpload.previewUrl) return uni.showToast({
|
||||
title: '请上传身份证国徽面',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
// 2. 确认弹窗
|
||||
const modalRes = await new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: '确认提交',
|
||||
content: '提交后进入审核',
|
||||
mask: true,
|
||||
success: (res) => {
|
||||
success: resolve
|
||||
})
|
||||
})
|
||||
if (!modalRes.confirm) return
|
||||
|
||||
// 3. 开始提交
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
})
|
||||
|
||||
try {
|
||||
// 4. 获取图片URL
|
||||
let cardImageFrontUrl = ''
|
||||
let cardImageBackUrl = ''
|
||||
|
||||
// 编辑模式
|
||||
if (houseId.value) {
|
||||
// 如果重新选择了图片，需要上传
|
||||
if (idCardFrontUpload.tempFilePath) {
|
||||
cardImageFrontUrl = await idCardFrontUpload.uploadImage()
|
||||
} else {
|
||||
const frontUrl = idCardFrontUpload.serverUrl || idCardFrontUpload.previewUrl
|
||||
cardImageFrontUrl = typeof frontUrl === 'string' ? frontUrl : ''
|
||||
}
|
||||
if (idCardBackUpload.tempFilePath) {
|
||||
cardImageBackUrl = await idCardBackUpload.uploadImage()
|
||||
} else {
|
||||
const backUrl = idCardBackUpload.serverUrl || idCardBackUpload.previewUrl
|
||||
cardImageBackUrl = typeof backUrl === 'string' ? backUrl : ''
|
||||
}
|
||||
} else {
|
||||
// 新增模式：必须上传
|
||||
cardImageFrontUrl = await idCardFrontUpload.uploadImage()
|
||||
cardImageBackUrl = await idCardBackUpload.uploadImage()
|
||||
}
|
||||
console.log(cardImageFrontUrl);
|
||||
// 5. 组装公共参数
|
||||
const params = {
|
||||
villageId: uni.getStorageSync('communityId'),
|
||||
buildingId: uni.getStorageSync('buildingId'),
|
||||
unitNo: uni.getStorageSync('unitId'),
|
||||
floorNo: uni.getStorageSync('floorId'),
|
||||
houseNo: uni.getStorageSync('houseNumberName'),
|
||||
houseId: uni.getStorageSync('houseNumberId'),
|
||||
name: form.name,
|
||||
gender: form.gender == '男' ? '0' : '1',
|
||||
idCardType: form.cardType.id,
|
||||
idCard: form.cardNo,
|
||||
houseStatus: uni.getStorageSync('houseStatus').id,
|
||||
ownerRelationship: form.relation.id,
|
||||
phone: form.phone,
|
||||
smsCode: form.code,
|
||||
isDefault: uni.getStorageSync('houseIsDefault'),
|
||||
cardImageFront: cardImageFrontUrl.url,
|
||||
cardImageBack: cardImageBackUrl.url,
|
||||
}
|
||||
|
||||
// 6. 判断是新增还是修改
|
||||
if (houseId.value) {
|
||||
// 修改
|
||||
params.id = houseId.value
|
||||
await upDateMyHouse(params)
|
||||
} else {
|
||||
// 新增
|
||||
await myHouseApply(params)
|
||||
}
|
||||
|
||||
// 7. 成功
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
goBack()
|
||||
}, 1500)
|
||||
|
||||
} catch (err) {
|
||||
// 8. 统一错误处理
|
||||
uni.hideLoading()
|
||||
console.log('提交失败：', err)
|
||||
uni.showToast({
|
||||
title: err.msg || '提交失败',
|
||||
icon: 'none',
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const updateMethod = async (params) => {
|
||||
await upDateMyHouse(params).then(res => {
|
||||
console.log('33333', res)
|
||||
if (res.code === 200) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
goBack()
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: `${res.msg}`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
selectClick(item) {
|
||||
this.formData.status = item;
|
||||
uni.setStorageSync('houseStatus', item)
|
||||
this.showPopup = false;
|
||||
},
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
uni.showToast({
|
||||
title: `${err}`,
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 选择项点击事件（可替换为picker/弹窗选择）
|
||||
selectItem(type) {
|
||||
const selectItem = (type) => {
|
||||
console.log(type);
|
||||
console.log(uni.getStorageSync('checkType'));
|
||||
if (type === '小区') {
|
||||
@@ -461,7 +786,7 @@
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (type === '楼栋') {
|
||||
if (!this.formData.community) {
|
||||
if (!formData.community) {
|
||||
uni.showToast({
|
||||
title: '请先选择上级',
|
||||
icon: 'none'
|
||||
@@ -478,7 +803,7 @@
|
||||
}
|
||||
|
||||
} else if (type === '单元') {
|
||||
if (!this.formData.community || !this.formData.building) {
|
||||
if (!formData.community || !formData.building) {
|
||||
uni.showToast({
|
||||
title: '请先选择上级',
|
||||
icon: 'none'
|
||||
@@ -494,7 +819,7 @@
|
||||
});
|
||||
}
|
||||
} else if (type === '楼层') {
|
||||
if (!this.formData.community || !this.formData.building || !this.formData.unit) {
|
||||
if (!formData.community || !formData.building || !formData.unit) {
|
||||
uni.showToast({
|
||||
title: '请先选择上级',
|
||||
icon: 'none'
|
||||
@@ -510,7 +835,7 @@
|
||||
});
|
||||
}
|
||||
} else if (type === '户号') {
|
||||
if (!this.formData.community || !this.formData.building || !this.formData.unit || !this.formData
|
||||
if (!formData.community || !formData.building || !formData.unit || !formData
|
||||
.floor) {
|
||||
uni.showToast({
|
||||
title: '请先选择上级',
|
||||
@@ -527,63 +852,15 @@
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
// 开关切换
|
||||
onSwitchChange(e) {
|
||||
this.formData.isDefault = e.detail.value
|
||||
const onSwitchChange = (e) => {
|
||||
formData.isDefault = e.detail.value
|
||||
uni.setStorageSync('houseIsDefault', e.detail.value)
|
||||
},
|
||||
}
|
||||
|
||||
// 下一步
|
||||
goNext() {
|
||||
// 基础校验
|
||||
if (!this.formData.community) {
|
||||
uni.showToast({
|
||||
title: '请选择小区',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.formData.building) {
|
||||
uni.showToast({
|
||||
title: '请选择楼栋',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.formData.unit) {
|
||||
uni.showToast({
|
||||
title: '请选择单元',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.formData.floor) {
|
||||
uni.showToast({
|
||||
title: '请选择楼层',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.formData.houseNumber) {
|
||||
uni.showToast({
|
||||
title: '请选择户号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.formData.status) {
|
||||
uni.showToast({
|
||||
title: '请选择房屋状态',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.currentStep = 1
|
||||
//跳转
|
||||
},
|
||||
goBack() {
|
||||
const goBack = () => {
|
||||
uni.removeStorageSync('communityId');
|
||||
uni.removeStorageSync('communityName');
|
||||
uni.removeStorageSync('buildingId');
|
||||
@@ -596,18 +873,13 @@
|
||||
uni.removeStorageSync('houseNumberName');
|
||||
uni.removeStorageSync('houseStatus')
|
||||
uni.removeStorageSync('houseIsDefault')
|
||||
|
||||
uni.removeStorageSync('updateHouseId')
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/myHouseIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@@ -1003,10 +1275,38 @@
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
padding: 6rpx 30rpx;
|
||||
border: 2rpx solid #efefef;
|
||||
border: none !important;
|
||||
border-radius: 16rpx;
|
||||
/* border-radius: 99px; */
|
||||
}
|
||||
|
||||
.code-btn::after {
|
||||
border: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 自己加一层稳定的边框 */
|
||||
.code-btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid #ccc !important;
|
||||
/* 边框颜色 */
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 禁用状态 */
|
||||
.code-btn[disabled] {
|
||||
opacity: 1 !important;
|
||||
background: #f5f5f5 !important;
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
.upload-section {
|
||||
margin-top: 30rpx;
|
||||
|
||||
@@ -32,21 +32,23 @@
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">小区</text>
|
||||
<text class="info-value">{{form.community}}}</text>
|
||||
<text class="info-value">{{form.villageName}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">房间号</text>
|
||||
<text class="info-value">{{form.houseNumber}}</text>
|
||||
<text class="info-value">{{form.houseNo}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">业主</text>
|
||||
<text class="info-value">{{form.owner}}</text>
|
||||
<text class="info-value">{{form.ownerName}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">房间状态</text>
|
||||
<text class="info-value"
|
||||
:style="{color: form.status === '自住' ? '#00aaff' : form.status === '闲置' ?
|
||||
'#FF700A' : form.status === '租赁' ? '#00aa00' : form.status === '其他' ? '#00557f' : '#999' }">{{form.status}}</text>
|
||||
<text class="info-value" :style="{color: form.status === '0' ? '#00aaff' : form.status === '1' ?
|
||||
'#FF700A' : form.status === '2' ? '#00aa00' : form.status === '3' ? '#00557f' : '#999' }">{{
|
||||
form.status === '0' ? '自住' : form.status === '1' ?
|
||||
'闲置' : form.status === '2' ? '租赁' : form.status === '3' ? '其他' : ''
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@@ -59,35 +61,42 @@
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">住户</text>
|
||||
<text class="info-value">{{form.resident}}</text>
|
||||
<text class="info-value">{{form.name}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">房间号</text>
|
||||
<text class="info-value">{{form.gender}}</text>
|
||||
<text class="info-value">{{form.houseNo}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">证件类型</text>
|
||||
<text class="info-value">{{form.documentType}}</text>
|
||||
<text
|
||||
class="info-value">{{form.idCardType=='0'?'居民身份证':form.idCardType=='1'?'护照':form.idCardType=='2'?'其他':''}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">证件号码</text>
|
||||
<text class="info-value">{{form.documentNumber}}</text>
|
||||
<text class="info-value">{{form.idCard}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">与业主关系</text>
|
||||
<text class="info-value">{{form.relationship}}</text>
|
||||
<text
|
||||
class="info-value">{{form.ownerRelationship=='0'?'本人':form.ownerRelationship=='1'?'配偶':form.ownerRelationship=='2'?'父母':form.ownerRelationship=='3'?'子女':form.ownerRelationship=='4'?'亲属':form.ownerRelationship=='5'?'租户':form.ownerRelationship=='6'?'其他':''}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">手机号码</text>
|
||||
<text class="info-value">{{form.phoneNum}}</text>
|
||||
<text class="info-value">{{form.phone}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 身份证照片区 -->
|
||||
<view class="photo-row">
|
||||
<text class="info-label" style="width: 200rpx;">本人身份证照片</text>
|
||||
<view class="photo-list">
|
||||
<view class="photo-item"></view>
|
||||
<view class="photo-item"></view>
|
||||
<view class="photo-item"
|
||||
:style="{backgroundImage: `url(${form.cardImageFront||''})`,backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}">
|
||||
</view>
|
||||
<view class="photo-item"
|
||||
:style="{backgroundImage: `url(${form.cardImageBack||''})`,backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}">
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -103,64 +112,32 @@
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue'
|
||||
import {
|
||||
onReachBottom,
|
||||
onPullDownRefresh,
|
||||
onLoad,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
getMyHouseDetail,
|
||||
deleteMyHouse
|
||||
} from '/pageSubPack/api/apiSub.js'
|
||||
|
||||
},
|
||||
computed: {
|
||||
// 动态计算当前状态配置
|
||||
statusConfig() {
|
||||
return this.statusMap[this.currentStatus];
|
||||
},
|
||||
// 动态计算当前步骤
|
||||
currentStep() {
|
||||
return this.statusConfig.currentStep;
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.currentStatus = option.statusClass;
|
||||
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 可通过页面传参动态修改状态：success / pending / fail
|
||||
id: undefined,
|
||||
currentStatus: "",
|
||||
stepList: ["房屋信息", "住户信息", "物业审核", "认证成功"],
|
||||
form: {
|
||||
community: '北境碧桂园小区小区',
|
||||
houseNumber: '101栋2单元402',
|
||||
owner: '张三',
|
||||
status: '租赁',
|
||||
resident: '蒋依依',
|
||||
gender: '女',
|
||||
documentType: '身份证',
|
||||
documentNumber: '371100200001010888',
|
||||
relationship: '亲属',
|
||||
phoneNum: '16599999999',
|
||||
},
|
||||
// 状态配置表
|
||||
statusMap: {
|
||||
// 响应式数据
|
||||
const statusBarHeight = ref(20)
|
||||
const id = ref()
|
||||
const currentStatus = ref('')
|
||||
const stepList = ref(["房屋信息", "住户信息", "物业审核", "认证成功"])
|
||||
const form = ref([])
|
||||
const statusMap = ref({
|
||||
success: {
|
||||
title: "房屋认证成功",
|
||||
iconClass: "icon-success",
|
||||
@@ -179,27 +156,59 @@
|
||||
iconText: "✕",
|
||||
currentStep: 3,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const statusConfig = computed(() => {
|
||||
return statusMap.value[currentStatus.value]
|
||||
})
|
||||
const currentStep = computed(() => {
|
||||
return statusConfig.value.currentStep
|
||||
})
|
||||
|
||||
// 生命周期
|
||||
onLoad((option) => {
|
||||
id.value = option.id
|
||||
currentStatus.value = option.certificationStatus == '0' ? 'pending' : option.certificationStatus == '1' ?
|
||||
'success' : option.certificationStatus == '2' ? 'fail' : ''
|
||||
|
||||
})
|
||||
|
||||
onShow(() => {})
|
||||
onMounted(() => {
|
||||
getDetail()
|
||||
})
|
||||
|
||||
const getDetail = async () => {
|
||||
// 防重复请求
|
||||
|
||||
try {
|
||||
const res = await getMyHouseDetail({
|
||||
id: id.value
|
||||
})
|
||||
|
||||
const data = res.data
|
||||
form.value = data
|
||||
console.log(form.value);
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: `${err}`,
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('列表接口报错：', err)
|
||||
} finally {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 修改按钮事件（仅认证失败显示）
|
||||
clickUpdate() {
|
||||
}
|
||||
// 方法（函数名完全不变）
|
||||
const clickUpdate = () => {
|
||||
uni.setStorageSync('operationType', 'update')
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/addHouse?id=' + this.id + '&sourcePage=' + 'addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
url: '/pageSubPack/my/addHouse?id=' + id.value + '&sourcePage=addHouse'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除按钮事件
|
||||
onDelete() {
|
||||
const onDelete = () => {
|
||||
uni.showModal({
|
||||
title: "确认删除",
|
||||
content: "确认删除此房屋信息吗?",
|
||||
@@ -208,38 +217,44 @@
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
})
|
||||
deleteMyHouse({
|
||||
id: id.value
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
})
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
goBack()
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/myHouseIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
url: '/pageSubPack/my/myHouseIndex'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
@@ -251,7 +266,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
@@ -262,13 +276,10 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* 顶部状态区 */
|
||||
.status-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 20rpx 0px 20rpx;
|
||||
}
|
||||
|
||||
@@ -284,17 +295,14 @@
|
||||
|
||||
.icon-success {
|
||||
background-color: #2F77FD;
|
||||
/* border: 4rpx solid #00b42a; */
|
||||
}
|
||||
|
||||
.icon-pending {
|
||||
background-color: #2F77FD;
|
||||
/* border: 4rpx solid #1677ff; */
|
||||
}
|
||||
|
||||
.icon-fail {
|
||||
background-color: #E34D59;
|
||||
/* border: 4rpx solid #f53f3f; */
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
@@ -322,7 +330,6 @@
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 步骤条 */
|
||||
.step-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -382,7 +389,6 @@
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
@@ -435,7 +441,6 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 身份证照片区 */
|
||||
.photo-row {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
@@ -456,13 +461,10 @@
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 底部按钮区 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.btn-modify {
|
||||
@@ -491,7 +493,6 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@@ -18,10 +18,12 @@
|
||||
<!-- 标题 + 状态 -->
|
||||
<view class="card-header">
|
||||
<view class="title-box">
|
||||
<text class="tag-default" v-if="item.isDefault">默认</text>
|
||||
<text class="house-name">{{ item.houseName }}</text>
|
||||
<text class="tag-default" v-if="item.isDefault==1">默认</text>
|
||||
<text
|
||||
class="house-name">{{ item.villageName+item.buildingName+item.unitNo+'单元'+item.floorNo+'楼' }}</text>
|
||||
</view>
|
||||
<text class="status-tag" :class="item.statusClass">{{ item.statusText }}</text>
|
||||
<text class="status-tag"
|
||||
:class="item.certificationStatus=='0'?'pending':item.certificationStatus=='1'?'success':item.certificationStatus=='2'?'fail':''">{{ item.certificationStatus=='0'?'未认证':item.certificationStatus=='1'?'认证成功':item.certificationStatus=='2'?'认证失败':'' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 房屋信息 -->
|
||||
@@ -29,21 +31,22 @@
|
||||
<view class="row">
|
||||
<text class="label">房间号</text>
|
||||
<view class="value-box">
|
||||
<text class="value">{{ item.roomNo }}</text>
|
||||
<text class="value">{{ item.houseNo }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">业主</text>
|
||||
<text class="value">{{ item.owner }}</text>
|
||||
<text class="value">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">房屋状态</text>
|
||||
<text class="value">{{ item.houseStatus }}</text>
|
||||
<text
|
||||
class="value">{{ item.houseStatus==0?'自住':item.houseStatus==1?'闲置':item.houseStatus==2?'租赁':item.houseStatus==3?'其他':''}}</text>
|
||||
</view>
|
||||
<view class="defaultBox" v-if="item.statusText=='认证成功'&&!item.isDefault">
|
||||
<view class="defaultBox" v-if="item.certificationStatus=='1'&&!item.isDefault==1">
|
||||
<text class="set-default">设为默认</text>
|
||||
<switch class="no-cross-switch" :checked="item.isDefault" color="#1677ff"
|
||||
@change="onSwitchChange($event,index)" @click.stop />
|
||||
<switch class="no-cross-switch" :checked="item.isDefault==1" color="#1677ff"
|
||||
@change="onSwitchChange($event,item)" @click.stop />
|
||||
</view>
|
||||
<!-- <text v-if="item.showSetDefault" class="set-default"
|
||||
@click="setDefault(item.id)">设为默认</text> -->
|
||||
@@ -61,122 +64,145 @@
|
||||
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
} from 'vue'
|
||||
import {
|
||||
onReachBottom,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
getMyHouseList,
|
||||
setMyHouseDefault
|
||||
} from '/pageSubPack/api/apiSub.js'
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
const houseList = ref([])
|
||||
const loadingMore = ref(false)
|
||||
const noMoreData = ref(false)
|
||||
|
||||
},
|
||||
onShow() {
|
||||
const pageNum = ref(1)
|
||||
const pageSize = ref(10)
|
||||
// ==================== 获取列表数据 ====================
|
||||
const getList = async () => {
|
||||
// 防重复请求
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除定时器
|
||||
if (this.timer) clearInterval(this.timer)
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
houseList: [{
|
||||
id: 1,
|
||||
houseName: "北境碧桂园小区（别墅）",
|
||||
roomNo: "2号楼2层",
|
||||
owner: "张三",
|
||||
houseStatus: "自住",
|
||||
isDefault: true,
|
||||
statusText: "认证成功",
|
||||
statusClass: "success",
|
||||
showSetDefault: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
houseName: "北境碧桂园小区（别墅）",
|
||||
roomNo: "3号楼2层",
|
||||
owner: "张三",
|
||||
houseStatus: "自住",
|
||||
isDefault: false,
|
||||
statusText: "认证成功",
|
||||
statusClass: "success",
|
||||
showSetDefault: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
houseName: "北境碧桂园小区（别墅）",
|
||||
roomNo: "2号楼1层",
|
||||
owner: "张三",
|
||||
houseStatus: "闲置",
|
||||
isDefault: false,
|
||||
statusText: "认证失败",
|
||||
statusClass: "fail",
|
||||
showSetDefault: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
houseName: "北境碧桂园小区（别墅）",
|
||||
roomNo: "2号楼1层",
|
||||
owner: "张三",
|
||||
houseStatus: "闲置",
|
||||
isDefault: false,
|
||||
statusText: "认证中",
|
||||
statusClass: "pending",
|
||||
if (loadingMore.value || noMoreData.value) return
|
||||
|
||||
showSetDefault: false,
|
||||
},
|
||||
|
||||
]
|
||||
loadingMore.value = true
|
||||
try {
|
||||
const res = await getMyHouseList({
|
||||
pageNum: pageNum.value,
|
||||
pageSize: pageSize.value
|
||||
})
|
||||
|
||||
const data = res
|
||||
const newList = data.rows || []
|
||||
|
||||
// 第一页 → 覆盖数据
|
||||
if (pageNum.value === 1) {
|
||||
houseList.value = newList
|
||||
} else {
|
||||
// 后续页 → 追加数据
|
||||
houseList.value = [...houseList.value, ...newList]
|
||||
}
|
||||
},
|
||||
// 判断是否没有更多数据
|
||||
if (newList.length < pageSize.value) {
|
||||
noMoreData.value = true
|
||||
} else {
|
||||
pageNum.value++
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('列表接口报错：', err)
|
||||
} finally {
|
||||
loadingMore.value = false
|
||||
uni.stopPullDownRefresh() // 关闭下拉刷新
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 上拉加载更多（页面生命周期） ====================
|
||||
onReachBottom(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
// ==================== 下拉刷新 ====================
|
||||
const refresh = () => {
|
||||
// 重置所有状态
|
||||
pageNum = 1
|
||||
pageSize = 10
|
||||
noMoreData = false
|
||||
houseList = []
|
||||
loadingMore = false
|
||||
getList()
|
||||
}
|
||||
onPullDownRefresh(() => {
|
||||
refresh()
|
||||
})
|
||||
|
||||
// 页面加载时请求第一页
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
|
||||
methods: {
|
||||
// 开关切换
|
||||
onSwitchChange(e, i) {
|
||||
|
||||
uni.showLoading({
|
||||
title: '设置中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
const onSwitchChange = async (e, i) => {
|
||||
// uni.showLoading({
|
||||
// title: '设置中...',
|
||||
// mask: true
|
||||
// });
|
||||
|
||||
try {
|
||||
const res = await setMyHouseDefault({
|
||||
houseId: i.houseId
|
||||
})
|
||||
const data = res
|
||||
if (data.code === 200) {
|
||||
// uni.hideLoading();
|
||||
loadingMore.value = false
|
||||
noMoreData.value = false
|
||||
getList()
|
||||
uni.setStorageSync('houseIsDefault', e.detail.value)
|
||||
uni.showToast({
|
||||
title: '设置默认房屋成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
this.houseList.forEach((item, index) => {
|
||||
if (index != i) {
|
||||
item.isDefault = false
|
||||
} else {
|
||||
this.houseList[i].isDefault = e.detail.value
|
||||
|
||||
// uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: `${res.msg}`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
// uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: `${err}`,
|
||||
icon: 'none'
|
||||
})
|
||||
uni.setStorageSync('houseIsDefault', e.detail.value)
|
||||
}, 2500);
|
||||
},
|
||||
tapHouse(item) {
|
||||
console.error('列表接口报错：', err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const tapHouse = (item) => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/houseDetail?id=' + item.id + '&statusClass=' + item.statusClass,
|
||||
url: '/pageSubPack/my/houseDetail?id=' + item.id + '&certificationStatus=' + item.certificationStatus,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
addHouse() {
|
||||
const addHouse = () => {
|
||||
uni.setStorageSync('operationType', 'add');
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/addHouse',
|
||||
@@ -186,22 +212,18 @@
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
goBack() {
|
||||
const goBack = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/myIndex/myIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
// background: #F3F8FD;
|
||||
@@ -224,6 +246,7 @@
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
@@ -273,11 +296,16 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.house-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tag-default {
|
||||
@@ -286,6 +314,7 @@
|
||||
font-size: 24rpx;
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
min-width: 48rpx;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
@@ -294,6 +323,8 @@
|
||||
padding: 6rpx 14rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 6rpx;
|
||||
min-width: 120rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success {
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
<scroll-view class="page" scroll-y>
|
||||
<!-- 楼栋网格列表 -->
|
||||
|
||||
<view class="building-grid">
|
||||
<view v-if="dataList.length === 0" class="empty-state">
|
||||
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
|
||||
<text class="empty-text">
|
||||
{{ '暂无数据'}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="building-grid">
|
||||
<view class="building-item"
|
||||
:class="{ active:(checkType=='楼栋'&& selectedBuilding === item.id)||(checkType=='单元'&& selectedUnit === item.id)||(checkType=='楼层'&&selectedFloor === item.id) ||(checkType=='户号'&&selectedHouseNumber === item.id) }"
|
||||
v-for="(item, index) in dataList" :key="index" @click="selectBuilding(item)">
|
||||
@@ -29,339 +29,209 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
import {
|
||||
onUnload,
|
||||
onShow
|
||||
|
||||
},
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
getHouseBuildings,
|
||||
getHouseUnits,
|
||||
getHouseFloors,
|
||||
getHouseHouses
|
||||
} from '/pageSubPack/api/apiSub.js'
|
||||
|
||||
computed: {
|
||||
// 状态栏高度
|
||||
const statusBarHeight = ref(20)
|
||||
|
||||
// 从缓存获取类型
|
||||
const checkType = ref(uni.getStorageSync('checkType') || '')
|
||||
const dataList = ref([])
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {},
|
||||
mounted() {
|
||||
|
||||
if (this.checkType == '楼栋') {
|
||||
this.dataList = this.buildingList
|
||||
|
||||
} else if (this.checkType == '单元') {
|
||||
this.dataList = this.unitList
|
||||
|
||||
} else if (this.checkType == '楼层') {
|
||||
this.dataList = this.floorList
|
||||
|
||||
} else if (this.checkType == '户号') {
|
||||
this.dataList = this.houseNumberList
|
||||
// 选中项（从缓存读取）
|
||||
const selectedBuilding = ref(uni.getStorageSync('buildingId') || '')
|
||||
const selectedUnit = ref(uni.getStorageSync('unitId') || '')
|
||||
const selectedFloor = ref(uni.getStorageSync('floorId') || '')
|
||||
const selectedHouseNumber = ref(uni.getStorageSync('houseNumberId') || '')
|
||||
|
||||
// 页面挂载后赋值列表
|
||||
onMounted(() => {
|
||||
console.log(checkType);
|
||||
if (checkType.value === '楼栋') {
|
||||
getList('楼栋')
|
||||
} else if (checkType.value === '单元') {
|
||||
getList('单元')
|
||||
} else if (checkType.value === '楼层') {
|
||||
getList('楼层')
|
||||
} else if (checkType.value === '户号') {
|
||||
getList('户号')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
checkType: uni.getStorageSync('checkType'),
|
||||
dataList: [],
|
||||
// 楼栋列表（可动态生成/接口返回）
|
||||
buildingList: [{
|
||||
id: 1,
|
||||
name: '01栋'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '02栋'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '03栋'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '04栋'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '05栋'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '06栋'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '07栋'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '08栋'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: '09栋'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: '10栋'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: '11栋'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: '12栋'
|
||||
}
|
||||
],
|
||||
|
||||
floorList: [{
|
||||
id: 13,
|
||||
name: '01层'
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: '02层'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: '03层'
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: '04层'
|
||||
}, {
|
||||
id: 17,
|
||||
name: '05层'
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
name: '06层'
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
name: '07层'
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: '08层'
|
||||
}, {
|
||||
id: 21,
|
||||
name: '09层'
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
name: '10层'
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
name: '11层'
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
name: '12层'
|
||||
}, {
|
||||
id: 25,
|
||||
name: '13层'
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
name: '14层'
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
name: '15层'
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
name: '16层'
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
name: '17层'
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
name: '18层'
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
name: '19层'
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
name: '20层'
|
||||
},
|
||||
})
|
||||
|
||||
],
|
||||
|
||||
unitList: [{
|
||||
id: 33,
|
||||
name: '01单元'
|
||||
},
|
||||
{
|
||||
id: 34,
|
||||
name: '02单元'
|
||||
},
|
||||
{
|
||||
id: 35,
|
||||
name: '03单元'
|
||||
},
|
||||
{
|
||||
id: 36,
|
||||
name: '04单元'
|
||||
},
|
||||
|
||||
],
|
||||
houseNumberList: [{
|
||||
id: 37,
|
||||
name: '01'
|
||||
},
|
||||
{
|
||||
id: 38,
|
||||
name: '02'
|
||||
},
|
||||
{
|
||||
id: 39,
|
||||
name: '03'
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
name: '04'
|
||||
},
|
||||
|
||||
],
|
||||
// 选中的楼栋
|
||||
selectedBuilding: uni.getStorageSync('buildingId'),
|
||||
// 选中的单元
|
||||
selectedUnit: uni.getStorageSync('unitId'),
|
||||
// 选中的楼层
|
||||
selectedFloor: uni.getStorageSync('floorId'),
|
||||
// 选中的户号
|
||||
selectedHouseNumber: uni.getStorageSync('houseNumberId'),
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
selectBuilding(item) {
|
||||
let modalContent = '确认选择此' + this.checkType + '吗?'
|
||||
// 选择项方法
|
||||
const selectBuilding = (item) => {
|
||||
const modalContent = `确认选择此${checkType.value}吗?`
|
||||
uni.showModal({
|
||||
title: "确认选择",
|
||||
title: '确认选择',
|
||||
content: modalContent,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({
|
||||
title: '选择中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
if (this.checkType == '楼栋') {
|
||||
this.selectedBuilding = item.id
|
||||
uni.setStorageSync('buildingId', item.id);
|
||||
uni.setStorageSync('buildingName', item.name);
|
||||
uni.removeStorageSync('unitId');
|
||||
uni.removeStorageSync('unitName');
|
||||
uni.removeStorageSync('floorId');
|
||||
uni.removeStorageSync('floorName');
|
||||
uni.removeStorageSync('houseNumberId');
|
||||
uni.removeStorageSync('houseNumberName');
|
||||
uni.setStorageSync('checkType', '单元');
|
||||
} else if (this.checkType == '单元') {
|
||||
this.selectedUnit = item.id
|
||||
uni.setStorageSync('unitId', item.id);
|
||||
uni.setStorageSync('unitName', item.name);
|
||||
uni.removeStorageSync('floorId');
|
||||
uni.removeStorageSync('floorName');
|
||||
uni.removeStorageSync('houseNumberId');
|
||||
uni.removeStorageSync('houseNumberName');
|
||||
uni.setStorageSync('checkType', '楼层');
|
||||
} else if (this.checkType == '楼层') {
|
||||
this.selectedFloor = item.id
|
||||
uni.setStorageSync('floorId', item.id);
|
||||
uni.setStorageSync('floorName', item.name);
|
||||
uni.removeStorageSync('houseNumberId');
|
||||
uni.removeStorageSync('houseNumberName');
|
||||
uni.setStorageSync('checkType', '户号');
|
||||
} else if (this.checkType == '户号') {
|
||||
this.selectedHouseNumber = item.id
|
||||
uni.setStorageSync('houseNumberId', item.id);
|
||||
uni.setStorageSync('houseNumberName', item.name);
|
||||
|
||||
})
|
||||
if (checkType.value === '楼栋') {
|
||||
selectedBuilding.value = item.id
|
||||
uni.setStorageSync('buildingId', item.id)
|
||||
uni.setStorageSync('buildingName', item.name)
|
||||
uni.removeStorageSync('unitId')
|
||||
uni.removeStorageSync('unitName')
|
||||
uni.removeStorageSync('floorId')
|
||||
uni.removeStorageSync('floorName')
|
||||
uni.removeStorageSync('houseNumberId')
|
||||
uni.removeStorageSync('houseNumberName')
|
||||
uni.setStorageSync('checkType', '单元')
|
||||
} else if (checkType.value === '单元') {
|
||||
selectedUnit.value = item.id
|
||||
uni.setStorageSync('unitId', item.id)
|
||||
uni.setStorageSync('unitName', item.name)
|
||||
uni.removeStorageSync('floorId')
|
||||
uni.removeStorageSync('floorName')
|
||||
uni.removeStorageSync('houseNumberId')
|
||||
uni.removeStorageSync('houseNumberName')
|
||||
uni.setStorageSync('checkType', '楼层')
|
||||
} else if (checkType.value === '楼层') {
|
||||
selectedFloor.value = item.id
|
||||
uni.setStorageSync('floorId', item.id)
|
||||
uni.setStorageSync('floorName', item.name)
|
||||
uni.removeStorageSync('houseNumberId')
|
||||
uni.removeStorageSync('houseNumberName')
|
||||
uni.setStorageSync('checkType', '户号')
|
||||
} else if (checkType.value === '户号') {
|
||||
selectedHouseNumber.value = item.id
|
||||
uni.setStorageSync('houseNumberId', item.id)
|
||||
uni.setStorageSync('houseNumberName', item.name)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '选择成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 500);
|
||||
})
|
||||
}, 500)
|
||||
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goFreash();
|
||||
}, 2000);
|
||||
|
||||
|
||||
|
||||
uni.hideLoading()
|
||||
goFreash()
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
goFreash() {
|
||||
console.log(this.checkType, '刷新页面');
|
||||
if (this.checkType != '户号') {
|
||||
// 刷新跳转
|
||||
const goFreash = () => {
|
||||
console.log(checkType.value, '刷新页面')
|
||||
if (checkType.value !== '户号') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/selectBuilding',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
url: '/pageSubPack/my/selectBuilding'
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
url: '/pageSubPack/my/addHouse'
|
||||
})
|
||||
}
|
||||
},
|
||||
goBackAdd() {
|
||||
if (this.checkType == '楼栋') {
|
||||
uni.removeStorageSync('buildingId');
|
||||
uni.removeStorageSync('buildingName');
|
||||
} else if (this.checkType == '单元') {
|
||||
uni.removeStorageSync('unitId');
|
||||
uni.removeStorageSync('unitName');
|
||||
} else if (this.checkType == '楼层') {
|
||||
uni.removeStorageSync('floorId');
|
||||
uni.removeStorageSync('floorName');
|
||||
} else if (this.checkType == '户号') {
|
||||
uni.removeStorageSync('houseNumberId');
|
||||
uni.removeStorageSync('houseNumberName');
|
||||
}
|
||||
|
||||
// 返回新增
|
||||
const goBackAdd = () => {
|
||||
if (checkType.value === '楼栋') {
|
||||
uni.removeStorageSync('buildingId')
|
||||
uni.removeStorageSync('buildingName')
|
||||
} else if (checkType.value === '单元') {
|
||||
uni.removeStorageSync('unitId')
|
||||
uni.removeStorageSync('unitName')
|
||||
} else if (checkType.value === '楼层') {
|
||||
uni.removeStorageSync('floorId')
|
||||
uni.removeStorageSync('floorName')
|
||||
} else if (checkType.value === '户号') {
|
||||
uni.removeStorageSync('houseNumberId')
|
||||
uni.removeStorageSync('houseNumberName')
|
||||
}
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
url: '/pageSubPack/my/addHouse'
|
||||
})
|
||||
}
|
||||
// 获取数据
|
||||
const getList = async (type) => {
|
||||
try {
|
||||
if (type == '楼栋') {
|
||||
const res = await getHouseBuildings({
|
||||
villageId: uni.getStorageSync('communityId')
|
||||
})
|
||||
const newList = res.data.map(item => ({
|
||||
id: item.id,
|
||||
name: item.buildingName
|
||||
}))
|
||||
|
||||
},
|
||||
dataList.value = newList
|
||||
} else if (type == '单元') {
|
||||
const res = await getHouseUnits({
|
||||
buildingId: selectedBuilding.value
|
||||
})
|
||||
const newList = res.data.map(item => ({
|
||||
id: item,
|
||||
name: item
|
||||
}))
|
||||
|
||||
dataList.value = newList
|
||||
} else if (type == '楼层') {
|
||||
const res = await getHouseFloors({
|
||||
buildingId: selectedBuilding.value,
|
||||
unitNo: selectedUnit.value
|
||||
})
|
||||
const newList = res.data.map(item => ({
|
||||
id: item,
|
||||
name: item
|
||||
}))
|
||||
|
||||
dataList.value = newList
|
||||
} else if (type == '户号') {
|
||||
const res = await getHouseHouses({
|
||||
buildingId: selectedBuilding.value,
|
||||
unitNo: selectedUnit.value,
|
||||
floorNo: selectedFloor.value
|
||||
})
|
||||
const newList = res.data.map(item => ({
|
||||
id: item.houseId,
|
||||
name: item.houseNo
|
||||
}))
|
||||
|
||||
dataList.value = newList
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('列表接口报错：', err)
|
||||
} finally {
|
||||
|
||||
}
|
||||
}
|
||||
// 生命周期
|
||||
onShow(() => {
|
||||
|
||||
})
|
||||
onUnload(() => {})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</view>
|
||||
<view class="community-item" v-for="(item, index) in filteredList" :key="index"
|
||||
@click="selectCommunity(item)">
|
||||
<text class="community-name">{{ item.name }}</text>
|
||||
<text class="community-name">{{ item.villageName }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -33,87 +33,80 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
// 过滤后的列表（搜索功能）
|
||||
filteredList() {
|
||||
if (!this.searchKey.trim()) {
|
||||
return this.communityList
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue'
|
||||
import {
|
||||
onReachBottom,
|
||||
onPullDownRefresh,
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
getVillageList
|
||||
} from '/pageSubPack/api/apiSub.js'
|
||||
|
||||
|
||||
|
||||
const sourcePage = ref('')
|
||||
const searchKey = ref('')
|
||||
const communityList = ref([])
|
||||
// const refreshing = ref(false)
|
||||
const filteredList = computed(() => {
|
||||
if (!searchKey.value.trim()) {
|
||||
return communityList.value
|
||||
}
|
||||
return this.communityList.filter(item =>
|
||||
item.name.includes(this.searchKey.trim())
|
||||
return communityList.value.filter(item =>
|
||||
item.villageName.includes(searchKey.value.trim())
|
||||
)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
// addHouse
|
||||
// addParkingSpace
|
||||
this.sourcePage = option.sourcePage;
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
sourcePage: '',
|
||||
searchKey: '',
|
||||
communityList: [{
|
||||
id: 1,
|
||||
name: '北境碧桂园小区'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '东境碧桂园小区'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '南境碧桂园小区'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '西境碧桂园小区'
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
]
|
||||
onLoad((option) => {
|
||||
sourcePage.value = option.sourcePage;
|
||||
getList()
|
||||
})
|
||||
|
||||
// ==================== 获取列表数据 ====================
|
||||
|
||||
|
||||
const getList = async () => {
|
||||
|
||||
|
||||
try {
|
||||
const res = await getVillageList({
|
||||
|
||||
})
|
||||
console.log(res);
|
||||
const data = res
|
||||
communityList.value = data.data || []
|
||||
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('列表接口报错：', err)
|
||||
} finally {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
methods: {
|
||||
// 搜索输入事件
|
||||
onSearch() {
|
||||
const onSearch = () => {
|
||||
// 实时过滤，computed 自动处理
|
||||
},
|
||||
}
|
||||
|
||||
// 选择小区
|
||||
selectCommunity(item) {
|
||||
uni.setStorageSync('communityId', item.id);
|
||||
uni.setStorageSync('communityName', item.name);
|
||||
const selectCommunity = (item) => {
|
||||
uni.setStorageSync('communityId', item.villageId);
|
||||
uni.setStorageSync('communityName', item.villageName);
|
||||
uni.setStorageSync('checkType', '楼栋');
|
||||
uni.removeStorageSync('buildingId');
|
||||
uni.removeStorageSync('buildingName');
|
||||
@@ -131,14 +124,14 @@
|
||||
uni.removeStorageSync('parkingSpaceId');
|
||||
uni.removeStorageSync('parkingSpaceName');
|
||||
|
||||
if (this.sourcePage == 'addHouse') {
|
||||
if (sourcePage.value == 'addHouse') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/selectBuilding',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (this.sourcePage == 'addParkingSpace') {
|
||||
} else if (sourcePage.value == 'addParkingSpace') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/bindHouse',
|
||||
success: res => {},
|
||||
@@ -149,18 +142,18 @@
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
goBackAdd() {
|
||||
}
|
||||
const goBackAdd = () => {
|
||||
uni.removeStorageSync('communityId');
|
||||
uni.removeStorageSync('communityName');
|
||||
if (this.sourcePage == 'addHouse') {
|
||||
if (sourcePage.value == 'addHouse') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (this.sourcePage == 'addParkingSpace') {
|
||||
} else if (sourcePage.value == 'addParkingSpace') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/addParkingSpace',
|
||||
success: res => {},
|
||||
@@ -170,10 +163,10 @@
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f6f6f6;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="contentStyle">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="设置" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
@@ -8,7 +8,6 @@
|
||||
<view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="onItemClick(item)">
|
||||
<text class="item-title">{{ item.title }}</text>
|
||||
|
||||
<!-- 不同类型的右侧内容 -->
|
||||
<view class="item-right" v-if="item.type === 'text'">
|
||||
<text :class="item.valueClass || 'item-value'">{{ item.value }}</text>
|
||||
<view class="item-arrow"></view>
|
||||
@@ -20,46 +19,33 @@
|
||||
<view class="item-arrow" v-else></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 底部下一步按钮 -->
|
||||
|
||||
<view class="bottom-btn">
|
||||
<button class="logout-btn" @click="logout">退出登录</button>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from 'vue'
|
||||
import {
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
authLogout
|
||||
} from '/pageSubPack/api/apiSub.js'
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
message: '',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
cacheSize: 0,
|
||||
settingList: [{
|
||||
//
|
||||
const statusBarHeight = ref(20)
|
||||
const cacheSize = ref(0)
|
||||
const settingList = ref([{
|
||||
title: '更改手机号码',
|
||||
type: 'arrow'
|
||||
},
|
||||
@@ -83,34 +69,21 @@
|
||||
value: '当前版本 2.9.8',
|
||||
valueClass: 'item-version'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
onItemClick(item) {
|
||||
// console.log('点击了：', item.title,item.title == '更改手机号码')
|
||||
//
|
||||
const onItemClick = (item) => {
|
||||
if (item.title == '更改手机号码') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/changePhone',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
url: '/pageSubPack/my/changePhone'
|
||||
});
|
||||
} else if (item.title == '修改密码') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/changePwd',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
url: '/pageSubPack/my/changePwd'
|
||||
});
|
||||
} else if (item.title == '清除缓存') {
|
||||
uni.clearStorageSync();
|
||||
this.message = '清除成功'
|
||||
this.settingList[3].value = '0M'
|
||||
settingList.value[3].value = '0M'
|
||||
uni.showLoading({
|
||||
title: '清除中...',
|
||||
mask: true
|
||||
@@ -122,149 +95,135 @@
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
|
||||
}, 2500);
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出当前账号吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.message = '退出成功'
|
||||
uni.showLoading({
|
||||
title: '退出中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
authLogout().then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '退出成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 登出成功后跳转回登录页
|
||||
uni.hideLoading();
|
||||
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/loginSub/pwd-login',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
url: '/pageSubPack/loginSub/pwd-login'
|
||||
});
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: `${res.msg}`,
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
}, 2500);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
uni.showToast({
|
||||
title: `${err}`,
|
||||
icon: 'error'
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
onSwitchChange(item, e) {
|
||||
const onSwitchChange = (item, e) => {
|
||||
item.checked = e.detail.value
|
||||
},
|
||||
goBack() {
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/myIndex/myIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
url: '/pages/myIndex/myIndex'
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/* 列表项 */
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 标题文字 */
|
||||
.item-title {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 右侧区域（文字+箭头） */
|
||||
.item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
/* 右侧数值/版本文字 */
|
||||
.item-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-version {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 右侧箭头 */
|
||||
.item-arrow {
|
||||
display: inline-block;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-top: 2rpx solid #999;
|
||||
border-right: 2rpx solid #999;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
/* 开关样式适配 */
|
||||
/* switch {
|
||||
transform: scale(0.8);
|
||||
} */
|
||||
/* 底部按钮 */
|
||||
.logout-btn {
|
||||
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
@@ -273,31 +232,27 @@
|
||||
border-radius: 12rpx;
|
||||
color: #666;
|
||||
background-color: #F3F3F3;
|
||||
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* 按钮点击态 */
|
||||
.logout-btn:active {
|
||||
background-color: #f5f5f5;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
::v-deep .uni-switch-input:before {
|
||||
background-color: #cccccd !important;
|
||||
}
|
||||
|
||||
/* 隐藏 switch 关闭状态的 × 号 */
|
||||
.no-cross-switch::before {
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
|
||||
.no-cross-switch {
|
||||
|
||||
@@ -14,10 +14,14 @@
|
||||
</image>
|
||||
<text class="card-title">{{paymentType+'费'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="line"></view>
|
||||
|
||||
<view class="input-item">
|
||||
<view class="input-label">缴费单位</view>
|
||||
<text class="company-name">XXXXXXXX燃气有限公司</text>
|
||||
</view>
|
||||
<!-- 分割线 -->
|
||||
<view class="line"></view>
|
||||
<!-- 设备号输入项 -->
|
||||
<view class="input-item">
|
||||
<view class="input-label">缴费设备号</view>
|
||||
@@ -26,8 +30,9 @@
|
||||
<input class="input" placeholder="请输入设备号" placeholder-class="input-placeholder"
|
||||
v-model="deviceNo" />
|
||||
<!-- 右边扫码图标 text标签直接用 双端不乱码 -->
|
||||
<image class="scanTheCodeIconStyle" src="http://47.104.199.163:9090/images/propertyImgs/scanTheCodeIcon.png"
|
||||
@click="scanCode"></image>
|
||||
<image class="scanTheCodeIconStyle"
|
||||
src="http://47.104.199.163:9090/images/propertyImgs/scanTheCodeIcon.png" @click="scanCode">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -38,13 +43,13 @@
|
||||
|
||||
<!-- 底部协议和提交按钮 -->
|
||||
<view class="bottom-area">
|
||||
<view class="agreement">
|
||||
<!-- <view class="agreement">
|
||||
<checkbox-group @change="handleAgreeChange">
|
||||
<checkbox :checked="isAgree" />
|
||||
</checkbox-group>
|
||||
<text class="agreement-text">我已阅并同意</text>
|
||||
<text class="agreement-link" @click="handleProtocol">《协议链接》</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
|
||||
<button class="submit-btn" @click="goPay">
|
||||
@@ -68,80 +73,84 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paymentType: uni.getStorageSync('addPaymentType'),
|
||||
deviceNo: '', // 设备号
|
||||
isAgree: false, // 是否同意协议
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onReady,
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
// 响应式数据
|
||||
const paymentType = ref(uni.getStorageSync('addPaymentType'))
|
||||
const deviceNo = ref('')
|
||||
const isAgree = ref(false)
|
||||
const scanResult = ref('')
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {})
|
||||
|
||||
// 协议勾选
|
||||
const handleAgreeChange = (e) => {
|
||||
isAgree.value = e.detail.value.length > 0
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
handleAgreeChange(e) {
|
||||
// e.detail.value 是数组，有值 = 选中，空 = 未选中
|
||||
this.isAgree = e.detail.value.length > 0
|
||||
},
|
||||
// 扫码获取设备号 【uniapp+微信小程序双端兼容】
|
||||
async scanCode() {
|
||||
// 扫码
|
||||
const scanCode = async () => {
|
||||
try {
|
||||
const res = await uni.scanCode({
|
||||
onlyFromCamera: false, // 允许相册+相机
|
||||
scanType: ['qrCode', 'barCode'] // 支持二维码+条形码
|
||||
uni.showLoading({
|
||||
title: '扫码中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
const res = await uni.scanCode({
|
||||
onlyFromCamera: false,
|
||||
scanType: ['qrCode', 'barCode']
|
||||
})
|
||||
|
||||
// 扫码成功，赋值
|
||||
deviceNo.value = res.result
|
||||
scanResult.value = res.result
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '扫码成功',
|
||||
icon: 'success'
|
||||
})
|
||||
// 扫码结果赋值给设备号输入框
|
||||
this.deviceNo = res.result
|
||||
} catch (err) {
|
||||
console.log('扫码取消/失败', err)
|
||||
uni.hideLoading()
|
||||
console.log('扫码失败', err)
|
||||
uni.showToast({
|
||||
title: '扫码取消/失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 缴费提交
|
||||
goPay() {
|
||||
if (!this.deviceNo) {
|
||||
}
|
||||
|
||||
// 提交缴费
|
||||
const goPay = () => {
|
||||
if (!deviceNo.value) {
|
||||
uni.showToast({
|
||||
title: '请输入设备号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.isAgree) {
|
||||
uni.showToast({
|
||||
title: '请同意协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
// if (!isAgree.value) {
|
||||
// uni.showToast({
|
||||
// title: '请同意协议',
|
||||
// icon: 'none'
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
|
||||
uni.showModal({
|
||||
title: '确认提交',
|
||||
content: '确认要提交吗?',
|
||||
@@ -150,42 +159,38 @@
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goNext()
|
||||
}, 2500);
|
||||
uni.hideLoading()
|
||||
goNext()
|
||||
}, 2500)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
goNext() {
|
||||
}
|
||||
const handleProtocol = () => {
|
||||
|
||||
}
|
||||
// 跳转成功页
|
||||
const goNext = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/addPaymentSuccess',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
url: '/pageSubPack/payment-list/addPaymentSuccess'
|
||||
})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
url: '/pageSubPack/payment-list/paymentIndex'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
@@ -87,75 +87,64 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
style() {
|
||||
var statusBarHeight = this.statusBarHeight;
|
||||
return statusBarHeight;
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
let statusBarObj = this.getPhoneInfo()
|
||||
this.statusBarHeight = statusBarObj.statusBarHeight
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onReady,
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
// 响应式数据
|
||||
const statusBarHeight = ref(20)
|
||||
const paymentType = ref(uni.getStorageSync('addPaymentType'))
|
||||
const userNo = ref('')
|
||||
const isAgree = ref(false)
|
||||
const showPopup = ref(false)
|
||||
|
||||
// 生命周期
|
||||
onShow(() => {})
|
||||
onMounted(() => {})
|
||||
onReady(() => {
|
||||
// nextTick 用法
|
||||
// nextTick(() => {})
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
paymentType: uni.getStorageSync('addPaymentType'),
|
||||
userNo: '',
|
||||
isAgree: false,
|
||||
showPopup: false, // 控制弹窗显示
|
||||
|
||||
// 勾选协议
|
||||
const handleAgreeChange = (e) => {
|
||||
isAgree.value = e.detail.value.length > 0
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleAgreeChange(e) {
|
||||
// e.detail.value 是数组，有值 = 选中，空 = 未选中
|
||||
this.isAgree = e.detail.value.length > 0
|
||||
},
|
||||
// 处理协议链接点击
|
||||
handleProtocol() {
|
||||
uni.navigateTo({
|
||||
// 协议链接点击
|
||||
const handleProtocol = () => {
|
||||
uni.navigateTo({})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
// 处理提交
|
||||
handleSubmit() {
|
||||
if (!this.userNo) {
|
||||
// 提交
|
||||
const handleSubmit = () => {
|
||||
if (!userNo.value) {
|
||||
uni.showToast({
|
||||
title: '请输入户号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.isAgree) {
|
||||
|
||||
if (!isAgree.value) {
|
||||
uni.showToast({
|
||||
title: '请先同意协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '确认提交',
|
||||
content: '确认要提交吗?',
|
||||
@@ -164,53 +153,43 @@
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goNext()
|
||||
}, 2500);
|
||||
|
||||
|
||||
uni.hideLoading()
|
||||
goNext()
|
||||
}, 2500)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
goNext() {
|
||||
// 跳转成功页
|
||||
const goNext = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/addPaymentSuccess',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
goToChange() {
|
||||
url: '/pageSubPack/payment-list/addPaymentSuccess'
|
||||
})
|
||||
}
|
||||
|
||||
// 切换（注释保留）
|
||||
const goToChange = () => {
|
||||
// uni.redirectTo({
|
||||
// url: '/pageSubPack/payment-list/selectPaymentEntity',
|
||||
// success: res => {},
|
||||
// fail: () => {},
|
||||
// complete: () => {}
|
||||
// });
|
||||
},
|
||||
goBack() {
|
||||
// url: '/pageSubPack/payment-list/selectPaymentEntity'
|
||||
// })
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
url: '/pageSubPack/payment-list/paymentIndex'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
@@ -5,10 +5,8 @@
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<view class="container">
|
||||
<!-- 成功图标 -->
|
||||
<view class="success-icon">
|
||||
@@ -29,69 +27,43 @@
|
||||
<button class="btn-back" @click="goBack">返回生活缴费</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
|
||||
},
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onReady,
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
computed: {
|
||||
// 响应式数据
|
||||
const statusBarHeight = ref(20)
|
||||
const paymentType = ref(uni.getStorageSync('addPaymentType'))
|
||||
|
||||
// 生命周期
|
||||
onShow(() => {})
|
||||
onMounted(() => {})
|
||||
onReady(() => {})
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
paymentType: uni.getStorageSync('addPaymentType'),
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
goBack() {
|
||||
// 方法
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
url: '/pageSubPack/payment-list/paymentIndex'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
@@ -103,7 +75,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
@@ -112,10 +83,9 @@
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
@@ -183,7 +153,9 @@
|
||||
/* 按钮默认样式重置（解决uni-app button默认样式问题） */
|
||||
.btn-back::after {
|
||||
border: none;
|
||||
}.status-bar{
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
<uni-nav-bar :title="arrearsPayment.value" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
@@ -21,32 +21,9 @@
|
||||
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
|
||||
<!-- 缴费信息 -->
|
||||
<view class="info-section" style="">
|
||||
<view v-if="arrearsPayment=='物业费'">
|
||||
<view class="info-item">
|
||||
<text class="info-label">户名</text>
|
||||
<text class="info-value">桂花园（别墅）2号楼2层</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">户主</text>
|
||||
<text class="info-value">周大声</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">缴费单位</text>
|
||||
<text class="info-value">CT物业</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">可用余额</text>
|
||||
<text class="info-value">0.00</text>
|
||||
</view>
|
||||
<!-- <view class="info-payAmountItem">
|
||||
<text class="info-payAmount">{{'￥'+payAmount}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="info-item" v-if="arrearsPayment=='暖气费'">
|
||||
<text class="info-label">房屋</text>
|
||||
<text class="info-value">桂花园（别墅）2号楼2层</text>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
|
||||
<view class="info-item">
|
||||
<text class="info-label">户号</text>
|
||||
<text class="info-value">101123456</text>
|
||||
@@ -68,10 +45,13 @@
|
||||
</input>
|
||||
</view>
|
||||
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
|
||||
<view class="arrears-row">
|
||||
<view class="arrears-row" v-if="outstandingPayment==true">
|
||||
<text class="arrears-text">当前欠费金额¥{{ arrearsAmount }}元</text>
|
||||
<text class="auto-fill-btn" @click="handleAutoFill">点击自动填入</text>
|
||||
</view>
|
||||
<view class="arrears-row" v-if="outstandingPayment==false">
|
||||
<text class="arrears-text">暂未查询到欠费</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -102,22 +82,14 @@
|
||||
<view class="pay-way">
|
||||
<text class="way-label">支付方式</text>
|
||||
<view class="way-content">
|
||||
<image class="bank-icon" src="http://47.104.199.163:9090/images/propertyImgs/bank-logo.png" mode="aspectFit">
|
||||
<image class="bank-icon"
|
||||
src="http://47.104.199.163:9090/images/propertyImgs/bank-logo.png" mode="aspectFit">
|
||||
</image>
|
||||
<text class="bank-name">建设银行储蓄卡(8888)</text>
|
||||
<text class="arrow-icon">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 银行卡选择列表 -->
|
||||
<!-- <view v-if="showBankList" class="bank-list">
|
||||
<view v-for="(item, index) in bankList" :key="index" class="bank-item"
|
||||
@click="selectBank(item)">
|
||||
<image class="bank-item-icon" :src="item.icon" mode="aspectFit"></image>
|
||||
<text class="bank-item-name">{{ item.name }}</text>
|
||||
<text v-if="selectedBank.id === item.id" class="check-icon"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<view class="password-input">
|
||||
@@ -189,158 +161,198 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
|
||||
},
|
||||
// 响应式数据
|
||||
const statusBarHeight = ref(20)
|
||||
const outstandingPayment = ref(true)
|
||||
const arrearsPayment = ref(uni.getStorageSync('arrearsPayment'))
|
||||
const currentStep = ref(1)
|
||||
const payAmount = ref('1680.00')
|
||||
const password = ref('')
|
||||
const showBankList = ref(false)
|
||||
const arrearsAmount = ref('21.21')
|
||||
const payNum = ref('')
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
outstandingPayment: true, //是否欠费
|
||||
arrearsPayment: uni.getStorageSync('arrearsPayment'),
|
||||
currentStep: 1, // 1: 详情页 2: 密码弹窗 3: 成功页
|
||||
payAmount: "1680.00", // 缴费金额
|
||||
password: "", // 输入的密码
|
||||
showBankList: false, // 是否显示银行卡列表
|
||||
arrearsAmount: "21.21",
|
||||
payNum: '',
|
||||
// 银行卡列表
|
||||
bankList: [{
|
||||
const bankList = ref([{
|
||||
id: 1,
|
||||
name: "建设银行储蓄卡(8888)",
|
||||
icon: "/static/bank-logo.png"
|
||||
name: '建设银行储蓄卡(8888)',
|
||||
icon: '/static/bank-logo.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "工商银行储蓄卡(6666)",
|
||||
icon: "/static/icbc-logo.png"
|
||||
name: '工商银行储蓄卡(6666)',
|
||||
icon: '/static/icbc-logo.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "招商银行储蓄卡(9999)",
|
||||
icon: "/static/cmb-logo.png"
|
||||
name: '招商银行储蓄卡(9999)',
|
||||
icon: '/static/cmb-logo.png'
|
||||
}
|
||||
],
|
||||
])
|
||||
|
||||
// 默认选中的银行卡
|
||||
selectedBank: {
|
||||
const selectedBank = ref({
|
||||
id: 1,
|
||||
name: "建设银行储蓄卡(8888)",
|
||||
icon: "/static/bank-logo.png"
|
||||
}
|
||||
}
|
||||
},
|
||||
name: '建设银行储蓄卡(8888)',
|
||||
icon: '/static/bank-logo.png'
|
||||
})
|
||||
|
||||
|
||||
methods: {
|
||||
handleAutoFill() {
|
||||
this.payNum = this.arrearsAmount;
|
||||
// 自动填充欠费金额
|
||||
const handleAutoFill = () => {
|
||||
payNum.value = arrearsAmount.value
|
||||
uni.vibrateShort({
|
||||
type: "light"
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
// 点击立即缴费
|
||||
handlePay() {
|
||||
if (!this.payAmount || Number(this.payAmount) <= 0) {
|
||||
uni.showToast({
|
||||
title: "请输入正确的缴费金额",
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
type: 'light'
|
||||
})
|
||||
}
|
||||
this.currentStep = 2;
|
||||
},
|
||||
|
||||
// 关闭密码弹窗
|
||||
closePasswordModal() {
|
||||
this.currentStep = 1;
|
||||
this.password = "";
|
||||
this.showBankList = false;
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex'
|
||||
})
|
||||
}
|
||||
|
||||
// 立即缴费
|
||||
const handlePay = () => {
|
||||
if (!payAmount.value || Number(payAmount.value) <= 0) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的缴费金额',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
requestPayOrder()
|
||||
// 原支付注释
|
||||
// currentStep.value = 2
|
||||
}
|
||||
// 统一下单后后端返回的支付参数
|
||||
const payInfo = ref({
|
||||
appId: '', // 公众号/小程序ID
|
||||
timeStamp: '', // 时间戳
|
||||
nonceStr: '', // 随机串
|
||||
package: '', // 数据包 如 prepay_id=xxx
|
||||
signType: 'MD5', // 签名方式
|
||||
paySign: '' // 签名
|
||||
})
|
||||
|
||||
// 1. 先请求后端接口生成预支付订单
|
||||
const requestPayOrder = async () => {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '发起支付中'
|
||||
})
|
||||
|
||||
const res = await getMyHouseList({
|
||||
deviceNo: '设备号',
|
||||
money: 0.01, // 金额
|
||||
openid: '用户openid'
|
||||
})
|
||||
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
// 后端返回支付所需参数
|
||||
const data = res.data
|
||||
if (data.code !== 0) {
|
||||
uni.showToast({
|
||||
title: data.msg || '下单失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 赋值支付参数
|
||||
payInfo.value = {
|
||||
appId: data.appId,
|
||||
timeStamp: data.timeStamp,
|
||||
nonceStr: data.nonceStr,
|
||||
package: data.package,
|
||||
signType: data.signType,
|
||||
paySign: data.paySign
|
||||
}
|
||||
|
||||
// 2. 调起微信支付
|
||||
wx.requestPayment({
|
||||
...payInfo.value,
|
||||
success(res) {
|
||||
console.log('支付成功', res)
|
||||
uni.showToast({
|
||||
title: '支付成功'
|
||||
})
|
||||
currentStep.value == 3
|
||||
},
|
||||
fail(err) {
|
||||
console.log('支付失败', err)
|
||||
uni.showToast({
|
||||
title: '支付取消或失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
} catch (err) {
|
||||
uni.hideLoading()
|
||||
console.log('请求异常', err)
|
||||
uni.showToast({
|
||||
title: '支付请求异常',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
// 关闭密码弹窗
|
||||
const closePasswordModal = () => {
|
||||
currentStep.value = 1
|
||||
password.value = ''
|
||||
showBankList.value = false
|
||||
}
|
||||
|
||||
// 选择银行卡
|
||||
selectBank(item) {
|
||||
this.selectedBank = item;
|
||||
this.showBankList = false;
|
||||
},
|
||||
const selectBank = (item) => {
|
||||
selectedBank.value = item
|
||||
showBankList.value = false
|
||||
}
|
||||
|
||||
// 输入密码
|
||||
inputPassword(num) {
|
||||
if (this.password.length >= 6) return;
|
||||
this.password += num.toString();
|
||||
const inputPassword = (num) => {
|
||||
if (password.value.length >= 6) return
|
||||
password.value += num.toString()
|
||||
|
||||
// 密码满6位，自动提交
|
||||
if (this.password.length === 6) {
|
||||
this.handleConfirmPay();
|
||||
// 满6位自动提交
|
||||
if (password.value.length === 6) {
|
||||
handleConfirmPay()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 删除密码
|
||||
deletePassword() {
|
||||
this.password = this.password.slice(0, -1);
|
||||
},
|
||||
|
||||
// 确认支付
|
||||
handleConfirmPay() {
|
||||
// 这里模拟支付请求，实际项目中调用后端接口
|
||||
uni.showLoading({
|
||||
title: "支付中...",
|
||||
mask: true
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 支付成功，跳转到成功页
|
||||
this.currentStep = 3;
|
||||
this.password = "";
|
||||
this.showBankList = false;
|
||||
}, 1500);
|
||||
},
|
||||
|
||||
// 返回生活缴费列表
|
||||
handleBackToList() {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
const deletePassword = () => {
|
||||
password.value = password.value.slice(0, -1)
|
||||
}
|
||||
|
||||
},
|
||||
// 确认支付（模拟）
|
||||
const handleConfirmPay = () => {
|
||||
uni.showLoading({
|
||||
title: '支付中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
currentStep.value = 3
|
||||
password.value = ''
|
||||
showBankList.value = false
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
// 返回缴费列表
|
||||
const handleBackToList = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
@@ -5,14 +5,11 @@
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<view class="container">
|
||||
<!-- 1. 物业费详情页 -->
|
||||
<view class="pay-page">
|
||||
|
||||
<!-- 未欠费 -->
|
||||
<view class="amount-section">
|
||||
<image src="http://47.104.199.163:9090/images/propertyImgs/noArrears.png" class="background-image-style"></image>
|
||||
@@ -22,7 +19,6 @@
|
||||
<text class="lineStyle">{{'|'}}</text>
|
||||
<text>{{'缴费金额：'+lastPayNum+'元'}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 缴费信息 -->
|
||||
@@ -44,7 +40,6 @@
|
||||
<text class="info-label">可用余额</text>
|
||||
<text class="info-value">0.00</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="info-item" v-if="arrearsPayment=='暖气费'">
|
||||
@@ -63,153 +58,58 @@
|
||||
<text class="info-label">缴费单位</text>
|
||||
<text class="info-value">HN热力有限公司</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
|
||||
},
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onReady,
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
computed: {
|
||||
// 响应式数据
|
||||
const lastPayTime = ref('2022-11-29')
|
||||
const lastPayNum = ref('2022.00')
|
||||
const statusBarHeight = ref(20)
|
||||
const arrearsPayment = ref(uni.getStorageSync('arrearsPayment'))
|
||||
|
||||
// 生命周期
|
||||
onShow(() => {})
|
||||
onMounted(() => {})
|
||||
onReady(() => {})
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
// 方法
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex'
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lastPayTime: '2022-11-29',
|
||||
lastPayNum: '2022.00',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
arrearsPayment: uni.getStorageSync('arrearsPayment'),
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
// 点击立即缴费
|
||||
handlePay() {
|
||||
if (!this.payAmount || Number(this.payAmount) <= 0) {
|
||||
uni.showToast({
|
||||
title: "请输入正确的缴费金额",
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.currentStep = 2;
|
||||
},
|
||||
|
||||
// 关闭密码弹窗
|
||||
closePasswordModal() {
|
||||
this.currentStep = 1;
|
||||
this.password = "";
|
||||
this.showBankList = false;
|
||||
},
|
||||
|
||||
// 选择银行卡
|
||||
selectBank(item) {
|
||||
this.selectedBank = item;
|
||||
this.showBankList = false;
|
||||
},
|
||||
|
||||
// 输入密码
|
||||
inputPassword(num) {
|
||||
if (this.password.length >= 6) return;
|
||||
this.password += num.toString();
|
||||
|
||||
// 密码满6位，自动提交
|
||||
if (this.password.length === 6) {
|
||||
this.handleConfirmPay();
|
||||
}
|
||||
},
|
||||
|
||||
// 删除密码
|
||||
deletePassword() {
|
||||
this.password = this.password.slice(0, -1);
|
||||
},
|
||||
|
||||
// 确认支付
|
||||
handleConfirmPay() {
|
||||
// 这里模拟支付请求，实际项目中调用后端接口
|
||||
uni.showLoading({
|
||||
title: "支付中...",
|
||||
mask: true
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 支付成功，跳转到成功页
|
||||
this.currentStep = 3;
|
||||
this.password = "";
|
||||
this.showBankList = false;
|
||||
}, 1500);
|
||||
},
|
||||
|
||||
// 返回生活缴费列表
|
||||
handleBackToList() {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
// 以下为原代码保留的方法（未使用但保持功能完整）
|
||||
const handlePay = () => {}
|
||||
const closePasswordModal = () => {}
|
||||
const selectBank = () => {}
|
||||
const inputPassword = () => {}
|
||||
const deletePassword = () => {}
|
||||
const handleConfirmPay = () => {}
|
||||
const handleBackToList = () => {}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
@@ -221,7 +121,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
@@ -232,8 +131,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* 1. 物业费详情页 */
|
||||
.pay-page {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -245,11 +142,9 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.background-image-style {
|
||||
|
||||
width: 466rpx;
|
||||
height: 250rpx;
|
||||
margin-bottom: 140rpx;
|
||||
@@ -268,11 +163,8 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-section {}
|
||||
|
||||
.lineStyle {
|
||||
margin: 0rpx 30rpx;
|
||||
|
||||
}
|
||||
|
||||
.info-item {
|
||||
@@ -302,7 +194,6 @@
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.input-section {
|
||||
@@ -334,7 +225,6 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 2. 支付密码弹窗 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -434,7 +324,6 @@
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 银行卡列表 */
|
||||
.bank-list {
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
@@ -468,7 +357,6 @@
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
/* 密码输入框 */
|
||||
.password-input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -478,7 +366,6 @@
|
||||
.password-item {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
/* border: 2rpx solid #dcdcdc; */
|
||||
background-color: #efefef;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
@@ -493,7 +380,6 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 数字键盘 */
|
||||
.keyboard {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -527,7 +413,6 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 3. 缴费成功页 */
|
||||
.success-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
@@ -544,7 +429,6 @@
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
/* margin-top: 120rpx; */
|
||||
margin-bottom: 40rpx;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
@@ -553,12 +437,8 @@
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.success-icon .iconfont {}
|
||||
|
||||
.success-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -11,13 +11,13 @@
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="container">
|
||||
<!-- 已缴费/欠费列表 -->
|
||||
<view class="bill-list">
|
||||
<view v-if="paymentList.length === 0" class="empty-state">
|
||||
<view class="bill-list" v-if="paymentList.length != 0">
|
||||
<!-- <view v-if="paymentList.length === 0" class="empty-state">
|
||||
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
|
||||
<text class="empty-text">
|
||||
{{ '暂无数据'}}
|
||||
</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
|
||||
<image class="billIcon" :src="item.icon"></image>
|
||||
<view class="bill-info">
|
||||
@@ -29,8 +29,6 @@
|
||||
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 新增缴费区域 -->
|
||||
@@ -41,7 +39,6 @@
|
||||
</view>
|
||||
|
||||
<view class="grid-list">
|
||||
|
||||
<view class="grid-item" v-for="(item, index) in addList" :key="index" @click="goToAdd(item)">
|
||||
<view class="icon-box" :class="item.iconClass">
|
||||
<image class="iconStyle" :src="item.icon"></image>
|
||||
@@ -53,48 +50,33 @@
|
||||
<view style="width: 100%;height: 30rpx;"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {
|
||||
// console.log('onReady')
|
||||
},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onReady,
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
// 响应式数据
|
||||
const statusBarHeight = ref(20)
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
paymentList: [{
|
||||
const paymentList = ref([{
|
||||
id: 1,
|
||||
name: '物业费',
|
||||
status: '已欠费',
|
||||
address: '桂花园（别墅）2号楼2层',
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -102,7 +84,6 @@
|
||||
status: '',
|
||||
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
|
||||
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -110,11 +91,10 @@
|
||||
status: '已欠费',
|
||||
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
|
||||
|
||||
}
|
||||
],
|
||||
// 新增缴费列表数据
|
||||
addList: [{
|
||||
])
|
||||
|
||||
const addList = ref([{
|
||||
name: "燃气",
|
||||
type: "gas",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
|
||||
@@ -150,88 +130,61 @@
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
|
||||
iconClass: "parking"
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
}
|
||||
},
|
||||
// 生命周期
|
||||
onReady(() => {})
|
||||
onShow(() => {})
|
||||
onLoad(() => {})
|
||||
|
||||
|
||||
methods: {
|
||||
// 跳转到缴费
|
||||
goToBill(item) {
|
||||
// 方法
|
||||
const goToBill = (item) => {
|
||||
uni.setStorageSync('arrearsPayment', item.name)
|
||||
if (item.status == '已欠费') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/arrearsPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
url: '/pageSubPack/payment-list/arrearsPayment'
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/noArrearsPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
url: '/pageSubPack/payment-list/noArrearsPayment'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 跳转到缴费记录
|
||||
goToRecord() {
|
||||
}
|
||||
|
||||
const goToRecord = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentRecord',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
// 跳转到新增缴费
|
||||
goToAdd(type) {
|
||||
url: '/pageSubPack/payment-list/paymentRecord'
|
||||
})
|
||||
}
|
||||
|
||||
const goToAdd = (type) => {
|
||||
if (type.name == '燃气' || type.name == '暖气') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/selectPaymentEntity',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
url: '/pageSubPack/payment-list/selectPaymentEntity'
|
||||
})
|
||||
} else if (type.name == '水' || type.name == '电') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/addHydropower',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
url: '/pageSubPack/payment-list/addHydropower'
|
||||
})
|
||||
}
|
||||
uni.setStorageSync('addPaymentType', type.name)
|
||||
}
|
||||
|
||||
},
|
||||
goBack() {
|
||||
console.log(uni.getStorageSync('sourcePage'));
|
||||
const goBack = () => {
|
||||
console.log(uni.getStorageSync('sourcePage'))
|
||||
if (uni.getStorageSync('sourcePage') == 'serviceIndex') {
|
||||
uni.switchTab({
|
||||
url: '/pages/serviceIndex/serviceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
url: '/pages/serviceIndex/serviceIndex'
|
||||
})
|
||||
} else if (uni.getStorageSync('sourcePage') == 'index') {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
uni.removeStorageSync('sourcePage');
|
||||
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
uni.removeStorageSync('sourcePage')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||||
@@ -243,7 +196,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||||
}
|
||||
|
||||
@@ -252,7 +204,6 @@
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.topbox {
|
||||
@@ -277,11 +228,8 @@
|
||||
bottom: -140rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
/* padding:30rpx; */
|
||||
}
|
||||
.container {}
|
||||
|
||||
/* ===================== 欠费列表 ===================== */
|
||||
.bill-list {
|
||||
margin-bottom: 40rpx;
|
||||
background-color: #fff;
|
||||
@@ -289,7 +237,6 @@
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -339,7 +286,6 @@
|
||||
}
|
||||
|
||||
.bill-desc {
|
||||
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
@@ -348,7 +294,6 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 已欠费标签 */
|
||||
.bill-status {
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
@@ -359,7 +304,6 @@
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 右侧箭头 */
|
||||
.arrow {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
@@ -368,7 +312,6 @@
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ===================== 新增缴费区域 ===================== */
|
||||
.add-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
@@ -393,7 +336,6 @@
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
/* 网格列表 */
|
||||
.grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -412,16 +354,13 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
.icon-box {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
/* background-color: #e6f0ff; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* margin-right: 24rpx; */
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
@@ -14,8 +13,6 @@
|
||||
<view class="total-title">累计缴费</view>
|
||||
<view class="total-price">¥800.00</view>
|
||||
</view>
|
||||
<!-- 折线图 Canvas -->
|
||||
<!-- <canvas canvas-id="chargeChart" class="chart-canvas"></canvas> -->
|
||||
|
||||
<view class="chart-box">
|
||||
<view v-if="chartData.length === 0" class="empty-state">
|
||||
@@ -66,63 +63,30 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
|
||||
},
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onReady,
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
computed: {
|
||||
// 响应式数据
|
||||
const statusBarHeight = ref(20)
|
||||
|
||||
|
||||
// 自动按月份分组
|
||||
monthGroups() {
|
||||
let map = {}
|
||||
this.billList.forEach(bill => {
|
||||
if (!map[bill.month]) {
|
||||
map[bill.month] = {
|
||||
month: bill.month,
|
||||
total: 0,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
map[bill.month].list.push(bill)
|
||||
map[bill.month].total += bill.amount
|
||||
})
|
||||
return Object.values(map).sort((a, b) => b.month - a.month)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
this.drawLineChart();
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 完全对应你图片的数据
|
||||
chartData: [{
|
||||
const chartData = ref([{
|
||||
month: '1月',
|
||||
price: 250
|
||||
},
|
||||
@@ -146,24 +110,23 @@
|
||||
month: '6月',
|
||||
price: 130
|
||||
}
|
||||
],
|
||||
maxPrice: 250, // 最大值（基准高度）
|
||||
barMaxHeight: 300, // 柱子最大高度rpx
|
||||
// canvas折线图数据
|
||||
chart: {
|
||||
])
|
||||
|
||||
const maxPrice = ref(250)
|
||||
const barMaxHeight = ref(300)
|
||||
|
||||
const chart = ref({
|
||||
months: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
values: [100, 140, 230, 100, 130, 100]
|
||||
},
|
||||
})
|
||||
|
||||
billList: [
|
||||
// 5月数据
|
||||
{
|
||||
const billList = ref([{
|
||||
id: 1,
|
||||
month: 5,
|
||||
name: '燃气费',
|
||||
account: '123123123123',
|
||||
amount: 25,
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -171,17 +134,15 @@
|
||||
name: '水费',
|
||||
account: '123123123123',
|
||||
amount: 25,
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/water.png"
|
||||
},
|
||||
|
||||
// 6月数据
|
||||
{
|
||||
id: 3,
|
||||
month: 6,
|
||||
name: '燃气费',
|
||||
account: '123123123123',
|
||||
amount: 30,
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@@ -189,7 +150,7 @@
|
||||
name: '水费',
|
||||
account: '123123123123',
|
||||
amount: 10,
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/water.png"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@@ -197,36 +158,59 @@
|
||||
name: '电费',
|
||||
account: '123123123123',
|
||||
amount: 30,
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png"
|
||||
}
|
||||
]
|
||||
|
||||
])
|
||||
|
||||
// 计算属性 —— 月份分组
|
||||
const monthGroups = computed(() => {
|
||||
let map = {}
|
||||
billList.value.forEach(bill => {
|
||||
if (!map[bill.month]) {
|
||||
map[bill.month] = {
|
||||
month: bill.month,
|
||||
total: 0,
|
||||
list: []
|
||||
}
|
||||
},
|
||||
}
|
||||
map[bill.month].list.push(bill)
|
||||
map[bill.month].total += bill.amount
|
||||
})
|
||||
return Object.values(map).sort((a, b) => b.month - a.month)
|
||||
})
|
||||
|
||||
// 生命周期
|
||||
onShow(() => {})
|
||||
onMounted(() => {})
|
||||
onReady(() => {
|
||||
drawLineChart()
|
||||
})
|
||||
|
||||
methods: {
|
||||
// 计算每个柱子自适应高度（按金额比例换算）
|
||||
barHeight(price) {
|
||||
const height = (price / this.maxPrice) * this.barMaxHeight
|
||||
// 方法
|
||||
const barHeight = (price) => {
|
||||
const height = (price / maxPrice.value) * barMaxHeight.value
|
||||
return `${height}rpx`
|
||||
},
|
||||
drawLineChart() {
|
||||
}
|
||||
|
||||
const drawLineChart = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
const ctx = uni.createCanvasContext('chargeChart')
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
const ctx = uni.createCanvasContext('chargeChart', this)
|
||||
// #endif
|
||||
|
||||
const canvasPage = uni.getSystemInfoSync();
|
||||
const w = canvasPage.windowWidth - 30;
|
||||
const h = canvasPage.windowHeight * 0.3;
|
||||
|
||||
const padding = 40
|
||||
const stepX = (w - 60) / (this.chart.months.length - 1)
|
||||
const stepX = (w - 60) / (chart.value.months.length - 1)
|
||||
const maxVal = 250
|
||||
|
||||
ctx.setFillStyle('#999')
|
||||
ctx.setFontSize(12)
|
||||
ctx.setTextAlign('center')
|
||||
|
||||
// 绘制网格
|
||||
ctx.beginPath()
|
||||
ctx.setStrokeStyle('#d8d8d8')
|
||||
ctx.setLineWidth(1)
|
||||
@@ -238,15 +222,13 @@
|
||||
}
|
||||
ctx.stroke()
|
||||
|
||||
// 绘制X轴月份
|
||||
this.chart.months.forEach((m, i) => {
|
||||
chart.value.months.forEach((m, i) => {
|
||||
let x = 40 + i * stepX
|
||||
ctx.fillText(m, x, h - 20)
|
||||
})
|
||||
|
||||
// 绘制折线
|
||||
let points = []
|
||||
this.chart.values.forEach((val, i) => {
|
||||
chart.value.values.forEach((val, i) => {
|
||||
let x = 40 + i * stepX
|
||||
let y = padding + (h - padding * 2) * (1 - val / maxVal)
|
||||
points.push({
|
||||
@@ -264,7 +246,6 @@
|
||||
})
|
||||
ctx.stroke()
|
||||
|
||||
// 绘制圆点
|
||||
points.forEach((p, i) => {
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, 3, 0, 2 * Math.PI)
|
||||
@@ -276,25 +257,19 @@
|
||||
|
||||
ctx.setFillStyle('#4080FF')
|
||||
ctx.setFontSize(13)
|
||||
ctx.fillText(this.chart.values[i] + '元', p.x, p.y - 10)
|
||||
ctx.fillText(chart.value.values[i] + '元', p.x, p.y - 10)
|
||||
})
|
||||
|
||||
ctx.draw()
|
||||
},
|
||||
goBack() {
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
url: '/pageSubPack/payment-list/paymentIndex'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
// background: #f2f1f6;
|
||||
@@ -306,7 +281,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
@@ -315,15 +289,12 @@
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
|
||||
.total-box {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -399,7 +370,6 @@
|
||||
.bill-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
/* background: #e6efff; */
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -440,19 +410,17 @@
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/* 图表外层容器 横向排列 */
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 444rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
/* padding: 40rpx 20rpx; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 单个柱子单元：垂直排列 文字+柱子+月份 */
|
||||
.chart-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -462,22 +430,18 @@
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 顶部金额标签 */
|
||||
.chart-label {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 蓝色圆角柱子 完全还原原图顶部圆角 */
|
||||
.chart-bar {
|
||||
width: 40rpx;
|
||||
background: #3388ff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
/* 只有顶部圆角！和原图一模一样 */
|
||||
}
|
||||
|
||||
/* 底部月份文字 */
|
||||
.chart-month {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<uni-nav-bar title="选择缴费单位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 城市 + 搜索 -->
|
||||
@@ -20,9 +19,6 @@
|
||||
</uni-data-picker>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<!-- <view class="search-input">
|
||||
<input v-model="keyword" placeholder="请输入缴费单位名称" placeholder-class="ph" />
|
||||
</view> -->
|
||||
<view class="search-box">
|
||||
<input class="search-input" v-model="searchKey" placeholder="请输入缴费单位名称"
|
||||
placeholder-class="input-placeholder" @input="onSearch" />
|
||||
@@ -32,11 +28,9 @@
|
||||
|
||||
<view v-if="filterList.length === 0" class="empty-state">
|
||||
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
|
||||
<text class="empty-text">
|
||||
{{ '暂无数据'}}
|
||||
</text>
|
||||
<text class="empty-text">{{ '暂无数据' }}</text>
|
||||
</view>
|
||||
<!-- <scroll-view scroll-y class="list-scroll"> -->
|
||||
|
||||
<view v-for="item in filterList">
|
||||
<view class="group-title">{{item.name}}</view>
|
||||
<view class="item" v-for="itemChild in item.children" :key="itemChild.id"
|
||||
@@ -44,75 +38,30 @@
|
||||
{{ itemChild.name }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- </scroll-view> -->
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入外部城市数据
|
||||
// import Address from '@/static/js/chinaRegions/picker-region.js'
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
|
||||
},
|
||||
computed: {
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onReady,
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
|
||||
|
||||
filterList() {
|
||||
// 没有关键词直接返回全部
|
||||
if (!this.searchKey) return this.companyList;
|
||||
const key = this.searchKey.trim().toLowerCase();
|
||||
// 过滤第一层 + 第二层
|
||||
return this.companyList.filter(group => {
|
||||
// 过滤子项：只要子项包含关键词就保留
|
||||
const hasChild = group.children.some(child =>
|
||||
child.name.toLowerCase().includes(key)
|
||||
);
|
||||
// 同时支持 分组名 搜索（不需要可删除）
|
||||
const groupMatch = group.name.toLowerCase().includes(key);
|
||||
|
||||
return hasChild || groupMatch;
|
||||
}).map(group => {
|
||||
// 返回过滤后的子项
|
||||
return {
|
||||
...group,
|
||||
children: group.children.filter(child =>
|
||||
child.name.toLowerCase().includes(key)
|
||||
)
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedCity: '选择城市',
|
||||
cityValue: '',
|
||||
alladdress: [{
|
||||
// 响应式数据
|
||||
const selectedCity = ref('选择城市')
|
||||
const cityValue = ref('')
|
||||
const alladdress = ref([{
|
||||
text: "北京市",
|
||||
value: "110000000000",
|
||||
children: [{
|
||||
@@ -184,17 +133,14 @@
|
||||
}
|
||||
]
|
||||
}]
|
||||
}, ],
|
||||
}])
|
||||
|
||||
searchKey: '',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
showPicker: false,
|
||||
keyword: '',
|
||||
const searchKey = ref('')
|
||||
const statusBarHeight = ref(20)
|
||||
const showPicker = ref(false)
|
||||
const keyword = ref('')
|
||||
|
||||
|
||||
// 列表：一个大数组
|
||||
companyList: [{
|
||||
const companyList = ref([{
|
||||
id: 7,
|
||||
name: '官方机构',
|
||||
children: [{
|
||||
@@ -233,69 +179,66 @@
|
||||
{
|
||||
id: 10,
|
||||
name: "XX能源集团"
|
||||
},
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
]
|
||||
|
||||
// 计算属性：搜索过滤
|
||||
const filterList = computed(() => {
|
||||
if (!searchKey.value) return companyList.value
|
||||
const key = searchKey.value.trim().toLowerCase()
|
||||
|
||||
return companyList.value.filter(group => {
|
||||
const hasChild = group.children.some(child =>
|
||||
child.name.toLowerCase().includes(key)
|
||||
)
|
||||
const groupMatch = group.name.toLowerCase().includes(key)
|
||||
return hasChild || groupMatch
|
||||
}).map(group => {
|
||||
return {
|
||||
...group,
|
||||
children: group.children.filter(child =>
|
||||
child.name.toLowerCase().includes(key)
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
// 生命周期
|
||||
onShow(() => {})
|
||||
onMounted(() => {})
|
||||
onReady(() => {})
|
||||
|
||||
methods: {
|
||||
selectItem(item) {
|
||||
console.log(item);
|
||||
// 方法
|
||||
const selectItem = (item) => {
|
||||
console.log(item)
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/addPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
onchange(e) {
|
||||
url: '/pageSubPack/payment-list/addPayment'
|
||||
})
|
||||
}
|
||||
|
||||
const onchange = (e) => {
|
||||
console.log('选中text数组:', e.detail.value)
|
||||
let arr = e.detail.value
|
||||
let selectedCity = ''
|
||||
// 拼接省市区
|
||||
// arr.forEach((item, index) => {
|
||||
// if (index != arr.length - 1) {
|
||||
// selectedCity = selectedCity + item.text + '/'
|
||||
// } else {
|
||||
// selectedCity = selectedCity + item.text
|
||||
// }
|
||||
|
||||
// })
|
||||
// 只显示城市判断
|
||||
if (arr[1].text == '市辖区') {
|
||||
selectedCity = arr[0].text
|
||||
const arr = e.detail.value
|
||||
let city = ''
|
||||
if (arr[1].text === '市辖区') {
|
||||
city = arr[0].text
|
||||
} else {
|
||||
selectedCity = arr[1].text
|
||||
city = arr[1].text
|
||||
}
|
||||
selectedCity.value = city
|
||||
}
|
||||
this.selectedCity = selectedCity
|
||||
},
|
||||
|
||||
// 搜索输入事件
|
||||
onSearch() {
|
||||
// 实时过滤，computed 自动处理
|
||||
},
|
||||
const onSearch = () => {}
|
||||
|
||||
goBack() {
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
url: '/pageSubPack/payment-list/paymentIndex'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
@@ -307,14 +250,12 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
@@ -326,13 +267,11 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 隐藏 uni-data-picker 原生样式，只保留点击功能 */
|
||||
.city-picker {
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 自定义城市选择区域，完美还原「日照市 ▼」 */
|
||||
.city-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -350,32 +289,26 @@
|
||||
|
||||
.city-text {
|
||||
font-size: 28rpx;
|
||||
/* 匹配截图字体大小 */
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 自定义下拉箭头，1:1 还原截图样式 */
|
||||
.arrow-icon {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10rpx solid transparent;
|
||||
border-right: 10rpx solid transparent;
|
||||
border-top: 16rpx solid #333333;
|
||||
/* 纯黑实心三角，和截图一致 */
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 20rpx;
|
||||
/* margin: 0rpx 30rpx 20rpx 30rpx; */
|
||||
padding: 0 30rpx;
|
||||
margin: 10rpx 0px 0px 10rpx;
|
||||
height: 70rpx;
|
||||
@@ -399,9 +332,6 @@
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.list-scroll {}
|
||||
|
||||
.group-title {
|
||||
padding: 20rpx 40rpx;
|
||||
font-size: 28rpx;
|
||||
@@ -430,7 +360,6 @@
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
|
||||
Reference in New Issue
Block a user