yuepenglong
/
Huiqitong
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增页面

master
岳鹏龙 11 months ago
parent
8ef9fc95f7
commit
91de808f1b
25 changed files with 1007 additions and 342 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/pages.json
  2. 2
      src/pages/index/index.vue
  3. 117
      src/pages/index/shoppage/mtbmakeMessage.vue
  4. 2
      src/pages/index/tabsComm.vue
  5. 176
      src/pages/learningCenter/detail.vue
  6. 335
      src/pages/learningCenter/index.vue
  7. 461
      src/pages/mine/index.vue
  8. 237
      src/pages/mine/porsonalinfo.vue
  9. BIN
      src/static/img/Group13.png
  10. BIN
      src/static/img/gkrs.png
  11. BIN
      src/static/img/glqy.png
  12. BIN
      src/static/img/scrs.png
  13. BIN
      src/static/img/setting.png
  14. BIN
      src/static/img/shqy.png
  15. BIN
      src/static/img/sjh.png
  16. BIN
      src/static/img/sl4.png
  17. BIN
      src/static/img/sl5.png
  18. BIN
      src/static/img/szqy.png
  19. BIN
      src/static/img/tx.png
  20. BIN
      src/static/img/wdkc.png
  21. BIN
      src/static/img/wdsq.png
  22. BIN
      src/static/img/xb.png
  23. BIN
      src/static/img/xxqd.png
  24. BIN
      src/static/img/yhm.png
  25. BIN
      src/static/img/zsxm.png

15
src/pages.json
View File

@ -125,6 +125,21 @@
"navigationBarTitleText" : "媒体帮发布信息",
"navigationStyle": "custom"
}
},
//视频图文详情
{
"path" : "pages/learningCenter/detail",
"style" :
{
"navigationBarTitleText" : ""
}
},
{
"path" : "pages/mine/porsonalinfo",
"style" :
{
"navigationBarTitleText" : "个人信息"
}
}
],
"globalStyle": {

2
src/pages/index/index.vue
View File

@ -127,7 +127,7 @@
const current = ref(0)
const list5 = reactive([
'https://file.psd.cn/p/stock/20221014/f1lj5pww4yo.jpg',
'https://img.shetu66.com/2023/07/04/1688453333865029.png',
'https://img.shetu66.com/2023/07/04/1688453333865029.png',
'https://tse3-mm.cn.bing.net/th/id/OIP-C.dg5f16itonvLphu4hOxtPgHaEK?rs=1&pid=ImgDetMain',
]);

117
src/pages/index/shoppage/mtbmakeMessage.vue
View File

@ -2,10 +2,45 @@
<u-navbar :title="'媒体帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" />
<view class="container">
<view class="formlist">
<u-form :model="form" ref="uFormRef" labelPosition="top" :rules="rules">
<u-form-item label="姓名" prop="name">
<u-input v-model="form.name" placeholder="请输入真实姓名" placeholderStyle="color: #D3D3D3;" />
</u-form-item>
<u-form-item label="标签" prop="type">
<u-input v-model="form.type" placeholder="请选择" placeholderStyle="color: #D3D3D3;" suffixIcon="arrow-down" @focus="show=true" />
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show=false"></u-picker>
</u-form-item>
<u-form-item label="联系方式" prop="number">
<u-input v-model="form.number" placeholder="请输入联系方式" placeholderStyle="color: #D3D3D3;" />
</u-form-item>
<u-form-item label="邮箱" prop="emil">
<u-input v-model="form.emil" placeholder="请输入邮箱地址" placeholderStyle="color: #D3D3D3;" />
</u-form-item>
<u-form-item label="宣传封面" prop="img">
<up-upload
:fileList="fileList"
@afterRead="afterRead"
@delete="deletePic"
name="6"
multiple
:maxCount="1"
width="250"
height="150"
>
<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
mode="widthFix" style="width: 500rpx;height: 300rpx;"></image>
</up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList6: [],
}
}
</u-form-item>
</u-form>
</view>
<view class="sumitbotton">
<view class="button">
<view class="button" @click="submit">
确认提交
</view>
</view>
@ -13,7 +48,76 @@
</template>
<script setup>
import { ref } from 'vue';
// 响应式表单数据
const form = ref({
name: '',
type: '',
number: '',
emil: '',
});
const show = ref(false);
const columns = reactive([
['中国', '美国', '日本']
]);
// 校验规则
const rules = {
name: [
{
required: true,
message: '请输入姓名',
trigger: ['blur', 'change'],
},
],
type: [
{
required: true,
message: '请输入标签',
trigger: ['blur', 'change'],
},
],
number: [
{
required: true,
message: '请输入联系方式',
trigger: ['blur', 'change'],
},
],
emil: [
{
required: true,
message: '请输入邮箱地址',
trigger: ['blur', 'change'],
},
],
};
// 表单引用
const uFormRef = ref(null);
const confirm = (val) => {
console.log(val.value[0]);
form.value.type = val.value[0]
show.value = false
}
// 提交方法
function submit() {
uFormRef.value.validate().then(valid => {
if (valid) {
uni.$u.toast('校验通过')
} else {
uni.$u.toast('校验失败')
}
}).catch(() => {
// 处理验证错误
uni.$u.toast('校验失败')
});
}
</script>
<style scoped lang="scss">
@ -64,3 +168,12 @@
}
}
</style>
<style>
.u-input {
background-color: #FFFFFF;
height: 100rpx !important;
}
.u-form-item__body__left__content__label {
white-space: nowrap;
}
</style>

2
src/pages/index/tabsComm.vue
View File

@ -120,7 +120,7 @@ const handleClickOutside = (e) => {
// 生命周期
onMounted(() => {
uni.getSystemInfoSync().windowWidth
document.addEventListener('click', handleClickOutside)
// document.addEventListener('click', handleClickOutside)
})
onUnmounted(() => {

176
src/pages/learningCenter/detail.vue
View File

@ -0,0 +1,176 @@
<template>
<view class="pagebox">
<view class="vidoepart">
<video class="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
@error="videoErrorCallback"></video>
</view>
<view class="main">
<text class="title">小白投资避坑指南</text>
<view class="peopnum">
<view class="left">
<image style="width: 26rpx;height: 28rpx;" src="@/static/img/gkrs.png" mode=""></image>
<text class="txt">观看人数：</text>
<text class="num">200</text>
</view>
<view class="left">
<image style="width: 28rpx;height: 28rpx;" src="@/static/img/scrs.png" mode=""></image>
<text class="txt">观看人数：</text>
<text class="num">200</text>
</view>
</view>
<text class="title">小白投资避坑指南</text>
<text class="message">小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑/理财课靠谱吗？ 视频文字版本的介绍内容，视频文字版本的介绍内容视频文字版本的介绍内容视频文字版本的介绍内容视频文字版本的介绍内容视频文字版本…</text>
<view class="shqy">
<view class="head">
<image style="width: 12rpx;height: 32rpx;" src="@/static/img/shqy.png" mode=""></image>
<text class="text">适合企业</text>
</view>
<view class="cards">
<view class="card">
<text class="lcxb">理财小白</text>
<text class="bz">不知道从何入手</text>
</view>
<view class="card">
<text class="lcxb">理财小白</text>
<text class="bz">不知道从何入手</text>
</view>
<view class="card">
<text class="lcxb">理财小白</text>
<text class="bz">不知道从何入手</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
const videoErrorCallback = (e) => {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
}
onLoad((param) => {
console.log(param);
})
</script>
<style scoped lang="scss">
.pagebox {
height: 100vh;
.vidoepart {
.myVideo {
width: 100vw;
}
}
.main {
padding: 30rpx 40rpx;
box-sizing: border-box;
.peopnum {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.txt {
margin-left: 8rpx;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 350;
text-align: justify; /* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
/* 观看人数： */
color: #858494;
}
.num {
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 350;
text-align: justify; /* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
/* 观看人数： */
color: #007FFF;
}
}
}
.shqy {
display: grid;
.head {
margin-top: 48rpx;
display: flex;
align-items: center;
.text {
margin-left: 18rpx;
font-family: Source Han Sans;
font-size: 30rpx;
font-weight: 350;
text-align: justify; /* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
color: #0072FF;
}
}
.cards {
margin-top: 32rpx;
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.card {
flex: 0 1 calc(50% - 10rpx);
width: 45%;
height: 144rpx;
border-radius: 24rpx;
background: #FAFDFF;
box-sizing: border-box;
border: 8rpx solid #DBEDFF;
display: grid;
justify-items: center;
align-items: center;
.lcxb {
font-family: Source Han Sans;
font-size: 30rpx;
font-weight: normal;
letter-spacing: normal;
color: #007FFF;
}
.bz {
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 350;
line-height: 32rpx;
letter-spacing: normal;
color: #858494;
}
}
}
}
.title {
font-family: Source Han Sans;
font-size: 36rpx;
font-weight: 350;
line-height: 100rpx;
letter-spacing: normal;
color: #0C092A;
}
.message {
font-family: Source Han Sans;
font-size: 30rpx;
font-weight: 300;
text-align: justify; /* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
color: #3D3D3D;
}
}
}
</style>

335
src/pages/learningCenter/index.vue
View File

@ -1,27 +1,338 @@
<template>
<view class="container">
<view class="container">
<view class="xxqd">
<view class="head">
你的学习清单
</view>
<view class="main">
<view class="text">
距离上次学习已经
<text class="hongzi"> 6</text>天
<text class="hongzi"> 20</text>时
<text class="hongzi"> 38</text>分
</view>
<view class="xxls">
<view class="xxone" v-for="(item,index) in xxList" :key="index" @click="xxClick(item)">
<image style="width: 100%;height: 238rpx;border-radius: 16rpx;" :src="item.img" mode=""></image>
<view class="xxjd">
已学{{item.xxjd}}%
</view>
</view>
</view>
</view>
</view>
<u-tabs :list="tabList" :lineWidth="34" :lineHeight="4" lineColor="#007FFF"
:activeStyle="{color: '#0C092A',fontWeight: '600',fontSize: '34rpx'}"
:inactiveStyle="{color: '#858494',fontWeight: '350',fontSize: '30rpx'}" @click="tabClick"></u-tabs>
<u-search @search="search" @clickIcon="clickIcon" shape="square" placeholder="请输入搜索内容"
placeholderColor="#088cff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14"
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx"></u-search>
</view>
<view class="KClist">
<view class="kcone" v-for="(item,index) in kcList" :key="index" @click="kcClick(item)">
<image class="img" :src="item.img" mode=""></image>
<view class="right">
<text class="title">{{item.title}}</text>
<text class="txt">{{item.txt}}</text>
<view class="bottompart">
<text class="gtsy">{{item.gtsy}}</text>
<text class="data">{{item.data}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, watch } from 'vue'
import {
ref,
watch
} from 'vue'
const xxList = ref([{
id: 0,
img: '/static/img/sl4.png',
xxjd: 50
},
{
id: 1,
img: '/static/img/sl4.png',
xxjd: 30
},
{
id: 1,
img: '/static/img/sl4.png',
xxjd: 30
}
])
const tabList = ref([{
name: '推荐'
},
{
name: '视频课'
},
{
name: '图文课'
}
])
const kcList = ref([{
img: '/static/img/sl5.png',
title: '课程标题标题标题',
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？',
gtsy: '个体私营协会',
data: '2025-04-17',
type: 'video'
},
{
img: '/static/img/sl5.png',
title: '课程标题标题标题',
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？',
gtsy: '个体私营协会',
data: '2025-04-17',
type: 'imgtxt'
},
{
img: '/static/img/sl5.png',
title: '课程标题标题标题',
txt: '小白必看！新手如何炒股票不被割韭菜？/书单推荐/股票基金避坑理财课靠谱吗？',
gtsy: '个体私营协会',
data: '2025-04-17',
type: 'imgtxt'
}
])
onShow(() => {
electionList.value = []
getList()
})
const xxClick = (item) => {
console.log(item);
}
const tabClick = (item) => {
console.log(item);
}
const search = (val) => {
console.log(val);
zhscrollRel.value.searchleMenuTap(keyword.value)
}
const clickIcon = () => {
console.log(keyword.value);
zhscrollRel.value.searchleMenuTap(keyword.value)
}
const kcClick = (item) => {
console.log(item);
uni.navigateTo({
url: '/pages/learningCenter/detail?id=' + item.type
})
}
onShow(() => {
})
</script>
<style scoped lang="scss">
.container {
padding: 20rpx;
background-color: #f9fafb;
height: 100vh;
}
.container {
padding: 24rpx;
background: linear-gradient(0deg, #F1F3F9 72%, rgba(241, 243, 249, 0.2) 88%);
height: 100vh;
box-sizing: border-box;
}
.xxqd {
display: grid;
justify-items: center;
align-items: center;
margin-bottom: 20rpx;
.head {
width: 272rpx;
height: 60rpx;
background-image: url(@/static/img/xxqd.png);
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 350;
line-height: 30rpx;
letter-spacing: normal;
color: #FFFFFF;
z-index: 1;
}
.main {
width: 100%;
height: 410rpx;
border-radius: 48rpx;
background: #FFFAF7;
box-sizing: border-box;
border: 12rpx solid #DBEDFF;
padding: 60rpx 24rpx 54rpx 24rpx;
margin-top: -40rpx;
display: grid;
justify-items: center;
align-items: flex-start;
.text {
display: flex;
align-items: center;
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: 350;
line-height: 28rpx;
letter-spacing: normal;
/* 距离上次学习已经 */
color: #0C092A;
}
.hongzi {
margin-left: 6rpx;
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: 350;
line-height: 28rpx;
letter-spacing: normal;
/* 距离上次学习已经 */
color: #FE0000;
}
.xxls {
display: flex;
margin-top: 20rpx;
gap: 26rpx;
.xxone {
display: grid;
align-items: center;
width: 192rpx;
.xxjd {
margin-top: -34rpx;
width: 100%;
height: 34rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #000000;
font-family: Source Han Sans;
font-size: 20rpx;
font-weight: 350;
line-height: 24rpx;
display: flex;
align-items: center;
letter-spacing: normal;
color: #FFFFFF;
display: grid;
justify-content: center;
align-items: center;
}
}
}
}
}
.KClist {
display: grid;
.kcone {
width: 100%;
height: 284rpx;
border-radius: 32rpx;
background: #FFFFFF;
display: flex;
margin-top: 30rpx;
box-sizing: border-box;
.img {
width: 234rpx;
height: 284rpx;
border-radius: 20rpx 0 0 20rpx;
flex: 1;
}
.right {
flex: 2;
width: 100%;
height: 100%;
padding: 20rpx 28rpx 20rpx 20rpx;
box-sizing: border-box;
display: grid;
align-items: center;
.title {
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 350;
text-align: justify;
/* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
color: #0C092A;
}
.txt {
font-family: Source Han Sans;
font-size: 24rpx;
font-weight: 350;
text-align: justify;
/* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
color: #858494;
}
.bottompart {
margin-top: 42rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.gtsy {
font-family: Source Han Sans;
font-size: 20rpx;
font-weight: 350;
text-align: justify;
/* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
color: #007FFF;
}
.data {
font-family: Source Han Sans;
font-size: 20rpx;
font-weight: 350;
text-align: right;
display: flex;
align-items: center;
letter-spacing: normal;
color: #858494;
}
}
}
}
}
</style>
<style>
.u-search {
margin: 20rpx 0rpx 0 0 !important;
}
.u-search__content {
background-color: #FFFFFF !important;
border-radius: 16rpx !important;
height: 90rpx !important;
}
.u-search__content__input {
background-color: #FFFFFF !important;
}
</style>

461
src/pages/mine/index.vue
View File

@ -1,331 +1,144 @@
<script setup lang="ts">
import useUserStore from '@/store/user'
import { list as listApi, type dateListtype, update as updateApi, getMember_mobile} from '@/api/user'
import { getAdminPhone } from '@/api/login'
const userStore = useUserStore()
const isHandleUserInfo = computed(() => Object.keys(userStore.userInfo).length === 0)
const keyword = ref('')
const list = ref<dateListtype[]>([])
const activeKey = ref(0)
const amdinPhone = ref('')
const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params })
const getList = uni.$util.throttle(() => {
if (keyword.value === '') {
uni.showToast({ title: '请输入姓名', icon: 'none' })
return
}
// uni.showLoading({ mask: true, title: '加载中...' })
listApi({ name: keyword.value, meetId: userStore.meetId })
.then((res) => {
const { data } = res as { data: dateListtype[] }
list.value = data || []
// uni.hideLoading()
})
.catch(() => uni.hideLoading())
})
const updateUserInfo = () => {
userStore.bindUser(list.value[activeKey.value].id as number).then(() => {
reset()
uni.showToast({ title: '提交成功，等待投票！', icon: 'none' })
userStore.getUserInfo()
})
}
const reset = () => {
activeKey.value = 0
keyword.value = ''
list.value = []
}
const showEdit = ref(false)
const popFrom = reactive({
label: '',
key: '',
value: ''
})
const openPopup = (key: string, label: string) => {
popFrom.label = label
popFrom.key = key
popFrom.value = userStore.userInfo[key]
showEdit.value = true
}
const save = () => {
if (popFrom.value === '') {
uni.showToast({ title: `请输入${popFrom.label}`, icon: 'none' })
return
}
uni.showLoading({ mask: true, title: '保存中...' })
updateApi({ [popFrom.key]: popFrom.value }, userStore.openId).then(() => {
uni.hideLoading()
userStore.userInfo[popFrom.key] = popFrom.value
showEdit.value = false
})
}
onShow(() => {
// reset()
// getAdminPhone().then((res) => {
// const { data } = res as { data: string }
// amdinPhone.value = data || ''
// })
})
onPullDownRefresh(() => userStore.getUserInfo())
</script>
<template>
<view class="userview">
<!-- 搜索信息 -->
<block v-if="isHandleUserInfo">
<view class="userview-search box flex">
<view class="userview-search-label">姓名</view>
<input class="flex1" type="text" placeholder="请输入您的姓名" v-model="keyword" placeholder-class="placeholder" />
<view class="userview-search-bts" @click.stop="getList">搜索</view>
</view>
<block v-if="list.length > 0">
<view
class="userview-info box"
:class="{ active: activeKey === index }"
v-for="(row, index) in list"
:key="index"
@click="activeKey = index"
>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">姓名</view>
<view class="userview-info-item-content flex">{{ row.name }}</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">电话</view>
<view class="userview-info-item-content flex">{{ row.mobile }}</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">工作单位</view>
<view class="userview-info-item-content flex">{{ row.work_unit }}</view>
</view>
</view>
</block>
<ex-empty v-show="list.length <= 0" />
<view class="flex-center-evenly">
<view class="bts plain" v-if="list.length > 0" @click.stop="updateUserInfo">确认信息</view>
<view class="bts" @click="navto('pages/mine/add')">新建信息</view>
</view>
</block>
<!-- 详细信息 -->
<block v-else>
<view class="userview-info box">
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">姓名</view>
<view class="userview-info-item-content flex">
<text>{{ userStore.userInfo.name }}</text>
</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">电话</view>
<view class="userview-info-item-content flex">
<text>{{ userStore.userInfo.mobile }}</text>
</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">性别</view>
<view class="userview-info-item-content flex">
<text>{{ userStore.userInfo.sex === 1 ? '男' : '女' }}</text>
<u-icon @click.stop="openPopup('sex', '性别')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">民族</view>
<view class="userview-info-item-content flex">
<text>{{ userStore.userInfo.nation }}</text>
<u-icon @click.stop="openPopup('nation', '民族')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">年龄</view>
<view class="userview-info-item-content flex">
<text>{{ userStore.userInfo.age }}</text>
<u-icon @click.stop="openPopup('age', '年龄')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">工作单位</view>
<view class="userview-info-item-content flex">
<text>{{ userStore.userInfo.work_unit }}</text>
<u-icon @click.stop="openPopup('work_unit', '工作单位')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">职位</view>
<view class="userview-info-item-content flex">
<text>{{ userStore.userInfo.position }}</text>
<u-icon @click.stop="openPopup('position', '职位')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view>
</view>
</view>
<view class="userview-info box admin">
<view>* 姓名和电话信息需要管理员修改</view>
<view>
<text>管理员电话：</text>
<text class="phone">{{ amdinPhone }}</text>
</view>
</view>
</block>
<u-popup :show="showEdit" mode="center" @close="showEdit = false" :round="10">
<view class="popupView">
<view class="title">修改{{ popFrom.label }}</view>
<view v-if="popFrom.key === 'sex'" class="flex-center-between sexview">
<text>性别</text>
<u-radio-group v-model="popFrom.value" placement="row">
<u-radio shape="circle" label="男" :name="1" />
<u-radio shape="circle" label="女" :name="2" />
</u-radio-group>
</view>
<u-input v-else :placeholder="`请输入${popFrom.label}`" input-align="right" v-model="popFrom.value">
<template v-slot:prefix>
<text style="color: #909399">{{ popFrom.label }}</text>
</template>
</u-input>
<view class="bts" @click="save">确认信息</view>
</view>
</u-popup>
</view>
<view class="container">
<image style="width: 100%;" src="@/static/img/ztback.png" mode="widthFix"></image>
<view class="main">
<view class="head">
<view class="left">
<u-avatar :src="'https://lingjing-online.cdn.bcebos.com/v1/lingjing-online/appavatar/2024-01-23/665e6368-eafd-4e0b-a58c-4a848cafa238.png?x-bce-process=image/resize,m_fill,w_360,h_360'" :size="72"></u-avatar>
<text class="name">褚冰枫</text>
</view>
<image style="width: 48rpx;height: 48rpx;" src="@/static/img/setting.png" mode="" @click="goeditinfo"></image>
</view>
<view class="editlist">
<view class="editone">
<view class="left">
<image style="width: 74rpx;height: 74rpx;" src="@/static/img/glqy.png" mode=""></image>
<text class="txt">关联企业</text>
</view>
<image style="width: 14.14rpx;height: 14.14rpx;" src="@/static/img/Group13.png" mode=""></image>
</view>
<view class="editone">
<view class="left">
<image style="width: 74rpx;height: 74rpx;" src="@/static/img/wdsq.png" mode=""></image>
<text class="txt">我的申请</text>
</view>
<image style="width: 14.14rpx;height: 14.14rpx;" src="@/static/img/Group13.png" mode=""></image>
</view>
<view class="editone">
<view class="left">
<image style="width: 74rpx;height: 74rpx;" src="@/static/img/wdkc.png" mode=""></image>
<text class="txt">我的课程</text>
</view>
<image style="width: 14.14rpx;height: 14.14rpx;" src="@/static/img/Group13.png" mode=""></image>
</view>
</view>
<view class="buts">
<view class="but">
退出登录
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.userview {
width: 100%;
padding: 32rpx;
min-height: 100vh;
box-sizing: border-box;
background-color: #f9fafb;
.popupView {
width: 90vw;
padding: 20rpx 40rpx;
.title {
font-size: 36rpx;
font-weight: 500;
margin-bottom: 40rpx;
}
:deep(.u-input) {
border-width: 2rpx !important;
}
.bts {
margin-top: 40rpx;
}
.sexview {
:deep(.u-radio-group) {
justify-content: flex-end !important;
}
}
}
.box {
margin-bottom: 32rpx;
border-radius: 24rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
}
&-search {
color: #4b5563;
font-size: 24rpx;
line-height: 40rpx;
padding: 46rpx 32rpx;
<script setup>
import {
onLoad
} from '@dcloudio/uni-app';
import {
ref
} from 'vue';
&-label {
margin-right: 44rpx;
}
const goeditinfo = () => {
uni.navigateTo({
url: '/pages/mine/porsonalinfo'
})
}
&-bts {
color: #2563eb;
}
}
&-info {
font-size: 28rpx;
font-weight: normal;
line-height: 40rpx;
padding: 0 32rpx 32rpx;
border: 1rpx solid #fff;
&.active {
border-color: #2563eb;
}
&.admin {
padding: 32rpx;
color: #6b7280;
margin: 0 0 60rpx;
.phone {
color: #2563eb;
}
}
&-item {
padding: 60rpx 0 24rpx;
border-top: 1rpx solid #e5e7eb;
&:first-child {
border: none;
}
&-label {
color: #4b5563;
}
&-content {
color: #1f2937;
> text {
margin-right: 16rpx;
}
}
}
}
.bts {
color: #fff;
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
border-radius: 8rpx;
padding: 24rpx 80rpx;
letter-spacing: 4rpx;
border: 1rpx solid #2563eb;
background-color: #2563eb;
</script>
&.plain {
color: #2563eb;
background-color: #eff6ff;
}
}
}
<style scoped lang="scss">
.container {
background-color: #FFFFFF;
height: 100vh;
width: 100%;
display: grid;
.main {
border-radius: 60rpx 60rpx 0rpx 0rpx;
background: #FFFFFF;
margin-top: -350rpx;
height: calc(100vh - 350rpx);
padding: 0 40rpx;
box-sizing: border-box;
.head {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
margin-top: -50rpx;
.name {
margin-top: 50rpx;
font-family: Source Han Sans;
font-size: 40rpx;
font-weight: 350;
text-align: center;
letter-spacing: normal;
/* 文本/正文 */
color: #1A1A1A;
margin-left: 30rpx;
}
}
}
.editlist {
margin-top: 24rpx;
.editone {
width: 100%;
height: 120rpx;
background: #FFFFFF;
border-bottom: 2rpx solid #f3f3f3;
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.txt {
margin-left: 36rpx;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 350;
text-align: right;
letter-spacing: normal;
color: #333333;
}
}
}
}
.buts {
width: 100%;
display: flex;
justify-content: center;
.but {
margin-top: 160rpx;
width: 574rpx;
height: 96rpx;
border-radius: 248rpx;
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans;
font-size: 36rpx;
font-weight: 500;
text-align: justify; /* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
color: #FFFFFF;
}
}
}
}
</style>

237
src/pages/mine/porsonalinfo.vue
View File

@ -0,0 +1,237 @@
<template>
<view class="container">
<view class="editbox">
<view class="editone">
<view class="left">
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/tx.png" mode=""></image>
<text class="txt">头像</text>
</view>
<view class="right">
<u-upload :fileList="form.fileList" @afterRead="afterRead" :maxCount="1">
<image
src='https://lingjing-online.cdn.bcebos.com/v1/lingjing-online/appavatar/2024-01-23/665e6368-eafd-4e0b-a58c-4a848cafa238.png?x-bce-process=image/resize,m_fill,w_360,h_360'
mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
</u-upload>
<!-- <image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png"
mode=""></image> -->
</view>
</view>
<view class="editone">
<view class="left">
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/yhm.png" mode=""></image>
<text class="txt">用户名</text>
</view>
<view class="right">
<u-popup :show="usershow" @close="usershow = false">
<view class="popupbox">
<text class="title">请填写用户名</text>
<u-input type="text" v-model="form.username" />
<view class="buts">
<view class="jujue" @click="usershow = false">
取消
</view>
<view class="yunxu" @click="sureClick('用户名')">
确认
</view>
</view>
</view>
</u-popup>
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png"
mode="" @click="usershow = true"></image>
</view>
</view>
<view class="editone">
<view class="left">
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/xb.png" mode=""></image>
<text class="txt">性别</text>
</view>
<view class="right">
<text class="value">{{form.sex}}</text>
<u-action-sheet :actions="sexlist" title="请选择性别" :show="sexshow" @select="selectClick" @close="sexshow = false" ></u-action-sheet>
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png"
mode="" @click="sexshow = true"></image>
</view>
</view>
<view class="editone">
<view class="left">
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/sjh.png" mode=""></image>
<text class="txt">绑定手机号</text>
</view>
<view class="right">
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png"
mode=""></image>
</view>
</view>
<view class="editone">
<view class="left">
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/zsxm.png" mode=""></image>
<text class="txt">真实姓名</text>
</view>
<view class="right">
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png"
mode=""></image>
</view>
</view>
<view class="editone">
<view class="left">
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/szqy.png" mode=""></image>
<text class="txt">所在企业</text>
</view>
<view class="right">
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png"
mode=""></image>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
const sexshow = ref(false)
const sexlist = ref([
{
name: '男',
},
{
name: '女',
},
]);
const selectClick = (val) => {
form.value.sex = val.name
sexshow.value = false
}
const usershow = ref(false)
const form = ref({
fileList: [],
username: '',
sex: '',
num: '',
name: '',
company: ''
})
const sureClick = (type) => {
console.log(type);
}
const afterRead = (e) => {
console.log(e);
}
</script>
<style scoped lang="scss">
.container {
height: 100vh;
width: 100%;
background: #F1F3F9;
.editbox {
background: #FFFFFF;
padding: 0 72rpx 0 62rpx;
.editone {
box-sizing: border-box;
width: 100%;
height: 120rpx;
background: #FFFFFF;
border-bottom: 2rpx solid #EBEBEB;
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.txt {
margin-left: 16rpx;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 300;
text-align: right;
letter-spacing: normal;
color: #273847;
}
}
.right {
display: flex;
align-items: center;
.value {
font-family: Source Han Sans;
font-size: 14px;
font-weight: 300;
text-align: right;
letter-spacing: normal;
color: #273847;
}
}
}
}
}
.popupbox {
display: grid;
align-items: center;
justify-items: center;
.title {
font-family: Source Han Sans;
font-size: 14px;
font-weight: 300;
line-height: 17px;
text-align: right;
letter-spacing: normal;
color: #273847;
}
.buts {
display: flex;
align-items: center;
justify-content: space-between;
.yunxu {
margin-left: 20px;
width: 180rpx;
height: 70rpx;
border-radius: 10rpx;
background: #07C160;
font-family: Source Han Sans;
font-size: 28rpx;
text-align: justify;
/* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.jujue {
width: 180rpx;
height: 70rpx;
border-radius: 10rpx;
background: #dadada;
font-family: Source Han Sans;
font-size: 28rpx;
text-align: justify;
/* 浏览器可能不支持 */
display: flex;
align-items: center;
letter-spacing: normal;
color: #393939;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>

BIN
src/static/img/Group13.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 B

BIN
src/static/img/gkrs.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 574 B

BIN
src/static/img/glqy.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
src/static/img/scrs.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 486 B

BIN
src/static/img/setting.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/static/img/shqy.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 B

BIN
src/static/img/sjh.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 649 B

BIN
src/static/img/sl4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
src/static/img/sl5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
src/static/img/szqy.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 747 B

BIN
src/static/img/tx.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/static/img/wdkc.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/static/img/wdsq.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
src/static/img/xb.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 966 B

BIN
src/static/img/xxqd.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 983 B

BIN
src/static/img/yhm.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 791 B

BIN
src/static/img/zsxm.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 818 B

Write Preview
Loading…
Cancel
Save