|
@@ -1,40 +1,103 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="one">
|
|
|
- <view class="one_1">
|
|
|
- ·{{info.number||0}}制 | 共{{info.wheel||0}}轮
|
|
|
- </view>
|
|
|
- <view class="one_2">
|
|
|
- <view class="left">
|
|
|
- <image class="image" mode="aspectFill" :src="info?.redInfo?.logo||config.logoUrl">
|
|
|
- </image>
|
|
|
- <view class="name">{{info?.redInfo?.name||'暂无红方名称'}}</view>
|
|
|
- </view>
|
|
|
- <view class="center">{{info.redScore||0}} : {{info.blueScore||0}}</view>
|
|
|
- <view class="right">
|
|
|
- <image class="image" mode="aspectFill" :src="info?.blueInfo?.logo||config.logoUrl">
|
|
|
- </image>
|
|
|
- <view class="name">{{info?.blueInfo?.name||'暂无蓝方名称'}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="one_3">
|
|
|
- <text>{{getDayOfWeek(info.startTime)}}</text>
|
|
|
- {{info.time||'暂无时间'}}
|
|
|
- </view>
|
|
|
- <view class="one_4 textOne"><text>{{info?.matchInfo?.address||'暂无地点'}}</text> </view>
|
|
|
- </view>
|
|
|
- <view class="position">
|
|
|
- <view class="two">
|
|
|
- <uni-segmented-control :current="current" :values="list" @clickItem="onClickItem" styleType="text"
|
|
|
- activeColor="#dd524d"></uni-segmented-control>
|
|
|
- <view class="two_1">
|
|
|
- <view v-show="current === 0">
|
|
|
- 出勤报名
|
|
|
+ <view class="info">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-view">
|
|
|
+ <view class="list-scroll-view">
|
|
|
+ <view class="one">
|
|
|
+ <view class="one_1" v-if="info.status=='0'&&info.type=='0'">
|
|
|
+ <text>约战</text> ·{{getNumber(info?.matchInfo?.number)}}
|
|
|
+ </view>
|
|
|
+ <view class="one_1" v-else>
|
|
|
+ ·{{info.number||0}}制 | 共{{info.wheel||0}}轮
|
|
|
+ </view>
|
|
|
+ <view class="one_2">
|
|
|
+ <view class="left">
|
|
|
+ <image class="image" mode="aspectFill" :src="info?.redInfo?.logo||config.logoUrl">
|
|
|
+ </image>
|
|
|
+ <view class="name">{{info?.redInfo?.name||'暂无红方名称'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="left" v-if="info.status=='0'">等待对手确认</view>
|
|
|
+ <view class="center" v-else>{{info.redScore||0}} : {{info.blueScore||0}}</view>
|
|
|
+ <view class="right">
|
|
|
+ <image class="image" mode="aspectFill" :src="info?.blueInfo?.logo||config.logoUrl">
|
|
|
+ </image>
|
|
|
+ <view class="name">{{info?.blueInfo?.name||'暂无蓝方名称'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="one_3">
|
|
|
+ <text>{{getDayOfWeek(info.startTime)}}</text>
|
|
|
+ {{info.time||'暂无时间'}}
|
|
|
+ </view>
|
|
|
+ <view class="one_4 textOne"><text>{{info?.matchInfo?.address||'暂无地点'}}</text> </view>
|
|
|
</view>
|
|
|
- <view v-show="current === 1">
|
|
|
- 数据统计
|
|
|
+ <view class="position">
|
|
|
+ <view class="two">
|
|
|
+ <uni-segmented-control :current="current" :values="list" @clickItem="onClickItem"
|
|
|
+ styleType="text" activeColor="#dd524d"></uni-segmented-control>
|
|
|
+ <view class="two_1">
|
|
|
+ <view v-show="current === 0">
|
|
|
+ <view class="enroll">
|
|
|
+ <view class="left" @tap="toInfo('未回应队员')">
|
|
|
+ 未回应<text> {{info?.matchInfo?.member||'0'}}</text>人
|
|
|
+ <uni-icons type="right" size="20" color="#999999"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <button type="primary" size="mini" open-type="share"
|
|
|
+ style="font-size: 12px;border-radius: 20px;line-height: 2;">
|
|
|
+ <uni-icons type="redo-filled" size="15" color="#ffffff"></uni-icons>
|
|
|
+ 分享
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="enroll p4" @tap="toInfo('已回应队员')">
|
|
|
+ <view class="left">
|
|
|
+ 已回应<text> {{info?.matchInfo?.member||'0'}}</text>人
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <uni-icons type="right" size="20" color="#999999"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="count">
|
|
|
+ <view class="count_1">
|
|
|
+ <view class="left"><text>报名</text></view>
|
|
|
+ <view class="right">
|
|
|
+ <text style="color: red;">{{info?.matchInfo?.member||'0'}}</text>
|
|
|
+ <text>人</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="count_1">
|
|
|
+ <view class="left"><text>请假</text></view>
|
|
|
+ <view class="right">
|
|
|
+ <text style="color: red;">{{info?.matchInfo?.member||'0'}}</text>
|
|
|
+ <text>人</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-show="current === 1">
|
|
|
+ 数据统计
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="foot" v-if="info.status=='0'||info.status=='1'">
|
|
|
+ <view class="left">
|
|
|
+ <view class="left_1">
|
|
|
+ <uni-icons @tap="toEdit" type="compose" size="20" color="#696969"></uni-icons>
|
|
|
+ <text>编辑</text>
|
|
|
+ </view>
|
|
|
+ <view class="left_1">
|
|
|
+ <uni-icons @tap="toCopy" custom-prefix="iconfont" type="icon-icon_cz" size="20"
|
|
|
+ color="#696969"></uni-icons>
|
|
|
+ <text>复用</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <button class="button1" type="warn" size="mini" @tap="onLeave">请假</button>
|
|
|
+ <button class="button2" type="warn" size="mini" @tap="onEnroll">报名</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -47,6 +110,7 @@
|
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
|
// 请求接口
|
|
|
const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
|
|
|
+ const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
|
|
|
// 基本信息
|
|
|
const config = ref({ logoUrl: '' });
|
|
|
const info = ref({});
|
|
@@ -54,14 +118,32 @@
|
|
|
const current = ref(0);
|
|
|
// 详情信息id
|
|
|
const id = ref('');
|
|
|
+ // 用户信息
|
|
|
+ const user = ref({});
|
|
|
+ // 字典表
|
|
|
+ const numberList = ref([]);
|
|
|
onLoad(async (options) => {
|
|
|
id.value = options && options.id
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: options && options.name || '活动详情'
|
|
|
});
|
|
|
+ await searchUser();
|
|
|
+ await searchOther();
|
|
|
await searchConfig();
|
|
|
await search();
|
|
|
+ await searchShare();
|
|
|
})
|
|
|
+ // 用户信息
|
|
|
+ const searchUser = async () => {
|
|
|
+ user.value = uni.getStorageSync('user');
|
|
|
+ };
|
|
|
+ // 查询其他信息
|
|
|
+ const searchOther = async () => {
|
|
|
+ let res;
|
|
|
+ // 赛制
|
|
|
+ res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_match_number', status: '0' });
|
|
|
+ if (res.code === 200 && res.total > 0) numberList.value = res.rows
|
|
|
+ };
|
|
|
// config信息
|
|
|
const searchConfig = async () => {
|
|
|
config.value = uni.getStorageSync('config');
|
|
@@ -99,6 +181,42 @@
|
|
|
return weekdays[dayOfWeek];
|
|
|
} else return '暂无日期';
|
|
|
};
|
|
|
+ // 换字典表
|
|
|
+ const getNumber = (value) => {
|
|
|
+ if (value) {
|
|
|
+ const data = numberList.value.find(i => i.dictValue == value)
|
|
|
+ if (data) return data.dictLabel
|
|
|
+ } else return 0;
|
|
|
+ };
|
|
|
+ // 查看队员
|
|
|
+ const toInfo = (name : string) => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pagesHome/enroll/index?id=${info.value.id}&name=${name || ''}`,
|
|
|
+ })
|
|
|
+ };
|
|
|
+ // 编辑
|
|
|
+ const toEdit = async () => {
|
|
|
+ console.log('编辑');
|
|
|
+ };
|
|
|
+ // 复用
|
|
|
+ const toCopy = async () => {
|
|
|
+ console.log('复用');
|
|
|
+ };
|
|
|
+ // 请假
|
|
|
+ const onLeave = async () => {
|
|
|
+ console.log('请假');
|
|
|
+ };
|
|
|
+ // 报名
|
|
|
+ const onEnroll = async () => {
|
|
|
+ console.log('报名');
|
|
|
+ };
|
|
|
+ // 邀请分享配置
|
|
|
+ const searchShare = () => {
|
|
|
+ $config.share = {
|
|
|
+ title: `${user.value.name || '暂无名称'}邀请你报名${info.value.title || '暂无比赛名称'}`,
|
|
|
+ path: `/pagesHome/share/index?id=${info.value.id}` //后面是路径上要传递的参数
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.content {
|
|
@@ -107,97 +225,199 @@
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
|
|
|
- .one {
|
|
|
- background-color: var(--f12Color);
|
|
|
- padding: 0 0 10vw 0;
|
|
|
+ .info {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
|
|
|
- .one_1 {
|
|
|
- padding: 2vw;
|
|
|
- text-align: center;
|
|
|
- font-size: var(--font14Size);
|
|
|
- color: var(--f99Color);
|
|
|
- }
|
|
|
+ .one {
|
|
|
+ background-color: var(--f12Color);
|
|
|
+ padding: 0 0 10vw 0;
|
|
|
|
|
|
- .one_2 {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- color: var(--mainColor);
|
|
|
+ .one_1 {
|
|
|
+ padding: 2vw;
|
|
|
+ text-align: center;
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f99Color);
|
|
|
+ }
|
|
|
|
|
|
- .left {
|
|
|
+ .one_2 {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
align-items: center;
|
|
|
+ color: var(--mainColor);
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 12vw;
|
|
|
+ height: 12vw;
|
|
|
+ border-radius: 12vw;
|
|
|
+ }
|
|
|
|
|
|
- .image {
|
|
|
- width: 12vw;
|
|
|
- height: 12vw;
|
|
|
- border-radius: 12vw;
|
|
|
+ .name {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .name {
|
|
|
- margin: 2vw 0 0 0;
|
|
|
+ .center {
|
|
|
+ font-size: 25px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .center {
|
|
|
- font-size: 25px;
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 12vw;
|
|
|
+ height: 12vw;
|
|
|
+ border-radius: 12vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
+ .one_3 {
|
|
|
+ color: var(--mainColor);
|
|
|
+ text-align: center;
|
|
|
+ padding: 2vw;
|
|
|
+ font-size: var(--font16Size);
|
|
|
|
|
|
- .image {
|
|
|
- width: 12vw;
|
|
|
- height: 12vw;
|
|
|
- border-radius: 12vw;
|
|
|
+ text {
|
|
|
+ padding: 2px 5px;
|
|
|
+ background-color: rgba(105, 105, 105, 0.9);
|
|
|
+ border-radius: 2vw;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .name {
|
|
|
- margin: 2vw 0 0 0;
|
|
|
+ .one_4 {
|
|
|
+ text-align: center;
|
|
|
+ margin: 2vw;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ padding: 2px 5px;
|
|
|
+ background-color: rgba(105, 105, 105, 0.9);
|
|
|
+ border-radius: 10vw;
|
|
|
+ color: var(--mainColor);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .one_3 {
|
|
|
- color: var(--mainColor);
|
|
|
- text-align: center;
|
|
|
- padding: 2vw;
|
|
|
- font-size: var(--font16Size);
|
|
|
+ .position {
|
|
|
+ position: absolute;
|
|
|
+ top: 50vw;
|
|
|
+
|
|
|
+ .two {
|
|
|
+ width: 100vw;
|
|
|
+ border-top-left-radius: 25px;
|
|
|
+ border-top-right-radius: 25px;
|
|
|
+ background-color: var(--mainColor);
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+
|
|
|
+ .enroll {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 2vw 4vw;
|
|
|
+ align-items: center;
|
|
|
+ border-top: 1px solid var(--footColor);
|
|
|
|
|
|
- text {
|
|
|
- padding: 2px 5px;
|
|
|
- background-color: rgba(105, 105, 105, 0.9);
|
|
|
- border-radius: 2vw;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: var(--fF0Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .p4 {
|
|
|
+ padding: 4vw;
|
|
|
+ border-bottom: 1px solid var(--footColor);
|
|
|
+ }
|
|
|
+
|
|
|
+ .count {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 2vw 4vw;
|
|
|
+
|
|
|
+ .count_1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 35vw;
|
|
|
+ padding: 4vw;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ background-color: var(--footColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .one_4 {
|
|
|
- text-align: center;
|
|
|
- margin: 2vw;
|
|
|
+ .foot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 2vw;
|
|
|
+ border-top: 1px solid var(--footColor);
|
|
|
|
|
|
- text {
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .left_1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 2vw;
|
|
|
font-size: var(--font14Size);
|
|
|
- padding: 2px 5px;
|
|
|
- background-color: rgba(105, 105, 105, 0.9);
|
|
|
- border-radius: 10vw;
|
|
|
- color: var(--mainColor);
|
|
|
+ color: var(--f69Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin: 2px 0 0 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .position {
|
|
|
- position: absolute;
|
|
|
- top: 50vw;
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .button1 {
|
|
|
+ margin: 0 2vw 0 0;
|
|
|
+ width: 20vw;
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ background-color: var(--f12Color);
|
|
|
+ }
|
|
|
|
|
|
- .two {
|
|
|
- width: 100vw;
|
|
|
- border-top-left-radius: 25px;
|
|
|
- border-top-right-radius: 25px;
|
|
|
- background-color: var(--mainColor);
|
|
|
+ .button2 {
|
|
|
+ width: 50vw;
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .list-scroll-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|