visitimg.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <view class="page">
  3. <view class="form">
  4. <u-form :model="form" ref="uForm">
  5. <!-- <u-form-item label-width="150" label="姓名" prop="real_name"><u-input placeholder="请输入您的真实姓名" v-model="form.real_name" type="text"></u-input></u-form-item>
  6. <u-form-item label-width="150" label="身份证号" prop="id_number">
  7. <u-input placeholder="请输入您的身份证号" v-model="form.id_number" type="text"></u-input>
  8. </u-form-item> -->
  9. <u-form-item label-width="150" label="到访备注信息" prop="visit_des" label-position="top">
  10. <u-input placeholder="请输入到访备注信息" v-model="form.visit_des" type="textarea"></u-input>
  11. </u-form-item>
  12. <u-form-item label-position="top" label-width="150" label="第三方水印" prop="img1">
  13. <view class="id_card" @click="uploadFrontImage">
  14. <u-icon v-if="form.img1 == null" name="plus" size="32" color="#606266"></u-icon>
  15. <text v-if="form.img1 == null">请先上传第三方水印照片</text>
  16. <image v-if="form.img1 != null" :src="idCardFront" mode="aspectFill"></image>
  17. </view>
  18. </u-form-item>
  19. <u-form-item label-position="top" label-width="150" label="带看单" prop="img2">
  20. <view class="id_card" @click="uploadBackImage">
  21. <u-icon v-if="form.img2 == null" name="plus" size="32" color="#606266"></u-icon>
  22. <text v-if="form.img2 == null">请先上传带看单照片</text>
  23. <image v-if="form.img2 != null" :src="idCardRevers" mode="aspectFill"></image>
  24. </view>
  25. </u-form-item>
  26. </u-form>
  27. <u-gap height="60"></u-gap>
  28. <u-button type="primary" :disabled="submitButtonDisabled" @click="submitModalShow = true">提交</u-button>
  29. <u-gap></u-gap>
  30. </view>
  31. <!-- modal -->
  32. <u-modal v-model="submitModalShow" content="请务必仔细确认各项信息是否正确" :show-cancel-button="true" @confirm="submitHandle()"></u-modal>
  33. <!-- mask -->
  34. <u-mask :show="maskShow" @click="maskShow = false">
  35. <view class="warp">
  36. <!-- <u-image src="https://zdcdn.2bwin.cn/uploads/20220513/90abe6fe85d6c17f6bdc069955fbb878.png" mode="widthFix" width="400rpx" border-radius="20rpx"></u-image> -->
  37. <u-gap></u-gap>
  38. <u-button size="medium" type="primary" @click="maskShow = false">确定</u-button>
  39. </view>
  40. </u-mask>
  41. <!-- utoast -->
  42. <u-toast ref="uToast" />
  43. </view>
  44. </template>
  45. <script>
  46. var that;
  47. export default {
  48. data() {
  49. return {
  50. maskShow: false,
  51. idCardFront: '',
  52. idCardRevers: '',
  53. form: {
  54. visit_des: '',
  55. img1: null,
  56. img2: null,
  57. },
  58. curId: '',
  59. cObj: {},
  60. submitButtonDisabled: false,
  61. rules: {
  62. visit_des: [
  63. {
  64. required: true,
  65. message: '备注不得为空',
  66. trigger: ['change', 'blur']
  67. },
  68. ],
  69. img1: [
  70. {
  71. required: true,
  72. message: '第三方水印照片不得为空',
  73. trigger: ['change', 'blur']
  74. }
  75. ],
  76. img2: [
  77. {
  78. required: true,
  79. message: '带看单照片不得为空',
  80. trigger: ['change', 'blur']
  81. }
  82. ],
  83. },
  84. submitModalShow: false,
  85. };
  86. },
  87. onLoad(params) {
  88. this.curId = params.id
  89. this.getData()
  90. },
  91. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  92. onReady() {
  93. this.$refs.uForm.setRules(this.rules);
  94. },
  95. methods: {
  96. getData () {
  97. uni.api.cust.apireportvisitdetail({report_id: this.curId}).then(res => {
  98. const cObj = res || {}
  99. if (cObj.id) {
  100. this.idCardFront = cObj.img1
  101. this.idCardRevers = cObj.img2
  102. let f = {
  103. visit_des: cObj.visit_des,
  104. img1: cObj.img1,
  105. img2: cObj.img2,
  106. }
  107. this.form = {...f}
  108. this.cObj = {...cObj}
  109. }
  110. })
  111. },
  112. uploadImgHandle (bc) {
  113. uni.chooseImage({
  114. count: 1,
  115. sizeType: ['compressed'],
  116. success: function(res) {
  117. const filePath = res.tempFilePaths[0];
  118. let token = uni.getStorageSync('MD_token') || ''
  119. uni.uploadFile({
  120. url: uni.baseUrl + 'api/upload/cloud',
  121. filePath,
  122. name: 'upload',
  123. formData: {
  124. 'token': token
  125. },
  126. success: (f) => {
  127. const cData = JSON.parse(f.data)
  128. if (cData.errno === 0) {
  129. if (bc && typeof(bc) === 'function') bc(cData.data)
  130. } else {
  131. uin.$msg(cData.errmsg || `未知错误-${cData.errno}`)
  132. }
  133. }
  134. })
  135. }
  136. })
  137. },
  138. // 选择、验证、上传正面照片
  139. uploadFrontImage() {
  140. this.uploadImgHandle((d) => {
  141. this.form.img1 = d.url
  142. this.idCardFront = d.url
  143. })
  144. },
  145. // 选择、上传身份证背面
  146. uploadBackImage() {
  147. this.uploadImgHandle((d) => {
  148. this.form.img2 = d.url
  149. this.idCardRevers = d.url
  150. })
  151. },
  152. submitHandle() {
  153. const that = this
  154. this.$refs.uForm.validate(valid => {
  155. if (valid) {
  156. let params = {
  157. ...that.form
  158. }
  159. params.report_id = that.curId
  160. uni.api.cust.apireportvisitchange(params).then(res => {
  161. uni.$msgConfirm('编辑成功', () => {
  162. uni.reLaunch({
  163. url: `/pages/agent/recommend/detail?id=${that.curId}`
  164. })
  165. }, () => {
  166. uni.reLaunch({
  167. url: `/pages/agent/recommend/detail?id=${that.curId}`
  168. })
  169. })
  170. })
  171. }
  172. });
  173. },
  174. // 以下是工具函数
  175. // 格式化日期的月份或天数的显示(小于10,在前面增加0)
  176. getFormatDate(value) {
  177. if (value == undefined || value == '') {
  178. return '';
  179. }
  180. var str = value;
  181. if (parseInt(value) < 10) {
  182. str = '0' + value;
  183. }
  184. return str;
  185. }
  186. }
  187. };
  188. </script>
  189. <style lang="scss">
  190. .page {
  191. background-color: #ffffff;
  192. }
  193. .form {
  194. border-radius: 10rpx;
  195. padding: 0 40rpx;
  196. }
  197. .popup-body {
  198. .tips-title {
  199. font-size: $u-p;
  200. margin-bottom: 20rpx;
  201. }
  202. .tips-content {
  203. font-size: $u-p2;
  204. color: $u-tips-color;
  205. margin-bottom: 60rpx;
  206. }
  207. }
  208. .id_card {
  209. color: #606266;
  210. width: 100%;
  211. height: 350rpx;
  212. display: flex;
  213. flex-direction: column;
  214. align-items: center;
  215. justify-content: center;
  216. background-color: #f4f5f6;
  217. font-size: $u-p2;
  218. border-radius: 10rpx;
  219. image {
  220. border-radius: 10rpx;
  221. }
  222. }
  223. .footer {
  224. position: relative;
  225. text-align: center;
  226. font-size: $u-p2;
  227. left: 0;
  228. bottom: 20rpx;
  229. .agreement {
  230. color: $u-theme-color;
  231. }
  232. }
  233. .slot-content {
  234. font-size: 28rpx;
  235. color: $u-content-color;
  236. padding: 20rpx;
  237. }
  238. .warp {
  239. display: flex;
  240. flex-direction: column;
  241. align-items: center;
  242. justify-content: center;
  243. height: 100%;
  244. }
  245. .rect {
  246. width: 400rpx;
  247. height: 400rpx;
  248. background-color: #fff;
  249. }
  250. </style>