|
@@ -0,0 +1,194 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="one">
|
|
|
+ <view class="one_1">
|
|
|
+ <image class="image" mode="aspectFill" :src="teamInfo.logo||'/static/qiudui.png'">
|
|
|
+ </image>
|
|
|
+ <text>邀您加入球队</text>
|
|
|
+ </view>
|
|
|
+ <view class="one_2">
|
|
|
+ <image class="image" mode="aspectFill" :src="teamInfo.logo||'/static/qiudui.png'">
|
|
|
+ </image>
|
|
|
+ <view class="name">{{teamInfo.name||'暂无名称'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="one_3">
|
|
|
+ 加入我的球队,打造百年荣耀
|
|
|
+ </view>
|
|
|
+ <view class="one_4">
|
|
|
+ <view class="list" v-for="(item, index) in teamList" :key="index">
|
|
|
+ <view class="num">{{item.num}}</view>
|
|
|
+ <view class="name">{{item.name||"暂无"}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two">用足球比赛管理球队,队长更轻松</view>
|
|
|
+ <view class="thr">
|
|
|
+ <view class="list" v-for="(item, index) in list" :key="index">
|
|
|
+ <view class="title">. {{item.title}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="four" @tap="toAdd">
|
|
|
+ <text>立即入队</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { getCurrentInstance, ref } from 'vue';
|
|
|
+ //该依赖已内置不需要单独安装
|
|
|
+ import { onLoad } from "@dcloudio/uni-app";
|
|
|
+ // 请求接口
|
|
|
+ const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
|
|
|
+ // 基本信息
|
|
|
+ const config = ref({ logoUrl: '' });
|
|
|
+ // 详情信息id
|
|
|
+ const id = ref('');
|
|
|
+ // 球队信息
|
|
|
+ const teamInfo = ref({});
|
|
|
+ // 介绍
|
|
|
+ const list = ref([{ title: '球队活动通知 无缝对接微信群助手' }, { title: '球队数据记录 考勤/胜负/进球,记录运动回忆' }, { title: '队费明细管理 缴费收费实时提醒' }, { title: '团队共享相册 高清视频相册共享管理' }]);
|
|
|
+ const teamList = ref([{ name: '入驻', num: '3年' }, { name: '|' }, { name: '活动', num: '21次' }, { name: '|' }, { name: '队员', num: '6人' }]);
|
|
|
+ onLoad(async (options) => {
|
|
|
+ id.value = options && options.id
|
|
|
+ await searchConfig();
|
|
|
+ await search();
|
|
|
+ })
|
|
|
+ // config信息
|
|
|
+ const searchConfig = async () => {
|
|
|
+ config.value = uni.getStorageSync('config');
|
|
|
+ };
|
|
|
+ // 查询
|
|
|
+ const search = async () => {
|
|
|
+ if (id.value) {
|
|
|
+ const res = await $api(`team/${id.value}`, 'GET', {});
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (res.data) teamInfo.value = res.data
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg || '',
|
|
|
+ icon: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 立即加入
|
|
|
+ const toAdd = async () => {
|
|
|
+ console.log('立即加入');
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #0bb78f;
|
|
|
+
|
|
|
+ .one {
|
|
|
+ width: 80vw;
|
|
|
+ height: 60vw;
|
|
|
+ margin: 4vw 0;
|
|
|
+ padding: 4vw 2vw;
|
|
|
+ border-radius: 2px;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .one_1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ margin: 2vw;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 10vw;
|
|
|
+ height: 10vw;
|
|
|
+ border-radius: 10vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 2vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin: 2vw 0;
|
|
|
+ font-size: var(--font14Size);
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 15vw;
|
|
|
+ height: 15vw;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_3 {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: var(--font18Size);
|
|
|
+ font-family: "Times New Roman", Times, serif;
|
|
|
+ margin: 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_4 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin: 2vw 0;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: var(--font18Size);
|
|
|
+ color: #0bb78f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: var(--font18Size);
|
|
|
+ }
|
|
|
+
|
|
|
+ .thr {
|
|
|
+ margin: 2vw 0;
|
|
|
+ font-style: italic;
|
|
|
+ font-size: var(--font14Size);
|
|
|
+
|
|
|
+ .list {
|
|
|
+ padding: 2vw;
|
|
|
+ color: var(--mainColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .four {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ font-style: italic;
|
|
|
+ color: #0bb78f;
|
|
|
+
|
|
|
+ text {
|
|
|
+ border-radius: 2px;
|
|
|
+ padding: 2vw 32vw;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|