caimei-distribution-www/src/views/order-list/components/freight-cell.vue

<template>
  <div class="freight">
    <van-cell title="运费信息" :value="text" @click="showFreight = true" is-link/>
    <van-popup
      v-model="showFreight"
      round
      position="bottom"
      :close="onClose"
    >
      <div class="content">
        <div class="title">运费设置</div>
        <div class="check">
          <van-radio-group v-model="radio">
            <van-radio :name="item.id" v-for="item in checkList" :key="item.id">{{ item.name }}</van-radio>
          </van-radio-group>
        </div>
        <van-field class="setFreight" v-if="radio === 1" v-model="number" type="number" placeholder="设置运费" />
        <van-button @click="confirm" color="#FF5B00">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    goodInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      showFreight: false,
      radio: 0,
      number: 0,
      productInfo: JSON.parse(sessionStorage.getItem('productInfo'))
    }
  },
  watch: {
    goodInfo: {
      handler (val) {
        this.radio = val.postageFlag
      },
      deep: true
    }
  },
  computed: {
    checkList () {
      return [
        {
          id: 0,
          name: '包邮'
        }, {
          id: 1,
          name: '不包邮'
        }, {
          id: 2,
          name: '到付'
        }
      ]
    },
    postageFlag () {
      return this.radio
    },
    postage () {
      if (this.radio === 1) return Number(this.number).toFixed(2)
      else return Number(this.productInfo.postage) + Number(this.productInfo.coldChain)
    },
    text () {
      if (this.radio === 0) {
        return '包邮'
      } else if (this.radio === 1) {
        return '¥' + this.postage
      } else return '到付'
    }
  },
  methods: {
    onClose () {
      this.showFreight = false
    },
    confirm () {
      const info = JSON.parse(sessionStorage.getItem('productInfo'))
      info.postage = this.postage
      info.postageFlag = this.postageFlag
      info.totalPrice = Number(info.totalPrice) + Number(this.postage)
      this.$emit('handlerFreight', info)
      this.showFreight = false
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  width: 100%;
  text-align: center;
  height: 10vw;
  line-height: 10vw;
  font-size: 4vw;
  font-weight: 600;
}
.check {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4vw 0;
  ::v-deep .van-radio-group {
    display: flex;
    width: 90vw;
    justify-content: space-between;
    font-size: 3.6vw;
    .van-radio {
      overflow: initial !important;
    }
    .van-icon {
      position: relative;
      width: 5vw;
      height: 5vw;
    }
    .van-radio__icon--checked .van-icon {
      background: #fff;
      border-color: #FF5B00;
      &::before {
        content: '';
        display: absolute;
        left: 0;
        top: 0;
        background: #FF5B00;
        width: 2vw;
        height: 2vw;
        transform: translate(5%, -40%);
        border-radius: 50%;
      }
    }
  }
}
.setFreight {
  box-sizing: border-box;
  border: 1px solid #ccc;
  width: 90vw;
  padding: 0 10px;
  margin-bottom: 4vw;
}
.van-button {
  width: 80vw;
  height: 12vw;
  font-size: 4vw;
  margin-bottom: 4vw;
  border-radius: 1.2vw;
}
</style>