提交 4dcc0d25 编写于 作者: R Renic1

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
......@@ -39,15 +39,7 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/sport/ready",
"style": {
"navigationStyle": "custom"
}
},
{
}, {
"path": "pages/login/login",
"style": {
"navigationStyle": "custom"
......@@ -67,6 +59,11 @@
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/sport/ready",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/sport/test",
"style": {
......@@ -77,6 +74,11 @@
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/sport/start",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/discover/discover-detail",
"style": {
......@@ -103,6 +105,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/post/post-detial",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
<template>
<view>
<view class="main">
<view class="modify">
<image class="modify-icon" src="/static/my/main/modify-icon.png" @click="goToModify()"></image>
</view>
......@@ -45,12 +48,14 @@
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
iStatusBarHeight:0,
nickname:'王二蛋',
schoolName:'福州大学',
teamName:'must go',
......@@ -73,11 +78,15 @@
url: '/pages/my/my-resetpassword'
})
}
},
onLoad() {
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
</script>
<style>
.main {
position: absolute;
width: 100%;
......
<template>
<veiw class="main">
<view class="return">
<view class="return-btn" @click="goBack"></view>
<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="head-portrait">
<view class="head-portrait-icon"></view>
</view>
<view class="info">
<veiw class="nickname">
<span>用户名:</span>
<input type="text" :value="nickname" class="in" placeholder="请输入用户名"></input>
</veiw>
<veiw class="school">
<span>&emsp;校:</span>
<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" class="in" placeholder="请输入手机号"></input>
</veiw>
<veiw class="gender">
<span>&emsp;别:</span>
<radio-group>
<label>
<radio :value="'0'" checked="checked" />
<radio :value="'1'" />
</label>
</radio-group>
</veiw>
</view>
<view class="confirm">
<button class="confirm-btn" @click="confirmModification()">确认修改</button>
<view class="container">
<view class="ui-all">
<view class="avatar" @tap="avatarChoose">
<view class="imgAvatar">
<view class="iavatar" :style="'background: url('+avatar+') no-repeat center/cover #eeeeee;'">
</view>
</view>
<text v-if="avatar">修改头像</text>
<text v-if="!avatar">设置头像</text>
<button v-if="!avatar" 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>
</veiw>
</view>
</template>
<script>
import {
pathToBase64,
base64ToPath
} from 'js_sdk/mmmm-image-tools/index.js';
export default {
data() {
return {
schoolChannelid:'',
school:'',
nickname:'王二蛋',
tel:'15305986885',
allSchool: [{
type: '福州大学',
typeid: 1
sex: [{
id: 1,
name: ''
}, {
type: 'xx大学',
typeid: 2
id: 2,
name: ''
}],
sex: [{
value: 1,
label: ''
},
{
value: 2,
label: ''
}]
index1: 0,
school: [{
id: 1,
name: '福州大学'
}, {
id: 2,
name: 'xx大学'
}],
index2: 0,
avatar: '',
// url: '',
nickName: '王二蛋',
mobile: '15305986885',
headimg: ''
}
},
methods:{
selectitem(index, item) {
this.schoolChannelid = item.typeid;
if (index >= 0) {
this.school = this.allSchool[index].typeid;
} else {
this.school = ""
}
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 => {
that.avatar = base64;
//将文件转化为base64并显示
// that.avatarUpload(base64); //同时将头像上传至数据库进行存储
}).catch(error => {
console.error(error)
})
}
});
},
confirmModification(){
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('点击了取消按钮');
}
}
title: '温馨提示', //提示标题
content: '确认修改你的个人信息吗', //提示内容
showCancel: true, //是否显示取消按钮
success:res => {
if (res.confirm) { //confirm为ture,代表用户点击确定
let that = this;
let nickname = that.nickName;
let mobile = that.mobile;
// 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;
}
// that.updata(updata);
} else if (res.cancel) { //cancel为ture,代表用户点击取消
console.log('点击了取消按钮');
}
}
})
},
isPoneAvailable(poneInput) {
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(poneInput)) {
return false;
} else {
return true;
}
},
goBack(){
// 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则上上页
})
delta: 1, //返回层数,2则上上页
})
}
},
onLoad() {
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
</script>
<style>
.main {
<style lang="less">
.container {
position: absolute;
width: 100%;
height: 100%;
background-color: #EDEEF0;
}
.return{
/* border: 2rpx solid #000; */
height: 10%;
}
.return-btn{
width: 70rpx;
height: 70rpx;
margin-top: 50rpx;
margin-left: 20rpx;
background-size:100% 100%;
background-image:url("/static/my/exit-icon.png");
background-repeat:no-repeat;
}
.head-portrait{
height: 25%;
}
.head-portrait-icon {
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
width: 250rpx;
height: 250rpx;
border-radius: 50%;
background-size:100% 100%;
background-image:url("/static/my/main/head-portrait.png") ;
background-repeat:no-repeat;
}
.info{
width:70%;
height: 30%;
margin-left: auto;
margin-right: auto;
display: block;
}
.nickname{
height: 15%;
display: flex;
align-items: center;
width: 100%;
/* border-bottom: 1px solid #ccc; */
}
.school{
height: 15%;
margin-top: 10%;
display: flex;
align-items: center;
width: 100%;
border: none;
/* border-bottom: 1px solid #ccc; */
}
.seclect-school{
width: 73%;
border: 1px solid #ccc;
}
.tel{
height: 15%;
margin-top: 10%;
display: flex;
align-items: center;
.top {
width: 100%;
/* border-bottom: 1px solid #ccc; */
height: 50px;
background-color: #EDEEF0;
text-align: center;
}
.in{
height: 80rpx;
border: 1px solid #ccc;
.back {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: left;
margin-left: 10px;
}
.gender{
margin-top: 10%;
display: flex;
align-items: center;
width: 100%;
.empty {
width: 40px;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
float: right;
margin-right: 10px;
}
.confirm{
height: 25%;
.title {
font-size: 20px;
margin-top: 10px;
font-weight: bold;
color: #f1992d;
display: inline-block;
}
.confirm-btn{
background-color:#F1992D ;
color: #FFFFFF;
width:70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
border-radius: 20rpx;
.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>
<view class="main">
<view class="return">
<!-- <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">
......@@ -12,11 +18,13 @@
</veiw>
<veiw class="password">
<span>&ensp;&ensp;码:</span>
<input placeholder="请输入新密码" type="text" :password="showPassword" name="input"></input>
<input placeholder="请输入新密码" type="text" @input="bindNewPassword" :password="showPassword"
name="input"></input>
</veiw>
<veiw class="password">
<span>确认密码:</span>
<input placeholder="请确认密码" type="text" :password="showPassword" name="input"></input>
<input placeholder="请确认密码" type="text" @input="bindConfirmPassword" :password="showPassword"
name="input"></input>
</veiw>
</view>
<view class="confirm">
......@@ -27,37 +35,85 @@
<script>
export default {
data() {
return {
showPassword: true,
data() {
return {
showPassword: true,
newPassword: '',
confirmPassword: '',
}
},
methods: {
bindNewPassword(e) {
this.newPassword = e.detail.value;
},
bindConfirmPassword(e) {
this.confirmPassword = e.detail.value;
},
// showPwd: function() {
// this.showPassword = !this.showPassword;
// },
confirmModification() {
uni.showModal({
title: '温馨提示', //提示标题
content: '确认修改密码吗', //提示内容
showCancel: true, //是否显示取消按钮
success: res => {
if (res.confirm) { //confirm为ture,代表用户点击确定
let that = this;
let newPassword = that.newPassword;
let confirmPassword = that.confirmPassword;
if (!that.isPasswordAvailable(newPassword)) {
uni.showToast({
title: '密码长度在8-20位!',
icon: 'none',
duration: 2000
});
return;
} else if (!that.isConfirmPasswordAvailable(newPassword, confirmPassword)) {
uni.showToast({
title: '两次密码不一致',
icon: 'none',
duration: 2000
});
return;
} else {
// updata.mobile = mobile;
//return;
}
} else if (res.cancel) { //cancel为ture,代表用户点击取消
console.log('点击了取消按钮');
}
}
})
},
isPasswordAvailable(newPassword) {
if (newPassword.length > 20 || newPassword.length < 8) {
return false;
} else {
return 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则上上页
})
isConfirmPasswordAvailable(newPassword, confirmPassword) {
if (newPassword == confirmPassword) {
return true;
} else {
return false;
}
}
},
goBack() {
uni.navigateBack({
delta: 1, //返回层数,2则上上页
})
},
onload() {
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
}
</script>
<style>
......@@ -65,48 +121,77 @@
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: 20rpx;
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;
}
.content{
width:80%;
.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;
}
.content {
width: 80%;
margin-top: 50%;
margin-left: auto;
margin-right: auto;
}
.password{
.password {
margin-top: 50rpx;
height:20%;
height: 20%;
display: flex;
align-items: center;
/* border-bottom: 1px solid #ccc; */
}
.password span{
.password span {
font-size: 35rpx;
}
.password input{
.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;
......
<template>
<view class="main">
<view class="return">
<view class="return-btn" @click="goBack"></view>
<view class="top">
<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
</view>
<view class="profile">
<view class="profile-title">
......@@ -54,6 +55,9 @@
uni.navigateBack({
delta:1,//返回层数,2则上上页
})
},
onload(){
plus.navigator.setStatusBarBackground('#EDEEF0');
}
}
}
......@@ -66,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; */
......
......@@ -2,7 +2,7 @@
<view class="content">
<!-- 页头 -->
<view class="top">
<image @click="back" class="back" :src="'../../static/post/返回.png'"></image>
<image @click="back" class="back" :src="'../../static/icon/返回.png'"></image>
<view class="title">发布帖子</view>
<image class="add" :src="'../../static/post/发送.png'"></image>
</view>
......
<template>
<view>
<view style="width: 100%;">
<!-- 页头 -->
<view class="top">
<image @click="back" class="back" :src="'../../static/icon/返回.png'"></image>
<view class="title">帖子详情</view>
<span class="empty"></span>
</view>
<!-- 帖子内容 -->
<view class="one-post">
<view class="icon-with-name">
<image src="../../static/icon/1.png" class="icon" />
<text class="name">{{name}}</text><br />
<text class="add-time">{{time}}</text>
</view>
<view class="content">
<text class="text-content">{{textContent}}</text>
<view class="img-conetent">
<!-- 多张图片 -->
<view class="one-img" v-for="img in pictureList">
<image :src="img.picture" class="post-pic" @click="showPic(img.picture)"></image>
</view>
</view>
</view>
<!-- 点赞和评论 -->
<view class="like-and-comment">
<view class="icon-and-num">
<image class="like-icon" :src="isLike==1?'../../static/post/喜欢2.png':'../../static/post/喜欢.png'"
style="width: 16px;height:16px;" @click="changeLike" />
<text style="font-size: 12px;">{{like}}</text>
<image class="comment-icon" :src="'../../static/post/评论.png'"
style="width: 16px;height: 16px;margin-left: 10px;" @click="addComment()" />
<text style="font-size: 12px;">{{comment}}</text>
</view>
</view>
</view>
<!-- 分隔线 -->
<view class="parting-line"></view>
<!-- 评论区 -->
<view class="comment-content">
<!-- 评论数 -->
<text class="comment-size">评论 120</text>
<!-- 点击进入评论 -->
<view class="comment">
<image
:src="'https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg'"
class="icon-small" />
<span @click="addComment" class="comment-buttun"><text style="margin-left:8px;margin-top: 5px;float: left">写评论</text></span>
</view>
<!-- 评论内容 -->
<view class="one-comment">
<image
:src="'https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg'"
class="icon-small" />
<text class="name-small">{{name}}</text><br />
<text class="comment-text-content">11111111111111111111111111111111111111111111111111111111</text><br />
<!-- 时间和点赞 -->
<view class="like-and-time">
<text class="add-time">{{time}}</text>
<view class="icon-and-num">
<image class="like-icon" :src="isLike==1?'../../static/post/喜欢2.png':'../../static/post/喜欢.png'"
style="width: 16px;height:16px;" @click="changeLike" />
<text style="font-size: 12px;">{{like}}</text>
</view>
</view>
<u-line color="#EDEEF0"></u-line>
</view>
</view>
<!-- 弹出的评论框 -->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="input" message="评论成功" title="评论" placeholder="请输入内容" :duration="2000"
:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
}
current: 1,
show: false,
value1: "",
name: '昵称',
time: '2023.10.3 11:19',
textContent: '今日打卡',
like: 200,
isLike: 1,
comment: 120,
pictureList: [{
picture: "https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg"
},
{
picture: "https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg"
},
{
picture: "https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg"
},
],
};
},
methods: {
//输入评论
confirm(value) {
// 输入框的值
console.log(value)
this.$refs.popup.close();
uni.showTabBar();
},
//新增评论
addComment() {
this.$refs.popup.open();
uni.hideTabBar();
},
close() {
this.$refs.popup.close();
},
//返回键
back(){
uni.navigateBack({
delta:1,//返回层数,2则上上页
})
},
// 图片放大
showPic(imgUrl) {
let arr = [];
arr.push(imgUrl)
console.log(arr, '图片的地址')
uni.previewImage({
current: 0,
urls: arr
});
},
//点赞状态改变
changeLike() {
if (this.isLike == 1) {
this.isLike = 0;
} else {
this.isLike = 1;
}
},
//新增评论
addComment() {
this.$refs.popup.open();
uni.hideTabBar();
},
close() {
this.$refs.popup.close();
uni.showTabBar();
},
//输入评论
confirm(value) {
// 输入框的值
console.log(value)
this.$refs.popup.close();
uni.showTabBar();
},
}
}
</script>
<style>
.one-comment {
width: 100%;
float: left;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: auto;
}
.comment-buttun {
background-color: #EDEEF0;
float: left;
margin-left: 10px;
width: 80%;
height: 25px;
border-radius: 15px;
font-size: 12px;
}
.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 {
margin-top: 15px;
display: inline-block;
}
.one-post {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border-radius: 15px;
overflow: auto;
}
.icon-with-name {
width: 80%;
height: 40px;
margin-left: 10px;
margin-top: 15px;
float: left;
overflow: auto;
}
.icon {
width: 40px;
height: 40px;
border-radius: 50%;
float: left;
}
.icon-small {
width: 25px;
height: 25px;
border-radius: 50%;
float: left;
margin-left: 10px;
}
</style>
.name {
float: left;
margin-bottom: auto;
margin-left: 10px;
margin-top: 5px;
font-size: 12px;
font-weight: bold;
width: 60%;
}
.name-small {
float: left;
margin-bottom: auto;
margin-left: 5px;
margin-top: 8px;
font-size: 12px;
font-weight: bold;
}
.add-time {
float: left;
font-size: 12px;
transform: scale(0.7);
}
.text-content {
float: left;
margin-top: 20px;
margin-left: 10%;
overflow: auto;
width: 80%;
word-wrap: break-word;
font-size: 12px;
}
.comment-text-content {
float: left;
margin-top: 5px;
margin-left: 10%;
margin-right: 10%;
overflow: auto;
width: 80%;
word-wrap: break-word;
font-size: 12px;
}
.img-conetent {
margin-top: 5px;
margin-left: 10%;
overflow: auto;
width: 80%;
float: left;
}
.one-img {
float: left;
width: 32%;
height: 90px;
margin-left: 2px;
margin-top: 2px;
}
.single-pic {
width: 100%;
border-radius: 5px;
height: 200px;
}
.post-pic {
float: left;
width: 100%;
height: 100%;
border-radius: 5px;
}
.like-and-comment {
float: left;
margin-top: 5px;
margin-left: 10%;
height: 25px;
width: 80%;
}
.like-and-time{
float: left;
margin-top: 10px;
margin-left: 5%;
height: 25px;
width: 90%;
}
.icon-and-num {
float: right;
margin-bottom: 10px;
}
.parting-line {
width: 100%;
margin-top: 20px;
background-color: #EDEEF0;
height: 10px;
}
.comment-size {
margin-left: 10px;
float: left;
margin-top: 10px;
font-size: 13px;
}
.comment {
width: 100%;
height: 25px;
float: left;
margin-top: 10px;
}
</style>
\ No newline at end of file
......@@ -18,7 +18,7 @@
<!-- 所有帖子 -->
<view v-if="current == 1">
<!-- 单个帖子 -->
<view class="one-post">
<view class="one-post" @click="toDetial" >
<view class="icon-with-name">
<image src="../../static/icon/1.png" class="icon" />
<text class="name">{{name}}</text>
......@@ -43,10 +43,10 @@
<view class="like-and-comment">
<view class="icon-and-num">
<image class="like-icon" :src="isLike==1?'../../static/post/喜欢2.png':'../../static/post/喜欢.png'"
style="width: 20px;height:20px;" @click="changeLike" />
style="width: 16px;height:16px;" @click.stop="changeLike" />
<text style="font-size: 15px;">{{like}}</text>
<image class="comment-icon" :src="'../../static/post/评论.png'"
style="width: 20px;height: 20px;margin-left: 10px;" @click="addComment()" />
style="width: 16px;height: 16px;margin-left: 10px;" />
<text style="font-size: 15px;">{{comment}}</text>
</view>
</view>
......@@ -60,11 +60,7 @@
<text>我的帖子</text>
</view>
<!-- 弹出的评论框 -->
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="input" message="评论成功" title="评论" placeholder="请输入内容" :duration="2000"
:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
</view>
</template>
......@@ -101,6 +97,11 @@
},
methods: {
toDetial(){
uni.navigateTo({
url: '/pages/post/post-detial'
})
},
tabChange(index) {
this.current = index.index;
//console.log(this.current)
......@@ -133,7 +134,7 @@
urls: arr
});
},
//点赞状态
changeLike() {
if (this.isLike == 1) {
this.isLike = 0;
......@@ -141,21 +142,8 @@
this.isLike = 1;
}
},
addComment() {
this.$refs.popup.open();
uni.hideTabBar();
},
close() {
this.$refs.popup.close();
uni.showTabBar();
},
confirm(value) {
// 输入框的值
console.log(value)
this.$refs.popup.close();
uni.showTabBar();
},
}
......@@ -236,6 +224,7 @@
.single-pic {
width: 100%;
border-radius: 5px;
height: 200px;
}
.post-pic {
......
<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
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册