158 lines
4.5 KiB
Vue
158 lines
4.5 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("referrerInfo.inviteRecord") }}</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("referrerInfo.inviteUserName") }}</view>
|
|
<view class="label">{{ $t("referrerInfo.invitePhone") }}</view>
|
|
<view class="label">{{ $t("referrerInfo.registrationTime") }}</view>
|
|
</view>
|
|
<view class="content-wrap">
|
|
<view class="list-wrap" v-if="state.list.length">
|
|
<view class="item-wrap" v-for="(item, index) in state.list" :key="index">
|
|
<view class="label">{{ item.customerName }}</view>
|
|
<view class="label">{{ item.phone }}</view>
|
|
<view class="label">{{ item.createTime }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty-wrap" v-else>
|
|
<view>{{ $t("referrerInfo.inviteEmpty") }}</view>
|
|
</view>
|
|
</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 { getClientCustomerApi } from "@/Apis/clientCustomer.js";
|
|
const clientCustomerApi = getClientCustomerApi();
|
|
|
|
// 接收 v-model
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const state = reactive({
|
|
list: []
|
|
});
|
|
|
|
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 = () => {
|
|
clientCustomerApi.GetMediatorUpUserList().then((res) => {
|
|
if (res.code === 200) {
|
|
state.list = res.data;
|
|
}
|
|
});
|
|
}
|
|
</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(--right-linear);
|
|
|
|
.label {
|
|
width: 33%;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
|
|
.content-wrap {
|
|
padding: 20rpx 0 40rpx;
|
|
background: #F5F5EF;
|
|
min-height: 400rpx;
|
|
max-height: 600rpx;
|
|
overflow: auto;
|
|
|
|
.list-wrap {
|
|
.item-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
|
|
.label {
|
|
width: 33%;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
color: var(--main-color);
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
background: rgba(216, 216, 216, 0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-wrap {
|
|
padding: 30rpx 0;
|
|
margin: 20rpx 30rpx 0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
border-radius: 16rpx;
|
|
color: var(--text-color);
|
|
background: var(--main-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |