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="info.headimg" mode="aspectFill" />
            </view>
            <view class="member-desc">
                <text class="nickname">{{ info.nickname }}</text>
                <view class="mobile">
                    <text class="text">{{ info.mobile }}</text>
                </view>
            </view>
        </view>
        <view class="menu-container">
            <view class="common-form-widget-group">
                <view class="widget-item" @click="utils.toPage('/pages/address/address?openType=list')">
                    <text class="iconfont icon-dingwei icon"></text>
                    <text class="title limit-line clamp-1">我的地址</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item">
                    <text class="iconfont icon-tousu icon"></text>
                    <text class="title limit-line clamp-1">意见投诉</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item">
                    <text class="iconfont icon-kefufill icon"></text>
                    <text class="title limit-line clamp-1">联系客服</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item">
                    <text class="iconfont icon-shezhixitongshezhigongnengshezhishuxing icon"></text>
                    <text class="title limit-line clamp-1">设置</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 limit-line clamp-1">我是师傅</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="utils.toPage('/pages/service/other/project')">
                    <text class="iconfont icon-cailiaogongcheng icon"></text>
                    <text class="title limit-line clamp-1">工程安装</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="utils.toPage('/pages/service/other/business')">
                    <text class="iconfont icon-qiye icon"></text>
                    <text class="title limit-line clamp-1">企业安装合作</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,
            info: {
                nickname: "微信用户",
                mobile: "131****6080",
                headimg: require("@/static/temp/member/1.png"),
            },
        };
    },
    components: {
        AppLayout,
    },
    computed: {
        ...mapState("user", {
            userInfo: (state) => state.userInfo,
        }),
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {},
};
</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;
        .title {
            padding: 30rpx 60rpx;
        }
        .icon,
        .more {
            top: 28rpx;
        }
        .icon.icon-dingwei {
            font-size: 35rpx;
        }
        .icon.icon-cailiaogongcheng {
            font-size: 28rpx;
        }
        .icon.icon-qiye {
            font-size: 28rpx;
        }
    }
}
</style>