duxianzhang
2 years ago
13 changed files with 462 additions and 58 deletions
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<view class="page-prebook-list"> |
|||
<view class="nav"> |
|||
<view :class="'item'+(userSelectIndex==0?' active':'')">全部</view> |
|||
<view class="item">帅哥</view> |
|||
<view class="item">马家辉</view> |
|||
<view class="item">刘老板</view> |
|||
<view class="item">张小宇</view> |
|||
<view class="item">刘大琪</view> |
|||
<view class="item">帅哥</view> |
|||
<view class="item">马家辉</view> |
|||
<view class="item">刘老板</view> |
|||
<view class="item">张小宇</view> |
|||
<view class="item">刘大琪</view> |
|||
<view class="item">帅哥</view> |
|||
<view class="item">马家辉</view> |
|||
<view class="item">刘老板</view> |
|||
<view class="item">张小宇</view> |
|||
<view class="item">刘大琪</view> |
|||
</view> |
|||
|
|||
<view class="list btPadding"> |
|||
<view :class="'item '+item" v-for="(item, key) in data"> |
|||
<view class="left"> |
|||
<view class="title PfScMedium">上官梓涵</view> |
|||
<view class="date">2024.01.09 周二 09:30-12:00</view> |
|||
<view class="loction">广安门医院西单门诊部</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="status">候诊</view> |
|||
<view class="queue-num">前方<text>4</text>人</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
data:['status_wait', 'status_out_num', 'status_down', 'status_expire', 'status_ing'], |
|||
userSelectIndex:0 |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.page-prebook-list{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
background: #F8F8F8; |
|||
.nav{ |
|||
width: 100%; |
|||
display: flex; |
|||
height: 132rpx; |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
overflow-x: auto; |
|||
align-items: center; |
|||
padding: 0 18rpx; |
|||
column-gap: 20rpx; |
|||
.item{ |
|||
width: auto; |
|||
flex-shrink: 0; |
|||
padding: 0 20rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
background: rgba(201,203,209,0.25); |
|||
border-radius: 30rpx; |
|||
box-sizing: border-box; |
|||
font-size: 24rpx; |
|||
color: #616266; |
|||
&.active{ |
|||
border: 1rpx solid #5BD07A; |
|||
color: #58CA7F; |
|||
} |
|||
} |
|||
} |
|||
.list{ |
|||
width: 714rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 8rpx; |
|||
margin: 36rpx auto 0; |
|||
overflow: hidden; |
|||
.item{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin: 0 auto; |
|||
width: 692rpx; |
|||
border-bottom: 2rpx solid rgba(151,151,151,0.15); |
|||
padding: 35rpx 13rpx; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
&:last-of-type{ |
|||
border-bottom: none !important; |
|||
} |
|||
.left{ |
|||
flex-grow: 1; |
|||
flex-shrink: 0; |
|||
.title{ |
|||
min-height: 42rpx; |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
line-height: 42rpx; |
|||
margin-bottom: 28rpx; |
|||
overflow: hidden; |
|||
} |
|||
.date{ |
|||
height: 40rpx; |
|||
font-size: 28rpx; |
|||
color: #949699; |
|||
line-height: 40rpx; |
|||
margin-bottom: 12rpx |
|||
} |
|||
.loction{ |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
color: #949699; |
|||
} |
|||
} |
|||
.right{ |
|||
width: 250rpx; |
|||
flex-shrink: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// <view class="list btPadding"> |
|||
// <view :class="'item '+item" v-for="(item, key) in data"> |
|||
// <view class="left"> |
|||
// <view class="title">上官梓涵</view> |
|||
// <view class="date">2024.01.09 周二 09:30-12:00</view> |
|||
// <view class="loction">广安门医院西单门诊部</view> |
|||
// </view> |
|||
// <view class="right"> |
|||
// <view class="status">候诊</view> |
|||
// <view class="queue-num">前方<text>4</text>人</view> |
|||
// </view> |
|||
// </view> |
|||
// </view> |
|||
} |
|||
</style> |
|||
@ -1,45 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<my-pop |
|||
:pop_type="pop_type" |
|||
:title="title" |
|||
:cancel="cancel" |
|||
:confirm="confirm" |
|||
:content="content" |
|||
:inp_placeholder="inp_placeholder" |
|||
@confirm="popConfirm" |
|||
@cancel="popCancel" |
|||
></my-pop> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import pop from "@/components/pop"; |
|||
export default { |
|||
name: "HelloView", |
|||
components: { |
|||
"my-pop": pop, |
|||
}, |
|||
data() { |
|||
return { |
|||
pop_type: "content", |
|||
title: "弹窗标题", |
|||
cancel: "取消", |
|||
confirm: "确认", |
|||
content: "弹窗显示的文本内容", |
|||
inp_placeholder: "请输入内容", |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 弹窗左边按钮触发函数 |
|||
popConfirm(e) { |
|||
// e 用于接受弹窗传递的数据 |
|||
// 点击函数触发弹窗 confirm |
|||
console.log("click confirm"); |
|||
}, |
|||
// 弹窗右边按钮触发函数 |
|||
popCancel() { |
|||
console.log("click cancel"); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,183 @@ |
|||
<template> |
|||
<view class="page-user-modify"> |
|||
<view class="item-box btPadding"> |
|||
<view class="item"> |
|||
<view class="left PfScMedium">头像</view> |
|||
<view class="right" @click="upload"> |
|||
<img :src="avator" class="avator"> |
|||
<view class="avator_tips">点击上传照片</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="left PfScMedium">昵称</view> |
|||
<view class="right"> |
|||
<input type="text" placeholder="请输入用户昵称"> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="left PfScMedium">用户编号</view> |
|||
<view class="right over copy-box"> |
|||
<view>17678689931</view> |
|||
<img :src="cssUrl+'copy.svg'" class="copy" @click="copyUid('17678689931')"> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="submit-blank"></view> |
|||
</view> |
|||
|
|||
<view class="submit-box btPadding"> |
|||
<view class="primary btn btn3" hover-class="hover">保存</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
cssUrl:this.cssUrl, |
|||
avator:this.cssUrl+'default_avator.svg' |
|||
} |
|||
}, |
|||
methods: { |
|||
copyUid(uid) { |
|||
uni.setClipboardData({ |
|||
data: uid, |
|||
success: function () { |
|||
uni.showToast({ |
|||
title:'用户编号已复制', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
upload() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
success: function(res) { |
|||
var tempFilePaths = res.tempFilePaths; |
|||
uni.uploadFile({ |
|||
url: 'http://example.com/upload', |
|||
filePath: tempFilePaths[0], |
|||
name: 'file', |
|||
header: { |
|||
'content-type' : 'multipart/form-data' |
|||
}, |
|||
formData:{ |
|||
'user': 'test' |
|||
}, |
|||
success: function(res){ |
|||
console.log(res.data); |
|||
}, |
|||
fail: function(res){ |
|||
console.log(res); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.page-user-modify{ |
|||
background: #F8F8F8; |
|||
width: 100%; |
|||
height: 100vh; |
|||
box-sizing: border-box; |
|||
.item-box{ |
|||
margin-top: 20rpx; |
|||
width:710rpx; |
|||
margin: 0 auto; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
.item{ |
|||
width: 686rpx; |
|||
margin: 0 auto; |
|||
box-sizing: border-box; |
|||
padding: 40rpx 12rpx; |
|||
border-bottom: 2rpx solid rgba(151,151,151, 0.15); |
|||
display: flex; |
|||
align-items: center; |
|||
line-height: 44rpx; |
|||
justify-content: space-between; |
|||
&:last-of-type{ |
|||
border-bottom: none; |
|||
} |
|||
.left{ |
|||
height: 44rpx; |
|||
line-height: 44rpx; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
letter-spacing: 2rpx; |
|||
padding-left: 12rpx; |
|||
width: 133rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.right{ |
|||
flex-grow: 1; |
|||
position: relative; |
|||
text-align: right; |
|||
line-height: 44rpx; |
|||
.avator{ |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
background: #F8F8F8; |
|||
border-radius: 12rpx; |
|||
} |
|||
.avator_tips{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
z-index: 1; |
|||
height: 44rpx; |
|||
line-height: 44rpx; |
|||
background: rgba(0,0,0,0.28); |
|||
border-radius: 12rpx; |
|||
width: 160rpx; |
|||
font-size: 22rpx; |
|||
text-align: center; |
|||
color: #FFFFFF; |
|||
} |
|||
&.copy-box{ |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
view{ |
|||
flex-grow: 1; |
|||
max-width: 272rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
white-space: nowrap; |
|||
} |
|||
.copy{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
flex-shrink: 0; |
|||
margin-left: 16rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.submit-blank{ |
|||
width: 100%; |
|||
height: 134rpx; |
|||
} |
|||
.submit-box{ |
|||
width: 750rpx; |
|||
height: 124rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13); |
|||
position: fixed; |
|||
bottom: 0; |
|||
view{ |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,94 @@ |
|||
<template> |
|||
<view class="page-usercenter"> |
|||
<img :src="cssUrl+'user_grey.svg'" class="avator"> |
|||
<view class="ucode PfScMedium over2">UID998777</view> |
|||
<view class="menu"> |
|||
<view class="item"> |
|||
<img :src="cssUrl+'user_icon.svg'" alt=""> |
|||
<view>就诊人</view> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<img :src="cssUrl+'message.svg'" alt=""> |
|||
<view>预约列表</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<tabbar current="2"></tabbar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import tabbar from '@/components/tabbar.vue'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
cssUrl:this.cssUrl |
|||
} |
|||
}, |
|||
components:{ |
|||
tabbar:tabbar |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.page-usercenter{ |
|||
width: 100%; |
|||
height: 100vh; |
|||
overflow-y: auto; |
|||
background: #F8F8F8; |
|||
.avator{ |
|||
display: block; |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
border-radius: 100%; |
|||
margin: 17rpx auto 24rpx; |
|||
} |
|||
.ucode{ |
|||
width: 80%; |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
min-height: 56rpx; |
|||
line-height: 56rpx; |
|||
font-size: 40rpx; |
|||
color: #000000; |
|||
letter-spacing: 1rpx; |
|||
word-break: break-all; |
|||
} |
|||
.menu{ |
|||
width: 714rpx; |
|||
margin: 35rpx auto 0; |
|||
height: 206rpx; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03); |
|||
border-radius: 0rpx 0rpx 8rpx 8rpx; |
|||
padding: 0 130rpx; |
|||
box-sizing: border-box; |
|||
.item{ |
|||
width: 116rpx; |
|||
img{ |
|||
width: 70rpx; |
|||
height: 70rpx; |
|||
margin: 0 auto; |
|||
display: block; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
view{ |
|||
width: 100%; |
|||
text-align: center; |
|||
height: 40rpx; |
|||
line-height: 40rpx; |
|||
font-size: 28rpx; |
|||
color: #666666; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in new issue