Merge branch 'main' of http://gitea.bugtc.com/zhouyanli/property-resident-side
This commit is contained in:
zhouyanli
@@ -1,738 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="type+'车辆'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-container">
|
||||
<!-- 车牌号 -->
|
||||
<view class="form-item">
|
||||
<view class="item-label">车牌号</view>
|
||||
<input class="item-input" v-model="formData.plateNo" placeholder="请输入"
|
||||
placeholder-class="input-placeholder" @blur="inputChange('车牌号')" />
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 车辆品牌选择 -->
|
||||
<view class="form-item" @click="selectItem('车辆品牌')">
|
||||
<text class="item-label">车辆品牌</text>
|
||||
<text class="item-placeholder"
|
||||
:class="{selected:formData.carBrandName}">{{ formData.carBrandName || '请选择' }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
|
||||
<!-- 车辆型号 -->
|
||||
<view class="form-item">
|
||||
<view class="item-label">车辆型号</view>
|
||||
<input class="item-input" v-model="formData.model" placeholder="请输入"
|
||||
placeholder-class="input-placeholder" @blur="inputChange('车辆型号')" />
|
||||
</view>
|
||||
|
||||
<!-- 车辆颜色 -->
|
||||
<view class="form-item">
|
||||
<view class="item-label">车辆颜色</view>
|
||||
<input class="item-input" v-model="formData.color" placeholder="请输入"
|
||||
placeholder-class="input-placeholder" @blur="inputChange('车辆颜色')" />
|
||||
</view>
|
||||
|
||||
<!-- 车辆图片上传 -->
|
||||
<view class="form-item upload-item">
|
||||
<view class="item-label">车辆图片</view>
|
||||
<view class="upload-box" @click="chooseImage">
|
||||
<!-- 未上传：显示加号+文字 -->
|
||||
<view v-if="!formData.carImg" class="upload-tip">
|
||||
<text class="plus-icon">+</text>
|
||||
<text class="upload-text">上传照片</text>
|
||||
</view>
|
||||
<!-- 已上传：显示图片 -->
|
||||
<image v-else :src="formData.carImg" class="car-image" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部下一步按钮 -->
|
||||
<view class="bottom-btn-wrap">
|
||||
<button class="next-btn" @click="saveCar">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</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.plateNo = '京A88888';
|
||||
this.formData.carBrandName = '宝马';
|
||||
this.formData.model = 'X5';
|
||||
this.formData.color = '白色';
|
||||
this.formData.carImg = 'http://47.104.199.163:9090/images/propertyImgs/carImg.png';
|
||||
this.formData.carBrandId = '1';
|
||||
|
||||
} else if (uni.getStorageSync('operationType') == 'add') {
|
||||
this.id = undefined;
|
||||
this.type = '添加';
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onUnload() {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
id: undefined,
|
||||
type: '',
|
||||
// 表单数据
|
||||
formData: {
|
||||
plateNo: uni.getStorageSync('plateNo'),
|
||||
carBrandName: uni.getStorageSync('carBrandName'),
|
||||
model: uni.getStorageSync('model'),
|
||||
color: uni.getStorageSync('color'),
|
||||
carImg: uni.getStorageSync('carImg') // 车辆图片路径
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
inputChange(type) {
|
||||
if (type == '车牌号') {
|
||||
|
||||
uni.setStorageSync('plateNo', this.formData.plateNo)
|
||||
} else if (type == '车辆型号') {
|
||||
uni.setStorageSync('model', this.formData.model)
|
||||
} else if (type == '车辆颜色') {
|
||||
uni.setStorageSync('color', this.formData.color)
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
// 选择图片（上传照片）
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1, // 只选1张
|
||||
sizeType: ["original", "compressed"],
|
||||
sourceType: ["album", "camera"], // 相册/相机
|
||||
success: (res) => {
|
||||
// 赋值图片路径
|
||||
uni.setStorageSync('carImg', res.tempFilePaths[0]);
|
||||
this.formData.carImg = res.tempFilePaths[0];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 保存车辆信息
|
||||
saveCar() {
|
||||
// 表单校验
|
||||
if (!this.formData.plateNo) {
|
||||
return uni.showToast({
|
||||
title: "请输入车牌号",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
if (!this.formData.carBrandName) {
|
||||
return uni.showToast({
|
||||
title: "请输入车辆品牌",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
if (!this.formData.model) {
|
||||
return uni.showToast({
|
||||
title: "请输入车辆型号",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
if (!this.formData.color) {
|
||||
return uni.showToast({
|
||||
title: "请输入车辆颜色",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '确认提交',
|
||||
content: '保存后进入审核',
|
||||
success: (res) => {
|
||||
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
// 选择项点击事件（可替换为picker/弹窗选择）
|
||||
selectItem(type) {
|
||||
if (type === '车辆品牌') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/selectCarBrand',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
goBack() {
|
||||
|
||||
uni.removeStorageSync('plateNo');
|
||||
uni.removeStorageSync('carBrandName');
|
||||
uni.removeStorageSync('model');
|
||||
uni.removeStorageSync('color');
|
||||
uni.removeStorageSync('carImg');
|
||||
uni.removeStorageSync('carBrandId');
|
||||
uni.removeStorageSync('checkType');
|
||||
// if (uni.getStorageSync('operationType') == 'update') {
|
||||
// uni.redirectTo({
|
||||
// url: '/pages/my/houseDetail?id=' + this.id,
|
||||
// success: res => {},
|
||||
// fail: () => {},
|
||||
// complete: () => {}
|
||||
// });
|
||||
// } else if (uni.getStorageSync('operationType') == 'add') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/myCarIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
// }
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局样式：去掉switch的×号，保证开关纯净 */
|
||||
.my-switch::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
background-color: #e5e5e5 !important;
|
||||
border: none !important;
|
||||
width: 90rpx !important;
|
||||
height: 48rpx !important;
|
||||
border-radius: 50rpx !important;
|
||||
}
|
||||
|
||||
.my-switch[checked="true"] {
|
||||
background-color: #1677ff !important;
|
||||
}
|
||||
|
||||
.my-switch::after {
|
||||
width: 44rpx !important;
|
||||
height: 44rpx !important;
|
||||
border-radius: 50% !important;
|
||||
margin: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 步骤条 */
|
||||
.step-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #ccc;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.step-item.active .step-circle {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.step-item.active .step-text {
|
||||
color: #1677ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
width: 150rpx;
|
||||
height: 4rpx;
|
||||
background-color: #ccc;
|
||||
margin: 0 20rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
padding: 0 0px;
|
||||
/* height: calc(100vh - 240rpx); */
|
||||
/* overflow-y: scroll; */
|
||||
|
||||
}
|
||||
|
||||
/* 表单项 */
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-placeholder {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-placeholder.selected {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.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-item {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
border-radius: 12rpx;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/* 注意：这里不能加 scoped！必须写全局样式 */
|
||||
|
||||
/* 隐藏 switch 关闭状态的 × 号 */
|
||||
.no-cross-switch::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.no-cross-switch {
|
||||
transform: scale(0.85);
|
||||
border-radius: 50rpx !important;
|
||||
}
|
||||
|
||||
.no-cross-switch>>>.uni-switch-input-checked {
|
||||
background-color: #007aff !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 表单项 —— 和你页面保持一致 */
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* 底部弹出框 */
|
||||
.popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
z-index: 100;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 选项列表 */
|
||||
.list {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 表单 */
|
||||
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f2f2f2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 180rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ph {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
.arrow-item::after {
|
||||
content: '>';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #ccc;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
|
||||
.item-input {
|
||||
flex: 1;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999 !important;
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
|
||||
/* ===================== 图片上传区域 ===================== */
|
||||
.upload-item {
|
||||
align-items: flex-start;
|
||||
padding-top: 40rpx;
|
||||
padding-bottom: 40rpx;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plus-icon {
|
||||
font-size: 80rpx;
|
||||
color: #999;
|
||||
line-height: 1;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.car-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 弹窗遮罩 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
z-index: 100;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
padding: 0 30rpx;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,913 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="type+'车位'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-container">
|
||||
<!-- 第一步 -->
|
||||
<view>
|
||||
<!-- 小区选择 -->
|
||||
<view class="form-item" @click="selectItem('小区')">
|
||||
<text class="item-label">小区</text>
|
||||
<text class="item-placeholder"
|
||||
:class="{selected:formData.community}">{{ formData.community || '请选择' }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
|
||||
<!-- 房屋选择 -->
|
||||
<view class="form-item" @click="selectItem('绑定房屋')">
|
||||
<text class="item-label">绑定房屋</text>
|
||||
<text class="item-placeholder"
|
||||
:class="{selected:formData.bindHouse}">{{ formData.bindHouse || '请选择' }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
|
||||
<!-- 停车场选择 -->
|
||||
<view class="form-item" @click="selectItem('停车场')">
|
||||
<text class="item-label">停车场</text>
|
||||
<text class="item-placeholder"
|
||||
:class="{selected:formData.parkingLot}">{{ formData.parkingLot || '请选择' }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
|
||||
<!-- 车位编号选择 -->
|
||||
<view class="form-item" @click="selectItem('车位编号')">
|
||||
<text class="item-label">车位编号</text>
|
||||
<text class="item-placeholder"
|
||||
:class="{selected:formData.parkingSpaceNum}">{{ formData.parkingSpaceNum || '请选择' }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
|
||||
<!-- 车位状态选择 -->
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">车位状态</text>
|
||||
<view class="parkingSpaceStatus-group">
|
||||
<view class="parkingSpaceStatus-item"
|
||||
:class="{ active: formData.parkingSpaceStatus == '自用' }"
|
||||
@click="formData.parkingSpaceStatus = '自用'">
|
||||
<view class="radio"></view>
|
||||
<text>自用</text>
|
||||
</view>
|
||||
<view class="parkingSpaceStatus-item"
|
||||
:class="{ active: formData.parkingSpaceStatus == '租赁' }"
|
||||
@click="formData.parkingSpaceStatus = '租赁'">
|
||||
<view class="radio"></view>
|
||||
<text>租赁</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 绑定车辆选择 -->
|
||||
<view class="form-item" @click="bindCarClick('绑定车辆')">
|
||||
<text class="item-label">绑定车辆</text>
|
||||
<text class="item-placeholder"
|
||||
:class="{selected:formData.bindCar}">{{ formData.bindCar || '请选择' }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部下一步按钮 -->
|
||||
<view class="bottom-btn-wrap">
|
||||
<button class="next-btn" @click="goSubmit">提交审核</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</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.bindHouse = '01栋';
|
||||
this.formData.parkingLot = '地下停车场';
|
||||
this.formData.parkingSpaceNum = 'B1-02';
|
||||
this.formData.bindCar = '宝马';
|
||||
this.formData.communityId = '1';
|
||||
this.formData.bindHouseId = '2';
|
||||
this.formData.parkingLotId = '3';
|
||||
this.formData.parkingSpaceId = '4';
|
||||
this.formData.bindCarId = '自用';
|
||||
this.formData.parkingSpaceStatus = '租赁';
|
||||
} else if (uni.getStorageSync('operationType') == 'add') {
|
||||
this.id = undefined;
|
||||
this.type = '添加';
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onUnload() {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
id: undefined,
|
||||
type: '',
|
||||
formData: {
|
||||
community: uni.getStorageSync('communityName'),
|
||||
communityId: uni.getStorageSync('communityId'),
|
||||
bindHouse: uni.getStorageSync('bindHouseName'),
|
||||
bindHouseId: uni.getStorageSync('bindHouseId'),
|
||||
parkingLot: uni.getStorageSync('parkingLotName'),
|
||||
parkingLotId: uni.getStorageSync('parkingLotId'),
|
||||
parkingSpaceNum: uni.getStorageSync('parkingSpaceName'),
|
||||
parkingSpaceId: uni.getStorageSync('parkingSpaceId'),
|
||||
parkingSpaceStatus: '自用',
|
||||
bindCar: uni.getStorageSync('bindCarName'),
|
||||
bindCarId: uni.getStorageSync('bindCarId'),
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 完整校验
|
||||
goSubmit() {
|
||||
if (!this.formData.community) return uni.showToast({
|
||||
title: '请选择小区',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.formData.bindHouse) return uni.showToast({
|
||||
title: '请绑定房屋',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.formData.parkingLot) return uni.showToast({
|
||||
title: '请选择停车场',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.formData.parkingSpaceNum) return uni.showToast({
|
||||
title: '请选择车位编号',
|
||||
icon: 'none'
|
||||
})
|
||||
if (!this.formData.bindCar) return uni.showToast({
|
||||
title: '请选择绑定车辆',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.showModal({
|
||||
title: '确认提交',
|
||||
content: '提交后进入审核',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
selectClick(item) {
|
||||
this.formData.status = item;
|
||||
uni.setStorageSync('houseStatus', item)
|
||||
this.showPopup = false;
|
||||
},
|
||||
bindCarClick() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/bindCar',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
// 选择项点击事件（可替换为picker/弹窗选择）
|
||||
selectItem(type) {
|
||||
|
||||
if (type === '小区') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/selectResidentialCommunity?sourcePage=' + 'addParkingSpace',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
if (type === '绑定房屋') {
|
||||
if (!this.formData.community) {
|
||||
uni.showToast({
|
||||
title: '请先选择上级',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/bindHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
if (type === '停车场') {
|
||||
if (!this.formData.community) {
|
||||
uni.showToast({
|
||||
title: '请先选择上级',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.setStorageSync('checkType', '停车场')
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/selectParingLot',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
if (type === '车位编号') {
|
||||
if (!this.formData.community) {
|
||||
uni.showToast({
|
||||
title: '请先选择上级',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
} else {
|
||||
uni.setStorageSync('checkType', '车位编号')
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/selectParingLot',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 开关切换
|
||||
onSwitchChange(e) {
|
||||
this.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() {
|
||||
uni.removeStorageSync('communityId');
|
||||
uni.removeStorageSync('communityName');
|
||||
uni.removeStorageSync('bindHouseId');
|
||||
uni.removeStorageSync('bindHouseName');
|
||||
uni.removeStorageSync('checkType');
|
||||
uni.removeStorageSync('parkingLotId');
|
||||
uni.removeStorageSync('parkingLotName');
|
||||
uni.removeStorageSync('parkingSpaceId');
|
||||
uni.removeStorageSync('parkingSpaceName');
|
||||
uni.removeStorageSync('bindCarId');
|
||||
uni.removeStorageSync('bindCarName');
|
||||
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/myParkingSpaceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局样式：去掉switch的×号，保证开关纯净 */
|
||||
.my-switch::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
background-color: #e5e5e5 !important;
|
||||
border: none !important;
|
||||
width: 90rpx !important;
|
||||
height: 48rpx !important;
|
||||
border-radius: 50rpx !important;
|
||||
}
|
||||
|
||||
.my-switch[checked="true"] {
|
||||
background-color: #1677ff !important;
|
||||
}
|
||||
|
||||
.my-switch::after {
|
||||
width: 44rpx !important;
|
||||
height: 44rpx !important;
|
||||
border-radius: 50% !important;
|
||||
margin: 2rpx !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/* 页面整体 */
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* 步骤条 */
|
||||
.step-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #ccc;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.step-item.active .step-circle {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.step-item.active .step-text {
|
||||
color: #1677ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
width: 150rpx;
|
||||
height: 4rpx;
|
||||
background-color: #ccc;
|
||||
margin: 0 20rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {}
|
||||
|
||||
/* 表单项 */
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-placeholder {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-placeholder.selected {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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-item {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
border-radius: 12rpx;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/* 注意：这里不能加 scoped！必须写全局样式 */
|
||||
::v-deep .uni-switch-input:before {
|
||||
|
||||
background-color: #cccccd !important;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* 隐藏 switch 关闭状态的 × 号 */
|
||||
.no-cross-switch::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.no-cross-switch {
|
||||
transform: scale(0.85);
|
||||
border-radius: 50rpx !important;
|
||||
}
|
||||
|
||||
.no-cross-switch>>>.uni-switch-input-checked {
|
||||
background-color: #007aff !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 表单项 —— 和你页面保持一致 */
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
width: 90px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.value.selected {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* 底部弹出框 */
|
||||
.popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
z-index: 100;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 选项列表 */
|
||||
.list {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 表单 */
|
||||
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f2f2f2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 180rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ph {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
.arrow-item::after {
|
||||
content: '>';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #ccc;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
|
||||
/* 性别 */
|
||||
.parkingSpaceStatus-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.parkingSpaceStatus-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.parkingSpaceStatus-item.active {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #ddd;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.parkingSpaceStatus-item.active .radio::after {
|
||||
content: '';
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
background: #1677ff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* 手机验证码 */
|
||||
.phone-item .input {
|
||||
padding-right: 200rpx;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
/* background: #f5f7fa; */
|
||||
color: #1677ff;
|
||||
font-size: 26rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
.upload-section {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upload-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 两列布局 */
|
||||
.upload-wrap {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.upload-item {
|
||||
/* flex: 1; */
|
||||
height: 200px;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background: #eff0ff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 上传按钮 */
|
||||
.upload-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plus {
|
||||
font-size: 50rpx;
|
||||
color: #ccc;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 预览图 */
|
||||
.preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
/* 弹窗遮罩 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
z-index: 100;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
padding: 0 30rpx;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,378 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="绑定车辆" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y>
|
||||
|
||||
|
||||
<view class="car-item" v-for="(item, index) in carList" :key="index" @click="handleItemClick(item,index)"
|
||||
:class="{ checked: selectedIndex === index }">
|
||||
<!-- 左侧圆形占位 -->
|
||||
<image :src="item.imgSrc" mode="aspectFill" class="car-avatar" @error="item.imgSrc = defaultCarImg" />
|
||||
<!-- 中间车辆信息 -->
|
||||
<view class="car-info">
|
||||
<view class="car-plate">{{ item.plate }}</view>
|
||||
<view class="car-model">{{ item.model }}·{{ item.color }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧状态标签 -->
|
||||
<view class="status-tag" :class="{ bound: item.status === '已绑定', unbound: item.status === '未绑定' }">
|
||||
{{ item.status }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部确定绑定按钮 -->
|
||||
<view class="bottom-btn">
|
||||
<button class="confirm-btn" @click="confirmBind">确定绑定</button>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
defaultCarImg: "http://47.104.199.163:9090/images/propertyImgs/defaultCarImg.png",
|
||||
searchKey: "",
|
||||
selectedId: '',
|
||||
selectedName: '',
|
||||
selectedIndex: -1, // 当前选中的索引
|
||||
|
||||
// 模拟车辆数据
|
||||
carList: [{
|
||||
id: '1',
|
||||
imgSrc: 'http://47.104.199.163:9090/images/propertyImgs/carImg.png',
|
||||
plate: "京A88888",
|
||||
model: "宝马X5",
|
||||
color: "白色",
|
||||
status: "已绑定"
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
imgSrc: 'https://错误地址2.png',
|
||||
plate: "京A88888",
|
||||
model: "宝马X5",
|
||||
color: "白色",
|
||||
status: "未绑定"
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
imgSrc: 'https://错误地址3.png',
|
||||
plate: "京A88888",
|
||||
model: "宝马X5",
|
||||
color: "白色",
|
||||
status: "未绑定"
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
// 选择绑定车辆
|
||||
handleItemClick(item, index) {
|
||||
this.selectedIndex = index;
|
||||
this.selectedId = item.id;
|
||||
this.selectedName = item.plate;
|
||||
},
|
||||
|
||||
// 确定绑定
|
||||
confirmBind() {
|
||||
if (this.selectedIndex === -1) {
|
||||
return uni.showToast({
|
||||
title: "请先选择绑定车辆",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: "确认选择",
|
||||
content: `确定绑定该车辆吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '绑定中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '绑定成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
uni.setStorageSync('bindCarId', this.selectedId);
|
||||
uni.setStorageSync('bindCarName', this.selectedName);
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addParkingSpace',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
overflow: hidden;
|
||||
// height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* 通用输入框样式 */
|
||||
.input-item {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 确定按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 页面整体 */
|
||||
|
||||
/* ====================== 列表容器 ====================== */
|
||||
.list-container {
|
||||
/* flex: 1; */
|
||||
padding: 40rpx;
|
||||
min-height: calc(100vh - 105px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* ====================== 绑定车辆卡片 ====================== */
|
||||
/* 单个车辆项 */
|
||||
.car-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1rpx solid #e6e9ff;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.car-item.checked {
|
||||
background: #f4f7ff;
|
||||
/* 浅蓝色背景 */
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
/* 左侧圆形头像占位 */
|
||||
.car-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f4ff;
|
||||
margin-right: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 中间信息区域 */
|
||||
.car-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 车牌号 */
|
||||
.car-plate {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
/* 车型+颜色 */
|
||||
.car-model {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 24rpx;
|
||||
padding:6rpx14rpx;
|
||||
border-radius:6rpx;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
|
||||
/* 未绑定状态（浅绿色背景+绿色文字） */
|
||||
.status-tag.unbound {
|
||||
/* background-color: #e6f7e6; */
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 已绑定状态（可扩展，比如蓝色） */
|
||||
.status-tag.bound {
|
||||
/* background-color: #e6f0ff; */
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
|
||||
/* ====================== 底部按钮 ====================== */
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 34rpx;
|
||||
border: none;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,466 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="绑定房屋" left-icon="left" @clickLeft="goBack" :border="false" backgroundColor="transparent">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-box">
|
||||
<input class="search-input" v-model="searchKey" placeholder="请输入名称"
|
||||
placeholder-class="input-placeholder" @input="onSearch" />
|
||||
<uni-icons type="search" size="20" color="#999" />
|
||||
</view>
|
||||
|
||||
<!-- 房屋列表 -->
|
||||
<scroll-view class="list-container" scroll>
|
||||
<view class="house-card" v-for="(item, index) in filteredList" :key="index"
|
||||
@click="selectHouse(item,index)" :class="{ checked: selectedIndex === index }">
|
||||
<!-- 小区名称 -->
|
||||
<view class="community-name">
|
||||
<text class="title-line"></text>
|
||||
<text class="title-text">{{ item.community }}</text>
|
||||
</view>
|
||||
<!-- 选中对勾 -->
|
||||
<view class="check-icon" :class="{ checked: selectedIndex === index }"></view>
|
||||
<!-- 房屋信息 -->
|
||||
<view class="info-row">
|
||||
<text class="info-label">房间号</text>
|
||||
<text class="info-value">{{ item.roomNo }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">业主</text>
|
||||
<text class="info-value">{{ item.owner }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">房屋状态</text>
|
||||
<text class="info-value status-text" :style="{ color: statusColor[item.status] }">
|
||||
{{ item.status }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部确定绑定按钮 -->
|
||||
<view class="bottom-btn">
|
||||
<button class="confirm-btn" @click="confirmBind">确定绑定</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
// 过滤后的列表（搜索功能）
|
||||
filteredList() {
|
||||
this.selectedIndex = -1
|
||||
if (!this.searchKey.trim()) {
|
||||
return this.houseList
|
||||
}
|
||||
return this.houseList.filter(item =>
|
||||
item.community.includes(this.searchKey.trim())
|
||||
)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
searchKey: "",
|
||||
selectedId: '',
|
||||
selectedName: '',
|
||||
selectedIndex: -1, // 当前选中的索引
|
||||
// 房屋状态颜色映射
|
||||
statusColor: {
|
||||
自住: "#409EFF",
|
||||
闲置: "#67C23A",
|
||||
租赁: "#E6A23C",
|
||||
其他: "#909399",
|
||||
},
|
||||
// 模拟房屋数据
|
||||
houseList: [{
|
||||
id: 1,
|
||||
community: "北境碧桂园小区（别墅）",
|
||||
roomNo: "2号楼2层",
|
||||
owner: "张三",
|
||||
status: "自住",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
community: "北境碧桂园小区（别墅）",
|
||||
roomNo: "2号楼1层",
|
||||
owner: "张三",
|
||||
status: "闲置",
|
||||
},
|
||||
],
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 搜索输入事件
|
||||
onSearch() {
|
||||
// 实时过滤，computed 自动处理
|
||||
},
|
||||
|
||||
// 选择房屋
|
||||
selectHouse(item, index) {
|
||||
this.selectedIndex = index;
|
||||
this.selectedId = item.id;
|
||||
this.selectedName = item.community + item.roomNo;
|
||||
},
|
||||
|
||||
// 确定绑定
|
||||
confirmBind() {
|
||||
if (this.selectedIndex === -1) {
|
||||
return uni.showToast({
|
||||
title: "请先选择房屋",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: "确认选择",
|
||||
content: `确定绑定 ${this.selectedName} 吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '绑定中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '绑定成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
uni.setStorageSync('bindHouseId', this.selectedId);
|
||||
uni.setStorageSync('bindHouseName', this.selectedName);
|
||||
uni.setStorageSync('checkType', '停车场');
|
||||
uni.removeStorageSync('paringLotId');
|
||||
uni.removeStorageSync('paringLotName');
|
||||
uni.removeStorageSync('parkingSpaceId');
|
||||
uni.removeStorageSync('parkingSpaceName');
|
||||
this.goNext();
|
||||
}, 2500);
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
goNext() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/selectParingLot',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addParkingSpace',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
overflow: hidden;
|
||||
// height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 通用输入框样式 */
|
||||
.input-item {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 确定按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 页面整体 */
|
||||
|
||||
|
||||
/* ====================== 搜索框样式（1:1还原） ====================== */
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F3F3F3;
|
||||
border-radius: 20rpx;
|
||||
margin: 0px 0px 20rpx 0rpx;
|
||||
padding: 0 30rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* ====================== 列表容器 ====================== */
|
||||
.list-container {}
|
||||
|
||||
/* ====================== 房屋卡片 ====================== */
|
||||
.house-card {
|
||||
border: 1rpx solid #e5e5e5;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.house-card.checked {
|
||||
background: #f4f7ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.community-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 8rpx;
|
||||
height: 36rpx;
|
||||
background-color: #007AFF;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 160rpx;
|
||||
font-size: 28rpx;
|
||||
/* font-weight: 600; */
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
/* font-weight: 600; */
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ====================== 选中对勾 ====================== */
|
||||
.check-icon {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 46rpx;
|
||||
transform: translateY(-50%);
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #ccc;
|
||||
/* background-color: #ccc; */
|
||||
}
|
||||
|
||||
.check-icon::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 选中状态：蓝色背景 */
|
||||
.check-icon.checked {
|
||||
background-color: #1677ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
border-radius: 12rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 8rpx;
|
||||
height: 36rpx;
|
||||
background-color: #007AFF;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,457 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="车辆详情" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 车辆信息 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<view class="title-line"></view>
|
||||
车辆信息
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车牌号</text>
|
||||
<text class="info-value">{{form.plateNo}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车辆品牌</text>
|
||||
<text class="info-value">{{form.carBrandName}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车辆型号</text>
|
||||
<text class="info-value">{{form.model}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车身颜色</text>
|
||||
<text class="info-value">{{form.color}}</text>
|
||||
</view>
|
||||
<!-- 车辆图片区-->
|
||||
<view class="photo-row">
|
||||
<text class="info-label" style="width: 200rpx;">车辆图片</text>
|
||||
<view class="photo-list">
|
||||
<image class="photo-item" :src="form.carImg"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="bottom-btn-wrap">
|
||||
<!-- 仅认证失败显示修改按钮 -->
|
||||
<button class="btn-modify" @click="clickUpdate()">
|
||||
修改
|
||||
</button>
|
||||
<button class="btn-delete" @click="onDelete">
|
||||
删除
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.currentStatus = option.status;
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
currentStatus: '',
|
||||
// 可通过页面传参动态修改状态：success / pending / fail
|
||||
id: undefined,
|
||||
form: {
|
||||
plateNo: '北境碧桂园小区小区',
|
||||
carBrandName: '101栋2单元402',
|
||||
model: '张三',
|
||||
color: '租赁',
|
||||
carImg: 'http://47.104.199.163:9090/images/propertyImgs/carImg.png',
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 修改按钮事件（仅认证失败显示）
|
||||
clickUpdate() {
|
||||
uni.setStorageSync('operationType', 'update')
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addCar?id=' + this.id,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除按钮事件
|
||||
onDelete() {
|
||||
uni.showModal({
|
||||
title: "确认删除",
|
||||
content: "确认删除此车辆信息吗?",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/myCarIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* 顶部状态区 */
|
||||
.status-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.icon-success {
|
||||
background-color: #e6f7ee;
|
||||
border: 4rpx solid #00b42a;
|
||||
}
|
||||
|
||||
.icon-pending {
|
||||
background-color: #e6f0ff;
|
||||
border: 4rpx solid #1677ff;
|
||||
}
|
||||
|
||||
.icon-fail {
|
||||
background-color: #ffe7e7;
|
||||
border: 4rpx solid #f53f3f;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.icon-success .icon-text {
|
||||
color: #00b42a;
|
||||
}
|
||||
|
||||
.icon-pending .icon-text {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.icon-fail .icon-text {
|
||||
color: #f53f3f;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 步骤条 */
|
||||
.step-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-item.active .step-circle {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
.step-item:not(.active) .step-circle {
|
||||
background-color: #e5e5e5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 4rpx;
|
||||
background-color: #e5e5e5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-line.active {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 8rpx;
|
||||
height: 28rpx;
|
||||
background-color: #1677ff;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 24rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 180rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
color: #ff7d00;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 身份证照片区 */
|
||||
.photo-row {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
width: 100%;
|
||||
/* height: 170px; */
|
||||
background-color: #f0f4ff;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 底部按钮区 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.btn-modify {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #fff;
|
||||
color: #f53f3f;
|
||||
border: 1rpx solid #f53f3f;
|
||||
font-size: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.btn-delete.delete-only {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,296 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="更改手机号码" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<scroll-view class="page" scroll-y>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-container">
|
||||
<!-- 手机号输入框（带+86前缀） -->
|
||||
<view class="input-group phone-input">
|
||||
<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/phoneIcon.png"></image>
|
||||
<input class="input-item" type="number" v-model="phone" placeholder="请输入手机号码"
|
||||
placeholder-class="input-placeholder" maxlength="11" />
|
||||
</view>
|
||||
|
||||
<!-- 验证码输入框（带获取验证码按钮） -->
|
||||
<view class="input-group code-input" style="padding: 0 0 0 20rpx;">
|
||||
<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/codeIcon.png">️</image>
|
||||
|
||||
<input class="input-item code-item" type="number" v-model="code" placeholder="请输入验证码"
|
||||
placeholder-class="input-placeholder" maxlength="6" />
|
||||
<button class="code-btn" :disabled="countdown > 0" @click="getCode">
|
||||
{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<view class="bottom-btn">
|
||||
<button class="submit-btn" @click="onSubmit">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除定时器
|
||||
if (this.timer) clearInterval(this.timer)
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
phone: '',
|
||||
code: '',
|
||||
countdown: 0,
|
||||
timer: null,
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
// 1. 手机号校验
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
if (!this.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
uni.showToast({
|
||||
title: '手机号格式不正确',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 2. 模拟发送验证码（替换为实际接口）
|
||||
uni.showLoading({
|
||||
title: '发送中...'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
// 3. 开启60秒倒计时
|
||||
this.countdown = 60
|
||||
this.timer = setInterval(() => {
|
||||
if (this.countdown <= 1) {
|
||||
clearInterval(this.timer)
|
||||
this.countdown = 0
|
||||
return
|
||||
}
|
||||
this.countdown--
|
||||
}, 1000)
|
||||
}, 800)
|
||||
},
|
||||
|
||||
// 提交修改
|
||||
onSubmit() {
|
||||
// 1. 基础校验
|
||||
const phoneReg = /^1[3-9]\d{9}$/
|
||||
if (!this.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!phoneReg.test(this.phone)) {
|
||||
uni.showToast({
|
||||
title: '手机号格式不正确',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.code) {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '更换中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '更换成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/settingIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
/* padding: 60rpx 30rpx; */
|
||||
}
|
||||
|
||||
/* 输入框组（手机号+验证码行） */
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
/* border: 1rpx solid #dcdcdc; */
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width:50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.phone-input .input-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 88rpx;
|
||||
border: none;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 验证码输入框 */
|
||||
.code-input .code-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 88rpx;
|
||||
border: none;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: #2F77FD;
|
||||
border: none;
|
||||
padding: 0;
|
||||
line-height: 88rpx;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.code-btn[disabled] {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 通用输入框样式 */
|
||||
.input-item {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 确定按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,244 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="修改密码" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<scroll-view class="page" scroll-y>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-container">
|
||||
<!-- 原密码 -->
|
||||
<input class="input-item" type="password" v-model="oldPwd" placeholder="请输入原密码"
|
||||
placeholder-class="input-placeholder" />
|
||||
|
||||
<!-- 新密码 -->
|
||||
<input class="input-item" type="password" v-model="newPwd" placeholder="请输入新密码"
|
||||
placeholder-class="input-placeholder" />
|
||||
|
||||
<!-- 确认新密码 -->
|
||||
<input class="input-item" type="password" v-model="confirmPwd" placeholder="请再次输入新密码"
|
||||
placeholder-class="input-placeholder" />
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<view class="bottom-btn">
|
||||
<button class="submit-btn" @click="onSubmit">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
oldPwd: '',
|
||||
newPwd: '',
|
||||
confirmPwd: '',
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
// 提交修改
|
||||
onSubmit() {
|
||||
// 1. 基础校验
|
||||
if (!this.oldPwd) {
|
||||
uni.showToast({
|
||||
title: '请输入原密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.newPwd) {
|
||||
uni.showToast({
|
||||
title: '请输入新密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.newPwd !== this.confirmPwd) {
|
||||
uni.showToast({
|
||||
title: '两次密码不一致',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '修改中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
|
||||
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/settingIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
/* padding: 40rpx 30rpx; */
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.input-item {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
/* border: 1rpx solid #dcdcdc; */
|
||||
border-radius: 8rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 占位符样式 */
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 确定按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,542 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="房屋详情" left-icon="left" @clickLeft="goBack" :border="false" backgroundColor="transparent">
|
||||
</uni-nav-bar>
|
||||
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 顶部状态区 -->
|
||||
<view class="status-header" v-if="statusConfig">
|
||||
<view class="status-icon" :class="statusConfig.iconClass">
|
||||
<text class="icon-text">{{ statusConfig.iconText }}</text>
|
||||
</view>
|
||||
<text class="status-title">{{ statusConfig.title }}</text>
|
||||
|
||||
<!-- 步骤条 -->
|
||||
<view class="step-bar">
|
||||
<view class="step-item" v-for="(step, index) in stepList" :key="index"
|
||||
:class="{ active: index < currentStep, done: index < currentStep - 1 }">
|
||||
<view class="step-circle">{{ index + 1 }}</view>
|
||||
<text class="step-text">{{ step }}</text>
|
||||
<view class="step-line" v-if="index < stepList.length - 1"
|
||||
:class="{ active: index < currentStep - 1 }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房屋信息 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<view class="title-line"></view>
|
||||
房屋信息
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">小区</text>
|
||||
<text class="info-value">{{form.community}}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">房间号</text>
|
||||
<text class="info-value">{{form.houseNumber}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">业主</text>
|
||||
<text class="info-value">{{form.owner}}</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>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 住户信息 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<view class="title-line"></view>
|
||||
住户信息
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">住户</text>
|
||||
<text class="info-value">{{form.resident}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">房间号</text>
|
||||
<text class="info-value">{{form.gender}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">证件类型</text>
|
||||
<text class="info-value">{{form.documentType}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">证件号码</text>
|
||||
<text class="info-value">{{form.documentNumber}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">与业主关系</text>
|
||||
<text class="info-value">{{form.relationship}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">手机号码</text>
|
||||
<text class="info-value">{{form.phoneNum}}</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>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="bottom-btn-wrap">
|
||||
<!-- 仅认证失败显示修改按钮 -->
|
||||
<button v-if="currentStatus === 'fail'" class="btn-modify" @click="clickUpdate()">
|
||||
修改
|
||||
</button>
|
||||
<button class="btn-delete" :class="{ 'delete-only': currentStatus !== 'fail' }" @click="onDelete">
|
||||
删除
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
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: {
|
||||
success: {
|
||||
title: "房屋认证成功",
|
||||
iconClass: "icon-success",
|
||||
iconText: "✓",
|
||||
currentStep: 4,
|
||||
},
|
||||
pending: {
|
||||
title: "房屋审核中，请耐心等待",
|
||||
iconClass: "icon-pending",
|
||||
iconText: "⏳",
|
||||
currentStep: 3,
|
||||
},
|
||||
fail: {
|
||||
title: "房屋认证失败，请重新提交",
|
||||
iconClass: "icon-fail",
|
||||
iconText: "✕",
|
||||
currentStep: 3,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 修改按钮事件（仅认证失败显示）
|
||||
clickUpdate() {
|
||||
uni.setStorageSync('operationType', 'update')
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addHouse?id=' + this.id + '&sourcePage=' + 'addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除按钮事件
|
||||
onDelete() {
|
||||
uni.showModal({
|
||||
title: "确认删除",
|
||||
content: "确认删除此房屋信息吗?",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/myHouseIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* 顶部状态区 */
|
||||
.status-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 20rpx 0px 20rpx;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.icon-success .icon-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-pending .icon-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-fail .icon-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 步骤条 */
|
||||
.step-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-item.active .step-circle {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
.step-item:not(.active) .step-circle {
|
||||
background-color: #e5e5e5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 4rpx;
|
||||
background-color: #e5e5e5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-line.active {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
border-radius: 8rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 8rpx;
|
||||
height: 28rpx;
|
||||
background-color: #1677ff;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 24rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 180rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
color: #ff7d00;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 身份证照片区 */
|
||||
.photo-row {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 底部按钮区 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.btn-modify {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #fff;
|
||||
color: #f53f3f;
|
||||
border: 1rpx solid #f53f3f;
|
||||
font-size: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.btn-delete.delete-only {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,377 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="我的车辆" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<!-- 我的车辆列表 -->
|
||||
|
||||
<view class="car-item" v-for="(item, index) in carList" :key="index" @click="handleItemClick(item,index)">
|
||||
<!-- 左侧圆形占位 -->
|
||||
<image :src="item.imgSrc" mode="aspectFill" class="car-avatar" @error="item.imgSrc = defaultCarImg" />
|
||||
<!-- 中间车辆信息 -->
|
||||
<view class="car-info">
|
||||
<view>
|
||||
<view class="car-plate">{{ item.plate }}</view>
|
||||
<view class="car-model">{{ item.model }}·{{ item.color }}</view>
|
||||
</view>
|
||||
<view class="car-bindParkingSpace">{{ item.bindParkingSpace }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧状态标签 -->
|
||||
<view class="status-tag"
|
||||
:class="{ underReview: item.status === '审核中', unbound: item.status === '未绑定',bounded: item.status === '已绑定' }">
|
||||
{{ item.status }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部添加车辆按钮 -->
|
||||
<view class="bottom-btn">
|
||||
<button class="confirm-btn" @click="addCar">添加车辆</button>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
defaultCarImg: "http://47.104.199.163:9090/images/propertyImgs/defaultCarImg.png",
|
||||
searchKey: "",
|
||||
selectedId: '',
|
||||
selectedName: '',
|
||||
selectedIndex: -1, // 当前选中的索引
|
||||
|
||||
// 模拟车辆数据
|
||||
carList: [{
|
||||
id: '1',
|
||||
imgSrc: 'http://47.104.199.163:9090/images/propertyImgs/carImg.png',
|
||||
plate: "京A88888",
|
||||
model: "宝马X5",
|
||||
color: "白色",
|
||||
status: "未绑定",
|
||||
bindParkingSpace: "",
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
imgSrc: 'https://错误地址2.png',
|
||||
plate: "京A88888",
|
||||
model: "宝马X5",
|
||||
color: "白色",
|
||||
status: "已绑定",
|
||||
bindParkingSpace: "北境碧桂园小区小区地下停车场B2A区202",
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
imgSrc: 'https://错误地址3.png',
|
||||
plate: "京A88888",
|
||||
model: "宝马X5",
|
||||
color: "白色",
|
||||
status: "审核中",
|
||||
bindParkingSpace: "",
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 选择我的车辆
|
||||
handleItemClick(item, index) {
|
||||
uni.setStorageSync('operationType', 'update');
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/carDetail?id=' + item.id + '&status=' + item.status,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// 添加车辆
|
||||
addCar() {
|
||||
uni.setStorageSync('operationType', 'add');
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addCar',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/myIndex/myIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F3F8FD;
|
||||
overflow: hidden;
|
||||
// height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 表单容器 */
|
||||
.form-container {
|
||||
padding: 60rpx 30rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 通用输入框样式 */
|
||||
.input-item {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 确定按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 页面整体 */
|
||||
|
||||
/* ====================== 列表容器 ====================== */
|
||||
|
||||
|
||||
/* ====================== 我的车辆卡片 ====================== */
|
||||
/* 单个车辆项 */
|
||||
.car-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1rpx solid #e6e9ff;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
width: calc(100% - 44rpx);
|
||||
}
|
||||
|
||||
.car-item.checked {
|
||||
background: #f4f7ff;
|
||||
/* 浅蓝色背景 */
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
/* 左侧圆形头像占位 */
|
||||
.car-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f4ff;
|
||||
margin-right: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 中间信息区域 */
|
||||
.car-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 车牌号 */
|
||||
.car-plate {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
/* 车型+颜色 */
|
||||
.car-model {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.car-bindParkingSpace {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
/* 强制不换行 */
|
||||
overflow: hidden;
|
||||
/* 超出部分隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
/* 超出显示省略号 */
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 24rpx;
|
||||
padding:6rpx14rpx;
|
||||
border-radius:6rpx;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
|
||||
/* 未绑定状态 */
|
||||
.status-tag.unbound {
|
||||
/* background-color: #e6f7e6; */
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 已绑定状态） */
|
||||
.status-tag.bounded {
|
||||
color: #2F77FD;
|
||||
}
|
||||
|
||||
/* 审核中 */
|
||||
.status-tag.underReview {
|
||||
/* background-color: #F8DDBD; */
|
||||
color: #FF8F40;
|
||||
}
|
||||
|
||||
|
||||
/* ====================== 底部按钮 ====================== */
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 34rpx;
|
||||
border: none;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,397 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="我的房屋" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
<!-- -->
|
||||
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 房屋列表 v-for 渲染 -->
|
||||
<view class="house-list">
|
||||
<view class="house-card" v-for="(item, index) in houseList" :key="index" @click="tapHouse(item)">
|
||||
<!-- 标题 + 状态 -->
|
||||
<view class="card-header">
|
||||
<view class="title-box">
|
||||
<text class="tag-default" v-if="item.isDefault">默认</text>
|
||||
<text class="house-name">{{ item.houseName }}</text>
|
||||
</view>
|
||||
<text class="status-tag" :class="item.statusClass">{{ item.statusText }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 房屋信息 -->
|
||||
<view class="card-body">
|
||||
<view class="row">
|
||||
<text class="label">房间号</text>
|
||||
<view class="value-box">
|
||||
<text class="value">{{ item.roomNo }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">业主</text>
|
||||
<text class="value">{{ item.owner }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">房屋状态</text>
|
||||
<text class="value">{{ item.houseStatus }}</text>
|
||||
</view>
|
||||
<view class="defaultBox" v-if="item.statusText=='认证成功'&&!item.isDefault">
|
||||
<text class="set-default">设为默认</text>
|
||||
<switch class="no-cross-switch" :checked="item.isDefault" color="#1677ff"
|
||||
@change="onSwitchChange($event,index)" @click.stop />
|
||||
</view>
|
||||
<!-- <text v-if="item.showSetDefault" class="set-default"
|
||||
@click="setDefault(item.id)">设为默认</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部添加按钮 -->
|
||||
<view class="bottom-btn">
|
||||
<button class="add-btn" @click="addHouse">添加房屋</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
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",
|
||||
|
||||
showSetDefault: false,
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 开关切换
|
||||
onSwitchChange(e, i) {
|
||||
|
||||
uni.showLoading({
|
||||
title: '设置中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
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.setStorageSync('houseIsDefault', e.detail.value)
|
||||
}, 2500);
|
||||
},
|
||||
tapHouse(item) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/houseDetail?id=' + item.id + '&statusClass=' + item.statusClass,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
addHouse() {
|
||||
uni.setStorageSync('operationType', 'add');
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/myIndex/myIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
// background: #F3F8FD;
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.house-list {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
|
||||
.house-card {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.card-header {
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.house-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tag-default {
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding:2rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 28rpx;
|
||||
padding: 6rpx 14rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.success {
|
||||
/* background: #e6f7ee; */
|
||||
color: #2F77FD;
|
||||
}
|
||||
|
||||
.pending {
|
||||
/* background: #fff4e4; */
|
||||
color: #09C2BD;
|
||||
}
|
||||
|
||||
.fail {
|
||||
/* background: #ffe7e7; */
|
||||
color: #E34D59;
|
||||
}
|
||||
|
||||
/* 内容行 */
|
||||
.card-body {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100px;
|
||||
font-size: 28rpx;
|
||||
|
||||
/* color: #666; */
|
||||
}
|
||||
|
||||
.value-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.defaultBox {
|
||||
margin-top:10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 99 !important;
|
||||
}
|
||||
|
||||
.set-default {
|
||||
color: #222222;
|
||||
/* font-weight: 600; */
|
||||
font-size: 32rpx;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/* 去掉 switch 内部的 × 和 √ 图标 */
|
||||
uni-switch::before,
|
||||
uni-switch::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 微信小程序专属去除 */
|
||||
wx-switch::before,
|
||||
wx-switch::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 支付宝/百度/抖音小程序兼容 */
|
||||
my-switch::before,
|
||||
swan-switch::before,
|
||||
tt-switch::before {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
::v-deep .uni-switch-input:before {
|
||||
background-color: #cccccd !important;
|
||||
}
|
||||
|
||||
/* 隐藏 switch 关闭状态的 × 号 */
|
||||
.no-cross-switch::before {
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
|
||||
.no-cross-switch {
|
||||
transform: scale(0.85);
|
||||
border-radius: 50rpx !important;
|
||||
}
|
||||
|
||||
.no-cross-switch>>>.uni-switch-input-checked {
|
||||
background-color: #007aff !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,333 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="我的车位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 车位列表 v-for 渲染 -->
|
||||
<view class="parkingSpace-list">
|
||||
<view class="parkingSpace-card" v-for="(item, index) in parkingSpaceList" :key="index"
|
||||
@click="tapParkingSpace(item)">
|
||||
<!-- 标题 + 状态 -->
|
||||
<view class="card-header">
|
||||
<view class="title-box">
|
||||
<text class="parkingSpace-name">{{ item.parkingSpaceName }}</text>
|
||||
</view>
|
||||
<text class="status-tag" :class="item.statusClass">{{ item.statusText }}</text>
|
||||
</view>
|
||||
<!-- 车位信息 -->
|
||||
<view class="card-body">
|
||||
<view class="left">
|
||||
<view class="line">
|
||||
<view class="row">
|
||||
<text class="label">车位楼层</text>
|
||||
<view class="value-box">
|
||||
<text class="value">{{ item.floorNo }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="row">
|
||||
<text class="label">车位编号</text>
|
||||
<text class="value">{{ item.parkingSpaceNumber }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="row">
|
||||
<text class="label">车位状态</text>
|
||||
<text class="value">{{ item.parkingSpaceStatus }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="row">
|
||||
<text class="label">绑定车辆</text>
|
||||
<text class="value">{{ item.bindCarNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<image src="http://47.104.199.163:9090/images/propertyImgs/myParkingSpace.png" class="imgItem" mode="widthFix">
|
||||
</image>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部添加按钮 -->
|
||||
<view class="bottom-btn">
|
||||
<button class="add-btn" @click="addParkingSpace">添加车位</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除定时器
|
||||
if (this.timer) clearInterval(this.timer)
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
parkingSpaceList: [{
|
||||
id: 1,
|
||||
parkingSpaceName: "北境碧桂园小区地下停车场",
|
||||
floorNo: "B2",
|
||||
parkingSpaceNumber: "202",
|
||||
parkingSpaceStatus: "租赁",
|
||||
bindCarNum: '京A88888',
|
||||
statusText: "认证成功",
|
||||
statusClass: "success",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
parkingSpaceName: "北境碧桂园小区停车场",
|
||||
floorNo: "B2",
|
||||
parkingSpaceNumber: "202",
|
||||
parkingSpaceStatus: "自用",
|
||||
bindCarNum: '京A88888',
|
||||
statusText: "认证中",
|
||||
statusClass: "pending",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
parkingSpaceName: "北境碧桂园小区停车场",
|
||||
floorNo: "2号楼1层",
|
||||
floorNo: "B2",
|
||||
parkingSpaceNumber: "202",
|
||||
parkingSpaceStatus: "闲置",
|
||||
bindCarNum: '京A88888',
|
||||
statusText: "认证失败",
|
||||
statusClass: "fail",
|
||||
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
tapParkingSpace(item) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/parkingSpaceDetail?id=' + item.id + '&statusClass=' + item.statusClass,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
addParkingSpace() {
|
||||
uni.setStorageSync('operationType', 'add');
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addParkingSpace',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/myIndex/myIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.parkingSpace-list {}
|
||||
|
||||
.parkingSpace-card {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.card-header {
|
||||
padding: 30rpx;
|
||||
/* border-bottom: 1rpx solid #f0f0f0; */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.parkingSpace-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tag {
|
||||
font-size: 24rpx;
|
||||
padding:4rpx16rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #2F77FD;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pending {
|
||||
background: #09C2BD;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fail {
|
||||
background: #E34D59;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 内容行 */
|
||||
.card-body {
|
||||
padding: 0rpx 30rpx 30rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
font-size: 28rpx;
|
||||
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.set-default {
|
||||
color: #007aff;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.left {}
|
||||
|
||||
.right {
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
.imgItem {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,523 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="车位详情" left-icon="left" @clickLeft="goBack" :border="false" backgroundColor="transparent">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<!-- 顶部状态区 -->
|
||||
<view class="status-header">
|
||||
<view class="status-icon" :class="statusConfig.iconClass">
|
||||
<text class="icon-text">{{ statusConfig.iconText }}</text>
|
||||
</view>
|
||||
<text class="status-title">{{ statusConfig.title }}</text>
|
||||
|
||||
<!-- 步骤条 -->
|
||||
<view class="step-bar">
|
||||
<view class="step-item" v-for="(step, index) in stepList" :key="index"
|
||||
:class="{ active: index < currentStep, done: index < currentStep - 1 }">
|
||||
<view class="step-circle">{{ index + 1 }}</view>
|
||||
<text class="step-text">{{ step }}</text>
|
||||
<view class="step-line" v-if="index < stepList.length - 1"
|
||||
:class="{ active: index < currentStep - 1 }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房屋信息 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<view class="title-line"></view>
|
||||
房屋信息
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">小区</text>
|
||||
<text class="info-value">{{form.community}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">停车场</text>
|
||||
<text class="info-value">{{form.parkingSpace}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车位编号</text>
|
||||
<text class="info-value">{{form.parkingSpaceNum}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车位状态</text>
|
||||
<text class="info-value"
|
||||
:style="{color: form.status === '自用' ? '#FF8F40' : form.status === '租赁' ? '#00aa00' : '#999' }">{{form.status}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 车辆信息 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">
|
||||
<view class="title-line"></view>
|
||||
车辆信息
|
||||
</view>
|
||||
<text class="unbind" @click="clickUnbind(item.id)">取消绑定</text>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车牌号</text>
|
||||
<text class="info-value">{{form.carNum}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车辆品牌</text>
|
||||
<text class="info-value">{{form.carBrand}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车辆型号</text>
|
||||
<text class="info-value">{{form.carModel}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">车辆颜色</text>
|
||||
<text class="info-value">{{form.carColor}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="bottom-btn-wrap">
|
||||
<!-- 仅认证失败显示修改按钮 -->
|
||||
<button class="btn-modify" @click="onModify">
|
||||
修改
|
||||
</button>
|
||||
<button class="btn-delete" :class="{ 'delete-only': currentStatus !== 'fail' }" @click="onDelete">
|
||||
删除
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
// 动态计算当前状态配置
|
||||
statusConfig() {
|
||||
return this.statusMap[this.currentStatus];
|
||||
},
|
||||
// 动态计算当前步骤
|
||||
currentStep() {
|
||||
return this.statusConfig.currentStep;
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.currentStatus = option.statusClass;
|
||||
// this.currentStatus = 'success';
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 可通过页面传参动态修改状态：success / pending / fail
|
||||
id: undefined,
|
||||
form: {
|
||||
community: "北境碧桂园小区小区",
|
||||
parkingSpace: "地下停车场",
|
||||
parkingSpaceNum: "02",
|
||||
status: '自用',
|
||||
carNum: "京A88888",
|
||||
carBrand: "宝马",
|
||||
carModel: "X5",
|
||||
carColor: "白色",
|
||||
},
|
||||
currentStatus: "",
|
||||
stepList: ["车位信息", "物业审核", "认证成功"],
|
||||
// 状态配置表
|
||||
statusMap: {
|
||||
success: {
|
||||
title: "车位认证成功",
|
||||
iconClass: "icon-success",
|
||||
iconText: "✓",
|
||||
currentStep: 3,
|
||||
},
|
||||
pending: {
|
||||
title: "车位审核中，请耐心等待",
|
||||
iconClass: "icon-pending",
|
||||
iconText: "⏳",
|
||||
currentStep: 2,
|
||||
},
|
||||
fail: {
|
||||
title: "车位认证失败，请重新提交",
|
||||
iconClass: "icon-fail",
|
||||
iconText: "✕",
|
||||
currentStep: 2,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
clickUnbind(id) {
|
||||
|
||||
},
|
||||
// 修改按钮事件（仅认证失败显示）
|
||||
onModify() {
|
||||
uni.setStorageSync('operationType', 'update');
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addParkingSpace?id=' + this.id + '&sourcePage=' + 'addParkingSpace',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
// 删除按钮事件
|
||||
onDelete() {
|
||||
uni.showModal({
|
||||
title: "确认删除",
|
||||
content: "确认删除此车位信息吗?",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/myParkingSpaceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 顶部状态区 */
|
||||
.status-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.icon-success {
|
||||
background-color: #2F77FD;
|
||||
}
|
||||
|
||||
.icon-pending {
|
||||
background-color: #2F77FD;
|
||||
}
|
||||
|
||||
.icon-fail {
|
||||
background-color: #E34D59;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.icon-success .icon-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-pending .icon-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-fail .icon-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 步骤条 */
|
||||
.step-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-item.active .step-circle {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
.step-item:not(.active) .step-circle {
|
||||
background-color: #e5e5e5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 4rpx;
|
||||
background-color: #e5e5e5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-line.active {
|
||||
background-color: #1677ff;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
/* margin: 0 30rpx 30rpx; */
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 8rpx;
|
||||
height: 28rpx;
|
||||
background-color: #1677ff;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 24rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 180rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
color: #ff7d00;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 身份证照片区 */
|
||||
.photo-row {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
background-color: #f0f4ff;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 底部按钮区 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.btn-modify {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #fff;
|
||||
color: #f53f3f;
|
||||
border: 1rpx solid #f53f3f;
|
||||
font-size: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.btn-delete.delete-only {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,475 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="'选择'+checkType" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent"
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
<scroll-view class="page" scroll-y>
|
||||
<!-- 楼栋网格列表 -->
|
||||
|
||||
<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)">
|
||||
<text class="building-text">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
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
|
||||
|
||||
}
|
||||
},
|
||||
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 + '吗?'
|
||||
uni.showModal({
|
||||
title: "确认选择",
|
||||
content: modalContent,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
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);
|
||||
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '选择成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goFreash();
|
||||
}, 2000);
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
goFreash() {
|
||||
console.log(this.checkType, '刷新页面');
|
||||
if (this.checkType != '户号') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/selectBuilding',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
},
|
||||
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');
|
||||
}
|
||||
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 网格布局：3列 */
|
||||
.building-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
/* 楼栋按钮 */
|
||||
.building-item {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f9f9f9;
|
||||
/* border: 1rpx solid #e5e5e5; */
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.building-item.active {
|
||||
background-color: #2F77FD;
|
||||
/* border-color: #1677ff; */
|
||||
}
|
||||
|
||||
.building-item.active .building-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 楼栋文字 */
|
||||
.building-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,213 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="车辆品牌" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<scroll-view class="page" scroll-y>
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-box">
|
||||
<input class="search-input" v-model="searchKey" placeholder="请输入名称"
|
||||
placeholder-class="input-placeholder" @input="onSearch" />
|
||||
<uni-icons type="search" size="20" color="#999" />
|
||||
</view>
|
||||
<!-- 小区列表 -->
|
||||
<view class="carBrand-list">
|
||||
<view class="carBrand-item" v-for="(item, index) in filteredList" :key="index"
|
||||
@click="selectCarBrand(item)">
|
||||
<text class="carBrand-name">{{ item.name }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
// 过滤后的列表（搜索功能）
|
||||
filteredList() {
|
||||
if (!this.searchKey.trim()) {
|
||||
return this.carBrandList
|
||||
}
|
||||
return this.carBrandList.filter(item =>
|
||||
item.name.includes(this.searchKey.trim())
|
||||
)
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
searchKey: '',
|
||||
carBrandList: [{
|
||||
id: 1,
|
||||
name: '宝马'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '奥迪'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 搜索输入事件
|
||||
onSearch() {
|
||||
// 实时过滤，computed 自动处理
|
||||
},
|
||||
|
||||
// 选择小区
|
||||
selectCarBrand(item) {
|
||||
uni.setStorageSync('carBrandId', item.id);
|
||||
uni.setStorageSync('carBrandName', item.name);
|
||||
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addCar',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
|
||||
},
|
||||
goBackAdd() {
|
||||
uni.removeStorageSync('carBrandId');
|
||||
uni.removeStorageSync('carBrandName');
|
||||
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addCar',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F3F3F3;
|
||||
border-radius: 20rpx;
|
||||
margin: 0rpx 0px 20rpx 0px;
|
||||
padding: 0 30rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 小区列表 */
|
||||
.carBrand-list {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.carBrand-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.carBrand-name {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,360 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="'选择'+checkType" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
<scroll-view class="page" scroll-y>
|
||||
<!-- 停车场网格列表 -->
|
||||
|
||||
<view class="parkingLot-grid">
|
||||
<view class="parkingLot-item"
|
||||
:class="{ active:(checkType=='停车场'&& selectedParkingLot === item.id)||(checkType=='车位编号'&& selectedParkingSpace === item.id)}"
|
||||
v-for="(item, index) in dataList" :key="index" @click="selectedParking(item)">
|
||||
<text class="parkingLot-text">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {},
|
||||
mounted() {
|
||||
|
||||
if (this.checkType == '停车场') {
|
||||
this.dataList = this.parkingLotList
|
||||
|
||||
} else if (this.checkType == '车位编号') {
|
||||
this.dataList = this.parkingSpaceList
|
||||
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
checkType: uni.getStorageSync('checkType'),
|
||||
dataList: [],
|
||||
// 停车场列表（可动态生成/接口返回）
|
||||
parkingLotList: [{
|
||||
id: 1,
|
||||
name: '地上停车场'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '地下停车场'
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
parkingSpaceList: [{
|
||||
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'
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
// 选中的停车场
|
||||
selectedParkingLot: uni.getStorageSync('parkingLotId'),
|
||||
// 选中的车位编号
|
||||
selectedParkingSpace: uni.getStorageSync('parkingSpaceId'),
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectedParking(item) {
|
||||
if (this.checkType == '停车场') {
|
||||
this.selectedParkingLot = item.id
|
||||
} else if (this.checkType == '车位编号') {
|
||||
this.selectedParkingSpace = item.id
|
||||
|
||||
}
|
||||
let modalContent = '确认选择此' + this.checkType + '吗?'
|
||||
uni.showModal({
|
||||
title: "确认选择",
|
||||
content: modalContent,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '选择中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '选择成功',
|
||||
icon: 'success'
|
||||
});
|
||||
if (this.checkType == '停车场') {
|
||||
uni.setStorageSync('parkingLotId', item.id);
|
||||
uni.setStorageSync('parkingLotName', item.name);
|
||||
uni.removeStorageSync('parkingSpaceId');
|
||||
uni.removeStorageSync('parkingSpaceName');
|
||||
uni.setStorageSync('checkType', '车位编号');
|
||||
} else if (this.checkType == '车位编号') {
|
||||
uni.setStorageSync('parkingSpaceId', item.id);
|
||||
uni.setStorageSync('parkingSpaceName', item.name);
|
||||
}
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goFreash()
|
||||
}, 2500);
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
goFreash() {
|
||||
if (this.checkType != '车位编号') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/selectParingLot',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addParkingSpace',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
},
|
||||
goBackAdd() {
|
||||
if (this.checkType == '停车场') {
|
||||
uni.removeStorageSync('parkingLotId');
|
||||
uni.removeStorageSync('parkingLotName');
|
||||
} else if (this.checkType == '车位编号') {
|
||||
uni.removeStorageSync('parkingSpaceId');
|
||||
uni.removeStorageSync('parkingSpaceName');
|
||||
}
|
||||
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addParkingSpace',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 网格布局：3列 */
|
||||
.parkingLot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
/* 停车场按钮 */
|
||||
.parkingLot-item {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border: 1rpx solid #e5e5e5;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.parkingLot-item.active {
|
||||
background-color: #1677ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.parkingLot-item.active .parkingLot-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 停车场文字 */
|
||||
.parkingLot-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}.status-bar{
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,267 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="选择小区" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<scroll-view class="page" scroll-y>
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-box">
|
||||
<input class="search-input" v-model="searchKey" placeholder="请输入名称"
|
||||
placeholder-class="input-placeholder" @input="onSearch" />
|
||||
<uni-icons type="search" size="20" color="#999" />
|
||||
</view>
|
||||
<!-- 小区列表 -->
|
||||
<view class="community-list">
|
||||
<view class="community-item" v-for="(item, index) in filteredList" :key="index"
|
||||
@click="selectCommunity(item)">
|
||||
<text class="community-name">{{ item.name }}</text>
|
||||
<text class="item-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
// 过滤后的列表（搜索功能）
|
||||
filteredList() {
|
||||
if (!this.searchKey.trim()) {
|
||||
return this.communityList
|
||||
}
|
||||
return this.communityList.filter(item =>
|
||||
item.name.includes(this.searchKey.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: '西境碧桂园小区'
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 搜索输入事件
|
||||
onSearch() {
|
||||
// 实时过滤，computed 自动处理
|
||||
},
|
||||
|
||||
// 选择小区
|
||||
selectCommunity(item) {
|
||||
uni.setStorageSync('communityId', item.id);
|
||||
uni.setStorageSync('communityName', item.name);
|
||||
uni.setStorageSync('checkType', '楼栋');
|
||||
uni.removeStorageSync('buildingId');
|
||||
uni.removeStorageSync('buildingName');
|
||||
uni.removeStorageSync('unitId');
|
||||
uni.removeStorageSync('unitName');
|
||||
uni.removeStorageSync('floorId');
|
||||
uni.removeStorageSync('floorName');
|
||||
uni.removeStorageSync('houseNumberId');
|
||||
uni.removeStorageSync('houseNumberName');
|
||||
|
||||
uni.removeStorageSync('bindHouseId');
|
||||
uni.removeStorageSync('bindHouseName');
|
||||
uni.removeStorageSync('parkingLotId');
|
||||
uni.removeStorageSync('parkingLotName');
|
||||
uni.removeStorageSync('parkingSpaceId');
|
||||
uni.removeStorageSync('parkingSpaceName');
|
||||
|
||||
if (this.sourcePage == 'addHouse') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/selectBuilding',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (this.sourcePage == 'addParkingSpace') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/bindHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
goBackAdd() {
|
||||
uni.removeStorageSync('communityId');
|
||||
uni.removeStorageSync('communityName');
|
||||
if (this.sourcePage == 'addHouse') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addHouse',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (this.sourcePage == 'addParkingSpace') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/addParkingSpace',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f6f6f6;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
/* .bottom-btn {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
} */
|
||||
|
||||
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F3F3F3;
|
||||
border-radius: 20rpx;
|
||||
margin: 0rpx 0px 20rpx 0px;
|
||||
padding: 0 30rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 小区列表 */
|
||||
.community-list {
|
||||
/* padding: 0 30rpx; */
|
||||
}
|
||||
|
||||
.community-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.community-name {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,306 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="设置" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
<scroll-view class="page" scroll-y>
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<switch class="no-cross-switch" v-else-if="item.type === 'switch'" :checked="item.checked"
|
||||
@change="onSwitchChange(item, $event)" />
|
||||
|
||||
<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: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
message: '',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
cacheSize: 0,
|
||||
settingList: [{
|
||||
title: '更改手机号码',
|
||||
type: 'arrow'
|
||||
},
|
||||
{
|
||||
title: '修改密码',
|
||||
type: 'arrow'
|
||||
},
|
||||
{
|
||||
title: '消息通知',
|
||||
type: 'switch',
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: '清除缓存',
|
||||
type: 'text',
|
||||
value: '9.2M'
|
||||
},
|
||||
{
|
||||
title: '升级版本',
|
||||
type: 'text',
|
||||
value: '当前版本 2.9.8',
|
||||
valueClass: 'item-version'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
onItemClick(item) {
|
||||
// console.log('点击了：', item.title,item.title == '更改手机号码')
|
||||
if (item.title == '更改手机号码') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/changePhone',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (item.title == '修改密码') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/changePwd',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (item.title == '清除缓存') {
|
||||
uni.clearStorageSync();
|
||||
this.message = '清除成功'
|
||||
this.settingList[3].value = '0M'
|
||||
uni.showLoading({
|
||||
title: '清除中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '清除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
|
||||
}, 2500);
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出当前账号吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.message = '退出成功'
|
||||
uni.showLoading({
|
||||
title: '退出中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '退出成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 登出成功后跳转回登录页
|
||||
uni.hideLoading();
|
||||
|
||||
|
||||
|
||||
}, 2500);
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
onSwitchChange(item, e) {
|
||||
item.checked = e.detail.value
|
||||
},
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/myIndex/myIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</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;
|
||||
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;
|
||||
border-bottom:2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 标题文字 */
|
||||
.item-title {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 右侧区域（文字+箭头） */
|
||||
.item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
/* 右侧数值/版本文字 */
|
||||
.item-value {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item-version {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 右侧箭头 */
|
||||
.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;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
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 {
|
||||
transform: scale(0.85);
|
||||
border-radius: 50rpx !important;
|
||||
}
|
||||
|
||||
.no-cross-switch>>>.uni-switch-input-checked {
|
||||
background-color: #007aff !important;
|
||||
}
|
||||
</style>
|
||||
@@ -42,105 +42,90 @@
|
||||
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
const list = ref([{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/house.png",
|
||||
title: "我的房屋"
|
||||
},
|
||||
computed: {
|
||||
|
||||
{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/user.png",
|
||||
title: "住户管理",
|
||||
// desc: "您可以在这里添加家人、朋友、租客~"
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/parking.png",
|
||||
title: "我的车位"
|
||||
},
|
||||
onShow() {
|
||||
|
||||
{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/car.png",
|
||||
title: "我的车辆"
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
loginName: "wangh",
|
||||
phoneNum: '156*****1212',
|
||||
list: [{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/house.png",
|
||||
title: "我的房屋"
|
||||
},
|
||||
{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/user.png",
|
||||
title: "住户管理",
|
||||
// desc: "您可以在这里添加家人、朋友、租客~"
|
||||
},
|
||||
{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/parking.png",
|
||||
title: "我的车位"
|
||||
},
|
||||
{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/car.png",
|
||||
title: "我的车辆"
|
||||
},
|
||||
{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/setting.png",
|
||||
title: "设置"
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
onItemClick(item) {
|
||||
if (item.title == '我的房屋') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/myHouseIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (item.title == '住户管理') {
|
||||
// uni.redirectTo({
|
||||
// url: '/pages/my/changePwd',
|
||||
// success: res => {},
|
||||
// fail: () => {},
|
||||
// complete: () => {}
|
||||
// });
|
||||
} else if (item.title == '我的车位') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/myParkingSpaceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (item.title == '我的车辆') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/myCarIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (item.title == '设置') {
|
||||
this.goSetting()
|
||||
}
|
||||
},
|
||||
goSetting() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/settingIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/setting.png",
|
||||
title: "设置"
|
||||
}
|
||||
])
|
||||
const loginName = ref("wangh")
|
||||
const phoneNum = ref('156*****1212')
|
||||
|
||||
// --方法----
|
||||
const goToDetail = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pageSubPack/notice-list/noticeListDetails'
|
||||
})
|
||||
}
|
||||
// 返回
|
||||
const onItemClick = (item) => {
|
||||
if (item.title == '我的房屋') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/myHouseIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (item.title == '住户管理') {
|
||||
// uni.redirectTo({
|
||||
// url: '/pageSubPack/my/changePwd',
|
||||
// success: res => {},
|
||||
// fail: () => {},
|
||||
// complete: () => {}
|
||||
// });
|
||||
} else if (item.title == '我的车位') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/myParkingSpaceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (item.title == '我的车辆') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/myCarIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (item.title == '设置') {
|
||||
goSetting()
|
||||
}
|
||||
}
|
||||
const goSetting = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/my/settingIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
// background: #fff;
|
||||
|
||||
@@ -1,517 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="card-box">
|
||||
<!-- 头部水费标题+水滴图标 -->
|
||||
<view class="card-header">
|
||||
<image class="iconStyle"
|
||||
:src="paymentType=='水'?'http://47.104.199.163:9090/images/propertyImgs/water.png':'http://47.104.199.163:9090/images/propertyImgs/electric.png'">
|
||||
</image>
|
||||
<text class="card-title">{{paymentType+'费'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="line"></view>
|
||||
|
||||
<!-- 设备号输入项 -->
|
||||
<view class="input-item">
|
||||
<view class="input-label">缴费设备号</view>
|
||||
<view class="input-wrap">
|
||||
<!-- 输入框 -->
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部分割线 -->
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部协议和提交按钮 -->
|
||||
<view class="bottom-area">
|
||||
<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>
|
||||
|
||||
|
||||
<button class="submit-btn" @click="goPay">
|
||||
提交
|
||||
</button>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paymentType: uni.getStorageSync('addPaymentType'),
|
||||
deviceNo: '', // 设备号
|
||||
isAgree: false, // 是否同意协议
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
handleAgreeChange(e) {
|
||||
// e.detail.value 是数组，有值 = 选中，空 = 未选中
|
||||
this.isAgree = e.detail.value.length > 0
|
||||
},
|
||||
// 扫码获取设备号 【uniapp+微信小程序双端兼容】
|
||||
async scanCode() {
|
||||
try {
|
||||
const res = await uni.scanCode({
|
||||
onlyFromCamera: false, // 允许相册+相机
|
||||
scanType: ['qrCode', 'barCode'] // 支持二维码+条形码
|
||||
})
|
||||
// 扫码结果赋值给设备号输入框
|
||||
this.deviceNo = res.result
|
||||
} catch (err) {
|
||||
console.log('扫码取消/失败', err)
|
||||
}
|
||||
},
|
||||
// 缴费提交
|
||||
goPay() {
|
||||
if (!this.deviceNo) {
|
||||
uni.showToast({
|
||||
title: '请输入设备号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.isAgree) {
|
||||
uni.showToast({
|
||||
title: '请同意协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: '确认提交',
|
||||
content: '确认要提交吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goNext()
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
goNext() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/addPaymentSuccess',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* 白色卡片容器 */
|
||||
.card-box {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
/* 头部水费标题 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.scanTheCodeIconStyle {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.water-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
/* 输入项整体 */
|
||||
.input-item {
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* 输入框+扫码图标横向布局 */
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 占位符样式 */
|
||||
.input-placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 底部协议+按钮区域 */
|
||||
.bottom-area {
|
||||
margin-top: 60rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
/* 协议勾选 */
|
||||
.agree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.radio-box {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.agree-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.agree-link {
|
||||
font-size: 28rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
/* 立即缴费按钮 */
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #007aff;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pay-text {
|
||||
font-size: 36rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 白色卡片容器 */
|
||||
.card-box {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
/* 头部水费标题 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.water-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
/* 输入项整体 */
|
||||
.input-item {
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* 输入框+扫码图标横向布局 */
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 占位符样式 */
|
||||
.input-placeholder {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
/* 右边扫码图标 text标签直接用 双端不乱码 */
|
||||
.scan-icon {
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 底部协议+按钮区域 */
|
||||
.bottom-area {
|
||||
margin-top: 60rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
/* 协议勾选 */
|
||||
.agree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.radio-box {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.agree-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.agree-link {
|
||||
font-size: 28rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
/* 立即缴费按钮 */
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #007aff;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pay-text {
|
||||
font-size: 36rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
/* 底部区域 */
|
||||
.bottom-area {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.agreement checkbox {
|
||||
transform: scale(0.8);
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
font-size: 28rpx;
|
||||
color: #4080ff;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #4080ff;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
background-color: #a0c4ff;
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
@@ -1,545 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="container">
|
||||
<!-- 顶部蓝色标题栏 -->
|
||||
<view class="header-card">
|
||||
<view class="header-icon">
|
||||
<image class="iconStyle"
|
||||
:src="paymentType=='燃气'?'http://47.104.199.163:9090/images/propertyImgs/gas.png':'http://47.104.199.163:9090/images/propertyImgs/heating.png'">
|
||||
></image>
|
||||
</view>
|
||||
<text class="header-title">{{paymentType+'费'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 缴费信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="form-item" @click="goToChange()">
|
||||
<text class="label">缴费单位</text>
|
||||
<text class="company-name">XXXXXXXX燃气有限公司</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">缴费单位</text>
|
||||
<view class="input-wrapper">
|
||||
<input type="number" placeholder="请输入户号" class="input-field" v-model="userNo" />
|
||||
<text class="help-link" @click="showPopup = true">如何获取户号?</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 快速获取户号 底部弹窗 -->
|
||||
<view v-if="showPopup" class="popup-mask" @click="showPopup = false">
|
||||
<view class="popup-content" @click.stop>
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">快速获取户号</text>
|
||||
<text class="popup-close" @click="showPopup = false">×</text>
|
||||
</view>
|
||||
<view class="popup-list">
|
||||
<view class="popup-item">
|
||||
<view class="item-number">1</view>
|
||||
<view class="item-content">
|
||||
<text class="item-title">查看缴费通知单</text>
|
||||
<text class="item-desc">在纸质缴费/催费通知单上查找户号。</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-item">
|
||||
<view class="item-number">2</view>
|
||||
<view class="item-content">
|
||||
<text class="item-title">查询通知短信</text>
|
||||
<text class="item-desc">搜索手机由缴费单位发送的催缴短信，短信中包含户号</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部协议和立即缴费按钮 -->
|
||||
<view class="bottom-area">
|
||||
<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>
|
||||
<button class="submit-btn" @click="handleSubmit">
|
||||
立即缴费
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
style() {
|
||||
var statusBarHeight = this.statusBarHeight;
|
||||
return statusBarHeight;
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
let statusBarObj = this.getPhoneInfo()
|
||||
this.statusBarHeight = statusBarObj.statusBarHeight
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
paymentType: uni.getStorageSync('addPaymentType'),
|
||||
userNo: '',
|
||||
isAgree: false,
|
||||
showPopup: false, // 控制弹窗显示
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleAgreeChange(e) {
|
||||
// e.detail.value 是数组，有值 = 选中，空 = 未选中
|
||||
this.isAgree = e.detail.value.length > 0
|
||||
},
|
||||
// 处理协议链接点击
|
||||
handleProtocol() {
|
||||
uni.navigateTo({
|
||||
|
||||
})
|
||||
},
|
||||
// 处理提交
|
||||
handleSubmit() {
|
||||
if (!this.userNo) {
|
||||
uni.showToast({
|
||||
title: '请输入户号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.isAgree) {
|
||||
uni.showToast({
|
||||
title: '请先同意协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title: '确认提交',
|
||||
content: '确认要提交吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goNext()
|
||||
}, 2500);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
goNext() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/addPaymentSuccess',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
goToChange() {
|
||||
// uni.redirectTo({
|
||||
// url: '/pages/payment-list/selectPaymentEntity',
|
||||
// success: res => {},
|
||||
// fail: () => {},
|
||||
// complete: () => {}
|
||||
// });
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
/* 顶部标题栏 */
|
||||
.header-card {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #ededed;
|
||||
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-fire {
|
||||
font-size: 32rpx;
|
||||
color: #4080ff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
/* padding: 30rpx; */
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
/* margin-bottom: 40rpx; */
|
||||
border-bottom: 2rpx solid #ededed;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
padding: 10rpx 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-field::placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.help-link {
|
||||
font-size: 28rpx;
|
||||
color: #4080ff;
|
||||
white-space: nowrap;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 底部区域 */
|
||||
.bottom-area {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.agreement checkbox {
|
||||
transform: scale(0.8);
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
font-size: 28rpx;
|
||||
color: #4080ff;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #4080ff;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
background-color: #a0c4ff;
|
||||
color: #fff;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 弹窗遮罩层 */
|
||||
.popup-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* 弹窗内容 */
|
||||
.popup-content {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
padding: 30rpx 40rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 弹窗标题栏 */
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
line-height: 60rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* align-items: center; */
|
||||
justify-content: space-evenly;
|
||||
border-bottom: 2rpx solid #ebebeb;
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
font-size: 48rpx;
|
||||
color: #999;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 弹窗列表 */
|
||||
.popup-list {
|
||||
padding: 0 10rpx;
|
||||
|
||||
}
|
||||
|
||||
.popup-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.popup-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-number {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
border: 2rpx solid #4080ff;
|
||||
border-radius: 6rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #4080ff;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 弹窗动画 */
|
||||
/* @keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
} */
|
||||
|
||||
/* 成功提示弹窗 */
|
||||
.toast-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
color: #1677ff;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,190 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<view class="container">
|
||||
<!-- 成功图标 -->
|
||||
<view class="success-icon">
|
||||
<text class="icon-check">✓</text>
|
||||
</view>
|
||||
|
||||
<!-- 主标题 -->
|
||||
<view class="title">绑定成功</view>
|
||||
|
||||
<!-- 提示文案 -->
|
||||
<view class="desc">
|
||||
恭喜您绑定成功，费用将在24小时内更新，<br>
|
||||
请您按时查看，避免造成费用欠费
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="btn-wrap">
|
||||
<button class="btn-back" @click="goBack">返回生活缴费</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
paymentType: uni.getStorageSync('addPaymentType'),
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 成功图标 */
|
||||
.success-icon {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1677ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 200rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.icon-check {
|
||||
color: #fff;
|
||||
font-size: 130rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 主标题 */
|
||||
.title {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 提示文案 */
|
||||
.desc {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
margin-bottom: 150rpx;
|
||||
}
|
||||
|
||||
/* 按钮容器 */
|
||||
.btn-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.btn-back {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 按钮默认样式重置（解决uni-app button默认样式问题） */
|
||||
.btn-back::after {
|
||||
border: none;
|
||||
}.status-bar{
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,728 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
:border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<view class="container">
|
||||
<!-- 1. 缴费详情 -->
|
||||
<view v-if="currentStep === 1" class="pay-page">
|
||||
<!-- 物业费缴费 -->
|
||||
<!-- 金额展示 -->
|
||||
<view class="amount-section">
|
||||
<text class="amount-text"
|
||||
:class="{ 'outstandingPaymentClass':outstandingPayment }">{{outstandingPayment?'-¥'+payAmount:'¥'+payAmount}}</text>
|
||||
</view>
|
||||
<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 class="info-item">
|
||||
<text class="info-label">户号</text>
|
||||
<text class="info-value">101123456</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">HN热力有限公司</text>
|
||||
</view>
|
||||
<!-- <view style="border-bottom: 2rpx solid #c7c7c7;padding-bottom:20rpx;"></view> -->
|
||||
<!-- 缴费金额输入 -->
|
||||
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
|
||||
<view class="input-section" style="display: flex;">
|
||||
<text class="amount-input" style="width: auto;margin: 0rpx 20rpx;">¥</text>
|
||||
<input type="number" v-model="payNum" class="amount-input" placeholder="点击输入缴费金额">
|
||||
</input>
|
||||
</view>
|
||||
<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
|
||||
<view class="arrears-row">
|
||||
<text class="arrears-text">当前欠费金额¥{{ arrearsAmount }}元</text>
|
||||
<text class="auto-fill-btn" @click="handleAutoFill">点击自动填入</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 2. 支付密码弹窗 -->
|
||||
<view v-if="currentStep === 2" class="modal-overlay" @click="closePasswordModal">
|
||||
<view class="password-modal" @click.stop>
|
||||
<!-- 弹窗头部 -->
|
||||
<view class="modal-header">
|
||||
<view class="close-icon" @click="closePasswordModal">
|
||||
<text class="close-text">×</text>
|
||||
</view>
|
||||
<view class="modal-title">请输入支付密码</view>
|
||||
<view class="header-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 商户信息 & 金额 -->
|
||||
<view class="pay-info">
|
||||
<text class="merchant-name">充值金额</text>
|
||||
<text class="pay-amount">¥{{ payAmount }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式选择 -->
|
||||
<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>
|
||||
<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">
|
||||
<view v-for="(item, index) in 6" :key="index" class="password-item">
|
||||
<text v-if="password.length > index" class="password-dot"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数字键盘 -->
|
||||
<view class="keyboard">
|
||||
<view class="keyboard-row">
|
||||
<view class="keyboard-item" @click="inputPassword(1)">1</view>
|
||||
<view class="keyboard-item" @click="inputPassword(2)">2</view>
|
||||
<view class="keyboard-item" @click="inputPassword(3)">3</view>
|
||||
</view>
|
||||
<view class="keyboard-row">
|
||||
<view class="keyboard-item" @click="inputPassword(4)">4</view>
|
||||
<view class="keyboard-item" @click="inputPassword(5)">5</view>
|
||||
<view class="keyboard-item" @click="inputPassword(6)">6</view>
|
||||
</view>
|
||||
<view class="keyboard-row">
|
||||
<view class="keyboard-item" @click="inputPassword(7)">7</view>
|
||||
<view class="keyboard-item" @click="inputPassword(8)">8</view>
|
||||
<view class="keyboard-item" @click="inputPassword(9)">9</view>
|
||||
</view>
|
||||
<view class="keyboard-row">
|
||||
<view class="keyboard-item empty"></view>
|
||||
<view class="keyboard-item" @click="inputPassword(0)">0</view>
|
||||
<view class="keyboard-item delete" @click="deletePassword">
|
||||
<text class="icon">←</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 缴费成功页 -->
|
||||
<view class="container" v-if="currentStep==3">
|
||||
<!-- 成功图标 -->
|
||||
<view class="success-icon">
|
||||
<text class="icon-check">✓</text>
|
||||
</view>
|
||||
|
||||
<!-- 主标题 -->
|
||||
<view class="title">缴费成功</view>
|
||||
|
||||
<!-- 提示文案 -->
|
||||
<view class="desc">
|
||||
成功缴纳物业费
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
<!-- 立即缴费按钮 -->
|
||||
<view class="btn-section" v-if="currentStep === 1">
|
||||
<button class="pay-btn" @click="handlePay">立即缴费</button>
|
||||
</view>
|
||||
<!-- 返回按钮 -->
|
||||
<view class="btn-section" v-if="currentStep === 3">
|
||||
<button class="pay-btn" @click="handleBackToList">返回生活缴费</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
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: [{
|
||||
id: 1,
|
||||
name: "建设银行储蓄卡(8888)",
|
||||
icon: "/static/bank-logo.png"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "工商银行储蓄卡(6666)",
|
||||
icon: "/static/icbc-logo.png"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "招商银行储蓄卡(9999)",
|
||||
icon: "/static/cmb-logo.png"
|
||||
}
|
||||
],
|
||||
// 默认选中的银行卡
|
||||
selectedBank: {
|
||||
id: 1,
|
||||
name: "建设银行储蓄卡(8888)",
|
||||
icon: "/static/bank-logo.png"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
handleAutoFill() {
|
||||
this.payNum = this.arrearsAmount;
|
||||
uni.vibrateShort({
|
||||
type: "light"
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/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: '/pages/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #
|
||||
/* fff */
|
||||
;
|
||||
}
|
||||
|
||||
|
||||
/* 1. 物业费详情页 */
|
||||
.pay-page {
|
||||
width: 100%;
|
||||
/* min-height: 100vh; */
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.amount-section {
|
||||
padding: 60rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.outstandingPaymentClass {
|
||||
color: #E34D59;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding-top: 20rpx;
|
||||
/* margin-bottom: 40rpx; */
|
||||
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-payAmountItem {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.info-payAmount {
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.input-section {
|
||||
/* padding: 030rpx; */
|
||||
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 100rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.btn-section {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 2. 支付密码弹窗 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.password-modal {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 44rpx;
|
||||
width: 80rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 80rpx;
|
||||
}
|
||||
|
||||
.pay-info {
|
||||
padding: 40rpx 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.pay-amount {
|
||||
font-size: 64rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pay-way {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.way-label {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.way-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bank-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.bank-name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 银行卡列表 */
|
||||
.bank-list {
|
||||
padding: 030rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.bank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.bank-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bank-item-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.bank-item-name {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
font-size: 36rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
/* 密码输入框 */
|
||||
.password-input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.password-item {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
/* border: 2rpx solid #dcdcdc; */
|
||||
background-color: #efefef;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.password-dot {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 数字键盘 */
|
||||
.keyboard {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.keyboard-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.keyboard-item {
|
||||
flex: 1;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
font-size: 48rpx;
|
||||
color: #000;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.keyboard-item:active {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.keyboard-item.empty {
|
||||
background-color: #f5f5f5;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.keyboard-item.delete {
|
||||
background-color: #f5f5f5;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 3. 缴费成功页 */
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 成功图标 */
|
||||
.success-icon {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1677ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 200rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.icon-check {
|
||||
color: #fff;
|
||||
font-size: 130rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* 主标题 */
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 提示文案 */
|
||||
.desc {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
margin-bottom: 150rpx;
|
||||
}
|
||||
|
||||
/* 核心：欠费金额行样式 */
|
||||
.arrears-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* padding:30rpx; */
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.arrears-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.auto-fill-btn {
|
||||
font-size: 28rpx;
|
||||
color: #007aff;
|
||||
/* 蓝色，匹配设计图 */
|
||||
font-weight: 500;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,579 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||||
: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>
|
||||
<text class="noArrearsText">暂未查到欠费</text>
|
||||
<view class="recordText">
|
||||
<text>{{'最近缴费：'+lastPayTime}}</text>
|
||||
<text class="lineStyle">{{'|'}}</text>
|
||||
<text>{{'缴费金额：'+lastPayNum+'元'}}</text>
|
||||
</view>
|
||||
|
||||
</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>
|
||||
<view v-else>
|
||||
<view class="info-item" v-if="arrearsPayment=='暖气费'">
|
||||
<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">101123456</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">HN热力有限公司</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lastPayTime: '2022-11-29',
|
||||
lastPayNum: '2022.00',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
arrearsPayment: uni.getStorageSync('arrearsPayment'),
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/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: '/pages/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* 1. 物业费详情页 */
|
||||
.pay-page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.amount-section {
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.background-image-style {
|
||||
|
||||
width: 466rpx;
|
||||
height: 250rpx;
|
||||
margin-bottom: 140rpx;
|
||||
}
|
||||
|
||||
.noArrearsText {
|
||||
padding-bottom: 50rpx;
|
||||
width: 100%;
|
||||
border-bottom: 2rpx solid #ededed;
|
||||
}
|
||||
|
||||
.recordText {
|
||||
font-size: 24rpx;
|
||||
color: #222;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-section {}
|
||||
|
||||
.lineStyle {
|
||||
margin: 0rpx 30rpx;
|
||||
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-payAmountItem {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.info-payAmount {
|
||||
font-size: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.input-section {
|
||||
padding: 030rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
font-size: 48rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-section {
|
||||
padding: 030rpx;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 2. 支付密码弹窗 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.password-modal {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx24rpx 0 0;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
padding: 030rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 44rpx;
|
||||
width: 80rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 80rpx;
|
||||
}
|
||||
|
||||
.pay-info {
|
||||
padding: 40rpx30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.pay-amount {
|
||||
font-size: 64rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pay-way {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.way-label {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.way-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bank-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.bank-name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 银行卡列表 */
|
||||
.bank-list {
|
||||
padding: 030rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.bank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.bank-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bank-item-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.bank-item-name {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
font-size: 36rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
/* 密码输入框 */
|
||||
.password-input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 40rpx30rpx;
|
||||
}
|
||||
|
||||
.password-item {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
/* border: 2rpx solid #dcdcdc; */
|
||||
background-color: #efefef;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.password-dot {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 数字键盘 */
|
||||
.keyboard {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.keyboard-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.keyboard-item {
|
||||
flex: 1;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
font-size: 48rpx;
|
||||
color: #000;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.keyboard-item:active {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.keyboard-item.empty {
|
||||
background-color: #f5f5f5;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.keyboard-item.delete {
|
||||
background-color: #f5f5f5;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 3. 缴费成功页 */
|
||||
.success-page {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 1100rpx;
|
||||
padding: 60rpx 0px;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
/* margin-top: 120rpx; */
|
||||
margin-bottom: 40rpx;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 80px;
|
||||
color: #007aff;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.success-icon .iconfont {}
|
||||
|
||||
.success-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.success-desc {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,419 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<uni-nav-bar title="生活缴费" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
<view class="topbox">
|
||||
<image class="titleImg" src="http://47.104.199.163:9090/images/propertyImgs/payTitle.png"></image>
|
||||
<image class="payImg" src="http://47.104.199.163:9090/images/propertyImgs/payImg.png"></image>
|
||||
</view>
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="container">
|
||||
<!-- 已缴费/欠费列表 -->
|
||||
<view class="bill-list">
|
||||
<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">
|
||||
<view class="bill-title">{{item.name}}
|
||||
<view class="bill-status debt" v-if="item.status=='已欠费'">已欠费</view>
|
||||
</view>
|
||||
<view class="bill-desc">{{item.address}}</view>
|
||||
</view>
|
||||
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 新增缴费区域 -->
|
||||
<view class="add-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">新增缴费</text>
|
||||
<text class="record-link" @click="goToRecord">缴费记录</text>
|
||||
</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>
|
||||
</view>
|
||||
<text class="item-name">{{ item.name +'费'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 100%;height: 30rpx;"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {
|
||||
// console.log('onReady')
|
||||
},
|
||||
components: {
|
||||
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
paymentList: [{
|
||||
id: 1,
|
||||
name: '物业费',
|
||||
status: '已欠费',
|
||||
address: '桂花园（别墅）2号楼2层',
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '暖气费',
|
||||
status: '',
|
||||
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
|
||||
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '电费',
|
||||
status: '已欠费',
|
||||
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
|
||||
|
||||
}
|
||||
],
|
||||
// 新增缴费列表数据
|
||||
addList: [{
|
||||
name: "燃气",
|
||||
type: "gas",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
|
||||
iconClass: "gas"
|
||||
},
|
||||
{
|
||||
name: "水",
|
||||
type: "water",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
|
||||
iconClass: "water"
|
||||
},
|
||||
{
|
||||
name: "物业",
|
||||
type: "property",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/property.png",
|
||||
iconClass: "property"
|
||||
},
|
||||
{
|
||||
name: "电",
|
||||
type: "electric",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
|
||||
iconClass: "electric"
|
||||
},
|
||||
{
|
||||
name: "暖气",
|
||||
type: "heating",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/heating.png",
|
||||
iconClass: "heating"
|
||||
},
|
||||
{
|
||||
name: "车位",
|
||||
type: "parking",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/parkingIcon.png",
|
||||
iconClass: "parking"
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 跳转到缴费
|
||||
goToBill(item) {
|
||||
uni.setStorageSync('arrearsPayment', item.name)
|
||||
if (item.status == '已欠费') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/arrearsPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/noArrearsPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 跳转到缴费记录
|
||||
goToRecord() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/paymentRecord',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
// 跳转到新增缴费
|
||||
goToAdd(type) {
|
||||
if (type.name == '燃气' || type.name == '暖气') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/selectPaymentEntity',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (type.name == '水' || type.name == '电') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/addHydropower',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
uni.setStorageSync('addPaymentType', type.name)
|
||||
|
||||
},
|
||||
goBack() {
|
||||
console.log(uni.getStorageSync('sourcePage'));
|
||||
if (uni.getStorageSync('sourcePage') == 'serviceIndex') {
|
||||
uni.switchTab({
|
||||
url: '/pages/serviceIndex/serviceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else if (uni.getStorageSync('sourcePage') == 'index') {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
uni.removeStorageSync('sourcePage');
|
||||
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.topbox {
|
||||
height: 150rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.titleImg {
|
||||
width: 262rpx;
|
||||
height: 74rpx;
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
.payImg {
|
||||
width: 349.97rpx;
|
||||
height: 313.57rpx;
|
||||
position: absolute;
|
||||
right: -80rpx;
|
||||
bottom: -140rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
/* padding:30rpx; */
|
||||
}
|
||||
|
||||
/* ===================== 欠费列表 ===================== */
|
||||
.bill-list {
|
||||
margin-bottom: 40rpx;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F6F9FE;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 20rpx 20rpx 0px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.bill-item:last-child {
|
||||
margin-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
width: calc(90% - 100rpx);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.billIcon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.bill-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bill-desc {
|
||||
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 已欠费标签 */
|
||||
.bill-status {
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background-color: #E34D59;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 右侧箭头 */
|
||||
.arrow {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-right: 4rpx solid #ccc;
|
||||
border-bottom: 4rpx solid #ccc;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ===================== 新增缴费区域 ===================== */
|
||||
.add-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.record-link {
|
||||
font-size: 28rpx;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
/* 网格列表 */
|
||||
.grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 26rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(25% - 60rpx);
|
||||
background-color: #F6F9FE;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,457 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<!-- 累计缴费 -->
|
||||
<view class="total-box">
|
||||
<view class="top-box">
|
||||
<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">
|
||||
<!-- 循环6个月柱状图 -->
|
||||
<view class="chart-item" v-for="(item,index) in chartData" :key="index">
|
||||
<!-- 柱子顶部金额文字 -->
|
||||
<view class="chart-label">{{ item.price }}元</view>
|
||||
<!-- 柱状图柱子 -->
|
||||
<view class="chart-bar" :style="{ height: barHeight(item.price) }"></view>
|
||||
<!-- 底部月份文字 -->
|
||||
<view class="chart-month">{{ item.month }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 缴费明细 -->
|
||||
<view class="list-wrapper">
|
||||
<!-- 按月份分组渲染 -->
|
||||
<view class="month-group" v-for="(item, idx) in monthGroups" :key="idx">
|
||||
<view class="month-title">
|
||||
{{ item.month }}月 缴费 ¥{{ item.total }}元
|
||||
</view>
|
||||
|
||||
<view class="item-list">
|
||||
<view class="bill-item" v-for="bill in item.list" :key="bill.id">
|
||||
<view class="bill-icon">
|
||||
<image class="iconStyle" :src="bill.icon"></image>
|
||||
</view>
|
||||
<view class="bill-info">
|
||||
<view class="name">{{ bill.name }}</view>
|
||||
<view class="account">{{ bill.account }}</view>
|
||||
</view>
|
||||
<view class="bill-price">-{{ bill.amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
// 自动按月份分组
|
||||
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: [{
|
||||
month: '1月',
|
||||
price: 250
|
||||
},
|
||||
{
|
||||
month: '2月',
|
||||
price: 130
|
||||
},
|
||||
{
|
||||
month: '3月',
|
||||
price: 220
|
||||
},
|
||||
{
|
||||
month: '4月',
|
||||
price: 250
|
||||
},
|
||||
{
|
||||
month: '5月',
|
||||
price: 100
|
||||
},
|
||||
{
|
||||
month: '6月',
|
||||
price: 130
|
||||
}
|
||||
],
|
||||
maxPrice: 250, // 最大值（基准高度）
|
||||
barMaxHeight: 300, // 柱子最大高度rpx
|
||||
// canvas折线图数据
|
||||
chart: {
|
||||
months: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
values: [100, 140, 230, 100, 130, 100]
|
||||
},
|
||||
|
||||
billList: [
|
||||
// 5月数据
|
||||
{
|
||||
id: 1,
|
||||
month: 5,
|
||||
name: '燃气费',
|
||||
account: '123123123123',
|
||||
amount: 25,
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
month: 5,
|
||||
name: '水费',
|
||||
account: '123123123123',
|
||||
amount: 25,
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
month: 6,
|
||||
name: '水费',
|
||||
account: '123123123123',
|
||||
amount: 10,
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/water.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
month: 6,
|
||||
name: '电费',
|
||||
account: '123123123123',
|
||||
amount: 30,
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png",
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 计算每个柱子自适应高度（按金额比例换算）
|
||||
barHeight(price) {
|
||||
const height = (price / this.maxPrice) * this.barMaxHeight
|
||||
return `${height}rpx`
|
||||
},
|
||||
drawLineChart() {
|
||||
const ctx = uni.createCanvasContext('chargeChart', this)
|
||||
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 maxVal = 250
|
||||
|
||||
ctx.setFillStyle('#999')
|
||||
ctx.setFontSize(12)
|
||||
ctx.setTextAlign('center')
|
||||
|
||||
// 绘制网格
|
||||
ctx.beginPath()
|
||||
ctx.setStrokeStyle('#d8d8d8')
|
||||
ctx.setLineWidth(1)
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
let y = padding + (h - padding * 2) * (1 - i / 5)
|
||||
ctx.moveTo(40, y)
|
||||
ctx.lineTo(w - 20, y)
|
||||
ctx.fillText(i * 50 + '元', 20, y + 4)
|
||||
}
|
||||
ctx.stroke()
|
||||
|
||||
// 绘制X轴月份
|
||||
this.chart.months.forEach((m, i) => {
|
||||
let x = 40 + i * stepX
|
||||
ctx.fillText(m, x, h - 20)
|
||||
})
|
||||
|
||||
// 绘制折线
|
||||
let points = []
|
||||
this.chart.values.forEach((val, i) => {
|
||||
let x = 40 + i * stepX
|
||||
let y = padding + (h - padding * 2) * (1 - val / maxVal)
|
||||
points.push({
|
||||
x,
|
||||
y
|
||||
})
|
||||
})
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.setStrokeStyle('#4080FF')
|
||||
ctx.setLineWidth(2)
|
||||
points.forEach((p, i) => {
|
||||
if (i === 0) ctx.moveTo(p.x, p.y)
|
||||
else ctx.lineTo(p.x, p.y)
|
||||
})
|
||||
ctx.stroke()
|
||||
|
||||
// 绘制圆点
|
||||
points.forEach((p, i) => {
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, 3, 0, 2 * Math.PI)
|
||||
ctx.setFillStyle('#fff')
|
||||
ctx.fill()
|
||||
ctx.setStrokeStyle('#4080FF')
|
||||
ctx.setLineWidth(2)
|
||||
ctx.stroke()
|
||||
|
||||
ctx.setFillStyle('#4080FF')
|
||||
ctx.setFontSize(13)
|
||||
ctx.fillText(this.chart.values[i] + '元', p.x, p.y - 10)
|
||||
})
|
||||
|
||||
ctx.draw()
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
// background: #f2f1f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
|
||||
.total-box {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.total-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.chart-canvas {
|
||||
width: calc(100vw - 60rpx);
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
padding: 10rpx 0rpx;
|
||||
}
|
||||
|
||||
.month-group {
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.month-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.bill-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0rpx;
|
||||
padding-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.bill-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
/* background: #e6efff; */
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #4080FF;
|
||||
margin-right: 24rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.account {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.bill-price {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 120rpx;
|
||||
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;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,428 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="选择缴费单位" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 城市 + 搜索 -->
|
||||
<view class="search-section">
|
||||
<!-- 城市选择器 -->
|
||||
<uni-data-picker placeholder="选择省市" popup-title="选择省市" :localdata="alladdress"
|
||||
field="code as value, value as text" orderby="value asc" :step-searh="true" self-field="code"
|
||||
parent-field="code" @change="onchange" v-model="cityValue" class="city-picker">
|
||||
<view class="city-select">
|
||||
<text class="city-text ellipsis">{{ selectedCity }}</text>
|
||||
<text class="arrow-icon"></text>
|
||||
</view>
|
||||
</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" />
|
||||
<uni-icons type="search" size="20" color="#999" />
|
||||
</view>
|
||||
</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"
|
||||
@click="selectItem(itemChild)">
|
||||
{{ 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: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
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: [{
|
||||
text: "北京市",
|
||||
value: "110000000000",
|
||||
children: [{
|
||||
text: "市辖区",
|
||||
value: "110100000000",
|
||||
children: [{
|
||||
text: "东城区",
|
||||
value: "110101000000"
|
||||
},
|
||||
{
|
||||
text: "西城区",
|
||||
value: "110102000000"
|
||||
},
|
||||
{
|
||||
text: "朝阳区",
|
||||
value: "110105000000"
|
||||
},
|
||||
{
|
||||
text: "丰台区",
|
||||
value: "110106000000"
|
||||
},
|
||||
{
|
||||
text: "石景山区",
|
||||
value: "110107000000"
|
||||
},
|
||||
{
|
||||
text: "海淀区",
|
||||
value: "110108000000"
|
||||
},
|
||||
{
|
||||
text: "门头沟区",
|
||||
value: "110109000000"
|
||||
},
|
||||
{
|
||||
text: "房山区",
|
||||
value: "110111000000"
|
||||
},
|
||||
{
|
||||
text: "通州区",
|
||||
value: "110112000000"
|
||||
},
|
||||
{
|
||||
text: "顺义区",
|
||||
value: "110113000000"
|
||||
},
|
||||
{
|
||||
text: "昌平区",
|
||||
value: "110114000000"
|
||||
},
|
||||
{
|
||||
text: "大兴区",
|
||||
value: "110115000000"
|
||||
},
|
||||
{
|
||||
text: "怀柔区",
|
||||
value: "110116000000"
|
||||
},
|
||||
{
|
||||
text: "平谷区",
|
||||
value: "110117000000"
|
||||
},
|
||||
{
|
||||
text: "密云区",
|
||||
value: "110118000000"
|
||||
},
|
||||
{
|
||||
text: "延庆区",
|
||||
value: "110119000000"
|
||||
}
|
||||
]
|
||||
}]
|
||||
}, ],
|
||||
|
||||
searchKey: '',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
showPicker: false,
|
||||
keyword: '',
|
||||
|
||||
|
||||
// 列表：一个大数组
|
||||
companyList: [{
|
||||
id: 7,
|
||||
name: '官方机构',
|
||||
children: [{
|
||||
id: 1,
|
||||
name: "XX市燃气集团有限公司"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "XX市供水有限公司"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "XX供电服务中心"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "XX新能源服务公司"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "XX公共事业缴费中心"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "XX综合能源服务站"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '非智享日照提供的服务单位',
|
||||
children: [{
|
||||
id: 9,
|
||||
name: "XX市燃气集团有限公司"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "XX能源集团"
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
selectItem(item) {
|
||||
console.log(item);
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/addPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
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
|
||||
} else {
|
||||
selectedCity = arr[1].text
|
||||
}
|
||||
this.selectedCity = selectedCity
|
||||
},
|
||||
|
||||
// 搜索输入事件
|
||||
onSearch() {
|
||||
// 实时过滤，computed 自动处理
|
||||
},
|
||||
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/paymentIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
background-color: #fff;
|
||||
padding:20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 隐藏 uni-data-picker 原生样式，只保留点击功能 */
|
||||
.city-picker {
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 自定义城市选择区域，完美还原「日照市 ▼」 */
|
||||
.city-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:8rpx 0;
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.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 0px10rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.list-scroll {
|
||||
}
|
||||
|
||||
.group-title {
|
||||
padding:20rpx 40rpx;
|
||||
font-size:28rpx;
|
||||
color: #666;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
padding:20rpx 40rpx;
|
||||
font-size:28rpx;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
}
|
||||
|
||||
.item:active {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
::v-deep .selected-item {
|
||||
margin-left:10rpx !important;
|
||||
margin-right:10rpx !important;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,579 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="投诉建议" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
<!-- 表单主体 -->
|
||||
<view class="form-content">
|
||||
<text class="form-tip">请填写反馈信息</text>
|
||||
|
||||
<!-- 1. 投诉类型（点击弹出popup） -->
|
||||
<view class="form-row" @click="showTypePopup = true">
|
||||
<view class="row-left">
|
||||
<text class="required-star">*</text>
|
||||
<text class="label-text">投诉类型</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<text class="value-text"
|
||||
:class="{placeholderStyle:selectedType}">{{ selectedType || '请选择投诉类型' }}</text>
|
||||
<text class="arrow-icon">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 投诉物业（选中物业服务时显示） -->
|
||||
<view class="form-row" v-if="selectedType === '物业服务'" @click="showPropertyPopup = true">
|
||||
<view class="row-left">
|
||||
<text class="required-star">*</text>
|
||||
<text class="label-text">投诉物业</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<text class="value-text"
|
||||
:class="{placeholderStyle:selectedProperty}">{{ selectedProperty || '请选择' }}</text>
|
||||
<text class="arrow-icon">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 问题描述 -->
|
||||
<view class="form-row desc-row" style="flex-direction: column;">
|
||||
<view class="row-left">
|
||||
<text class="required-star">*</text>
|
||||
<text class="label-text">问题描述</text>
|
||||
</view>
|
||||
<view class="row-right desc-right">
|
||||
<textarea v-model="description" placeholder="请描述您的问题" class="desc-input" auto-height
|
||||
maxlength="500"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 4. 投诉人姓名 -->
|
||||
<view class="form-row">
|
||||
<view class="row-left">
|
||||
<text class="label-text">投诉人姓名</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<input v-model="name" placeholder="请输入姓名" class="text-input" type="text" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 5. 手机号码 -->
|
||||
<view class="form-row">
|
||||
<view class="row-left">
|
||||
<text class="label-text">手机号码</text>
|
||||
</view>
|
||||
<view class="row-right">
|
||||
<input v-model="phone" placeholder="请输入手机号" class="text-input" type="number" maxlength="11" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 6. 相关照片（多图上传+删除） -->
|
||||
<view class="form-row photo-row">
|
||||
<view class="row-left">
|
||||
<text class="label-text">相关照片</text>
|
||||
</view>
|
||||
<view class="row-right photo-right">
|
||||
<view class="photo-grid">
|
||||
<!-- 已上传图片 -->
|
||||
<view v-for="(img, index) in tempFilePaths" :key="index" class="photo-item">
|
||||
<image :src="img" mode="aspectFill" class="photo-img"></image>
|
||||
<view class="delete-btn" @click="deletePhoto(index)">
|
||||
<text class="delete-icon">×</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上传加号按钮 -->
|
||||
<view class="add-btn" v-if="tempFilePaths.length < maxCount" @click="chooseImages">
|
||||
<text class="add-icon">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<!-- 底部下一步按钮 -->
|
||||
<view class="bottom-btn-wrap">
|
||||
<button class="next-btn" @click="submitForm">提交</button>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- ================== 自定义Popup弹窗（纯view实现） ================== -->
|
||||
<!-- 蒙层 -->
|
||||
<view class="mask" v-if="showTypePopup || showPropertyPopup" @click="closeAllPopup"></view>
|
||||
|
||||
<!-- 投诉类型弹窗 -->
|
||||
<view v-if="showTypePopup" class="mask" @click="showTypePopup=false"></view>
|
||||
<view v-if="showTypePopup" class="popup">
|
||||
<view class="popup-header">
|
||||
<text class="title">选择投诉类型</text>
|
||||
<text class="close" @click="showTypePopup = false">✕</text>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
|
||||
<view :class="{ active: selectedType === item }" class="item" v-for="(item, index) in typeOptions"
|
||||
:key="index" @click="selectType(item)">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 投诉物业弹窗 -->
|
||||
<view v-if="showPropertyPopup" class="mask" @click="showPropertyPopup=false"></view>
|
||||
<view v-if="showPropertyPopup" class="popup">
|
||||
<view class="popup-header">
|
||||
<text class="title">选择投诉类型</text>
|
||||
<text class="close" @click="showPropertyPopup = false">✕</text>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view :class="{ active: selectedProperty === item }" class="item"
|
||||
v-for="(item, index) in propertyOptions" :key="index" @click="selectProperty(item)">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 弹窗控制
|
||||
showTypePopup: false,
|
||||
showPropertyPopup: false,
|
||||
|
||||
// 下拉选项
|
||||
typeOptions: ['物业服务', '社区服务', '其他'],
|
||||
propertyOptions: ['XX物业A', 'XX物业B', 'XX物业C'], // 替换为实际数据
|
||||
|
||||
// 表单数据
|
||||
selectedType: '',
|
||||
selectedProperty: '',
|
||||
description: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
|
||||
// 多图上传
|
||||
tempFilePaths: [],
|
||||
maxCount: 9 // 最大上传9张
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 返回上一页
|
||||
navigateBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
// 关闭所有弹窗
|
||||
closeAllPopup() {
|
||||
this.showTypePopup = false;
|
||||
this.showPropertyPopup = false;
|
||||
},
|
||||
|
||||
// 选择投诉类型
|
||||
selectType(item) {
|
||||
this.selectedType = item;
|
||||
this.showTypePopup = false;
|
||||
// 切换类型时清空物业选择
|
||||
if (item !== '物业服务') {
|
||||
this.selectedProperty = '';
|
||||
}
|
||||
},
|
||||
|
||||
// 选择物业
|
||||
selectProperty(item) {
|
||||
this.selectedProperty = item;
|
||||
this.showPropertyPopup = false;
|
||||
},
|
||||
|
||||
// 多图选择
|
||||
chooseImages() {
|
||||
uni.chooseImage({
|
||||
count: this.maxCount - this.tempFilePaths.length,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
this.tempFilePaths = [...this.tempFilePaths, ...res.tempFilePaths];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
deletePhoto(index) {
|
||||
this.tempFilePaths.splice(index, 1);
|
||||
},
|
||||
|
||||
// 表单提交
|
||||
submitForm() {
|
||||
// 基础校验
|
||||
if (!this.selectedType) {
|
||||
return uni.showToast({
|
||||
title: '请选择投诉类型',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
if (this.selectedType === '物业服务' && !this.selectedProperty) {
|
||||
return uni.showToast({
|
||||
title: '请选择物业',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
if (!this.description.trim()) {
|
||||
return uni.showToast({
|
||||
title: '请输入问题描述',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/service-list/complaintsSuggestionsIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 表单主体 */
|
||||
.form-content {}
|
||||
|
||||
.form-tip {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
color: #1D1D1D;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 表单项：一行布局，不换行 */
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.row-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 180rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.required-star {
|
||||
color: #ff3b30;
|
||||
font-size: 30rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.row-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 30rpx;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.value-text.placeholderStyle {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.text-input {
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 问题描述行 */
|
||||
.desc-row {
|
||||
align-items: flex-start;
|
||||
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.desc-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.desc-input {
|
||||
width: calc(100vw - 84rpx);
|
||||
min-height: 80px;
|
||||
margin-top: 20rpx;
|
||||
padding: 24rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
border-radius: 8rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 照片上传区域 */
|
||||
.photo-row {
|
||||
align-items: flex-start;
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: 32rpx;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.photo-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
position: relative;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.photo-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: -4rpx;
|
||||
right: -4rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border: 1rpx solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
border-radius: 12rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* 底部弹出框 */
|
||||
.popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
z-index: 100;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
/* border-bottom: 1rpx solid #f0f0f0; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 选项列表 */
|
||||
.list {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
color: #337eff;
|
||||
font-weight: 600;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,290 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="投诉详情" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="page-container">
|
||||
<!-- 投诉状态 -->
|
||||
<view class="status-section">
|
||||
<view class="section-title">
|
||||
<text class="title-line"></text>
|
||||
<text class="title-text">投诉状态</text>
|
||||
</view>
|
||||
<text class="status-value"
|
||||
:class="status=='pending'?'pending':status=='processing'?'processing':status=='completed'?'completed':''">{{status=='pending'?'待处理':status=='processing'?'处理中':status=='completed'?'已完成':''}}</text>
|
||||
</view>
|
||||
<view class="completedDesc" v-if="status=='completed'">已完成处理，已联系工作人员粘贴标语提醒，并派人定时巡视。</view>
|
||||
<!-- 投诉详情 -->
|
||||
<view class="detail-section">
|
||||
<view class="section-title">
|
||||
<text class="title-line"></text>
|
||||
<text class="title-text">投诉详情</text>
|
||||
</view>
|
||||
|
||||
<!-- 投诉类型 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">投诉类型</text>
|
||||
<text class="info-value">社区服务</text>
|
||||
</view>
|
||||
|
||||
<!-- 问题描述 -->
|
||||
<view class="info-item desc-item">
|
||||
<text class="info-label">问题描述</text>
|
||||
<text class="info-value desc-value">
|
||||
投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容
|
||||
</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">无</text>
|
||||
</view>
|
||||
|
||||
<!-- 问题照片 -->
|
||||
<view class="photo-section">
|
||||
<text class="photo-label">问题照片</text>
|
||||
<view class="photo-list">
|
||||
<image v-for="(img, index) in photoList" :key="index" :src="img" mode="aspectFill"
|
||||
class="photo-item"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.status = option.status;
|
||||
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
status: '',
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 问题照片列表，替换为你的实际图片路径
|
||||
photoList: [
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community1.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community2.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community3.png"
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/service-list/complaintsSuggestionsIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page-container {}
|
||||
|
||||
/* 通用标题样式（带蓝色竖线） */
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
width: 8rpx;
|
||||
height: 36rpx;
|
||||
background-color: #007AFF;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 投诉状态区域 */
|
||||
.status-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.completedDesc {
|
||||
color: #2F77FD;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 32rpx;
|
||||
color: #007AFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 详情信息项通用样式 */
|
||||
.info-item {
|
||||
display: flex;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 220rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 问题描述特殊样式（多行文本） */
|
||||
.desc-item {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.desc-value {
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 问题照片区域 */
|
||||
.photo-section {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.photo-label {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.photo-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 自动换行 */
|
||||
gap: 20rpx;
|
||||
/* 图片之间的间距（可改） */
|
||||
margin: 10rpx 0px 20rpx 0px;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
width: calc(33.333% - 14rpx);
|
||||
height: 66px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.pending {
|
||||
color: #2F77FD;
|
||||
}
|
||||
|
||||
.processing {
|
||||
color: #2F77FD;
|
||||
}
|
||||
|
||||
.completed {
|
||||
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,382 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="投诉建议" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
<!-- 1. 顶部分段控制器 -->
|
||||
<view style="width: 60vw;">
|
||||
<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onTabClick" style-type="text"
|
||||
active-color="#007AFF" inactive-color="#999" class="seg-control"></uni-segmented-control>
|
||||
</view>
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="page-container">
|
||||
|
||||
<!-- 2. 投诉卡片主体 -->
|
||||
<view class="card-wrapper" v-for="item,index in dataList" :key="index">
|
||||
<!-- 卡片头部：标题 + 标签 -->
|
||||
<view class="card-header">
|
||||
<text class="card-title">{{item.title}}</text>
|
||||
<text class="card-tag"
|
||||
:class="item.status=='pending'?'pending':item.status=='processing'?'processing':item.status=='completed'?'completed':''">{{item.status=='pending'?'待处理':item.status=='processing'?'处理中':item.status=='completed'?'已完成':''}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 卡片内容：描述 + 横向图片 -->
|
||||
<view class="card-body">
|
||||
<text class="card-desc">
|
||||
{{item.desc}}
|
||||
</text>
|
||||
|
||||
<!-- 横向图片滚动区 -->
|
||||
<view class="img-scroll-container">
|
||||
<view v-for="(img, imgIndex) in item.imgList" :key="imgIndex" class="img-item">
|
||||
<image :src="img" mode="widthFix" class="card-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时间 & 详情 -->
|
||||
<view class="card-footer">
|
||||
<text class="card-time">{{item.time}}</text>
|
||||
<text class="card-detail" @click="turnToDetail(item)">投诉详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<view class="bottom-btn-wrap">
|
||||
<button class="next-btn" @click="addComplaintsSuggestions">投诉建议</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 分段器数据
|
||||
tabs: ["待处理", "处理中", "已完成"],
|
||||
currentTab: 0,
|
||||
dataList: [],
|
||||
pendingList: [{
|
||||
id: 1,
|
||||
title: '社区服务',
|
||||
status: 'pending',
|
||||
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
time: '2026-08-01 10:05:46',
|
||||
imgList: [
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community1.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community2.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community3.png"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '社区服务',
|
||||
status: 'pending',
|
||||
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
time: '2026-08-01 10:05:46',
|
||||
imgList: [
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community1.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community2.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community3.png"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '社区服务',
|
||||
status: 'pending',
|
||||
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
time: '2026-08-01 10:05:46',
|
||||
imgList: [
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community1.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community2.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community3.png"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '社区服务',
|
||||
status: 'pending',
|
||||
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
time: '2026-08-01 10:05:46',
|
||||
imgList: [
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community1.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community2.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community3.png"
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
processingList: [{
|
||||
id: 2,
|
||||
title: '社区服务',
|
||||
status: 'processing',
|
||||
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
time: '2026-08-01 10:05:46',
|
||||
imgList: []
|
||||
}],
|
||||
completedList: [{
|
||||
id: 3,
|
||||
title: '社区服务',
|
||||
status: 'completed',
|
||||
desc: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||||
time: '2026-08-01 10:05:46',
|
||||
imgList: [
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community1.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community2.png",
|
||||
"http://47.104.199.163:9090/images/propertyImgs/community3.png"
|
||||
]
|
||||
}],
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
turnToDetail(item) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/service-list/complaintsDetail?id=' + item.id + '&status=' + item.status,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
getDataList() {
|
||||
if (this.currentTab == 0) {
|
||||
this.dataList = this.pendingList
|
||||
} else if (this.currentTab == 1) {
|
||||
|
||||
this.dataList = this.processingList
|
||||
} else if (this.currentTab == 2) {
|
||||
|
||||
this.dataList = this.completedList
|
||||
}
|
||||
},
|
||||
addComplaintsSuggestions() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/service-list/addComplaints',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
|
||||
},
|
||||
onTabClick(e) {
|
||||
this.currentTab = e.currentIndex;
|
||||
this.getDataList()
|
||||
},
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/serviceIndex/serviceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
/* --- 分段控制器样式 --- */
|
||||
.seg-control {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.cardScroll {
|
||||
padding: 0rpx 0rpx 0px 0rpx;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* --- 卡片主体样式 --- */
|
||||
.card-wrapper {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
/* 卡片头部：标题 & 标签 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
font-size: 24rpx;
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.pending {
|
||||
background: #E34D59;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.processing {
|
||||
background: #09C2BD;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.completed {
|
||||
background: #2F77FD;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 卡片内容区 */
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
/* 描述文本 */
|
||||
.card-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 图片容器 */
|
||||
.img-scroll-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 自动换行 */
|
||||
gap: 20rpx;
|
||||
/* 图片之间的间距（可改） */
|
||||
margin: 10rpx 0px 20rpx 0px;
|
||||
}
|
||||
|
||||
/* 单个图片项 */
|
||||
.img-item {
|
||||
width: calc(33.333% - 14rpx);
|
||||
height: 52px;
|
||||
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 底部栏：时间 & 详情 */
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-time {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.card-detail {
|
||||
font-size: 26rpx;
|
||||
color: #2F77FD;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background-color: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
border-radius: 12rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,210 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="联系物业" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="property-card" v-for="item,index in dataList" :key="index">
|
||||
<view class="topBox">
|
||||
<!-- 左侧头像 -->
|
||||
<image class="avatar" :src="item.src" mode="aspectFill"></image>
|
||||
<!-- 右侧信息区 -->
|
||||
<view class="info-content">
|
||||
<!-- 物业名称 -->
|
||||
<view class="property-name">{{item.propertyName}}</view>
|
||||
<!-- 物业地址 -->
|
||||
<view class="property-address">{{item.propertyAddress}}</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- 值班电话 -->
|
||||
<view class="phone-item" v-for="phoneItems,phoneIndex in item.phoneList" :key="phoneIndex">
|
||||
<text class="phone-label">值班电话：</text>
|
||||
<text class="phone-num">{{phoneItems.phoneNum}}</text>
|
||||
<!-- <text class="phone-icon"></text> -->
|
||||
<uni-icons type="phone" size="16" color="#2F77FD"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
dataList: [{
|
||||
src: 'http://47.104.199.163:9090/images/propertyImgs/community1.png',
|
||||
propertyName: '北境碧桂园小区物业中心',
|
||||
propertyAddress: 'A栋3单元1801',
|
||||
phoneList: [{
|
||||
phoneNum: '080-12312312312',
|
||||
|
||||
},
|
||||
{
|
||||
phoneNum: '080-12312312312',
|
||||
|
||||
}
|
||||
],
|
||||
}],
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 电话点击拨号
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone.replace(/-/g, "")
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/serviceIndex/serviceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
/* 卡片容器 */
|
||||
.property-card {
|
||||
padding: 30rpx;
|
||||
/* margin: 0px 40rpx 40rpx 40rpx; */
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.topBox {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 信息内容区 */
|
||||
.info-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
/* 物业名称 */
|
||||
.property-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
/* 物业地址 */
|
||||
.property-address {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
/* 电话行 */
|
||||
.phone-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
/* 电话标签 */
|
||||
.phone-label {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 电话号码 */
|
||||
.phone-num {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 电话图标 */
|
||||
.phone-icon {
|
||||
font-size: 24rpx;
|
||||
color: #409eff !important;
|
||||
/* 蓝色，和原图一致 */
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.status-bar{
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="问卷调查" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<!-- 问卷标题 -->
|
||||
<view class="survey-title">关于用户体验反馈的调查</view>
|
||||
|
||||
<!-- 问卷说明 -->
|
||||
<view class="survey-desc">
|
||||
为了给您提供更好的服务，希望您能抽出几分钟时间，将进的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！
|
||||
</view>
|
||||
|
||||
<!-- 问题1：社区大门数量 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>1.您社区的大门数量
|
||||
</view>
|
||||
<view class="answer-text">1</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题2：消防演练符合项 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>2.您所在的社区，关于消防演练，下列符合几项
|
||||
</view>
|
||||
<view class="answer-text">一周2~3次</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题3：健康医疗服务 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>3.您所在的社区是否有健康医疗服务
|
||||
</view>
|
||||
<view class="answer-text">是</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题4：综合评分（星级） -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>4.您对所在社区的综合评分
|
||||
</view>
|
||||
<view class="star-container">
|
||||
<view v-for="(item, index) in 5" :key="index" class="star-item" :class="{ active: index < score }">
|
||||
<text class="star-icon">★</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题5：建议 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>5.您还有哪些建议
|
||||
</view>
|
||||
<view class="answer-text">没有其他建议</view>
|
||||
<!-- 如需可编辑输入框，替换为下方textarea -->
|
||||
<!-- <textarea class="suggest-input" placeholder="请输入您的建议" v-model="suggestion" /> -->
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
score: 3, // 默认3星，对应原图
|
||||
suggestion: ''
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/service-list/questionnaireSurveyIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
/* 滚动内容区 */
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
/* 标题与描述 */
|
||||
.survey-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin: 0px 0 20rpx 0;
|
||||
;
|
||||
}
|
||||
|
||||
.survey-desc {
|
||||
font-size: 24rpx;
|
||||
color: #4A4A4A;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.question-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.question-title {
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff0000;
|
||||
font-size: 34rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.answer-text {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
/* 星级评分样式 */
|
||||
.star-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.star-item {
|
||||
font-size: 48rpx;
|
||||
color: #dcdcdc;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.star-item.active {
|
||||
color: #409eff;
|
||||
/* 蓝色，和原图一致 */
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* 建议输入框样式（如需可编辑） */
|
||||
.suggest-input {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
background: #fff;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,498 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="问卷调查" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
|
||||
|
||||
<view class="content-wrap">
|
||||
<!-- 问卷标题 -->
|
||||
<view class="survey-title">关于用户体验反馈的调查</view>
|
||||
|
||||
<!-- 问卷说明 -->
|
||||
<view class="survey-desc">
|
||||
为了给您提供更好的服务，希望您能抽出几分钟时间，将进的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！
|
||||
</view>
|
||||
|
||||
<!-- 问题1：单选 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>1.您社区的大门数量
|
||||
</view>
|
||||
<view class="radio-group">
|
||||
<view class="radio-item" v-for="(item, index) in q1Options" :key="index"
|
||||
@click="selectRadio(1, index)">
|
||||
<view class="radio-circle" :class="{ checked: q1Selected === index }">
|
||||
<text v-if="q1Selected === index" class="check-icon">✓</text>
|
||||
</view>
|
||||
<text class="radio-label">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题2：单选 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>2.您所在的社区，关于消防演练，下列符合几项
|
||||
</view>
|
||||
<view class="radio-group">
|
||||
<view class="radio-item" v-for="(item, index) in q2Options" :key="index"
|
||||
@click="selectRadio(2, index)">
|
||||
<view class="radio-circle" :class="{ checked: q2Selected === index }">
|
||||
<text v-if="q2Selected === index" class="check-icon">✓</text>
|
||||
</view>
|
||||
<text class="radio-label">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题3：自定义 Select (核心部分，不使用 picker) -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>3.您所在的社区是否有健康医疗服务
|
||||
</view>
|
||||
<!-- 模拟输入框，点击展开下拉 -->
|
||||
<view class="select-wrapper" @click="toggleDropdown">
|
||||
<text class="select-text" v-if="q3Selected">
|
||||
{{ q3Selected }}
|
||||
</text>
|
||||
<text class="select-placeholder" v-else>
|
||||
请选择是否有该项服务
|
||||
</text>
|
||||
<text class="select-arrow">▼</text>
|
||||
</view>
|
||||
|
||||
<!-- 下拉面板 (遮罩 + 列表) -->
|
||||
<view class="dropdown-mask" v-if="showDropdown" @click="hideDropdown"></view>
|
||||
<view class="dropdown-panel" v-if="showDropdown">
|
||||
<view class="dropdown-item" v-for="(item, index) in q3Options" :key="index"
|
||||
@click="selectQ3(index)" :class="{ active: index === q3Index }">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题4：星级评分 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>4.您对所在社区的综合评分
|
||||
</view>
|
||||
<view class="star-group">
|
||||
<view class="star-item" v-for="(item, index) in 5" :key="index" @click="selectStar(index + 1)">
|
||||
<text class="star-icon" :class="{ active: index < q4Score }">★</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 问题5：文本输入 -->
|
||||
<view class="question-item">
|
||||
<view class="question-title">
|
||||
<text class="required">*</text>5.您还有哪些建议
|
||||
</view>
|
||||
<textarea class="textarea-input" v-model="q5Content" placeholder="请输入您还有哪些建议" maxlength="500" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<!-- 固定底部提交按钮 -->
|
||||
<view class="submit-btn-wrap">
|
||||
<button class="submit-btn" @click="handleSubmit">提交</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 问题1
|
||||
q1Options: ['1', '2', '3', '4'],
|
||||
q1Selected: -1,
|
||||
// 问题2
|
||||
q2Options: ['一周2~3次', '一月2~3次', '一年2~3次', '基本不买'],
|
||||
q2Selected: -1,
|
||||
// 问题3 (自定义Select)
|
||||
q3Options: ['有', '无'], // 选项列表
|
||||
q3Selected: '', // 绑定显示值
|
||||
q3Index: -1, // 绑定索引
|
||||
showDropdown: false, // 控制下拉面板显示
|
||||
// 问题4
|
||||
q4Score: -1,
|
||||
// 问题5
|
||||
q5Content: ''
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
selectRadio(type, index) {
|
||||
if (type === 1) this.q1Selected = index
|
||||
else this.q2Selected = index
|
||||
},
|
||||
// 问题3：切换下拉显示
|
||||
toggleDropdown() {
|
||||
this.showDropdown = !this.showDropdown
|
||||
},
|
||||
// 问题3：隐藏下拉
|
||||
hideDropdown() {
|
||||
this.showDropdown = false
|
||||
},
|
||||
// 问题3：选择选项
|
||||
selectQ3(index) {
|
||||
this.q3Index = index
|
||||
this.q3Selected = this.q3Options[index]
|
||||
this.hideDropdown() // 选择后自动关闭
|
||||
},
|
||||
// 问题4
|
||||
selectStar(score) {
|
||||
this.q4Score = score
|
||||
},
|
||||
// 提交
|
||||
handleSubmit() {
|
||||
if (this.q1Selected === -1) {
|
||||
uni.showToast({
|
||||
title: '请选择社区大门数量',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.q2Selected === -1) {
|
||||
uni.showToast({
|
||||
title: '请选择社区消防演练频率',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.q3Index === -1) {
|
||||
uni.showToast({
|
||||
title: '请选择社区是否有健康医疗服务',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.q4Score === -1) {
|
||||
uni.showToast({
|
||||
title: '请选择对社区的综合评分',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.q5Content.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入建议',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '提交中...',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
// 提交成功后跳转列表页
|
||||
uni.hideLoading();
|
||||
this.goBack();
|
||||
}, 2500);
|
||||
},
|
||||
goBack() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/service-list/questionnaireSurveyIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
/* 滚动内容区 */
|
||||
.content-scroll {}
|
||||
|
||||
.content-wrap {
|
||||
// padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 标题与描述 */
|
||||
.survey-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin: 0px 0 20rpx 0;
|
||||
;
|
||||
}
|
||||
|
||||
.survey-desc {
|
||||
font-size: 24rpx;
|
||||
color: #4A4A4A;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* 问题项 */
|
||||
.question-item {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.question-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom:10rpx;
|
||||
line-height: 1.4;
|
||||
|
||||
.required {
|
||||
color: #ff3b30;
|
||||
font-size: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 单选按钮 */
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.radio-circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.checked {
|
||||
background-color: #007aff;
|
||||
border-color: #007aff;
|
||||
|
||||
.check-icon {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* 核心：自定义 Select 样式 (模拟输入框) */
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
background-color: #fff;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.select-placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.select-arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 下拉遮罩层 */
|
||||
.dropdown-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* 下拉面板 */
|
||||
.dropdown-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 400rpx;
|
||||
background-color: #fff;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
z-index: 100;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #007aff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 星级评分 */
|
||||
.star-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-left: 30rpx;
|
||||
|
||||
.star-icon {
|
||||
font-size: 56rpx;
|
||||
color: #e5e5e5;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.active {
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 文本输入框 */
|
||||
.textarea-input {
|
||||
width: calc(100% - 30rpx);
|
||||
min-height: 240rpx;
|
||||
padding: 20rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
background-color: #fff;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
/* 底部占位 & 提交按钮 */
|
||||
.bottom-placeholder {
|
||||
height: 120rpx; // 高度要大于等于按钮高度
|
||||
}
|
||||
|
||||
.submit-btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
// background-color: #fff;
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 12rpx;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,357 +0,0 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<uni-nav-bar title="问卷调查" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
|
||||
</uni-nav-bar>
|
||||
|
||||
|
||||
<view style="width: 40vw;">
|
||||
<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="switchTab" style-type="text"
|
||||
active-color="#007AFF" inactive-color="#999" class="seg-control"></uni-segmented-control>
|
||||
</view>
|
||||
<!-- 表单区域 -->
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="list-container">
|
||||
<view v-for="(item, index) in currentList" :key="index" class="list-item" :class="{
|
||||
disabled: currentTab === 1,
|
||||
selected: currentTab === 0 && item.status === '已参与'
|
||||
}" @click="handleItemClick(item)">
|
||||
<view class="item-content">
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
<view class="item-info">
|
||||
<text class="info-time">{{ item.time }}</text>
|
||||
<text class="info-community">{{ item.community }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-status"
|
||||
:class="{joined: currentTab === 0 &&item.status === '已参与',unjoined: item.status === '未参与'||currentTab === 1, }">
|
||||
{{ item.status }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 占位 -->
|
||||
<view style="width: 100%;height:2rpx;"> </view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
// 计算当前显示的列表
|
||||
currentList() {
|
||||
return this.currentTab === 0 ? this.collectingList : this.endedList;
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getDataList()
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
currentTab: 0, // 0=收集中，1=已结束
|
||||
tabs: ["收集中", "已结束"],
|
||||
// 收集中列表数据
|
||||
collectingList: [{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '已参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
}, {
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
}, {
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2026-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
],
|
||||
// 已结束列表数据
|
||||
endedList: [{
|
||||
title: '问卷调查名称问卷调查名称问卷调查...',
|
||||
time: '2023-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '已参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称调查...',
|
||||
time: '2023-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
{
|
||||
title: '问卷调查名称问卷调查名称调查...',
|
||||
time: '2023-09-01 11:00:56',
|
||||
community: '阳光海岸社区',
|
||||
status: '未参与',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// Tab切换
|
||||
|
||||
switchTab(e) {
|
||||
this.currentTab = e.currentIndex;
|
||||
this.getDataList()
|
||||
},
|
||||
|
||||
// 列表项点击
|
||||
handleItemClick(item) {
|
||||
if (item.status == '已参与') {
|
||||
this.turnToDetail(item)
|
||||
} else {
|
||||
if (this.currentTab === 0) {
|
||||
this.turnToFillout(item)
|
||||
} else if (this.currentTab === 1) {
|
||||
// 未参与的已结束问卷
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
turnToFillout(item) {
|
||||
// 跳转到问卷填写
|
||||
uni.redirectTo({
|
||||
url: `/pages/service-list/questionnaireFillout`,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
turnToDetail(item) {
|
||||
// 跳转到问卷详情
|
||||
uni.redirectTo({
|
||||
url: `/pages/service-list/questionnaireDetail`,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
getDataList() {
|
||||
if (this.currentTab == 0) {
|
||||
this.dataList = this.collectingList
|
||||
} else if (this.currentTab == 1) {
|
||||
|
||||
this.dataList = this.endedList
|
||||
}
|
||||
},
|
||||
|
||||
onTabClick(e) {
|
||||
this.currentTab = e.currentIndex;
|
||||
this.getDataList()
|
||||
},
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/serviceIndex/serviceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
/* --- 分段控制器样式 --- */
|
||||
.seg-control {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.cardScroll {
|
||||
padding: 0rpx 0rpx 0px 0rpx;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* 列表区域 */
|
||||
.list-scroll {
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border:2rpx solid #E6E6E6;
|
||||
background-color: #fff;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
|
||||
.item-title,
|
||||
.item-info {}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border:2rpx solid #2F77FD;
|
||||
background-color: #F5FAFF;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
// flex: 1;
|
||||
width: calc(100% - 100rpx);
|
||||
// margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
line-height: 44rpx;
|
||||
margin-bottom:10rpx;
|
||||
/* 超长文本省略 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.info-time,
|
||||
.info-community {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 32rpx;
|
||||
/* 超长文本省略 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.item-status {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
padding: 0px 0px;
|
||||
border-radius:8rpx;
|
||||
|
||||
&.joined {
|
||||
color: #2F77FD;
|
||||
}
|
||||
|
||||
&.unjoined {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
@@ -52,132 +52,98 @@
|
||||
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {},
|
||||
components: {
|
||||
|
||||
const commonFuncList = ref([{
|
||||
name: "一键开门",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-door.png",
|
||||
path: "/pageSubPack/notice-list/oneClickOpen"
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
|
||||
|
||||
|
||||
{
|
||||
name: "生活缴费",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-pay.png",
|
||||
path: "/pageSubPack/payment-list/paymentIndex"
|
||||
},
|
||||
created() {
|
||||
|
||||
{
|
||||
name: "在线报修",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-repair.png",
|
||||
path: "/pageSubPack/online-repair/onlineRepair"
|
||||
},
|
||||
onShow() {
|
||||
|
||||
{
|
||||
name: "访客邀请",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-visitor.png",
|
||||
path: "/pageSubPack/visitor/visitor-list"
|
||||
}
|
||||
])
|
||||
const communityFuncList = ref([{
|
||||
name: "一键开门",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-door.png",
|
||||
path: "/pageSubPack/notice-list/oneClickOpen"
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
|
||||
})
|
||||
{
|
||||
name: "生活缴费",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-pay.png",
|
||||
path: "/pageSubPack/payment-list/paymentIndex"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
// 常用功能列表
|
||||
commonFuncList: [{
|
||||
name: "一键开门",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-door.png",
|
||||
path: "/pages/notice-list/oneClickOpen"
|
||||
},
|
||||
{
|
||||
name: "生活缴费",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-pay.png",
|
||||
path: "/pages/payment-list/paymentIndex"
|
||||
},
|
||||
{
|
||||
name: "在线报修",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-repair.png",
|
||||
path: "/pages/online-repair/onlineRepair"
|
||||
},
|
||||
{
|
||||
name: "访客邀请",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-visitor.png",
|
||||
path: "/pages/visitor/visitor-list"
|
||||
}
|
||||
],
|
||||
// 智慧社区功能列表
|
||||
communityFuncList: [{
|
||||
name: "一键开门",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-door.png",
|
||||
path: "/pages/notice-list/oneClickOpen"
|
||||
},
|
||||
{
|
||||
name: "生活缴费",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-pay.png",
|
||||
path: "/pages/payment-list/paymentIndex"
|
||||
},
|
||||
{
|
||||
name: "在线报修",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-repair.png",
|
||||
path: "/pages/online-repair/onlineRepair"
|
||||
},
|
||||
{
|
||||
name: "访客邀请",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-visitor.png",
|
||||
path: "/pages/visitor/visitor-list"
|
||||
},
|
||||
{
|
||||
name: "投诉意见",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-complaint.png",
|
||||
path: "/pages/service-list/complaintsSuggestionsIndex"
|
||||
},
|
||||
{
|
||||
name: "问卷调查",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-survey.png",
|
||||
path: "/pages/service-list/questionnaireSurveyIndex"
|
||||
},
|
||||
{
|
||||
name: "社区活动",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-activity.png",
|
||||
path: "/pages/activity-list/activityList"
|
||||
},
|
||||
{
|
||||
name: "公告公示",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-notice.png",
|
||||
path: "/pages/notice-list/noticeList"
|
||||
},
|
||||
{
|
||||
name: "联系物业",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-contact.png",
|
||||
path: "/pages/service-list/contactProperty"
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
{
|
||||
name: "在线报修",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-repair.png",
|
||||
path: "/pageSubPack/online-repair/onlineRepair"
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 功能点击事件
|
||||
handleFuncClick(item) {
|
||||
console.log(item.path);
|
||||
uni.setStorageSync('sourcePage', 'serviceIndex')
|
||||
uni.redirectTo({
|
||||
url: item.path,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
name: "访客邀请",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-visitor.png",
|
||||
path: "/pageSubPack/visitor/visitor-list"
|
||||
},
|
||||
{
|
||||
name: "投诉意见",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-complaint.png",
|
||||
path: "/pageSubPack/service-list/complaintsSuggestionsIndex"
|
||||
},
|
||||
{
|
||||
name: "问卷调查",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-survey.png",
|
||||
path: "/pageSubPack/service-list/questionnaireSurveyIndex"
|
||||
},
|
||||
{
|
||||
name: "社区活动",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-activity.png",
|
||||
path: "/pageSubPack/activity-list/activityList"
|
||||
},
|
||||
{
|
||||
name: "公告公示",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-notice.png",
|
||||
path: "/pageSubPack/notice-list/noticeList"
|
||||
},
|
||||
{
|
||||
name: "联系物业",
|
||||
icon: "http://47.104.199.163:9090/images/propertyImgs/icon-contact.png",
|
||||
path: "/pageSubPack/service-list/contactProperty"
|
||||
}
|
||||
])
|
||||
const loginName = ref("wangh")
|
||||
const phoneNum = ref('156*****1212')
|
||||
|
||||
// --方法----
|
||||
|
||||
const handleFuncClick = (item) => {
|
||||
|
||||
uni.setStorageSync('sourcePage', 'serviceIndex')
|
||||
uni.redirectTo({
|
||||
url: item.path,
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f2f1f6;
|
||||
|
||||
Reference in New Issue
Block a user