124 lines
2.7 KiB
Vue
124 lines
2.7 KiB
Vue
<template>
|
|
<view v-if="buttonInfo">
|
|
<image :style="{marginTop: buttonInfo.bottom + 10 + 'px'}" src="/static/images/background_mine.png"
|
|
class="background-image"></image>
|
|
<view class="view">
|
|
<view class="view-button" @click="toUsereInfo">
|
|
<view>个人信息</view>
|
|
<image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="view-line"></view>
|
|
<label for="contact">
|
|
<view class="view-button">
|
|
<view>客服</view>
|
|
<image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
|
|
</view>
|
|
</label>
|
|
<view class="view-line"></view>
|
|
<view class="view-button" @click="toWebview">
|
|
<view>关于</view>
|
|
<image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="button-logout">退出</view>
|
|
</view>
|
|
<button open-type="contact" id="contact"></button>
|
|
</template>
|
|
|
|
<script>
|
|
import { useBasicStore } from '@/stores/basic'
|
|
import { mapState, mapActions } from 'pinia'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
buttonInfo: null,
|
|
deviceInfo: null
|
|
}
|
|
},
|
|
async onLoad() {
|
|
this.deviceInfo = await this.getDeviceInfo()
|
|
this.buttonInfo = await this.getButtonInfo()
|
|
console.log(this.deviceInfo)
|
|
console.log(this.buttonInfo.top)
|
|
},
|
|
methods: {
|
|
...mapActions(useBasicStore, ['getDeviceInfo', 'getButtonInfo', 'routeJump']),
|
|
toUsereInfo() {
|
|
this.routeJump({
|
|
name: 'userInfo'
|
|
})
|
|
},
|
|
toWebview() {
|
|
this.routeJump({
|
|
name: 'webview',
|
|
params: {
|
|
type: 'default'
|
|
}
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: $uni-bg-color-grey;
|
|
}
|
|
</style>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.background-image {
|
|
margin-left: 20rpx;
|
|
width: 710rpx;
|
|
height: 156rpx;
|
|
border-radius: 32rpx;
|
|
}
|
|
|
|
.view {
|
|
margin-top: 32rpx;
|
|
border-radius: 32rpx;
|
|
width: 710rpx;
|
|
margin-left: 20rpx;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.view-button {
|
|
padding: 0 20rpx 0 40rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #292826;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 80rpx;
|
|
}
|
|
|
|
.icon-arrow {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.view-line {
|
|
width: 100%;
|
|
height: 3rpx;
|
|
background: #EBEBEB;
|
|
}
|
|
|
|
.button-logout {
|
|
position: absolute;
|
|
border-radius: 46rpx;
|
|
bottom: 40rpx;
|
|
width: 710rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
margin-left: 20rpx;
|
|
background: #ec433c;
|
|
color: #ffffff;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|