VAVABUY/pages/dashboard/components/renewalModel.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">1</view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="单价" />
          </view>
          <view class="item_value">{{ symbol.symbol }} {{ Moneyhtml(6.9) }}</view>
        </view>
        <view class="form_item">
          <view class="item_label">
            30
            <trans _t="天" />
          </view>
          <view class="item_value">
            <up-number-box :min="1" :max="4" integer></up-number-box>
          </view>
        </view>
        <view class="tips">
          <trans _t="续存储期提示" />
        </view>
        <view class="total">
          <trans _t="总计" />：
          <text class="amount">{{ symbol.symbol }} {{ Moneyhtml(6.9) }}</text>
        </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 { Toast, Moneyhtml } from "@/utils"
import { t } from "@/locale"
import { useSystemStore } from "@/store";


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


const props = defineProps({
  oid: { type: String, 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');

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