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"
      :specificationsPrice="specificationsPrice"
      @closeLogistics="closeLogistics"
      :goodsArr="goodsArr"
    />
    <!-- 选择物流价格之后的下一步 -->

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

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

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

        <view class="">
          <text class="money" v-if="countGoodsInformation.containname">{{
            Number(specificationsPrice) + Number(countGoodsInformation.sum)
          }}</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, //商品重量
      goodsId: "", //商品id
      sku_item_id: "", //商品规格id
      merchant_goods_id: "", //店铺商品id
      goodsSource: "", //商品归属
      isDiscount: "", //商品是否存在打折
      specificationsPrice: 0, //订单商品总金额
      goodsArr: [], //多商品用的商品规格
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onLoad(options) {
    this.getOrderGoods(options.orderId);
    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;
      this.goodsList.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;
      //等待后端解决多商品删除，采用上面几行
      this.goodinfo.weight = 10;
      this.goodinfo.height = 10;
      this.goodinfo.length = 10;
      this.goodinfo.width = 10;
      this.goodinfo.price = 10;
      this.logisticsShow = false;
      this.nextLogisticsShow = true;

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

    //运费满减
    async config() {
      var that = this;
      await uni.$u.http
        .get("/api/config", {
          params: {
            module: "free_shipping",
          },
        })
        .then((res) => {
          let goodsum = "";
          goodsum = Number(that.specificationsPrice) * that.goodsValue;
          if (goodsum > res.free_shipping) {
            that.countGoodsInformation.sum = 0;
            that.countGoodsInformation.unit_price = 0;
          } else {
            this.countGoodsInformation.sum =
              this.countGoodsInformation.unchangedFreight;
            this.countGoodsInformation.unit_price =
              this.countGoodsInformation.unchangedUnit_price;
          }
        })
        .catch(() => {});
    },

    //提交订单
    topay() {
      uni.$u.http
        .post("/api/order", {
          address_id: this.addinfo.id, //3	是	String	地址ID
          goods_id: this.goodsId, //65	是	String	商品id
          goods_num: this.goodsValue, //2	是	String	商品数量
          sku_item_id: this.sku_item_id, //60	是	String	规格id
          cart_ids: "", //8,9	是	String	购物车id
          remark: "", //备注	是	String	备注
          merchant_goods_id: this.merchant_goods_id || "", //39	是	String	团长商品id
          container_id: this.countGoodsInformation.containid, //1	是	String	货柜id
          share_member_id: "", //	是	String	分享团长id 分享商品的时候传
          belong: this.goodsSource || "", //0	是	String	商品归属 0团长 1平台自营 2团长发布或者分享的平台自营商品、供应链商品
          goods_arr: JSON.stringify(this.goodsArr),
        })
        .then((res) => {
          uni.navigateTo({
            // url: '/pageA/payorder?sum=' + (Number(this.sum*10000+ Number(this.sku_info.discount_price)*Number(this.value)*10000))/10000 +'&orderid=' + res.id
            url: "/pageA/payorder?orderid=" + res.id + "&sum=" + res.amount,
          });
        })
        .catch(() => {});
    },

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

    //获取订单商品
    getOrderGoods(id) {
      uni.$u.http.get(`/api/order/read?id=${id}`).then((res) => {
        this.goodsList = res;
        this.goodsValue = this.goodsList.goods[0].goods_num;
        this.goodsList.goods.map((item) => {
          this.goodsId = item.goods_id;
          this.sku_item_id = item.sku_item_id;
          this.merchant_goods_id = item.merchant_goods_id;
          // this.goodsSource = item.goods.source;
          if (item.true_stock > item.goods_num) {
            this.goodsWeight += item.sku_item.weight; //商品重量
            //多商品获取规格商品id
            let obj = {
              merchant_goods_id: item.merchant_goods_id,
              goods_num: item.goods_num,
              sku_item_id: item.sku_item_id,
            };
            this.goodsArr.push(obj);
            //获取订单商品总金额
            this.specificationsPrice +=
              Number(item.discount_price) * item.goods_num;
          }
        });
        if (this.goodsArr.length < this.goodsList.goods.length) {
          uni.showToast({
            title: "已自动去除库存不足的商品",
            icon: "none",
          });
        }
      });
    },

    //跳转到填写地址
    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++;
        this.config();
      } else if (this.goodsValue > 1) {
        this.goodsValue--;
        this.config();
      }
    },
  },
};
</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>