yinchuan-community-all/mini-program/smart-city-yinchuan-wx/pages/wode/wode.vue

<template>
    <view>
        <view class="header">
            <DtCustomBar title="我的"></DtCustomBar>
            <view style="display: flex;align-items: center;margin: 0 30upx;">
                <view class="member_head_img">
                    <block v-if="isLogin">
                        <image v-if="userDetail.avatar" :src="userDetail.avatar"></image>
                        <button v-else class="avatar-wrap" open-type="getUserInfo" @getuserinfo="tapGetUserInfo"
                                @tap.stop="() => false">
                            <image src="https://wuye.nxzhsq.cn/oss/group1/M00/00/01/iwlnq1_AYZqAb30pAAAQNvkj3Wk302.png"></image>
                        </button>
                    </block>
                    <image v-else
                           src="https://wuye.nxzhsq.cn/oss/group1/M00/00/01/iwlnq1_AYZqAb30pAAAQNvkj3Wk302.png"></image>
                </view>
                <view v-if="isLogin" class="member_info">
                    <view class="member_name_box" style="margin-bottom: 20rpx;">
                        <view class="member_name">{{ username }}</view>
                    </view>
                    <view class="member_phone_box">
                        <!-- <view class="member_phone">{{shopPhone}}</view> -->
                    </view>
                </view>
                <view v-else class="no_login" @tap="showLogin">
                    <button class="no_login_btn">游客(未登录)</button>
                </view>
                <view style="flex:1"></view>
            </view>
            <view style="display: flex;margin: 22upx 64upx 0;justify-content: space-between;">
                <view @tap="tapHeadMenu(0)" style="text-align: center;">
                    <view style="font-size: 28upx;color: #fff;">{{dataDetail.couponNum?dataDetail.couponNum:0}}</view>
                    <view style="font-size: 24upx;color: #fff;margin-top: 10upx;">我的优惠券</view>
                </view>
                <view @tap="tapHeadMenu(1)" style="text-align: center;">
                    <view style="font-size: 28upx;color: #fff;">{{dataDetail.favoriteNum?dataDetail.favoriteNum:0}}
                    </view>
                    <view style="font-size: 24upx;color: #fff;margin-top: 10upx;">收藏商品</view>
                </view>
                <view @tap="tapHeadMenu(2)" style="text-align: center;">
                    <view style="font-size: 28upx;color: #fff;">{{dataDetail.browseNum?dataDetail.browseNum:0}}</view>
                    <view style="font-size: 24upx;color: #fff;margin-top: 10upx;">浏览记录</view>
                </view>
            </view>
            <view class="mine_order_statue">
                <view class="cu-list grid col-5 no-border margin-top-sm">
                    <view class="cu-item" @click="tapToMenu(item.index)" v-for="(item,index) in gridList" :key="index">
                        <view class="grid-icon ">
                            <image style="width: 56rpx;height: 56rpx;" :src="item.icon"/>
                        </view>
                        <view class="cu-tag bg-orange badge" v-if="item.badge>0">{{item.badge}}</view>
                        <text style="font-size: 22rpx;font-family:Sans-serif">{{item.title}}</text>
                    </view>
                </view>
            </view>
            <view class="item_list">
                <view class="item">
                    <text style="font-size: 32rpx;">个人设置</text>
                </view>
                <view class="item" v-for="(item, index) in mineItemList" :key="index" @tap="tapToMenu(item.index)">
                    <view class="item_content">
                        <image :src="item.itemIcon"></image>
                        <text>{{ item.itemName }}</text>
                    </view>
                    <view class="">
                        <text v-if="index==0" style="padding-right: 16rpx;font-size: 26rpx;" class="text-red">
                            {{authStatus}}
                        </text>
                        <image src="https://szsq.nxzhsq.cn/community/miniofile/image/arrow.png"></image>
                    </view>
                </view>
            </view>
            <view class="item_list">
                <view class="item">
                    <text style="font-size: 32rpx;">系统设置</text>
                </view>
                <view class="item" v-for="(item, index) in systemItemList" :key="index" @tap="tapToMenu(item.index)">
                    <view class="item_content">
                        <image :src="item.itemIcon"></image>
                        <text>{{ item.itemName }}</text>
                    </view>
                    <view class="">
                        <image src="https://szsq.nxzhsq.cn/community/miniofile/image/arrow.png"></image>
                    </view>
                </view>
            </view>
            <view class="bg-white" style="80rpx">

            </view>
        </view>
        <!-- 微信客服 -->
        <DtService/>

        <DtLogin ref="dialogLogin" @signIn="onSignIn"/>
    </view>
</template>

<script>
    var app = getApp()
    import DtLogin from '../../comps/dt_login.vue';
    import DtService from '../../comps/dt_service.vue';
    import DtCustomBar from '../../comps/dt_custom_bar.vue'

    export default {
        components: {
            DtLogin,
            DtService,
            DtCustomBar
        },
        data() {
            return {
                height: '',
                //todo
                gridList: [
                    {
                        icon: '../../static/wode/order.png',
                        title: "商城订单",
                        badge: 0,
                        index: 1
                    },
                    {
                        icon: '../../static/wode/cart.png',
                        title: "购物车",
                        badge: 0,
                        index: 2
                    },
                    {
                        icon: '../../static/wode/wuye.png',
                        title: "我的报修",
                        badge: 0,
                        index: 3
                    },
                    {
                        icon: '../../static/wode/jiaofei1.png',
                        title: "物业缴费",
                        badge: 0,
                        index: 5
                    },
                    {
                        icon: '../../static/wode/contact.png',
                        title: "联系物业",
                        badge: 0,
                        index: 4
                    }

                ],
                isFirst: false,
                //社区 begin
                userInfo: null,
                //微信用户信息
                state: null,
                anyHousePass: false,
                //社区end
                mineItemList: [
                    {
                        itemName: '住户认证',
                        itemIcon: '/static/wode/renzheng.png',
                        index: 6
                    },
                    {
                        itemName: '通行人脸',
                        itemIcon: '/static/wode/face.png',
                        index: 7
                    },
                    // {
                    // 	itemName: '身份信息',
                    // 	itemIcon: '/static/wode/shenfen.png',
                    // 	index:8
                    // },
                    {
                        itemName: '收货地址',
                        itemIcon: '/static/wode/address.png',
                        index: 9
                    },
                    {
                        itemName: '出入记录',
                        itemIcon: '/static/wode/chuxing.png',
                        index: 13
                    },
                ],
                systemItemList: [
                    {
                        itemName: '问题反馈',
                        itemIcon: '/static/wode/fankui.png',
                        index: 10
                    },
                    {
                        itemName: '帮助中心',
                        itemIcon: '/static/wode/shuoming.png',
                        index: 11
                    },
                    {
                        itemName: '设置',
                        itemIcon: '/static/wode/setting.png',
                        index: 12
                    }
                ],
                //商城绑定的手机号
                shopPhone: '',
                memberId: '',
                dataDetail: {},
                orderStatusNum: {},
                userDetail: {},
                isLogin: false,
            };
        },
        computed: {
            authStatus: {
                get() {
                    if (this.state == 0 && this.anyHousePass == false) {
                        return "未认证"
                    } else if (this.state == 1 && this.anyHousePass == false) {
                        return "待审核"
                    } else if (this.state == 2 || this.anyHousePass == true) {
                        return "已认证"
                    } else {
                        return "未注册"
                    }
                }
            },
            username: {
                get() {
                    if (this.$isEmpty(getApp().globalData.member)) {
                        if (this.$isEmpty(this.userDetail.username)) {
                            return this.shopPhone
                        } else {
                            return this.userDetail.username
                        }
                    } else {
                        return getApp().globalData.member.name
                    }
                }
            }
        },
        methods: {
            async tapGetUserInfo(e) {
                console.log(158, e);
                if (e.detail.errMsg == 'getUserInfo:ok') {
                    let userInfo = e.detail.userInfo;
                    let resp = await this.$api.updateIcon({
                        _isShowLoading: true,
                        userId: this.memberId,
                        avatar: userInfo.avatarUrl
                    });
                    this.userDetail.avatar = userInfo.avatarUrl;
                }
            },
            showLogin() {
                this.$refs.dialogLogin.show();
            },
            onSignIn(resp) {
                this.shopPhone = this.$auth.getMineBase().user.mobile || ''
                console.log(143, resp);
                this.onPullDownRefreshPage();
            },
            tapToWhich(aimUrl) {
                if (!this.$auth.isAuth) {
                    this.showLogin();
                    return;
                }
                uni.navigateTo({
                    url: aimUrl
                });
            },
            tapToOrder() {
                if (!this.$auth.isAuth) {
                    this.showLogin();
                    return;
                }
                uni.navigateTo({
                    url: '/pagesM/pages/mine_order_list'
                });
            },
            tapToCar() {
                if (!this.$auth.isAuth) {
                    this.showLogin();
                    return;
                }
                uni.navigateTo({
                    url: '/pagesM/pages/shop_car'
                })
            },
            onShareAppMessage: function (e) {
                return {
                    path: '/pagesM/pages/home'
                }
            },
            tapHeadMenu(index) {
                let url;
                if (index == 0) {
                    url = '/pagesM/pages/coupon_list'
                } else if (index == 1) {
                    url = '/pagesM/pages/mine_collection'
                } else if (index == 2) {
                    url = '/pagesM/pages/browse_records'
                }
                uni.navigateTo({
                    url: url
                });
            },
            tapToMenu(index) {
                let url = ''
                switch (index) {
                    case 1:
                        //商城订单
                        this.tapToOrder()
                        break;
                    case 2:
                        //购物车
                        this.tapToCar()
                        break;
                    case 3:
                        // 我的报修
                        if (this.buttonMethod()) {
                            uni.navigateTo({
                                url: '../services/property/list/list'
                            })
                        }
                        break;
                    case 4:
                        // 联系物业
                        let phone = uni.getStorageSync("personTel")
                        if (this.$isEmpty(phone)) {
                            this.$u.toast('暂无电话')
                        } else {
                            this.makePhoneCall(phone);
                        }
                        break;
                    case 5:
                        //物业缴费
                        this.$u.toast('即将开放')
                        break;
                    case 6:
                        //住户认证
                        if (this.buttonMethod()) {
                            uni.navigateTo({
                                url: "myInfo/myInfo"
                            })
                        }
                        break;
                    case 7:
                        // 通行人脸
                        if (this.buttonMethod()) {
                            uni.navigateTo({
                                url: "/pages/uploadFace/uploadFace"
                            })
                        }
                        break;
                    case 8:
                        // 身份信息
                        uni.showToast({
                            title: "暂未开发",
                            icon: "none"
                        })
                        break;
                    case 9:
                        // 收货地址
                        url = '/pagesM/pages/address_list'
                        break;
                    case 10:
                        // 问题反馈
                        url = "./feedback/feedback"
                        break;
                    case 11:
                        // 帮助中心
                        url = "direction/direction"
                        break;
                    case 12:
                        // 设置
                        url = "/pagesM/pages/mine_setting"
                        break;
                    case 13:
                        //出入记录
                        if (this.buttonMethod()) {
                            uni.navigateTo({
                                url: "travelRecord/travelRecord"
                            })
                        }
                        break;
                    default:
                        break;
                }
                if (url != '') {
                    uni.navigateTo({
                        url: url,
                    });
                }
            },
            async getMyBaseDatas() {
                let resp = await this.$api.getMyBaseDatas({
                    _isReject: true,
                    _isPull: this.isPull,
                    memberId: this.memberId
                });
                console.log(resp)
                this.$auth.getMineBase(resp);
                this.dataDetail = resp;
                this.orderStatusNum = resp.orderStatusNum || {};
                this.userDetail = resp.user || {};
            },
            onLoadPage() {
                wx.hideShareMenu();
                this.communityInitData()
                this.isLogin = this.$auth.isAuth;
                this.memberId = this.$auth.getMemberId();
                this.getMyBaseDatas();
                // this.memberId = this.$auth.getMemberId();
                // this.getMyBaseDatas();
            },
            // 社区 begin
            communityInitData() {
                var that = this; //从全局变量中获取用户信息
                if (app.globalData.member) {
                    that.setData({
                        state: app.globalData.member.state,
                        anyHousePass: app.globalData.anyHousePass
                    });
                }
            },
            login() {
                var that = this; //从全局变量中获取用户信息
                if (app.globalData.userInfo == null) {
                    uni.login({
                        success: function () {
                            uni.getUserInfo({
                                success: function (res) {
                                    console.log(res);
                                    that.isLogin = true
                                    app.globalData.userInfo = res.userInfo;
                                    that.setData({
                                        userInfo: res.userInfo
                                    });
                                }
                            });
                        }
                    });
                } else {
                    that.isLogin = true
                    that.setData({
                        userInfo: app.globalData.userInfo
                    });
                }
                if (app.globalData.member) {
                    that.setData({
                        state: app.globalData.member.state,
                        anyHousePass: app.globalData.anyHousePass
                    });
                }
            },
            //用户认证信息
            buttonMethod: function () {
                var that = this; //会员认证状态：{ 0：未认证，1：待审审核，2：已认证 }
                var member = app.globalData.member;
                var anyHousePass = app.globalData.anyHousePass;
                if (member == null) {
                    //未注册
                    uni.navigateTo({
                        url: "../empty/empty"
                    })
                    return false;
                } else if (member.state == 0 && !anyHousePass) {
                    //2未认证
                    uni.navigateTo({
                        url: "../empty/empty?type=2"
                    })
                    return false;
                } else if (member.state == 1 && !anyHousePass) {
                    //待审核
                    that.pending();
                    return false;
                } else if (member.state == 2 || anyHousePass) {
                    return true
                } else {
                    return false
                }
            },
            //提示用户身份注册
            footaddmore: function () {
                uni.showModal({
                    title: '提示',
                    content: ' 请先完成注册',
                    //cancelText:'去绑定',
                    cancelText: '取消',
                    confirmText: '去注册',
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击了确认-去认证'); //跳转到认证页面

                            uni.navigateTo({
                                url: '../register/register'
                            });
                        } else {//res.cancel
                            //绑定界面--暂时不用
                            // wx.navigateTo({
                            //   url: '/pages/binding/binding',
                            // })
                        }
                    }
                });
            },
            //用户信息待审核中
            pending: function () {
                let that = this;
                var openid = uni.getStorageSync("openid");
                let params = {};
                params['openid'] = openid;
                let operation = 'miniprogram/getMemberByOpenid';
                app.globalData.postRequest(params, operation, function (res) {
                    //获取成功
                    if (res.data.result_code == 1) {
                        let member = res.data.member; //待审核

                        if (member.state == 1 && !res.data.anyHousePass) {
                            app.globalData.oneFailHint('亲，你的信息正在审核，请耐心等待');
                        } else if (member.state == 2) {
                            app.globalData.oneFailHint('亲，你的信息已审核通过', function () {
                                that.setData({
                                    state: member.state
                                });
                            });
                        }

                        app.globalData.member = member;
                        app.globalData.anyHousePass = res.data.anyHousePass;
                    } else {
                        app.globalData.oneFailHint(res.data.result_msg);
                    }
                });
            },
            // 社区 end
        },
        onReady() {
            if (!this.$auth.isAuth) {
                this.showLogin();
                return;
            } else {
                this.$refs.dialogLogin.hide();
            }
        },
        onShow() {
            //小程序审核期间隐藏掉
            let appletType = uni.getStorageSync('appletType')
            let tmp = this.mineItemList
            if (appletType == '0') {
                this.mineItemList.splice(1, 1)
                this.mineItemList.splice(1, 1)
            } else {
                this.mineItemList = tmp
            }


            if (this.isFirst) {
                this.isFirst = false
            } else {

            }
            this.onShowPage();
            wx.hideShareMenu();
            this.communityInitData()
            this.isLogin = this.$auth.isAuth;
            this.memberId = this.$auth.getMemberId();
            this.getMyBaseDatas();
        },
        onPullDownRefresh() {
            this.onPullDownRefreshPage();
        }
    };
</script>

<style>
    page {
        background-color: #FFFFFF;
    }
</style>

<style lang="scss" scoped>
    .pageBg {
        // background-color: #FFFFFF;
    }

    button::after {
        border: none;
    }

    .header {
        // border-bottom-left-radius: 20rpx;
        border-bottom-right-radius: 60 rpx;
        //todo
        background-image: url(https://szsq.nxzhsq.cn/community/miniofile/app/bg.png);
        height: 480 upx;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .member_head_img {
            margin-right: 30 upx;

            image {
                //todo
                width: 110 upx;
                height: 110 upx;
                border-radius: 59 rpx;
            }

            .avatar-wrap {
                display: inline-flex;
                border: 0;
                background-color: transparent;
            }
        }

        .no_login {
            display: flex;
            flex-direction: column;

            .no_login_btn {
                border-radius: 25px;
                //todo
                font-size: 32 upx;
                color: #fff;
                width: fit-content;
                padding: 0 15 upx;
                height: 60 upx;
                line-height: 60 upx;
                background: transparent;
            }
        }

        .member_info {
            display: flex;
            flex-direction: column;

            .member_name_box {
                display: flex;
                flex-direction: row;
                align-items: center;

                .member_name {
                    font-size: 40 upx;
                    color: #fff;
                    font-weight: bold;
                }

                .member_level {
                    background: #ffc600;
                    color: #fff;
                    font-size: 22 upx;
                    border-radius: 4 upx;
                    padding: 5 upx 10 upx;
                    margin-left: 10 upx;
                }
            }

            .member_phone_box {
                display: flex;
                flex-direction: row;
                align-items: center;

                .member_phone {
                    font-size: 24 upx;
                    color: #FFFFFF;
                }

                image {
                    width: 19 upx;
                    height: 19 upx;
                    padding: 20 upx;
                }
            }
        }

        .member_benefits {
            background: #fff;
            width: 180 upx;
            display: flex;
            flex-direction: row;
            align-items: center;
            text-align: center;
            border-radius: 27 upx 0px 0px 27 upx;
            height: 54 upx;
            text-align: center;
            position: absolute;
            right: 0;

            image {
                width: 26 upx;
                height: 23 upx;
                padding: 0 10 upx 0 30 upx;
            }

            .member_benefits_text {
                font-size: 24 upx;
                color: $dt-color-primary;
                letter-spacing: 2 upx;
            }
        }

        button::after {
            border: none;
        }
    }

    .coupon_point {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 110 upx;
        background: #fff;
        justify-content: space-around;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;

            .item_box {
                display: flex;
                flex-direction: row;
                align-items: center;
                letter-spacing: 2 upx;

                .item_content {
                    color: $dt-color-primary;
                    font-size: 34 upx;
                }

                .item_unit {
                    color: $dt-color-primary;
                    font-size: 22 upx;
                    margin-top: 6 upx;
                }
            }

            .item_text {
                color: #333333;
                font-size: 22 upx;
            }
        }

        .line {
            width: 1 upx;
            height: 50 upx;
            background: #e5e5e5;
        }
    }

    .mine_order_statue {
        //todo
        box-shadow: 0 10 rpx #e7f1fd;
        margin: 40 upx 20 upx 0;
        background: #fff;
        padding: 10 upx 20 upx;
        border-radius: 20 rpx;

        .order_wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;

            .mine_order_text {
                font-size: 28 upx;
                font-weight: bold;
                color: #333333;
            }

            .jump_all_order {
                display: flex;
                flex-direction: row;
                align-items: center;

                text {
                    color: #999999;
                    font-size: 22 upx;
                    margin-right: 10 upx;
                }

                image {
                    width: 10 upx;
                    height: 18 upx;
                }
            }
        }

        .order_statue_list {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .order_statue_item {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                margin-top: 32 upx;

                image {
                    width: 40 upx;
                    height: 40 upx;
                }

                text {
                    font-size: 24 rpx;
                    color: #333333;
                    letter-spacing: 1 upx;
                    margin-top: 10 upx;
                }

                .tip_count {
                    position: absolute;
                    right: 0 upx;
                    top: -6rpx;
                    width: 24 upx;
                    height: 24 upx;
                    border-radius: 50%;
                    background-color: #ff3b30;
                    color: #fff;
                    font-size: 18 upx;
                    text-align: center;
                    line-height: 24 upx;
                }
            }
        }
    }

    .item_list {
        display: flex;
        flex-direction: column;
        background: #fff;
        margin: 20 rpx;
        border-radius: 20 rpx;

        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0 30 upx;
            height: 90 upx;
            border-bottom: 1 upx solid #f1f1f1;

            .item_content {
                display: flex;
                flex-direction: row;
                align-items: center;

                image {
                    width: 42 upx;
                    height: 42 upx;
                }

                text {
                    font-size: 28 upx;
                    color: #333333;
                    margin-left: 20 upx;
                }
            }

            image {
                width: 10 upx;
                height: 18 upx;
            }
        }

        .item:first-child {
            border: none;
        }

        .item:last-child {
            border: none;
        }
    }
</style>