open_bolt.vue 40 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156
  1. <template>
  2. <scroll-view>
  3. <view class="background">
  4. <view class="uni-list">
  5. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  6. <view>
  7. 行政区
  8. </view>
  9. <view v-if="this.isEmpty(this.XZQValue.dictValue)" style="margin-top: 10;"
  10. @click="pickerShow('xzq')">
  11. <span style="color: darkgray;">请选择行政区</span>
  12. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  13. </view>
  14. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('xzq')">
  15. <span style="color: black;">{{XZQValue.dictLabel}}</span>
  16. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  17. </view>
  18. </view>
  19. </view>
  20. <view class="uni-list">
  21. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  22. <view>
  23. 小区
  24. </view>
  25. <view v-if="this.isEmpty(this.XQValue.id)" class="uni-list-cell-db" style="margin-top: 10;"
  26. @click="pickerShow('xq')">
  27. <span style="color: darkgray;">请选择小区</span>
  28. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  29. </view>
  30. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('xq')">
  31. <span style="color: black;">{{XQValue.name}}</span>
  32. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="uni-list">
  37. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  38. <view class="uni-list-cell-left">
  39. 楼栋
  40. </view>
  41. <view v-if="this.isEmpty(this.LDValue.id)" class="uni-list-cell-db" style="margin-top: 10;"
  42. @click="pickerShow('ld')">
  43. <span style="color: darkgray;">请选择楼栋</span>
  44. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  45. </view>
  46. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('ld')">
  47. <span style="color: black;">{{LDValue.name}}</span>
  48. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="uni-list" style="margin-top: 10;">
  53. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  54. <view class="uni-list-cell-left">
  55. 单元
  56. </view>
  57. <view v-if="this.isEmpty(this.DYValue.id)" class="uni-list-cell-db" style="margin-top: 10;"
  58. @click="pickerShow('dy')">
  59. <span style="color: darkgray;">请选择单元</span>
  60. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  61. </view>
  62. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('dy')">
  63. <span style="color: black;">{{DYValue.name}}</span>
  64. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  65. </view>
  66. </view>
  67. </view>
  68. <view class="uni-list">
  69. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  70. <view class="uni-list-cell-left">
  71. 房间
  72. </view>
  73. <view v-if="this.isEmpty(this.FJValue.id)" class="uni-list-cell-db" style="margin-top: 10;"
  74. @click="pickerShow('fj')">
  75. <span style="color: darkgray;">请选择房间</span>
  76. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  77. </view>
  78. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('fj')">
  79. <span style="color: black;">{{FJValue.name}}</span>
  80. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  86. <view
  87. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  88. 燃气立杠
  89. </view>
  90. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  91. <view class="uni-list-cell-left">
  92. 立杠是否刷涂防腐漆
  93. </view>
  94. <view v-if="this.isEmpty(this.openBoltKey)" class="uni-list-cell-db" style="margin-top: 10;"
  95. @click="showActionsheet('openBoltKey')">
  96. <span style="color: darkgray;">请选择立杠是否刷涂防腐漆</span>
  97. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  98. </view>
  99. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="showActionsheet('openBoltKey')">
  100. <span style="color: black;">{{openBoltValue}}</span>
  101. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  102. </view>
  103. </view>
  104. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  105. <view class="uni-list-cell-left">
  106. 是否有立杠卡子
  107. </view>
  108. <view v-if="this.isEmpty(this.barClamptKey)" class="uni-list-cell-db" style="margin-top: 10;"
  109. @click="showActionsheet('barClamptKey')">
  110. <span style="color: darkgray;">请选择是否有立杠卡子</span>
  111. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  112. </view>
  113. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="showActionsheet('barClamptKey')">
  114. <span style="color: black;">{{barClamptValue}}</span>
  115. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  116. </view>
  117. </view>
  118. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  119. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  120. <image :src="loadImgSrc('updateimg.png')" mode=""
  121. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('1')"
  122. v-show="reviewStatus!='1'"></image>
  123. <view v-for="(item,index) in imgArr" :key="index" style="position: relative;">
  124. <view
  125. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  126. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  127. @click="showPhoto(index,'1')">
  128. </image>
  129. </view>
  130. <view v-else>
  131. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  132. </view>
  133. <view @click="remove(index,'1')"
  134. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  135. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  136. </image>
  137. </view>
  138. </view>
  139. </view>
  140. </view>
  141. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  142. <view
  143. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  144. 气密测试
  145. </view>
  146. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  147. <view class="uni-common-mt" style="width: 100%;">
  148. <text class="uni-title uni-common-pl">立杠气密测试 </text>
  149. <view style="width: 100%;box-sizing: border-box;">
  150. <textarea class="textarea" placeholder="请输入立杠气密测试 " maxlength="100"
  151. placeholder-style="padding: 10rpx;"
  152. style="width: 100%;height: 100%;border: 1rpx solid #cccccc; border-radius: 15rpx;padding: 10rpx;line-height:normal;"
  153. auto-height v-model="barTestValue"></textarea>
  154. </view>
  155. </view>
  156. </view>
  157. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  158. <view class="uni-common-mt" style="width: 100%;">
  159. <text class="uni-title uni-common-pl">单户气密测试</text>
  160. <view style="width: 100%;box-sizing: border-box;">
  161. <textarea class="textarea" placeholder="请输入单户气密测试" maxlength="100"
  162. placeholder-style="padding: 10rpx;"
  163. style="width: 100%;height: 100%;border: 1rpx solid #cccccc; border-radius: 15rpx;padding: 10rpx;line-height:normal;"
  164. auto-height v-model="singleValue"></textarea>
  165. </view>
  166. </view>
  167. </view>
  168. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  169. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  170. <image :src="loadImgSrc('updateimg.png')" mode=""
  171. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('2')"
  172. v-show="reviewStatus!='1'"></image>
  173. <view v-for="(item,index) in imgArr2" :key="index" style="position: relative;">
  174. <view
  175. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  176. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  177. @click="showPhoto(index,'2')">
  178. </image>
  179. </view>
  180. <view v-else>
  181. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  182. </view>
  183. <view @click="remove(index,'2')"
  184. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  185. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  186. </image>
  187. </view>
  188. </view>
  189. </view>
  190. </view>
  191. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  192. <view
  193. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  194. 燃气表
  195. </view>
  196. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  197. <view class="uni-list-cell-left">
  198. 表号
  199. </view>
  200. <view class="uni-list-cell-db" style="margin-top: 10;">
  201. <input class="uni-input" type="text" v-model="tableNumber"
  202. style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
  203. </view>
  204. </view>
  205. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  206. <view class="uni-list-cell-left">
  207. 表字
  208. </view>
  209. <view class="uni-list-cell-db" style="margin-top: 10;">
  210. <input class="uni-input" type="text" v-model="tableCharacters"
  211. style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
  212. </view>
  213. </view>
  214. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  215. <view class="uni-list-cell-left">
  216. 品牌
  217. </view>
  218. <view class="uni-list-cell-db" style="margin-top: 10;">
  219. <input class="uni-input" type="text" v-model="brankValue"
  220. style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
  221. </view>
  222. </view>
  223. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  224. <view class="uni-list-cell-left">
  225. 型号
  226. </view>
  227. <view class="uni-list-cell-db" style="margin-top: 10;">
  228. <input class="uni-input" type="text" v-model="tableModel"
  229. style="text-align: center; border: 1px solid #00aaff; border-radius: 20rpx;"></input>
  230. </view>
  231. </view>
  232. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  233. <view class="uni-list-cell-left">
  234. 进气方向
  235. </view>
  236. <view v-if="this.isEmpty(this.directionId)" class="uni-list-cell-db" style="margin-top: 10;">
  237. <span style="color: darkgray;">请选择进气方向</span>
  238. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  239. </view>
  240. <view v-else class="uni-list-cell-db" style="margin-top: 10;">
  241. <span style="color: black;">{{directionValue}}</span>
  242. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  243. </view>
  244. </view>
  245. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  246. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  247. <image :src="loadImgSrc('updateimg.png')" mode=""
  248. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('3')"
  249. v-show="reviewStatus!='1'"></image>
  250. <view v-for="(item,index) in imgArr3" :key="index" style="position: relative;">
  251. <view
  252. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  253. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  254. @click="showPhoto(index,'3')">
  255. </image>
  256. </view>
  257. <view v-else>
  258. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  259. </view>
  260. <view @click="remove(index,'3')"
  261. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  262. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  263. </image>
  264. </view>
  265. </view>
  266. </view>
  267. </view>
  268. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  269. <view
  270. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  271. 表后管
  272. </view>
  273. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  274. <view class="uni-list-cell-left">
  275. 是否有卡子固定
  276. </view>
  277. <view v-if="this.isEmpty(this.isFixationId)" class="uni-list-cell-db" style="margin-top: 10;"
  278. @click="showActionsheet('isFixationId')">
  279. <span style="color: darkgray;">请选择是否有卡子固定</span>
  280. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  281. </view>
  282. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="showActionsheet('isFixationId')">
  283. <span style="color: black;">{{isFixationValue}}</span>
  284. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  285. </view>
  286. </view>
  287. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  288. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  289. <image :src="loadImgSrc('updateimg.png')" mode=""
  290. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('4')"
  291. v-show="reviewStatus!='1'"></image>
  292. <view v-for="(item,index) in imgArr4" :key="index" style="position: relative;">
  293. <view
  294. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  295. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  296. @click="showPhoto(index,'4')">
  297. </image>
  298. </view>
  299. <view v-else>
  300. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  301. </view>
  302. <view @click="remove(index,'4')"
  303. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  304. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  305. </image>
  306. </view>
  307. </view>
  308. </view>
  309. </view>
  310. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  311. <view
  312. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  313. 灶前阀门
  314. </view>
  315. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  316. <view class="uni-list-cell-left">
  317. 是否阀管改造
  318. </view>
  319. <view v-if="this.isEmpty(this.isPipeChangeId)" class="uni-list-cell-db" style="margin-top: 10;"
  320. @click="showActionsheet('isPipeChangeId')">
  321. <span style="color: darkgray;">请选择是否阀管改造</span>
  322. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  323. </view>
  324. <view v-else class="uni-list-cell-db" style="margin-top: 10;"
  325. @click="showActionsheet('isPipeChangeId')">
  326. <span style="color: black;">{{isPipeChangeValue}}</span>
  327. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  328. </view>
  329. </view>
  330. <view class="container" style="border-bottom: 1px solid #f8f8f8;" v-if="isPipeChangeValue=='是'">
  331. <view class="uni-list-cell-left">
  332. 阀管类型
  333. </view>
  334. <view v-if="this.isEmpty(this.PipeTypeId)" class="uni-list-cell-db" style="margin-top: 10;">
  335. <span style="color: darkgray;">请选择阀管类型</span>
  336. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  337. </view>
  338. <view v-else class="uni-list-cell-db" style="margin-top: 10;">
  339. <span style="color: black;">{{PipeTypeValue}}</span>
  340. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  341. </view>
  342. </view>
  343. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  344. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  345. <image :src="loadImgSrc('updateimg.png')" mode=""
  346. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('5')"
  347. v-show="reviewStatus!='1'"></image>
  348. <view v-for="(item,index) in imgArr5" :key="index" style="position: relative;">
  349. <view
  350. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  351. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  352. @click="showPhoto(index,'5')">
  353. </image>
  354. </view>
  355. <view v-else>
  356. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  357. </view>
  358. <view @click="remove(index,'5')"
  359. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  360. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  361. </image>
  362. </view>
  363. </view>
  364. </view>
  365. </view>
  366. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  367. <view
  368. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  369. 软管
  370. </view>
  371. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  372. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  373. <image :src="loadImgSrc('updateimg.png')" mode=""
  374. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('6')"
  375. v-show="reviewStatus!='1'"></image>
  376. <view v-for="(item,index) in imgArr6" :key="index" style="position: relative;">
  377. <view
  378. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  379. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  380. @click="showPhoto(index,'6')">
  381. </image>
  382. </view>
  383. <view v-else>
  384. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  385. </view>
  386. <view @click="remove(index,'6')"
  387. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  388. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  389. </image>
  390. </view>
  391. </view>
  392. </view>
  393. </view>
  394. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  395. <view
  396. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  397. 灶具
  398. </view>
  399. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  400. <view class="uni-list-cell-left">
  401. 是否使用防风圈
  402. </view>
  403. <view v-if="this.isEmpty(this.isUseWindproofId)" class="uni-list-cell-db" style="margin-top: 10;"
  404. @click="showActionsheet('isUseWindproofId')">
  405. <span style="color: darkgray;">请选择是否使用防风圈</span>
  406. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  407. </view>
  408. <view v-else class="uni-list-cell-db" style="margin-top: 10;"
  409. @click="showActionsheet('isUseWindproofId')">
  410. <span style="color: black;">{{isUseWindproofValue}}</span>
  411. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  412. </view>
  413. </view>
  414. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  415. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  416. <image :src="loadImgSrc('updateimg.png')" mode=""
  417. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('7')"
  418. v-show="reviewStatus!='1'"></image>
  419. <view v-for="(item,index) in imgArr7" :key="index" style="position: relative;">
  420. <view
  421. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  422. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  423. @click="showPhoto(index,'7')">
  424. </image>
  425. </view>
  426. <view v-else>
  427. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  428. </view>
  429. <view @click="remove(index,'7')"
  430. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  431. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  432. </image>
  433. </view>
  434. </view>
  435. </view>
  436. </view>
  437. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  438. <view
  439. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  440. 用气环境
  441. </view>
  442. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  443. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  444. <image :src="loadImgSrc('updateimg.png')" mode=""
  445. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('8')"
  446. v-show="reviewStatus!='1'"></image>
  447. <view v-for="(item,index) in imgArr8" :key="index" style="position: relative;">
  448. <view
  449. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  450. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  451. @click="showPhoto(index,'8')">
  452. </image>
  453. </view>
  454. <view v-else>
  455. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  456. </view>
  457. <view @click="remove(index,'8')"
  458. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  459. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  460. </image>
  461. </view>
  462. </view>
  463. </view>
  464. </view>
  465. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  466. <view
  467. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  468. 回执单
  469. </view>
  470. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  471. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  472. <image :src="loadImgSrc('updateimg.png')" mode=""
  473. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('9')"
  474. v-show="reviewStatus!='1'"></image>
  475. <view v-for="(item,index) in imgArr9" :key="index" style="position: relative;">
  476. <view
  477. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  478. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  479. @click="showPhoto(index,'9')">
  480. </image>
  481. </view>
  482. <view v-else>
  483. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  484. </view>
  485. <view @click="remove(index,'9')"
  486. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  487. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  488. </image>
  489. </view>
  490. </view>
  491. </view>
  492. </view>
  493. <view class="action-btn" v-show="reviewStatus!='1'">
  494. <button @click="submit" class="btn cu-btn block bg-blue lg round">确认上传</button>
  495. </view>
  496. <!-- <bottom-sheet ref="refShare" :data="historyList"></bottom-sheet> -->
  497. <SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
  498. subtitleKey="id" v-model="name"></SelectPicker>
  499. <SelectPicker :list="dictOptions" @change="changeSelectDict" v-if="openDict" @close="closeDict"
  500. titleKey="dictLabel" subtitleKey="dictValue" v-model="dictLabel"></SelectPicker>
  501. <!-- <bottom-sheet ref="refShare" :data="historyList"></bottom-sheet> -->
  502. </scroll-view>
  503. </template>
  504. <script>
  505. import SelectPicker from '../../components/selectPicker/select_picker.vue'
  506. import bottomSheet from '../../components/bottomSheet/bottomSheet.vue'
  507. import {
  508. getDicts
  509. } from "@/api/system/dict/data";
  510. import {
  511. getAreaList,
  512. getBuildingList,
  513. getUnitList,
  514. getHousesList,
  515. openBolt,
  516. getRoomProjectList,
  517. getRoomProjectId,
  518. } from '@/api/common';
  519. import {
  520. getToken
  521. } from '../../utils/auth';
  522. export default {
  523. components: {
  524. SelectPicker,
  525. bottomSheet,
  526. },
  527. data() {
  528. return {
  529. title: '',
  530. name: '开栓',
  531. headers: {
  532. Authorization: "Bearer " + getToken()
  533. },
  534. projectValue: {
  535. 'dictValue': '0'
  536. },
  537. //1
  538. openBoltKey: '',
  539. openBoltValue: '',
  540. barClamptKey: '',
  541. barClamptValue: '',
  542. imgArr: [],
  543. //2
  544. barTestValue: '',
  545. singleValue: '',
  546. imgArr2: [],
  547. //3
  548. tableNumber: '',
  549. tableCharacters: '',
  550. brankValue: '',
  551. tableModel: '',
  552. directionValue: '',
  553. directionId: '',
  554. imgArr3: [],
  555. //4
  556. isFixationValue: '',
  557. isFixationId: '',
  558. imgArr4: [],
  559. //5
  560. isPipeChangeValue: '',
  561. isPipeChangeId: '',
  562. PipeTypeValue: '',
  563. PipeTypeId: '',
  564. imgArr5: [],
  565. //6
  566. imgArr6: [],
  567. //7
  568. isUseWindproofValue: '',
  569. isUseWindproofId: '',
  570. imgArr7: [],
  571. //8
  572. imgArr8: [],
  573. //9
  574. imgArr9: [],
  575. openBoltText: '',
  576. type: '',
  577. reviewStatus: '', //是否可以点击
  578. objValue: '', //上一页面传过来的值 新增接口用
  579. open: false,
  580. openDict: false,
  581. selectList: [],
  582. dictOptions: [],
  583. XQValue: {},
  584. XZQValue: {},
  585. remark: '',
  586. LDValue: {},
  587. DYValue: {},
  588. FJValue: {},
  589. XQList: '',
  590. LDList: '',
  591. DYList: '',
  592. FJList: '',
  593. progress: 0, //上传图片进度百分比
  594. loading: false,
  595. historyList: {}, //历史数据
  596. }
  597. },
  598. onLoad(options) {
  599. uni.setNavigationBarTitle({
  600. title: '开栓'
  601. })
  602. },
  603. methods: {
  604. //判断是否选择
  605. isEmpty(str) {
  606. return (!str || 0 === str.length);
  607. },
  608. submit() {
  609. if (this.isEmpty(this.XZQValue.dictValue)) {
  610. this.$modal.msg("请选择行政区")
  611. } else if (this.isEmpty(this.XQValue.id)) {
  612. this.$modal.msg("请选择小区")
  613. } else if (this.isEmpty(this.LDValue.id)) {
  614. this.$modal.msg("请选择楼栋")
  615. } else if (this.isEmpty(this.DYValue.id)) {
  616. this.$modal.msg("请选择单元")
  617. } else if (this.isEmpty(this.FJValue.id)) {
  618. this.$modal.msg("请选择房间")
  619. } else if (this.isEmpty(this.openBoltKey)) {
  620. this.$modal.msg("请选择立杠是否刷涂防腐漆")
  621. } else if (this.isEmpty(this.barClamptKey)) {
  622. this.$modal.msg("请选择是否有立杠卡子")
  623. } else if (this.imgArr.length <= 0) {
  624. this.$modal.msg("请上传燃气立杠照片")
  625. } else if (this.isEmpty(this.barTestValue)) {
  626. this.$modal.msg("请输入立杠气密测试")
  627. } else if (this.isEmpty(this.singleValue)) {
  628. this.$modal.msg("请输入单户气密测试")
  629. } else if (this.imgArr2.length <= 0) {
  630. this.$modal.msg("请上传气密测试照片")
  631. } else if (this.imgArr3.length <= 0) {
  632. this.$modal.msg("请上传燃气表照片")
  633. } else if (this.imgArr4.length <= 0) {
  634. this.$modal.msg("请上传表后管照片")
  635. } else if (this.isPipeChangeValue == '是' && this.isEmpty(this.PipeTypeId)) {
  636. this.$modal.msg("请选择阀管类型")
  637. } else if (this.imgArr5.length <= 0) {
  638. this.$modal.msg("请上传灶前阀门照片")
  639. } else if (this.imgArr6.length <= 0) {
  640. this.$modal.msg("请上传软管照片")
  641. } else if (this.imgArr7.length <= 0) {
  642. this.$modal.msg("请上传灶具照片")
  643. } else if (this.imgArr8.length <= 0) {
  644. this.$modal.msg("请上传用气环境照片")
  645. } else if (this.imgArr9.length <= 0) {
  646. this.$modal.msg("请上传回执单照片")
  647. } else {
  648. uni.showLoading()
  649. let param = {
  650. district: this.XZQValue.dictValue,
  651. areaId: this.XQValue.id,
  652. buildingId: this.LDValue.id,
  653. unitId: this.DYValue.id,
  654. houseId: this.FJValue.id,
  655. type: 1,
  656. isQualified: this.openBoltKey,
  657. remark: this.remark,
  658. picIds: this.imgArr
  659. }
  660. openBolt(param).then(res => {
  661. uni.hideLoading()
  662. if (res.code == '200') {
  663. uni.showToast({
  664. title: res.msg,
  665. icon: 'none',
  666. //显示持续时间为 3秒
  667. duration: 2000
  668. });
  669. setTimeout(function() {
  670. uni.navigateBack();
  671. }, 1000)
  672. }
  673. })
  674. //提交接口执行逻辑
  675. }
  676. },
  677. showActionsheet(type) {
  678. //是否
  679. getDicts("sys_yes_no").then(response => {
  680. this.dictOptions = response.data;
  681. let array = [];
  682. this.dictOptions.forEach((item, index) => {
  683. array.push(item.dictLabel)
  684. });
  685. uni.showActionSheet({
  686. itemList: array,
  687. success: (res) => {
  688. // this.openBoltKey = this.dictOptions[res.tapIndex].dictValue;
  689. // this.openBoltValue = this.dictOptions[res.tapIndex].dictLabel;
  690. if (type == 'openBoltKey') {
  691. this.openBoltKey = this.dictOptions[res.tapIndex].dictValue;
  692. this.openBoltValue = this.dictOptions[res.tapIndex].dictLabel;
  693. } else if (type == 'barClamptKey') {
  694. this.barClamptKey = this.dictOptions[res.tapIndex].dictValue;
  695. this.barClamptValue = this.dictOptions[res.tapIndex].dictLabel;
  696. } else if (type == 'isFixationId') {
  697. this.isFixationId = this.dictOptions[res.tapIndex].dictValue;
  698. this.isFixationValue = this.dictOptions[res.tapIndex].dictLabel;
  699. } else if (type == 'isPipeChangeId') {
  700. this.isPipeChangeId = this.dictOptions[res.tapIndex].dictValue;
  701. this.isPipeChangeValue = this.dictOptions[res.tapIndex].dictLabel;
  702. } else if (type == 'isUseWindproofId') {
  703. this.isUseWindproofId = this.dictOptions[res.tapIndex].dictValue;
  704. this.isUseWindproofValue = this.dictOptions[res.tapIndex].dictLabel;
  705. }
  706. },
  707. fail: (err) => {
  708. console.log('弹窗取消');
  709. }
  710. });
  711. });
  712. },
  713. showPhoto(index, type) {
  714. let typeArr = [];
  715. let newArr = [];
  716. if (type == '1') {
  717. typeArr = this.imgArr;
  718. } else if (type == '2') {
  719. typeArr = this.imgArr2;
  720. } else if (type == '3') {
  721. typeArr = this.imgArr3;
  722. } else if (type == '4') {
  723. typeArr = this.imgArr4;
  724. } else if (type == '5') {
  725. typeArr = this.imgArr5;
  726. } else if (type == '6') {
  727. typeArr = this.imgArr6;
  728. } else if (type == '7') {
  729. typeArr = this.imgArr7;
  730. } else if (type == '8') {
  731. typeArr = this.imgArr8;
  732. } else if (type == '9') {
  733. typeArr = this.imgArr9;
  734. }
  735. typeArr.forEach((item, index) => {
  736. if (item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg' ||
  737. item.substring(item.length - 4) == 'jpeg') {
  738. newArr.push(item)
  739. }
  740. });
  741. uni.previewImage({
  742. current: index,
  743. urls: newArr,
  744. })
  745. },
  746. remove(index, e) {
  747. uni.showModal({
  748. title: '提示',
  749. content: '是否删除该图片或视频?',
  750. success: (res) => {
  751. if (res.confirm) {
  752. if (e == '1') {
  753. this.imgArr.splice(index, 1)
  754. } else if (e == '2') {
  755. this.imgArr2.splice(index, 1)
  756. } else if (e == '3') {
  757. this.imgArr3.splice(index, 1)
  758. } else if (e == '4') {
  759. this.imgArr4.splice(index, 1)
  760. } else if (e == '5') {
  761. this.imgArr5.splice(index, 1)
  762. } else if (e == '6') {
  763. this.imgArr6.splice(index, 1)
  764. } else if (e == '7') {
  765. this.imgArr7.splice(index, 1)
  766. } else if (e == '8') {
  767. this.imgArr8.splice(index, 1)
  768. } else if (e == '9') {
  769. this.imgArr9.splice(index, 1)
  770. }
  771. }
  772. }
  773. })
  774. },
  775. choose(e) {
  776. let _this = this;
  777. uni.showActionSheet({
  778. title: '上传',
  779. itemList: ['图片', '视频'],
  780. success: (res) => {
  781. if (res.tapIndex == 0) {
  782. this.chooseimage(e)
  783. } else {
  784. this.choosevideo(e)
  785. }
  786. }
  787. })
  788. },
  789. chooseimage(e) {
  790. let _this = this;
  791. uni.chooseImage({
  792. sizeType: ['album', 'camera'],
  793. success(resp) {
  794. resp.tempFiles.forEach((item, index) => {
  795. const task = uni.uploadFile({
  796. url: _this.$HTTP + `/obs`,
  797. filePath: item.path,
  798. name: 'file',
  799. formData: {},
  800. header: _this.headers,
  801. success: res => {
  802. // 判断是否json字符串,将其转为json格式
  803. let data = JSON.parse(res.data);
  804. if (![200].includes(data.code)) {
  805. _this.$modal.msg(data.msg)
  806. } else {
  807. if (_this.progress === 100) {
  808. if (e == '1') {
  809. _this.imgArr.push(data.data.url)
  810. } else if (e == '2') {
  811. _this.imgArr2.push(data.data.url)
  812. } else if (e == '3') {
  813. _this.imgArr3.push(data.data.url)
  814. } else if (e == '4') {
  815. _this.imgArr4.push(data.data.url)
  816. } else if (e == '5') {
  817. _this.imgArr5.push(data.data.url)
  818. } else if (e == '6') {
  819. _this.imgArr6.push(data.data.url)
  820. } else if (e == '7') {
  821. _this.imgArr7.push(data.data.url)
  822. } else if (e == '8') {
  823. _this.imgArr8.push(data.data.url)
  824. } else if (e == '9') {
  825. _this.imgArr9.push(data.data.url)
  826. }
  827. _this.$modal.msg('上传成功!')
  828. }
  829. }
  830. },
  831. fail: e => {
  832. _this.$modal.msg('上传失败!')
  833. },
  834. complete: res => {
  835. uni.hideLoading();
  836. _this.uploading = false;
  837. }
  838. });
  839. task.onProgressUpdate(res => {
  840. _this.progress = res.progress;
  841. uni.showLoading({
  842. title: '上传中'
  843. })
  844. if (_this.progress != 100) {
  845. _this.loading = false
  846. } else {
  847. _this.loading = true
  848. }
  849. });
  850. })
  851. },
  852. })
  853. },
  854. choosevideo(e) {
  855. let _this = this;
  856. uni.chooseVideo({
  857. sourceType: ['album', 'camera'],
  858. maxDuration: 30,
  859. success(resp) {
  860. const task = uni.uploadFile({
  861. url: _this.$HTTP + `/obs`,
  862. filePath: resp.tempFilePath,
  863. name: 'file',
  864. formData: {},
  865. header: _this.headers,
  866. success: res => {
  867. // 判断是否json字符串,将其转为json格式
  868. let data = JSON.parse(res.data);
  869. if (![200].includes(res.statusCode)) {
  870. this.uploadError(index, data);
  871. } else {
  872. //上传成功
  873. if (_this.progress === 100) {
  874. if (e == '1') {
  875. _this.imgArr.push(data.data.url)
  876. } else if (e == '2') {
  877. _this.imgArr2.push(data.data.url)
  878. } else if (e == '3') {
  879. _this.imgArr3.push(data.data.url)
  880. } else if (e == '4') {
  881. _this.imgArr4.push(data.data.url)
  882. } else if (e == '5') {
  883. _this.imgArr5.push(data.data.url)
  884. } else if (e == '6') {
  885. _this.imgArr6.push(data.data.url)
  886. } else if (e == '7') {
  887. _this.imgArr7.push(data.data.url)
  888. } else if (e == '8') {
  889. _this.imgArr8.push(data.data.url)
  890. } else if (e == '9') {
  891. _this.imgArr9.push(data.data.url)
  892. }
  893. _this.$modal.msg('上传成功!')
  894. }
  895. }
  896. },
  897. fail: e => {
  898. _this.$modal.msg('上传失败!')
  899. this.uploadError(index, e);
  900. },
  901. complete: res => {
  902. uni.hideLoading();
  903. _this.uploading = false;
  904. }
  905. });
  906. task.onProgressUpdate(res => {
  907. _this.progress = res.progress;
  908. uni.showLoading({
  909. title: '上传中'
  910. })
  911. if (_this.progress != 100) {
  912. _this.loading = false
  913. } else {
  914. _this.loading = true
  915. }
  916. });
  917. },
  918. })
  919. },
  920. pickerShow(e) {
  921. this.type = e; //赋值类型
  922. if (e == 'xzq') { //行政区
  923. if (this.isEmpty(this.projectValue.dictValue)) {
  924. this.$modal.msg('请选择工程周期')
  925. } else {
  926. this.openDict = true;
  927. getDicts("district").then(response => {
  928. this.dictOptions = response.data;
  929. });
  930. }
  931. } else if (e == 'xq') { //小区
  932. if (this.isEmpty(this.XZQValue.dictValue)) {
  933. this.$modal.msg('请选择行政区')
  934. } else {
  935. this.open = true;
  936. this.selectList = this.XQList;
  937. }
  938. } else if (e == 'ld') { //楼栋
  939. if (this.isEmpty(this.XQValue.id)) {
  940. this.$modal.msg('请选择小区')
  941. } else {
  942. this.open = true;
  943. this.selectList = this.LDList;
  944. }
  945. } else if (e == 'dy') { //单元
  946. if (this.isEmpty(this.LDValue.id)) {
  947. this.$modal.msg('请选择楼栋')
  948. } else {
  949. this.open = true;
  950. this.selectList = this.DYList;
  951. }
  952. } else if (e == 'fj') { //房间
  953. if (this.isEmpty(this.DYValue.id)) {
  954. this.$modal.msg('请选择单元')
  955. } else {
  956. this.open = true;
  957. this.selectList = this.FJList;
  958. }
  959. }
  960. },
  961. changeSelectDict(item, index) {
  962. this.openDict = false;
  963. if (this.type == 'xzq') {
  964. this.XZQValue = item;
  965. //根据行政区id获取小区数据
  966. this.XQValue = ''; //重置小区数据
  967. this.LDValue = ''; //重置楼栋数据
  968. this.DYValue = ''; //重置单元数据
  969. getAreaList(item.dictValue).then(res => {
  970. this.XQList = res.data;
  971. })
  972. }
  973. },
  974. changeSelect(item, index) {
  975. this.open = false;
  976. if (this.type == 'xq') {
  977. this.XQValue = item;
  978. //根据小区id 获取楼栋数据
  979. this.LDValue = ''; //重置楼栋数据
  980. this.DYValue = ''; //重置单元数据
  981. getBuildingList(item.id).then(res => {
  982. this.LDList = res.data
  983. })
  984. } else if (this.type == 'ld') {
  985. this.LDValue = item;
  986. //根据楼栋ID 获取单元数据
  987. this.DYValue = ''; //重置单元数据
  988. this.FJValue = ''; //重置房间数据
  989. getUnitList(item.id).then(res => {
  990. this.DYList = res.data
  991. })
  992. } else if (this.type == 'dy') {
  993. this.DYValue = item; //根据单元数据 获取房间数据
  994. this.FJValue = ''; //重置房间数据
  995. getHousesList(item.id).then(res => {
  996. this.FJList = res.data
  997. })
  998. } else if (this.type == 'fj') {
  999. this.FJValue = item;
  1000. }
  1001. },
  1002. //关闭弹窗
  1003. close(e) {
  1004. this.open = false
  1005. },
  1006. //关闭弹窗
  1007. closeDict(e) {
  1008. this.openDict = false
  1009. },
  1010. }
  1011. }
  1012. </script>
  1013. <style lang="scss">
  1014. .container {
  1015. display: flex;
  1016. align-items: center;
  1017. justify-content: space-between;
  1018. padding: 10px;
  1019. position: relative;
  1020. }
  1021. .uni-list {
  1022. border: 1xp solid #eee;
  1023. }
  1024. .to-right-icon {
  1025. width: 15px;
  1026. height: 15px;
  1027. position: absolute;
  1028. top: 50%;
  1029. transform: translateY(-50%);
  1030. }
  1031. .text {
  1032. font-size: 16px;
  1033. color: #333;
  1034. }
  1035. .background {
  1036. // border: 15px solid hsla(0, 0%, 100%, .5);
  1037. background: white;
  1038. background-clip: padding-box;
  1039. padding: 20rpx;
  1040. border-radius: 20rpx;
  1041. margin: 20rpx;
  1042. /*从padding开始往外面裁剪背景*/
  1043. }
  1044. .btn {
  1045. width: 715rpx;
  1046. height: 69rpx;
  1047. background: #79A4F0;
  1048. border-radius: 6rpx;
  1049. font-size: 25rpx;
  1050. font-family: Microsoft YaHei;
  1051. font-weight: 400;
  1052. color: #FFFFFF;
  1053. line-height: 69rpx;
  1054. margin-top: 40rpx;
  1055. margin-bottom: 100rpx;
  1056. }
  1057. .number {
  1058. display: flex;
  1059. /* 水平居中显示子元素 */
  1060. align-items: flex-start;
  1061. /* 垂直居中显示子元素 */
  1062. justify-content: space-between;
  1063. /* 左右间距等于间距大小 */
  1064. padding: 10px;
  1065. /* 设置padding以提高视觉效果 */
  1066. }
  1067. .textarea {
  1068. margin-top: 10upx;
  1069. width: 100%;
  1070. border: 1rpx solid red;
  1071. min-height: 100upx;
  1072. line-height: 20px;
  1073. }
  1074. </style>