open_bolt.vue 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173
  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.direction.dictValue)" class="uni-list-cell-db" style="margin-top: 10;"
  237. @click="pickerShow('jqfx')">
  238. <span style="color: darkgray;">请选择进气方向</span>
  239. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  240. </view>
  241. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('jqfx')">
  242. <span style="color: black;">{{direction.dictLabel}}</span>
  243. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  244. </view>
  245. </view>
  246. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  247. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  248. <image :src="loadImgSrc('updateimg.png')" mode=""
  249. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('3')"
  250. v-show="reviewStatus!='1'"></image>
  251. <view v-for="(item,index) in imgArr3" :key="index" style="position: relative;">
  252. <view
  253. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  254. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  255. @click="showPhoto(index,'3')">
  256. </image>
  257. </view>
  258. <view v-else>
  259. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  260. </view>
  261. <view @click="remove(index,'3')"
  262. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  263. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  264. </image>
  265. </view>
  266. </view>
  267. </view>
  268. </view>
  269. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  270. <view
  271. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  272. 表后管
  273. </view>
  274. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  275. <view class="uni-list-cell-left">
  276. 是否有卡子固定
  277. </view>
  278. <view v-if="this.isEmpty(this.isFixationId)" class="uni-list-cell-db" style="margin-top: 10;"
  279. @click="showActionsheet('isFixationId')">
  280. <span style="color: darkgray;">请选择是否有卡子固定</span>
  281. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  282. </view>
  283. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="showActionsheet('isFixationId')">
  284. <span style="color: black;">{{isFixationValue}}</span>
  285. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  286. </view>
  287. </view>
  288. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  289. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  290. <image :src="loadImgSrc('updateimg.png')" mode=""
  291. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('4')"
  292. v-show="reviewStatus!='1'"></image>
  293. <view v-for="(item,index) in imgArr4" :key="index" style="position: relative;">
  294. <view
  295. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  296. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  297. @click="showPhoto(index,'4')">
  298. </image>
  299. </view>
  300. <view v-else>
  301. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  302. </view>
  303. <view @click="remove(index,'4')"
  304. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  305. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  306. </image>
  307. </view>
  308. </view>
  309. </view>
  310. </view>
  311. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  312. <view
  313. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  314. 灶前阀门
  315. </view>
  316. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  317. <view class="uni-list-cell-left">
  318. 是否阀管改造
  319. </view>
  320. <view v-if="this.isEmpty(this.isPipeChangeId)" class="uni-list-cell-db" style="margin-top: 10;"
  321. @click="showActionsheet('isPipeChangeId')">
  322. <span style="color: darkgray;">请选择是否阀管改造</span>
  323. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  324. </view>
  325. <view v-else class="uni-list-cell-db" style="margin-top: 10;"
  326. @click="showActionsheet('isPipeChangeId')">
  327. <span style="color: black;">{{isPipeChangeValue}}</span>
  328. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  329. </view>
  330. </view>
  331. <view class="container" style="border-bottom: 1px solid #f8f8f8;" v-if="isPipeChangeValue=='是'">
  332. <view class="uni-list-cell-left">
  333. 阀管类型
  334. </view>
  335. <view v-if="this.isEmpty(this.PipeType.dictValue)" class="uni-list-cell-db" style="margin-top: 10;"
  336. @click="pickerShow('fglx')">
  337. <span style="color: darkgray;">请选择阀管类型</span>
  338. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  339. </view>
  340. <view v-else class="uni-list-cell-db" style="margin-top: 10;" @click="pickerShow('fglx')">
  341. <span style="color: black;">{{PipeType.dictLabel}}</span>
  342. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  343. </view>
  344. </view>
  345. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  346. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  347. <image :src="loadImgSrc('updateimg.png')" mode=""
  348. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('5')"
  349. v-show="reviewStatus!='1'"></image>
  350. <view v-for="(item,index) in imgArr5" :key="index" style="position: relative;">
  351. <view
  352. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  353. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  354. @click="showPhoto(index,'5')">
  355. </image>
  356. </view>
  357. <view v-else>
  358. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  359. </view>
  360. <view @click="remove(index,'5')"
  361. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  362. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  363. </image>
  364. </view>
  365. </view>
  366. </view>
  367. </view>
  368. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  369. <view
  370. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  371. 软管
  372. </view>
  373. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  374. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  375. <image :src="loadImgSrc('updateimg.png')" mode=""
  376. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('6')"
  377. v-show="reviewStatus!='1'"></image>
  378. <view v-for="(item,index) in imgArr6" :key="index" style="position: relative;">
  379. <view
  380. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  381. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  382. @click="showPhoto(index,'6')">
  383. </image>
  384. </view>
  385. <view v-else>
  386. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  387. </view>
  388. <view @click="remove(index,'6')"
  389. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  390. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  391. </image>
  392. </view>
  393. </view>
  394. </view>
  395. </view>
  396. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  397. <view
  398. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  399. 灶具
  400. </view>
  401. <view class="container" style="border-bottom: 1px solid #f8f8f8;">
  402. <view class="uni-list-cell-left">
  403. 是否使用防风圈
  404. </view>
  405. <view v-if="this.isEmpty(this.isUseWindproofId)" class="uni-list-cell-db" style="margin-top: 10;"
  406. @click="showActionsheet('isUseWindproofId')">
  407. <span style="color: darkgray;">请选择是否使用防风圈</span>
  408. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  409. </view>
  410. <view v-else class="uni-list-cell-db" style="margin-top: 10;"
  411. @click="showActionsheet('isUseWindproofId')">
  412. <span style="color: black;">{{isUseWindproofValue}}</span>
  413. <image :src="loadImgSrc('icon_right.png')" class="to-right-icon"></image>
  414. </view>
  415. </view>
  416. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  417. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  418. <image :src="loadImgSrc('updateimg.png')" mode=""
  419. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('7')"
  420. v-show="reviewStatus!='1'"></image>
  421. <view v-for="(item,index) in imgArr7" :key="index" style="position: relative;">
  422. <view
  423. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  424. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  425. @click="showPhoto(index,'7')">
  426. </image>
  427. </view>
  428. <view v-else>
  429. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  430. </view>
  431. <view @click="remove(index,'7')"
  432. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  433. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  434. </image>
  435. </view>
  436. </view>
  437. </view>
  438. </view>
  439. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  440. <view
  441. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  442. 用气环境
  443. </view>
  444. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  445. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  446. <image :src="loadImgSrc('updateimg.png')" mode=""
  447. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('8')"
  448. v-show="reviewStatus!='1'"></image>
  449. <view v-for="(item,index) in imgArr8" :key="index" style="position: relative;">
  450. <view
  451. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  452. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  453. @click="showPhoto(index,'8')">
  454. </image>
  455. </view>
  456. <view v-else>
  457. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  458. </view>
  459. <view @click="remove(index,'8')"
  460. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  461. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  462. </image>
  463. </view>
  464. </view>
  465. </view>
  466. </view>
  467. <view class="background" style="margin-top: 10px;margin-bottom: 10px;">
  468. <view
  469. style="font-size: 16px;margin-left: 10px;margin-top: 10px;display: flex; justify-content: space-between; margin-bottom: 10px;">
  470. 回执单
  471. </view>
  472. <view class="container" style="color: #b2b2b2;">*请上传照片</view>
  473. <view style="display: flex; flex-wrap: wrap;margin-top: 10px; margin-left: 10px;">
  474. <image :src="loadImgSrc('updateimg.png')" mode=""
  475. style="width: 200rpx; height: 150rpx; margin: 0 12rpx;; " @click="choose('9')"
  476. v-show="reviewStatus!='1'"></image>
  477. <view v-for="(item,index) in imgArr9" :key="index" style="position: relative;">
  478. <view
  479. v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg'||item.substring(item.length-4)=='jpeg' ">
  480. <image :src="item" mode="" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"
  481. @click="showPhoto(index,'9')">
  482. </image>
  483. </view>
  484. <view v-else>
  485. <video :src="item" style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
  486. </view>
  487. <view @click="remove(index,'9')"
  488. style="position: absolute; top: 0; right: 14rpx; border-radius: 50%;">
  489. <image :src="loadImgSrc('icon_close.png')" style=" width: 15px; height: 15px;">
  490. </image>
  491. </view>
  492. </view>
  493. </view>
  494. </view>
  495. <view class="action-btn" v-show="reviewStatus!='1'">
  496. <button @click="submit" class="btn cu-btn block bg-blue lg round">确认上传</button>
  497. </view>
  498. <!-- <bottom-sheet ref="refShare" :data="historyList"></bottom-sheet> -->
  499. <SelectPicker :list="selectList" @change="changeSelect" v-if="open" @close="close" titleKey="name"
  500. subtitleKey="id" v-model="name"></SelectPicker>
  501. <SelectPicker :list="dictOptions" @change="changeSelectDict" v-if="openDict" @close="closeDict"
  502. titleKey="dictLabel" subtitleKey="dictValue" v-model="dictLabel"></SelectPicker>
  503. <!-- <bottom-sheet ref="refShare" :data="historyList"></bottom-sheet> -->
  504. </scroll-view>
  505. </template>
  506. <script>
  507. import SelectPicker from '../../components/selectPicker/select_picker.vue'
  508. import bottomSheet from '../../components/bottomSheet/bottomSheet.vue'
  509. import {
  510. getDicts
  511. } from "@/api/system/dict/data";
  512. import {
  513. getAreaList,
  514. getBuildingList,
  515. getUnitList,
  516. getHousesList,
  517. openBolt,
  518. getRoomProjectList,
  519. getRoomProjectId,
  520. } from '@/api/common';
  521. import {
  522. getToken
  523. } from '../../utils/auth';
  524. export default {
  525. components: {
  526. SelectPicker,
  527. bottomSheet,
  528. },
  529. data() {
  530. return {
  531. title: '',
  532. name: '开栓',
  533. headers: {
  534. Authorization: "Bearer " + getToken()
  535. },
  536. projectValue: {
  537. 'dictValue': '0'
  538. },
  539. //1
  540. openBoltKey: '',
  541. openBoltValue: '',
  542. barClamptKey: '',
  543. barClamptValue: '',
  544. imgArr: [],
  545. //2
  546. barTestValue: '',
  547. singleValue: '',
  548. imgArr2: [],
  549. //3
  550. tableNumber: '',
  551. tableCharacters: '',
  552. brankValue: '',
  553. tableModel: '',
  554. direction: '',
  555. imgArr3: [],
  556. //4
  557. isFixationValue: '',
  558. isFixationId: '',
  559. imgArr4: [],
  560. //5
  561. isPipeChangeValue: '',
  562. isPipeChangeId: '',
  563. PipeType: '',
  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.PipeType.dictValue)) {
  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 == 'fglx') {
  923. this.openDict = true;
  924. getDicts("gas_change_type").then(response => {
  925. this.dictOptions = response.data;
  926. });
  927. } else if (e == 'jqfx') {
  928. this.openDict = true;
  929. getDicts("gas_meter_direction").then(response => {
  930. this.dictOptions = response.data;
  931. });
  932. } else if (e == 'xzq') { //行政区
  933. if (this.isEmpty(this.projectValue.dictValue)) {
  934. this.$modal.msg('请选择工程周期')
  935. } else {
  936. this.openDict = true;
  937. getDicts("district").then(response => {
  938. this.dictOptions = response.data;
  939. });
  940. }
  941. } else if (e == 'xq') { //小区
  942. if (this.isEmpty(this.XZQValue.dictValue)) {
  943. this.$modal.msg('请选择行政区')
  944. } else {
  945. this.open = true;
  946. this.selectList = this.XQList;
  947. }
  948. } else if (e == 'ld') { //楼栋
  949. if (this.isEmpty(this.XQValue.id)) {
  950. this.$modal.msg('请选择小区')
  951. } else {
  952. this.open = true;
  953. this.selectList = this.LDList;
  954. }
  955. } else if (e == 'dy') { //单元
  956. if (this.isEmpty(this.LDValue.id)) {
  957. this.$modal.msg('请选择楼栋')
  958. } else {
  959. this.open = true;
  960. this.selectList = this.DYList;
  961. }
  962. } else if (e == 'fj') { //房间
  963. if (this.isEmpty(this.DYValue.id)) {
  964. this.$modal.msg('请选择单元')
  965. } else {
  966. this.open = true;
  967. this.selectList = this.FJList;
  968. }
  969. }
  970. },
  971. changeSelectDict(item, index) {
  972. this.openDict = false;
  973. if (this.type == 'fglx') {
  974. this.PipeType = item;
  975. } else if (this.type == 'jqfx') {
  976. this.direction = item;
  977. } else if (this.type == 'xzq') {
  978. this.XZQValue = item;
  979. //根据行政区id获取小区数据
  980. this.XQValue = ''; //重置小区数据
  981. this.LDValue = ''; //重置楼栋数据
  982. this.DYValue = ''; //重置单元数据
  983. getAreaList(item.dictValue).then(res => {
  984. this.XQList = res.data;
  985. })
  986. }
  987. },
  988. changeSelect(item, index) {
  989. this.open = false;
  990. if (this.type == 'xq') {
  991. this.XQValue = item;
  992. //根据小区id 获取楼栋数据
  993. this.LDValue = ''; //重置楼栋数据
  994. this.DYValue = ''; //重置单元数据
  995. getBuildingList(item.id).then(res => {
  996. this.LDList = res.data
  997. })
  998. } else if (this.type == 'ld') {
  999. this.LDValue = item;
  1000. //根据楼栋ID 获取单元数据
  1001. this.DYValue = ''; //重置单元数据
  1002. this.FJValue = ''; //重置房间数据
  1003. getUnitList(item.id).then(res => {
  1004. this.DYList = res.data
  1005. })
  1006. } else if (this.type == 'dy') {
  1007. this.DYValue = item; //根据单元数据 获取房间数据
  1008. this.FJValue = ''; //重置房间数据
  1009. getHousesList(item.id).then(res => {
  1010. this.FJList = res.data
  1011. })
  1012. } else if (this.type == 'fj') {
  1013. this.FJValue = item;
  1014. }
  1015. },
  1016. //关闭弹窗
  1017. close(e) {
  1018. this.open = false
  1019. },
  1020. //关闭弹窗
  1021. closeDict(e) {
  1022. this.openDict = false
  1023. },
  1024. }
  1025. }
  1026. </script>
  1027. <style lang="scss">
  1028. .container {
  1029. display: flex;
  1030. align-items: center;
  1031. justify-content: space-between;
  1032. padding: 10px;
  1033. position: relative;
  1034. }
  1035. .uni-list {
  1036. border: 1xp solid #eee;
  1037. }
  1038. .to-right-icon {
  1039. width: 15px;
  1040. height: 15px;
  1041. position: absolute;
  1042. top: 50%;
  1043. transform: translateY(-50%);
  1044. }
  1045. .text {
  1046. font-size: 16px;
  1047. color: #333;
  1048. }
  1049. .background {
  1050. // border: 15px solid hsla(0, 0%, 100%, .5);
  1051. background: white;
  1052. background-clip: padding-box;
  1053. padding: 20rpx;
  1054. border-radius: 20rpx;
  1055. margin: 20rpx;
  1056. /*从padding开始往外面裁剪背景*/
  1057. }
  1058. .btn {
  1059. width: 715rpx;
  1060. height: 69rpx;
  1061. background: #79A4F0;
  1062. border-radius: 6rpx;
  1063. font-size: 25rpx;
  1064. font-family: Microsoft YaHei;
  1065. font-weight: 400;
  1066. color: #FFFFFF;
  1067. line-height: 69rpx;
  1068. margin-top: 40rpx;
  1069. margin-bottom: 100rpx;
  1070. }
  1071. .number {
  1072. display: flex;
  1073. /* 水平居中显示子元素 */
  1074. align-items: flex-start;
  1075. /* 垂直居中显示子元素 */
  1076. justify-content: space-between;
  1077. /* 左右间距等于间距大小 */
  1078. padding: 10px;
  1079. /* 设置padding以提高视觉效果 */
  1080. }
  1081. .textarea {
  1082. margin-top: 10upx;
  1083. width: 100%;
  1084. border: 1rpx solid red;
  1085. min-height: 100upx;
  1086. line-height: 20px;
  1087. }
  1088. </style>