wx-qhb/pageD/newBulitOrder/newBulitOrder.vue

<template>
  <view class="page">
    <!-- 地址 -->
    <view class="address" @click="toadd">
      <view class="u-flex u-row-between">
        <view class="add" v-if="JSON.stringify(addinfo) != '{}'">{{
          addinfo.full_address
        }}</view>
        <view class="" v-else>{{ i18n.shippingaddress }}</view>
        <u-icon name="arrow-right" size="16"></u-icon>
      </view>
      <view class="info" v-if="JSON.stringify(addinfo) != '{}'">
        <text>{{ addinfo.name }}</text>
        <text style="margin-left: 20rpx">{{
          replacePhoneToStar(addinfo.mobile)
        }}</text>
      </view>
    </view>
    <!-- 地址 -->

    <!-- 需要下单的商品列表 -->
    <Commodity
      :goodsList="goodsList"
      :goodsValue="goodsValue"
      @changeGoodsNum="changeGoodsNum"
    />
    <!-- 需要下单的商品列表 -->

    <!-- 选择物流 -->
    <view class="logistics u-flex u-row-between">
      <text style="font-weight: 600; width: 320rpx">{{ i18n.flow }}</text>
      <view class="u-flex" @click="openLogistics">
        <text class="change">{{
          containname ? transportTypeName + " | " + containname : i18n.selection
        }}</text>
        <u-icon name="arrow-right" size="16"></u-icon>
      </view>
    </view>
    <!-- 选择物流 -->

    <!-- 选择物流弹窗 -->
    <SelectLogistics
      :logisticsShow="logisticsShow"
      @closeLogistics="closeLogistics"
      :containerList="containerList"
      :language="language"
      @openContainer="openContainer"
    />
    <!-- 选择物流弹窗 -->

    <!-- 选择物流价格之后的下一步 -->
    <NextLogistics
      :nextLogisticsShow="nextLogisticsShow"
      :language="language"
      :goodinfo="goodinfo"
      :goodsValue="goodsValue"
      @closeLogistics="closeLogistics"
    />
    <!-- 选择物流价格之后的下一步 -->

    <!-- 推荐商品 -->
    <RecommendGoods :swiptlist="swiptlist" />
    <!-- 推荐商品 -->

    <!-- 商品信息 -->
    <GoodsInformation
      :goodinfo="goodinfo"
      :containname="containname"
      :goodsPrice="goodsList.order.amount"
      :countGoodsInformation="countGoodsInformation"
      :goodsValue="goodsValue"
      :goodsWeight="goodsWeight"
    />
    <!-- 商品信息 -->

    <view class="btn u-flex u-row-right">
      <view class="u-flex">
        <text class="kg" v-show="containname"
          >{{ i18n.Atotalof }}{{ goodsWeight * goodsValue }}kg,</text
        >
        <text>{{ i18n.total }}:</text>
        <text class="money" style="font-size: 28rpx">¥</text>

        <view class="">
          <text
            class="money"
            v-if="goodinfo.is_discount == 1"
            style="font-weight: bold"
            >{{
              Number(
                countGoodsInformation.sum * 10000 +
                  Number(sku_info.price) * Number(goodsValue) * 10000
              ) / 10000
            }}</text
          >
          <text
            class="money"
            v-if="goodinfo.is_discount == 0"
            style="font-weight: bold"
            >{{
              Number(
                countGoodsInformation.sum * 10000 +
                  Number(sku_info.discount_price) * Number(goodsValue) * 10000
              ) / 10000
            }}</text
          >
        </view>
      </view>
      <view class="order" @click="topay">
        {{ i18n.Submitorder }}
      </view>
    </view>
  </view>
</template>

<script>
import Commodity from "./component/commodity.vue";
import SelectLogistics from "./component/selectLogistics.vue";
import NextLogistics from "./component/nextLogistics.vue";
import RecommendGoods from "./component/recommendGoods.vue";
import GoodsInformation from "./component/goodsInformation.vue";
export default {
  components: {
    Commodity,
    SelectLogistics,
    NextLogistics,
    RecommendGoods,
    GoodsInformation,
  },
  data() {
    return {
      addinfo: {}, //地址信息
      province_id: "",
      containerList: [],
      transport_type_id: "", //运输方式ID
      transportTypeName: "", //运输方式名称
      swiptlist: [], //推荐商品
      goodsList: [], //需要下单的商品
      logisticsShow: false, //打开选择物流窗口
      language: "", //语言
      nextLogisticsShow: false, //打开选择货柜窗口
      goodinfo: {}, //商品信息
      goodsValue: 0, //商品数量
      sku_info: {},
      containname: "", //货柜名称
      countGoodsInformation: {},
      goodsWeight: 0, //商品重量
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onLoad(options) {
    //需要下单的商品列表
    this.goodsList = JSON.parse(decodeURIComponent(options.goodsList));
    this.goodsValue = this.goodsList.order_goods[0].goods_num;
    this.goodsWeight = this.goodsList.order_goods[0].sku_item.weight;
    this.recommend();
  },
  onShow() {
    if (uni.getStorageSync("language") != "") {
      this.language = uni.getStorageSync("language");
    }
  },
  methods: {
    //关闭选择物流窗口
    closeLogistics(data) {
      this.logisticsShow = false;
      this.nextLogisticsShow = false;
      //判断是哪一步关闭，接受数据
      if (data.type == "second" && data.containname) {
        this.containname = data.containname;
        this.countGoodsInformation = data;
      }
    },

    //打开选择货柜弹窗
    openContainer(data) {
      this.goodinfo.province_id = this.province_id;
      this.goodinfo.transport_type_id = this.transport_type_id;
      let weight = 0;
      let height = 0;
      let length = 0;
      let price = 0;
      let width = 0;
      console.log(this.goodsList);
      this.goodsList.order_goods.map((item) => {
        console.log(item);
        weight += item.sku_item.weight;
        height += item.sku_item.height;
        length += item.sku_item.length;
        width += item.sku_item.width;
        price += Number(item.sku_item.price);
        this.goodinfo.type = item.goods.status;
      });

      this.goodinfo.weight = weight;
      this.goodinfo.height = height;
      this.goodinfo.length = length;
      this.goodinfo.width = width;
      this.goodinfo.price = price;
      console.log(this.goodinfo);
      this.logisticsShow = false;
      this.nextLogisticsShow = true;

      //判断打开的窗口是第几步，将选中的运输方式传回
      if (data.type == "first" && data.transportTypeName) {
        this.transportTypeName = data.transportTypeName;
      }
    },

    //打开选择物流窗口
    openLogistics() {
      this.logisticsShow = true;
      this.transport();
    },

    //跳转到填写地址
    toadd() {
      var that = this;
      uni.navigateTo({
        url: "/pageC/addressManagement/addressManagement?tabs=" + Number(0),
        events: {
          getadd(res) {
            console.log(res);
            that.addinfo = res;
            that.province_id = res.province_id;
            that.transport();
          },
        },
      });
    },

    //货运类型列表
    transport() {
      uni.$u.http
        .get("/api/transport-type", {
          params: {
            province_id: this.province_id,
          },
        })
        .then((res) => {
          this.containerList = res;
          this.transport_type_id = res[0].id;
          this.transportTypeName = res[0].name_cn; //等待后续更改language删除掉
          //根据不同的语言选择不用的类型
          if (this.language == "zh-CN") {
            this.transportTypeName = res[0].name_cn;
          }
          if (this.language == "en-US") {
            this.transportTypeName = res[0].name_en;
          }
          if (this.language == "es-ES") {
            this.transportTypeName = res[0].name_es;
          }
          if (this.language == "it-IT") {
            this.transportTypeName = res[0].name_ita;
          }
        })
        .catch(() => {});
    },

    //正则匹配手机号
    replacePhoneToStar: function (phone) {
      if (phone) {
        return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
      }
    },

    //商品推荐
    recommend() {
      uni.$u.http
        .post("/api/goods/recommend", {
          keyword: "",
        })
        .then((res) => {
          this.swiptlist = res;
        })
        .catch(() => {});
    },

    //增加 or 减少 商品数量
    changeGoodsNum(type) {
      if (type == "increase") {
        this.goodsValue++;
      } else {
        this.goodsValue--;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background: rgba(244, 244, 244, 1);
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  padding-bottom: 200rpx;
  // 地址
  .address {
    width: 702rpx;
    // height: 182rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    box-sizing: border-box;

    .add {
      font-family: SFPro, SFPro;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }

    .info {
      font-family: SFPro, SFPro;
      font-weight: 400;
      font-size: 24rpx;
      color: #555555;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      margin-top: 20rpx;
    }
  }

  //物流
  .logistics {
    width: 702rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx 22rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .change {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #f83224;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      margin-right: 8rpx;
    }
  }
  .btn {
    width: 750rpx;
    height: 166rpx;
    background: #ffffff;
    box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 24rpx 5rpx 5rpx;
    box-sizing: border-box;

    .money {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 48rpx;
      color: #f83224;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      // font-weight: 500;
      font-weight: bold;
    }

    .kg {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      line-height: 34rpx;
      text-align: left;
      font-style: normal;
    }

    .order {
      width: 232rpx;
      height: 80rpx;
      background: #f83224;
      border-radius: 40rpx;
      font-family: PingFangTC, PingFangTC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      font-style: normal;
      margin-left: 20rpx;
    }
  }
}
</style>