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" />
    <!-- 需要下单的商品列表 -->
  </view>
</template>

<script>
import Commodity from "./component/commodity.vue";
export default {
  components: {
    Commodity,
  },
  data() {
    return {
      addinfo: {}, //地址信息
      province_id: "",
      containerList: [],
      transport_type_id: "", //运输方式ID
      transportTypeName: "", //运输方式名称
      swiptlist: [], //推荐商品
      goodsList: [], //需要下单的商品
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onLoad(options) {
    this.goodsList = JSON.parse(decodeURIComponent(options.goodsList));
    console.log(this.goodsList);
  },
  methods: {
    //跳转到填写地址
    toadd() {
      var that = this;
      uni.navigateTo({
        url: "/pageC/addressManagement/addressManagement?tabs=" + Number(0),
        events: {
          getadd(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;
          //根据不同的语言选择不用的类型
          if (this.language == "zh-CN") {
            this.type = res[0].name_cn;
          }
          if (this.language == "en-US") {
            this.type = res[0].name_en;
          }
          if (this.language == "es-ES") {
            this.type = res[0].name_es;
          }
          if (this.language == "it-IT") {
            this.type = 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(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background: rgba(244, 244, 244, 1);
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  // 地址
  .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;
    }
  }
}
</style>