xkyy/xk-doctor-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复页面样式问题

Browse Source
This commit is contained in:
年糕崽崽
2024-12-12 16:31:12 +08:00
parent d629438b93
commit c8511d5e9a
1 changed files with 226 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
subPackages/sub_workbench/workbench_code.vue
View File

@@ -1,243 +1,235 @@
<template>
<view class="">
<view class="bg"></view>
<!-- <view class="m-t-24 b-r-8 white p-32 flex-col flex-ali-center"
style="position: relative;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
<view class="bottom-border flex-row flex-jus-start m-b-32" style="width: 590rpx;">
<u-image width="96rpx" height="96rpx" shape="circle" :src="getAvatar">
<u-loading slot="loading"></u-loading>
</u-image>
<view class="m-b-32 flex-col p-col-12 flex-jus-sp m-l-32">
<view class="flex-row flex-ali-center">
<d-text :text="userInfo.name" color="#31353D" className="fs-32 "></d-text>
<d-text :text="userInfo.title.name" color="#6C7380" className="m-l-32"></d-text>
</view>
<d-text :text="userInfo.hospital['name'].replace(/^.{2}/, '**')+' '" color="#31353D"></d-text>
</view>
</view>
<u-image width="400rpx" height="400rpx" :src="userInfo.qr_code">
<u-loading slot="loading"></u-loading>
</u-image>
</view> -->
<view>
<view class="box">
<l-painter ref="painter" :board="poster" />
</view>
<view class="p-col-32 m-t-32">
<u-button :throttle-time="0" shape="circle"
:custom-style="{width:'360rpx',backgroundColor:'#6ACDBB',color:'#fff'}" :ripple="true"
@click="save">保存图片
</u-button>
</view>
</view>
</view>
<view class="body-code-qr">
<view class="bg"></view>
<view>
<view class="box">
<l-painter ref="painter" :board="poster"/>
</view>
<view class="p-col-32 m-t-32">
<u-button :throttle-time="0" shape="circle"
:custom-style="{width:'360rpx',backgroundColor:'#6ACDBB',color:'#fff'}" :ripple="true"
@click="save">保存图片
</u-button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
poster: {
css: {
// 根节点若无尺寸，自动获取父级节点
width: '560rpx'
},
views: []
},
userInfo: uni.getStorageSync('userInfo') || {},
};
},
onLoad() {
let info = uni.getStorageSync('doctorInfo') || {}
let sex = info.DoctorInfo['idcard'] ? info.DoctorInfo['idcard'].charAt(16) : 1;
let url = require(`@/static/image/${sex%2==0?'nv':'nan'}.png`);
const avatar = info.DoctorInfo['avatar'] ? info.DoctorInfo['avatar'] : info.role == 1 ? url : url
export default {
data() {
return {
poster: {
css: {
// 根节点若无尺寸，自动获取父级节点
width: '560rpx'
},
views: []
},
userInfo: uni.getStorageSync('userInfo') || {},
};
},
onLoad() {
let info = uni.getStorageSync('doctorInfo') || {}
let sex = info.DoctorInfo['idcard'] ? info.DoctorInfo['idcard'].charAt(16) : 1;
let url = require(`@/static/image/${sex % 2 == 0 ? 'nv' : 'nan'}.png`);
const avatar = info.DoctorInfo['avatar'] ? info.DoctorInfo['avatar'] : info.role == 1 ? url : url
this.poster = {
...this.poster,
views: [{
type: 'view',
css: {
width: '560rpx',
borderRadius: '16rpx',
paddingBottom: '68rpx',
paddingTop: '30rpx',
backgroundColor: '#F8FAFF'
},
views: [{
type: 'image',
src: avatar,
css: {
width: '180rpx',
height: '180rpx',
borderRadius: '50%',
marginLeft: '190rpx',
}
},
{
type: 'view',
css: {
textAlign: 'center',
marginTop: '8rpx'
},
views: [{
type: 'text',
text: info.DoctorInfo.name,
css: {
color: '#000000',
fontSize: '36rpx'
}
}, {
type: 'text',
text: info.DoctorInfo.title.name,
css: {
color: '#1E293B',
fontSize: '28rpx',
paddingTop: '10rpx',
marginLeft: '8rpx',
}
}]
},
{
type: 'view',
css: {
textAlign: 'center',
marginTop: '8rpx'
},
views: [{
type: 'text',
text: info.store.store.name,
css: {
color: '#475569',
fontSize: '24rpx'
}
}, {
type: 'text',
text: info.DoctorInfo.depart.name,
css: {
color: '#475569',
fontSize: '24rpx',
marginLeft: '10rpx',
}
}]
},
{
type: 'view',
css: {
textAlign: 'center',
marginTop: '20rpx',
marginBottom: '20rpx'
},
views: [{
type: 'image',
src: info.DoctorInfo.qr_code,
css: {
width: '388rpx',
height: '388rpx',
}
}]
},
{
type: 'view',
css: {
paddingLeft: '20rpx',
paddingRight: '20rpx',
},
views: [{
type: 'text',
text: '专业擅长',
css: {
color: '#6ACDBB',
fontSize: '28rpx',
textAlign: 'center',
marginLeft: '56rpx',
}
}, {
type: 'text',
text: info.DoctorInfo.good_at,
css: {
color: '#000000',
fontSize: '24rpx',
marginLeft: '8rpx',
marginTop: '4rpx',
}
}]
},
]
}]
}
// console.log(this.poster, 'this.poster')
},
methods: {
save() {
uni.getSetting({ //获取用户的当前设置
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum()
} else {
uni.authorize({ //重新发起获取授权
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum()
},
fail: () => {
uni.showToast({
title: '请打开保存相册权限，再点击保存相册分享',
icon: 'none',
duration: 2000
})
let timer = setTimeout(() => {
clearTimeout(timer)
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
success: e => {}
})
}, 2000)
}
})
}
}
})
},
saveImageToPhotosAlbum() {
this.$refs.painter.canvasToTempFilePathSync({
fileType: "png",
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
pathType: 'url',
quality: 1,
success: (res) => {
console.log(res.tempFilePath);
// 非H5 保存到相册
// H5 提示用户长按图另存
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
console.log('save success');
}
});
},
});
}
}
}
this.poster = {
...this.poster,
views: [{
type: 'view',
css: {
width: '560rpx',
borderRadius: '16rpx',
paddingBottom: '68rpx',
paddingTop: '30rpx',
backgroundColor: '#F8FAFF'
},
views: [{
type: 'image',
src: avatar,
css: {
width: '180rpx',
height: '180rpx',
borderRadius: '50%',
marginLeft: '190rpx',
}
},
{
type: 'view',
css: {
textAlign: 'center',
marginTop: '8rpx'
},
views: [{
type: 'text',
text: info.DoctorInfo.name,
css: {
color: '#000000',
fontSize: '36rpx'
}
}, {
type: 'text',
text: info.DoctorInfo.title.name,
css: {
color: '#1E293B',
fontSize: '28rpx',
paddingTop: '10rpx',
marginLeft: '8rpx',
}
}]
},
{
type: 'view',
css: {
textAlign: 'center',
marginTop: '8rpx'
},
views: [{
type: 'text',
text: info.store.store.name,
css: {
color: '#475569',
fontSize: '24rpx'
}
}, {
type: 'text',
text: info.DoctorInfo.depart.name,
css: {
color: '#475569',
fontSize: '24rpx',
marginLeft: '10rpx',
}
}]
},
{
type: 'view',
css: {
textAlign: 'center',
marginTop: '20rpx',
marginBottom: '20rpx'
},
views: [{
type: 'image',
src: info.DoctorInfo.qr_code,
css: {
width: '388rpx',
height: '388rpx',
}
}]
},
{
type: 'view',
css: {
paddingLeft: '20rpx',
paddingRight: '20rpx',
},
views: [{
type: 'text',
text: '专业擅长',
css: {
color: '#6ACDBB',
fontSize: '28rpx',
textAlign: 'center',
marginLeft: '56rpx',
}
}, {
type: 'text',
text: info.DoctorInfo.good_at,
css: {
color: '#000000',
fontSize: '24rpx',
marginLeft: '8rpx',
marginTop: '4rpx',
}
}]
},
]
}]
}
// console.log(this.poster, 'this.poster')
},
methods: {
save() {
uni.getSetting({ //获取用户的当前设置
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
this.saveImageToPhotosAlbum()
} else {
uni.authorize({ //重新发起获取授权
scope: 'scope.writePhotosAlbum',
success: () => {
this.saveImageToPhotosAlbum()
},
fail: () => {
uni.showToast({
title: '请打开保存相册权限，再点击保存相册分享',
icon: 'none',
duration: 2000
})
let timer = setTimeout(() => {
clearTimeout(timer)
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
success: e => {
}
})
}, 2000)
}
})
}
}
})
},
saveImageToPhotosAlbum() {
this.$refs.painter.canvasToTempFilePathSync({
fileType: "png",
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
pathType: 'url',
quality: 1,
success: (res) => {
console.log(res.tempFilePath);
// 非H5 保存到相册
// H5 提示用户长按图另存
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
console.log('save success');
}
});
},
});
}
}
}
</script>
<style>
page {
background-color: #F9FAFB;
}
</style>
<style lang="scss" scoped>
.box {
display: flex;
justify-content: center;
margin-top: 120rpx;
}
//page {
// padding: 1rpx;
// width: 100%;
// height: 100%;
// background: linear-gradient(133deg, #5B98FF 0%, #17CDC1 100%);
//}
.bg {
position: absolute;
top: 0;
left: 0;
width: 750rpx;
height: 100vh;
background: linear-gradient(133deg, #5B98FF 0%, #17CDC1 100%);
}
.box {
display: flex;
justify-content: center;
margin-top: 120rpx;
}
.body-code-qr {
width: 100%;
height: 100%;
padding: 1rpx 0;
background: linear-gradient(133deg, #5B98FF 0%, #17CDC1 100%);
}
//.bg {
// position: absolute;
// top: 0;
// left: 0;
// width: 750rpx;
// min-height: 100vh;
// background: linear-gradient(133deg, #5B98FF 0%, #17CDC1 100%);
//}
</style>