Skip to content

Great Teamwork
Great Teamwork

_milo / Great Teamwork

通知 13
Star 0
Fork 0
Great Teamwork
Great Teamwork
提交 d42d1a98 编写于 作者: 2 222000134
浏览文件
操作

小队完成活动详情，活动列表，报名活动，退出队伍，成员列表，交互均完成

上级 6035098c
隐藏空白更改
内联 并排
Showing with 473 addition and 14 deletion
teamwork/pages.json
浏览文件 @ d42d1a98
......@@ -94,6 +94,16 @@
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/team/member-list",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/team/activity-detail",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/my/main",
"style": {
......
teamwork/pages/team/activity-detail.vue 0 → 100644
浏览文件 @ d42d1a98
<template>
<view>
<view class="detail">
<view class="top">
<image class="back" src="/static/login/returnBack.png" @click="goBack()"></image>
<view class="title">活动详情</view>
<span class="empty"></span>
</view>
<view class="icon-with-name">
<image :src="icon" class="icon" />
<text class="name">{{name}}</text>
</view>
<view class="activity-production">
<image class="activity-production-icon" src="/static/discover/production.png"></image>
<text class="activity-production-text">活动内容:</text>
<view class="production-detail">{{production}}</view>
</view>
<view class="activity-time">
<image class="activity-production-icon" src="/static/discover/time.png"></image>
<text class="activity-time-text">活动开始时间:</text>
<view class="production-detail">{{startDate}}</view>
</view>
<view class="activity-time">
<image class="activity-production-icon" src="/static/discover/time.png"></image>
<text class="activity-time-text">活动结束时间:</text>
<view class="production-detail">{{endDate}}</view>
</view>
<view class="activity-place">
<image class="activity-production-icon" src="/static/discover/place.png"></image>
<text class="activity-place-text">活动地点:</text>
<view class="production-detail">{{place}}</view>
</view>
<view class="activity-object">
<image class="activity-production-icon" src="/static/discover/object.png"></image>
<text class="activity-object-text">参与人数:</text>
<view class="production-detail">{{object}}</view>
</view>
<view class="activity-contact">
<image class="activity-production-icon" src="/static/discover/contact.png"></image>
<text class="activity-contact-text">联系方式:</text>
<view class="production-detail">{{contact}}</view>
</view>
</view>
<view class="btn">
<button class="loginButton" @click="apply()">报名</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userId: '644a643a0c801ca878983559',
icon: '/static/icon/1.png',
activityId: '64508598819ce8deee7ed255',
name: '不会取名字',
production: '111111111111111111111111111111111111111111',
object: 0,
startDate: '2023-05-03 19:00',
endDate: '2023-05-03 19:00',
place: '风雨操场',
contact: '1612737522@qq.com',
applyCode:200
}
},
methods: {
goBack() {
uni.reLaunch({
url: '/pages/team/main',
animationType: 'pop-in',
animationDuration: 300
})
},
apply(){
uniCloud.callFunction({
name: 'fe-team-applyActivity',
data: {
userId:this.userId,
activityId: this.activityId
}
})
.then(res => {
console.log(res),
this.applyCode = res.result.code,
console.log(res.result.message),
console.log(this.applyCode)
})
if(this.applyCode==200){
uni.showToast({
title: '报名成功',
duration: 2000
});
}
else{
uni.showToast({
title: '您已报名，请勿重复报名',
duration: 2000
});
}
}
},
onLoad(option) {
this.activityId=option.activityId
console.log(option.activityId)
uniCloud.callFunction({
name: 'fe-team-activityDetail',
data: {
activityId: this.activityId
}
})
.then(res => {
console.log(res),
this.name = res.result.data.username,
this.production = res.result.data.content,
this.startDate = res.result.data.startDate,
this.endDate = res.result.data.endDate,
this.object = res.result.data.participants,
this.place = res.result.data.place,
this.contact = res.result.data.contact,
this.icon = res.result.data.icon
})
}
}
</script>
<style>
.returnBack {
height: 55rpx;
width: 55rpx;
margin-top: 60rpx;
margin-left: 20rpx;
margin-right: auto;
}
.top {
width: 100%;
height: 50px;
background-color: #EDEEF0;
text-align: center;
}
.back {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
margin-left: 10px;
}
.empty {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: right;
margin-right: 10px;
}
.title {
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: #f1992d;
display: inline-block;
}
.icon-with-name {
width: 100%;
height: 45px;
margin-left: 10px;
margin-top: 15px;
margin-bottom: 20px;
float: left;
overflow: auto;
}
.icon {
width: 45px;
height: 45px;
border-radius: 50%;
float: left;
}
.out-team {
float: right;
margin-right: 30px;
width: 30px;
margin-top: 11px;
height: 30px;
}
.name {
float: left;
margin-bottom: auto;
margin-left: 10px;
margin-top: 9px;
font-size: 18px;
font-weight: bold;
width: 60%;
}
.activity-production {
margin-top: 10px;
}
.activity-production-text {
font-weight: bold;
}
.activity-object {
margin-top: 10px;
}
.activity-object-text{
font-weight: bold;
}
.activity-contact-text {
font-weight: bold;
}
.activity-time {
margin-top: 10px;
}
.activity-time-text {
font-weight: bold;
}
.activity-place {
margin-top: 10px;
}
.activity-place-text {
font-weight: bold;
}
.activity-contact {
margin-top: 10px;
}
.activity-contact-text {
font-weight: bold;
}
.activity-production-icon {
width: 40px;
height: 40px;
margin-left: 30px;
}
.production-detail {
width: 90%;
background-color: rgb(245 154 35 / 30%);
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
padding: 10px;
/* 文字换行处理 */
word-wrap: break-word;
word-break: break-all;
}
.loginButton {
width: 50%;
background-color: #f1992d;
color: #fff;
border: 0;
border-radius: 15px;
margin-top: 30px;
margin-bottom: 15px;
}
.loginButton::after {
border: 0;
}
</style>
\ No newline at end of file
teamwork/pages/team/main.vue
浏览文件 @ d42d1a98
......@@ -19,11 +19,12 @@
<!-- 我的小队 -->
<view v-if="current == 0">
<view class="icon-with-name">
<image src="../../static/icon/1.png" class="icon" />
<text class="name">{{name}}</text>
<image :src="icon" class="icon" @click="showMember" />
<text class="name" @click="showMember">{{name}}</text>
<image src="../../static/team/out.png" class="out-team" @click="toggleMessage()" />
</view>
<view class="content" v-if="join==null">
<view class="one-activity" v-for="item in activityList">
<view class="one-activity" v-for="item in activityList" @click="showActivityDetail(item.activityId)">
<image class="horn-icon" :src="'../../static/team/horn.png'"
style="width: 60px;height: 60px;margin-left: 10px;" />
<text class="text-content">{{item.title}}</text>
......@@ -33,17 +34,19 @@
<view class="no-join">
<view class="nojoin-icon-view">
<image class="nojoin-icon" :src="'../../static/team/nojoin.png'"
style="width: 230px;height: 200px;" />
style="width: 230px;height: 200px;" />
</view>
<view class="text-no-view">
<text class="text-no">您还没有加入任何小队哦~-</text>
</view>
</view>
</view>
<uni-popup ref="popupDialog" type="dialog">
<uni-popup-dialog title="提示" content="是否确定退出小队？" :before-close="true" @confirm="dialogConfirm"
@close="dialogClose" />
</uni-popup>
</view>
<!-- 加入小队 -->
<view v-if="current == 1">
......@@ -61,10 +64,11 @@
data() {
return {
icon:'/static/icon/1.png',
current: 0,
show: false,
value1: "",
join: 'true',
join: null,
userId: '644a643a0c801ca878983559',
list: [{
name: '我的小队'
......@@ -83,11 +87,44 @@
]
};
},
methods: {
tabChange(index) {
this.current = index.index;
},
showActivityDetail(activityId){
uni.reLaunch({
url: '/pages/team/activity-detail?activityId='+activityId,
animationType: 'pop-in',
animationDuration: 300
})
},
showMember(){
uni.reLaunch({
url: '/pages/team/member-list',
animationType: 'pop-in',
animationDuration: 300
})
},
toggleMessage() {
this.$refs['popupDialog'].open();
},
dialogConfirm() {
uniCloud.callFunction({
name: 'fe-team-leaveTeam',
data: {
userId: this.userId
}
})
.then(res => {
console.log(res)
this.join = false
console.log(this.join)
})
this.$refs['popupDialog'].close();
},
dialogClose() {
this.$refs.popupDialog.close();
},
},
onLoad() {
......@@ -102,6 +139,7 @@
this.name = res.result.data.username,
this.activityList = res.result.data.activityList,
this.join = res.result.join,
this.icon = res.result.data.icon
console.log(this.join)
})
}
......@@ -114,7 +152,7 @@
}
.icon-with-name {
width: 80%;
width: 100%;
height: 45px;
margin-left: 10px;
margin-top: 15px;
......@@ -131,6 +169,14 @@
float: left;
}
.out-team {
float: right;
margin-right: 30px;
width: 30px;
margin-top: 11px;
height: 30px;
}
.name {
float: left;
margin-bottom: auto;
......@@ -175,28 +221,33 @@
justify-content: center;
word-wrap: break-word;
}
.text-no{
.text-no {
font-weight: bold;
display: flex;
margin: auto;
flex-direction: column;
color: #F1992D;
}
.horn-icon {
flex-shrink: 0;
margin: auto 0;
}
.nojoin-icon{
.nojoin-icon {
display: flex;
flex-direction: column;
margin: auto;
display: block;
}
.nojoin-icon-view{
.nojoin-icon-view {
margin-top: 50px;
}
.text-no-view{
.text-no-view {
margin: 30px auto;
}
</style>
\ No newline at end of file
teamwork/pages/team/member-list.vue 0 → 100644
浏览文件 @ d42d1a98
<template>
<view>
<view class="top">
<image class="back" src="/static/login/returnBack.png" @click="goBack()"></image>
<view class="title">成员列表</view>
<span class="empty"></span>
</view>
<view class="memList" v-for="(item,index) in memList" :key="index">
<image class="icon" :src="item.memberIcon"></image>
<view class="membername">{{item.memberName}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userId: '644a643a0c801ca878983559',
memList: [{
memberIcon: '/static/icon/1.png',
memberName: "不会取名字",
},{
memberIcon: '/static/sport/icon.jpg',
memberName: "不会取名字",
}]
}
},
methods: {
goBack() {
uni.reLaunch({
url: '/pages/team/main',
animationType: 'pop-in',
animationDuration: 300
})
}
},
onLoad() {
uniCloud.callFunction({
name: 'fe-team-memberList',
data: {
userId: this.userId
}
})
.then(res => {
console.log(res),
this.memList = res.result.data
})
}
}
</script>
<style>
.returnBack {
height: 55rpx;
width: 55rpx;
margin-top: 60rpx;
margin-left: 20rpx;
margin-right: auto;
}
.top {
width: 100%;
height: 50px;
background-color: #EDEEF0;
text-align: center;
}
.back {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
margin-left: 10px;
}
.empty {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: right;
margin-right: 10px;
}
.title {
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: #f1992d;
display: inline-block;
}
.memList{
margin-top: 20px;
}
.icon{
position: relative;
top:2px;
left: 38px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.membername{
display: inline;
position: relative;
font-size: 20px;
font-weight: bold;
bottom: 20px;
left: 48px;
color: #7F7F7F;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或