You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
475 lines
11 KiB
475 lines
11 KiB
<template>
|
|
<div class="address_edit">
|
|
<!-- 中间 -->
|
|
<div class="warp_body">
|
|
<van-form @failed="onFailed" @submit="submit">
|
|
<van-cell-group>
|
|
<van-field
|
|
v-model="submitData.enforcementName"
|
|
label="案件"
|
|
placeholder="请选择"
|
|
readonly
|
|
required
|
|
:rules="[{ required: true, message: '请选择案件' }]"
|
|
clickable
|
|
is-link
|
|
@click="showPopup"
|
|
/>
|
|
<Popup :visible="popupVisible" :content="popupContent" @close="closePopup" @reciveData="reciveData"/>
|
|
<van-field
|
|
v-model="submitData.evaluateDescription"
|
|
rows="5"
|
|
autosize
|
|
label="评价｜建议"
|
|
type="textarea"
|
|
maxlength="100"
|
|
placeholder="请输入评价｜意见建议"
|
|
required
|
|
:rules="[{ required: true, message: '请输入评价｜意见建议' }]"
|
|
show-word-limit
|
|
/>
|
|
<van-divider class="divdsty"/>
|
|
<van-field
|
|
v-model="submitData.linkman"
|
|
label="联系人"
|
|
placeholder="联系人"
|
|
required
|
|
:rules="[{ required: true, message: '请填写联系人' }]"
|
|
/>
|
|
<van-field
|
|
v-model="submitData.linkmanTel"
|
|
label="联系电话"
|
|
placeholder="联系电话"
|
|
required
|
|
:rules="[{ validator, message: '请输入正确内容' }]"
|
|
/>
|
|
<div class="agree-box">
|
|
<span class="remsty">是否授权</span>
|
|
<span class="accept-item"><input class="checksty" type="checkbox" name="" value="" v-model="data.isCheckedon" @click="selectCh(1)">同意</span>
|
|
<span class="accept-item"><input class="checksty" type="checkbox" name="" value="" v-model="data.isCheckedoff" @click="selectCh(0)">不同意</span>
|
|
</div>
|
|
<div class="agree-remark">
|
|
<span class="accept-item">注：选择“同意”，处置部门将通过登记的联系人、联系电话与您联系，并对您的个人信息严格保密。</span>
|
|
</div>
|
|
</van-cell-group>
|
|
<van-action-bar>
|
|
<van-button round block type="info" native-type="submit">提交</van-button>
|
|
</van-action-bar>
|
|
</van-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="register">
|
|
|
|
import {reactive, ref} from "vue";
|
|
const {useCommon, useMy} = $globalStore
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const data = reactive({
|
|
isCheckedon: false,
|
|
isCheckedoff: false
|
|
});
|
|
//保存参数
|
|
const submitData = reactive({
|
|
// 用户id
|
|
userId: ref(useCommon.userId),
|
|
/** 案件名称 */
|
|
enforcementName: "",
|
|
/** 案件ID */
|
|
enforcementId: "",
|
|
/** 评价｜意见建议 */
|
|
evaluateDescription: "",
|
|
/** 联系人 */
|
|
linkman: "",
|
|
/** 联系电话 */
|
|
linkmanTel: "",
|
|
/** 是否授权 0 否 1是 */
|
|
authorization: "",
|
|
})
|
|
|
|
|
|
// 返回
|
|
const goBack = () => {
|
|
router.go(-1);
|
|
};
|
|
|
|
const validator = (val) => /^1[34578]\d{9}$/.test(val);
|
|
|
|
const reciveData = (item) => {
|
|
console.log(item)
|
|
submitData.enforcementName = item.lawEnforcementItemText;
|
|
submitData.enforcementId = item.id;
|
|
}
|
|
|
|
const selectCh =(val) => {
|
|
submitData.authorization = val;
|
|
if(val == 0) {
|
|
data.isCheckedon = false;
|
|
data.isCheckedoff = true;
|
|
} else {
|
|
data.isCheckedon = true;
|
|
data.isCheckedoff = false;
|
|
}
|
|
}
|
|
|
|
const submit = () => {
|
|
console.log(submitData);
|
|
}
|
|
onMounted(() => {
|
|
console.log("================")
|
|
console.log(submitData.userId);
|
|
console.log("================")
|
|
});
|
|
|
|
</script>
|
|
<script>
|
|
//案件筛选弹窗
|
|
import Popup from '../enterprise/caseFilter.vue';
|
|
|
|
export default {
|
|
components: {
|
|
Popup
|
|
},
|
|
data() {
|
|
return {
|
|
popupVisible: false,
|
|
popupContent: ''
|
|
}
|
|
},
|
|
methods: {
|
|
showPopup() {
|
|
this.popupVisible = true;
|
|
},
|
|
closePopup() {
|
|
this.popupVisible = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.address_edit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: #ebf3fb;
|
|
}
|
|
|
|
.warp_body {
|
|
margin: 2% 3%;
|
|
padding-bottom: 3rem;
|
|
width: 94%;
|
|
height: 100%;
|
|
//border-radius: 0.25rem;
|
|
background-image: linear-gradient(to bottom, #ebf3fb, #fff);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
|
|
.van-popup.van-toast {
|
|
background: var(--van-toast-background) !important;
|
|
box-sizing: content-box !important;
|
|
/* 下面3条css,影响不大 */
|
|
transition: all var(--van-duration-fast) !important;
|
|
width: var(--van-toast-default-width) !important;
|
|
max-width: var(--van-toast-max-width) !important;
|
|
}
|
|
|
|
.van-popup.van-toast .van-toast__icon {
|
|
font-size: var(--van-toast-icon-size) !important;
|
|
}
|
|
|
|
.divdsty {
|
|
margin: auto;
|
|
width: 100%;
|
|
height: 0.25rem;
|
|
background-color: #f4f4f4;
|
|
border: 0;
|
|
}
|
|
|
|
.file-upload {
|
|
position: relative;
|
|
min-height: 3.0rem;
|
|
max-height: 6.5rem;
|
|
padding: 1rem 0.27rem 0.27rem 0.43rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.file-upload-center {
|
|
position: absolute;
|
|
top: 0.27rem;
|
|
left: 0.43rem;
|
|
width: 90%;
|
|
height: 0.65rem;
|
|
font-size: 0.37rem;
|
|
span {
|
|
font-size: 0.32rem;
|
|
color: rgb(221, 229, 227);
|
|
}
|
|
}
|
|
.file {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100% - 1.5rem);
|
|
}
|
|
|
|
/deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image {
|
|
width: 1.95rem !important;
|
|
}
|
|
|
|
.preview-cover {
|
|
position: absolute;
|
|
bottom: 0;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 4px;
|
|
color: #fff;
|
|
font-size: 0.32rem;
|
|
text-align: center;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.rigbtn {
|
|
float: right;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 0.3rem 0.5rem;
|
|
padding: 0.2rem 0.3rem;
|
|
background-color: #e9f2fb;
|
|
color: #1367fe;
|
|
border-radius: 1rem;
|
|
font-size: 0.3rem;
|
|
}
|
|
|
|
.popup {
|
|
position: fixed;
|
|
z-index: 999;
|
|
top: 3rem;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(100% - 3rem);
|
|
background: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-title {
|
|
margin: 0.3rem 0 0;
|
|
width: 100%;
|
|
height: 1rem;
|
|
border-bottom: 1px solid #f3f4f5;
|
|
text-align: center;
|
|
font-size: 0.45rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.close-button {
|
|
position: absolute;
|
|
top: 0.15rem;
|
|
right: 0.1rem;
|
|
width: 0.8rem;
|
|
height: 0.8rem;
|
|
background-color: rgba(255, 255, 255, .5);
|
|
border: 0.05rem solid rgba(255, 255, 255, .7);
|
|
border-radius: 50%;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.close-button:before,
|
|
.close-button:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
background: #333;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 0.4rem;
|
|
width: 0.02rem;
|
|
}
|
|
|
|
.close-button:after {
|
|
height: 0.02rem;
|
|
width: 0.4rem;
|
|
}
|
|
|
|
.popup-content {
|
|
margin: 0.25rem 3% 0;
|
|
padding-bottom: 3rem;
|
|
width: 94%;
|
|
height: calc(100% - 1.6rem);
|
|
overflow-y: auto;
|
|
font-size: 0.37rem;
|
|
}
|
|
|
|
.subsearch {
|
|
width: 100%;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
.searchbox {
|
|
margin: 2% 3%;
|
|
padding: 0.15rem 0.3rem 0.1rem 1.15rem;
|
|
width: 94%;
|
|
height: 1.0rem;
|
|
background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
|
|
background-position: left 0.5rem center;
|
|
background-size: auto 50%;
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(0, 0, 0, .05);
|
|
border-radius: 0.5rem;
|
|
color: #999999;
|
|
outline: none;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 0.5rem 0 0.25rem;
|
|
font-size: 0.4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.quick-item {
|
|
display: flex;
|
|
}
|
|
|
|
.quick-item span {
|
|
display: inline-block;
|
|
margin: 1% 0 2% 3.5%;
|
|
padding: 2% 3.75%;
|
|
background: #f2f3f4;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
color: #4c4c4c;
|
|
}
|
|
|
|
.quick-item span.seled {
|
|
background: #e9f2fb;
|
|
color: #1367fe;
|
|
}
|
|
|
|
.btnbox {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 5% 2%;
|
|
width: 96%;
|
|
height: 1.0rem;
|
|
}
|
|
|
|
.btn-reset,
|
|
.btn-search {
|
|
display: inline-block;
|
|
margin: 0 2%;
|
|
padding: 0;
|
|
width: 60%;
|
|
color: #fff;
|
|
font-size: 0.35rem;
|
|
border-radius: 1rem;
|
|
background: #1367fe;
|
|
border: 1px solid #1367fe;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-reset {
|
|
width: 35%;
|
|
background-color: #fff;
|
|
border-color: rgba(19, 103, 254, .7);
|
|
color: #1367fe;
|
|
}
|
|
|
|
.search-result {
|
|
width: 100%;
|
|
height: calc(100% - 3rem);
|
|
padding-bottom: 1rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.case-item {
|
|
margin: 3% 2%;
|
|
padding: 2% 0;
|
|
width: 96%;
|
|
font-size: 0.35rem;
|
|
border-bottom: 1px solid #f4f4f4;
|
|
color: #999;
|
|
line-height: 2;
|
|
}
|
|
|
|
.case-title {
|
|
margin: 2% 0;
|
|
font-size: 0.42rem;
|
|
color: #333;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
|
|
.van-popup.van-toast {
|
|
background: var(--van-toast-background) !important;
|
|
box-sizing: content-box !important;
|
|
/* 下面3条css,影响不大 */
|
|
transition: all var(--van-duration-fast) !important;
|
|
width: var(--van-toast-default-width) !important;
|
|
max-width: var(--van-toast-max-width) !important;
|
|
}
|
|
|
|
.van-popup.van-toast .van-toast__icon {
|
|
font-size: var(--van-toast-icon-size) !important;
|
|
}
|
|
|
|
.agree-box {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.agree-box .remsty {
|
|
margin: 0.5rem 0.5rem;
|
|
padding-left: 0.85rem;
|
|
background: url("../../assets/images/icon_remind.png") no-repeat left center;
|
|
background-size: auto 100%;
|
|
font-size: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.accept-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 0.15rem;
|
|
font-size: 0.42rem;
|
|
}
|
|
|
|
.checksty {
|
|
margin: 0 0.25rem;
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
}
|
|
.agree-remark {
|
|
.accept-item {
|
|
font-size: 0.3rem;
|
|
padding: 0px 10px;
|
|
width: 80%;
|
|
color: #969799
|
|
}
|
|
height: 1.4rem;
|
|
|
|
}
|
|
|
|
/deep/ .van-button {
|
|
margin: 5% 3%;
|
|
padding: 0;
|
|
width: 94%;
|
|
height: 1rem;
|
|
color: #fff;
|
|
font-size: 0.4rem;
|
|
border-radius: 1rem;
|
|
background: #1367fe;
|
|
border: 0.01rem solid #1367fe;
|
|
text-align: center;
|
|
}
|
|
|
|
/deep/ .van-action-bar {
|
|
box-shadow: 0 0 0.27rem #e5e5e5;
|
|
}
|
|
|
|
</style>
|
|
|