<template>
|
<view class="content">
|
<!-- <view class="">
|
<view class="flex a-center color2 fs-44 font-bold">
|
<image src="/static/info/审核不通过@2x.png" mode="aspectFill" class="w-46 h-46 mr-15 ml-31"></image>
|
审核不通过
|
</view>
|
<view class="fs-27 color2 lh-38 ml-27 mt-15 mb-23">
|
信息填写不规范，请重新填写
|
</view>
|
</view> -->
|
<view class="">
|
<view class="flex a-center color2 fs-44 font-bold pb-38">
|
<image src="/static/info/审核中@2x.png" mode="aspectFill" class="w-46 h-46 mr-15 ml-31"></image>
|
审核中
|
</view>
|
</view>
|
<view class="container">
|
<view class="formItem border1">
|
<view class="label">
|
姓名
|
</view>
|
<view class="value">
|
<input type="text" placeholder="请输入姓名" placeholder-class="placeholderStyle" class="fs-27" />
|
</view>
|
</view>
|
<view class="formItem border1">
|
<view class="label">
|
身份证号
|
</view>
|
<view class="value">
|
<input type="text" placeholder="请输入身份证号" placeholder-class="placeholderStyle" class="fs-27" />
|
</view>
|
</view>
|
<view class="formItem border1">
|
<view class="label">
|
服务社区
|
</view>
|
<view @tap.stop="showSelectCommunity" class="value flex j-between a-center flex1">
|
<text class="placeholderStyle">请选择服务社区</text>
|
<image src="/static/Appeal/left.png" mode="aspectFill" class="h-19 w-19"></image>
|
</view>
|
</view>
|
<view class="formItem border1">
|
<view class="label">
|
服务对象
|
</view>
|
<view class="value">
|
<input type="text" placeholder="请输入服务对象" placeholder-class="placeholderStyle" class="fs-27" />
|
</view>
|
</view>
|
<view class="formItem border1">
|
<view class="label">
|
所在党组织
|
</view>
|
<view class="value">
|
<input type="text" placeholder="请输入所在党组织" placeholder-class="placeholderStyle" class="fs-27" />
|
</view>
|
</view>
|
<view class="color1 fs-27 mt-35 ml-31">
|
上传头像
|
</view>
|
<view class="flex wrap mt-27 pl-31">
|
<view class="relative mr-15" v-for="(item, index) in localImageUrls" :key="index">
|
<image v-if="item != 'loading'" :src="item" class="w-140 h-140 shrink0 br-8" />
|
<view v-if="item != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8">
|
<view class="absolute flex a-center j-between px-34"
|
style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: calc(100% - 68rpx);">
|
<image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
|
<image @tap="delImg(item)" src="@/static/Appeal/trash.png" class="w-19 h-19" />
|
</view>
|
</view>
|
</view>
|
<!-- <view v-if="imgUrls.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8">
|
<u-loading-icon></u-loading-icon>
|
</view> -->
|
<image @tap="uploadImg(1)" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" />
|
</view>
|
<view class="h-146">
|
|
</view>
|
<!-- <view class="h-212">
|
|
</view> -->
|
</view>
|
|
<view class="footerButton">
|
<view class="btns">
|
<view class="ok fs-35 font-bold">
|
保存
|
</view>
|
</view>
|
</view>
|
|
<!-- <view class="footer">
|
<view class="tip">
|
可编辑后重新提交审核！
|
</view>
|
<view class="btns">
|
<view class="cancel">
|
关闭
|
</view>
|
<view class="ok">
|
编辑
|
</view>
|
</view>
|
</view> -->
|
|
<!-- 选择服务社区 -->
|
<u-popup :show="selectPopup" round="16rpx" :close-on-click-overlay="false" @open="openSelectPopup">
|
<view class="relative">
|
<image @tap.stop="selectPopup = false" src="@/static/closeImg.png" class="w-35 h-35 absolute"
|
style="right: 31rpx;top: 46rpx;" />
|
<view class="txt-center pt-38 pb-40 fs-35 lh-48 font-bold">请选择服务社区</view>
|
<view class="flex a-center j-between txt-center py-10 fs-27 font-bold bgColor1">
|
<view class="flex1">区县</view>
|
<view class="flex1">街道</view>
|
<view class="flex1">社区</view>
|
</view>
|
<view class="mb-20">
|
<picker-view :value="value" @change="bindChange" class="picker-view">
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in county" :key="index">
|
{{ item }}
|
</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in street" :key="index">
|
{{ item }}
|
</view>
|
</picker-view-column>
|
<picker-view-column>
|
<view class="item" v-for="(item, index) in community" :key="index">
|
{{ item }}
|
</view>
|
</picker-view-column>
|
</picker-view>
|
</view>
|
<view class="submitBtn">确认</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import config from '@/config/index.js'
|
export default {
|
data() {
|
return {
|
imgUrls: [],
|
localImageUrls: [],
|
selectPopup: false,
|
value: [0, 0, 0],
|
county: [], //区县
|
street: [], //街道
|
community: [], //社区
|
}
|
},
|
methods: {
|
bindChange(e) {
|
this.value = e.detail.value
|
},
|
showSelectCommunity() {
|
this.selectPopup = true
|
},
|
delImg(item) {
|
this.localImageUrls = this.localImageUrls.filter(i => i != item)
|
this.imgUrls = this.imgUrls.filter(i => i != item)
|
},
|
viewImage(item) {
|
uni.previewImage({
|
urls: [item]
|
})
|
},
|
uploadImg() {
|
uni.chooseImage({
|
count: 1,
|
success: (chooseImageRes) => {
|
this.imgUrls.push('loading')
|
let imgPathList = chooseImageRes.tempFilePaths;
|
if (imgPathList.length > 0) {
|
uni.uploadFile({
|
url: config.imageUrl,
|
filePath: imgPathList[0],
|
timeout: 1000 * 45,
|
name: 'file',
|
header: {
|
Authorization: uni.getStorageSync('token')
|
},
|
success: (res) => {
|
if (JSON.parse(res.data).code == 200) {
|
this.imgUrls = this.imgUrls.filter(item => item !=
|
'loading')
|
this.$nextTick(() => {
|
this.imgUrls.push(JSON.parse(res.data)
|
.data)
|
this.localImageUrls.push(imgPathList[0])
|
})
|
} else {
|
this.imgUrls = this.imgUrls.filter(
|
item => item != 'loading')
|
uni.showToast({
|
title: '上传失败，请重新上传',
|
icon: 'none',
|
mask: true
|
})
|
}
|
},
|
fail: (err) => {
|
this.imgUrls = this.imgUrls.filter(
|
item => item != 'loading')
|
uni.showToast({
|
title: '上传失败，请重新上传',
|
icon: 'none',
|
mask: true
|
})
|
}
|
})
|
}
|
},
|
fail: () => {}
|
})
|
},
|
openSelectPopup() {
|
this.county = ['仁和区']
|
this.street = ['仁和镇']
|
this.community = ['仁和街社区']
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.bgColor1 {
|
background: rgba(216, 216, 216, 0.2);
|
}
|
|
.content {
|
background-image: url('/static/home/bg@2x.png');
|
background-size: 750rpx 648rpx;
|
padding-top: 100rpx;
|
|
.container {
|
background: #FFFFFF;
|
border-radius: 35rpx 35rpx 0 0;
|
|
.formItem {
|
display: flex;
|
align-items: center;
|
height: 112rpx;
|
margin: 0 31rpx;
|
font-size: 27rpx;
|
|
.label {
|
opacity: 0.88;
|
font-weight: 400;
|
width: 219rpx;
|
}
|
|
.value {
|
font-weight: 600;
|
}
|
}
|
}
|
}
|
|
.footerButton {
|
position: fixed;
|
bottom: 50rpx;
|
left: 0;
|
right: 0;
|
margin: auto;
|
width: 688rpx;
|
text-align: center;
|
height: 96rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
line-height: 96rpx;
|
color: #fff;
|
border-radius: 48rpx;
|
}
|
|
.footer {
|
position: fixed;
|
bottom: 0;
|
box-shadow: 0rpx -4rpx 27rpx 0rpx rgba(0, 0, 0, 0.08);
|
width: 100%;
|
background-color: #fff;
|
|
.tip {
|
text-align: center;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #FC8D55;
|
padding-top: 31rpx;
|
}
|
|
.btns {
|
display: flex;
|
justify-content: center;
|
font-size: 27rpx;
|
margin-top: 33rpx;
|
margin-bottom: 33rpx;
|
|
.cancel {
|
width: 331rpx;
|
height: 77rpx;
|
border: 2rpx solid rgba(252, 141, 85, 1);
|
border-radius: 38rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #FF4948;
|
}
|
|
.ok {
|
width: 331rpx;
|
height: 77rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 27rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
|
.border1 {
|
border-bottom: 2rpx solid #EDEEEF;
|
}
|
|
.color1 {
|
color: #4C4C4C;
|
}
|
|
.color2 {
|
color: #fff;
|
}
|
|
.placeholderStyle {
|
color: #B2B2B2;
|
}
|
|
.picker-view {
|
height: 460rpx;
|
font-size: 35rpx;
|
}
|
|
/deep/.picker-view {
|
margin: 0 auto;
|
|
.item {
|
text-align: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #333333;
|
line-height: 50rpx;
|
}
|
}
|
|
.submitBtn {
|
width: calc(100% - 62rpx);
|
margin: 0 31rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: #fff;
|
}
|
</style>
|
