VAVABUY/pages/dashboard/components/packModel.vue

<template>
  <Popup title="明细" isClose ref="popRef">
    <template #content>
      <view class="form">
        <view class="form_item">
          <view class="item_label">
            <trans _t="总体积" />
          </view>
          <view class="item_value">{{ deatil.volume }}m³</view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="总重量" />
          </view>
          <view class="item_value">{{ deatil.weight }}kg</view>
        </view>

        <view class="form_item">
          <view class="item_label">
            <trans _t="首重费用" />
          </view>
          <view class="item_value"
            >{{ symbol.symbol }} {{ Moneyhtml(deatil.first_price) }}</view
          >
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="续重费用" />
          </view>
          <view class="item_value"
            >{{ symbol.symbol }} {{ Moneyhtml(deatil.continue_price) }}</view
          >
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="折扣" />
          </view>
          <view class="item_value"
            >{{ symbol.symbol }} {{ Moneyhtml(deatil.discount) }}</view
          >
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="运费" />
          </view>
          <view class="item_value"
            >{{ symbol.symbol }} {{ Moneyhtml(deatil.postAmt) }}</view
          >
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="预估费用" />
          </view>
          <view class="item_value"
            >{{ symbol.symbol }} {{ Moneyhtml(deatil.money) }}</view
          >
        </view>
      </view>
    </template>

    <!-- footer -->
    <template #footer>
      <view class="submit_btn" @click="close">
        <trans _t="关闭" />
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { computed, ref, nextTick } from "vue";
import Popup from "@/components/popup.vue";
import { Toast, Moneyhtml } from "@/utils";
import { t } from "@/locale";
import { useSystemStore } from "@/store";

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);

const props = defineProps({
  deatil: { type: Object, default: {} },
});

const emit = defineEmits(["open", "close"]);

const popRef = ref(null);

const open = () => {
  emit("open");
  popRef.value && popRef.value.open();
};

const close = () => {
  emit("close");
  popRef.value && popRef.value.close();
};

defineExpose({ open, close });
</script>


<style lang="less" scoped>
@import url("@/style.less");

.form {
  width: 100%;

  &_item {
    width: 100%;
    .flex_position(space-between);
    color: var(--text-02);
    .size(24rpx);
    margin-top: 24rpx;

    &:first-child {
      margin-top: 0;
    }

    .item_label {
    }

    .item_value {
    }
  }

  .tips {
    color: var(--text-01);
    .size(24rpx);
    margin: 24rpx 0;
  }

  .total {
    text-align: right;
    color: var(--black);
    .size(28rpx);

    .amount {
      color: var(--red);
      font-weight: 700;
      margin-left: 2rpx;
    }
  }
}

.submit_btn {
  height: 38px;
  padding: 16rpx 30rpx;
  background-color: var(--black);
  color: var(--light);
  .flex_center();
  border-radius: 16rpx;
  .size(24rpx);
}
</style>