123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- <template>
- <view>
- <u-popup
- :show="meunShow"
- @close="closeClick"
- mode="left"
- zIndex="999999"
- bgColor="#F6F8FA"
- >
- <view class="meun-pop">
- <view class="use-cont">
- <u-avatar :src="userInfo.avatar" size="44"></u-avatar>
- <view class="use-cont-name">{{ userInfo.username }}</view>
- <!-- <image class="edit-img" src="@/static/image/home/edit-icon.png" mode=""></image> -->
- </view>
- <view class="use-msg">
- <view class="use-msg-line">
- <image
- class="label-icon"
- src="@/static/image/home/phone-icon.png"
- mode=""
- ></image>
- <view class="use-msg-line-cont">
- <view>手机号</view>
- <view class="line-value">{{ userInfo.phonenum }}</view>
- </view>
- </view>
- <view class="use-msg-line">
- <image
- class="label-icon"
- src="@/static/image/home/role-icon.png"
- mode=""
- ></image>
- <view class="use-msg-line-cont">
- <view>角色</view>
- <view class="line-value">
- <view>{{ userInfo.position }}</view>
- <!-- <u-icon name="arrow-right" color="#7E838D"></u-icon> -->
- </view>
- </view>
- </view>
- <view class="use-msg-line">
- <image
- class="label-icon"
- src="@/static/image/home/version-icon.png"
- mode=""
- ></image>
- <view class="use-msg-line-cont">
- <view>版本号</view>
- <view class="line-value">
- <view>{{ system_info.appVersion }}</view>
- </view>
- </view>
- </view>
- </view>
- <button class="toLoginBtn" @click="logout">退出登录</button>
- </view>
- </u-popup>
- </view>
- </template>
- <script>
- export default {
- props: {
- userInfo: {
- type: Object,
- default: () => {},
- },
- value: {
- type: Boolean,
- default: false,
- },
- },
- watch: {
- value(val) {
- this.meunShow = val;
- },
- },
- data() {
- return {
- meunShow: false,
- system_info: {},
- };
- },
- created() {
- this.system_info = uni.getSystemInfoSync();
- console.log("system_info====", this.system_info);
- },
- methods: {
- closeClick() {
- this.meunShow = false;
- this.$emit("close");
- },
- logout() {
- this.$store.dispatch("userLogout");
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .meun-pop {
- padding: 0 32rpx;
- padding-top: calc(74rpx + var(--status-bar-height));
- width: 80vw;
- .use-cont {
- display: flex;
- align-items: center;
- &-name {
- color: #0f1828;
- font-family: "PingFang SC";
- font-size: 32rpx;
- font-weight: bold;
- margin-left: 20rpx;
- margin-right: 8rpx;
- }
- .edit-img {
- width: 32rpx;
- height: 32rpx;
- }
- }
- .use-msg {
- margin-top: 32rpx;
- border-radius: 16rpx;
- background: #fff;
- box-shadow: 0px 4rpx 16rpx 0px rgba(207, 223, 232, 0.12);
- padding: 0 32rpx;
- &-line {
- display: flex;
- align-items: center;
- .label-icon {
- width: 48rpx;
- height: 48rpx;
- }
- &-cont {
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 100rpx;
- border-bottom: 1px solid rgba(191, 200, 219, 0.5);
- margin-left: 24rpx;
- flex: 1;
- color: #0f1828;
- font-family: "PingFang SC";
- font-size: 28rpx;
- font-weight: 400;
- .line-value {
- display: flex;
- align-items: center;
- color: #666;
- .u-icon {
- margin-left: 24rpx;
- }
- }
- }
- }
- }
- .toLoginBtn {
- height: 88rpx;
- background: linear-gradient(90deg, #1a65ff 0%, #4287ff 100%);
- border-radius: 16rpx;
- color: #fff;
- margin-bottom: 32rpx;
- margin-top: 30rpx;
- }
- }
- </style>
|