|
|
@@ -10,33 +10,33 @@ import {
|
|
|
Row,
|
|
|
Tab,
|
|
|
Tabs,
|
|
|
- DatePicker
|
|
|
+ DatePicker,
|
|
|
+ Button
|
|
|
} from 'vant';
|
|
|
import MSticky from '@/components/m-sticky';
|
|
|
-// import icon1 from './images/icon1.png';
|
|
|
-// import icon2 from './images/icon2.png';
|
|
|
-// import icon3 from './images/icon3.png';
|
|
|
-// import icon4 from './images/icon4.png';
|
|
|
-// import iconTimer from './images/icon-timer.png';
|
|
|
import personIcon from './images/personIcon.png';
|
|
|
import homeIcon from './images/homeIcon.png';
|
|
|
+import memberIcon from './images/memberIcon.png';
|
|
|
import sanIcon from './images/san.png';
|
|
|
+import iconQrcode from './images/icon-qrcode.png';
|
|
|
+import qrcodeBg from './images/qrcode-bg.png';
|
|
|
+import qrbg from './images/qr-bg.png';
|
|
|
import request from '@/helpers/request';
|
|
|
import topDot from './images/topDot.png';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
-import { moneyFormat, numberFormat } from '@/helpers/utils';
|
|
|
+// import { moneyFormat, numberFormat } from '@/helpers/utils';
|
|
|
import OFullRefresh from '@/components/m-full-refresh';
|
|
|
import OEmpty from '@/components/m-empty';
|
|
|
-import arrowIcon from './images/arrowIcon.png';
|
|
|
-import OHeader from '@/components/m-header';
|
|
|
+// import arrowIcon from './images/arrowIcon.png';
|
|
|
+// import OHeader from '@/components/m-header';
|
|
|
import OSearch from '@/components/m-search';
|
|
|
import numeral from 'numeral';
|
|
|
+import MQrcode from '@/components/m-qrcode';
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
export default defineComponent({
|
|
|
name: 'tenant-apply-data',
|
|
|
setup() {
|
|
|
const route = useRoute();
|
|
|
- const router = useRouter();
|
|
|
- const tabName = ref('all');
|
|
|
const forms = reactive({
|
|
|
keyword: '',
|
|
|
id: route.query.id,
|
|
|
@@ -48,18 +48,25 @@ export default defineComponent({
|
|
|
classList: [] as any,
|
|
|
statObj: {
|
|
|
registerNum: 0,
|
|
|
- schoolNum: 0
|
|
|
+ schoolNum: 0,
|
|
|
+ registerMemberShipNum: 0
|
|
|
} as any,
|
|
|
perponStatus: false,
|
|
|
+ sortKey: 'CLASS' as 'CLASS' | 'MEMBER',
|
|
|
sortId: 'desc',
|
|
|
- sortName: '人数降序',
|
|
|
+ sortName: '班级人数降序',
|
|
|
sortList: [
|
|
|
- { value: 'desc', text: '人数降序' },
|
|
|
- { value: 'asc', text: '人数升序' }
|
|
|
+ { value: 'desc', text: '班级人数降序' },
|
|
|
+ { value: 'asc', text: '班级人数升序' },
|
|
|
+ { value: 'asc', text: '会员人数升序' },
|
|
|
+ { value: 'asc', text: '会员人数升序' }
|
|
|
] as any,
|
|
|
page: 1,
|
|
|
rows: 20,
|
|
|
- isClick: false
|
|
|
+ isClick: false,
|
|
|
+ qrcodeStatus: false,
|
|
|
+ url: '', // 二维码
|
|
|
+ urlItem: {} as any
|
|
|
});
|
|
|
|
|
|
const refreshing = ref(false);
|
|
|
@@ -145,22 +152,62 @@ export default defineComponent({
|
|
|
getList();
|
|
|
};
|
|
|
|
|
|
+ const imgs = reactive({
|
|
|
+ saveLoading: false,
|
|
|
+ image: null as any,
|
|
|
+ shareLoading: false
|
|
|
+ });
|
|
|
+ const downImg = () => {
|
|
|
+ if (imgs.saveLoading) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ imgs.saveLoading = true;
|
|
|
+ // 判断是否已经生成图片
|
|
|
+ if (imgs.image) {
|
|
|
+ saveImg();
|
|
|
+ } else {
|
|
|
+ const container: any = document.getElementById(`preview-container`);
|
|
|
+
|
|
|
+ html2canvas(container, {
|
|
|
+ allowTaint: true,
|
|
|
+ useCORS: true,
|
|
|
+ backgroundColor: null
|
|
|
+ })
|
|
|
+ .then(async canvas => {
|
|
|
+ const url = canvas.toDataURL('image/png');
|
|
|
+ imgs.image = url;
|
|
|
+ saveImg();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ imgs.saveLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const saveImg = async () => {
|
|
|
+ // showLoadingToast({ message: '图片生成中...', forbidClick: true });
|
|
|
+ setTimeout(() => {
|
|
|
+ imgs.saveLoading = false;
|
|
|
+ }, 100);
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.setAttribute('download', forms.urlItem.schoolName + '统计' + '.png');
|
|
|
+ // 添加时间戳，防止浏览器缓存图
|
|
|
+
|
|
|
+ link.href = imgs.image;
|
|
|
+ link.click();
|
|
|
+ };
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
- document.title = '学生报名统计';
|
|
|
+ if (route.query.name) {
|
|
|
+ document.title = route.query.name + '报名统计';
|
|
|
+ } else {
|
|
|
+ document.title = '学生报名统计';
|
|
|
+ }
|
|
|
+
|
|
|
// await getSchoolList();
|
|
|
await getStat();
|
|
|
await getList();
|
|
|
});
|
|
|
- const gotoDetail = (item: any) => {
|
|
|
- router.push({
|
|
|
- path: '/tenamtDataDetail',
|
|
|
- query: {
|
|
|
- id: route.query.id,
|
|
|
- schoolId: item.schoolId,
|
|
|
- schoolName: item.schoolName
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
const getStat = async () => {
|
|
|
try {
|
|
|
const { data } = await request.post(
|
|
|
@@ -180,7 +227,7 @@ export default defineComponent({
|
|
|
return () => (
|
|
|
<div class={styles.tenantAllData}>
|
|
|
{/* <OHeader isBack={false} /> */}
|
|
|
- <MSticky position='top'>
|
|
|
+ <MSticky position="top">
|
|
|
<div class={styles.top}>
|
|
|
<div class={styles.topWrap}>
|
|
|
<div class={styles.topHead}>
|
|
|
@@ -206,7 +253,6 @@ export default defineComponent({
|
|
|
<div class={styles.cardWrap}>
|
|
|
<div class={[styles.schoolCard, styles.cardItem]}>
|
|
|
<div class={styles.cardNum}>
|
|
|
- {' '}
|
|
|
{numeral(forms.statObj.schoolNum).format('0,0')}
|
|
|
</div>
|
|
|
<div class={styles.cardInfo}>
|
|
|
@@ -217,12 +263,21 @@ export default defineComponent({
|
|
|
</div>
|
|
|
<div class={[styles.studentCard, styles.cardItem]}>
|
|
|
<div class={styles.cardNum}>
|
|
|
- {' '}
|
|
|
{numeral(forms.statObj.registerNum).format('0,0')}
|
|
|
</div>
|
|
|
<div class={styles.cardInfo}>
|
|
|
<img src={personIcon} class={styles.cardInfoImg} alt="" />
|
|
|
- 报名总人数
|
|
|
+ 报名人数
|
|
|
+ </div>
|
|
|
+ <div class={styles.cardLine}></div>
|
|
|
+ </div>
|
|
|
+ <div class={[styles.memberCard, styles.cardItem]}>
|
|
|
+ <div class={styles.cardNum}>
|
|
|
+ {numeral(forms.statObj.registerMemberShipNum).format('0,0')}
|
|
|
+ </div>
|
|
|
+ <div class={styles.cardInfo}>
|
|
|
+ <img src={memberIcon} class={styles.cardInfoImg} alt="" />
|
|
|
+ 会员人数
|
|
|
</div>
|
|
|
<div class={styles.cardLine}></div>
|
|
|
</div>
|
|
|
@@ -234,7 +289,7 @@ export default defineComponent({
|
|
|
shape="round"
|
|
|
background="#F6F8F9"
|
|
|
inputBackground="white"
|
|
|
- placeholder='请输入学校名称'
|
|
|
+ placeholder="请输入学校名称"
|
|
|
onSearch={val => {
|
|
|
forms.keyword = val;
|
|
|
forms.page = 1;
|
|
|
@@ -257,8 +312,8 @@ export default defineComponent({
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </MSticky>
|
|
|
+ </div>
|
|
|
+ </MSticky>
|
|
|
|
|
|
<div class={styles.schoolList}>
|
|
|
{showContact.value ? (
|
|
|
@@ -272,19 +327,34 @@ export default defineComponent({
|
|
|
finished-text=" "
|
|
|
onLoad={getList}>
|
|
|
{list.value.map((item: any) => (
|
|
|
- <div
|
|
|
- class={styles.schoolItem}
|
|
|
- onClick={() => gotoDetail(item)}>
|
|
|
+ <div class={styles.schoolItem}>
|
|
|
<div class={styles.schoolNameWrap}>
|
|
|
- <p class={styles.title}>学校名称</p>
|
|
|
+ {/* <p class={styles.title}>学校名称</p> */}
|
|
|
<p class={styles.schoolName}>{item.schoolName}</p>
|
|
|
</div>
|
|
|
<div class={styles.schoolCountWrap}>
|
|
|
<div>
|
|
|
+ <p class={styles.personNum}>{item.registerNum || 0}</p>
|
|
|
<p class={styles.title}>报名人数</p>
|
|
|
- <p class={styles.personNum}>{item.registerNum}</p>
|
|
|
</div>
|
|
|
- <img class={[styles.arrow]} src={arrowIcon} alt="" />
|
|
|
+ <div>
|
|
|
+ <p class={styles.personNum}>
|
|
|
+ {item.registerMemberShipNum || 0}
|
|
|
+ </p>
|
|
|
+ <p class={styles.title}>会员人数</p>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ onClick={() => {
|
|
|
+ forms.qrcodeStatus = true;
|
|
|
+ forms.urlItem = item;
|
|
|
+ forms.url = `${location.origin}/classroom-app/#/tenantDataShool?id=${item.schoolId}&name=${item.schoolName}`;
|
|
|
+ }}>
|
|
|
+ <p class={styles.personNum}>
|
|
|
+ <img src={iconQrcode} />
|
|
|
+ </p>
|
|
|
+ <p class={styles.title}>学校统计二维码</p>
|
|
|
+ </div>
|
|
|
+ {/* <img class={[styles.arrow]} src={arrowIcon} alt="" /> */}
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
@@ -333,9 +403,23 @@ export default defineComponent({
|
|
|
columns={forms.sortList}
|
|
|
onCancel={() => (forms.perponStatus = false)}
|
|
|
onConfirm={(val: any) => {
|
|
|
- console.log(val);
|
|
|
const selectedOption = val.selectedOptions[0];
|
|
|
- forms.sortId = selectedOption.value;
|
|
|
+ if (
|
|
|
+ selectedOption.value === 'desc' ||
|
|
|
+ selectedOption.value === 'asc'
|
|
|
+ ) {
|
|
|
+ forms.sortId = selectedOption.value;
|
|
|
+ forms.sortKey = 'CLASS';
|
|
|
+ }
|
|
|
+ if (selectedOption.value === 'mdesc') {
|
|
|
+ forms.sortId = 'desc';
|
|
|
+ forms.sortKey = 'MEMBER';
|
|
|
+ }
|
|
|
+ if (selectedOption.value === 'masc') {
|
|
|
+ forms.sortId = 'asc';
|
|
|
+ forms.sortKey = 'MEMBER';
|
|
|
+ }
|
|
|
+
|
|
|
forms.sortName = selectedOption.text;
|
|
|
refreshing.value = true;
|
|
|
getList();
|
|
|
@@ -343,6 +427,38 @@ export default defineComponent({
|
|
|
}}
|
|
|
/>
|
|
|
</Popup>
|
|
|
+
|
|
|
+ <Popup v-model:show={forms.qrcodeStatus} class={styles.popupQrcode}>
|
|
|
+ <i
|
|
|
+ class={styles.iconClose}
|
|
|
+ onClick={() => (forms.qrcodeStatus = false)}></i>
|
|
|
+ <div class={[styles.shareContaienr]} id="preview-container">
|
|
|
+ <img src={qrcodeBg} class={styles.qrcodeBg} />
|
|
|
+ <div class={styles.sectionGroup}>
|
|
|
+ <div class={styles.section}>
|
|
|
+ <div class={styles.memo}>{forms.urlItem.schoolName}</div>
|
|
|
+ <div class={styles.qrcodeSection}>
|
|
|
+ <img src={qrbg} class={styles.qrbg} />
|
|
|
+ <MQrcode
|
|
|
+ class={styles.mqrcode}
|
|
|
+ text={forms.url}
|
|
|
+ logoSize={'small'}
|
|
|
+ size={'100%'}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ round
|
|
|
+ block
|
|
|
+ class={styles.downloadBtn}
|
|
|
+ onClick={downImg}>
|
|
|
+ 下载二维码
|
|
|
+ </Button>
|
|
|
+ </Popup>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
