xx-applets/src/pages/member/member.vue

<template>
    <app-layout title="我的" btnType="unset">
        <view class="member-header">
            <view class="headimg">
                <image class="img-src" :src="require('@/static/temp/member/1.png')" mode="aspectFill" />
            </view>
            <view class="member-desc" v-if="isLogin">
                <text class="nickname">{{ userInfo.nickname || "微信用户" }}</text>
                <view class="mobile">
                    <text class="text">{{ userInfo.mobile }}</text>
                </view>
            </view>
            <view class="member-desc" v-else @click="utils.toPage('/pages/auth/auth')">
                <text class="nickname">请登录后再操作</text>
                <view class="mobile">
                    <text class="text">点击去登录</text>
                </view>
            </view>
        </view>
        <view class="menu-container">
            <view class="common-form-widget-group">
                <view class="widget-item" @click="toPage('/pages/address/address?openType=list')">
                    <text class="iconfont icon-dingwei icon"></text>
                    <text class="title">我的地址</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item">
                    <text class="iconfont icon-tousu icon"></text>
                    <text class="title">意见投诉</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item">
                    <text class="iconfont icon-kefufill icon"></text>
                    <text class="title">联系客服</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="toPage('/pages/member/setting')">
                    <text class="iconfont icon-shezhixitongshezhigongnengshezhishuxing icon"></text>
                    <text class="title">设置</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
            </view>
            <view class="common-form-widget-group">
                <view class="widget-item">
                    <text class="iconfont icon-gongren icon"></text>
                    <text class="title">我是师傅</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="toPage('/pages/service/other/project')">
                    <text class="iconfont icon-cailiaogongcheng icon"></text>
                    <text class="title">工程安装</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="toPage('/pages/service/other/business')">
                    <text class="iconfont icon-qiye icon"></text>
                    <text class="title">企业安装合作</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import { mapState } from "vuex";
export default {
    name: "member",
    data() {
        return {
            utils: this.$utils,
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapState({
            isLogin: (state) => state.user.token.length > 0,
            userInfo: (state) => state.user.info,
        }),
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        toPage(url) {
            if (!this.isLogin) {
                this.$store.commit("user/showLoginModal", true);
                return;
            }
            this.$utils.toPage(url);
        },
    },
};
</script>

<style lang="less" scoped>
.member-header {
    width: 100%;
    height: 286rpx;
    background-color: #8c9bec;
    padding: 74rpx 40rpx 0 40rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .headimg {
        width: 110rpx;
        height: 110rpx;
        .img-src {
            width: 100%;
            height: 100%;
        }
    }
    .member-desc {
        width: 560rpx;
        height: 110rpx;
        box-sizing: border-box;
        padding-left: 40rpx;
        .nickname {
            font-size: 30rpx;
            font-weight: bold;
            color: #ffffff;
            letter-spacing: 1rpx;
            line-height: 30rp;
        }
    }
    .mobile {
        width: 100%;
        margin-top: 20rpx;
        .text {
            font-size: 36rpx;
            font-weight: bold;
            line-height: 36rpx;
            letter-spacing: 1rpx;
            color: #ffffff;
        }
    }
}
.menu-container {
    position: relative;
    top: -72rpx;
    width: 670rpx;
    margin: 0 auto;
}
.common-form-widget-group {
    margin-bottom: 30rpx;
    padding: 24rpx 0;
    background-color: #ffffff;
    .widget-item {
        margin-top: 0;
        padding: 30rpx 40rpx;
        line-height: 35rpx;
        .title {
            padding: 30rpx 90rpx;
        }
        .icon,
        .more {
            top: 28rpx;
        }
        .icon {
            font-size: 28rpx;
        }
        .icon.icon-dingwei {
            font-size: 35rpx;
        }
        .icon.icon-cailiaogongcheng {
            font-size: 28rpx;
        }
        .icon.icon-qiye {
            font-size: 28rpx;
        }
        .icon.icon-tousu {
            font-size: 35rpx;
        }
        .icon.icon-kefufill {
            font-size: 35rpx;
        }
        .icon.icon-shezhixitongshezhigongnengshezhishuxing {
            font-size: 35rpx;
        }
        .icon.icon-gongren {
            font-size: 35rpx;
        }
    }
}
</style>