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

<template>
  <view class="list">
    <u-popup
      :show="logisticsShow"
      @close="$emit('closeLogistics')"
      mode="bottom"
      closeIconPos="top-right"
      round="28"
    >
      <view style="padding: 40rpx 28rpx; box-sizing: border-box">
        <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>
        <view
          class="u-flex"
          style="margin-top: 60rpx; flex-wrap: wrap; column-gap: 16rpx"
        >
          <view
            :class="selectedIndex == idx ? 'active' : 'unactive'"
            v-for="(item, idx) in containerList"
            :key="idx"
            @click="change(item, idx)"
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-bottom: 28rpx;
              position: relative;
            "
          >
            <image
              v-if="selectedIndex == idx"
              src="static/images/change.png"
              style="
                width: 36rpx;
                height: 32rpx;
                position: absolute;
                top: 0;
                right: 0;
              "
              mode=""
            ></image>
            <!--  v-if="language == 'zh-CN'" -->
            <view class="logname">{{ item.name_cn }}</view>
            <view class="logname" v-if="language == 'en-US'">{{
              item.name_en
            }}</view>
            <view class="logname" v-if="language == 'es-ES'">{{
              item.name_es
            }}</view>
            <view class="logname" v-if="language == 'it-IT'">{{
              item.name_ita
            }}</view>
            <!-- 						<view class="wei">¥{{goodinfo.cate==0?item.normal_delivery_fee:item.special_delivery_fee}}/kg</view> -->
            <view class="wei" style="font-size: 32rpx; font-weight: 600"
              >¥{{ item.unit_price }}/kg</view
            >
          </view>
        </view>
        <view class="nextto" @click="next">{{ i18n.next }}</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  props: {
    logisticsShow: {
      typeof: Boolean,
      default: false,
    },
    containerList: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    language: {
      typeof: String,
      default: "",
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {
      selectedIndex: 0, //选中的价格下标
      transport_type_id: "", //选中的物流id
      transportTypeName: "", //运输方式名称
    };
  },
  methods: {
    next() {
      console.log(this.transportTypeName);
      return;
      this.$emit("openContainer");
    },
    change(item, index) {
      this.transport_type_id = item.id;
      this.selectedIndex = index;
      this.transportTypeName = item.name_cn; //等待后续更改language删除掉

      if (this.language == "zh-CN") {
        this.transportTypeName = item.name_cn;
      }
      if (this.language == "en-US") {
        this.transportTypeName = item.name_en;
      }
      if (this.language == "es-ES") {
        this.transportTypeName = item.name_es;
      }
      if (this.language == "it-IT") {
        this.transportTypeName = 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%;
}
.logname {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: right;
  font-style: normal;
  overflow: hidden;
  width: 220rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  word-break: break-all;
}

.active {
  width: 218rpx;
  height: 148rpx;
  background: rgba(247, 50, 36, 0.05);
  border-radius: 8rpx;
  border: 1rpx solid #f83224;
}

.unactive {
  width: 218rpx;
  height: 148rpx;
  border-radius: 12rpx;
  border: 1rpx solid #c3c3c3;
}

.nextto {
  width: 702rpx;
  height: 84rpx;
  background: #f83224;
  border-radius: 44rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 84rpx;
  text-align: center;
  font-style: normal;
  margin-top: 108rpx;
}
</style>