新增微信账号快捷登录、账号绑定、换绑功能，及页面更新。

付延余

2022-09-06 f47ce70afac05ce941b5eafb2d9114c7a017f774

新增微信账号快捷登录、账号绑定、换绑功能，及页面更新。

 api/global.js

@@ -27,9 +27,9 @@
    });
}

// const baseUrl = 'http://192.168.0.159:9999'
// const baseUrl = 'http://192.168.3.159:9999'
// const baseUrl = 'https://mx.jzeg.cn:443/app';
const baseUrl = "https://mx.jzeg.cn:9998";
const baseUrl = "https://mx.jzeg.cn:9998"; // 正式服务

// POST请求
function apiLogin({
@@ -59,7 +59,38 @@
                resolve(res);
            },
            fail: (err) => {
                console.log('错误',err);
                console.log('错误', err);
                uni.hideLoading();
                uni.showToast({
                    icon: 'none',
                    title: '服务器错误'
                })
            }
        })
    })
}

function wxSmallLogin(code) {
    uni.showLoading({
        title: '登录中...',
    })

    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + `/auth/mobile/token/social?grant_type=mobile&mobile=MINI@${code}`,
            method: "POST",
            header: {
                "TENANT-ID": "5",
                "Authorization": "Basic cGlnOnBpZw==",
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                uni.hideLoading();
                // console.log(res)
                resolve(res);
            },
            fail: (err) => {
                console.log('错误', err);
                uni.hideLoading();
                uni.showToast({
                    icon: 'none',
@@ -71,6 +102,8 @@
}




// 获取流程数据
// export const getProcessDataList = (params) => {
//     return getRequest('/oa/actProcess/getByCondition', params)
@@ -78,5 +111,6 @@


export default {
    apiLogin
    apiLogin,
    wxSmallLogin
}

 main.js

@@ -16,7 +16,6 @@

Vue.prototype.$store = store


Vue.config.productionTip = false



 pages.json

@@ -3,7 +3,9 @@
        {
            "path": "pages/login/login",
            "style": {
                "navigationStyle": "custom"
                // "navigationStyle": "custom"
                "navigationBarTitleText": "请登录",
                "enablePullDownRefresh": false
            }
        },
        {
@@ -82,8 +84,37 @@
                "navigationBarTitleText": "修改",
                "enablePullDownRefresh": false
            }
        }, {
            "path": "pages/register/register",
            "style": {
                "navigationBarTitleText": "绑定账号",
                "enablePullDownRefresh": false
                // "navigationStyle": "custom"
            }
        }
    ],
    ],
    "tabBar": {
        // "color": "#999794",
        // "selectedColor": "#007AFF",
        // "borderStyle": "white",
        // "backgroundColor": "#F5F5F5",
        "custom": true,
        "list": [
            // 客户tabbar
            {
                "pagePath": "pages/home/home"
                // "iconPath": "static/tabBar-icon/Gfayun.png",
                // "selectedIconPath": "static/tabBar-icon/Bfayun1.png",
                // "text": "发运"
            },
            {
                "pagePath": "pages/login/login"
                // "iconPath": "static/tabBar-icon/Gfayun.png",
                // "selectedIconPath": "static/tabBar-icon/Bfayun1.png",
                // "text": "发运"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "uni-app",

 pages/home/home.vue

@@ -2,16 +2,12 @@
    <view class="home">

        <!-- 轮播图 -->

        <view class="home_swipe"><u-swiper :list="list3" indicator indicatorMode="line" circular></u-swiper></view>



        <!-- 图表 -->

        <combined-title title="煤仓库存明细"></combined-title>

        <view class="charts-box">

            <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" v-if="uchartsData.length > 0" />

            <u-empty

                    mode="data"

                    icon="http://cdn.uviewui.com/uview/empty/data.png"

                            v-if="uchartsData.length == 0" 
            >

            </u-empty>

            <u-empty mode="data" iconSize="200" textSize="25" width="350" height="350" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="uchartsData.length == 0"></u-empty>

        </view>

        <!-- 我的申请 -->

        <combined-title title="我的申请" detailsPath="/pages/my-application/my-application" v-if="shenqingMenu"></combined-title>

@@ -62,7 +58,7 @@
                                <image src="@/static/home/jindu.png" mode=""></image>

                                <view>查看进度</view>

                            </view>

                            <view @click="theFormDataClick(item.tableId)" v-if="(item.status == 1 || item.status == 2) && (item.procDefId == 'WAY_BILL:4:87504')">

                            <view @click="theFormDataClick(item.tableId)" v-if="(item.status == 1 || item.status == 2) && item.procDefId == 'WAY_BILL:4:87504'">

                                <image src="@/static/home/biaodan.png" mode=""></image>

                                <view>表单数据</view>

                            </view>

@@ -218,7 +214,7 @@


        <!-- 日计划 -->

        <combined-title title="日发运计划" detailsPath="/pages/jihua/jihua" v-if="rijihuaMenu"></combined-title>

        <view class="card-group">

        <view class="card-group bottomChild" >

            <combination-card class="card" :showTop="false" v-for="(item, index) in fyData.slice(0, 2)" :key="item.id" v-if="rijihuaMenu">

                <template v-slot:top></template>

                <template v-slot:center>

@@ -306,6 +302,20 @@


        <!-- 菜单栏 -->

        <!-- <popup-menu @menuShow="menushow" ref="menuRef"></popup-menu> -->

        <u-gap height="15" bgColor="#eeeeee"></u-gap>

        <view class="utils">

            <view class="utils-container">

                <view class="utils-container-body" @click="redirectLogin">

                    <view class="top"><u-icon name="backspace" color="#FF4233" size="70"></u-icon></view>

                    <view class="bottom-text"><text>退出</text></view>

                </view>

                <view class="utils-container-body" @click="huanBang">

                    <view class="top"><u-icon name="lock-open" color="#1987FF" size="70"></u-icon></view>

                    <view class="bottom-text"><text>换绑</text></view>

                </view>

            </view>

        </view>

        <u-gap height="60" bgColor="#eeeeee"></u-gap>

    </view>

</template>



@@ -315,7 +325,7 @@
// import popupMenu from '@/components/common/popup-menu/popup-menu.vue';

import combinedTitle from '@/components/common/combined-title/combined-title.vue';

import combinationCard from '@/components/common/combination-card/combination-card.vue';

import { setAccessToken } from '@/utils/status.js';

import { setAccessToken, redirectLogin } from '@/utils/status.js';



export default {

    name: 'home',

@@ -432,27 +442,31 @@
    // },

    // 点击导航栏菜单后

    onNavigationBarButtonTap(e) {

        console.log('退出导航栏按钮事件',e);

        console.log('退出导航栏按钮事件', e);

        // this.$refs.menuRef.menuClick();

    },

    // 监听左上角的回退事件

    onUnload(event){ //多层级跳转之后，监听左上角返回事件，直接退回到index

        console.log('监听左上角',event);

        uni.request({

          url: `${BaseUrl}/auth/token/logout`,

          method: 'DELETE',

          header: {

            'TENANT-ID': 5,

            Authorization: 'Bearer ' + uni.getStorageSync('access_token'),

            VERSION: 'zzl'

          }

        }).then(res=>{

            console.log('缓存清理成功');

        }).catch(err => {

          uni.showToast({

            title: '缓存清理失败！',

          })

        })

    onUnload(event) {

        //多层级跳转之后，监听左上角返回事件，直接退回到index

        console.log('监听左上角', event);

        uni

            .request({

                url: `${BaseUrl}/auth/token/logout`,

                method: 'DELETE',

                header: {

                    'TENANT-ID': 5,

                    Authorization: 'Bearer ' + uni.getStorageSync('access_token'),

                    VERSION: 'zzl'

                }

            })

            .then(res => {

                console.log('缓存清理成功');

            })

            .catch(err => {

                uni.showToast({

                    title: '缓存清理失败！'

                });

            });

    },

    onShow() {

        // 菜单注释（app待用）

@@ -486,7 +500,7 @@
            });

        },

        getServerData() {

            console.log('加载图表',this.uchartsData);

            console.log('加载图表', this.uchartsData);

            //模拟从服务器获取数据时的延时

            setTimeout(() => {

                //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接

@@ -783,6 +797,14 @@
            this.deleteApplicationModalShow = true;

            this.procInstId = id;

            console.log(id);

        },

        redirectLogin() {

            redirectLogin();

        },

        huanBang() {

            uni.navigateTo({

                url: '/pages/register/register'

            });

        }

    }

};

@@ -793,7 +815,20 @@
    width: 100%;

    display: flex;

    flex-direction: column;

    padding-bottom: vww(20);



    // 横向菜单栏

    .utils {

        .utils-container {

            display: flex;

            justify-content: space-between;

            width: 66%;

            margin: 0 auto;

            .utils-container-body {

                display: flex;

                align-items: center;

            }

        }

    }



    .home_swipe {

        width: 100%;

@@ -820,8 +855,8 @@
        width: 91%;

        height: vww(330);

        margin: 0 auto;

        .u-empty{

            height:100%;

        .u-empty {

            height: 100%;

        }

    }



@@ -839,6 +874,9 @@
                }

            }

        }

    }

    .bottomChild{

        margin-bottom: vww(20);

    }



    // 卡片中间

@@ -925,7 +963,7 @@
        // width:100%;

        // height:vww(244);

        .slot-content {

      width:vww(330);

            width: vww(330);

            .rejectMesaage {

                display: flex;

                padding: vww(3);

@@ -1062,4 +1100,4 @@
        }

    }

}

</style>

</style>

 pages/login/login.vue

@@ -1,125 +1,100 @@
<template>
    <view class="login">
        <image src="@/static/login/banner.png" class="background"></image>
        <view class="inputBox">
            <view class="phone">
                <image src="@/static/login/phone.png" mode="加载错误"></image>
                <input type="text" placeholder="请输入用户名/手机号" v-model="formData.username" />
            </view>
            <view class="password">
                <image src="@/static/login/lock.png" mode="加载错误" />
                <input type="password" placeholder="请输入账号密码" v-model="formData.password" />
            </view>
            <view class="loginBtn"><button type="default" @click="loginSubmit">登录</button></view>
        </view>
        <view class="loginBtn"><u-button throttleTime="3000" text="微信账号快捷登录" type="success" shape="circle" icon="weixin-fill" @click="wxLogin"></u-button></view>
    </view>
</template>

<script>
import { setAccessToken,setTokenType,setRefreshToken,setClientId,setScope,redirectHome,redirectLogin } from '@/utils/status.js'
import { setAccessToken, setTokenType, setRefreshToken, setClientId, setScope, redirectHome, redirectLogin } from '@/utils/status.js';
export default {
    name: 'login',
    data() {
        return {
            formData:{
                username:'',
                password:''
            }
            wxcode: ''
        };
    },
  onShow(){
      // 清除缓存
    if(uni.getStorageSync('userInfo')||uni.getStorageSync('access_token')||uni.getStorageSync('refresh_token')){
      this.$u.toast('成功进入登录页');
      uni.clearStorageSync();
    }
  },
    methods:{
        loginSubmit(){
      console.log('点击登录');
      // console.log('login');
            uni.showLoading({
                title:'登录中...'
            });
            this.apiLogin(this.formData).then(this.saveUserInfo).catch(this.loginFail);
        },
        saveUserInfo(response){
            uni.hideLoading();
            if(response.statusCode === 200){
                // console.log('res',response);
                const { data } = response;
                const { access_token,refresh_token,token_type,scope } = data;
                try {
                    setAccessToken(access_token);
                    setTokenType(token_type);
                    setRefreshToken(refresh_token);
                    setScope(scope);
                    this.$store.dispatch('menus')
                    redirectHome();
                    uni.hideLoading();
                } catch (e) {
                    // error
                    console.log(e);
                }
            } else{
                uni.showToast({
                    title:response.data.msg,
                    icon:'error',
                    duration:2000
                })
            }
    onShow() {
        // 清除缓存
        if (uni.getStorageSync('userInfo') || uni.getStorageSync('access_token') || uni.getStorageSync('refresh_token')) {
            uni.clearStorageSync();
        }

    },
    methods: {
        wxLogin() {
            uni.showLoading({
                title: '加载中...'
            });
            uni.login({
                success: res => {
                    console.log('登录loginRes', res);
                    if (res.code) {
                        this.wxcode = res.code;
                        this.wxSmallLogin(this.wxcode)
                            .then(res => {
                                if (res.data.data == '用户不存在') {
                                    this.$u.toast('未绑定系统账号，即将跳转绑定页面！')
                                    setTimeout(()=>{
                                        uni.navigateTo({
                                            url: '/pages/register/register'
                                        });
                                    },1000)
                                } else if (res.data.active && res.data.active == true) {
                                    const { access_token, refresh_token, token_type, scope } = res.data;
                                    try {
                                        setAccessToken(access_token);
                                        setTokenType(token_type);
                                        setRefreshToken(refresh_token);
                                        setScope(scope);
                                        this.$store.dispatch('menus');
                                        redirectHome();
                                        uni.hideLoading();
                                    } catch (e) {
                                        // error
                                        console.log(e);
                                    }
                                }
                                console.log('微信登录', res);
                            })
                            .catch(err => {
                                console.log('错误', err);
                            });
                    } else {
                        uni.showToast({
                            title: '微信登录失败！',
                            duration: 2000
                        });
                    }
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.login {
::v-deep.login {
    height: 100vh;

    .background {
        width: 100%;
        height: vww(289);
        // height: vww(289);
        height: vww(246);
    }
    .inputBox {
        width: vww(280);
        margin: vww(40) auto;
        input {
            width: vww(240);
            margin-left: vww(8);
        }
        .phone {
            width: vww(280);
            height: vww(36);
            display: flex;
            align-items: center;
            border-bottom: vww(1) solid #cccccc;
            image {
                width: vww(20);
                height: vww(20);
            }
        }
        .password {
            width: vww(280);
            height: vww(36);
            display: flex;
            align-items: center;
            margin-top: vww(40);
            border-bottom: vww(1) solid #cccccc;
            image {
                width: vww(20);
                height: vww(20);
            }
        }
        .loginBtn {
            margin-top: vww(80);

            button {
                background-color: #007aff;
                color: #ffffff;
                font-size: vww(16);
                border-radius: vww(22);
    .loginBtn {
        margin: vww(60) auto;
        width: 80%;
        .u-button {
            .u-icon {
                .u-icon__icon {
                    font-size: vww(30) !important;
                }
            }
        }

        .u-button--success {
            border-style: none;
        }
    }
}
</style>

 pages/register/register.vue

New file
@@ -0,0 +1,153 @@
<template>
    <view class="login">
        <image src="@/static/login/banner.png" class="background"></image>
        <view class="inputBox">
            <view class="phone">
                <image src="@/static/login/phone.png" mode="加载错误"></image>
                <input type="text" placeholder="请输入用户名/手机号" v-model="formData.username" />
            </view>
            <view class="password">
                <image src="@/static/login/lock.png" mode="加载错误" />
                <input type="password" placeholder="请输入账号密码" v-model="formData.password" />
            </view>
            <view class="loginBtn"><button type="default" @click="loginSubmit">绑定</button></view>
        </view>
    </view>
</template>

<script>
import { setAccessToken, setTokenType, setRefreshToken, setClientId, setScope, redirectHome, redirectLogin } from '@/utils/status.js';
export default {
    name: 'login',
    data() {
        return {
            formData: {
                username: '',
                password: ''
            },
            bindData: {
                state: 'MINI',
                code: ''
            }
        };
    },
    methods: {
        loginSubmit() {
            console.log('点击登录');
            // console.log('login');
            uni.showLoading({
                title: '登录中...'
            });
            this.apiLogin(this.formData)
                .then(this.saveUserInfo)
                .catch(this.loginFail);
        },
        saveUserInfo(response) {
            uni.hideLoading();
            if (response.statusCode === 200) {
                const { access_token, refresh_token, token_type, scope } = response.data;
                try {
                    setAccessToken(access_token);
                    setTokenType(token_type);
                    setRefreshToken(refresh_token);
                    setScope(scope);
                    // this.$store.dispatch('menus');
                    // redirectHome();
                    uni.hideLoading();
                    this.bindWx(); // 登录成功后获取code码，返给后端
                } catch (e) {
                    // error
                    console.log('检测到错误',e);
                }
            } else {
                uni.showToast({
                    title: response.data.msg,
                    icon: 'error',
                    duration: 2000
                });
            }
        },
        loginFail(err) {
            console.log('登录接口错误', err);
        },
        bindWx() {
            uni.login({
                success: res => {
                    this.bindData.code = res.code;
                    this.bindWxPost();
                },
                fail: err => {
                    console.log('微信登录错误', err);
                }
            });
        },
        bindWxPost() {
            this.$reqPost('bindWx', this.bindData)
                .then(res => {
                    if (res.code == 0) {
                        this.$u.toast('绑定成功，即将返回登录页！');
                        setTimeout(() => {
                            uni.reLaunch({
                                url:"/pages/login/login"
                            })
                        }, 1000);
                    }
                })
                .catch(err => {
                    console.log('绑定错误', err);
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.login {
    .background {
        width: 100%;
        // height: vww(289);
        height: vww(246);
    }
    .inputBox {
        width: vww(280);
        margin: vww(40) auto;
        input {
            width: vww(240);
            margin-left: vww(8);
        }
        .phone {
            width: vww(280);
            height: vww(36);
            display: flex;
            align-items: center;
            border-bottom: vww(1) solid #cccccc;
            image {
                width: vww(20);
                height: vww(20);
            }
        }
        .password {
            width: vww(280);
            height: vww(36);
            display: flex;
            align-items: center;
            margin-top: vww(40);
            border-bottom: vww(1) solid #cccccc;
            image {
                width: vww(20);
                height: vww(20);
            }
        }
        .loginBtn {
            margin-top: vww(80);

            button {
                background-color: #007aff;
                color: #ffffff;
                font-size: vww(16);
                border-radius: vww(22);
            }
        }
    }
}
</style>

 utils/api.js

@@ -1,4 +1,10 @@
export const api = {
    // 微信绑定客户
    bindWx:{
        url:'/admin/social/bind',
        method:"POST"
    },
	
    // 获取单位树
    fetchCompTree:{
        url:'/admin/dept/compTree',

 utils/index.js

@@ -28,7 +28,7 @@
}

// post请求
export const reqPost = (url, params, form, opt = {}) => {
export const reqPost = (url, params,form, opt = {}) => {
    if(form == 'form'){
        opt.header = {'Content-Type': 'application/x-www-form-urlencoded'}
    } else {
@@ -36,5 +36,6 @@
    }
    opt.method = "POST";
    opt.data = params;
    opt.params = params;
    return fetch(url, opt)
}

 utils/request.js

@@ -82,9 +82,9 @@
    500: responseError
}

// let BaseUrl = 'http://192.168.0.159:9999';
// let BaseUrl = 'http://192.168.3.159:9999';
// const BaseUrl = 'https://mx.jzeg.cn:443/app';
const BaseUrl = "https://mx.jzeg.cn:9998";
const BaseUrl = "https://mx.jzeg.cn:9998";  // 正式服务

// 请求拦截
const fetch = (url, opt ,urlParam) => {

 utils/status.js

@@ -16,7 +16,7 @@
export const setRefreshToken = SetStorage(refresh_token);
export const setScope = SetStorage(scope)
export const redirectHome = (path) => {
    uni.reLaunch({
    uni.switchTab({
        url: path || SuccessRedirect
    })
}