dengjie commit : 完善我的页面和我的发布页面样式初步完成

This commit is contained in:
clay
2022-12-22 21:49:44 +08:00
parent 35203f0d42
commit 02e6961b06
25 changed files with 409 additions and 42 deletions

View File

@@ -22,7 +22,7 @@
{{item.desc}}
</view>
<view class="releaseDate">
<u-image src="/static/products/sy_icon_sjf.png" width="22rpx" height="22rpx"
<u-image src="/static/products/xp_icon_sjf.png" width="22rpx" height="22rpx"
:lazy-load="true">
</u-image>
<text class="release">发布日期</text>

View File

@@ -0,0 +1,83 @@
<template>
<view>
<view class="change_avatar">
<u-avatar :src="avatar" size="140rpx" shape="circle" @click="changeAvatar()"></u-avatar>
</view>
<view>
<u--form labelPosition="left" :model="model">
<u-form-item label="修改昵称" prop="userInfo.name" borderBottom>
<u--input v-model="model.userInfo.name" border="none" placeholder="请输入您的昵称"
placeholderStyle="color: #CCCCCC;font-size: 24rpx;"></u--input>
</u-form-item>
</u--form>
<u-button type="success" text="确定" color="#0EBB5B"></u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
avatar: 'https://cdn.uviewui.com/uview/album/2.jpg',
model: {
userInfo: {
name: ''
},
},
}
},
methods: {
//修改头像
changeAvatar() {
uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
count: 1, //默认选择1张图片
sizeType: ['original', 'compressed'], //original 原图compressed 压缩图,默认二者都有
success: (res) => {
console.log(res.tempFilePaths[0]); //成功则返回图片的本地文件路径列表 tempFilePaths
this.avatar = res.tempFilePaths[0] //更新本地浏览头像图片
// this.update(res.tempFilePaths[0]) //上传图片
}
});
},
update(filePath) {
const _this = this
const token = uni.getStorageSync('token')
const res = uni.uploadFile({
url: _this.action, //仅为示例,非真实的接口地址
filePath: filePath,
name: 'file',
header: {
'Authorization': token
},
success: (res) => {
// console.log(JSON.parse(res.data).data) 处理格式
this.weChatRegister({
headimg: REQUEST_BASE_URL + '/' + JSON.parse(res.data).data
}) //将真实图片地址请求给后端做修改
}
});
},
}
}
</script>
<style lang="scss">
.change_avatar {
display: flex;
justify-content: center;
align-items: center;
margin: 60rpx 0;
}
.u-button {
width: 644rpx !important;
height: 86rpx !important;
background: #0EBB5B;
border-radius: 20rpx !important;
margin-top: 230rpx;
}
</style>

View File

@@ -3,7 +3,7 @@
<u-navbar :autoBack="true" title="会员中心"></u-navbar>
<u--image src="/static/my/wo_icon_hyzxbj.png" width="750rpx" height="349rpx" :lazy-load="true">
</u--image>
<myAvatar></myAvatar>
<myAvatar :center="show"></myAvatar>
<myForm></myForm>
<view class="commitment">
{{commitment}}
@@ -21,6 +21,8 @@
data() {
return {
showM: false,
//会员中心的用户名旁边不显示edit图标
show: false,
content: `请保持手机畅通<br>
客服会及时联系您`,
commitment: '承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置'

View File

@@ -0,0 +1,146 @@
<template>
<view>
<view>
<u-tabs :list="tabsList" :scrollable="false" lineColor="#0A994A" color="#969696"
activeStyle="color:#15CA65;font-weight: bold;" :current="tabCurrent" @change="tabChange"></u-tabs>
</view>
<view v-if="tabCurrent == 0" style="background-color: #fff;">
<view v-for="(item,index) in needsList" :key="index" class="my_line"
style="padding: 24rpx 19rpx;border-bottom: 1px solid #EEEEEE;">
<text class="needs_text">{{item.needsText}}</text>
<view class="time_line">
<view class="release_time">
<text>{{item.time}}</text>
</view>
<view class="btn">
<u-icon name="edit-pen" color="#15CA65" size="20"></u-icon>
<text class="btn_text">修改</text>
</view>
<view class="btn">
<u-icon name="trash" color="#15CA65" size="20"></u-icon>
<text class="btn_text">删除</text>
</view>
</view>
</view>
</view>
<view v-if="tabCurrent == 1" style="background-color: #fff;">
<view v-for="(item,index) in ideasList" :key="index" class="my_line"
style="padding: 24rpx 19rpx; border-bottom: 1px solid #EEEEEE;">
<text class="needs_text">{{item.needsText}}</text>
<view class="time_line">
<view class="release_time">
<text>{{item.time}}</text>
</view>
<view class="btn">
<u-icon name="edit-pen" color="#15CA65" size="20"></u-icon>
<text class="btn_text">修改</text>
</view>
<view class="btn">
<u-icon name="trash" color="#15CA65" size="20"></u-icon>
<text class="btn_text">删除</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabCurrent: 0,
tabsList: [{
name: '需求发布'
}, {
name: '创意发布'
}],
needsList: [{
needsText: '需求描述需求描述需求描述需求描述需求描述需求描述需求描述需求描述需求描述描述需求描述描...',
time: '2022-12-03 09:59',
}, {
needsText: '需求描述需求描述需求描述需求描述需求描述需求描述需求描述需求描述需求描述描述需求描述描...',
time: '2022-12-03 09:59',
}, ],
ideasList: [{
needsText: '产品名称产品名称产品名称',
time: '2022-12-03 09:59',
},
{
needsText: '产品名称产品名称产品名称',
time: '2022-12-03 09:59',
},
]
}
},
methods: {
tabChange(data) {
this.tabCurrent = data.index
this.needsPublishForm = {}
},
}
}
</script>
<style lang="scss">
.u-tabs {
margin-bottom: 10rpx;
.u-tabs__wrapper__nav {
background-color: #FFFFFF;
.u-tabs__wrapper__nav__item {
padding: 0 !important;
flex: 1;
}
}
}
.my_line:last-child {
border: none !important;
}
.needs_text {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3E3E3E;
line-height: 42rpx;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.time_line {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 14rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
.release_time {
color: #969696;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
.u-icon__icon {
top: 1px !important;
}
.btn_text {
color: #15CA65;
}
}
}
</style>