Client-Teapay/src/pages/my/index.vue

<template>
    <view class="container">
        <view class="content" :style="isShiMing ? '' : 'padding-top:30rpx;'">
            <!-- 用户信息 -->
            <view class="uerInfo mar_t16 flex_r">
                <view class="user_img">
                    <image @click="upheadimg" class="image" :src="userinfo.head_pic"></image>
                    <view class="coupon_info flex_r flex_ac" @tap="goToAutonym" v-if="isShiMing">
                        完成实名认证，享受更多权益
                        <image src="/static/my/f_close.png" mode="widthFix" class="close_icon" @tap.stop="closeAuto" />
                    </view>
                </view>
                <block v-if="userinfo.nickname">
                    <view class="user_con flex_c flex_as flex_jc">
                        <view class="user_name flex_r flex_ae ellipsis">
                            <view @click="goto('/pages/my/userinfo')">{{ userinfo.nickname }}</view>
                            <text v-if="isAuthentication">({{ userinfo.is_authentication == 0 ? "未实名" : "已实名" }})</text>
                        </view>
                        <view class="live_name flex_r flex_ac flex_jc">
                            <img src="@/static/my/huangguan.png" class="live_ico">
                            <span>{{ typeto(localInfo.level_id) }}</span>
                        </view>
                        <view class="user_account flex_r flex_ac mar_t16">
                            <view class="account">账号：{{ userinfo.mobile }}</view>
                            <view class="copy_account flex_r flex_ac flex_jc" @tap="copyText(userinfo.mobile)">复制</view>
                        </view>
                    </view>
                    <view class="user_option flex_r flex_ac flex_je">
                        <navigator class="flex_c flex_ac" @tap="getImgPage" hover-class="none">
                            <image class="fun_img" src="/static/my/f_img_code.png"></image>
                            <view class="fun_text">分享海报</view>
                        </navigator>
                    </view>
                </block>
                <block v-else>
                    <view class="user_con flex_c flex_jb" @click="login">
                        <view class="user_name flex_r flex_ae ellipsis">点此处登录</view>
                    </view>
                </block>
            </view>
            <!-- 用户信息-end -->
            <!-- 节点 -->
            <view class="regional" v-if="localInfo.regional">
                <img src="@/static/my/regional.png" alt="" srcset="" class="ico">
                <span class="txtinfo">区域服务节点：{{ localInfo.regional }}</span>
            </view>
            <!-- 节点-end -->
            <!-- 账户信息 -->
            <view class="acc_info flex_r flex_jse">
                <div class="i_num" @click="goto('/pagesB/accountDetails/ConsumptionCharge')">
                    <p class="flex_r flex_ac flex_jc">
                        <image src="@/static/wallet/3.png" class="ico" /><span>消费金</span></p>
                    <p class="dinB">{{localInfo.integral}}</p>
                </div>
                <div class="i_num" @click="goto('/pagesB/my/shuZhiWallet')">
                    <p class="flex_r flex_ac flex_jc">
                        <image src="@/static/wallet/4.png" class="ico" /><span>余额</span></p>
                    <p class="dinB">{{localInfo.property}}</p>
                </div>
            </view>
            <!-- 账户信息-end -->
        </view>
        <!-- 功能列表 -->
        <view class="fun_container">
            <view class="fun mar_t30">
                <view class="fun_title">数智生活</view>
                <view class="fun_con mar_t50 flex_r flex_ac">
                    <navigator class="fun_list flex_c flex_ac" url="/pagesB/my/myWallet" hover-class="none">
                        <image class="fun_img" src="/static/my918/9.png"></image>
                        <view class="fun_text">我的财富</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pagesB/orderingfood/orderlist" hover-class="none">
                        <image class="fun_img" src="/static/my918/10.png"></image>
                        <view class="fun_text">历史订单</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" @click="activation" hover-class="none">
                        <image class="fun_img" src="/static/my918/11.png"></image>
                        <view class="fun_text">激活升级</view>
                    </navigator>
                    <navigator v-if="localInfo.level_id>1" class="fun_list flex_c flex_ac" url="/pagesB/orderingfood/group" hover-class="none">
                        <image class="fun_img" src="/static/my918/12.png"></image>
                        <view class="fun_text">我的用户</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/account/giveAsPresent" hover-class="none">
                        <image class="fun_img" src="/static/my918/13.png"></image>
                        <view class="fun_text">赠送</view>
                    </navigator>
                </view>
            </view>
            <view class="fun mar_t30">
                <!-- <view class="fun_title">数智云店</view> -->
                <!-- <view class="fun_con mar_t50 flex_r flex_ac">
                    <navigator class="fun_list flex_c flex_ac" url="/pages/account/wealth" hover-class="none">
                        <image class="fun_img" src="/static/my/wealth.png"></image>
                        <view class="fun_text">财富</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/account/consignment" hover-class="none">
                        <image class="fun_img" src="/static/my/consign.png"></image>
                        <view class="fun_text">寄卖</view>
                    </navigator>
                </view> -->
                <!-- <view class="fun_con mar_t50 flex_r flex_ac">
                    <navigator class="fun_list flex_c flex_ac" url="/pages/account/conversion" hover-class="none">
                        <image class="fun_img" src="/static/my/10.png"></image>
                        <view class="fun_text">转化</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" @tap="getToCash" hover-class="none">
                        <image class="fun_img" src="/static/my/13.png"></image>
                        <view class="fun_text">提现</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/accountDetails/running" hover-class="none">
                        <image class="fun_img" src="/static/my/fund.png"></image>
                        <view class="fun_text">云宝明细</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/accountDetails/withdraw" hover-class="none">
                        <image class="fun_img" src="/static/my/withdraw.png"></image>
                        <view class="fun_text">提现明细</view>
                    </navigator>
                </view> -->
                <view class="fun_title flex_r flex_ac flex_jb">
                    <view>云店订单</view>
                    <view class="moarbtn" @click="goto('/pages/szw-order-list/index')">
                        <text>查看全部</text>
                        <text class="iconfont">&#xe62e;</text>
                    </view>
                </view>
                <view class="fun_con mar_t50 flex_r flex_ac flex_jb">
                    <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=1" hover-class="none">
                        <image class="fun_img" src="/static/my/payment.png"></image>
                        <view class="fun_text">待付款</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=5" hover-class="none">
                        <image class="fun_img" src="/static/my/pickInStore.png"></image>
                        <view class="fun_text">待自提</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=2" hover-class="none">
                        <image class="fun_img" src="/static/my/deliver.png"></image>
                        <view class="fun_text">待发货</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=3" hover-class="none">
                        <image class="fun_img" src="/static/my/take.png"></image>
                        <view class="fun_text">待收货</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index?status=4" hover-class="none">
                        <image class="fun_img" src="/static/my/refund.png"></image>
                        <view class="fun_text">已完成</view>
                    </navigator>
                </view>
            </view>
            <view class="fun mar_t30">
                <view class="fun_title">我的服务</view>
                <view class="fun_con mar_t50 flex_r flex_ac">
                    <navigator class="fun_list flex_c flex_ac" url="/pagesB/address/list" hover-class="none">
                        <image class="fun_img" src="/static/my/dizhi.png"></image>
                        <view class="fun_text">地址管理</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pagesB/my/assistant" hover-class="none">
                        <image class="fun_img" src="/static/my/assistant.png"></image>
                        <view class="fun_text">开票助手</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pagesB/invoice/invoiceList" hover-class="none">
                        <image class="fun_img" src="/static/my/assistantHistory.png"></image>
                        <view class="fun_text">开票历史</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" @click="goto('/pages/agreement/index',{tit:'新手教程',type:1})" hover-class="none">
                        <image class="fun_img" src="/static/my/green.png"></image>
                        <view class="fun_text">新手教程</view>
                    </navigator>
                </view>
                <view class="fun_con mar_t50 flex_r flex_ac">
                    <navigator class="fun_list flex_c flex_ac" @click="goto('/pages/agreement/index',{tit:'关于我们',type:7})" hover-class="none">
                        <image class="fun_img" src="/static/my/about.png"></image>
                        <view class="fun_text">关于我们</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" @click="goto('/pages/agreement/index',{tit:'用户须知',type:8})" hover-class="none">
                        <image class="fun_img" src="/static/my/feedback.png"></image>
                        <view class="fun_text">用户须知</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" @click="goto('/pages/my/userinfo')" hover-class="none">
                        <image class="fun_img" src="/static/my/h_n.png"></image>
                        <view class="fun_text">头像昵称</view>
                    </navigator>
                    <view class="fun_list flex_c flex_ac">
                        <button open-type="contact" style="background: #fff; border: 0; line-height: 1; padding: 0">
                            <image class="fun_img" src="/static/my/service.png"></image>
                            <view class="fun_text">在线客服</view>
                        </button>
                    </view>
                </view>
            </view>
        </view>
        <view class="fz_w_text">让数字经济赋能美好生活！</view>
        <!-- 授权 -->
        <authorize-module ref="autho" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" />
        <!-- 激活升级 -->
        <activation ref="activation" tit="激活" />
    </view>
</template>
<script>
let app = getApp();
var appEv = app.$vm.$options;
import uniCopy from "@/utils/copy";
import authorizeModule from "@/components/authorize-module/index";
import activation from "@/components/activation/activation.vue"
import { post } from "@/request/api.js";
export default {
    components: {
        authorizeModule,
        activation
    },
    data() {
        return {
            token: uni.getStorageSync("token"),
            shopInfo: {}, // 商铺信息
            isShiMing: true, //未实名提示弹窗
            userinfo: {}, // 获取用户信息
            unid: "",
            invited: "",
            allChaYou: "",
            isAuthentication: uni.getStorageSync("isAuthentication"), //是否开启实名模块
            localInfo: {}, //数智生活信息
        };
    },
    onLoad(options) {
        //推荐人ID
        if (options.invite) {
            app.globalData.agentId = options.invite;
            this.invited = options.invite;
        }
        this.closeAuto(); //关闭实名功能
    },
    onShow() {
        if (!this.token) this.login()
        else {
            this.getuserInfo();
            this.getchayou(); //获取茶友
            this.getLU(); //数智生活信息
        }
    },
    methods: {
        login() {
            let that = this;
            // #ifdef  MP-WEIXIN
            wx.login({
                success(res) {
                    if (res.code) {
                        post("v1/appletLogin", {
                            code: res.code,
                            invite: that.invited,
                        }).then((res) => {
                            if (res.code === 0) {
                                if (res.data.token) {
                                    uni.setStorageSync("token", res.data.token);
                                    that.getuserInfo();
                                } else {
                                    that.unid = res.data.unid;
                                    that.shopInfo = app.globalData.shopInfo;
                                    that.SoHAuth(); //调取授权弹窗
                                }
                            }
                        });
                    }
                },
            });
            // #endif

            // #ifdef  H5 || APP-PLUS
            // this.goto("/pages/my/login");
            // #endif
        },
        // 获取手机号
        onauthGetTelSuccess(da) {
            this.SoHAuth();
            post("v1/getMobile", {
                unid: this.unid,
                ...da.detail,
            }).then((res) => {
                if (res.code === 0) {
                    uni.setStorageSync("token", res.data.token);
                    this.getuserInfo();
                }
            });
        },
        SoHAuth() {
            this.$refs.autho.onSoHAuth();
        },
        // 获取userinfo
        async getuserInfo() {
            let res = await uni.userfun();
            if (res.user_id) {
                if (this.isAuthentication) this.isShiMing = res.is_authentication == 0;
                else this.isShiMing = false;
                this.userinfo = res;
            } else this.login();
            this.getLU(); //数智生活信息
        },
        // 跳转到实名页面
        goToAutonym() {
            this.goto("/pages/autonym-submit/index")
        },
        // 关闭实名信息 提示
        closeAuto() {
            this.isShiMing = false;
        },
        // 未开放提示信息
        SetHint() {
            this.goto('/pages/agreement/index', { tit: '用户身份及权益', type: 24 })
        },
        // 跳转到分享页面
        getImgPage() {
            if (this.isAuthentication) {
                if (this.userinfo.is_authentication == 1) {
                    this.goto("/pages/invi-img/index")
                } else {
                    appEv.errTips("您还未实名");
                    this.goToAutonym();
                }
            } else {
                this.goto("/pages/invi-img/index")
            }
        },
        // 跳转到提现页面
        getToCash(type) {
            if (this.isAuthentication) {
                if (this.userinfo.is_authentication == 1) {
                    this.goto("/pages/cash/index", { type })
                } else {
                    appEv.errTips("您还未实名");
                    this.goToAutonym();
                }
            } else {
                this.goto("/pages/cash/index", { type })
            }
        },
        // 复制账号
        copyText(e) {
            uniCopy({
                content: e,
                success: (res) => {},
                error: (e) => {},
            });
        },
        // 跳转到用户设置页面
        getToSetting: function() {
            uni.navigateTo({
                url: "/pages/setting/index",
            });
        },
        // 跳转到拼豆页面
        getToBean: function() {
            uni.navigateTo({
                url: "/pages/bean-info/index",
            });
        },
        // 跳转到拼团金页面
        getToAccMoney: function() {
            uni.navigateTo({
                url: "/pages/my-acc-money/my-acc-money",
            });
        },
        // 点击头像
        upheadimg() {
            let that = this;
            uni.previewImage({
                urls: [that.userinfo.head_pic],
                current: 0,
            });
        },
        // 获取茶友
        getchayou() {
            post("v1/my/chayou").then((res) => {
                if (res.code === 0) {
                    this.allChaYou = res.data.data.below + res.data.data.lower_level;
                }
            });
        },
        async getLU() {
            this.localInfo = await uni.Luserfun()
        },
        activation() {
            this.$refs.activation.open()
        },
        typeto(va) {
            switch (va) {
                case 1:
                    return "VIP";
                case 2:
                    return "群主";
                case 3:
                    return "合伙人";
                case 4:
                    return "副总";
                case 5:
                    return "联合发起人";
                default:
                    return ""
            }
        }
    },
};
</script>
<style lang="scss">
// 页面配置
page {
    background: #f5f5f5;
}

.container {
    box-sizing: border-box;
}

.content {
    padding: 66rpx 30rpx 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(to bottom, #fff, #f5f5f5);
}

// 页面配置-end

// 用户信息
.close_icon {
    margin-left: 24rpx;
    width: 26rpx;
}

.coupon_info {
    position: absolute;
    top: -70rpx;
    left: 0;
    border-radius: 12rpx;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 28rpx;
    font-weight: 500;
    padding: 10rpx 24rpx;
    transition: all 0.6s ease;
    width: 420rpx;
}

.uerInfo {
    width: 100%;
}

.code_img:nth-child(1) {
    margin-left: 20rpx;
}

.code_img {
    width: 42rpx;
    height: 44rpx;
    margin-left: 36rpx;
}

.account {
    font-size: 26rpx;
    color: #121212;
    margin-right: 20rpx;
}

.user_img .image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.user_con {
    width: calc(100% - 136rpx - 140rpx - 20rpx);
    overflow: hidden;
}

.user_img {
    width: 136rpx;
    height: 136rpx;
    margin-right: 20rpx;
    border-radius: 50%;
    position: relative;
}

.user_name text {
    font-size: 26rpx;
    font-family: "SourceHanSansSC-Medium";
    color: #121212;
    font-weight: 500;
}

.copy_account {
    width: 60rpx;
    height: 32rpx;
    background: #f1d3a8;
    font-size: 22rpx;
    color: #6b2909;
    border-radius: 6rpx;
}

.user_name {
    width: 100%;
    overflow: hidden;
    font-size: 40rpx;
    color: #121212;
    font-weight: 500;
    line-height: 1;
}

.user_option {
    width: 140rpx;
    text-align: right;

    .fun_text {
        font-size: 20rpx;
    }
}

.live_name {
    background-color: #f1d3a8;
    padding: 2rpx 8rpx;
    margin-top: 10rpx;
    border-radius: 8rpx;

    .live_ico {
        width: 26rpx;
        height: 26rpx;
        margin-right: 6rpx;
    }

    span {
        font-size: 22rpx;
    }
}

// 用户信息-end

.regional {
    padding: 0 10rpx;
    margin-top: 16rpx;

    .ico {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
    }

    .txtinfo {
        color: #000;
        font-size: 25rpx;
    }

    .ico,
    .txtinfo {
        vertical-align: middle;
    }
}

// 账户信息
.acc_info {
    width: 100%;
    overflow: hidden;
    background: url("http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/7748b9c0380c76907a8a5ba82514f496f9ce55e5png");
    background-size: 100% 100%;
    border-radius: 16rpx;
    padding: 36rpx 0;
    box-sizing: border-box;
    margin-top: 38rpx;

    .i_num {
        text-align: center;
        font-size: 34rpx;

        p {
            color: #BE7329;
        }

        .ico {
            width: 42rpx;
            height: 42rpx;
            margin-right: 12rpx;
        }

        .dinB {
            margin-top: 14rpx;
            font-size: 40rpx;
        }
    }
}

// 账户信息-end

// 功能列表
.more {
    font-size: 24rpx;
    color: #999999;
}

.fun_con {
    width: 100%;
    overflow: hidden;
}

.fun_text {
    font-size: 24rpx;
    color: #333333;
}

.fun_list {
    width: 25%;
}

.fun_list button::after {
    border: 0 !important;
}

.more_img {
    width: 12rpx;
    height: 20rpx;
    margin-left: 11rpx;
}

.fun_img {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 10rpx;
}

.fun_container {
    width: 100%;
    overflow: hidden;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.fun_title {
    padding: 0 30rpx;
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
}

.fun_tit {
    font-size: 28rpx;
    color: #666;
    font-weight: bold;
    padding-left: 36rpx;
    padding-right: 30rpx;
}

.fun {
    width: 100%;
    overflow: hidden;
    border-radius: 16rpx;
    background: #fff;
    padding: 30rpx 0;
    box-sizing: border-box;
}

.user_level {
    margin-top: 10rpx;
    background: linear-gradient(to right, #ffeabd, #ffc479);
    padding: 6rpx 20rpx;
    border-radius: 6rpx;
    overflow: hidden;

    .level_img {
        width: 38rpx;
        height: 30rpx;
        z-index: 30;
    }

    .level_text {
        color: #6b2909;
        font-size: 28rpx;
        margin-left: 12rpx;
        display: inline-block;
        height: 30rpx;
        line-height: 30rpx;
    }

    .level_img,
    .level_text {
        float: left;
    }
}

.moarbtn {
    font-size: 22rpx;
    color: #999;

    .iconfont {
        text-decoration-skip: 20rpx;
        margin-left: 6rpx;
        color: #999;
    }

    text {
        vertical-align: middle;
    }
}

// 功能列表-end
</style>