shoprz.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. <template>
  2. <view class="content ">
  3. <view class="item-name">
  4. 工资认证
  5. </view>
  6. <view class="listBox">
  7. <view class="con_box">
  8. <view class="con_image" v-for="(item,ind) in updata.service_audit_imgs">
  9. <image class="img" @click="navCroper(400,400,'audit',ind)"
  10. :src="item"></image>
  11. <image @click="updata.service_audit_imgs.splice(ind,1)" class="tip" src="../../../static/icon/goodsExit.png" mode="scaleToFill"></image>
  12. </view>
  13. <view class="con_image">
  14. <image class="img" @click="navCroper(400,400,'auditall')"
  15. src="../../../static/image/upImg.png"></image>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="base-buttom" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">提交</view>
  20. </view>
  21. </template>
  22. <script>
  23. import {
  24. subTypeAudit
  25. } from '@/api/model.js';
  26. import {
  27. mapState
  28. } from "vuex"
  29. export default {
  30. data() {
  31. return {
  32. // 上传数据
  33. updata:{
  34. service_audit_imgs: [], //服务图片
  35. },
  36. loding: false, //是否载入中
  37. };
  38. },
  39. onLoad(options) {
  40. this.init()
  41. },
  42. computed: {
  43. // #ifdef H5
  44. ...mapState(['urlFile']),
  45. // #endif
  46. ...mapState(['baseURL']),
  47. },
  48. methods: {
  49. // 初始化
  50. init() {
  51. const that = this;
  52. },
  53. upLoad(path) {
  54. // #ifdef H5
  55. console.log(path, 'h5');
  56. // #endif
  57. uni.showLoading({
  58. title: '图片上传中',
  59. mask: true
  60. });
  61. return new Promise((resolve, error) => {
  62. uni.uploadFile({
  63. url: this.baseURL + '/api/user/qiniuUpload', //仅为示例,非真实的接口地址
  64. filePath: path,
  65. name: 'file',
  66. header: {
  67. "token": uni.getStorageSync('token')
  68. },
  69. success: (uploadFileRes) => {
  70. if ("string" === typeof uploadFileRes.data) {
  71. resolve(JSON.parse(uploadFileRes.data).data)
  72. } else {
  73. resolve(uploadFileRes.data.data)
  74. }
  75. },
  76. complete() {
  77. uni.hideLoading()
  78. }
  79. });
  80. })
  81. },
  82. // 图片裁切
  83. /**
  84. * @param {Number} w 裁切宽度比例
  85. * @param {Number} h 裁切高度比例
  86. * @param {Number} mw 图片最小宽度
  87. * @param {Number} mh 图片最小高度
  88. * @param {String} url url修改
  89. */
  90. navCroper(w, h, type, ind) {
  91. let that = this;
  92. let tt = (type == 'upimg' ? 2 : 1)
  93. this.onImg(tt).then((url) => {
  94. uni.navigateTo({
  95. url: `../realName/cropper?width=${w}&height=${h}`,
  96. events: {
  97. uploadSuccess(res) {
  98. that.upLoad(res).then((urldata) => {
  99. if (type == 'audit') {
  100. that.updata.service_audit_imgs.splice(ind, 1, urldata.img)
  101. }else if (type == 'auditall') {
  102. that.updata.service_audit_imgs.push( urldata.img)
  103. }
  104. })
  105. }
  106. },
  107. success: function(res) {
  108. // 通过eventChannel向被打开页面传送数据
  109. res.eventChannel.emit('urlNext', {
  110. url
  111. })
  112. }
  113. })
  114. })
  115. },
  116. onImg(type) {
  117. const _this = this
  118. return new Promise((ok, erro) => {
  119. // 判断是否需要选择
  120. if (type == 1) {
  121. uni.showActionSheet({
  122. itemList: ['拍照', '选择一张照片'],
  123. success: function(res) {
  124. _this.chooseImage(res.tapIndex).then((url) => {
  125. ok(url)
  126. }).catch((res) => {
  127. erro(res)
  128. })
  129. },
  130. fail: function(res) {
  131. erro(res)
  132. console.log(res.errMsg);
  133. }
  134. });
  135. }
  136. // 判断是否只需要拍照
  137. if (type == 2) {
  138. _this.chooseImage(0).then((url) => {
  139. ok(url)
  140. }).catch((res) => {
  141. erro(res)
  142. })
  143. }
  144. })
  145. },
  146. chooseImage: function(index) {
  147. const _this = this
  148. return new Promise((ok, error) => {
  149. // 从相册/相机选择
  150. // 如需直接开相机或直接选相册,请只使用一个选项
  151. const sourceType = index === 0 ? ['camera'] : ['album']
  152. uni.chooseImage({
  153. count: 1, //默认9
  154. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  155. sourceType: sourceType,
  156. success: function(res) {
  157. ok(res.tempFilePaths[0])
  158. },
  159. fail(e) {
  160. uni.showModal({
  161. title: '文件打开错误',
  162. content: '请设置授权文件存储权限',
  163. showCancel: false,
  164. });
  165. error(e)
  166. }
  167. });
  168. })
  169. },
  170. // 实名认证
  171. confirm(e) {
  172. const that = this;
  173. if (that.updata.service_audit_imgs.length==0) {
  174. uni.showModal({
  175. title: '错误',
  176. content: '请上传工资截图',
  177. showCancel: false,
  178. });
  179. return
  180. }
  181. that.loding = true;
  182. subTypeAudit({
  183. service_audit_imgs:that.updata.service_audit_imgs
  184. })
  185. .then((e) => {
  186. that.loding = false;
  187. this.$api.msg(e.msg);
  188. })
  189. .catch(err => {
  190. this.loding = false;
  191. console.log(err);
  192. });
  193. }
  194. }
  195. };
  196. </script>
  197. <style lang="scss">
  198. .content,
  199. page {
  200. min-height: 100%;
  201. }
  202. .content {
  203. padding-bottom: 150rpx;
  204. }
  205. .item-name {
  206. margin: $page-row-spacing;
  207. font-size: $font-lg;
  208. font-weight: bold;
  209. color: $font-color-dark;
  210. }
  211. .con_box {
  212. margin: $page-row-spacing;
  213. .con_image {
  214. width: 150rpx;
  215. height: 150rpx;
  216. display: inline-block;
  217. margin-right: 20rpx;
  218. position: relative;
  219. .img {
  220. width: 100%;
  221. height: 100%;
  222. }
  223. .tip {
  224. position: absolute;
  225. top: -10rpx;
  226. right: -10rpx;
  227. width: 30rpx;
  228. height: 30rpx;
  229. background-color: #FFF;
  230. border-radius: 99rpx;
  231. }
  232. }
  233. }
  234. .listBox {
  235. margin: $page-row-spacing;
  236. margin-top: 30rpx;
  237. border-radius: 20rpx;
  238. overflow: hidden;
  239. background-color: #FFFFFF;
  240. }
  241. .list {
  242. .input {
  243. text-align: right;
  244. font-size: $font-base;
  245. color: $color-gray;
  246. width: 100%;
  247. }
  248. .listItem {
  249. padding: 35rpx 40rpx;
  250. border-bottom: 1px solid $page-color-light;
  251. }
  252. .listIconImg {
  253. width: 36rpx;
  254. }
  255. .right {
  256. color: $font-color-light;
  257. font-size: $font-base;
  258. flex-grow: 1;
  259. justify-content: flex-end;
  260. .timetype {
  261. width: 100%;
  262. justify-content: flex-end;
  263. }
  264. .citylist {
  265. .del {
  266. color: $color-red;
  267. font-size: $font-sm;
  268. border: 1px solid $color-red;
  269. border-radius: 10rpx;
  270. line-height: 1;
  271. padding: 5rpx 15rpx;
  272. }
  273. }
  274. .img {
  275. width: 26rpx;
  276. }
  277. .buttom {
  278. color: $base-color;
  279. border: 1px solid $base-color;
  280. border-radius: 10rpx;
  281. line-height: 1;
  282. padding: 10rpx 20rpx;
  283. }
  284. }
  285. .titleBox {
  286. .title {
  287. color: $font-color-base;
  288. font-size: $font-base;
  289. }
  290. }
  291. }
  292. .bg-gray {
  293. background-color: $color-gray;
  294. }
  295. .base-buttom {
  296. position: fixed;
  297. bottom: 30rpx;
  298. right: 0rpx;
  299. left: 0rpx;
  300. }
  301. </style>