163 lines
4.7 KiB
Vue
163 lines
4.7 KiB
Vue
<template>
|
|
<view class="invite-wrap">
|
|
<myPopup v-model="modelValue" mode="bottom" bgColor="none" customStyle="max-height: 70vh; border-radius: 15px 15px 0 0;"
|
|
:closeOnClickOverlay='true'>
|
|
<view class="inner-wrap">
|
|
<view class="title">{{ $t('inviteDetail.title') }}</view>
|
|
<view class="close-icon" @click="closeShow">
|
|
<uv-icon name="close" size="10" :color="themeInfo.activeColor"></uv-icon>
|
|
</view>
|
|
<view class="top-nav">
|
|
<view class="label">{{ $t('inviteDetail.Username') }}</view>
|
|
<view class="label">{{ $t('inviteDetail.Registration Date') }}</view>
|
|
<view class="label">{{ $t('inviteDetail.Status') }}</view>
|
|
</view>
|
|
<view class="content-wrap">
|
|
<view class="list-wrap" v-if="state.list.length">
|
|
<view class="item-wrap" v-for="item in state.list">
|
|
<view class="label">{{ item.name }}</view>
|
|
<view class="label">{{ item.createTime }}</view>
|
|
<view class="label">{{ item.status }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty-wrap" v-else>
|
|
<view>{{ $t('inviteDetail.No invitation') }}</view>
|
|
</view>
|
|
<button open-type="share" class="share-btn">{{ $t('inviteDetail.Share Invitation') }}</button>
|
|
</view>
|
|
</view>
|
|
</myPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import myPopup from './myPopup.vue';
|
|
import { reactive, watch, computed } from 'vue';
|
|
import { useMainStore } from "@/store/index.js";
|
|
const { themeInfo } = useMainStore();
|
|
|
|
import { useRecommend } from "@/Apis/recommend.js";
|
|
const getApi = useRecommend();
|
|
// 接收 v-model
|
|
const props = defineProps({
|
|
modelValue:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const modelValue = computed({
|
|
get() {
|
|
return props.modelValue;
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value);
|
|
}
|
|
})
|
|
watch(() => modelValue.value, (value) => {
|
|
value && getRecommend()
|
|
})
|
|
|
|
const closeShow = () => {
|
|
modelValue.value = false;
|
|
}
|
|
const getRecommend = () => {
|
|
getApi.GetRecommend().then((res) => {
|
|
if(res.code === 200){
|
|
state.list = res.data;
|
|
}
|
|
});
|
|
}
|
|
|
|
const state = reactive({
|
|
list: []
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.invite-wrap {
|
|
.inner-wrap {
|
|
position: relative;
|
|
|
|
.title {
|
|
padding: 40rpx 0;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
background: var(--main-color);
|
|
}
|
|
|
|
.close-icon {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 30rpx;
|
|
padding: 6rpx;
|
|
border-radius: 50%;
|
|
background: rgba($color: #FFFFFF, $alpha: 0.6);
|
|
}
|
|
|
|
.top-nav {
|
|
display: flex;
|
|
padding: 16rpx 0;
|
|
background: var(--main-color);
|
|
|
|
.label {
|
|
width: 33.33%;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
|
|
.content-wrap {
|
|
padding: 20rpx 0 40rpx;
|
|
background: #FFFFFF;
|
|
|
|
.list-wrap {
|
|
max-height: 460rpx;
|
|
overflow: auto;
|
|
|
|
.item-wrap {
|
|
display: flex;
|
|
padding: 16rpx 0;
|
|
|
|
.label {
|
|
width: 33.33%;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-wrap {
|
|
padding: 30rpx 0;
|
|
margin: 20rpx 30rpx 0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
border-radius: 16rpx;
|
|
background: var(--main-color);
|
|
|
|
.en {
|
|
margin-top: 20rpx;
|
|
font-size: 16rpx;
|
|
}
|
|
}
|
|
|
|
.share-btn {
|
|
margin: 40rpx 40rpx 0;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
border-radius: 40rpx;
|
|
color: var(--text-color);
|
|
background: var(--main-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |