VAVABUY/pages/dashboard/components/logistics_list.vue

<template>
  <view class="logistics_list" :class="isShowBottom ? 'border_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">
        <up-radio :name="item.id" class="radio" shape="circle" v-if="isShowBottom"></up-radio>
        <view class="period">
          <trans _t="邮寄周期" />：
        </view>
        <view class="days">{{ item.expdays }}</view>
      </view>
    </view>
    <view class="logistics_bottom" v-if="isShowBottom">
      <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: () => ({})
  },
  isShowBottom: {
    type: Boolean,
    default: true
  }
})
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 0;

  &.border_list {
    border-bottom: 1rpx solid var(--borderColor);
  }

  .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>