update 还有售后需要测试一下

xuxueyang

2024-07-29 d89c495a7da517d653e9ea42b8e6405eef823ef6

 sub_pages/partner/delivery/delivery-detail.vue

@@ -1,372 +1,375 @@
<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: '',
            },
            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()

  },
  async onPullDownRefresh() {
    await this.init()
    uni.stopPullDownRefresh()
  },
  methods: {
    closeCheckForm() {
      this.$refs.popup_form.close()
      },
      async onPullDownRefresh() {
         await this.init()
         uni.stopPullDownRefresh()
      },
      methods: {
         closeCheckForm() {
            this.$refs.popup_form.close()

    },
    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 clickCheck(item, status) {
            this.form = {
               id: item.id || '',
               status: 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 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 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('post', '/api/delivery/list/view/check', {
               data: {
                  ...this.form,
                  deductAmount: parseFloat(this.form.deductAmount) || 0
               }
            })
            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, {})

      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)
            })
          }
        }
      })
    }
  }
}
            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)
                        console.log('form', that.form)
                        that.$forceUpdate()
                     }).catch(res => {
                        that.$message.hideLoading()
                        console.error(res)
                     })
                  }
               }
            })
         }
      }
   }
</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>
            <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>
              <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="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="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.price || '-' }}</view>
                     </view>
                  </view>
               </view>
            </view>
            <view class="line-gray">

        </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 class="buttons">
               <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>
      </view>

    <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>
      <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>
          <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>
               <view class="form-item">
                  <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.checkImageList&&form.checkImageList.length>0">
                  <view class="m-t-12 m-r-10 " v-for="(timg,index) of form.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 class="button-green m-t-15" @click="submitCheck">提交</view>
      </view>
    </uni-popup>
  </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 {
      .delivery-order-item {
         .title {
            font-weight: 600;
            font-size: 28rpx;
            color: #000000;
            line-height: 40rpx;

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

    .buttons {
      display: flex;
         .buttons {
            display: flex;

      .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;
      }
    }
            .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;
            }
         }

    .flower-img {
      width: 128rpx;
      height: 118rpx;
      min-width: 128rpx;
      min-height: 118rpx;
    }
         .flower-img {
            width: 128rpx;
            height: 118rpx;
            min-width: 128rpx;
            min-height: 118rpx;
         }

    .each-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 6rpx;
         .each-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 6rpx;

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

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

        .label::after {
          content: ": "
        }
               .label::after {
                  content: ": "
               }

        .value {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
               .value {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #666666;
               }
            }
         }
      }

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

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

    .submit {
      margin-top: 30rpx;
         .submit {
            margin-top: 30rpx;

      .form-input {
        height: 36rpx;
        line-height: 36rpx;
      }
    }
  }
            .form-input {
               height: 36rpx;
               line-height: 36rpx;
            }
         }
      }

  .delivery-info {
    padding: 20rpx;
      .delivery-info {
         padding: 20rpx;

    .desc {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 40rpx;
    }
         .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;
         .station {
            height: 50rpx;
            background: #C6E8D4;
            border-radius: 4rpx;
            padding-left: 20rpx;
            padding-right: 20rpx;
            min-width: 110rpx;

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