web-store-retail-h5/pages/pickupArea/pickupArea.vue

<template>
  <view>
    <u-popup
      :show="addShow"
      closeable
      :round="10"
      mode="center"
      @close="closeTap"
    >
      <view class="height-auto">
        <view style="padding: 0 40rpx">
          <view>{{ '提货数量' }}</view>
          <view class="sum-view">
            <input class="inputs" v-model="form.carryNum" placeholder="" />
          </view>
        </view>
        <view class="buttons">
          <view class="btn" @click="closeTap">{{ '取消' }}</view>
          <view
            class="btn"
            style="border-right: none; color: #005bac"
            @click="pickSubmit"
            >{{ '确定' }}</view
          >
        </view>
      </view>
    </u-popup>
    <view class="goods">
      <view class="pick-up" v-for="item in dataList">
        <view class="banner">
          <image :src="item.pickCover"> </image>
        </view>
        <view class="sum-wrapper">
          <view>可提数量:</view>
          <view>{{ item.usableQuantity }}</view>
        </view>
        <view class="time" v-if="item.receiveTime"
          >{{ '截止时间' }}：{{ item.receiveTime }}</view
        >
        <view
          class="button"
          v-if="item.pickFlag == 0"
          @click="pickSubmitShow(item)"
        >
          {{ '申请提货' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as apis from '@/config/index.js'
export default {
  data() {
    return {
      addShow: false,
      form: { carryNum: '' },
      query: {
        pageNum: 1,
        pageSize: 50,
      },
      rules: {
        carryNum: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      dataList: [],
    }
  },
  mounted() {
    this.getUserPickUpList()
  },
  onNavigationBarButtonTap(e) {
    uni.navigateTo({
      url: '/pages/pickupList/index',
    })
  },
  methods: {
    closeTap() {
      this.addShow = false
    },
    pickSubmit() {
      if (this.form.carryNum < 1) {
        uni.showToast({
          title: '提货数量不能小于1',
          icon: 'none',
        })
        return
      }
      if (this.carryGoodsItem.baseQuantity > 1) {
        if (this.form.carryNum % this.carryGoodsItem.baseQuantity !== 0) {
          uni.showToast({
            title:
              '提货数量必须是' + this.carryGoodsItem.baseQuantity + '的基数',
            icon: 'none',
          })
          return
        }
      }
      if (this.form.carryNum > this.carryGoodsItem.usableQuantity) {
        uni.showToast({
          title: '提货数量大于可提数量',
          icon: 'none',
        })
        return
      }
      this.addShow = false

      uni.navigateTo({
        url:
          '/pages/thOrder/index?pkId=' +
          this.carryGoodsItem.pkId +
          '&num=' +
          this.form.carryNum,
      })
    },
    pickSubmitShow(item) {
      if (item.pickFlag == 1) {
        // 跳转到支付
        uni.navigateTo({
          url:
            '/pages/thOrder/index?pkId=' +
            item.pkId +
            '&num=' +
            this.form.carryNum,
        })
        return
      }
      this.form.carryNum = item.baseQuantity
      this.form.carryNum1 = item.baseQuantity
      this.form.usableQuantity = item.usableQuantity
      this.addShow = true
      this.carryGoodsItem = item
      // this.$refs['form'].validate(valid => {
      //     if (!valid) {
      //         return false
      //     }else{
      //         console.error("11")
      //     }
      // })
    },
    getUserPickUpList() {
      apis.pickList(this.query).then(res => {
        this.dataList = res.data
      })
    },
  },
}
</script>

<style lang="scss">
.inputs {
  padding-left: 30rpx;
  padding-top: 8rpx;
  text-align: center;
  width: 360rpx;
}
.buttons {
  display: flex;
  justify-content: space-between;

  border-top: 1rpx solid #ddd;
}
.btn {
  width: 330rpx;
  height: 88rpx;
  // background: #DDDDDD;
  line-height: 88rpx;
  border-right: 1px solid #ddd;
  text-align: center;
}
.sum-view {
  width: 440rpx;
  height: 64rpx;
  background: #ffffff;
  border: 1rpx solid #dddddd;
  border-radius: 32rpx;
  line-height: 64rpx;
  margin: 30rpx auto;
}
.height-auto {
  padding: 40rpx 0;
  width: 525rpx;
  height: 220rpx;
  background: #ffffff;
  border-radius: 25rpx;
}
.sum-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
}
.button {
  width: 100%;
  height: 52rpx;
  background: #005bac;
  border-radius: 26rpx;
  text-align: center;
  line-height: 52rpx;
  color: #fff;
  font-size: 24rpx;
  margin: 30rpx auto auto auto;
}
.time {
  color: #999;
  font-size: 24rpx;
  margin-top: 20rpx;
}
.banner {
  position: relative;
  image {
    width: 295rpx;
    height: 295rpx;
    position: relative;
  }
}
.sum {
  position: absolute;
  right: 15rpx;
  z-index: 1;
  bottom: 20rpx;
  color: #fff;
  font-size: 20rpx;
}
page {
  background-color: #f2f2f2;
}
.goods {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 0;
}
.pick-up {
  // width: 330rpx;
  // height: 413rpx;
  background: #ffffff;
  box-shadow: 0px 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 15rpx;
  margin-left: 30rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}
</style>