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 v-if="!userinfo.head_pic" class="image" src="/static/my/head.png" @click="toLogin"></image>
                    <image v-else @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.mobile">
                    <view class="user_con flex_c flex_as flex_jc">
                        <view class="user_name flex_r flex_ae ellipsis">
                            <view class="flex_r flex_ac">
                                <view @click="goto('/pages/my/userinfo')" :style="{'color':localInfo.is_consume > 0?'#18bb88' : ''}">{{ userinfo.nickname }}</view>
                                <image  v-for="i in localInfo.is_consume" :key="i" class="consume" src="https://teaclub.oss-cn-chengdu.aliyuncs.com/static/icon/consume.png" />
                                <image v-if="localInfo.bounty_hunter == 1" class="consume" src="https://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/logo/202402/hunter.png" />
                            </view>
                            <text v-if="isAuthentication">({{ userinfo.is_authentication == 0 ? "未实名" : "已实名" }})</text>
                        </view>
                        <view class="live_name flex_r flex_ac flex_jc">
                            <!-- <image 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_as flex_jc" @click="toLogin">
                        <view class="user_name flex_r flex_ae ellipsis">点此处登录</view>
                    </view>
                </block>
            </view>
            <!-- 用户信息-end -->
            <!-- 节点 -->
            
            <!-- 节点-end -->
            <!-- 账户信息 -->
            <view class="acc_info flex_r flex_jb acc_box">
                <!-- <div class="flex_r flex_jb"> -->
                    <div class="i_num flex_c flex_ac">
                        <!-- <div class="i_num flex_c flex_ac" @click="goto('/pagesB/my/shuZhiWallet')"> -->
                        <p class="flex_r flex_ac flex_jc">
                            <image src="/static/wallet/6.png" class="ico" /><span>付宝</span></p>
                        <p class="dinB tc">{{localInfo.property||0}}</p>
                    </div>
                    
                    <div class="i_num flex_c flex_ac" @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 tc">{{localInfo.integral||0}}</p>
                    </div>
            </view>
            <!-- 账户信息-end -->
        </view>
        <!-- 功能列表 -->
        <view class="fun_container">
            <view class="fun mar_t30" v-if="isBusinessCenter">
                <view class="fun_title">商家中心</view>
                <view class="fun_con mar_t50 flex_r flex_ac">
                    <navigator v-if="merchantSetlet.shop" class="fun_list flex_c flex_ac" url="/pagesC/settledMerchant/myShop" hover-class="none">
                        <image class="fun_img" src="/static/my/store.png"></image>
                        <view class="fun_text">我的店铺</view>
                    </navigator>
                    <navigator v-if="merchantSetlet.settled" class="fun_list flex_c flex_ac" url="/pagesC/settledMerchant/addShop" hover-class="none">
                        <image class="fun_img" src="/static/my/merchant.png"></image>
                        <view class="fun_text">商家入驻</view>
                    </navigator>
                    <navigator v-if="merchantSetlet.settled" class="fun_list flex_c flex_ac" url="/pagesC/settledMerchant/myBusiness" hover-class="none">
                        <image class="fun_img" src="/static/my/merchant2.png"></image>
                        <view class="fun_text">我的商家</view>
                    </navigator>
                    <navigator v-if="merchantSetlet.region" class="fun_list flex_c flex_ac" url="/pagesC/settledMerchant/business" hover-class="none">
                        <image class="fun_img" src="/static/my/merchant3.png"></image>
                        <view class="fun_text">区域商家</view>
                    </navigator>
                    <navigator v-if="false" class="fun_list flex_c flex_ac" hover-class="none">
                        <image class="fun_img" src="/static/my/operator.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/my/myWallet" hover-class="none">
                        <image class="fun_img" src="/static/my/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/my/10.png"></image>
                        <view class="fun_text">本地订单</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pages/szw-order-list/index" hover-class="none">
                        <image class="fun_img" src="/static/my/15.png"></image>
                        <view class="fun_text">电商订单</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" url="/pagesC/shoppingMallType/order/list" hover-class="none">
                        <image class="fun_img" src="/static/my/15.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="/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 class="fun_con mar_t50 flex_r flex_ac">
                    <navigator class="fun_list flex_c flex_ac" @click="getImgPage" hover-class="none">
                        <image class="fun_img" src="https://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/icon/share2.png"></image>
                        <view class="fun_text">分享海报</view>
                    </navigator>
                    <navigator class="fun_list flex_c flex_ac" @click="copy" hover-class="none">
                        <image class="fun_img" src="/static/my/14.png"></image>
                        <view class="fun_text">APP下载</view>
                    </navigator>
                </view>
            </view>
        </view>
        <!-- #ifdef APP-PLUS || H5 -->
        <view class="confim flex_r flex_ac flex_jc"  @tap="loginOut">退出登录</view>
        <!-- #endif -->
        <view class="fz_w_text">
            <view>好生活，茶付宝！</view>
            <view class="fz_w_text">茶付宝公司 版权所有 Copyright@2020-2025</view>
            <!-- #ifdef MP-WEIXIN -->
            <view v-if="app.globalData.version">{{ app.globalData.version }}</view>
            <!-- #endif -->
        </view>
        <!-- 授权 -->
        <!-- <authorize-module ref="autho" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" /> -->
        <!-- 激活升级 -->
        <activation ref="activation" tit="激活" />
    </view>
</template>
<script>
// #ifdef MP-WEIXIN
let app = getApp();
// #endif
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 {
            shopInfo: {}, // 商铺信息
            isShiMing: true, //未实名提示弹窗
            userinfo: {}, // 获取用户信息
            unid: "",
            invited: "",
            isAuthentication: uni.getStorageSync("isAuthentication"), //是否开启实名模块
            localInfo: {
                regional:[],
                operate:[]
            }, //数智生活信息
            merchantSetlet: {},
            isBusinessCenter: false,
            teacCountCny: 0,
            equityCountCny: 0
        };
    },
    onLoad(options) {
        uni.setTabBarStyle({
            color: '#999',
            selectedColor: '#3EAEF0',
        })
        //推荐人邀请码|受邀码
        this.invited = uni.getStorageSync("inviteCode") || ""
        this.closeAuto(); //关闭实名功能
    },
    onShow() {
        uni.setTabBarStyle({
            color: '#999',
            selectedColor: '#3EAEF0',
        })
        let token = uni.getStorageSync("token");
        if (!token) this.login()
        else {
            this.getuserInfo();
        }
    },
    methods: {
        login() {
            const deviceInfo = wx.getDeviceInfo()
            let that = this;
            // #ifdef  MP-WEIXIN
            wx.login({
                success(res) {
                    if (res.code) {
                        post("v1/appletLogin", {
                            code: res.code,
                            phone_model: deviceInfo.model,//设备型号
                            phone_brand: deviceInfo.brand,//设备品牌
                            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;
                                    uni.setStorageSync("unid", res.data.unid);
                                    that.shopInfo = app.globalData.shopInfo;
                                    // that.SoHAuth(); //调取授权弹窗
                                }
                            }
                        });
                    }
                },
            });
            // #endif
        },
        toLogin(){
            // #ifdef  MP-WEIXIN
            this.goto("/pages/my/wxLogin");
            // #endif

            // #ifdef  H5 || APP-PLUS
            this.goto("/pages/my/login");
            // #endif
        },
        // 获取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.localInfo = await uni.Luserfun()
            this.merchantSet();
            this.getConvertCny()
        },
        // 跳转到实名页面
        goToAutonym() {
            this.goto("/pages/autonym-submit/index")
        },
        // 关闭实名信息提示
        closeAuto() {
            this.isShiMing = false;
        },
        // 跳转到分享页面
        getImgPage() {
            if (this.isAuthentication) {
                if (this.userinfo.is_authentication == 1) {
                    this.goto("/pages/invi-img/index")
                } else {
                    this.$toast("您还未实名");
                    this.goToAutonym();
                }
            } else {
                this.goto("/pages/invi-img/index")
            }
        },
        // 复制账号
        copyText(e) {
            uniCopy({
                content: e,
                success: (res) => {
                    uni.showToast({
                        title: "已复制到剪贴板",
                        icon: "none",
                        duration: 2000,
                    });
                },
                error: (e) => {},
            });
        },
        copy(){
            // this.$toast("敬请期待")
            uniCopy({
                content: "https://app.chafubao.cn",
                success: (res) => {
                    uni.showToast({
                        title: "APP下载链接已复制，请转到浏览器下载",
                        icon: "none",
                        duration: 1000,
                    });
                },
                error: (e) => {},
            });
        },
        // 点击头像
        upheadimg() {
            let that = this;
            uni.previewImage({
                urls: [that.userinfo.head_pic],
                current: 0,
            });
        },
        activation() {
            this.$refs.activation.open()
        },
        typeto(va) {
            switch (va) {
                // case 1: return "消费商";
                // case 2: return "链接大使";
                // case 3: return "合伙人";
                // case 4: return "联合创始人";
                // case 5: return "联合发起人";
                case 1: return "💎";
                case 2: return "💎💎";
                case 3: return "💎💎💎";
                case 4: return "💎💎💎💎";
                case 5: return "💎💎💎💎💎";
                default:
                    return ""
            }
        },
        // teaC价值
        getConvertCny(){
            post("v1/getConvertCny").then((res) => {
                if (res.code === 0) {
                    this.teacCountCny = Math.floor(Number(res.data.data.teac) * Number(this.userinfo.teac))
                    this.equityCountCny = Math.floor(Number(res.data.data.equity) * Number(this.localInfo.original_equity))
                }
            });
        },
        // 商家中心权限
        merchantSet(){
            post("v1/merchant/settled").then((res) => {
                if (res.code === 0) {
                    this.merchantSetlet = res.data
                    for (const i in res.data) {
                        if(res.data[i]) {
                            this.isBusinessCenter = true
                            return
                        }
                    }
                }
            });
        },
        loginOut(){
            post("v1/logout").then((res) => {
            });
            uni.clearStorageSync();
            uni.reLaunch({
                url:'/pages/my/login'
            })
        }
    },
};
</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;
}
.user_name .consume{
    width: 30rpx;
    height: 30rpx;
    margin-left: 8rpx;
}
.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;
    padding-right: 24rpx;
    .fun_img {
        width: 84rpx;
        height: 84rpx;
        margin-bottom: 10rpx;
    }

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

.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;
        white-space: nowrap;
    }

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

    &.top10{
        margin-top: -2rpx;
    }
}

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

    .i_num {
        text-align: center;
        font-size: 32rpx;
        width: 50%;

        p {
            color: #BE7329;
        }

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

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

        .tc {
            text-align: center;
        }
    }
}

.acc_box{
    padding: 36rpx;
}
.acc_info_next{
    &_item{
        width: 49%;
        color: #276727;
        font-weight: 550;
        box-sizing: border-box;
        padding: 20rpx;
        background: url("http://teaclub.oss-cn-chengdu.aliyuncs.com/img/11.png");
        background-size: 100% 100%;
        .ico {
            width: 42rpx;
            height: 42rpx;
            // margin-right: 12rpx;
        }

        &_bottom{
            font-size: 30rpx;
            font-weight: 600;
        }
    }
    &_item:last-child{
        color: #0B414D;
        background: url("http://teaclub.oss-cn-chengdu.aliyuncs.com/img/12.png");
        background-size: 100% 100%;
        // .acc_info_next_item_bottom{
        //     font-size: 30rpx;
        //     font-weight: 600;
        // }
    }
}

// 账户信息-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

.notice_swiper {
    height: 40rpx;
    // padding-left: 20rpx;
    font-size: 28rpx;
    float: left;
    box-sizing: border-box;
    min-width: 430rpx;
    .not_list {
        min-width: 430rpx;
    }
    .not_ico {
        width: 30rpx;
        font-size: 28rpx;
        color: #999;
    }
    .not_list,
    .not_ico {
        display: inline-block;
        vertical-align: middle;
        height: 40rpx;
        line-height: 40rpx;
    }
}

.confim {
    width: 90%;
    height: 80rpx;
    border-radius: 40rpx;
    background: #2db389;
    color: #fff;
    font-size: 26rpx;
    margin: 44rpx auto 0;
}
</style>