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

<template>
    <view class="">
        <view class="pageBg">
            <view class="header">
                <DtCustomBar title="我的"></DtCustomBar>
                <view @tap="tapToWhich('/pagesM/pages/mine_info')"
                      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://szsq.nxzhsq.cn/community/miniofile/image/avatar.png"></image>
                            </button>
                        </block>
                        <image v-else src="https://szsq.nxzhsq.cn/community/miniofile/image/avatar.png"></image>
                    </view>
                    <view v-if="isLogin" class="member_info">
                        <view class="member_name_box">
                            <view class="member_name">{{ userDetail.username }}</view>
                        </view>
                        <view class="member_name_box">
                            <view class="member_mobile">{{shopPhone}}</view>
                        </view>
                    </view>
                    <view v-else class="no_login">
                        <button class="no_login_btn">游客(未登录)</button>
                    </view>
                    <view style="flex:1"></view>
                    <image src="/static/wode/item_setting_icon.png" mode="aspectFit" @tap.stop="tapOther(1)"
                           style="width: 56upx;height: 56upx;"></image>
                </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>
            <view class="mine_order_statue">
                <view class="order_wrap">
                    <view class="mine_order_text">我的订单</view>
                    <view @tap="tapToOrder(0)" class="jump_all_order">
                        <text style="color:#C1C1C1;font-size: 24upx;">查看全部</text>
                        <image src="https://szsq.nxzhsq.cn/community/miniofile/image/arrow.png"></image>
                    </view>
                </view>
                <view class="order_statue_list">
                    <view class="order_statue_item" v-for="(item, index) in orderStateList" :key="index"
                          @tap="tapToOrder(item.state)">
                        <image :src="item.icon" mode="aspectFit"></image>
                        <text>{{ item.statueName }}</text>
                        <!-- 待付款数量 -->
                        <view v-if="index == 0 && orderStatusNum.pendingPayment > 0" class="tip_count">{{
                            orderStatusNum.pendingPayment }}
                        </view>
                        <!-- 待发货数量 -->
                        <view v-if="index == 1 && orderStatusNum.pendingShipment > 0" class="tip_count">{{
                            orderStatusNum.pendingShipment }}
                        </view>
                        <!-- 待收货数量 -->
                        <view v-if="index == 2 && orderStatusNum.shipped > 0" class="tip_count">{{
                            orderStatusNum.shipped }}
                        </view>
                        <!-- 待评论数量 -->
                        <view v-if="index == 3 && orderStatusNum.pendingReview > 0" class="tip_count">{{
                            orderStatusNum.pendingReview }}
                        </view>
                        <!-- 售后数量 -->
                        <view v-if="index == 4 && orderStatusNum.afterSale > 0" class="tip_count">{{
                            orderStatusNum.afterSale }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="item_list">
                <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="item.index==0" style="padding-right: 16rpx;color: #D43A39;font-size: 26rpx;">
                            {{authStatus}}
                        </text>
                        <image src="https://szsq.nxzhsq.cn/community/miniofile/image/arrow.png"></image>
                    </view>
                </view>
            </view>
            <!-- 微信客服 -->
            <DtService/>

            <DtLogin ref="dialogLogin" @signIn="onSignIn"/>
        </view>
    </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 {
                isFirst: false,
                //社区 begin
                state: null,
                anyHousePass: false,
                //社区end
                orderStateList: [
                    {
                        statueName: '待付款',
                        icon: 'https://szsq.nxzhsq.cn/community/miniofile/image/wait_pay.png',
                        count: 1,
                        state: 1
                    },
                    {
                        statueName: '待发货',
                        icon: 'https://szsq.nxzhsq.cn/community/miniofile/image/wait_ship.png',
                        count: 2,
                        state: 2
                    },
                    {
                        statueName: '待收货',
                        icon: 'https://szsq.nxzhsq.cn/community/miniofile/image/wait_receipt.png',
                        count: 2,
                        state: 3
                    },
                    {
                        statueName: '待评价',
                        icon: 'https://szsq.nxzhsq.cn/community/miniofile/image/wait_comment.png',
                        count: 2,
                        state: 5
                    },
                    {
                        statueName: '退款/售后',
                        icon: 'https://szsq.nxzhsq.cn/community/miniofile/image/wait_refund.png',
                        count: 2,
                        state: 7
                    }
                ],
                mineItemList: [
                    {
                        itemName: '住户认证',
                        itemIcon: '/static/icon/renzheng.png',
                        index: 0
                    },
                    {
                        itemName: '我的消息',
                        itemIcon: '/static/icon/msg.png',
                        index: 1
                    },
                    {
                        itemName: '收货地址',
                        itemIcon: '/static/icon/address.png',
                        index: 2
                    },
                    {
                        itemName: '问题反馈',
                        itemIcon: '/static/icon/fankui.png',
                        index: 3
                    },
                    {
                        itemName: '客服中心',
                        itemIcon: '/static/icon/kefu.png',
                        index: 4
                    },
                    {
                        itemName: '使用说明',
                        itemIcon: '/static/icon/shuoming.png',
                        index: 5
                    },


                ],
                //商城绑定的手机号
                shopPhone: '',
                memberId: '',
                dataDetail: {},
                orderStatusNum: {},
                userDetail: {},
                isLogin: false,
            };
        },
        computed: {
            orderState() {
                return this.$global.orderState;
            },
            //社区begin
            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 "未注册"
                    }
                }
            },
            //社区 end
        },
        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(state) {
                if (!this.$auth.isAuth) {
                    this.showLogin();
                    return;
                }
                uni.navigateTo({
                    url: '/pagesM/pages/mine_order_list?state=' + state
                });
            },
            tapOther(key) {
                if (key == 1) {
                    uni.navigateTo({
                        url: '/pagesM/pages/mine_setting'
                    });
                }
            },
            onShareAppMessage: function (e) {
                return {
                    path: 'pages/index/index'
                }
            },
            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(idx) {
                if (idx == 0) {
                    //住户认证
                    this.buttonMethod(1)
                    return
                } else if (idx == 1) {
                    //我的消息
                    this.buttonMethod(2)
                    return
                } else if (idx == 5) {
                    //使用教程
                    this.buttonMethod(3)
                    return
                }
                if (!this.$auth.isAuth) {
                    this.showLogin();
                    return;
                }
                switch (idx) {
                    case 2: // 收货地址
                        uni.navigateTo({
                            url: '/pagesM/pages/address_list'
                        });
                        break;
                    case 3: // 问题反馈
                        uni.navigateTo({
                            url: "./feedback/feedback"
                        })
                        break;
                    case 4: // 客服中心
                        let phone = this.dataDetail.serviceTel
                        console.log(phone);
                        this.makePhoneCall(phone);
                        break;
                    default:
                        break;
                }
            },
            async getMyBaseDatas() {
                let resp = await this.$api.getMyBaseDatas({
                    _isReject: true,
                    _isPull: this.isPull,
                    memberId: this.memberId
                });
                this.shopPhone = resp.user.mobile
                console.log(this.shopPhone);
                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();
            },
            // 社区 begin
            communityInitData() {
                var that = this; //从全局变量中获取用户信息
                if (app.globalData.member) {
                    that.setData({
                        state: app.globalData.member.state,
                        anyHousePass: app.globalData.anyHousePass
                    });
                }
            },
            //用户认证信息
            buttonMethod: function (type) {
                if (type == 3) {
                    uni.navigateTo({
                        url: 'direction/direction'
                    });
                    return;
                }
                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;
                } else if (member.state == 0 && !anyHousePass) {
                    //2未认证
                    uni.navigateTo({
                        url: "../empty/empty?type=2"
                    })
                    return;
                } else if (member.state == 1 && !anyHousePass) {
                    //待审核
                    that.pending();
                    return;
                } else if (member.state == 2 || anyHousePass) {
                    //已认证
                    if (type == 1) {
                        uni.navigateTo({
                            url: 'myInfo/myInfo'
                        });
                    } else if (type == 2) {
                        uni.navigateTo({
                            url: '/pages/wode/news/news'
                        });
                    }
                }
            },
            //提示用户身份注册
            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
        },
        onLoad() {
            this.isFirst = true
        },
        onReady() {
            if (!this.$auth.isAuth) {
                this.showLogin();
                return;
            } else {
                this.$refs.dialogLogin.hide();
            }
        },
        onShow() {
            if (this.isFirst) {
                this.isFirst = false
            } else {
                this.onShowPage();
                this.onLoadPage()
            }
        },
        onPullDownRefresh() {
            this.onPullDownRefreshPage();
        }
    };
</script>
<style lang="scss" scoped>
    .pageBg {
        background-color: #F6F4F5;
    }

    button::after {
        border: none;
    }

    .header {
        background-image: url(https://szsq.nxzhsq.cn/community/miniofile/image/mine_head_bg.png);
        height: 500 upx;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .member_head_img {
            margin-right: 30 upx;

            image {
                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;
                font-size: 26 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 {
                    padding-bottom: 20 rpx;
                    font-size: 32 upx;
                    color: #fff;
                    font-weight: bold;
                }

                .member_mobile {
                    padding-bottom: 10 rpx;
                    font-size: 26 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 {
                    margin-top: -20rpx;
                    font-size: 24 upx;
                    color: #999999;
                }

                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 {
        margin: -100upx 20 upx 0;
        background: #fff;
        padding: 30 upx 40 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 #e5e5e5;

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

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

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

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

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