提交 d46773c2 编写于 作者: 赵十四's avatar 赵十四

Merge branch 'frontend' of https://gitcode.net/qq_50679803/great-teamwork into frontend

<template>
<view>
<view @click="goTeamAdd" class="add-team">
<u-icon name="plus" color="#F1992D" size="40"></u-icon>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
goTeamAdd() {
uni.navigateTo({
url: '/pages/team/add-team'
})
}
}
}
</script>
<style lang="scss" scoped>
.add-team {
position: fixed;
right: 20rpx;
bottom: 180rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 20rpx #999;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<template>
<view class="container">
<view class="ui-all">
<view class="avatar" @tap="avatarChoose">
<view class="imgAvatar">
<view class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'"></view>
</view>
<text v-if="avater">修改头像</text>
<text v-if="!avater">授权微信</text>
<button v-if="!avater" open-type="getUserInfo" @tap="getUserInfo" class="getInfo"></button>
</view>
<view class="ui-list">
<text>昵称</text>
<input type="text" :placeholder="value" :value="nickName" @input="bindnickName" placeholder-class="place" />
</view>
<view class="ui-list">
<text>手机号</text>
<input v-if="mobile" type="tel" :placeholder="value" :value="mobile" @input="bindmobile" placeholder-class="place" />
<button v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="getInfo bun">授权手机号</button>
</view>
<view class="ui-list right">
<text>性别</text>
<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
<view class="picker">
{{sex[index].name}}
</view>
</picker>
</view>
<view class="ui-list right">
<text>常住地</text>
<picker @change="bindRegionChange" mode='region'>
<view class="picker">
{{region[0]}} {{region[1]}} {{region[2]}}
</view>
</picker>
</view>
<view class="ui-list right">
<text>生日</text>
<picker mode="date" :value="date" @change="bindDateChange">
<view class="picker">
{{date}}
</view>
</picker>
</view>
<view class="ui-list">
<text>签名</text>
<textarea :placeholder="value" placeholder-class="place" :value="description" @input="binddescription"></textarea>
</view>
<button class="save" @tap="savaInfo">保 存 修 改</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: '请填写',
sex: [{
id: 1,
name: ''
}, {
id: 2,
name: ''
}],
index: 0,
region: ['请填写'],
date: '请填写',
avater: '',
description: '',
url: '',
nickName: '',
mobile: '',
headimg: ''
}
},
methods: {
bindPickerChange(e) {
this.index = e.detail.value;
},
bindRegionChange(e) {
this.region = e.detail.value;
},
bindDateChange(e) {
this.date = e.detail.value;
},
bindnickName(e) {
this.nickName = e.detail.value;
},
bindmobile(e) {
this.mobile = e.detail.value;
},
binddescription(e) {
this.description = e.detail.value;
},
avatarChoose() {
let that = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
that.imgUpload(res.tempFilePaths);
const tempFilePaths = res.tempFilePaths;
}
});
},
getUserInfo () {
uni.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res);
uni.showToast({
title: '已授权',
icon: 'none',
duration: 2000
})
}
})
} ,
getphonenumber(e){
if(e.detail.iv){
console.log(e.detail.iv) //传后台解密换取手机号
uni.showToast({
title: '已授权',
icon: 'none',
duration: 2000
})
}
},
savaInfo() {
let that = this;
let nickname = that.nickName;
let headimg = that.headimg;
let gender = that.index + 1;
let mobile = that.mobile;
let region = that.region;
let birthday = that.date;
let description = that.description;
let updata = {};
if (!nickname) {
uni.showToast({
title: '请填写昵称',
icon: 'none',
duration: 2000
});
return;
}
updata.nickname = nickname;
if (!headimg) {
headimg = that.avater;
}
updata.headimg = headimg;
updata.gender = gender;
if (that.isPoneAvailable(mobile)) {
updata.mobile = mobile;
} else {
uni.showToast({
title: '手机号码有误,请重填',
icon: 'none',
duration: 2000
});
return;
}
if (region.length == 1) {
uni.showToast({
title: '请选择常住地',
icon: 'none',
duration: 2000
});
return;
} else {
updata.province = region[0];
updata.city = region[1];
updata.area = region[2];
}
if (birthday == "0000-00-00") {
uni.showToast({
title: '请选择生日',
icon: 'none',
duration: 2000
});
return;
}
updata.birthday = birthday;
updata.description = description;
that.updata(updata);
},
isPoneAvailable(poneInput) {
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(poneInput)) {
return false;
} else {
return true;
}
},
async updata(datas) {
//传后台
},
imgUpload(file) {
let that = this;
uni.uploadFile({
header: {
Authorization: uni.getStorageSync('token')
},
url:'/api/upload/image', //需传后台图片上传接口
filePath: file[0],
name: 'file',
formData: {
type: 'user_headimg'
},
success: function(res) {
var data = JSON.parse(res.data);
data = data.data;
that.avater = that.url + data.img;
that.headimg = that.url + data.img;
},
fail: function(error) {
console.log(error);
}
});
},
},
onLoad() {
}
}
</script>
<style lang="less">
.container {
display: block;
}
.ui-all {
padding: 20rpx 40rpx;
.avatar {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1px #f2f2f2;
position: relative;
.imgAvatar {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
.iavatar {
width: 100%;
height: 100%;
display: block;
}
}
text {
display: inline-block;
vertical-align: middle;
color: #8e8e93;
font-size: 28rpx;
margin-left: 40rpx;
}
&:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1px #030303;
border-right: solid 1px #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 85rpx;
right: 0;
}
}
.ui-list {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1px #f2f2f2;
position: relative;
text {
color: #4a4a4a;
font-size: 28rpx;
display: inline-block;
vertical-align: middle;
min-width: 150rpx;
}
input {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
}
button{
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
background: none;
margin: 0;
padding: 0;
&::after{
display: none;
}
}
picker {
width: 90%;
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 30rpx;
left: 150rpx;
}
textarea {
color: #030303;
font-size: 30rpx;
vertical-align: middle;
height: 150rpx;
width: 100%;
margin-top: 50rpx;
}
.place {
color: #999999;
font-size: 28rpx;
}
}
.right:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1px #030303;
border-right: solid 1px #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 40rpx;
right: 0;
}
.save {
background: #030303;
border: none;
color: #ffffff;
margin-top: 40rpx;
font-size: 28rpx;
}
}
</style>
function getLocalFilePath(path) {
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
return path
}
if (path.indexOf('file://') === 0) {
return path
}
if (path.indexOf('/storage/emulated/0/') === 0) {
return path
}
if (path.indexOf('/') === 0) {
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
if (localFilePath !== path) {
return localFilePath
} else {
path = path.substr(1)
}
}
return '_www/' + path
}
function dataUrlToBase64(str) {
var array = str.split(',')
return array[array.length - 1]
}
var index = 0
function getNewFileId() {
return Date.now() + String(index++)
}
function biggerThan(v1, v2) {
var v1Array = v1.split('.')
var v2Array = v2.split('.')
var update = false
for (var index = 0; index < v2Array.length; index++) {
var diff = v1Array[index] - v2Array[index]
if (diff !== 0) {
update = diff > 0
break
}
}
return update
}
export function pathToBase64(path) {
return new Promise(function(resolve, reject) {
if (typeof window === 'object' && 'document' in window) {
if (typeof FileReader === 'function') {
var xhr = new XMLHttpRequest()
xhr.open('GET', path, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
let fileReader = new FileReader()
fileReader.onload = function(e) {
resolve(e.target.result)
}
fileReader.onerror = reject
fileReader.readAsDataURL(this.response)
}
}
xhr.onerror = reject
xhr.send()
return
}
var canvas = document.createElement('canvas')
var c2x = canvas.getContext('2d')
var img = new Image
img.onload = function() {
canvas.width = img.width
canvas.height = img.height
c2x.drawImage(img, 0, 0)
resolve(canvas.toDataURL())
canvas.height = canvas.width = 0
}
img.onerror = reject
img.src = path
return
}
if (typeof plus === 'object') {
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(data) {
resolve(data.target.result)
}
fileReader.onerror = function(error) {
reject(error)
}
fileReader.readAsDataURL(file)
}, function(error) {
reject(error)
})
}, function(error) {
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
wx.getFileSystemManager().readFile({
filePath: path,
encoding: 'base64',
success: function(res) {
resolve('data:image/png;base64,' + res.data)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
export function base64ToPath(base64) {
return new Promise(function(resolve, reject) {
if (typeof window === 'object' && 'document' in window) {
base64 = base64.split(',')
var type = base64[0].match(/:(.*?);/)[1]
var str = atob(base64[1])
var n = str.length
var array = new Uint8Array(n)
while (n--) {
array[n] = str.charCodeAt(n)
}
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
}
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
if (extName) {
extName = extName[1]
} else {
reject(new Error('base64 error'))
}
var fileName = getNewFileId() + '.' + extName
if (typeof plus === 'object') {
var basePath = '_doc'
var dirPath = 'uniapp_temp'
var filePath = basePath + '/' + dirPath + '/' + fileName
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
entry.getDirectory(dirPath, {
create: true,
exclusive: false,
}, function(entry) {
entry.getFile(fileName, {
create: true,
exclusive: false,
}, function(entry) {
entry.createWriter(function(writer) {
writer.onwrite = function() {
resolve(filePath)
}
writer.onerror = reject
writer.seek(0)
writer.writeAsBinary(dataUrlToBase64(base64))
}, reject)
}, reject)
}, reject)
}, reject)
return
}
var bitmap = new plus.nativeObj.Bitmap(fileName)
bitmap.loadBase64Data(base64, function() {
bitmap.save(filePath, {}, function() {
bitmap.clear()
resolve(filePath)
}, function(error) {
bitmap.clear()
reject(error)
})
}, function(error) {
bitmap.clear()
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
var filePath = wx.env.USER_DATA_PATH + '/' + fileName
wx.getFileSystemManager().writeFile({
filePath: filePath,
data: dataUrlToBase64(base64),
encoding: 'base64',
success: function() {
resolve(filePath)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
\ No newline at end of file
{
"id": "mmmm-image-tools",
"name": "image-tools",
"version": "1.4.0",
"description": "图像转换工具,可用于图像和base64的转换",
"keywords": [
"base64",
"保存",
"图像"
]
}
\ No newline at end of file
{
"id": "helang-tabBar",
"displayName": "底部导航栏(有动画的)",
"version": "1.0.0",
"description": "本开源代码分享了5款有动画切换效果的 底部导航栏 组件",
"keywords": [
"底部导航栏",
"动画"
],
"engines": {},
"dcloudext": {
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"dependencies": {
"@dcloudio/uni-ui": "^1.4.27",
"element-ui": "^2.15.13"
},
"name": "teamwork",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
"id": "c-userinfo",
"name": "个人信息编辑表单",
"version": "1.0.1",
"description": "通用个人中心表单,包含获取用户信息,授权手机号,上传头像等",
"keywords": [
"表单",
"用户信息",
"手机号"
]
}
\ No newline at end of file
......@@ -3,26 +3,43 @@
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [{
"path": "pages/post/post",
"pages": [
{
"path": "pages/my/main",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/discover/main",
"path": "pages/my/my-modify",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/sport/ready",
"path": "pages/my/my-setting",
"style": {
"navigationStyle": "custom"
}
},
},
{
"path": "pages/my/my-resetpassword",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/post/post",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/discover/main",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/login/login",
"style": {
"navigationStyle": "custom"
......@@ -42,6 +59,11 @@
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/sport/ready",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/sport/test",
"style": {
......@@ -53,7 +75,17 @@
"navigationStyle": "custom"
}
}, {
"path": "pages/discover/detail",
"path": "pages/sport/start",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/discover/discover-detail",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/discover/add-school-activity",
"style": {
"navigationStyle": "custom"
}
......
<template>
<view class="add-school-activity">
<view class="nav-bar-back">
<image class="nav-bar-back-icon" src="/static/discover/back.png" @click="goBack"></image>
<view class="nav-bar-title">发起赛事</view>
<image class="nav-bar-add" src="../../static/post/发送.png" @click="submit"></image>
</view>
<view class="school-activity-icon-wrapper">
<image class="school-activity-icon" src="/static/discover/activity-icon.png"></image>
</view>
<view class="school-activity-item-wrapper">
<view class="form-group">
<image class="form-icon" src="/static/discover/name.png"></image>
<input class="form-input" type="text" placeholder="请输入活动名称" v-model="name">
</view>
<view class="form-group">
<image class="form-icon" src="/static/discover/content.png"></image>
<textarea class="form-input1" placeholder="请输入活动内容" v-model="content" ></textarea>
</view>
<view class="form-group">
<image class="form-icon" src="/static/discover/activity-time.png"></image>
<view class="input-wrapper">
<view class="form-input2">
<picker mode="date" start="1970-01-01" end="2100-12-31" @change="handleDateChange1">
<view class="picker">{{ start_date }}</view>
</picker>
</view>
<view class="form-input2">
<picker mode="date" start="1970-01-01" end="2100-12-31" @change="handleDateChange2">
<view class="picker">{{ end_date }}</view>
</picker>
</view>
</view>
</view>
<view class="form-group">
<image class="form-icon" src="/static/discover/activity-object.png"></image>
<input class="form-input" type="text" placeholder="请输入活动对象" v-model="object">
</view>
<view class="form-group">
<image class="form-icon" src="/static/discover/activity-place.png"></image>
<input class="form-input" type="text" placeholder="请输入活动地点" v-model="place">
</view>
<view class="form-group">
<image class="form-icon" src="/static/discover/activity-contact.png"></image>
<input class="form-input" type="text" placeholder="请输入活动联系方式" v-model="contact">
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name:'',
content:'',
object:'',
place:'',
contact:'',
start_date: '2023-05-04',
end_date: '2023-05-04',
}
},
methods: {
goBack() {
uni.navigateBack({
delta: 1
})
},
async submit() {
if (!/^[\u4e00-\u9fa5]+$/.test(this.name)) {
uni.showToast({
title: '请输入正确的中文姓名',
icon: 'none'
});
return;
}else {
uni.showToast({
title: '提交成功',
icon: 'success'
});
}
// try {
// const res = await uniCloud.callFunction({
// name: 'addActivity',
// data: {
// name: this.name
// }
// });
// uni.showToast({
// title: '提交成功',
// icon: 'success'
// });
// this.name = '';
// } catch (err) {
// console.error(err);
// uni.showToast({
// title: '提交失败,请稍后再试',
// icon: 'none'
// });
},
handleDateChange1(event) {
this.start_date = event.detail.value
},
handleDateChange2(event) {
this.end_date = event.detail.value
},
}
}
</script>
<style>
.add-school-activity {
position: absolute;
width: 100%;
height: 100%;
background-color: #EDEEF0;
}
.nav-bar-back {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
background-color: #EDEEF0;
}
.nav-bar-back-icon {
width: 40px;
height: 30px;
}
.nav-bar-title {
flex: 1;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #F1992D;
}
.nav-bar-add {
width: 30px;
height: 30px;
margin-top: 10px;
float: right;
margin-right: 10px;
}
.school-activity-icon-wrapper{
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.school-activity-icon {
width: 50%;
height: 80px;
margin: 0px;
padding: 0px;
}
.school-activity-item-wrapper{
margin-top: 20px;
}
.form-group {
display: flex;
align-items: center;
margin-top: 15px;
}
.form-icon {
width: 40px;
height: 30px;
margin-left: 30px;
}
.form-input {
margin-left: 5px;
width: 70%;
height: 35px;
border: none;
outline: none;
font-size: 14px;
color: #333;
background-color: #fff;
padding: 0 10px;
}
.form-input1 {
margin-left: 5px;
width: 70%;
height: 70px;
border: none;
outline: none;
font-size: 14px;
color: #333;
background-color: #fff;
padding: 0 10px;
}
.input-wrapper {
flex-direction: column;
display: flex;
width: 100%;
}
.form-input2 {
margin-top: 5px;
margin-left: 10px;
width: 80%;
height: 35px;
border: none;
outline: none;
font-size: 14px;
color: #333;
background-color: #fff;
padding: 0 10px;
}
</style>
\ No newline at end of file
<template>
<view class="detail">
<view class="nav-bar-back">
<image class="nav-bar-back-icon" src="/static/discover/back.png" @click="goBack"></image>
<view class="nav-bar-title">{{title}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '趣味篮球赛',
}
},
methods: {
goBack() {
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style>
.nav-bar-back {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
background-color: #EDEEF0;
}
.nav-bar-back-icon {
width: 40px;
height: 30px;
}
.nav-bar-title {
flex: 1;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #F1992D;
}
</style>
<template>
<view class="detail">
<view class="nav-bar-back">
<image class="nav-bar-back-icon" src="/static/discover/back.png" @click="goBack"></image>
<view class="nav-bar-title">{{title}}</view>
</view>
<view class="school-activity-icon-wrapper"><image class="school-activity-icon" src="/static/discover/activity.svg"></image></view>
<view class="activity-production">
<image class="activity-production-icon" src="/static/discover/production.png"></image>
<text>活动介绍:</text>
<view class="production-detail">{{production}}</view>
</view>
<view class="activity-object">
<image class="activity-production-icon" src="/static/discover/object.png"></image>
<text>活动对象:</text>
<view class="production-detail">{{object}}</view>
</view>
<view class="activity-time">
<image class="activity-production-icon" src="/static/discover/time.png"></image>
<text>活动时间:</text>
<view class="production-detail">{{time}}</view>
</view>
<view class="activity-place">
<image class="activity-production-icon" src="/static/discover/place.png"></image>
<text>活动地点:</text>
<view class="production-detail">{{place}}</view>
</view>
<view class="activity-contact">
<image class="activity-production-icon" src="/static/discover/contact.png"></image>
<text>联系方式:</text>
<view class="production-detail">{{contact}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '趣味篮球赛',
production:'111111111111111111111111111111111111111111111111111111',
object:'福州大学全体学生',
time:'2023-05-03 19:00',
place:'风雨操场',
contact:'1612737522@qq.com'
}
},
methods: {
goBack() {
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style>
.nav-bar-back {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
background-color: #EDEEF0;
}
.nav-bar-back-icon {
width: 40px;
height: 30px;
}
.nav-bar-title {
flex: 1;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #F1992D;
}
.school-activity-icon-wrapper{
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.school-activity-icon {
width: 95%;
height: 200px;
margin: 0px;
padding: 0px;
}
.activity-production{
margin-top: 10px;
}
.activity-object{
margin-top: 10px;
}
.activity-time{
margin-top: 10px;
}
.activity-place{
margin-top: 10px;
}
.activity-contact{
margin-top: 10px;
}
.activity-production-icon{
width: 40px;
height: 30px;
margin-left: 30px;
}
.production-detail{
width: 95%;
background-color: rgb(245 154 35 / 30%);
margin-left: 25px;
border-radius: 5px;
margin-left: 10px;
/* 文字换行处理 */
word-wrap:break-word;
word-break:break-all;
}
</style>
......@@ -14,8 +14,20 @@
<!-- 校内活动 -->
<view class="one-school-activity" @click="goToDetail" >
<text class="school-activity-title">{{title}}</text>
<image class="school-activity-icon" src="/static/my/main/modify-icon.png"></image>
<image class="school-activity-icon" src="/static/discover/activity.svg"></image>
</view>
<view class="one-school-activity" @click="goToDetail" >
<text class="school-activity-title">{{title}}</text>
<image class="school-activity-icon" src="/static/discover/activity.svg"></image>
</view>
<view class="one-school-activity" @click="goToDetail" >
<text class="school-activity-title">{{title}}</text>
<image class="school-activity-icon" src="/static/discover/activity.svg"></image>
</view>
<view @click="goActivityAdd" class="add-activity" v-if="showButton">
<u-icon name="edit-pen" color="#F1992D" size="40"></u-icon>
</view>
</view>
</template>
......@@ -23,19 +35,32 @@
export default {
data() {
return {
showButton: false, // 初始值为隐藏
id: '1' ,// 根据id控制显示和隐藏
list: [{
name: '发现'
}],
title:'趣味篮球赛'
}
},
methods: {
goToDetail() {
uni.navigateTo({
url: '/pages/discover/detail'
})
}
}
mounted() {
// 根据id值进行判断
if (this.id == 1) {
this.showButton = true;
}
},
methods: {
goToDetail() {
uni.navigateTo({
url: '/pages/discover/discover-detail'
})
},
goActivityAdd() {
uni.navigateTo({
url: '/pages/discover/add-school-activity'
})
},
}
}
</script>
......@@ -54,7 +79,7 @@
width: 90%;
height: 200px;
margin-top: 2px;
margin-bottom: 4px;
margin-bottom: 10px;
}
.school-activity-name {
......@@ -63,4 +88,17 @@
font-size: 24px;
font-weight: bold;
}
.add-activity {
position: fixed;
right: 20rpx;
bottom: 100rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 20rpx #999;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<template>
<view class="main">
<view>
<view class="main">
<view class="modify">
<image class="modify-icon" src="/static/my/main/modify-icon.png"></image>
<image class="modify-icon" src="/static/my/main/modify-icon.png" @click="goToModify()"></image>
</view>
<view class="info">
<view class="info1">
......@@ -35,33 +37,57 @@
<view>运动记录</view>
</view>
<view class="setting">
<view class="setting-icon"></view>
<view class="setting-icon" @click="goToSetting()"></view>
<view>设置</view>
</view>
<view class="reset-password">
<view class="reset-password-icon"></view>
<view class="reset-password-icon" @click="goToResetpassword()"></view>
<view>修改密码</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
nickname:'王二蛋',
schoolName:'福州大学',
teamName:'must go',
point:'1250',
}
}
data () {
return {
iStatusBarHeight:0,
nickname:'王二蛋',
schoolName:'福州大学',
teamName:'must go',
point:'1250'
}
},
methods:{
goToModify() {
uni.navigateTo({
url: '/pages/my/modify'
})
},
goToSetting() {
uni.navigateTo({
url: '/pages/my/my-setting'
})
},
goToResetpassword() {
uni.navigateTo({
url: '/pages/my/my-resetpassword'
})
}
},
onLoad() {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
</script>
<style>
.main {
position: absolute;
width: 100%;
......@@ -74,10 +100,10 @@
}
.modify-icon{
margin-top: 30rpx;
margin-left: 84%;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: 85%;
width: 70rpx;
height: 70rpx;
}
.info{
......@@ -90,9 +116,9 @@
.head-portrait {
margin-top: 50rpx;
margin-left: 20%;
width: 150rpx;
height: 150rpx;
margin-left: 15%;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
background-size:100% 100%;
background-image:url("/static/my/main/head-portrait.png") ;
......@@ -103,19 +129,19 @@
width: 250rpx;
height: 50rpx;
font-size: 30rpx;
font-size: 60rpx;
text-align: left;
float: right;
margin-top: 100rpx;
margin-right: 150rpx;
margin-right: 100rpx;
}
.info2{
border-radius: 20rpx;
background-color: #FFFFFF;
width:65%;
width:75%;
height: 60%;
margin-top: 20px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
......@@ -126,8 +152,8 @@
}
.school-icon{
width: 50rpx;
height: 50rpx;
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
......@@ -137,11 +163,11 @@
}
.school-name{
width: 300rpx;
height: 50rpx;
margin-top: 50rpx;
margin-right: 50rpx;
font-size: 30rpx;
width: 320rpx;
height: 30rpx;
margin-top: 60rpx;
margin-right: 55rpx;
font-size: 35rpx;
text-align: left;
float: right;
}
......@@ -151,8 +177,8 @@
}
.team-icon{
width: 50rpx;
height: 50rpx;
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
......@@ -162,11 +188,11 @@
}
.team-name{
width: 300rpx;
height: 50rpx;
margin-top: 50rpx;
margin-right: 50rpx;
font-size: 30rpx;
width: 320rpx;
height: 30rpx;
margin-top: 60rpx;
margin-right: 55rpx;
font-size: 35rpx;
text-align: left;
float: right;
}
......@@ -176,8 +202,8 @@
}
.point-icon{
width: 50rpx;
height: 50rpx;
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
......@@ -187,17 +213,18 @@
}
.point-num{
width: 300rpx;
height: 50rpx;
margin-top: 50rpx;
margin-right: 50rpx;
font-size: 30rpx;
width: 320rpx;
height: 30rpx;
margin-top: 60rpx;
margin-right: 55rpx;
font-size: 35rpx;
text-align: left;
float: right;
}
.func{
width:65%;
width:75%;
margin-top: 30rpx;
margin-left: auto;
margin-right: auto;
display: flex;
......@@ -207,13 +234,13 @@
}
.my-post{
width:150rpx;
width:200rpx;
height: 250rpx;
}
.my-post-icon{
width: 70rpx;
height: 70rpx;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......@@ -223,13 +250,13 @@
}
.running-record{
width:150rpx;
width:200rpx;
height: 250rpx;
}
.running-record-icon{
width: 70rpx;
height: 70rpx;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......@@ -239,13 +266,13 @@
}
.setting{
width:150rpx;
width:200rpx;
height: 250rpx;
}
.setting-icon{
width: 70rpx;
height: 70rpx;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......@@ -255,13 +282,13 @@
}
.reset-password{
width:150rpx;
width:200rpx;
height: 250rpx;
}
.reset-password-icon{
width: 70rpx;
height: 70rpx;
width: 100rpx;
height: 100rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......
<template>
<view>
<view class="top">
<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
<view class="title">信息修改</view>
<span class="empty"></span>
</view>
<view class="container">
<view class="ui-all">
<view class="avatar" @tap="avatarChoose">
<view class="imgAvatar">
<view class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'">
</view>
</view>
<text v-if="avater">修改头像</text>
<text v-if="!avater">设置头像</text>
<button v-if="!avater" open-type="getUserInfo" @tap="getUserInfo" class="getInfo"></button>
</view>
<view class="ui-list">
<text>用户名</text>
<input type="text" placeholder="请填写用户名" :value="nickName" @input="bindnickName"
placeholder-class="place" />
</view>
<view class="ui-list">
<text>手机号</text>
<input type="tel" placeholder="请填写手机号" :value="mobile" @input="bindmobile"
placeholder-class="place" />
<!-- <button v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="getInfo bun">授权手机号</button> -->
</view>
<view class="ui-list right">
<text>性别</text>
<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index1" :range="sex">
<view class="picker">
{{sex[index1].name}}
</view>
</picker>
</view>
<view class="ui-list right">
<text>学校</text>
<picker @change="bindSchoolChange" mode='selector' range-key="name" :value="index2" :range="school">
<view class="picker">
{{school[index2].name}}
</view>
</picker>
</view>
<button class="save" @tap="savaInfo">保 存 修 改</button>
</view>
</view>
</view>
</template>
<script>
import {
pathToBase64,
base64ToPath
} from 'js_sdk/mmmm-image-tools/index.js';
export default {
data() {
return {
sex: [{
id: 1,
name: ''
}, {
id: 2,
name: ''
}],
index1: 0,
school: [{
id: 1,
name: '福州大学'
}, {
id: 2,
name: 'xx大学'
}],
index2: 0,
avater: '',
// url: '',
nickName: '王二蛋',
mobile: '15305986885',
headimg: ''
}
},
methods: {
bindPickerChange(e) {
this.index1 = e.detail.value;
},
bindSchoolChange(e) {
this.index2 = e.detail.value;
},
bindnickName(e) {
this.nickName = e.detail.value;
},
bindmobile(e) {
this.mobile = e.detail.value;
},
avatarChoose() {
// let that = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
var tempFilePaths = res.tempFilePaths;
pathToBase64(tempFilePaths[0]) //图像转base64工具
.then(base64 => {
this.avatar = base64;
console.log(base64);
//将文件转化为base64并显示
// that.avatarUpload(base64); //同时将头像上传至数据库进行存储
//console.log(this.avatar);
}).catch(error => {
console.error(error)
})
}
});
},
getUserInfo() {
uni.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res);
uni.showToast({
title: '已授权',
icon: 'none',
duration: 2000
})
}
})
},
// getphonenumber(e) {
// if (e.detail.iv) {
// console.log(e.detail.iv) //传后台解密换取手机号
// uni.showToast({
// title: '已授权',
// icon: 'none',
// duration: 2000
// })
// }
// },
savaInfo() {
uni.showModal({
title: '温馨提示', //提示标题
content: '确认修改你的个人信息吗', //提示内容
showCancel: true, //是否显示取消按钮
success: function(res) {
if (res.confirm) { //confirm为ture,代表用户点击确定
console.log('点击了确定按钮');
} else if (res.cancel) { //cancel为ture,代表用户点击取消
console.log('点击了取消按钮');
}
}
})
// let that = this;
// let nickname = that.nickName;
// let headimg = that.headimg;
// let gender = that.index + 1;
// let mobile = that.mobile;
// let region = that.region;
// let birthday = that.date;
// let description = that.description;
// let updata = {};
// if (!nickname) {
// uni.showToast({
// title: '请填写昵称',
// icon: 'none',
// duration: 2000
// });
// return;
// }
// updata.nickname = nickname;
// if (!headimg) {
// headimg = that.avater;
// }
// updata.headimg = headimg;
// updata.gender = gender;
// if (that.isPoneAvailable(mobile)) {
// updata.mobile = mobile;
// } else {
// uni.showToast({
// title: '手机号码有误,请重填',
// icon: 'none',
// duration: 2000
// });
// return;
// }
// if (region.length == 1) {
// uni.showToast({
// title: '请选择常住地',
// icon: 'none',
// duration: 2000
// });
// return;
// } else {
// updata.province = region[0];
// updata.city = region[1];
// updata.area = region[2];
// }
// if (birthday == "0000-00-00") {
// uni.showToast({
// title: '请选择生日',
// icon: 'none',
// duration: 2000
// });
// return;
// }
// that.updata(updata);
},
// isPoneAvailable(poneInput) {
// var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
// if (!myreg.test(poneInput)) {
// return false;
// } else {
// return true;
// }
// },
// async updata(datas) {
// //传后台
// },
// imgUpload(file) {
// let that = this;
// uni.uploadFile({
// header: {
// Authorization: uni.getStorageSync('token')
// },
// url: '/api/upload/image', //需传后台图片上传接口
// filePath: file[0],
// name: 'file',
// formData: {
// type: 'user_headimg'
// },
// success: function(res) {
// var data = JSON.parse(res.data);
// data = data.data;
// that.avater = that.url + data.img;
// that.headimg = that.url + data.img;
// },
// fail: function(error) {
// console.log(error);
// }
// });
// },
goBack() {
uni.navigateBack({
delta: 1, //返回层数,2则上上页
})
}
},
onLoad() {
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
</script>
<style lang="less">
.container {
position: absolute;
width: 100%;
height: 100%;
display: block;
}
.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;
}
.ui-all {
// padding: 20rpx 40rpx;
margin-top: 20rpx;
margin-left: 40rpx;
margin-right: 40rpx;
.avatar {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1px #f2f2f2;
position: relative;
.imgAvatar {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
.iavatar {
width: 100%;
height: 100%;
display: block;
}
}
text {
display: inline-block;
vertical-align: middle;
color: #8e8e93;
font-size: 28rpx;
margin-left: 40rpx;
}
&:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1px #030303;
border-right: solid 1px #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 85rpx;
right: 0;
}
}
.ui-list {
width: 100%;
text-align: left;
padding: 20rpx 0;
border-bottom: solid 1px #f2f2f2;
position: relative;
text {
color: #4a4a4a;
font-size: 28rpx;
display: inline-block;
vertical-align: middle;
min-width: 150rpx;
}
input {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
}
button {
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
background: none;
margin: 0;
padding: 0;
&::after {
display: none;
}
}
picker {
width: 90%;
color: #030303;
font-size: 30rpx;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 30rpx;
left: 150rpx;
}
textarea {
color: #030303;
font-size: 30rpx;
vertical-align: middle;
height: 150rpx;
width: 100%;
margin-top: 50rpx;
}
.place {
color: #999999;
font-size: 28rpx;
}
}
.right:after {
content: ' ';
width: 20rpx;
height: 20rpx;
border-top: solid 1px #030303;
border-right: solid 1px #030303;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
position: absolute;
top: 40rpx;
right: 0;
}
.save {
background: #F1992D;
border: none;
color: #ffffff;
margin-top: 40rpx;
font-size: 28rpx;
}
}
</style>
\ No newline at end of file
<template>
<veiw class="main">
<view class="exit">
<view class="exit-btn"></view>
<view class="return">
<view class="return-btn" @click="goBack"></view>
</view>
<view class="head-portrait">
<view class="head-portrait-icon"></view>
......@@ -9,19 +9,19 @@
<view class="info">
<veiw class="nickname">
<span>用户名:</span>
<input type="text" :value="nickname" :valplaceholder='请输入用户名'></input>
<input type="text" :value="nickname" class="in" placeholder="请输入用户名"></input>
</veiw>
<veiw class="school">
<span>&emsp;校:</span>
<select-lay class="seclectSchool" :value="school" slabel="type" svalue="typeid" placeholder="请选择学校" :options="allSchool" @selectitem="selectitem"></select-lay>
<select-lay class="seclect-school" slabel="type" :value="school" svalue="typeid" placeholder="请选择学校" :options="allSchool" @selectitem="selectitem"></select-lay>
</veiw>
<veiw class="tel">
<span>手机号:</span>
<input type="number" :value="tel" :vaplaceholder='请输入手机号'></input>
<input type="number" :value="tel" class="in" placeholder="请输入手机号"></input>
</veiw>
<veiw class="gender">
<span>&emsp;别:</span>
<radio-group @change="change">
<radio-group>
<label>
<radio :value="'0'" checked="checked" />
<radio :value="'1'" />
......@@ -40,8 +40,8 @@
data() {
return {
schoolChannelid:'',
school:'',
nickname:'王二蛋',
school:'福州大学',
tel:'15305986885',
allSchool: [{
type: '福州大学',
......@@ -83,6 +83,11 @@
}
}
})
},
goBack(){
uni.navigateBack({
delta:1,//返回层数,2则上上页
})
}
},
......@@ -96,16 +101,16 @@
height: 100%;
background-color: #EDEEF0;
}
.exit{
.return{
/* border: 2rpx solid #000; */
height: 10%;
}
.exit-btn{
.return-btn{
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
margin-left: 20rpx;
background-size:100% 100%;
background-image:url("/static/my/exit-icon.png");
background-repeat:no-repeat;
......@@ -119,8 +124,8 @@
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
width: 150rpx;
height: 150rpx;
width: 250rpx;
height: 250rpx;
border-radius: 50%;
background-size:100% 100%;
background-image:url("/static/my/main/head-portrait.png") ;
......@@ -140,7 +145,7 @@
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #ccc;
/* border-bottom: 1px solid #ccc; */
}
.school{
......@@ -149,7 +154,12 @@
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #ccc;
border: none;
/* border-bottom: 1px solid #ccc; */
}
.seclect-school{
width: 73%;
border: 1px solid #ccc;
}
.tel{
......@@ -158,7 +168,11 @@
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #ccc;
/* border-bottom: 1px solid #ccc; */
}
.in{
height: 80rpx;
border: 1px solid #ccc;
}
.gender{
......@@ -176,6 +190,7 @@
color: #FFFFFF;
width:70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
......
<template>
<view class="main">
<view class="return">
<view class="return-btn"></view>
<!-- <view class="return">
<view class="return-btn" @click="goBack"></view>
<text>重置密码</text>
</view> -->
<view class="top">
<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
<view class="title">重置密码</view>
<span class="empty"></span>
</view>
<view class="content">
<veiw class="password">
......@@ -27,32 +33,40 @@
<script>
export default {
data() {
return {
showPassword: true,
}
data() {
return {
showPassword: true,
}
},
methods: {
// showPwd: function() {
// this.showPassword = !this.showPassword;
// },
confirmModification() {
uni.showModal({
title: '温馨提示', //提示标题
content: '确认修改密码吗', //提示内容
showCancel: true, //是否显示取消按钮
success: function(res) {
if (res.confirm) { //confirm为ture,代表用户点击确定
console.log('点击了确定按钮');
} else if (res.cancel) { //cancel为ture,代表用户点击取消
console.log('点击了取消按钮');
}
}
})
},
goBack() {
uni.navigateBack({
delta: 1, //返回层数,2则上上页
})
},
methods: {
// showPwd: function() {
// this.showPassword = !this.showPassword;
// },
confirmModification(){
uni.showModal({
title: '温馨提示', //提示标题
content: '确认修改密码吗', //提示内容
showCancel: true, //是否显示取消按钮
success: function (res) {
if (res.confirm) { //confirm为ture,代表用户点击确定
console.log('点击了确定按钮');
} else if (res.cancel) { //cancel为ture,代表用户点击取消
console.log('点击了取消按钮');
}
}
})
}
}
onload(){
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
}
</script>
<style>
......@@ -60,41 +74,79 @@
position: absolute;
width: 100%;
height: 100%;
/* background-color: #EDEEF0; */
}
.top {
width: 100%;
height: 50px;
background-color: #EDEEF0;
text-align: center;
}
.return-btn{
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
background-image:url("/static/my/exit-icon.png");
background-repeat:no-repeat;
.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;
}
.content{
width:70%;
.title {
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: #f1992d;
display: inline-block;
}
.content {
width: 80%;
margin-top: 50%;
margin-left: auto;
margin-right: auto;
}
.password{
.password {
margin-top: 50rpx;
height: 15%;
height: 20%;
display: flex;
align-items: center;
width: 100%;
/* border-bottom: 1px solid #ccc; */
}
.password span {
font-size: 35rpx;
}
.password input {
border-bottom: 1px solid #ccc;
}
.confirm{
.confirm {
height: 20%;
margin-top: 20%;
}
.confirm-btn{
background-color:#F1992D ;
.confirm-btn {
background-color: #F1992D;
color: #FFFFFF;
width:70%;
width: 70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
......
<template>
<view class="main">
<view class="return">
<view class="return-btn"></view>
<view class="top">
<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
</view>
<view class="profile">
<view class="profile-title">
......@@ -32,7 +33,7 @@
data() {
return {
profileContent:' Must Go,本产品基于 Vue Uniapp开发,提供 Android 和iOS 端 APP,针对于“后疫情”时代的身体素质普遍下降的问题,恢复大学生们原有的朝气。该产品定位于帮助众多大学生,乃至更多青年人走出怠惰于运动的舒适圈,增强身体素质、培养积极向上的心理状态。通过该产品可以轻松且高效地搜集到周边、尤其是自身高校的赛事活动信息,及时报名参与,并突破现在运动类APP的圈子局限,不必局限于与远在天边的“朋友”分享运动成果,而可以召集小队发帖社交与近在咫尺的“队友”外出活动。',
aboutContent:'有问题或反馈请拨打\n我们的联系电话:18960545221'
aboutContent:'有问题或反馈请致电我们\n联系电话:18960545221'
}
},
methods:{
......@@ -49,6 +50,14 @@
}
}
})
},
goBack(){
uni.navigateBack({
delta:1,//返回层数,2则上上页
})
},
onload(){
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
}
......@@ -61,19 +70,19 @@
height: 100%;
background-color: #EDEEF0;
}
.return{
.top {
width: 100%;
height: 50px;
background-color: #EDEEF0;
}
.return-btn{
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 50rpx;
background-size:100% 100%;
background-image:url("/static/my/exit-icon.png");
background-repeat:no-repeat;
.back {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
margin-left: 10px;
}
.profile{
/* border: 2rpx solid #000; */
......@@ -180,6 +189,7 @@
color: #FFFFFF;
width:70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
......
<template>
<view>
<view class="content">
<view class="type-select">
<uni-data-select custom-class="type" v-model="type" :localdata="range" :clear="false"
@change="change"></uni-data-select>
</view>
<view class="ranking">
<view class="distance">
<p>累计{{type}}</p>
<p>{{distance}}公里</p>
<view class="accumulate">
<view class="block1">
<ul>
<li>累计{{type}}</li>
</ul>
<view class="dis">
<view class="distance">{{distance}}</view>
<view class="km">公里</view>
</view>
</view>
<view class="rank" @click="click">
<p>累计排名</p>
<p>{{rank}}</p>
<view class="block2" @click="click">
<ul>
<li>本校累计排名</li>
</ul>
<view class="rank">{{rank}}</view>
</view>
</view>
<image class="start-button" src="/static/sport/stop.png" @click="start"></image>
......@@ -49,7 +56,7 @@
console.log(res);
});
},
click(){
click() {
uni.navigateTo({
url: './ranking'
});
......@@ -65,21 +72,99 @@
<style scoped>
.content {
background-color: #edeef0;
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
height: 100%;
}
.type-select {
width: 30%;
padding: 30px;
margin-top: 60px;
margin-left: 30px;
color: #f1992d;
/* background-color: #f1992d; */
}
.accumulate {
margin: 10px;
margin-top: 40px;
}
.block1 {
background-color: white;
padding: 10px;
margin: 2%;
width: 40%;
height: 110px;
border-radius: 10px;
float: left;
}
.block2 {
background-color: white;
padding: 10px;
margin: 2%;
width: 40%;
height: 110px;
border-radius: 10px;
float: right;
}
li {
cursor: pointer;
color: #8A8A8C;
font-weight: bold;
list-style-position: outside;
font-size: 18px;
text-indent: -10px;
margin-top: 10px;
margin-left: -15px;
}
li::marker {
font-size: 25px;
color: #f1992d;
}
.dis{
margin-left: 5px;
margin-top: 16px;
}
.ranking {
margin: 20px;
.distance {
font-size: 30px;
font-weight: bold;
margin-top: 12px;
margin-left: 5px;
display: inline;
}
.km {
font-weight: bold;
margin-left: 5px;
margin-top: 2px;
display: inline;
}
.rank {
font-size: 45px;
font-weight: bold;
color: #f1992d;
opacity: 80%;
margin-top: 10px;
margin-left: 55px;
}
.start-button {
display: flex;
justify-content: center;
margin-left: 30%;
width: 300rpx;
height: 300rpx;
margin: 0 auto;
margin-top: 170px;
}
</style>
\ No newline at end of file
<template>
<view>
<image class="returnBack" src="/static/login/returnBack.png" @click="goBack()"></image>
<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="userList" v-for="(item,index) in userList" :key="index">
<view class="rank">{{item.rank}}</view>
<image class="icon" :src="item.icon"></image>
<view class="username">{{item.username}}</view>
<view class="distance">{{item.distance}}km</view>
</view>
<view class="my">
<view class="rank">{{rank}}</view>
<image class="icon" :src="icon"></image>
<!-- <view class="info"> -->
<view class="username">{{username}}</view>
<view class="distance">{{distance}}km</view>
<!-- </view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {}
return {
rank: 1,
icon: '/static/sport/icon.jpg',
username: "不会取名字",
distance: 99.99,
userList: [{
rank: 1,
icon: '/static/sport/icon.jpg',
username: "不会取名字",
distance: 99.99
},{
rank: 2,
icon: '/static/sport/icon.jpg',
username: "不会取名字",
distance: 12.12
}]
}
},
methods: {
goBack() {
uni.navigateTo({
url: '/pages/sport/main'
uni.reLaunch({
url: '/pages/sport/main',
animationType: 'pop-in',
animationDuration: 300
});
}
}
......@@ -28,4 +63,90 @@
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;
}
.userList{
margin-top: 10px;
}
.my{
position: absolute;
bottom: 0px;
background-color: #EDEEF0;
width: 100%;
height: 55px;
padding: 5px 0;
}
.rank{
position: relative;
bottom: 15px;
left: 20px;
display: inline;
font-size: 20px;
font-weight: bold;
}
.icon{
position: relative;
top:2px;
left: 38px;
width: 50px;
height: 50px;
border-radius: 50%;
}
/* .info{
position: relative;
float: left;
}
.username{
float: ;
} */
.username{
display: inline;
position: relative;
font-size: 17px;
font-weight: bold;
bottom: 25px;
left: 48px;
color: #7F7F7F;
}
.distance{
display: inline;
position: relative;
font-size: 14px;
font-weight: bold;
bottom: 5px;
left: -36px;
}
</style>
\ No newline at end of file
<template>
<view class="content">
<!-- <image class="returnBack" src="/static/login/returnBack.png" @click="goBack()"></image> -->
<map id="myMap" style="width: 100%; height: 800px;" :latitude="latitude" :longitude="longitude"
:markers="markers" :polyline="polyline" show-location="true"></map>
<map id="myMap" style="width: 100%; height: 780px;" :latitude="latitude" :longitude="longitude"
:markers="markers" :polyline="polyline" show-location="true" :scale="16">
<cover-image class="returnBack" src="/static/login/returnBack.png" @click="goBack()"></cover-image>
<cover-image class="start-button" src="/static/sport/stop.png" @click="start"></cover-image>
</map>
</view>
</template>
......@@ -30,15 +32,23 @@
rotate: 0,
width: 10, //宽
height: 20, //高
title: '开始位置', //标注点名
title: '开始位置' //标注点名
}]
}
},
methods: {
goBack() {
// 关闭所有页面,打开到应用内的某个页面。
uni.reLaunch({
url: '/pages/sport/main',
animationType: 'pop-in',
animationDuration: 300
})
},
start() {
uni.navigateTo({
url: '/pages/sport/main'
url: './start'
});
},
// 位置授权
......@@ -70,12 +80,12 @@
id: 1,
latitude: res.latitude,
longitude: res.longitude,
iconPath: '/static/sport/location.png',
iconPath: '/static/sport/location.png'
}]
this.polyline[0].points.push({
latitude: that.latitude,
longitude: that.longitude
})
// this.polyline[0].points.push({
// latitude: that.latitude,
// longitude: that.longitude
// })
// that.circles = [{ //在地图上显示圆
// latitude: res.latitude,
// longitude: res.longitude,
......@@ -137,12 +147,12 @@
margin-right: auto;
}
.page-section-gap {
box-sizing: border-box;
/* padding: 0 30rpx; */
}
.page-body-button {
margin-bottom: 30rpx;
.start-button {
display: flex;
justify-content: center;
width: 300rpx;
height: 300rpx;
margin: 0 auto;
margin-top: 125%;
}
</style>
\ No newline at end of file
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<view>
<text>小队</text>
<!-- 添加小队按钮 -->
<add-team-tag></add-team-tag>
<!-- 标签栏 -->
<u-tabs :list="list" lineWidth="30" lineColor="#F1992D" :activeStyle="{
color: '#F1992D',
fontWeight: 'bold',
transform: 'scale(1.05)'
}" :inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="tabChange" :current="current">
</u-tabs>
<!-- 我的小队 -->
<view v-if="current == 0">
<view class="icon-with-name">
<image src="../../static/icon/1.png" class="icon" />
<text class="name">{{name}}</text>
</view>
<view class="content" v-if="join==null">
<view class="one-activity" v-for="item in activityList">
<image class="horn-icon" :src="'../../static/team/horn.png'"
style="width: 60px;height: 60px;margin-left: 10px;" />
<text class="text-content">{{item.title}}</text>
</view>
</view>
<view class="content" v-if="join==false">
<view class="no-join">
<view class="nojoin-icon-view">
<image class="nojoin-icon" :src="'../../static/team/nojoin.png'"
style="width: 230px;height: 200px;" />
</view>
<view class="text-no-view">
<text class="text-no">您还没有加入任何小队哦~-</text>
</view>
</view>
</view>
</view>
<!-- 加入小队 -->
<view v-if="current == 1">
</view>
</view>
</template>
<script>
export default {
// onLoad() {
// uni.hideTabBar();
// },
data() {
return {
current: 0,
show: false,
value1: "",
join: 'true',
userId: '644a643a0c801ca878983559',
list: [{
name: '我的小队'
}, {
name: '加入小队',
}, ],
name: '昵称',
activityList: [{
activityId: 1,
title: '跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步跑步步跑步跑步跑步跑步步跑步跑步跑步跑步步跑步跑步跑步跑步步跑步跑步跑步跑步!'
},
{
activityId: 2,
title: '一起来!'
}
]
};
},
methods: {
tabChange(index) {
this.current = index.index;
},
},
onLoad() {
uniCloud.callFunction({
name: 'fe-team-activityList',
data: {
userId: this.userId
}
})
.then(res => {
console.log(res),
this.name = res.result.data.username,
this.activityList = res.result.data.activityList,
this.join = res.result.join,
console.log(this.join)
})
}
}
</script>
<style>
.content {
margin-top: 10px;
}
.icon-with-name {
width: 80%;
height: 45px;
margin-left: 10px;
margin-top: 15px;
margin-bottom: 15px;
float: left;
overflow: auto;
}
.icon {
width: 45px;
height: 45px;
border-radius: 50%;
float: left;
}
.name {
float: left;
margin-bottom: auto;
margin-left: 10px;
margin-top: 9px;
font-size: 18px;
font-weight: bold;
width: 60%;
}
.one-activity {
width: 90%;
background-color: rgb(245 154 35 / 30%);
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border-radius: 15px;
overflow: auto;
display: flex;
flex-direction: row;
padding: 10px;
}
.no-join {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border-radius: 15px;
overflow: auto;
display: flex;
flex-direction: column;
padding: 10px;
}
.text-content {
font-weight: bold;
display: flex;
margin-left: 10px;
flex-direction: row;
align-items: center;
justify-content: center;
word-wrap: break-word;
}
.text-no{
font-weight: bold;
display: flex;
margin: auto;
flex-direction: column;
color: #F1992D;
}
.horn-icon {
flex-shrink: 0;
margin: auto 0;
}
.nojoin-icon{
display: flex;
flex-direction: column;
margin: auto;
display: block;
}
.nojoin-icon-view{
margin-top: 50px;
}
.text-no-view{
margin: 30px auto;
}
</style>
\ No newline at end of file
因为 它太大了无法显示 source diff 。你可以改为 查看blob
## 1.3.8(2022-01-18)
修复了一些小问题,应该...没问题了吧。。。
## 1.3.7(2022-01-14)
修复了个bug,该bug导致:手机端使用时,当获取焦点方式展开列表,列表无法滑动
## 1.3.6(2021-09-22)
修改了插件部分内部元素,防止该组件在app端时,滑动穿透。
## 1.3.5(2021-09-22)
【禁用组件】提示更明显了。新增了【正在搜索...】提示。添加了事件修饰.stop ,不知道是否能解决有事件穿透行为的bug。ps:我还没遇到这个问题,烦!
## 1.3.4(2021-09-10)
修改插件为uni_modules目录结构
{
"id": "select-lay",
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"displayName": "select-lay",
"version": "1.3.8",
"description": "简单的下拉选择插件",
"keywords": [
"select",
"下拉",
"选择"
],
"repository": "",
"engines": {
"HBuilderX": "^3.0.7"
},
"uni_modules": {
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "u"
},
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "u",
"Edge": "u",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
## 插件使用方法:
`<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>`
## 配置参数:
属性名|类型|默认值|说明
:--:|:--:|:--:|-
value|String|""|默认展示的value值
name|String|""|input的字段名
zindex|Number|""|层级,默认999,防止多个组件一起使用时下拉栏穿透
slabel|String|label|自定义列表中键值对关系,参考示例
svalue|String|value|自定义列表中键值对关系,该值对应value,参考示例
placeholder|String|请选择|无选项时展示的文字
showplaceholder|Boolean|true|下拉时是否展示请选择按钮
options|Array|无|数据列表
disabled|Boolean|false|是否禁用
## 事件:
事件名|说明|返回值
:--:|:--:|-
@selectitem|点击项目触发的事件|参数 (索引,具体项目)
## 说明:
此插件依赖scss,请务必安装!!!
## 示例:
```
<template>
<view class="content">
<form @submit="formSubmit">
<view class="item">通用写法:</view>
<select-lay :zindex="1211" :value="tval" name="name" placeholder="请选择项目" :options="datalist"
@selectitem="selectitem">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">禁用组件:</view>
<select-lay :zindex="1111" :value="tval2" name="name2" placeholder="请选择项目2" :options="datalist2"
:disabled="true">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">自定义数据索引对象:</view>
<select-lay :value="tval3" name="name3" slabel="myname" svalue="myvalue" placeholder="请选择项目3"
:options="datalist3" @selectitem="selectitem3">
</select-lay>
<view style="height:40rpx"></view>
<view class="item">取消下拉默认展示的提醒按钮</view>
<select-lay :value="tval4" name="name4" placeholder="请选择项目4" :showplaceholder="false" :options="datalist4" @selectitem="selectitem4">
</select-lay>
<button class="btn" form-type="submit">Submit</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
//模拟数据列表
datalist: [],
//模拟初始数据
tval: "value2",
//模拟数据列表
datalist2: [],
//模拟初始数据
tval2: "2value1",
//模拟数据列表
datalist3: [],
//模拟初始数据
tval3: "myvalue1",
//模拟数据列表
datalist4: [],
//模拟初始数据
tval4: "4value1"
}
},
onReady() {
this.datalist = [{
label: "label1",
value: "value1"
},
{
label: "label2",
value: "value2"
},
{
label: "label3",
value: "value3"
}
];
this.datalist2 = [{
label: "2label1",
value: "2value1"
},
{
label: "2label2",
value: "2value2"
},
{
label: "2label3",
value: "2value3"
}
];
this.datalist3 = [{
myname: "我是myname1",
myvalue: "myvalue1"
},
{
myname: "我是myname2",
myvalue: "myvalue2"
},
{
myname: "我是myname3",
myvalue: "myvalue3"
},
{
myname: "我是myname4",
myvalue: "myvalue4"
}
];
this.datalist4 = [{
label: "4label1",
value: "4value1"
},
{
label: "4label2",
value: "4value2"
},
{
label: "4label3",
value: "4value3"
}
];
},
methods: {
formSubmit(e) {
console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
},
selectitem(index, item) {
console.log(item)
if (index >= 0) {
this.tval = item.value;
} else {
this.tval = ""
}
},
selectitem3(index, item) {
console.log(item)
if (index >= 0) {
this.tval3 = item.myvalue;
} else {
this.tval3 = ""
}
},
selectitem4(index, item) {
console.log(item)
if (index >= 0) {
this.tval4 = item.value;
} else {
this.tval4 = ""
}
}
}
}
</script>
```
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册