add.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. <template>
  2. <view class="container qualifications" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0' }">
  3. <view class="remarks-content">
  4. <view class="list-view-title">
  5. <view class="list-view-h1"><text>*</text>文字备注</view>
  6. </view>
  7. <view class="remarks-textarea">
  8. <textarea
  9. class="textarea"
  10. v-model="remarksParams.note"
  11. value=""
  12. placeholder="文字备注,500字以内"
  13. maxlength="500"
  14. @input="conInput"
  15. />
  16. <text class="limit-text">{{ min }}/{{ max }}</text>
  17. </view>
  18. <view class="list-view-title">
  19. <view class="list-view-h1">上传图片</view>
  20. <view class="list-view-p">(可上传与客户的聊天截图或其他重要图片资料,最多10张)</view>
  21. </view>
  22. <view class="list-view-upload clearfix">
  23. <view class="photo-item" v-for="(image, imageIndex) in remarksParams.imageList" :key="imageIndex">
  24. <image
  25. :src="image"
  26. mode="aspectFill"
  27. @click.stop="previewImg(remarksParams.imageList, imageIndex)"
  28. ></image>
  29. <text
  30. class="iconfont icon-iconfontguanbi"
  31. @click.stop="deletePhotoFn(remarksParams.imageList, imageIndex)"
  32. ></text>
  33. </view>
  34. <view
  35. class="photo-item add"
  36. @click.stop="uploadPhotoFn(remarksParams.imageList)"
  37. v-if="remarksParams.imageList.length < 10 || remarksParams.imageList.length == 0"
  38. >
  39. <text class="iconfont icon-jiahao"></text>
  40. </view>
  41. </view>
  42. <view class="list-view-title">
  43. <view class="list-view-h1">上传文件</view>
  44. <view class="list-view-p">(可上传与客户相关的文件资料,最多10份,支持word,excel,ppt和pdf格式文件)</view>
  45. </view>
  46. <view class="list-view" v-for="(file, fileIndex) in remarksParams.fileList" :key="fileIndex">
  47. <view class="list-view-text">
  48. <view class="input">{{ file.fileName }}</view>
  49. <view class="delbtn" @click.stop="deleteFileFn(item.fileList, index)">删除</view>
  50. </view>
  51. </view>
  52. <view class="list-view">
  53. <view class="list-view-file" @click="uploadFile(remarksParams.fileList)">选择文件</view>
  54. </view>
  55. </view>
  56. <view class="remarks-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0' }">
  57. <view class="edit-button" @click="editButtonConfim">确定</view>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. import { mapState, mapMutations } from 'vuex'
  63. import authorize from '@/common/config/authorize.js'
  64. import { uploadFileImage, uploadFilePdfDocDocx } from '@/services/public.js'
  65. var isPreviewImg
  66. export default {
  67. data() {
  68. return {
  69. isIphoneX: this.$store.state.isIphoneX,
  70. shopOrderId: 0,
  71. logisticsBatchId: 0,
  72. productActions: [],
  73. remarksParams: {
  74. note: '',
  75. fileList: [],
  76. imageList: []
  77. },
  78. min: 0,
  79. max: 500
  80. }
  81. },
  82. onLoad(option) {
  83. console.log(option)
  84. if (option.type == 'add') {
  85. this.logisticsBatchId = option.logisticsBatchId
  86. this.shopOrderId = option.shopOrderId
  87. this.GetSupplierLogisticsRecord()
  88. } else {
  89. this.logisticsBatchId = option.logisticsBatchId
  90. this.shopOrderId = option.shopOrderId
  91. this.GetSupplierLogisticsRecord()
  92. this.GetSupplierQualificationData()
  93. }
  94. },
  95. methods: {
  96. ...mapMutations(['login']),
  97. GetSupplierQualificationData() {
  98. //编辑回显商品资质信息
  99. this.ShopService.GetSupplierQualificationData({
  100. logisticsBatchId: this.logisticsBatchId
  101. })
  102. .then(response => {
  103. const data = response.data
  104. if (data && data.length > 0) {
  105. this.qualificationsList = data
  106. this.isEmpty = false
  107. } else {
  108. this.isEmpty = true
  109. }
  110. })
  111. .catch(error => {
  112. this.$util.msg(error.msg, 2000)
  113. })
  114. },
  115. GetSupplierLogisticsRecord() {
  116. //添加商品资质初始化查询商品信息
  117. this.ShopService.GetSupplierLogisticsRecord({
  118. logisticsBatchId: this.logisticsBatchId
  119. })
  120. .then(response => {
  121. const data = response.data
  122. data.forEach((el, index) => {
  123. let obj = {
  124. value: el.id,
  125. name: el.productName
  126. }
  127. this.productActions.push(obj)
  128. })
  129. })
  130. .catch(error => {
  131. this.$util.msg(error.msg, 2000)
  132. })
  133. },
  134. editButtonConfim() {
  135. //确定
  136. // 校验物流公司不能为空
  137. let isRecordId = false
  138. let isSnCode = false
  139. let isFileList = false
  140. let isImageList = false
  141. let params = [] //参数
  142. this.qualificationsList.forEach((el, index) => {
  143. if (el.recordId == '') {
  144. isRecordId = true
  145. }
  146. if (el.sn == '') {
  147. isSnCode = true
  148. }
  149. if (el.fileList == '') {
  150. isFileList = true
  151. }
  152. if (el.imageList == '') {
  153. isImageList = true
  154. }
  155. let paramsObject = {
  156. recordId: el.recordId,
  157. sn: el.sn,
  158. files: el.fileList,
  159. images: el.imageList
  160. }
  161. params.push(paramsObject)
  162. })
  163. if (isRecordId) {
  164. this.$util.msg('请选择商品', 2000)
  165. return
  166. }
  167. if (isSnCode) {
  168. this.$util.msg('请输入商品SN码', 2000)
  169. return
  170. }
  171. if (isFileList && isImageList) {
  172. this.$util.msg('请上传商品资质文件', 2000)
  173. return
  174. }
  175. console.log('params========>', params)
  176. this.ShopService.GetSupplierQualificationUpdata({
  177. params: JSON.stringify(params)
  178. })
  179. .then(response => {
  180. this.$util.msg('保存成功', 3000, true, 'success')
  181. setTimeout(() => {
  182. this.$api.navigateTo(`/pages/supplier/deliver/deliver-record?shopOrderId=${this.shopOrderId}`)
  183. }, 2000)
  184. })
  185. .catch(error => {
  186. this.$util.msg(error.msg, 2000)
  187. })
  188. },
  189. bindPickerChange: function(item, e) {
  190. //选择筛选条件
  191. item.recordId = this.productActions[e.target.value].value
  192. item.productName = this.productActions[e.target.value].name
  193. },
  194. addListFn() {
  195. //添加
  196. let obj = {
  197. productName: '',
  198. recordId: '',
  199. sn: '',
  200. fileList: [],
  201. imageList: []
  202. }
  203. this.qualificationsList.push(obj)
  204. },
  205. deleteLogistItemFn(item, index) {
  206. this.$util.modal('提示', '确认删除物流信息吗?', '确定', '取消', true, () => {
  207. this.qualificationsList.splice(index, 1)
  208. })
  209. },
  210. uploadFile(array) {
  211. //上传资质文件
  212. console.log(array)
  213. uploadFilePdfDocDocx().then(res => {
  214. let data = JSON.parse(res.data).data
  215. let obj = {
  216. fileName: uni.getStorageSync('fileName'),
  217. ossName: data.ossName
  218. }
  219. array.push(obj)
  220. console.log('array', array)
  221. })
  222. },
  223. uploadPhotoFn(array) {
  224. //添加图片
  225. uploadFileImage().then(res => {
  226. array.push(JSON.parse(res.data).data)
  227. })
  228. },
  229. deleteFileFn(array, index) {
  230. //删除文件
  231. this.UploadService.PostFileDelete({
  232. ossName: array[index].ossName
  233. })
  234. .then(res => {
  235. array.splice(index, 1)
  236. })
  237. .catch(error => {
  238. console.log('删除文件异常提示===>', error.msg)
  239. })
  240. },
  241. deletePhotoFn(array, index) {
  242. //删除图片
  243. array.splice(index, 1)
  244. },
  245. previewImg(image, index) {
  246. //顶部商品图片预览
  247. isPreviewImg = true
  248. let previewUrls = image
  249. uni.previewImage({
  250. current: index, //图片索引
  251. urls: previewUrls, //必须是http图片,本地图片无效
  252. longPressActions: ''
  253. })
  254. },
  255. conInput(e) {
  256. //备注文字字数限制
  257. let value = e.detail.value
  258. let len = parseInt(value.length)
  259. if (len > this.max) return
  260. this.min = len
  261. if (this.min == 200) {
  262. this.$util.msg('您输入的字数已达上限', 2000)
  263. }
  264. }
  265. },
  266. onShow() {}
  267. }
  268. </script>
  269. <style lang="scss">
  270. page {
  271. height: auto;
  272. background: #ffffff;
  273. }
  274. .remarks-content {
  275. width: 100%;
  276. height: auto;
  277. box-sizing: border-box;
  278. padding:0 24rpx;
  279. .list-view-title {
  280. width: 100%;
  281. height: auto;
  282. margin-bottom: 16rpx;
  283. margin-top: 40rpx;
  284. .list-view-h1 {
  285. line-height: 40rpx;
  286. font-size: $font-size-28;
  287. color: #333333;
  288. text-align: left;
  289. text {
  290. color: #ff2a2a;
  291. }
  292. }
  293. .list-view-p {
  294. line-height: 30rpx;
  295. color: #fea785;
  296. font-size: $font-size-20;
  297. }
  298. }
  299. .remarks-textarea {
  300. width: 100%;
  301. height: 340rpx;
  302. padding: 16rpx;
  303. margin: 20rpx 0 0 0 ;
  304. border-radius: 6rpx;
  305. position: relative;
  306. border: 1px solid #b2b2b2;
  307. box-sizing: border-box;
  308. .textarea {
  309. width: 100%;
  310. height: 100%;
  311. line-height: 36rpx;
  312. font-size: $font-size-26;
  313. color: $text-color;
  314. z-index: 1;
  315. }
  316. .limit-text {
  317. position: absolute;
  318. right: 20rpx;
  319. bottom: 16rpx;
  320. line-height: 44rpx;
  321. font-size: $font-size-24;
  322. color: #b2b2b2;
  323. }
  324. }
  325. .list-view {
  326. width: 100%;
  327. height: auto;
  328. margin-top: 20rpx;
  329. .list-view-file {
  330. width: 132rpx;
  331. height: 44rpx;
  332. line-height: 44rpx;
  333. font-size: $font-size-20;
  334. text-align: center;
  335. color: #ffffff;
  336. background-color: $color-system;
  337. border-radius: 8rpx;
  338. float: left;
  339. margin-top: 10rpx;
  340. }
  341. .list-view-text {
  342. width: 100%;
  343. float: left;
  344. .input {
  345. width: 560rpx;
  346. height: 44rpx;
  347. box-sizing: border-box;
  348. line-height: 44rpx;
  349. color: #333333;
  350. text-overflow: ellipsis;
  351. overflow: hidden;
  352. display: -webkit-box;
  353. -webkit-line-clamp: 1;
  354. line-clamp: 1;
  355. -webkit-box-orient: vertical;
  356. float: left;
  357. }
  358. .delbtn {
  359. width:96rpx;
  360. height: 44rpx;
  361. border-radius: 8rpx;
  362. background-color: #FFF2EC;
  363. font-size: $font-size-24;
  364. color: #E15616;
  365. line-height: 44rpx;
  366. text-align: center;
  367. float: left;
  368. }
  369. }
  370. }
  371. .list-view-upload {
  372. width: 100%;
  373. height: auto;
  374. .photo-item {
  375. display: inline-block;
  376. width: 112rpx;
  377. height: 112rpx;
  378. margin: 10rpx 0;
  379. margin-right: 25rpx;
  380. border-radius: 10rpx;
  381. border: 1px solid #f5f5f5;
  382. position: relative;
  383. float: left;
  384. &.add {
  385. width: 112rpx;
  386. height: 112rpx;
  387. border-color: #b2b2b2;
  388. text-align: center;
  389. line-height: 112rpx;
  390. margin-right: 0rpx;
  391. .icon-jiahao {
  392. font-size: $font-size-44;
  393. color: #b2b2b2;
  394. font-weight: bold;
  395. }
  396. }
  397. .icon-iconfontguanbi {
  398. width: 30rpx;
  399. height: 30rpx;
  400. border-radius: 50%;
  401. display: block;
  402. position: absolute;
  403. right: -10rpx;
  404. top: -10rpx;
  405. background: #f94b4b;
  406. text-align: center;
  407. line-height: 30rpx;
  408. color: #ffffff;
  409. font-size: $font-size-22;
  410. }
  411. image {
  412. width: 112rpx;
  413. height: 112rpx;
  414. border-radius: 10rpx;
  415. }
  416. }
  417. .photo-list {
  418. width: 100%;
  419. height: 116rpx;
  420. overflow: hidden;
  421. white-space: nowrap;
  422. display: flex;
  423. align-items: flex-start;
  424. }
  425. }
  426. }
  427. .remarks-btn {
  428. width: 100%;
  429. padding-top: 20rpx;
  430. position: fixed;
  431. bottom: 0;
  432. left: 0;
  433. background-color: #ffffff;
  434. .edit-button-canel {
  435. width: 100%;
  436. height: 88rpx;
  437. line-height: 88rpx;
  438. text-align: center;
  439. color: #e15616;
  440. font-size: $font-size-24;
  441. }
  442. .edit-button {
  443. width: 600rpx;
  444. height: 90rpx;
  445. background: $btn-confirm;
  446. line-height: 90rpx;
  447. text-align: center;
  448. color: #ffffff;
  449. font-size: $font-size-30;
  450. margin: 0 auto;
  451. border-radius: 45rpx;
  452. }
  453. }
  454. </style>