authenadd.vue 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071
  1. <template>
  2. <view class="check">
  3. <uni-forms ref="form" :model="datainfo" :rules="rules">
  4. <view class="cbox">
  5. <view class="chmain">
  6. <picker range-key='dictLabel' :disabled="ptype=='edit'&&datainfo.examine!='3'?true:false" :value="rylxidx" :range="rylxList" @change='bindDateChangee'>
  7. <uni-forms-item label="人员类型" required name="residentType">
  8. <view class="flexc mh35">
  9. <view class="flex1 txr f13 co27" v-if="datainfo.residentType&&!rylx">{{statusFormats(datainfo.residentType,rylxList,'rylx')}}</view>
  10. <view class="flex1 txr f13" v-else :class="rylx?'co27':'coa'">{{rylx||"请选择人员类型"}}</view>
  11. <view class="rimg"><image :src="rimg"></image></view>
  12. </view>
  13. </uni-forms-item>
  14. </picker>
  15. <uni-forms-item label="姓名" name="residentName">
  16. <view class="flexc">
  17. <uni-easyinput :disabled="isdisabled" v-model="datainfo.residentName" :inputBorder='false' placeholder="请输入姓名" />
  18. </view>
  19. </uni-forms-item>
  20. <uni-forms-item label="手机号码" required name="residentPhone">
  21. <view class="flexc">
  22. <uni-easyinput :disabled="isdisabled" v-model="datainfo.residentPhone" :inputBorder='false' placeholder="请输入手机号码" />
  23. </view>
  24. </uni-forms-item>
  25. <uni-forms-item label="小区名称" required name="tenantId">
  26. <w-select
  27. style="margin-left: 20rpx;"
  28. v-model="datainfo.tenantId"
  29. :list='voList'
  30. width='200rpx'
  31. valueName='dictLabel'
  32. keyName="dictValue"
  33. :valuea="datainfo.tenantId"
  34. :chosevalue="tenantName?tenantName:statusFormats(datainfo.tenantId,voList,'tenant')"
  35. :isdisabled="(ptype=='edit'&&datainfo.examine=='2')?true:false"
  36. :filterable="filterable"
  37. @change='getchangea'
  38. >
  39. </w-select>
  40. </uni-forms-item>
  41. <block v-if="datainfo.residentType&&datainfo.residentType!=3">
  42. <uni-forms-item label="房屋号" required name="houseId" v-if="datainfo.residentType!=3">
  43. <w-select
  44. style="margin-left: 20rpx;"
  45. v-model="datainfo.houseId"
  46. :list='fwlist'
  47. valueName='dictLabel'
  48. keyName="dictValue"
  49. :valuea="datainfo.houseId"
  50. :chosevalue="datainfo.detailedAddress"
  51. :isdisabled="(ptype=='edit'&&datainfo.examine=='2')?true:false"
  52. :filterable='filterable'
  53. @change='getchange'
  54. >
  55. </w-select>
  56. </uni-forms-item>
  57. <block v-if="datainfo.residentType==1">
  58. <uni-forms-item label="是否户主" required name="isHouseholder">
  59. <view class="flexc ">
  60. <view class="flex1"></view>
  61. <view class="sylist flexcc" :class="datainfo.isHouseholder==ite.dictValue?'act':''" v-for="(ite,idx) in sfList" :key="idx" @click="getSyFn(ite.dictValue)">{{ite.dictLabel}}</view>
  62. <view class="rimg"><image :src="rimg"></image></view>
  63. </view>
  64. </uni-forms-item>
  65. <block v-if="datainfo.isHouseholder!='Y'">
  66. <picker range-key='dictLabel' :disabled="isdisabled" :value="hzgxidx" :range="hzgxList" @change='bindDateChangea'>
  67. <uni-forms-item class="isnobor" label="与户主关系" required name="residentRelationship">
  68. <view class="flexc mh35">
  69. <view class="flex1 txr f13 co27" v-if="datainfo.residentRelationship&&!hzgx">{{statusFormats(datainfo.residentRelationship,hzgxList,'hzgx')}}</view>
  70. <view class="flex1 txr f13" v-else :class="hzgx?'co27':'coa'">{{hzgx||"请选择与户主关系"}}</view>
  71. <view class="rimg">
  72. <image :src="rimg"></image>
  73. </view>
  74. </view>
  75. </uni-forms-item>
  76. </picker>
  77. </block>
  78. </block>
  79. </block>
  80. </view>
  81. <uni-collapse ref="collapse" >
  82. <block>
  83. <view class="chtit">人员信息</view>
  84. <block>
  85. <uni-collapse-item title-border="none" class="chmain">
  86. <template v-slot:title>
  87. <uni-forms-item label="身份证号" required name="residentIdCard">
  88. <view class="flexc">
  89. <uni-easyinput disabled v-model="datainfo.residentIdCard" :inputBorder='false' placeholder="自动识别" />
  90. <image v-if='datainfo.idCardBack' :src="baseUrl+datainfo.idCardBack" class="cmico" @click.stop="getPreview(datainfo.idCardBack)"></image>
  91. <image :src="cmico" @click.stop="getaddImage('front')" class="cmico"></image>
  92. </view>
  93. </uni-forms-item>
  94. </template>
  95. <view>
  96. <uni-forms-item label="性别" required name="residentGender">
  97. <view class="flexc">
  98. <view class="flex1"></view>
  99. <uni-data-checkbox :map="map" :disabled="isdisabled" selectedColor="#0156FE" selectedTextColor="#272727" v-model="datainfo.residentGender" :localdata="xbList" />
  100. </view>
  101. </uni-forms-item>
  102. <uni-forms-item label="家庭地址" required name="idCardAddress">
  103. <view class="flexc">
  104. <uni-easyinput disabled v-model="datainfo.idCardAddress" :inputBorder='false' placeholder="自动识别" />
  105. </view>
  106. </uni-forms-item>
  107. <!-- required -->
  108. <picker range-key='dictLabel' :disabled="isdisabled" :value="rymmidx" :range="rymmList" @change='bindDateChangef'>
  109. <uni-forms-item label="人员面貌" name="residentAppearance">
  110. <view class="flexc mh35">
  111. <view class="flex1 txr f13 co27" v-if="datainfo.residentAppearance&&!rymm">{{statusFormats(datainfo.residentAppearance,rymmList,'rymm')}}</view>
  112. <view class="flex1 txr f13" v-else :class="rymm?'co27':'coa'">{{rymm||"请选择人员面貌"}}</view>
  113. <view class="rimg"><image :src="rimg"></image></view>
  114. </view>
  115. </uni-forms-item>
  116. </picker>
  117. <picker range-key='dictLabel' :disabled="isdisabled" :value="dslxidx" :range="dslxList" @change='bindDateChangeg'>
  118. <uni-forms-item label="特殊类型" name="specialType">
  119. <view class="flexc mh35">
  120. <view class="flex1 txr f13 co27" v-if="datainfo.specialType&&!dslx">{{statusFormats(datainfo.specialType,dslxList,'dslx')}}</view>
  121. <view class="flex1 txr f13" v-else :class="dslx?'co27':'coa'">{{dslx||"如有五保户等特殊类型,请选择"}}</view>
  122. <view class="rimg"><image :src="rimg"></image></view>
  123. </view>
  124. </uni-forms-item>
  125. </picker>
  126. <uni-forms-item label="工作单位" name="residentEmployer">
  127. <view class="flexc">
  128. <uni-easyinput :disabled="isdisabled" v-model="datainfo.residentEmployer" :inputBorder='false' placeholder="请输入工作单位" />
  129. </view>
  130. </uni-forms-item>
  131. <uni-forms-item label="兴趣爱好" name="residentHobby">
  132. <view class="flexc ml10">
  133. <uni-easyinput type="textarea" :disabled="isdisabled" autoHeight v-model="datainfo.residentHobby" :inputBorder='false' placeholder="请输入兴趣爱好" />
  134. </view>
  135. </uni-forms-item>
  136. <uni-forms-item label="上传头像" name="facePhoto">
  137. <view class="addimgs">
  138. <block v-if="phofile&&phofile.length">
  139. <view class="assimg" v-for="(ite,idx) in phofile" :key="idx" @click="getPreviewa(idx,phofile)">
  140. <image :src="baseUrl+ite" class="img"></image>
  141. <image :src="rdelimg" class="delimg" @click.stop="getDelFn(idx,'fm')"></image>
  142. </view>
  143. </block>
  144. <view class="addbox" @click="getaddImageava">
  145. <image :src="aphoto"></image>
  146. <view>添加图片</view>
  147. </view>
  148. </view>
  149. </uni-forms-item>
  150. </view>
  151. </uni-collapse-item>
  152. </block>
  153. </block>
  154. <block v-if="datainfo.residentType==1&&datainfo.isHouseholder=='Y'">
  155. <view class="chtit">房本信息</view>
  156. <block>
  157. <uni-collapse-item title-border="none" class="chmain">
  158. <template v-slot:title>
  159. <uni-forms-item label="房屋坐落" required name="location">
  160. <view class="flexc">
  161. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.location" :inputBorder='false' placeholder="自动识别" />
  162. <image v-if='houserinfo.houseImage' :src="baseUrl+houserinfo.houseImage" class="cmico" @click.stop="getPreview(houserinfo.houseImage)"></image>
  163. <image :src="cmico" @click.stop="getaddImage('fbxx')" class="cmico"></image>
  164. </view>
  165. </uni-forms-item>
  166. </template>
  167. <view >
  168. <uni-forms-item label="权利人姓名" name="ownerName">
  169. <view class="flexc">
  170. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.ownerName" :inputBorder='false' placeholder="自动识别" />
  171. <view class="rimg"></view>
  172. </view>
  173. </uni-forms-item>
  174. <uni-forms-item label="权利类型" name="rightType">
  175. <picker range-key='dictLabel' :disabled="isdisabled" :value="qllxidx" :range="qllxList" @change='bindDateChange'>
  176. <view class="flexc">
  177. <view class="flex1 txr f13 co27" v-if="houserinfo.rightType&&!qllx">{{statusFormats(houserinfo.rightType,qllxList,'qllx')}}</view>
  178. <view class="flex1 txr f13" v-else :class="qllx?'co27':'coa'">{{qllx||"请选择权利类型"}}</view>
  179. <view class="rimg"><image :src="rimg"></image></view>
  180. </view>
  181. </picker>
  182. </uni-forms-item>
  183. <uni-forms-item label="建筑面积" required name="area">
  184. <view class="flexc">
  185. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.area" :inputBorder='false' placeholder="自动识别" />
  186. <view class="tips">m²</view>
  187. <view class="rimg"></view>
  188. </view>
  189. </uni-forms-item>
  190. <uni-forms-item label="不动产单元号" name="propertyUnitNumber">
  191. <view class="flexc">
  192. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.propertyUnitNumber" :inputBorder='false' placeholder="请输入不动产单元号" />
  193. <view class="rimg"></view>
  194. </view>
  195. </uni-forms-item>
  196. <uni-forms-item label="相关的字第号" name="documentNumber">
  197. <view class="flexc">
  198. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.documentNumber" :inputBorder='false' placeholder="请输入相关的字第号" />
  199. <view class="rimg"></view>
  200. </view>
  201. </uni-forms-item>
  202. <uni-forms-item label="小区名称" name="communityName">
  203. <view class="flexc">
  204. <uni-easyinput disabled v-model="houserinfo.communityName" :inputBorder='false' placeholder="请输入小区名称" />
  205. <view class="rimg"></view>
  206. </view>
  207. </uni-forms-item>
  208. <uni-forms-item label="门牌号" required name="detailedAddress">
  209. <view class="flexc">
  210. <uni-easyinput disabled v-model="houserinfo.detailedAddress" :inputBorder='false' placeholder="请输入门牌号" />
  211. <view class="rimg"></view>
  212. </view>
  213. </uni-forms-item>
  214. <uni-forms-item label="房屋类型" required name="houseType">
  215. <picker range-key='dictLabel' :disabled="isdisabled" :value="fwlxidx" :range="fwlxList" @change='bindDateChangeh'>
  216. <view class="flexc mh35">
  217. <view class="flex1 txr f13 co27" v-if="houserinfo.houseType&&!fwlx">{{statusFormats(houserinfo.houseType,fwlxList,'fwlx')}}</view>
  218. <view class="flex1 txr f13" v-else :class="fwlx?'co27':'coa'">{{fwlx||"请选择房屋类型"}}</view>
  219. <view class="rimg"><image :src="rimg"></image></view>
  220. </view>
  221. </picker>
  222. </uni-forms-item>
  223. <uni-forms-item label="使用期限" name="usagePeriod">
  224. <view class="flexc">
  225. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.usagePeriod" :inputBorder='false' placeholder="请输入使用期限" />
  226. <view class="rimg"></view>
  227. </view>
  228. </uni-forms-item>
  229. <uni-forms-item label="登记日期" name="registrationDate">
  230. <view class="flexc">
  231. <uni-datetime-picker :disabled="isdisabled" :class="houserinfo.registrationDate?'co27':'coa'" type="datetime" placeholder="请选择登记日期" :border="false" v-model="houserinfo.registrationDate" />
  232. <view class="rimg"><image :src="rimg"></image></view>
  233. </view>
  234. </uni-forms-item>
  235. <uni-forms-item label="共有姓名" name="coOwner">
  236. <view class="flexc">
  237. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.coOwner" :inputBorder='false' placeholder="请输入共有姓名" />
  238. <view class="rimg"></view>
  239. </view>
  240. </uni-forms-item>
  241. <uni-forms-item label="共有情况" name="coOwnership">
  242. <view class="flexc">
  243. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.coOwnership" :inputBorder='false' placeholder="请输入共有情况" />
  244. <view class="rimg"></view>
  245. </view>
  246. </uni-forms-item>
  247. <uni-forms-item label="房屋状态" name="houseStatus">
  248. <picker range-key='dictLabel' :disabled="isdisabled" :value="fwztidx" :range="fwztList" @change='bindDateChangeb'>
  249. <view class="flexc">
  250. <view class="flex1 txr f13 co27" v-if="houserinfo.houseStatus&&!fwzt">{{statusFormats(houserinfo.houseStatus,fwztList,'fwzt')}}</view>
  251. <view class="flex1 txr f13" v-else :class="fwzt?'co27':'coa'">{{fwzt||"请选择房屋状态"}}</view>
  252. <view class="rimg"><image :src="rimg"></image></view>
  253. </view>
  254. </picker>
  255. </uni-forms-item>
  256. <uni-forms-item label="房屋用途" name="usageType">
  257. <picker range-key='dictLabel' :disabled="isdisabled" :value="fwytidx" :range="fwytList" @change='bindDateChangec'>
  258. <view class="flexc">
  259. <view class="flex1 txr f13 co27" v-if="houserinfo.usageType&&!fwyt">{{statusFormats(houserinfo.usageType,fwytList,'fwyt')}}</view>
  260. <view class="flex1 txr f13" v-else :class="fwyt?'co27':'coa'">{{fwyt||"请选择房屋用途"}}</view>
  261. <view class="rimg"><image :src="rimg"></image></view>
  262. </view>
  263. </picker>
  264. </uni-forms-item>
  265. <uni-forms-item label="有无车位" name="hasParkingSpace">
  266. <picker range-key='dictLabel' :disabled="isdisabled" :value="ywcwidx" :range="ywcwList" @change='bindDateChanged'>
  267. <view class="flexc">
  268. <view class="flex1 txr f13 co27" v-if="houserinfo.hasParkingSpace&&!ywcw">{{statusFormats(houserinfo.hasParkingSpace,ywcwList,'ywcw')}}</view>
  269. <view class="flex1 txr f13" v-else :class="ywcw?'co27':'coa'">{{ywcw||"请选择有/无"}}</view>
  270. <view class="rimg"><image :src="rimg"></image></view>
  271. </view>
  272. </picker>
  273. </uni-forms-item>
  274. <uni-forms-item label="车位号" name="parkingNumber">
  275. <view class="flexc">
  276. <uni-easyinput :disabled="isdisabled" v-model="houserinfo.parkingNumber" :inputBorder='false' placeholder="请输入车位号" />
  277. <view class="rimg"></view>
  278. </view>
  279. </uni-forms-item>
  280. </view>
  281. </uni-collapse-item>
  282. </block>
  283. </block>
  284. </uni-collapse>
  285. <view class="mt12">
  286. <!-- <view class="hbtns mb10 bgb" @click="getAddfb" v-if="datainfo.residentType==1&&datainfo.isHouseholder=='Y'">添加房屋信息</view> -->
  287. <view class="hbtns bga" @click="getSubmit">提交</view>
  288. </view>
  289. </view>
  290. </uni-forms>
  291. <loading></loading>
  292. </view>
  293. </template>
  294. <script>
  295. import config from '@/config'
  296. import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
  297. import {uploadIdentify,uploadmore} from '@/utils/common.js'
  298. import {listNoPageTenant,houseInfoDet} from "@/api/work/work.js"
  299. import {gettenantList} from "@/api/login.js"
  300. import {residentInfoAdd,residentInfoPut,authentication,addResidentInfo} from "@/api/work/people.js"
  301. import {getDictionaryFn} from "@/api/system/user.js"
  302. import {selectValueKey} from "@/utils/common.js"
  303. import {getOcrIdCard,getrealEstateCertificatee} from "@/api/system/card.js"
  304. import wSelect from "@/work/components/w-select/w-select.vue"
  305. export default {
  306. components: {wSelect},
  307. data() {
  308. return {
  309. rdelimg: require('@/work/static/service/rdel.png'),
  310. rimg: require('@/mine/static/house/rimg.png'),
  311. cmico: require('@/mine/static/house/cmico.png'),
  312. del: require('@/mine/static/house/del.png'),
  313. aphoto: require('@/work/static/service/photo.png'),
  314. baseUrl: config.baseUrl,
  315. checkflag:true,
  316. backgroundColor: "transparent",
  317. datainfo: {
  318. "tenantId":'',//租户id
  319. "residentType":null,//人员类型:1:业主 2:租户 3:其他
  320. "residentName":this.$store.state.user.nickName,//居住人员姓名
  321. "residentPhone":this.$store.state.user.phonenumber,//人员手机号
  322. "houseInfoRedidentList":[],//用户房屋信息集合
  323. "houseId":'',//关联房屋信息表的house_id
  324. "residentRelationship":null,//居住人员与户主的关系,如父子、夫妻等
  325. "isHouseholder":null,//是否是户主 N不是 Y是
  326. "houseType":null,//房屋类型 1:普通住宅,2:洋房
  327. "residentIdCard":null,//居住人员身份证号码,18位
  328. // "residentBirthday":null,//居住人员出生日期
  329. "residentGender":'',//居住人员性别:1-男,2-女
  330. // "isTenant":null,//是否是租户:Y-是,N-否
  331. "residentEmployer":null,//居住人员工作单位
  332. "residentAppearance":null,//居住人员面貌,如党员、群众等
  333. "residentHobby":null,//爱好
  334. "facePhoto":null,//人脸地址
  335. "idCardAddress":null,//身份证住址
  336. "specialType":null,//特殊类型
  337. "idCardFront":null,//身份证正面
  338. "idCardBack":null,//身份证反面
  339. },
  340. rules:{
  341. residentType: {rules: [{required: true,errorMessage: '请选择人人员类型' }]},
  342. // residentIdCard: {rules: [{required: true,errorMessage: '请输入身份证号码' }]},
  343. // residentName: {rules: [{required: true,errorMessage: '请输入姓名' }]},
  344. // residentGender: {rules: [{required: true,errorMessage: '请选择性别' }]},
  345. // houseId: {rules: [{required: true,errorMessage: '请选择房屋号' }]},
  346. // detailedAddress: {rules: [{required: true,errorMessage: '请输入居住地址' }]},
  347. // isHouseholder: {rules: [{required: true,errorMessage: '请选择是否户主' }]},
  348. // residentRelationship: {rules: [{required: true,errorMessage: '请选择与户主关系' }]},
  349. residentPhone: {rules: [{required: true,errorMessage: '请输入手机号'}, {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,errorMessage:'请输入正确的手机号码'}]},
  350. },
  351. hzgx:"",
  352. rylx:"",
  353. hzgxidx:0,
  354. dslxidx:0,
  355. rylxidx:0,
  356. list:[],
  357. phofile:[],
  358. fwlist:[],
  359. rylxList:[],
  360. fwzt:'',
  361. qllx:'',
  362. fwyt:'',
  363. ywcw:'',
  364. hzgx:'',
  365. sfhz:"",
  366. sfzh:"",
  367. rymm:"",
  368. dslx:"",
  369. fwztidx:0,
  370. qllxidx:0,
  371. fwytidx:0,
  372. ywcwidx:0,
  373. hzgxidx:0,
  374. sfzhidx:0,
  375. rymmidx:0,
  376. sfhzidx:0,
  377. dslxidx:0,
  378. fwztList:[],
  379. qllxList:[],
  380. fwytList:[],
  381. hzgxList:[],
  382. sfList:[],
  383. rymmList:[],
  384. dslxList:[],
  385. xbList:[],
  386. ywcwList:[{dictLabel:'有',dictValue:'Y'},{dictLabel:'无',dictValue:'N'},],
  387. isdisabled:false,
  388. ptype:'add',
  389. filterable:true,
  390. chooseValue:'',
  391. map:{text:'dictLabel',value:'dictValue'},
  392. userId:this.$store.state.user.userId,
  393. voList:[],
  394. tenantName:'',
  395. houseInfoRedidentList:[],
  396. fwztList:[],
  397. qllxList:[],
  398. fwytList:[],
  399. sfList:[],
  400. fwlxList:[],
  401. fwlxidx:'',
  402. fwlx:'',
  403. rzflag:false,
  404. choseidx:'',
  405. houserinfo:{
  406. "houseId":'',
  407. "tenantId":"",//租户id
  408. "houseImage":null,//房本照片
  409. "ownerName":null,//权利人姓名
  410. "location":null,//房屋坐落位置
  411. "houseType":null,//房屋类型 1:普通住宅,2:洋房
  412. "rightType":null,//权利类型,如所有权、使用权等
  413. "area":null,//房屋面积,单位为平方米
  414. "documentNumber":null,//房屋相关的字第号
  415. "propertyUnitNumber":null,//不动产单元号
  416. "coOwnership":null,//房屋的共有情况,如共有比例等
  417. "usageType":null,//房屋用途,如住宅、商业等
  418. "usagePeriod":null,//房屋使用期限
  419. "registrationDate":null,//房屋登记日期
  420. "coOwner":null,//共有人姓名,多个共有人可以用逗号分隔
  421. "detailedAddress":null,//房屋的详细门牌号
  422. "hasParkingSpace":null,//是否有车位,Y表示有,N表示无
  423. "communityName":null,//房屋所在小区名称
  424. "houseStatus":null,//房屋状态:1-自住,2-出租,3-空闲,4-待售
  425. "parkingNumber":null,//车位号
  426. }
  427. }
  428. },
  429. onLoad: function(e) {
  430. if(e.type){
  431. this.rztype=e.type
  432. this.rzflag=true;
  433. this.datainfo.residentPhone=this.$store.state.user.phonenumber;
  434. this.datainfo.userId=this.$store.state.user.userId;
  435. }else{
  436. // var tenantId=this.$store.state.user.tenantId;
  437. // this.datainfo.tenantId=tenantId;
  438. // this.getRoleNopage(tenantId)
  439. }
  440. this.gettenantList();
  441. if(e.id){
  442. this.id=e.id;
  443. this.ptype="edit";
  444. // this.isdisabled=true;
  445. this.getDetail()
  446. }
  447. this.init()
  448. },
  449. onPageScroll(e) {
  450. var scrollTop = Number(e.scrollTop);
  451. if (scrollTop > 0) {
  452. this.backgroundColor = '#48CC9A'
  453. } else {
  454. this.backgroundColor = 'transparent'
  455. }
  456. },
  457. methods: {
  458. checkPermi,
  459. checkRole,
  460. getEditFn(){
  461. this.isdisabled=false;
  462. },
  463. getSyFn(e){
  464. this.datainfo.isHouseholder=e
  465. console.log(this.datainfo.isHouseholder)
  466. },
  467. getChose(idx){
  468. this.choseidx=idx;
  469. },
  470. getAddfb(){
  471. var obj={
  472. "ownerName":"",//权利人姓名
  473. "location":"",//房屋坐落位置
  474. "rightType":"",//权利类型,如所有权、使用权等
  475. "area":"",//房屋面积,单位为平方米
  476. "documentNumber":"",//房屋相关的字第号
  477. "propertyUnitNumber":"",//不动产单元号
  478. "coOwnership":"",//房屋的共有情况,如共有比例等
  479. "usageType":"",//房屋用途,如住宅、商业等
  480. "usagePeriod":"",//房屋使用期限
  481. "registrationDate":"",//房屋登记日期
  482. "coOwner":"",//共有人姓名,多个共有人可以用逗号分隔
  483. "detailedAddress":"",//房屋的详细门牌号
  484. "hasParkingSpace":"",//是否有车位,Y表示有,N表示无
  485. "communityName":"",//房屋所在小区名称
  486. "houseStatus":"",//房屋状态:1-自住,2-出租,3-空闲,4-待售
  487. "parkingNumber":'',//车位号
  488. }
  489. this.houseInfoRedidentList.push(obj)
  490. },
  491. getDelfb(idx){
  492. this.houseInfoRedidentList.splice(idx,1)
  493. },
  494. statusFormats(data, list,type) {
  495. var aite=selectValueKey(list, data);
  496. if(type=='qllx'){
  497. this.qllxidx=aite.key;
  498. }else if(type=='rylx'){
  499. this.rylxidx=aite.key;
  500. }else if(type=='hzgx'){
  501. this.hzgxidx=aite.key;
  502. }else if(type=='fwzt'){
  503. this.fwztidx=aite.key;
  504. }else if(type=='fwyt'){
  505. this.fwytidx=aite.key;
  506. }else if(type=='ywcw'){
  507. this.ywcwidx=aite.key;
  508. }else if(type=='tenant'){
  509. this.tenantName=aite.actions;
  510. }else if(type=='rymm'){
  511. this.rymmidx=aite.key;
  512. }else if(type=='dslx'){
  513. this.dslxidx=aite.key;
  514. }else if(type=='fwlx'){
  515. this.fwlxidx=aite.key;
  516. }
  517. return aite.actions;
  518. },
  519. getchangea(e){
  520. var tenantId=this.datainfo.tenantId;
  521. this.datainfo.tenantId=e.dictValue;
  522. this.houserinfo.communityName=e.dictLabel;
  523. this.datainfo.houseId="";
  524. this.datainfo.detailedAddress='';
  525. this.houserinfo.detailedAddress='';
  526. this.houserinfo.houseId="";
  527. this.houserinfo.location='';
  528. // 业主或租户
  529. this.listNoPageTenant(e.dictValue)
  530. },
  531. getchange(e){
  532. this.datainfo.houseId=e.dictValue;
  533. this.datainfo.detailedAddress=e.dictLabel;
  534. this.houserinfo.detailedAddress=e.dictLabel;
  535. this.houserinfo.houseId=e.dictValue;
  536. this.houserinfo.location=e.location;
  537. },
  538. // 获取租户列表
  539. gettenantList(){
  540. gettenantList().then(res=>{
  541. if(res.code==200){
  542. if(res.data.voList&&res.data.voList.length){
  543. this.voList = res.data.voList.map(v => {
  544. return {
  545. dictLabel: v.companyName,
  546. dictValue: v.tenantId
  547. }
  548. })
  549. }
  550. }else{
  551. this.$toast(res.msg)
  552. }
  553. })
  554. },
  555. listNoPageTenant(id){
  556. var params={
  557. tenantId:id,
  558. }
  559. listNoPageTenant(params).then(res=>{
  560. if(res.code==200){
  561. this.fwlist= res.data.map(v => {
  562. return {
  563. dictLabel: v.detailedAddress,
  564. dictValue: v.houseId,
  565. location: v.location
  566. }
  567. })
  568. // if(res.rows&&res.rows.length<2){
  569. // var newObj=res.rows[0];
  570. // this.datainfo.houseId=newObj.houseId;
  571. // this.datainfo.detailedAddress=newObj.detailedAddress
  572. // }
  573. }
  574. })
  575. },
  576. init(){
  577. // 人员类型
  578. getDictionaryFn('resident_Type').then(res=>{
  579. if(res.code==200){
  580. this.rylxList = res.data.map(v => {
  581. return {
  582. dictLabel: v.dictLabel,
  583. dictValue: v.dictValue
  584. }
  585. })
  586. }
  587. })
  588. // 房屋类型
  589. getDictionaryFn('house_type').then(res=>{
  590. if(res.code==200){
  591. this.fwlxList = res.data.map(v => {
  592. return {
  593. dictLabel: v.dictLabel,
  594. dictValue: v.dictValue
  595. }
  596. })
  597. }
  598. })
  599. // 是否
  600. getDictionaryFn('sys_yes_no').then(res=>{
  601. if(res.code==200){
  602. this.sfList = res.data.map(v => {
  603. return {
  604. dictLabel: v.dictLabel,
  605. dictValue: v.dictValue
  606. }
  607. })
  608. }
  609. })
  610. //户主关系
  611. getDictionaryFn('relationship_householder').then(res=>{
  612. if(res.code==200){
  613. this.hzgxList = res.data.map(v => {
  614. return {
  615. dictLabel: v.dictLabel,
  616. dictValue: v.dictValue
  617. }
  618. })
  619. }
  620. })
  621. // 房屋状态
  622. getDictionaryFn('house_status').then(res=>{
  623. if(res.code==200){
  624. this.fwztList = res.data.map(v => {
  625. return {
  626. dictLabel: v.dictLabel,
  627. dictValue: v.dictValue
  628. }
  629. })
  630. }
  631. })
  632. //权利类型
  633. getDictionaryFn('types_rights').then(res=>{
  634. if(res.code==200){
  635. this.qllxList = res.data.map(v => {
  636. return {
  637. dictLabel: v.dictLabel,
  638. dictValue: v.dictValue
  639. }
  640. })
  641. }
  642. })
  643. //房屋用途
  644. getDictionaryFn('use_remises').then(res=>{
  645. if(res.code==200){
  646. this.fwytList = res.data.map(v => {
  647. return {
  648. dictLabel: v.dictLabel,
  649. dictValue: v.dictValue
  650. }
  651. })
  652. }
  653. })
  654. //人员面貌
  655. getDictionaryFn('affiliation_personnel').then(res=>{
  656. if(res.code==200){
  657. this.rymmList = res.data.map(v => {
  658. return {
  659. dictLabel: v.dictLabel,
  660. dictValue: v.dictValue
  661. }
  662. })
  663. }
  664. })
  665. // 特殊类型
  666. getDictionaryFn('special_type').then(res=>{
  667. if(res.code==200){
  668. this.dslxList = res.data.map(v => {
  669. return {
  670. dictLabel: v.dictLabel,
  671. dictValue: v.dictValue
  672. }
  673. })
  674. }
  675. })
  676. //性别
  677. getDictionaryFn('gender').then(res=>{
  678. if(res.code==200){
  679. this.xbList = res.data.map(v => {
  680. return {
  681. dictLabel: v.dictLabel,
  682. dictValue: Number(v.dictValue)
  683. }
  684. })
  685. }
  686. })
  687. },
  688. getBackFn(){
  689. uni.navigateBack({
  690. delta:1
  691. })
  692. },
  693. bindDateChange(e){
  694. var val=e.detail.value;
  695. this.houserinfo.rightType=this.qllxList[val].dictValue;
  696. this.qllx=this.qllxList[val].dictLabel;
  697. },
  698. bindDateChangea(e){
  699. var val=e.detail.value;
  700. this.datainfo.residentRelationship=this.hzgxList[val].dictValue;
  701. this.hzgx=this.hzgxList[val].dictLabel
  702. },
  703. bindDateChangeb(e){
  704. var val=e.detail.value;
  705. this.houserinfo.houseStatus=this.fwztList[val].dictValue;
  706. this.fwzt=this.fwztList[val].dictLabel;
  707. },
  708. bindDateChangec(e){
  709. var val=e.detail.value;
  710. this.houserinfo.usageType=this.fwytList[val].dictValue;
  711. this.fwyt=this.fwytList[val].dictLabel;
  712. },
  713. bindDateChanged(e){
  714. var val=e.detail.value;
  715. this.houserinfo.hasParkingSpace=this.ywcwList[val].dictValue;
  716. this.ywcw=this.ywcwList[val].dictLabel;
  717. },
  718. bindDateChangee(e){
  719. var val=e.detail.value;
  720. this.datainfo.residentType=this.rylxList[val].dictValue;
  721. this.rylx=this.rylxList[val].dictLabel;
  722. },
  723. bindDateChangef(e){
  724. var val=e.detail.value;
  725. this.datainfo.residentAppearance=this.rymmList[val].dictValue;
  726. this.rymm=this.rymmList[val].dictLabel;
  727. },
  728. bindDateChangeg(e){
  729. var val=e.detail.value;
  730. this.datainfo.specialType=this.dslxList[val].dictValue;
  731. this.dslx=this.dslxList[val].dictLabel;
  732. },
  733. bindDateChangeh(e){
  734. var val=e.detail.value;
  735. this.houserinfo.houseType=this.fwlxList[val].dictValue;
  736. this.fwlx=this.fwlxList[val].dictLabel;
  737. },
  738. getDetail(){
  739. authentication(this.id).then(res=>{
  740. if(res.code==200){
  741. this.datainfo=res.data;
  742. if(res.data.facePhoto){
  743. this.phofile=res.data.facePhoto.split(',')
  744. }
  745. var data=JSON.parse(JSON.stringify(res.data))
  746. if(data.residentType!=3){
  747. this.listNoPageTenant(data.tenantId)
  748. }
  749. if(res.data.houseInfoRedidentList&&res.data.houseInfoRedidentList.length&&res.data.houseInfoRedidentList[0]){
  750. var houseinfo=res.data.houseInfoRedidentList[0]
  751. this.houserinfo=JSON.parse(JSON.stringify(houseinfo))
  752. }
  753. }
  754. })
  755. },
  756. getSubmit(){
  757. var that=this;
  758. this.$refs.form.validate().then(res => {
  759. var params=JSON.parse(JSON.stringify(this.datainfo))
  760. var phofile=JSON.parse(JSON.stringify(this.phofile))
  761. // if(phofile&&phofile.length){
  762. // params.facePhoto=this.phofile.join(',');
  763. // }
  764. params.facePhoto=this.phofile.join(',');
  765. if(!params.tenantId){
  766. this.$toast('请选择小区名称')
  767. return
  768. }
  769. if((params.residentType==1||params.residentType==2)&&!params.houseId){
  770. this.$toast('请选择房屋号')
  771. return
  772. }
  773. if(params.residentType==1&&params.isHouseholder=='Y'){
  774. var houserinfo=JSON.parse(JSON.stringify(this.houserinfo))
  775. if(!houserinfo.location){
  776. this.$toast('请输入房屋坐落')
  777. return
  778. }
  779. if(!houserinfo.area){
  780. this.$toast('请输入房屋面积')
  781. return
  782. }
  783. if(!houserinfo.detailedAddress){
  784. this.$toast('请输入详细门牌号')
  785. return
  786. }
  787. houserinfo.tenantId=params.tenantId;
  788. var newarr=[]
  789. newarr.push(houserinfo)
  790. params.houseInfoRedidentList=JSON.parse(JSON.stringify(newarr))
  791. }
  792. if(params.residentType==2){
  793. params.isTenant='Y';
  794. }else{
  795. params.isTenant=''
  796. }
  797. // if(!params.detailedAddress){
  798. // this.$toast('请选择居住门户')
  799. // return
  800. // }
  801. let _IDRe18 =
  802. /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  803. let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
  804. // 校验身份证:
  805. if (params.residentIdCard&&!_IDRe18.test(params.residentIdCard) && !_IDre15.test(params.residentIdCard)) {
  806. this.$toast("请输入正确身份证号")
  807. return
  808. }
  809. if(this.ptype=='add'){
  810. if(this.rzflag){
  811. residentInfoAdd(params).then(res=>{
  812. if(res.code==200){
  813. this.$toast("新增成功")
  814. setTimeout(function(){
  815. uni.$emit("residentInfoList")
  816. var initFace='';
  817. that.$store.dispatch('checkInitFace', initFace).then(() => {
  818. })
  819. uni.navigateBack({
  820. delta:1
  821. })
  822. },1500)
  823. }
  824. })
  825. }
  826. }else{
  827. if(this.rzflag){
  828. params.isFilter=true;
  829. residentInfoPut(params).then(res=>{
  830. if(res.code==200){
  831. this.$toast("修改成功")
  832. setTimeout(function(){
  833. uni.$emit("residentInfoList")
  834. var initFace='';
  835. that.$store.dispatch('checkInitFace', initFace).then(() => {
  836. })
  837. uni.navigateBack({
  838. delta:1
  839. })
  840. },1500)
  841. }
  842. })
  843. }
  844. }
  845. })
  846. },
  847. getPreviewa(idx,arr) {
  848. var newArr=[];
  849. arr.forEach(ite=>{
  850. var ds=this.baseUrl+ite
  851. newArr.push(ds)
  852. })
  853. uni.previewImage({
  854. urls: newArr,
  855. current:idx,
  856. success: function(data) {},
  857. fail: function(err) {}
  858. });
  859. },
  860. getPreview(img) {
  861. var newArr=[];
  862. var url=this.baseUrl+img
  863. newArr.push(url)
  864. uni.previewImage({
  865. urls: newArr,
  866. current:0,
  867. success: function(data) {},
  868. fail: function(err) {}
  869. });
  870. },
  871. getDelFn(idx,type){
  872. var that=this;
  873. uni.showModal({
  874. title: '确认删除',
  875. content: "是否确认删除",
  876. cancelText: '取消',
  877. confirmText: '确认',
  878. success: function(res) {
  879. if (res.confirm) {
  880. that.phofile.splice(idx,1)
  881. } else if (res.cancel) {
  882. }
  883. }
  884. });
  885. },
  886. getaddImageava(type){
  887. if(this.isdisabled){
  888. return
  889. }
  890. let that = this;
  891. let file =[],count=9
  892. uni.chooseImage({
  893. success:function(res){
  894. let img= res.tempFilePaths;
  895. if(img.length + file.length > count){
  896. uni.showToast({
  897. title: '最多上传'+count+'张图片',
  898. icon: 'none',
  899. duration: 2000
  900. })
  901. }else{
  902. let imglen = res.tempFilePaths.length;
  903. var fuwufile = [];
  904. uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
  905. that.phofile = that.phofile.concat(rs);
  906. })
  907. }
  908. }
  909. });
  910. },
  911. getaddImage(type){
  912. if(this.isdisabled){
  913. return
  914. }
  915. let that = this;
  916. let file =[],count=9
  917. uni.chooseImage({
  918. count: 1,
  919. success:function(res){
  920. let img= res.tempFilePaths;
  921. if(img.length + file.length > count){
  922. uni.showToast({
  923. title: '最多上传'+count+'张图片',
  924. icon: 'none',
  925. duration: 2000
  926. })
  927. }else{
  928. let imglen = res.tempFilePaths.length;
  929. var fuwufile = [];
  930. uploadIdentify('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
  931. var resurl=rs[0];
  932. if(type=='front'){
  933. that.datainfo.idCardBack = resurl.fileName;
  934. if (rs && rs.length > 0) {
  935. var obj = {
  936. type:type,
  937. url: resurl.urlOnline
  938. }
  939. that.getOcrIdCard(obj)
  940. }
  941. }else{
  942. that.houserinfo.houseImage=resurl.fileName;
  943. if(rs&&rs.length>0){
  944. var obj={
  945. url:resurl.urlOnline
  946. }
  947. that.getOcrIdCardfz(obj)
  948. }
  949. }
  950. })
  951. }
  952. }
  953. });
  954. },
  955. getOcrIdCard(obj) {
  956. var params = {
  957. image: obj.url,
  958. idCardSide: obj.type
  959. }
  960. getOcrIdCard(params).then(res => {
  961. if (res.code == 200) {
  962. var datainfo = res.data;
  963. if (obj.type == 'front') {
  964. this.datainfo.residentName = datainfo.realName;
  965. this.datainfo.residentIdCard = datainfo.idCard;
  966. this.datainfo.idCardAddress = datainfo.address;
  967. // } else {
  968. // this.datainfo.expirationDate = datainfo.expirationDate
  969. }
  970. }
  971. })
  972. },
  973. getOcrIdCardfz(obj){
  974. var params={
  975. image:obj.url
  976. }
  977. getrealEstateCertificatee(params).then(res=>{
  978. if(res.code==200){
  979. var datainfo=res.data;
  980. // var obj=JSON.parse(JSON.stringify(this.houseInfoRedidentList[idx]))
  981. this.houserinfo.ownerName=datainfo.ownerName;
  982. this.houserinfo.location=datainfo.location;
  983. this.houserinfo.rightType=datainfo.rightType;
  984. this.houserinfo.area=datainfo.area;
  985. this.houserinfo.documentNumber=datainfo.documentNumber;
  986. this.houserinfo.propertyUnitNumber=datainfo.propertyUnitNumber;
  987. this.houserinfo.coOwnership=datainfo.coOwnership;
  988. this.houserinfo.usageType=datainfo.usageType;
  989. this.houserinfo.usagePeriod=datainfo.usagePeriod;
  990. this.houserinfo.registrationDate=datainfo.registrationDate;
  991. this.houserinfo.coOwner=datainfo.coOwner;
  992. // this.houseInfoRedidentList.splice(idx,1,obj)
  993. }
  994. })
  995. },
  996. }
  997. }
  998. </script>
  999. <style>
  1000. page{background: #F3F3F0;}
  1001. </style>
  1002. <style lang="scss" scoped>
  1003. .coa /deep/ .uni-date__x-input{text-align: right;color: #AAAAAA;}
  1004. .check /deep/ .select-wrap{border: none;width: 100%;}
  1005. .mh35{min-height: 70rpx;display: flex;align-items: center;}
  1006. .check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
  1007. .check .cbox .chmain /deep/ .isnobor{border: none;}
  1008. .check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
  1009. .check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
  1010. .check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
  1011. .check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
  1012. .check /deep/ .uni-input-input{font-size: 26rpx;}
  1013. .check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
  1014. .check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
  1015. .check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
  1016. .check /deep/ .uni-data-checklist{flex: 0 0 auto;}
  1017. .check /deep/ .is-required{font-size: 26rpx;color: #F40027;margin-right: 4rpx;}
  1018. .check /deep/ .uni-collapse{background-color: transparent;}
  1019. // .check /deep/ .uni-collapse .chmain{margin-bottom: 24rpx;}
  1020. .check{min-height: 100vh;box-sizing: border-box;padding: 20rpx 18rpx 54rpx;}
  1021. .cbox{
  1022. .chtit{font-weight: 500;font-size: 24rpx;color: #666666;padding:20rpx 14rpx;}
  1023. .chmain{
  1024. padding: 0rpx 28rpx;background: #FFFFFF;border-radius: 20rpx;
  1025. .rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
  1026. image{width: 100%;height: 100%;}
  1027. }
  1028. }
  1029. .hbtns{font-weight: bold;display: flex;align-items: center;justify-content: center;font-size: 26rpx;height: 88rpx;border-radius: 20rpx;box-sizing: border-box;
  1030. &.bga{border: 1px solid #0256FD;color: #FFFFFF;background: #0256FD;}
  1031. &.bgb{border: 1px solid #0256FD;color: #0256FD;background: #CADBFF;}
  1032. }
  1033. .sylist{background: #F0F0F0;border-radius: 26rpx;border:2rpx solid #DADADA;margin-left: 26rpx;font-weight: 500;min-width:112rpx;height: 54rpx;box-sizing: border-box;
  1034. font-size: 26rpx;
  1035. color: #666666;
  1036. &.act{border: 2rpx solid #0256FD;background: #DCE8FF;color: #0256FD;}
  1037. }
  1038. .cmico{width: 48rpx;height: 48rpx;margin-left: 16rpx;}
  1039. .delbox{padding: 12rpx 32rpx;
  1040. image{width: 26rpx;height: 26rpx;margin-right: 14rpx;}
  1041. view{font-weight: 500;font-size: 26rpx;color: #FF6969;}
  1042. }
  1043. }
  1044. .addbox{width: 160rpx;height: 128rpx;background: #F0F0F0;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-left: 24rpx;margin-bottom: 20rpx;flex: 0 0 auto;
  1045. image{width: 48rpx;height: 42rpx;margin-bottom: 12rpx;}
  1046. view{font-weight: 500;font-size: 24rpx;color: #666666;}
  1047. }
  1048. .addimgs{display: flex;align-items: center;flex-wrap: wrap;justify-content: flex-end;
  1049. .assimg{width: 128rpx;height: 128rpx;position: relative;overflow: hidden;margin: 0 0 20rpx 24rpx;
  1050. .img{width: 100%;height: 100%;}
  1051. .delimg{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;}
  1052. }
  1053. }
  1054. </style>