VAVABUY/pages/user/components/codeModel.vue

<template>
  <Popup title="兑换码" isClose ref="popRef" mode="center">
    <template #content>
      <view class="form">
        <view class="form_item">
          <view class="item_label">
            {{ deatil.code }}
          </view>
          <view class="item_value">
            <up-copy :content="deatil.code" :notice="t('复制成功')">
              <trans _t="复制" />
            </up-copy>
          </view>
        </view>
      </view>
    </template>

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

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

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

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

const popRef = ref(null);

const open = (type = 0) => {
  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");

:deep(.conts) {
  min-width: 90vw;
  max-width: 90vw;
}

.form {
  width: 100%;
  padding: 40rpx 0;
  &_item {
    width: 100%;
    .flex_position(space-between);
    .size(28rpx);
    margin-top: 24rpx;

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

    .item_label {
      .size(32rpx);
    }

    .item_value {
      color: var(--red);
    }
  }

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