123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457 |
- <template>
- <view class="container qualifications" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0' }">
- <view class="remarks-content">
- <view class="list-view-title">
- <view class="list-view-h1"><text>*</text>文字备注</view>
- </view>
- <view class="remarks-textarea">
- <textarea
- class="textarea"
- v-model="remarksParams.note"
- value=""
- placeholder="文字备注,500字以内"
- maxlength="500"
- @input="conInput"
- />
- <text class="limit-text">{{ min }}/{{ max }}</text>
- </view>
- <view class="list-view-title">
- <view class="list-view-h1">上传图片</view>
- <view class="list-view-p">(可上传与客户的聊天截图或其他重要图片资料,最多10张)</view>
- </view>
- <view class="list-view-upload clearfix">
- <view class="photo-item" v-for="(image, imageIndex) in remarksParams.imageList" :key="imageIndex">
- <image
- :src="image"
- mode="aspectFill"
- @click.stop="previewImg(remarksParams.imageList, imageIndex)"
- ></image>
- <text
- class="iconfont icon-iconfontguanbi"
- @click.stop="deletePhotoFn(remarksParams.imageList, imageIndex)"
- ></text>
- </view>
- <view
- class="photo-item add"
- @click.stop="uploadPhotoFn(remarksParams.imageList)"
- v-if="remarksParams.imageList.length < 10 || remarksParams.imageList.length == 0"
- >
- <text class="iconfont icon-jiahao"></text>
- </view>
- </view>
- <view class="list-view-title">
- <view class="list-view-h1">上传文件</view>
- <view class="list-view-p">(可上传与客户相关的文件资料,最多10份,支持word,excel,ppt和pdf格式文件)</view>
- </view>
- <view class="list-view" v-for="(file, fileIndex) in remarksParams.fileList" :key="fileIndex">
- <view class="list-view-text">
- <view class="input">{{ file.fileName }}</view>
- <view class="delbtn" @click.stop="deleteFileFn(item.fileList, index)">删除</view>
- </view>
- </view>
- <view class="list-view">
- <view class="list-view-file" @click="uploadFile(remarksParams.fileList)">选择文件</view>
- </view>
- </view>
- <view class="remarks-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0' }">
- <view class="edit-button" @click="editButtonConfim">确定</view>
- </view>
- </view>
- </template>
- <script>
- import { mapState, mapMutations } from 'vuex'
- import authorize from '@/common/config/authorize.js'
- import { uploadFileImage, uploadFilePdfDocDocx } from '@/services/public.js'
- var isPreviewImg
- export default {
- data() {
- return {
- isIphoneX: this.$store.state.isIphoneX,
- shopOrderId: 0,
- logisticsBatchId: 0,
- productActions: [],
- remarksParams: {
- note: '',
- fileList: [],
- imageList: []
- },
- min: 0,
- max: 500
- }
- },
- onLoad(option) {
- console.log(option)
- if (option.type == 'add') {
- this.logisticsBatchId = option.logisticsBatchId
- this.shopOrderId = option.shopOrderId
- this.GetSupplierLogisticsRecord()
- } else {
- this.logisticsBatchId = option.logisticsBatchId
- this.shopOrderId = option.shopOrderId
- this.GetSupplierLogisticsRecord()
- this.GetSupplierQualificationData()
- }
- },
- methods: {
- ...mapMutations(['login']),
- GetSupplierQualificationData() {
- //编辑回显商品资质信息
- this.ShopService.GetSupplierQualificationData({
- logisticsBatchId: this.logisticsBatchId
- })
- .then(response => {
- const data = response.data
- if (data && data.length > 0) {
- this.qualificationsList = data
- this.isEmpty = false
- } else {
- this.isEmpty = true
- }
- })
- .catch(error => {
- this.$util.msg(error.msg, 2000)
- })
- },
- GetSupplierLogisticsRecord() {
- //添加商品资质初始化查询商品信息
- this.ShopService.GetSupplierLogisticsRecord({
- logisticsBatchId: this.logisticsBatchId
- })
- .then(response => {
- const data = response.data
- data.forEach((el, index) => {
- let obj = {
- value: el.id,
- name: el.productName
- }
- this.productActions.push(obj)
- })
- })
- .catch(error => {
- this.$util.msg(error.msg, 2000)
- })
- },
- editButtonConfim() {
- //确定
- // 校验物流公司不能为空
- let isRecordId = false
- let isSnCode = false
- let isFileList = false
- let isImageList = false
- let params = [] //参数
- this.qualificationsList.forEach((el, index) => {
- if (el.recordId == '') {
- isRecordId = true
- }
- if (el.sn == '') {
- isSnCode = true
- }
- if (el.fileList == '') {
- isFileList = true
- }
- if (el.imageList == '') {
- isImageList = true
- }
- let paramsObject = {
- recordId: el.recordId,
- sn: el.sn,
- files: el.fileList,
- images: el.imageList
- }
- params.push(paramsObject)
- })
- if (isRecordId) {
- this.$util.msg('请选择商品', 2000)
- return
- }
- if (isSnCode) {
- this.$util.msg('请输入商品SN码', 2000)
- return
- }
- if (isFileList && isImageList) {
- this.$util.msg('请上传商品资质文件', 2000)
- return
- }
- console.log('params========>', params)
- this.ShopService.GetSupplierQualificationUpdata({
- params: JSON.stringify(params)
- })
- .then(response => {
- this.$util.msg('保存成功', 3000, true, 'success')
- setTimeout(() => {
- this.$api.navigateTo(`/pages/supplier/deliver/deliver-record?shopOrderId=${this.shopOrderId}`)
- }, 2000)
- })
- .catch(error => {
- this.$util.msg(error.msg, 2000)
- })
- },
- bindPickerChange: function(item, e) {
- //选择筛选条件
- item.recordId = this.productActions[e.target.value].value
- item.productName = this.productActions[e.target.value].name
- },
- addListFn() {
- //添加
- let obj = {
- productName: '',
- recordId: '',
- sn: '',
- fileList: [],
- imageList: []
- }
- this.qualificationsList.push(obj)
- },
- deleteLogistItemFn(item, index) {
- this.$util.modal('提示', '确认删除物流信息吗?', '确定', '取消', true, () => {
- this.qualificationsList.splice(index, 1)
- })
- },
- uploadFile(array) {
- //上传资质文件
- console.log(array)
- uploadFilePdfDocDocx().then(res => {
- let data = JSON.parse(res.data).data
- let obj = {
- fileName: uni.getStorageSync('fileName'),
- ossName: data.ossName
- }
- array.push(obj)
- console.log('array', array)
- })
- },
- uploadPhotoFn(array) {
- //添加图片
- uploadFileImage().then(res => {
- array.push(JSON.parse(res.data).data)
- })
- },
- deleteFileFn(array, index) {
- //删除文件
- this.UploadService.PostFileDelete({
- ossName: array[index].ossName
- })
- .then(res => {
- array.splice(index, 1)
- })
- .catch(error => {
- console.log('删除文件异常提示===>', error.msg)
- })
- },
- deletePhotoFn(array, index) {
- //删除图片
- array.splice(index, 1)
- },
- previewImg(image, index) {
- //顶部商品图片预览
- isPreviewImg = true
- let previewUrls = image
- uni.previewImage({
- current: index, //图片索引
- urls: previewUrls, //必须是http图片,本地图片无效
- longPressActions: ''
- })
- },
- conInput(e) {
- //备注文字字数限制
- let value = e.detail.value
- let len = parseInt(value.length)
- if (len > this.max) return
- this.min = len
- if (this.min == 200) {
- this.$util.msg('您输入的字数已达上限', 2000)
- }
- }
- },
- onShow() {}
- }
- </script>
- <style lang="scss">
- page {
- height: auto;
- background: #ffffff;
- }
- .remarks-content {
- width: 100%;
- height: auto;
- box-sizing: border-box;
- padding:0 24rpx;
- .list-view-title {
- width: 100%;
- height: auto;
- margin-bottom: 16rpx;
- margin-top: 40rpx;
- .list-view-h1 {
- line-height: 40rpx;
- font-size: $font-size-28;
- color: #333333;
- text-align: left;
- text {
- color: #ff2a2a;
- }
- }
- .list-view-p {
- line-height: 30rpx;
- color: #fea785;
- font-size: $font-size-20;
- }
- }
- .remarks-textarea {
- width: 100%;
- height: 340rpx;
- padding: 16rpx;
- margin: 20rpx 0 0 0 ;
- border-radius: 6rpx;
- position: relative;
- border: 1px solid #b2b2b2;
- box-sizing: border-box;
- .textarea {
- width: 100%;
- height: 100%;
- line-height: 36rpx;
- font-size: $font-size-26;
- color: $text-color;
- z-index: 1;
- }
- .limit-text {
- position: absolute;
- right: 20rpx;
- bottom: 16rpx;
- line-height: 44rpx;
- font-size: $font-size-24;
- color: #b2b2b2;
- }
- }
- .list-view {
- width: 100%;
- height: auto;
- margin-top: 20rpx;
- .list-view-file {
- width: 132rpx;
- height: 44rpx;
- line-height: 44rpx;
- font-size: $font-size-20;
- text-align: center;
- color: #ffffff;
- background-color: $color-system;
- border-radius: 8rpx;
- float: left;
- margin-top: 10rpx;
- }
- .list-view-text {
- width: 100%;
- float: left;
- .input {
- width: 560rpx;
- height: 44rpx;
- box-sizing: border-box;
- line-height: 44rpx;
- color: #333333;
- text-overflow: ellipsis;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- line-clamp: 1;
- -webkit-box-orient: vertical;
- float: left;
- }
- .delbtn {
- width:96rpx;
- height: 44rpx;
- border-radius: 8rpx;
- background-color: #FFF2EC;
- font-size: $font-size-24;
- color: #E15616;
- line-height: 44rpx;
- text-align: center;
- float: left;
- }
- }
- }
- .list-view-upload {
- width: 100%;
- height: auto;
- .photo-item {
- display: inline-block;
- width: 112rpx;
- height: 112rpx;
- margin: 10rpx 0;
- margin-right: 25rpx;
- border-radius: 10rpx;
- border: 1px solid #f5f5f5;
- position: relative;
- float: left;
- &.add {
- width: 112rpx;
- height: 112rpx;
- border-color: #b2b2b2;
- text-align: center;
- line-height: 112rpx;
- margin-right: 0rpx;
- .icon-jiahao {
- font-size: $font-size-44;
- color: #b2b2b2;
- font-weight: bold;
- }
- }
- .icon-iconfontguanbi {
- width: 30rpx;
- height: 30rpx;
- border-radius: 50%;
- display: block;
- position: absolute;
- right: -10rpx;
- top: -10rpx;
- background: #f94b4b;
- text-align: center;
- line-height: 30rpx;
- color: #ffffff;
- font-size: $font-size-22;
- }
- image {
- width: 112rpx;
- height: 112rpx;
- border-radius: 10rpx;
- }
- }
- .photo-list {
- width: 100%;
- height: 116rpx;
- overflow: hidden;
- white-space: nowrap;
- display: flex;
- align-items: flex-start;
- }
- }
- }
- .remarks-btn {
- width: 100%;
- padding-top: 20rpx;
- position: fixed;
- bottom: 0;
- left: 0;
- background-color: #ffffff;
- .edit-button-canel {
- width: 100%;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- color: #e15616;
- font-size: $font-size-24;
- }
- .edit-button {
- width: 600rpx;
- height: 90rpx;
- background: $btn-confirm;
- line-height: 90rpx;
- text-align: center;
- color: #ffffff;
- font-size: $font-size-30;
- margin: 0 auto;
- border-radius: 45rpx;
- }
- }
- </style>
|