liaotian/pages/mine/index.vue

<!-- 我的 -->
<template>
    <view class="page">

        <div class="usercenter" :style="{'padding-top':statusBarHeight}">

            <ul>
                <li>
                    <image :src="image_cache(user.avatar)" class="avatar" @tap="$jump('mine.profile')" />
                </li>
                <li>
                    <div><span style="font-size: 20px;font-weight: 700;"
                            @tap="$jump('mine.profile')">{{user.nickname}}</span>
                        <image src="/static/img/gender1.png" class="sexbtn" v-if="user.sex==1" />
                        <image src="/static/img/gender2.png" class="sexbtn" v-if="user.sex==2" />
                        <block v-if="system.signopen==1">

                            <span class="sign_btn ok" v-if="user.is_signed==1">
                                <uni-icons type="checkmarkempty" color="#2319dc"></uni-icons>已签</span>
                            <span class="sign_btn click" v-else @tap="click_sign()"> <uni-icons class="icon1"
                                    type="plus"></uni-icons>签到</span>

                        </block>


                    </div>
                    <div>账号:{{user.name}}
                        <image src="/static/img/vip0.png" @tap='joinvip()' class="vipbtn" v-if="user.vip==0" />
                        <image src="/static/img/vip1.png" @tap='joinvip()' class="vipbtn" style="height: 20px;"
                            v-if="user.vip>0" />


                    </div>


                </li>

            </ul>
            <view class="other" @tap="$jump('mine.qrcode')">
                <view class="emoji"
                    style="display: inline-block;vertical-align: middle;margin-right: 2px;;font-size: 24px;color: #fff">
                    &#xe613;</view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #fff;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>



        </div>


        <!-- <view class="showlines" @tap="$jump('mine.bag')">
            <view>
                <image src="/static/img/icon/pay.png" />
            </view>
            <view>
                我的钱包
            </view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view>
        <view class="showlines" v-if="user.vip==0" @tap='joinvip()'>
            <view>
                <image src="/static/img/vip1.png" />
            </view>
            <view>
                加入VIP
            </view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view> -->



        <view class="showlines" v-if="system.inviteopen==1  && user.isdaili==1" @tap="$jump('mine.menu',{act:'team'})">
            <view>
                <image src="/static/img/group.png" style="border-radius: 50%;" />
            </view>
            <view>
                我的下级
            </view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view>
        <view class="showlines" @tap="$jump('mine.menu',{act:'setting'})">
            <view>
                <image src="/static/img/icon/setting.png" />
            </view>
            <view>
                设置
            </view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view>

        <!-- <view class="showlines" @tap="$jump('circle.mycircle',{id:user.id})">
            <view>
                <image src="/static/img/icon-circle.png" />
            </view>
            <view>
                我的朋友圈
            </view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view> -->
        <view class="showlines" @tap="$jump('circle.circle_chat_details')" style="margin-top: 0px;">
            <view>
                <image src="/static/img/icon/note.png" />
            </view>
            <view>
                我的消息
            </view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view>
        <view class="showlines" @tap="goKf" style="margin-top: 0px;" v-if="kf.id">
            <view>
                <image src="/static/img/icon/kf.png" />
            </view>
            <view>
                客服
            </view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view>

        <!-- #ifdef APP-PLUS -->


        <view class="showlines" @tap="check_upload">
            <view>
                <uni-icons class="icon2" type='upload'
                    style="font-size: 22px !important;vertical-align: middle;"></uni-icons>
            </view>
            <view>检查更新</view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view>
        <!-- #endif -->


        <!-- #ifndef APP-PLUS -->
        <view class="showlines" @tap="downapp">
            <view>
                <uni-icons class="icon2" type='download'
                    style="font-size: 22px !important;vertical-align: middle;"></uni-icons>
            </view>
            <view>下载APP</view>
            <view>
                <uni-icons type="arrowright"
                    style="font-size: 16px; color: #666;display: inline-block;vertical-align: middle;font-weight: 600;"></uni-icons>
            </view>
        </view>


        <!-- #endif -->



        <div style="width: 80%;margin: 20px auto;">
            <div class="button1" style="text-align: center" @tap="logout()">

                退出登录
            </div>

        </div>



        <div style="height: 50px;width: 100%"></div>

    </view>
</template>

<script>
    import cache from "../../library/cache.js"
    import http from "../../library/http.js"
    import api from "../../library/index.js"
    import helper from "../../library/helper.js"
    import config from "../../config.js"
    import uniIcons from '../../components/uni-icons/uni-icons.vue'


    var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    var rewardtop = statusBarHeight + 34;
    export default {
        components: {
            uniIcons,


        },
        data() {
            return {
                statusBarHeight: statusBarHeight + 'px',
                rewardtop: rewardtop + 'px',
                user: uni.getStorageSync('userInfo'),
                system: uni.getStorageSync('system'),
                msgnum: 0,
                avatar: '',
                getmoeny: false,
                banklen: 0,
                showlayer: false,
                kf: {},
            }
        },

        methods: {

            downapp() {

                window.open(this.system.downurl)

            },
            uploadImage() {

                uni.chooseImage({
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        helper.uploadFiles(tempFilePaths, 'image', {
                            type: 'avatar'
                        }).then(res => {

                            this.user.avatar = res;
                            this.avatar = res.replace(config.imgUri, '');
                            var postdata = {
                                id: this.user.id,
                                avatar: this.avatar,
                            };
                            http.setWait(false).post('user.php?act=profile', postdata).then(res => {
                                this.user = res.data;

                                uni.setStorageSync('userInfo', this.user)



                            })
                        })
                    }
                });
            },
            previewAvatar() {
                uni.previewImage({
                    urls: [this.image_cache(this.user.avatar)],

                })
            },
            href(path, opts) {

                if (!opts || opts == undefined || opts == null) opts = {};
                this.$jump(path, opts);

            },
            joinvip() {
                if (this.user.vip == 2) return false;
                this.href('mine.joinvip', {});
            },

            fresh_money() {
                this.getmoeny = true;
                var that = this;

                setTimeout(function() {
                    that.getmoeny = false;
                }, 800)
                this.getuserinfo();
            },
            click_sign() {
                var status = this.$action.check_userlock();
                if (status == true) {
                    var postdata = {
                        userid: uni.getStorageSync('access_token')
                    };
                    http.setWait(false).post('user.php?act=sign', postdata).then(res => {
                        this.getuserinfo();
                        uni.showToast({
                            title: res.data,
                            icon: 'none'
                        })
                    })

                }
            },
            getuserinfo() {
                var postdata = {
                    id: uni.getStorageSync('access_token')
                };
                http.setWait(false).post('user.php?act=userinfo', postdata).then(res => {
                    this.user = res.data;
                    uni.setStorageSync('userInfo', this.user)
                    this.getKf()
                })

            },
            getKf() {
                 http.setWait(false).get('user.php?act=getMyFriend',{userid:uni.getStorageSync('access_token')}).then(res => {
                     console.log(res);
                     // console.log();
                     this.kf = res.data.find(item => item.iskefu > 0)
                 })
            },
            goKf() {
              console.log(this.kf); 
              uni.navigateTo({
                  url:'/pages/friend/chat?id='+ this.kf.id + '&nickname=' + this.kf.nickname
              })
            },
            check_upload() {

                let _this = this;

                plus.runtime.getProperty(plus.runtime.appid, function(info) {

                    api.update({
                        version: info.version,
                        osname: plus.os.name
                    }).then(res => {
                        //   console.log(res);
                        if (res.data.status == 1) {

                            uni.showModal({ //提醒用户更新
                                title: "更新提示",
                                content: res.data.content,
                                cancelText: '下次再说',
                                confirmText: '立即更新',
                                success: (r) => {
                                    if (r.confirm) {

                                        plus.runtime.openURL(res.data.downurl);
                                    }

                                }
                            })
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: '当前已是最新版本',
                                duration: 2000
                            })
                        }
                    })

                });
            },
            logout() {
                uni.showModal({
                    title: '提示',
                    content: '确定要退出吗？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '确定',
                    success: res => {
                        if (res.confirm) {
                            this.$socket.send({
                                type: 'logout',
                                token: uni.getStorageSync('access_token'),

                            });
                            uni.removeStorageSync('access_token');
                            uni.removeStorageSync('userInfo');
                            this.$action.quitcid();
                            //this.$store.commit('chat/clear')
                            //	this.$jump('game.index')
                            uni.reLaunch({
                                url: '/pages/login/index'
                            })
                        }
                    }
                });
            },
        },
        onShow() {
            if (uni.getStorageSync('access_token') > 0) {
                this.getuserinfo();

            } else {
                this.$jump('login.index');
            }

            this.$action.setStatusTips();

        }
    }
</script>

<style lang="scss" scoped>
    .page {
        background-color: #fafafa;
        font-size: 14px;
    }

    .usercenter {

        display: inline-block;
        width: 100%;


        padding-bottom: 10px;
        position: relative;
        // background: -webkit-linear-gradient(left top, #01d9ff , #01a9fe);
        // background: -o-linear-gradient(bottom right, #01d9ff, #01a9fe);
        // background: -moz-linear-gradient(bottom right, #01d9ff, #01a9fe);
        // background: linear-gradient(to right, #01d9ff , #01a9fe);
        background: $uni-color-primary;
        height: 125px;
        color: #fff;
        padding-left: 0px;

    }

    .usercenter>ul {
        display: flex;
        flex-direction: row;
        width: calc(100% - 20px);
        padding: 10px 10px;
        margin-top: 30px;
    }

    .usercenter .setting {

        position: absolute;
        right: 20px;
        top: 13px;

        display: inline-block;
        border-radius: 50%;
        color: #fff;
        font-size: 22px;

    }

    .usercenter li {

        vertical-align: middle;
        line-height: 28px;
    }

    .usercenter li:first-child {
        width: 70px;
        text-align: left;
        padding-left: 15px;
        line-height: 30px;
        padding-top: 5px;
    }

    .usercenter li:last-child {
        padding-top: 5px;
        width: calc(100% - 90px);
    }

    .usercenter .avatar {
        height: 60px;
        width: 60px;
        border-radius: 5px;
        vertical-align: top;

    }

    .usercenter .other {
        color: #fff;
        position: absolute;
        right: 15px;
        bottom: 30px;
        line-height: 25px;
        text-align: right;
        display: inline-block;
        width: 60px;
    }

    .usercenter .menu {
        position: absolute;
        left: 0px;
        width: 100%;
        bottom: 0px;
        line-height: 40px;
        height: 40px;
        text-align: center;
        display: table;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .usercenter .menu .row {
        display: table-cell;
        color: #fff;
    }

    .sexbtn {
        height: 16px;
        width: 16px;

        vertical-align: middle;
        border-radius: 5px;
        margin-left: 5px;
        margin-bottom: 5px
    }

    .vipbtn {
        height: 22px;
        width: 22px;

        vertical-align: middle;
        margin-left: 5px;
        margin-bottom: 5px;
    }

    .button1 {
        height: 40px;
        line-height: 40px;
        border: 0px;
        border-radius: 20px;
        color: #fff;
        // background: -webkit-linear-gradient(left top, #3388ff , #2319dc);
        // background: -o-linear-gradient(bottom right, #3388ff, #2319dc);
        // background: -moz-linear-gradient(bottom right, #3388ff, #2319dc);
        // background: linear-gradient(to bottom right, #3388ff , #2319dc);
        background: $uni-color-primary;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }

    .icon1 {
        font-size: 16px !important;
        color: #fff !important;
        margin-right: 3px;
    }

    .icon2 {
        font-size: 28px !important;

    }

    .icon3 {
        font-size: 16px !important;
        color: #333 !important;
        margin-right: 1px;
    }

    .fresh {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }

    .fresh.active {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    }

    .showlines {
        display: flex;
        height: 50px;
        line-height: 50px;
        margin-top: 15px;
        flex-direction: row;
        background-color: #fff;

    }

    .showlines>view {

        flex-direction: row;
        height: 50px;
        line-height: 50px;

    }

    .showlines>view:nth-child(1) {
        width: 60px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .showlines>view:nth-child(2) {
        width: calc(100% - 100px);
        text-align: left;
        font-size: 16px;
        color: #000;
    }

    .showlines>view:nth-child(3) {
        width: 40px;
        text-align: center;
    }

    .showlines image {
        width: 25px;
        height: 25px;
        vertical-align: middle;

    }

    .sign_btn {

        height: 25px;
        line-height: 25px;
        border: 0px;
        border-radius: 5px;

        cursor: pointer;
        padding: 0px 8px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        display: inline-block;

        float: right;
    }

    .sign_btn.click {
        color: #fff;
        background: -webkit-linear-gradient(left top, #f05c36, #ff7e00);
        background: -o-linear-gradient(bottom right, #f05c36, #ff7e00);
        background: -moz-linear-gradient(bottom right, #f05c36, #ff7e00);
        background: linear-gradient(to bottom right, #f05c36, #ff7e00);
    }

    .sign_btn i:before {
        margin-left: 0px;
    }

    .sign_btn.ok {
        color: #2319dc;
        background-color: #ccc;
        border: 1px solid #ddd;
        height: 23px;
        line-height: 23px;
    }
</style>