update 售后问题

xuxueyang

2024-08-29 b37bca8f7a6cdae798e74f14b51936e3a6a9637c

 sub_pages/partner/delivery/delivery-detail.vue

@@ -1,372 +1,594 @@
<script>
export default {
  data() {
    return {
      dto: {
        id: '',
        items: [],
        supplierName: '',
        orderNo: '',
        stationName: '',
        arriveRemarks: '',
      },
      id: '',
      form: {
        id: '',
        status: '',
        checkImageList: [],
        checkRemarks: '',
        deductAmount: 0,
      },
      check_status: [
        {
          label: '退回',
          value: 'back'
        },
        {
          label: '降级',
          value: 'reduce'
        },
        {
          label: '缺货',
          value: 'lack'
        },
        {
          label: '完成',
          value: 'ok'
        }
      ]
    };
  },
  async onLoad(options) {
    this.id = options.id || ''
    await this.init()
   export default {
      data() {
         return {
            dto: {
               id: '',
               items: [],
               supplierName: '',
               orderNo: '',
               stationName: '',
               arriveRemarks: '',
               arriveImages: [],
            },
            id: '',
            form: {
               id: '',
               status: '',
               pictureList: [],
               checkRemarks: '',
               deductAmount: 0,
            },
            check_status: [
               // {
               //    label: '退回',
               //    value: 'back'
               // },
               {
                  label: '降级',
                  value: 'reduce'
               },
               {
                  label: '缺货',
                  value: 'lack'
               },
               {
                  label: '补货',
                  value: 'replace'
               },
               {
                  label: '完成',
                  value: 'ok'
               }
            ],
            target_levels: [],
         };
      },
      async onShow() {
         if (this.sign['delivery']) {
            await this.$store.dispatch('sign_clear', 'delivery');
            this.refreshList()
         }
      },
      async onLoad(options) {
         this.id = options.id || ''

  },
  async onPullDownRefresh() {
    await this.init()
    uni.stopPullDownRefresh()
  },
  methods: {
    closeCheckForm() {
      this.$refs.popup_form.close()
         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'FLOWER_LEVEL'
            }
         }).then(res => {
            var data = res.data || []
            this.target_levels = data
         })
         await this.init()

    },
    async clickCheck(item, status) {
      this.form = {
        id: item.id || '',
        status: '',
        statusStr: '',
        checkImageList: item.checkImageList || [],
        checkRemarks: item.checkRemarks || '',
        deductAmount: item.deductAmount || 0,
      }
      this.check_status.forEach(tmp => {
        if (tmp.value === this.form.status) {
          this.form.statusStr = tmp.label
        }
      })
      //显示
      this.$refs.popup_form.open()
      },
      async onPullDownRefresh() {
         await this.init()
         uni.stopPullDownRefresh()
      },
      methods: {
         closeCheckForm() {
            this.$refs.popup_form.close()

    },
    async submitCheck() {
      if (isNaN(parseFloat(this.form.deductAmount)) || this.form.deductAmount < 0) {
        this.$message.showToast('扣款金额需要大于等于0')
        return
      }
      this.$message.showLoading()
      const {
        code
      } = await this.$http.request('get', '/api/delivery/list/view/check', {
        data: {
          ...this.form
        }
      })
      this.$message.hideLoading()
      if (code === 0) {
        this.$message.showToast('操作成功')
        this.$refs.popup_form.close()
        setTimeout(() => {
          this.init()
        }, 200)
      }
    },
    async init() {
      this.$message.showLoading()
      const {
        data
      } = await this.$http.request('get', '/api/delivery/list/view?id=' + this.id, {})
         },
         async clickCheck(item, status) {
            if (status === 'ok') {
               //完成质检，不用上传东西
               await this.$message.confirm('确定完成此商品的质检')
               this.$message.showLoading()
               const {
                  code,
                  data
               } = await this.$http.request('get', '/api/delivery/check/info/' + status, {
                  params: {
                     orderItemId: item.id
                  }
               })
               this.$message.hideLoading()
               if (code === 0) {
                  await this.$message.showToast('操作成功')
                  this.init()
                  // setTimeout(() => {
                  //    this.init()
                  // }, 500)
               }
               return
            }
            this.form = {
               // id: item.id || '',
               // status: status,
               // statusStr: '',
               // checkImageList: item.checkImageList || [],
               // checkRemarks: item.checkRemarks || '',
               // deductAmount: item.deductAmount || 0,

      this.$message.hideLoading()
      if (data) {
        this.dto = {
          ...this.dto,
          ...data
        }
      }
    },
    deleteCheckImage(index) {
      this.form.checkImageList.splice(index, 1)
    },
    uploadCheckImage() {
      let that = this
      uni.chooseImage({
        count: 1, // 最多可以选择的图片张数，默认9
        sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
        sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
        success: function (res) {
          let errMsg = res.errMsg
          let tempFiles = res.tempFiles
          if (errMsg === 'chooseImage:ok') {
            if (tempFiles[0].size > 1024 * 1024 * 5) {
              that.$message.confirm('图片最多支持5M大小,超出大小限制')
              return
            }
            that.$message.showLoading()
            that.$http.upload(tempFiles[0].path).then(async res => {
              console.log('res1', res)
              var pic = res.data && res.data.length > 0 && res.data[
                  0]
                  .url || ''
              that.$message.hideLoading()
              that.form.checkImageList.push(pic)
              that.$forceUpdate()
            }).catch(res => {
              that.$message.hideLoading()
              console.error(res)
            })
          }
        }
      })
    }
  }
}
               orderItemId: item.id || '',

               status: status,
               statusStr: '',
               num: 0,
               remarks: '',
               pictureList: [],


            }
            if (status === 'reduce') {
               this.form = {
                  ...this.form,
                  deductAmount: 0,
                  targetLevel: '',
                  pictureList: [],
               }
            }


            this.check_status.forEach(tmp => {
               if (tmp.value === this.form.status) {
                  this.form.statusStr = tmp.label
               }
            })

            //20240819更新一下操作情况
            //先获取详情，再设置参数
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('get', '/api/delivery/check/info/' + status, {
               params: {
                  orderItemId: item.id
               }
            })
            this.$message.hideLoading()
            if (code === 0) {
               this.form = {
                  ...this.form,
                  ...(data || {})
               }
               if (!this.form.pictureList) {
                  this.form.pictureList = []
               }
               //显示
               this.$refs.popup_form.open()

            }

         },
         async submitCheck() {
            if (this.form.status == 'reduce') {
               if (isNaN(parseFloat(this.form.deductAmount)) || this.form.deductAmount < 0) {
                  this.$message.showToast('扣款金额需要大于等于0')
                  return
               }
               if (isNaN(parseInt(this.form.num)) || this.form.num < 0) {
                  this.$message.showToast('数量需要大于等于0')
                  return
               }
            }
            if (this.form.status == 'replace' || this.form.status == 'lack') {
               if (isNaN(parseInt(this.form.num)) || this.form.num < 0) {
                  this.$message.showToast('数量需要大于等于0')
                  return
               }
            }


            // '/api/delivery/list/view/check'
            this.$message.showLoading()
            const {
               code
            } = await this.$http.request('post', '/api/delivery/check/info/do/' + this.form.status, {
               data: {
                  ...this.form
               }
            })
            this.$message.hideLoading()
            if (code === 0) {
               this.$refs.popup_form.close()
               await this.$store.dispatch('sign_add', 'delivery')
					
               await this.$message.showToast('操作成功')
               this.init()

               // setTimeout(() => {
               //    this.init()
               // }, 500)
            }
         },
         async init() {
            this.$message.showLoading()
            const {
               data
            } = await this.$http.request('get', '/api/delivery/list/view?id=' + this.id, {})

            this.$message.hideLoading()
            if (data) {
               var t = data || {}
               if (!t.arriveImages) {
                  t.arriveImages = []
               } else {
                  try {
                     t.arriveImages = JSON.parse(t.arriveImages) || []
                  } catch (e) {
                     console.log('parse arriveImages', e)
                  }
               }
               this.dto = {
                  ...this.dto,
                  ...t
               }
            }
         },
         deleteCheckImage(index) {
            this.form.pictureList.splice(index, 1)
         },
         uploadCheckImage() {
            let that = this
            uni.chooseImage({
               count: 1, // 最多可以选择的图片张数，默认9
               sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
               sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
               success: function(res) {
                  let errMsg = res.errMsg
                  let tempFiles = res.tempFiles
                  if (errMsg === 'chooseImage:ok') {
                     if (tempFiles[0].size > 1024 * 1024 * 5) {
                        that.$message.confirm('图片最多支持5M大小,超出大小限制')
                        return
                     }
                     that.$message.showLoading()
                     that.$http.upload(tempFiles[0].path).then(async res => {
                        console.log('res1', res)
                        var pic = res.data && res.data.length > 0 && res.data[
                              0]
                           .url || ''
                        that.$message.hideLoading()
                        that.form.pictureList.push(pic)
                        console.log('form', that.form)
                        that.$forceUpdate()
                     }).catch(res => {
                        that.$message.hideLoading()
                        console.error(res)
                     })
                  }
               }
            })
         },
         printDeliveryOrder(item) {
            // this.$message.showToast('敬请期待')
            this.$storage.setItem('cache_delivery_order_print', JSON.stringify(item))
            uni.navigateTo({
               url: '/sub_pages/supplier/print/print-list'
            })
         }

      }
   }
</script>
<template>
  <view class="delivery-detail-page">
    <view v-if="dto.id">
      <view class="delivery-info flex">
        <view class="flex1 desc">
          <view>供货商名称:{{ dto.stationName }}</view>
          <view>订单号:{{ dto.orderNo }}</view>
          <view>供货商备注:{{ dto.arriveRemarks }}</view>
        </view>
        <view class="m-l-15 m-r-0 station">
          <view>{{ dto.stationName }}</view>
        </view>
      </view>
      <view v-for="(item,index) of dto.items" :key="index" class="delivery-order-item m-t-12">
        <view class="flex">
          <image class="flower-img img100 m-r-6" :src="item.flowerCover" @click="previewImg(item.flowerCover)">
          </image>
          <view class="flex1">
            <view class=" flex">
              <view class="title">{{ item.flowerName }}<span class="level">{{ item.flowerLevelStr }}</span></view>
            </view>
            <view class="each-list">
              <view class="each-item">
                <view class="label">颜色</view>
                <view class="value">{{ item.flowerColor || '-' }}</view>
   <view class="delivery-detail-page bg-white p20">
      <view v-if="dto.id">
         <view class="delivery-info flex">
            <view class="flex1 desc">
               <view>供货商名称:{{ dto.stationName  ||''}}</view>
               <view>订单号:{{ dto.orderNo  ||''}}</view>
               <view>供货商备注:{{ dto.arriveRemarks ||''}}</view>
               <view>入位时间:{{ dto.arriveTime ||'-'}}</view>
            </view>
            <view class="m-l-15 m-r-0 station">
               <view>{{ dto.stationName }}</view>
            </view>

              </view>
              <view class="each-item">
                <view class="label">规格</view>
                <view class="value">{{ item.flowerUnit || '-' }}</view>
              </view>
              <view class="each-item">
                <view class="label">数量</view>
                <view class="value">{{ item.num || 0 }}</view>
         </view>
         <view class="m-t-12 flex" v-if="dto.arriveImages&&dto.arriveImages.length>0">
            <view class="m-t-12 m-r-10 " v-for="(timg,index) of dto.arriveImages" :key="index">
               <image class="arrive-img" :src="timg" @click.stop="previewImg(timg)">
               </image>
            </view>
         </view>
         <view v-for="(item,index) of dto.items" :key="index" class="delivery-order-item m-t-12">
            <view class="flex">
               <image class="flower-img img100 m-r-6" :src="item.flowerCover"
                  @click="previewImg(item.flowerCover)">
               </image>
               <view class="flex1">
                  <view class=" flex">
                     <view class="title">{{ item.flowerName }}<span
                           class="level">{{ item.flowerLevelStr || ''}}</span></view>
                  </view>
                  <view class="each-list">
                     <view class="each-item">
                        <view class="label">颜色</view>
                        <view class="value">{{ item.flowerColor || '-' }}</view>

              </view>
              <view class="each-item">
                <view class="label">价格</view>
                <view class="value">{{ item.price || '-' }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="line-gray">
                     </view>
                     <view class="each-item">
                        <view class="label">规格</view>
                        <view class="value">{{ item.flowerUnit || '-' }}</view>
                     </view>
                     <view class="each-item">
                        <view class="label">数量</view>
                        <view class="value">{{ item.num || 0 }}</view>

        </view>
        <view class="buttons">
          <view class="button" v-for="button of check_status" :key="check_status.value"
                @click.stop="clickCheck(item,button.value)">{{ button.label }}
          </view>
        </view>
      </view>
    </view>
                     </view>
                  </view>
                  <view class="each-list">
                     <view class="each-item">
                        <view class="label">价格</view>
                        <view class="value">￥{{ item.price || '-' }}</view>
						
                     </view>
                     <view class="each-item">
                        <view class="label">降级</view>
                        <view class="value">{{ item.reduceNum || 0 }}</view>
                     </view>
                     <view class="each-item">
                        <view class="label">缺货</view>
                        <view class="value">{{ item.lackNum || 0 }}</view>
						
                     </view>
                     <view class="each-item">
                        <view class="label">补货</view>
                        <view class="value">{{ item.replaceNum || 0 }}</view>
													
                     </view>
                  </view>
               </view>
            </view>
            <view class="line-gray" v-if="item.status == 'ARRIVED'||item.status == 'PENDING'||!item.status||true">

    <uni-popup ref="popup_form" type="top" :mask-click="false">
      <view class="popup-check-form">
        <view class="close-parent">
          质检操作-{{ form.statusStr || '-' }}
          <uni-icons class="close" type="closeempty" @click="closeCheckForm"></uni-icons>
        </view>
        <view class="submit form">
          <view class="form-item">
            <view class="form-item-label require">
              质检备注
            </view>
            <view class="form-item-value">
              <input v-model="form.checkRemarks" placeholder="请输入质检备注" class="form-input"></input>
            </view>
          </view>
          <view class="form-item">
            <view class="form-item-label require">
              扣款金额
            </view>
            <view class="form-item-value">
              <input v-model="form.deductAmount" placeholder="请输入扣款金额" type="digit" class="form-input"></input>
            </view>
            <view class="buttons" v-if="item.status == 'ARRIVED'||item.status == 'PENDING'||!item.status||true">
               <view class="button text-center" v-for="button of check_status" :key="button.value"
                  @click.stop="clickCheck(item,button.value)">{{ button.label }}
               </view>
            </view>
            <view class="line-gray">

            </view>
          </view>
          <view class="form-item">
            <view class="form-item-label require">
              图片
            </view>
            <view class="form-item-value">
              <u-button type="text" @click="uploadCheckImage()">上传</u-button>
            </view>
          </view>
          <view class="flex p20"
                v-if="form.checkImageList&&form.checkImageList.length>0">
            <view class="m-t-12 m-r-10 " v-for="(timg,index) of dto.checkImageList" :key="index">
              <image class="check-img" :src="timg" @click.stop="previewImg(timg)">
              </image>
              <view class="t-red text-center" @click.stop="deleteCheckImage(index)">删除</view>
            </view>
          </view>
        </view>
            </view>
            <view class="buttons m-r-0 m-l-a w-fit">
               <view class="button button-0 " @click="printDeliveryOrder(item)">打印</view>
            </view>
         </view>
      </view>

        <view class="button-green m-t-15" @click="submitCheck">提交</view>
      </view>
    </uni-popup>
  </view>
      <uni-popup ref="popup_form" type="top" :mask-click="false">
         <view class="popup-check-form" style="min-height: 880rpx;height: unset;">
            <view class="close-parent">
               质检操作-{{ form.statusStr || '-' }}
               <uni-icons class="close" type="closeempty" @click="closeCheckForm"></uni-icons>
            </view>
            <view class="submit form">
               <view class="form-item" v-if="form.status==='reduce'" style="height: unset;">
                  <view class="form-item-label require" style="min-width: 120rpx;margin-right: 10rpx;">
                     降级等级
                  </view>
                  <view class="form-item-value flex ">
                     <view class="value-item" @click="()=>{
                           if(form.targetLevel!==query.value){
                              form.targetLevel = each.value
                           }																																						
                        }" :class="[form.targetLevel==each.value?'cur':'']" v-for="(each, j) in target_levels" :key="j">
                        {{ each.label || '-' }}
                     </view>

                  </view>
               </view>
               <view class="form-item"
                  v-if="form.status==='reduce' || form.status==='replace' || form.status==='lack'">
                  <view class="form-item-label require">
                     数量
                  </view>
                  <view class="form-item-value">
                     <input v-model="form.num" placeholder="请输入数量" type="number" class="form-input"></input>

                  </view>
               </view>
               <view class="form-item" v-if="form.status==='reduce'">
                  <view class="form-item-label require">
                     扣款金额
                  </view>
                  <view class="form-item-value">
                     <input v-model="form.deductAmount" placeholder="请输入扣款金额" type="digit"
                        class="form-input"></input>

                  </view>
               </view>
               <view class="form-item"
                  v-if="form.status==='reduce'||form.status==='replace' || form.status==='lack'">
                  <view class="form-item-label require">
                     质检备注
                  </view>
                  <view class="form-item-value">
                     <input v-model="form.remarks" placeholder="请输入质检备注" class="form-input"></input>
                  </view>
               </view>
               <view class="form-item" v-if="form.status==='reduce'">
                  <view class="form-item-label require">
                     图片
                  </view>
                  <view class="form-item-value m-l-a m-r-0">
                     <view class="t-red" @click="uploadCheckImage()">上传</view>
                  </view>
               </view>
               <view class="flex p20" v-if="form.pictureList&&form.pictureList.length>0">
                  <view class="m-t-12 m-r-10 " v-for="(timg,index) of form.pictureList" :key="index">
                     <image class="check-img" :src="timg" @click.stop="previewImg(timg)">
                     </image>
                     <view class="t-red text-center" @click.stop="deleteCheckImage(index)">删除</view>
                  </view>
               </view>
            </view>

            <view class="button-green m-t-15" @click="submitCheck">提交</view>
         </view>
      </uni-popup>
   </view>
</template>

<style lang="scss" scoped>
.delivery-detail-page {
  .delivery-order-item {
    .title {
      font-weight: 600;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
   .delivery-detail-page {
      .arrive-img {
         width: 96rpx;
         height: 96rpx;
         border-radius: 4rpx;
         border: 2rpx dashed #CECECE;
      }

      .level {
        font-weight: 400;
        font-size: 28rpx;
        color: #20613D;
        line-height: 40rpx;
        margin-left: 20rpx;
      }
    }
      .delivery-order-item {
         .title {
            font-weight: 600;
            font-size: 28rpx;
            color: #000000;
            line-height: 40rpx;

    .buttons {
      display: flex;
            .level {
               font-weight: 400;
               font-size: 28rpx;
               color: #20613D;
               line-height: 40rpx;
               margin-left: 20rpx;
            }
         }

      .button {
        margin: 0 auto;
        width: 98rpx;
        line-height: 48rpx;
        border-radius: 24rpx;
        border: 2rpx solid #CECECE;
        text-align: center;
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
      }
    }
         .buttons {
            display: flex;

    .flower-img {
      width: 128rpx;
      height: 118rpx;
      min-width: 128rpx;
      min-height: 118rpx;
    }
            .button {
               margin: 0 auto;
               width: 98rpx;
               line-height: 48rpx;
               border-radius: 24rpx;
               border: 2rpx solid #CECECE;
               text-align: center;
               font-size: 24rpx;
               color: #666666;
               line-height: 34rpx;
            }

    .each-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 6rpx;
            .button-0 {
               color: #fff;
               border: 2rpx solid #20613D;
               background: #20613D;
            }
         }

      .each-item {
        min-width: 30%;
        max-width: 40%;
        text-align: center;
        margin-left: 0rpx;
        margin-right: auto;
        display: flex;
         .flower-img {
            width: 128rpx;
            height: 118rpx;
            min-width: 128rpx;
            min-height: 118rpx;
         }

        .label {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          text-align: left;
          padding-right: 10rpx;
        }
         .each-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 6rpx;

        .label::after {
          content: ": "
        }
            .each-item {
               min-width: 30%;
               max-width: 40%;
               text-align: center;
               margin-left: 0rpx;
               margin-right: auto;
               display: flex;

        .value {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
               .label {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #666666;
                  text-align: left;
                  padding-right: 10rpx;
               }

  .popup-check-form {
    background: #FFFFFF;
    border-radius: 16rpx;
    // width: 690rpx;
    height: 882rpx;
    margin-top: 120rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    padding: 24rpx 36rpx;
               .label::after {
                  content: ": "
               }

    .check-img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 4rpx;
      border: 2rpx dashed #CECECE;
    }
               .value {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #666666;
               }
            }
         }
      }

    .submit {
      margin-top: 30rpx;
      .popup-check-form {
         background: #FFFFFF;
         border-radius: 16rpx;
         // width: 690rpx;
         height: 882rpx;
         margin-top: 120rpx;
         margin-left: 30rpx;
         margin-right: 30rpx;
         padding: 24rpx 36rpx;

      .form-input {
        height: 36rpx;
        line-height: 36rpx;
      }
    }
  }
         .check-img {
            width: 96rpx;
            height: 96rpx;
            border-radius: 4rpx;
            border: 2rpx dashed #CECECE;
         }

  .delivery-info {
    padding: 20rpx;
         .submit {
            margin-top: 30rpx;

    .desc {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
    }
            .form-input {
               height: 36rpx;
               line-height: 36rpx;
            }

    .station {
      height: 50rpx;
      background: #C6E8D4;
      border-radius: 4rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;
      min-width: 110rpx;
            .value-item {
               min-width: 152rpx;
               width: fit-content;
               text-align: center;
               height: 58rpx;
               background: #F1F5F2;
               border-radius: 36rpx;
               margin-bottom: 18rpx;
               font-weight: 400;
               font-size: 28rpx;
               line-height: 58rpx;
               padding: 8rpx 24rpx;
               color: #33a868;
               margin-left: 16rpx;
               margin-right: 16rpx;
               border: 2rpx solid #F1F5F2;
            }

      line-height: 50rpx;
    }
  }
}
            .value-item.cur {
               background: #E1F0E7;
               border-radius: 36rpx;
               border: 2rpx solid #20613D;
               color: #20613D;

            }
         }
      }

      .delivery-info {
         padding: 20rpx;

         .desc {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;
         }

         .station {
            height: 50rpx;
            background: #C6E8D4;
            border-radius: 4rpx;
            padding-left: 20rpx;
            padding-right: 20rpx;
            min-width: 110rpx;

            line-height: 50rpx;
         }
      }
   }
</style>