zhuibobo
/
EnforcementCode-2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

页面调整

dev-V1.0.1
wangmingyong 6 months ago
parent
cfef9d8464
commit
1a6bd6339a
4 changed files with 147 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 59
      zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/enforcement/enforcementEvaluateDetail.vue
  2. 4
      zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/message/messageCenter.vue
  3. 83
      zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/my/complaintSuggestion.vue
  4. 59
      zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/my/settings.vue

59
zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/enforcement/enforcementEvaluateDetail.vue
View File

@ -98,9 +98,11 @@
:class="{ active: evaluateForm.satisfaction === '满意' }"
@click="evaluateForm.satisfaction = '满意'"
>
<div class="emoji-icon happy">
<van-icon name="smile-o" size="32" />
</div>
<img
class="emoji-img"
:src="evaluateForm.satisfaction === '满意' ? veryGoodImg : veryGoodDisImg"
alt="满意"
/>
<span class="emoji-label">满意</span>
</div>
<div
@ -108,9 +110,11 @@
:class="{ active: evaluateForm.satisfaction === '较满意' }"
@click="evaluateForm.satisfaction = '较满意'"
>
<div class="emoji-icon normal">
<van-icon name="smile-comment-o" size="32" />
</div>
<img
class="emoji-img"
:src="evaluateForm.satisfaction === '较满意' ? goodImg : goodDisImg"
alt="较满意"
/>
<span class="emoji-label">较满意</span>
</div>
<div
@ -118,9 +122,11 @@
:class="{ active: evaluateForm.satisfaction === '不满意' }"
@click="evaluateForm.satisfaction = '不满意'"
>
<div class="emoji-icon unhappy">
<van-icon name="warning-o" size="32" />
</div>
<img
class="emoji-img"
:src="evaluateForm.satisfaction === '不满意' ? badImg : badDisImg"
alt="不满意"
/>
<span class="emoji-label">不满意</span>
</div>
</div>
@ -192,6 +198,12 @@
<script setup name="enforcementEvaluateDetail">
import { showToast } from 'vant';
import 'vant/es/toast/style';
import veryGoodImg from '@/assets/images/eval-verygood.png';
import veryGoodDisImg from '@/assets/images/eval-verygood-dis.png';
import goodImg from '@/assets/images/eval-good.png';
import goodDisImg from '@/assets/images/eval-good-dis.png';
import badImg from '@/assets/images/eval-bad.png';
import badDisImg from '@/assets/images/eval-bad-dis.png';
const router = useRouter();
const route = useRoute();
@ -409,36 +421,17 @@ const onSubmit = () => {
&.active {
opacity: 1;
.emoji-icon {
.emoji-img {
transform: scale(1.1);
}
}
}
.emoji-icon {
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.1rem;
.emoji-img {
width: 40px;
height: 40px;
margin-bottom: 4px;
transition: transform 0.2s;
&.happy {
background: #fff3e0;
color: #ff9800;
}
&.normal {
background: #f5f5f5;
color: #999;
}
&.unhappy {
background: #ffebee;
color: #f44336;
}
}
.emoji-label {

4
zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/message/messageCenter.vue
View File

@ -296,7 +296,7 @@ onMounted(() => {
.header-bg {
background: url('@/assets/images/bg_msg.jpg') center center no-repeat;
background-size: 100% 100%;
height: 200px;
height: 220px;
}
.header-content {
@ -319,7 +319,7 @@ onMounted(() => {
margin-top: -10px;
// background: #105ccf;
border-radius: 12px 12px 0 0;
top: -58px;
top: -65px;
}
/* ===== Tab 样式覆盖 ===== */

83
zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/my/complaintSuggestion.vue
View File

@ -60,26 +60,41 @@
{ required: true, message: '请填写联系电话' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
]" class="contact-field" required />
<!-- 是否授权 -->
<div class="authorize-bar">
<van-icon name="info" color="#2b7de9" size="18" />
<span class="authorize-text">是否授权</span>
<van-radio-group v-model="form.authorized" direction="horizontal">
<van-radio :name="true">
<template #icon="{ checked }">
<div class="custom-radio-icon" :class="{ checked }">
<van-icon v-if="checked" name="success" size="10" color="#fff" />
</div>
</template>
同意
</van-radio>
<van-radio :name="false">
<template #icon="{ checked }">
<div class="custom-radio-icon" :class="{ checked }">
<van-icon v-if="checked" name="success" size="10" color="#fff" />
</div>
</template>
不同意
</van-radio>
</van-radio-group>
</div>
<div class="remark-text">注:选择“同意”，处置部门将通过登记的联系人、联系电话与您联系，并对您的个人信息严格保密。</div>
</div>
<!-- 是否授权 -->
<div class="authorize-bar">
<van-icon name="info" color="#f5a623" size="18" />
<span class="authorize-text">是否授权</span>
<van-radio-group v-model="form.authorized" direction="horizontal">
<van-radio :name="true" checked-color="#2b7de9" icon-size="16">同意</van-radio>
<van-radio :name="false" icon-size="16">不同意</van-radio>
</van-radio-group>
</div>
<!-- 底部提交栏 -->
<div class="footer-bar">
<van-button type="primary" block round native-type="submit" :loading="submitting" loading-text="提交中...">提交</van-button>
<van-button type="primary" block round native-type="submit" :loading="submitting"
loading-text="提交中...">提交</van-button>
</div>
</van-form>
<!-- 投诉事项选择弹窗 -->
<ComplaintItemPicker v-model:show="showComplaintItemPicker" :list="complaintItemList" @select="onComplaintItemSelect" />
<ComplaintItemPicker v-model:show="showComplaintItemPicker" :list="complaintItemList"
@select="onComplaintItemSelect" />
<!-- 地址级联选择弹窗 -->
<van-popup v-model:show="showAddressPicker" position="bottom" :style="{ width: '100%', height: '60%' }">
@ -88,7 +103,8 @@
</van-popup>
<!-- 投诉类型选择弹窗 -->
<ComplaintTypePicker v-model:show="showComplaintTypePicker" :columns="complaintTypeList" @confirm="onComplaintTypeConfirm" />
<ComplaintTypePicker v-model:show="showComplaintTypePicker" :columns="complaintTypeList"
@confirm="onComplaintTypeConfirm" />
<!-- 执法单位查询弹窗 -->
<BureauPicker v-model:show="showBureauPicker" :list="bureauList" @confirm="onBureauConfirm" />
@ -419,10 +435,9 @@ const onFailed = (errorInfo) => {
.authorize-bar {
display: flex;
align-items: center;
background: #fff7e6;
background: #fff;
border-radius: 0.2rem;
padding: 0.25rem 0.3rem;
margin-bottom: 0.27rem;
padding: 0.25rem 0.48rem;
gap: 0.2rem;
.authorize-text {
@ -430,13 +445,41 @@ const onFailed = (errorInfo) => {
font-size: 0.32rem;
color: #333;
}
}
.remark-text {
font-size: 0.28rem;
color: #999;
padding:0px 20px 20px 20px;
box-sizing: border-box;
}
.auth-option {
.custom-radio-icon {
width: 16px;
height: 16px;
border: 1px solid #c8c9cc;
border-radius: 3px;
display: flex;
align-items: center;
gap: 0.1rem;
cursor: pointer;
justify-content: center;
box-sizing: border-box;
&.checked {
background-color: #2b7de9;
border-color: #2b7de9;
}
}
:deep(.van-radio) {
margin-right: 0.2rem;
&:last-child {
margin-right: 0;
}
}
:deep(.van-radio__label) {
font-size: 0.28rem;
color: #333;
}

59
zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/my/settings.vue
View File

@ -21,24 +21,46 @@
<span class="item-text">公司名称</span>
<span class="item-value">深圳市新粤云技术有限公司</span>
</div>
<div class="settings-item" @click="onItemClick('联系电话')">
<div class="settings-item" @click="onEditPhone">
<span class="item-text">联系电话</span>
<div class="item-right">
<span class="item-value">18358047213</span>
<span class="item-value">{{ phone }}</span>
<van-icon name="arrow" class="item-arrow" />
</div>
</div>
</div>
</div>
<!-- 修改电话弹窗 -->
<van-dialog
v-model:show="showPhoneDialog"
title="修改联系电话"
show-cancel-button
:before-close="onBeforeClose"
>
<van-field
v-model="editPhone"
type="tel"
placeholder="请输入联系电话"
maxlength="11"
:rules="[{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
/>
</van-dialog>
</div>
</template>
<script setup name="settings">
import { ref } from 'vue';
import { showToast } from 'vant';
import 'vant/es/toast/style';
const router = useRouter();
// ========== 联系电话 ==========
const phone = ref('18358047213');
const showPhoneDialog = ref(false);
const editPhone = ref('');
// ========== 返回上一页 ==========
const onClickLeft = () => {
router.back();
@ -46,7 +68,38 @@ const onClickLeft = () => {
// ========== 点击设置项 ==========
const onItemClick = (name) => {
showToast(`${name}功能开发中`);
// showToast(`${name}功能开发中`);
};
// ========== 编辑电话 ==========
const onEditPhone = () => {
editPhone.value = phone.value;
showPhoneDialog.value = true;
};
// ========== 弹窗关闭前校验 ==========
const onBeforeClose = (action) => {
return new Promise((resolve) => {
if (action === 'cancel') {
editPhone.value = '';
resolve(true);
return;
}
const pattern = /^1[3-9]\d{9}$/;
if (!editPhone.value) {
showToast('请输入联系电话');
resolve(false);
return;
}
if (!pattern.test(editPhone.value)) {
showToast('请输入正确的手机号');
resolve(false);
return;
}
phone.value = editPhone.value;
showToast('联系电话已更新');
resolve(true);
});
};
</script>

Write Preview
Loading…
Cancel
Save