wx-qhb/pageD/newBulitOrder/component/nextLogistics.vue

<template>
  <view class="list">
    <u-popup
      :safeAreaInsetTop="false"
      :show="nextLogisticsShow"
      @close="$emit('closeLogistics')"
      mode="bottom"
      closeIconPos="top-right"
      round="28"
      bgColor="#F4F4F4"
    >
      <view
        style="padding: 40rpx 28rpx; box-sizing: border-box; position: relative"
      >
        <view class="u-flex u-row-between">
          <view class="" style="width: 28px; height: 28px"></view>
          <view class="poptitle">
            {{ i18n.flow }}
          </view>
          <u-icon
            name="close"
            @click="$emit('closeLogistics')"
            color="background: #333333;"
            size="28"
          ></u-icon>
        </view>
        <scroll-view :scroll-y="true" style="500rpx">
          <view
            class="transport"
            style="margin-top: 32rpx"
            @click="activea(item, idx)"
            v-for="(item, idx) in containerList"
            v-if="item.sum != 0"
          >
            <view class="u-flex u-row-between">
              <text class="yundate"
                >{{ i18n.Shipmentdate }} {{ item.end_date }}</text
              >
              <image
                v-if="datechan == idx"
                src="../../../static/mine/330.png"
                style="width: 36rpx; height: 36rpx"
                mode=""
              ></image>
              <image
                v-else
                src="../../../static/mine/327.png"
                style="width: 36rpx; height: 36rpx"
                mode=""
              ></image>
            </view>
            <view class="u-flex u-row-between" style="margin-top: 28rpx">
              <view class="chest">
                <text>{{ item.name_cn }}</text>
                <text v-if="language == 'en-US'">{{ item.name_en }}</text>
                <text v-if="language == 'es-ES'">{{ item.name_es }}</text>
                <text v-if="language == 'it-IT'">{{ item.name_ita }}</text>
                <text style="margin: 0 16rpx">|</text>
                <text
                  >{{ i18n.Estimatedtimeofarrival }}{{ item.transport_days
                  }}{{ i18n.Workingday }}</text
                >
              </view>
              <view class="mone">
                <text>¥</text>
                <text style="font-size: 48rpx; font-weight: 600">{{
                  item.sum
                }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="" style="height: 166rpx"></view>
        <view class="enbottom u-flex u-row-between">
          <view class="cancel" @click="$emit('closeLogistics')">{{
            i18n.Cancel
          }}</view>
          <view class="confirm" @click="confirm">{{ i18n.enter }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  name: "nextLogistics",
  props: {
    nextLogisticsShow: {
      typeof: Boolean,
      default: false,
    },
    language: {
      typeof: String,
      default: "",
    },
    goodinfo: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    goodsValue: {
      typeof: Number,
      default: 0,
    },
    //商品规格价格
    specificationsPrice: {
      typeof: String,
      default: "",
    },
    //多商品
    goodsArr: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {
      containerList: [], //货柜列表
      unit_price: "",
      recommend_weight: "",
      containname: "",
      sum: "", //运费
      containid: "", //货柜id
      datechan: "", //当前选中的货柜列表下标
      max_weight: "", //推荐重量。当满足当前重量，减少价格
      min_weight: "",
      unit_fee: "", //满减价格
      unchangedFreight: "", //基础运费，不会变
      unchangedUnit_price: "",
    };
  },
  watch: {
    //打开窗口，获取货柜
    nextLogisticsShow(newVal) {
      if (newVal) {
        uni.$u.http
          .get("/api/container-base", {
            params: {
              is_page: 0,
              province_id: this.goodinfo.province_id,
              transport_type_id: this.goodinfo.transport_type_id,
              weight: Number(this.goodinfo.weight),
              length: Number(this.goodinfo.length), //		是	String	长
              width: this.goodinfo.width, //		是	String	宽
              height: this.goodinfo.height, //		是	String	高
              cart_id: "",
              goods_arr: JSON.stringify(this.goodsArr),
            },
          })
          .then((res) => {
            res.forEach((item) => {
              if (item.sum != 0) {
                this.containerList.push(item);
              }
            });

            if (this.goodinfo.is_shipping == 0) {
              this.sum = 0;
              this.unchangedFreight = 0;
            } else {
              this.sum = this.containerList[0].sum;
              this.unchangedFreight = this.containerList[0].sum;
            }
            console.log(this.sum);
            this.unit_price = this.containerList[0].unit_price;
            this.unchangedUnit_price = this.containerList[0].unit_price;
            this.recommend_weight = this.containerList[0].recommend_weight;
            this.containid = this.containerList[0].id;
            this.containname = this.containerList[0].name_cn; //等待后续更改language删除掉
            if (this.language == "zh-CN") {
              this.containname = this.containerList[0].name_cn;
            }
            if (this.language == "en-US") {
              this.containname = this.containerList[0].name_en;
            }
            if (this.language == "es-ES") {
              this.containname = this.containerList[0].name_es;
            }
            if (this.language == "it-IT") {
              this.containname = this.containerList[0].name_ita;
            }
          })
          .catch(() => {});
      }
    },
  },
  methods: {
    //运费满减
    async config() {
      var that = this;
      await uni.$u.http
        .get("/api/config", {
          params: {
            module: "free_shipping",
          },
        })
        .then((res) => {
          let goodsum = "";
          goodsum = Number(that.specificationsPrice);
          if (goodsum > res.free_shipping) {
            that.sum = 0;
            that.unit_price = 0;
          } else {
            this.sum = this.unchangedFreight;
            this.unit_price = this.unchangedUnit_price;
          }
        })
        .catch(() => {});
    },

    //推荐重量
    async recommendweight() {
      await uni.$u.http
        .get("/api/express-order/recommend-container", {
          params: {
            container_id: this.containid,
            type: "normal",
          },
        })
        .then((res) => {
          this.max_weight = res.max_weight;
          this.min_weight = res.min_weight;
          this.unit_fee = res.unit_fee;
        })
        .catch(() => {});
    },
    //确定选择货柜
    confirm() {
      this.recommendweight();
      this.config();
      //异步跳转
      const timer = setTimeout(() => {
        let data = {
          type: "second",
          containname: this.containname,
          containid: this.containid,
          recommend_weight: this.recommend_weight,
          unit_price: this.unit_price,
          sum: this.sum,
          max_weight: this.max_weight,
          min_weight: this.min_weight,
          unit_fee: this.unit_fee,
          unchangedFreight: this.unchangedFreight,
          unchangedUnit_price: this.unchangedUnit_price,
        };
        console.log(data);
        this.$emit("closeLogistics", data);
        clearTimeout(timer);
      }, 200);
    },

    activea(item, idx) {
      this.datechan = idx;
      this.sum = item.sum;
      this.unchangedFreight = item.sum;
      this.unit_price = item.unit_price;
      this.recommend_weight = item.recommend_weight;
      this.containid = item.id;
      this.containname = item.name_cn; //等待后续更改language删除掉
      if (this.language == "zh-CN") {
        this.containname = item.name_cn;
      }
      if (this.language == "en-US") {
        this.containname = item.name_en;
      }
      if (this.language == "es-ES") {
        this.containname = item.name_es;
      }
      if (this.language == "it-IT") {
        this.containname = item.name_ita;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.poptitle {
  width: 142rpx;
  height: 50rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 36rpx;
  color: #333333;
  text-align: center;
  width: 100%;
}
.transport {
  width: 702rpx;
  height: 164rpx;
  background: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx 20rpx;
  box-sizing: border-box;
}
.yundate {
  font-family: PingFangSC, PingFang SC;
  font-weight: 550;
  font-size: 32rpx;
  color: #333333;
  line-height: 44rpx;
  text-align: left;
  font-style: normal;
}

.chest {
  font-family: SFPro, SFPro;
  font-weight: 400;
  font-size: 24rpx;
  color: #555555;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
}
.mone {
  font-family: JDZhengHT, JDZhengHT;
  font-weight: 400;
  font-size: 26rpx;
  color: #f83224;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.enbottom {
  width: 750rpx;
  height: 166rpx;
  background: #ffffff;
  position: absolute;
  left: 0rpx;
  bottom: 0;
  padding: 0 24rpx;
  box-sizing: border-box;
  .confirm {
    width: 398rpx;
    height: 84rpx;
    background: #f83224;
    border-radius: 42rpx;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 84rpx;
    text-align: center;
    font-style: normal;
  }

  .cancel {
    width: 280rpx;
    height: 84rpx;
    border-radius: 42rpx;
    border: 2rpx solid rgba(151, 151, 151, 0.3);
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #444444;
    line-height: 84rpx;
    text-align: center;
    font-style: normal;
  }
}
</style>