新增页面

This commit is contained in:
2023-10-19 23:23:22 +08:00
parent aa47166ae7
commit 12c2e7667e
47 changed files with 1716 additions and 54 deletions

44
pages/user/feedback.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup>
import { onLoad } from "@dcloudio/uni-app"
// import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick} from "vue"
import {useStore} from '@/store/index.js'
import api from "@/api/index.js"
</script>
<template>
<view class="feedbackBox">
<view class="writeBox">
<textarea class="textarea" v-model="txt"></textarea>
</view>
<view class="btn-part">
<view class="btn">提交</view>
</view>
</view>
</template>
<style scoped lang="scss">
.feedbackBox{
padding: 20rpx;
.writeBox{
border: 2rpx solid #e2e2e2;
border-radius: 10rpx;
textarea{
width: 100%;
padding: 20rpx;
}
}
.btn-part{
position: fixed;
bottom: 40rpx;
width: 100%;
text-align: center;
.btn{
display: inline-block;
background-color: #26758d;
color: white;
padding: 20rpx 40rpx;
width: 50%;
border-radius: 20rpx;
}
}
}
</style>

View File

@@ -77,21 +77,127 @@
url:"/pages/login/login"
})
}
function toDetail(type) {
let url = ''
switch(type){
case 1:
url= ' '
break;
case 2: // 我的收藏
url= './star'
break;
case 3: // 设置
url= './setting'
break;
case 4: // 问题反馈
url= './feedback'
break;
default:
url= ' '
break;
}
uni.navigateTo({
url
})
}
function toUserInfo() {
uni.navigateTo({
url:"/pages/user/userInfo"
})
}
</script>
<template>
<view class="user-box page-box">
<view class="userinfo-box">
<view class="userinfo-box" @tap="toUserInfo">
<image :src="is_login?avatar:'../../static/avatar.png'" mode=""></image>
<view class="">
<view class="" style="font-weight: 900;font-size: 40rpx;">
{{is_login?userinfo.nickname:'未登录'}}
</view>
<uni-icons style="position: absolute;right:20rpx;top: 40%;" v-if="is_login" type="forward" color="white" size="20"></uni-icons>
</view>
<view class="btn-box" @tap="toLogin" v-if="!is_login">
<view class="btn">登录</view>
</view>
<view class="row-box" v-else>
<view class="rb-card" @tap="toDetail(1)" style="margin-bottom: 10px;">
<!-- <view class="rbc-title">手术历程</view> -->
<view class="rbc-content rbc-content-box">
<view class="rbc-content-row rbc-content-left">
<uni-icons type="calendar" color="gray" size="30"></uni-icons>
<view>已完成事项</view>
</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="notification" color="gray" size="30"></uni-icons>
<view>未完成事项</view>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(2)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="star" color="gray" size="30"></uni-icons>
我的收藏</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(3)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="gear" color="gray" size="30"></uni-icons>
设置</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(4)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="chatbubble" color="gray" size="30"></uni-icons>
问题反馈</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.rbc-content-left-box{
uni-icons{
margin-right: 20rpx;
}
display: flex;
align-items: center;
}
.row-box{
padding: 20rpx 0;
.rb-card{
padding: 20rpx;
background: white;
.rbc-title{
}
.rbc-content-box{
margin-top: 10rpx;
.rbc-content-row{
width: 50%;
text-align: center;
// padding: 40rpx 20rpx;
// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
border-radius: 10rpx;
}
}
.rbc-content{
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.btn-box{
text-align: center;
margin-top: 40rpx;
@@ -105,6 +211,7 @@
}
}
.userinfo-box{
position: relative;
image{
width: 120rpx;
height: 120rpx;
@@ -117,5 +224,8 @@
display: flex;
align-items: center;
padding: 40rpx 20rpx;
}
.user-box{
background: #f6f6f6;
}
</style>

160
pages/user/setting.vue Normal file
View File

@@ -0,0 +1,160 @@
<script setup>
import { onLoad } from "@dcloudio/uni-app"
// import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick} from "vue"
import {useStore} from '@/store/index.js'
import api from "@/api/index.js"
onLoad(() => {
// console.log(useStore.userInfo)
userinfo.value = JSON.parse(uni.getStorageSync('userInfo'))
// console.log(userinfo.value)
avatar.value = uni.getStorageSync('avatarUrl')
})
const userinfo = ref(null)
const avatar = ref(null)
// 方法
function toDetail(type) {
}
</script>
<template>
<view class="userInfoBox page-box page-bg-gray">
<view class="row-box">
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="person" color="gray" size="26"></uni-icons> -->
用户协议</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="phone" color="gray" size="26"></uni-icons> -->
隐私政策摘要</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="calendar" color="gray" size="26"></uni-icons> -->
个人信息手机清单</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="paperplane" color="gray" size="26"></uni-icons> -->
关于我们</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<!-- <uni-icons type="paperplane" color="gray" size="26"></uni-icons> -->
退出账号</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.avatar-box{
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
padding: 20rpx 0;
background: #26758d;
image{
width: 160rpx;
height: 160rpx;
background-color: white;
border-radius: 50%;
}
}
.rbc-content-right{
display: flex;
align-items: center;
background: white;
border-radius: 50%;
}
.rbc-content-left-box{
uni-icons{
margin-right: 20rpx;
}
display: flex;
align-items: center;
}
.row-box{
padding: 20rpx 0;
.rb-card{
padding: 20rpx;
background: white;
margin-bottom: 2rpx;
.rbc-title{
}
.rbc-content-box{
margin-top: 10rpx;
.rbc-content-row{
width: 50%;
text-align: center;
// padding: 40rpx 20rpx;
// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
border-radius: 10rpx;
}
}
.rbc-content{
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.btn-box{
text-align: center;
margin-top: 40rpx;
.btn{
display: inline-block;
padding: 10px 20px;
background: #e2e2e2;
color: #26758d;
border-radius: 10px;
width: 50%;
}
}
.userinfo-box{
position: relative;
image{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: white;
margin-right: 20rpx;
}
color: white;
background-color: #26758d;
display: flex;
align-items: center;
padding: 40rpx 20rpx;
}
.user-box{
background: #f6f6f6;
}
</style>

94
pages/user/star.vue Normal file
View File

@@ -0,0 +1,94 @@
<script setup>
import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
// import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick} from "vue"
import {useStore} from '@/store/index.js'
import api from "@/api/index.js"
// 生命周期
onPullDownRefresh(()=> { // 下拉刷新
})
onReachBottom(() => { // 上滑触底
})
// 变量
const list = ref([
{
id:1,
cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
title:'金秋相逢 共叙合作',
reading_num:100,
content:`
新华社北京10月18日电 金秋时节,北京再迎盛会:第三届“一带一路”国际合作高峰论坛隆重举行。
春发其华,秋收其实。
共建“一带一路”走过了第一个蓬勃十年,正值风华正茂,务当昂扬奋进,奔向下一个金色十年!
`
},
{
id:2,
cover_img:'https://ms.bdimg.com/pacific/0/pic/1083217647_-478899572.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00',
title:'金秋相逢 共叙合作',
reading_num:100,
content:`
新华社北京10月18日电 金秋时节,北京再迎盛会:第三届“一带一路”国际合作高峰论坛隆重举行。
春发其华,秋收其实。
共建“一带一路”走过了第一个蓬勃十年,正值风华正茂,务当昂扬奋进,奔向下一个金色十年!
`
}
])
// 方法
function toDetail(item) {
let info = encodeURIComponent(JSON.stringify(item))
// console.log(info)
uni.navigateTo({
url:"/pages/wikipedia/detail?info="+info+"&id="+item.id
})
}
</script>
<template>
<view class="starBox page-box page-bg-gray">
<view class="list-box">
<view class="lb-card" v-for="(item,i) in list" @tap="toDetail(item)">
<view class="lb-left">
<image :src="item.cover_img" mode="aspectFill"></image>
</view>
<view class="lb-right">
<view class="lb-title">{{item.title}}</view>
<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.starBox{
}
.starBox{
.list-box{
.lb-card{
display: flex;
align-items: center;
padding: 20rpx;
border-bottom: 2rpx solid #eaeaea;
.lb-left{
image{
width: 120rpx;
height: 120rpx;
margin-right: 20rpx;
}
}
.lb-right{
display: flex;
flex-direction: column;
justify-content: space-between;
.lb-title{
font-weight: 900;
font-size:32rpx ;
margin-bottom: 20rpx;
}
}
}
}
}
</style>

157
pages/user/userInfo.vue Normal file
View File

@@ -0,0 +1,157 @@
<script setup>
import { onLoad } from "@dcloudio/uni-app"
// import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick} from "vue"
import {useStore} from '@/store/index.js'
import api from "@/api/index.js"
onLoad(() => {
// console.log(useStore.userInfo)
userinfo.value = JSON.parse(uni.getStorageSync('userInfo'))
console.log(userinfo.value)
avatar.value = uni.getStorageSync('avatarUrl')
})
const userinfo = ref(null)
const avatar = ref(null)
// 方法
function toDetail(type) {
}
</script>
<template>
<view class="userInfoBox page-box page-bg-gray">
<view class="avatar-box">
<image :src="avatar" mode="aspectFill"></image>
</view>
<view class="row-box">
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="person" color="gray" size="26"></uni-icons>
姓名</view>
<view class="rbc-content-row rbc-content-right">
{{userinfo?.nickname}}
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="phone" color="gray" size="26"></uni-icons>
电话</view>
<view class="rbc-content-row rbc-content-right">
{{userinfo?.phone}}
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="calendar" color="gray" size="26"></uni-icons>
手术时间</view>
<view class="rbc-content-row rbc-content-right">
2023-10-1
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(1)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="paperplane" color="gray" size="26"></uni-icons>
手术医院</view>
<view class="rbc-content-row rbc-content-right">
金山医院
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.avatar-box{
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
padding: 20rpx 0;
background: #26758d;
image{
width: 160rpx;
height: 160rpx;
background-color: white;
border-radius: 50%;
}
}
.rbc-content-right{
display: flex;
align-items: center;
background: white;
border-radius: 50%;
}
.rbc-content-left-box{
uni-icons{
margin-right: 20rpx;
}
display: flex;
align-items: center;
}
.row-box{
padding: 20rpx 0;
.rb-card{
padding: 20rpx;
background: white;
margin-bottom: 2rpx;
.rbc-title{
}
.rbc-content-box{
margin-top: 10rpx;
.rbc-content-row{
width: 50%;
text-align: center;
// padding: 40rpx 20rpx;
// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
border-radius: 10rpx;
}
}
.rbc-content{
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.btn-box{
text-align: center;
margin-top: 40rpx;
.btn{
display: inline-block;
padding: 10px 20px;
background: #e2e2e2;
color: #26758d;
border-radius: 10px;
width: 50%;
}
}
.userinfo-box{
position: relative;
image{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: white;
margin-right: 20rpx;
}
color: white;
background-color: #26758d;
display: flex;
align-items: center;
padding: 40rpx 20rpx;
}
.user-box{
background: #f6f6f6;
}
</style>