jsm-mall-h5-front/src/packageAttachment/pages/applyReturnOfNewPiece/index.vue

<template>
  <view class="apply-return-of-new-piece" style="width: 100%; height: 100vh">
    <zj-page-container>
      <zj-page-fill>
        <view v-if="form">
          <view class="input_module">
            <view class="input_module_as">
              <view class="input_module_as_title"> 申请人 </view>
              <view class="input_module_as_en"> {{ form.applyStuffName }}（{{ form.applyStuffNumber }}） </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 所属网点 </view>
              <view class="input_module_as_en"> {{ form.websitName }} ({{ form.websitNumber }}） </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> *申请类别 </view>
              <view class="input_module_as_en">
                <radio-group
                  @change="
                    d => {
                      form.applyCategory = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="HOME" :checked="form.applyCategory === 'HOME'" />家用空调
                  </label>
                  <label> <radio value="TRADE" :checked="form.applyCategory === 'TRADE'" />商用空调 </label>
                  <br />
                  <br />
                  <label> <radio value="ELEC" :checked="form.applyCategory === 'ELEC'" />生活电器（小家电） </label>
                </radio-group>
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> *申请类型 </view>
              <view class="input_module_as_en">
                <radio-group
                  @change="
                    d => {
                      form.applyType = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="NEW" :checked="form.applyType === 'NEW'" />新件返还
                  </label>
                  <label> <radio value="LOST" :checked="form.applyType === 'LOST'" />破损返还 </label>
                  <br />
                  <br />
                  <label> <radio value="BUG" :checked="form.applyType === 'BUG'" />故障返还 </label>
                </radio-group>
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> *返还方式 </view>
              <view class="input_module_as_en">
                <radio-group
                  @change="
                    d => {
                      form.refundMode = d.detail.value
                    }
                  "
                >
                  <label style="margin-right: 20upx">
                    <radio value="EXPRESS" :checked="form.refundMode === 'EXPRESS'" />物流快递
                  </label>
                  <label> <radio value="SELF" :checked="form.refundMode === 'SELF'" />网点自还 </label>
                </radio-group>
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 发出单位 </view>
              <view class="input_module_as_en">
                {{ form.deliveryUnit }}
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 接收单位 </view>
              <view class="input_module_as_en">
                {{ form.receiveUnit }}
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 收货地址 </view>
              <view class="input_module_as_en">
                <input
                  v-model="form.receiveAddr"
                  style="width: 100%; height: 100%; margin-top: -6upx"
                  placeholder="请输入"
                />
              </view>
            </view>
            <view class="input_module_as">
              <view class="input_module_as_title"> 详细地址 </view>
              <view class="input_module_as_en">
                <input v-model="form.addr" style="width: 100%; height: 100%; margin-top: -6upx" placeholder="请输入" />
              </view>
            </view>
          </view>
          <view class="input_module" v-if="form.itemList && form.itemList.length">
            <view class="input_module_title">
              <text>配件信息</text>
            </view>
            <view class="input_module_content">
              <view class="input_module_apply_info">
                <block v-for="(item, index) in form.itemList" :key="index">
                  <view class="input_module_apply_view">
                    <view class="input_module_apply_title">
                      {{ item.partsName }}
                    </view>
                    <view class="input_module_apply_num">
                      <text class="input_module_apply_number">{{ item.partsNumber }}</text>
                      <view class="input_module_apply_amount">
                        <text class="apply_amount"> ￥{{ Math.round(item.salesPrice * 100) / 100 }} </text>
                        <view class="input_module_apply_counter">
                          <image
                            @tap="setQty(item, -1)"
                            src="/static/images/fittingsManagement/jianjian.png"
                            mode="aspectFill"
                          ></image>
                          <text>{{ item.qty }}</text>
                          <image
                            @tap="setQty(item, 1)"
                            src="/static/images/fittingsManagement//jiajia.png"
                            mode="aspectFill"
                          ></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </block>
                <view class="a_combined_sc">
                  合计：<text
                    >￥{{
                      [
                        ...(form.itemList || []).map(item => Math.round(item.salesPrice * item.qty * 100) / 100),
                        0
                      ].reduce((a, b) => {
                        return a + b
                      })
                    }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <view class="input_module">
            <view class="input_module_title">
              <text>备注</text>
            </view>
            <view class="input_module_content">
              <view class="input_remark">
                <textarea
                  v-model="form.remark"
                  style="width: 100%; height: 100%"
                  :maxlength="1000"
                  placeholder-style="color:#999999"
                  placeholder="请输入备注"
                />
              </view>
            </view>
          </view>
        </view>
      </zj-page-fill>
      <bt-container>
        <view class="btcon pv30 ph10">
          <view class="confirm-btn" @tap.stop="toStateUrl">提交申请</view>
        </view>
      </bt-container>
    </zj-page-container>
  </view>
</template>

<script>
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
import { getStorage } from '@/common/utils/storage.js'
export default {
  components: {
    zjPageContainer,
    zjPageFill
  },
  data() {
    return {
      form: null
    }
  },
  onLoad(option) {
    var { salesOrderNo, pushFlag, identity } = option
    this.getDetails({
      salesOrderNo,
      pushFlag,
      identity
    })
  },
  computed: {
    userInfo() {
      return getStorage('user')
    },
    idcard() {
      return this.userInfo.idCard
    }
  },
  methods: {
    toStateUrl() {
      var newRefundManageItemBeanList = (this.form.itemList || [])
        .filter(item => item.qty > 0)
        .map(item => {
          var { qty, materialGroupId, materialGroupName, partsName, partsNumber, unitId, unitName } = item
          return {
            qty,
            materialGroupId,
            materialGroupName,
            partsName,
            partsNumber,
            unitId,
            unitName
          }
        })
      if (!newRefundManageItemBeanList || !newRefundManageItemBeanList.length) {
        uni.showModal({
          title: '提示',
          content: '至少选择一条配件记录',
          showCancel: false
        })
        return
      }
      if (!this.form.applyType) {
        uni.showModal({
          title: '提示',
          content: '申请类型必须选择',
          showCancel: false
        })
        return
      }
      if (!this.form.refundMode) {
        uni.showModal({
          title: '提示',
          content: '返还方式必须选择',
          showCancel: false
        })
        return
      }
      if (!this.form.applyCategory) {
        uni.showModal({
          title: '提示',
          content: '申请类别必须选择',
          showCancel: false
        })
        return
      }
      var {
        id,
        salesOrderNo,
        applyCategory,
        applyType,
        refundMode,
        belongCompany,
        websitName,
        websitNumber,
        workerId,
        workerName,
        remark
      } = this.form
      var data = {
        salesOrderId: id,
        salesOrderNo,
        applyCategory,
        applyType,
        refundMode,
        belongCompany,
        websitName,
        websitNumber,
        workerId,
        workerName,
        remark,
        newRefundManageItemBeanList,
        receiveWebsitId: this.form.websitId,
        receiveWebsitName: this.form.websitName,
        receivePartsWebsitNumber: this.form.partsWebsitNumber,
        receiveAddress: this.form.receiveAddr,
        identity: this.idcard
      }
      this.$api
        .postJson('/app/worker/new-refund/add', data)
        .then(res => {
          uni.$emit('DataStatisticsOfParts')
          this.$navToPage({
            url: '/packageAttachment/pages/applyReturnOfNewPiece/state'
          })
        })
        .catch(() => {})
    },
    getDetails(params) {
      this.$api
        .post('/app/worker/parts-sales/detail', params)
        .then(res => {
          if (res.data.itemList && res.data.itemList.length) {
            res.data.itemList.map(item => {
              item.qty = item.quantity
            })
          }
          this.form = res.data
        })
        .catch(() => {})
    },
    setQty(item, num) {
      var n = Number(item.qty) + Number(num)
      if (n >= 0 && n <= item.quantity) {
        item.qty = n
      } else if (num == -1) {
        uni.showModal({
          title: '提示',
          content: '数量不能小于0',
          showCancel: false
        })
      } else if (num == 1) {
        uni.showModal({
          title: '提示',
          content: '数量不能大于库存',
          showCancel: false
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.apply-return-of-new-piece {
  .input_module {
    background: #ffffff;
    margin-bottom: 20upx;

    .input_module_as {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;

      .input_module_as_title {
        width: 200upx;
        min-width: 200upx;
        height: 88upx;
        text-align: left;
        font-size: 28upx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #333333;
        line-height: 28upx;
        box-sizing: border-box;
        padding: 30upx;
      }

      .input_module_as_en {
        width: 100%;
        box-sizing: border-box;
        padding: 30upx 30upx 30upx 0;
      }
    }

    .input_module_title {
      width: 100%;
      box-sizing: border-box;
      padding: 20upx 30upx;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Heavy;
      font-weight: 800;
      text-align: left;
      color: #333333;
      line-height: 24px;
    }

    .input_module_content {
      width: 100%;
      box-sizing: border-box;
      padding: 0 30upx 20upx;
    }

    .input_remark,
    .input_module_apply_info {
      width: 100%;
      height: auto;
      background: #f7f7f7;
      border-radius: 20upx;
      box-sizing: border-box;
      padding: 20upx;
    }

    .input_module_apply_view {
      margin-bottom: 20upx;

      .input_module_apply_title {
        width: 100%;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #333333;
        line-height: 60upx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .input_module_apply_num {
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 20upx;
        border-bottom: 1upx solid #e5e5e5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .input_module_apply_number {
          font-size: 28upx;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          text-align: left;
          color: #666666;
        }

        .input_module_apply_amount {
          width: 50%;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .apply_amount {
            font-size: 28upx;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            text-align: right;
            color: #333333;
          }

          .input_module_apply_counter {
            width: 45%;
            margin-left: 20upx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            text {
              font-size: 30upx;
              font-family: PingFang SC, PingFang SC-Heavy;
              font-weight: bold;
              text-align: center;
              color: #333333;
            }

            image {
              width: 40upx;
              min-width: 40upx;
              height: 40upx;
              min-height: 40upx;
            }
          }
        }
      }
    }

    .a_combined_sc {
      width: 100%;
      text-align: right;
      font-size: 28upx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: right;
      color: #666666;

      text {
        font-size: 32upx;
        font-family: PingFang SC, PingFang SC-Heavy;
        font-weight: bold;
        text-align: right;
        color: #e95505;
      }
    }
  }
}
</style>