VAVABUY/pages/index/components/logistics_list.vue

<template>
  <view class="logistics_list">
    <view class="logistics_top" @click="selectRadio(item.id)">
      <view class="logistics_top_left">
        <view class="avater">
          <image class="img" :src="item.express?.icon"></image>
        </view>
        <view class="left_box">
          <view class="title">{{ item.express?.name }}</view>
          <view class="freight"> <trans _t="运费" />: </view>
          <view class="amount">{{ symbol.symbol }}{{ item.first_price }}</view>
        </view>
      </view>
      <view class="logistics_top_right">
        <view class="period"> <trans _t="邮寄周期" />： </view>
        <view class="days">{{ item.expdays }}</view>
      </view>
    </view>
    <view class="logistics_bottom">
      <up-collapse :border="false">
        <up-collapse-item :border="false">
          <template #title>
            <view class="logistics_bottom_title">
              <image src="/static/shop/parcel.png" class="parcel" />
              <trans _t="报价说明" />
            </view>
          </template>
          <template #value>
            <view class="logistics_bottom_value">
              <trans _t="详情" />
            </view>
          </template>
          <text class="u-collapse-content">{{ item.content }}</text>
        </up-collapse-item>
      </up-collapse>
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { t } from "@/locale";
import { useSystemStore } from "@/store";

const useSystem = useSystemStore();
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const symbol = computed(() => useSystem.getSymbol);

const emit = defineEmits(["change"]);
function selectRadio(id) {
  emit("change", id);
}
</script>
<style lang="less" scoped>
@import url("@/style.less");

.logistics_list {
  padding: 16rpx;
  border: 1rpx solid var(--borderColor);
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  .logistics_top {
    .hor(space-between);

    &_left {
      .flex();

      .avater {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 12rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .left_box {
        .title {
          .size(28rpx);
          font-weight: 600;
        }

        .freight {
          .size(22rpx);
          margin: 8rpx 0;
        }

        .amount {
          .size(24rpx);
          color: var(--red);
          font-weight: 600;
        }
      }
    }

    &_right {
      text-align: center;
      .size(22rpx);

      .radio {
        .hor(flex-end);
      }

      .period {
        margin: 8rpx 0;
      }

      .days {
      }
    }
  }

  .logistics_bottom {
    padding: 16rpx 0 0 92rpx;

    &_title {
      .ver();
      .size(22rpx);
      color: var(--text-01);

      .parcel {
        width: 22rpx;
        height: 22rpx;
        margin-right: 8rpx;
      }
    }

    &_value {
      .size(22rpx);
      color: var(--text-01);
    }

    /deep/ .u-cell__body {
      padding: 0;
    }
  }
}
</style>