#

whycq

2023-11-01 9b3f629cb2d15d0e77d7ecd827f84629ddd0c9a9

#

 components/My-input/My-input.vue

@@ -1,9 +1,18 @@
<template>
    <view class="my-input">
    <view class="user-input">
        <uni-icons class="title-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
        <view class="box-text">{{title}}:</view>
        <input class="input" :type="inputType"  :placeholder="placeholder">
        <input class="input" type="text"  :placeholder="placeholder" v-model="data" v-show="inputType == 'text'">
        <input class="input" type="password"  :placeholder="placeholder" v-model="data" v-show="inputType == 'password'">
        <uni-icons class="opt-icon" :type="optIcon" size="20" color="#707070" v-show="optIconShow"></uni-icons>
		
        <!-- <uni-icons class="user-input-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
        <view class="user-input-text">{{title}}:</view>
        <input class="user-input-input" :type="inputType"  :placeholder="placeholder" v-model="data">
        <uni-icons class="user-input-opticon" :type="optIcon" size="20" color="#707070" v-show="optIconShow"></uni-icons> -->
        <!-- <uni-icons class="user-input-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
        <view class="user-input-text">{{title}}:</view>
        <input class="user-input-input" :type="inputType"  :placeholder="placeholder" v-model="data"> -->
    </view>
</template>

@@ -37,18 +46,31 @@
            optIconShow: {
                type: Boolean,
                default: false
            }
            },
            value: {
                type: [String,Number],
                default: ''
            },
        },
        watch: {
            data(val) {
                this.$emit('input',val)
            },
            value(val) {
                this.data = val
            },
        },
        data() {
            return {
                data:'',
            }
        }
        
    }
</script>

<style lang="scss">
    .my-input {
<style lang="scss" scoped>
    .user-input {
        width: 100%;
        height: 45px;
        display: flex;
@@ -60,6 +82,12 @@
                    inset -4px -4px 4px rgba(255,255,255,.7),
                    -4px -4px 5px rgba(0,0,0,.4);
    }
	
    .user-input-icon{
		
    }
	
	
    .title-icon {
        margin: 0 8px 0 8px;
    }

 pages/LoginDemo/LoginDemo.vue

@@ -10,11 +10,13 @@
        </view>
        <view class="right">
            <view class="input-box">
                <My-input class="my-input" titleIcon="person" title="账号" placeholder="请输入账号" inputType="text" optIcon="bottom" />
                <My-input class="my-input" titleIcon="locked" title="密码" placeholder="请输入密码" inputType="password" optIcon="eye" optIconShow/>
                <My-input class="my-input" v-model="user.username" titleIcon="person" title="账号" placeholder="请输入账号"
                    inputType="text" optIcon="bottom" />
                <My-input class="my-input" v-model="user.password" titleIcon="locked" title="密码" placeholder="请输入密码"
                    inputType="password" optIcon="eye" optIconShow />
                <view class="rember-password">
                    <view class="text">记住密码</view>
                    <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange"/>
                    <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange" />
                </view>
            </view>
            <!-- <view class="button" @click="login" :loading="load.loading">
@@ -27,18 +29,18 @@
            <view class="popup">
                <!-- 标题 -->
                <view class="title">网 络 配 置</view>
                    <scroll-view scroll-y="true" style="height: 23vh;touch-action: none;">
                        <view style="margin: 4px; color: #606266;font-size: 12px; " v-for="net in network">
                            <text style="font-size: 14px;">{{net.name}}</text>
                            <view style="display: flex;align-items: center;">
                                <input class="settings-input1" type="text" v-model="net.ip"> 
                                <text style="font-weight: 900;">:</text>
                                <input class="settings-input2" type="text" v-model="net.port"> 
                                <text style="font-weight: 900;">/</text>
                                <input class="settings-input3" type="text" v-model="net.address">
                            </view>
                <scroll-view scroll-y="true" class="settings-scroll">
                    <view class="scroll-item" v-for="net in network">
                        <view class="item-title" style="">{{net.name}}</view>
                        <view style="display: flex;align-items: center;">
                            <input class="settings-input1" type="text" v-model="net.ip">
                            <text style="font-weight: 900;">:</text>
                            <input class="settings-input2" type="text" v-model="net.port">
                            <text style="font-weight: 900;">/</text>
                            <input class="settings-input3" type="text" v-model="net.address">
                        </view>
                    </scroll-view>
                    </view>
                </scroll-view>
                <view class="operate">
                    <view class="operate-cancel" @click="cancel">
                        取消
@@ -49,7 +51,7 @@
                </view>
            </view>
        </uni-popup>
		

        <!-- 版本号 -->
        <!-- #ifdef APP-PLUS -->
        <view class="version">
@@ -61,16 +63,31 @@

<script>
    // import { data } from 'jquery'
    import { mapState } from 'vuex'//引入mapState
    import {
        mapState
    } from 'vuex' //引入mapState
    import md5 from '../../static/js/md5.js'
    export default {
        data() {
            return {
                version: '',
                remberPassword: true,
                network: [
                    {name: 'wms',ip:'192.168.1.1',port: '8080',address: 'pswms'},
                    {name: 'wcs',ip:'192.168.1.1',port: '9090',address: 'pswcs'}
                user: {
                    username: '1',
                    password: '2'
                },
                network: [{
                        name: 'wms',
                        ip: '192.168.1.1',
                        port: '8080',
                        address: 'pswms'
                    },
                    {
                        name: 'wcs',
                        ip: '192.168.1.1',
                        port: '9090',
                        address: 'pswcs'
                    }
                ],
                load: {
                    loading: false,
@@ -80,13 +97,19 @@
        },
        computed: mapState({
            project: state => state.project
        }) ,
        }),
        onShow() {

        },
        mounted() {
            uni.getSystemInfo({
                success(res) {
                    // console.log(res);
                }
            })
            if (uni.getStorageSync('user')) {
                this.user = uni.getStorageSync('user')
            }
            // 手机端版本号
            // #ifdef APP-PLUS
            var that = this
@@ -97,9 +120,12 @@
        },
        methods: {
            remberChange() {
				

            },
            settings() {
                if (uni.getStorageSync('Network')) {
                    this.network = uni.getStorageSync('Network')
                }
                this.$refs.settings.open()
            },
            cancel() {
@@ -110,8 +136,10 @@
                this.$refs.settings.close()
            },
            onLogin() {
                let _this = this,path = 'demo',network = uni.getStorageSync('Network');
                if(!network) {
                let _this = this,
                    path = 'demo',
                    network = uni.getStorageSync('Network');
                if (!network) {
                    uni.showToast({
                        icon: 'error',
                        title: '请配置网络信息'
@@ -121,17 +149,18 @@
                // path = path.substring(0, path.length - 3);
                path = _this.project.name
                let baseUrl = `http://${network[0].ip}:${network[0].port}/${network[0].address}`
                _this.load.loading = true;
                _this.load.btnText = '登录中';
                uni.setStorageSync('user', _this.user);
                uni.request({
                    url: `${baseUrl}/login.action`,
                    data: {
                        username: 'super',
                        password: md5.hex_md5('xltys1995')
                        username: _this.user.username,
                        password: md5.hex_md5(_this.user.password)
                    },
                    success(res) {
                        res = res.data
                        if (res.code === 200) {
                            _this.load.loading = true;
                            _this.load.btnText = '登录中';
                            uni.setStorageSync('token', res.data.token);
                            _this.load.btnText = '登录中';
                            setTimeout(() => {
@@ -150,7 +179,7 @@
                        //     fail(res) {
                        //         console.log(`没有${path}项目,请联系管理元`);
                        //     }
							

                        // })
                    }
                })
@@ -165,11 +194,11 @@
        top: 8px;
        right: 8px;
        border-radius: 10px;
        box-shadow: inset 2px 2px 2px rgba(0,0,0,.3),
                    inset -2px -2px 2px rgba(255,255,255,.7),
                    -2px -2px 2px rgba(0,0,0,.4);
        box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .3),
            inset -2px -2px 2px rgba(255, 255, 255, .7),
            -2px -2px 2px rgba(0, 0, 0, .4);
    }
	

    .main {
        height: 100%;
        width: 100%;
@@ -177,45 +206,54 @@
        background-color: #ECF0F1;
        position: absolute;
    }

    .left {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-box {
        background-color:  #ECF0F1;
        background-color: #ECF0F1;
        border-radius: 15px;
        box-shadow: inset 8px 8px 8px rgba(0,0,0,.3),
                    inset -8px -8px 8px rgba(255,255,255,.7),
                    -8px -8px 10px rgba(0,0,0,.4);
        box-shadow: inset 8px 8px 8px rgba(0, 0, 0, .3),
            inset -8px -8px 8px rgba(255, 255, 255, .7),
            -8px -8px 10px rgba(0, 0, 0, .4);
    }

    image {
        height: 100%;
        width: 100%;
    }

    .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .input-box {
        width: 100%;
    }

    .my-input {
        width: 80%;
        margin: 16px 10% 16px 10%;
    }

    .rember-password {
        width: 78%;
        margin: 0 11% 0 11%;
        display: flex;
        justify-content: space-between;

        .text {
            font-size: 12px;
            color: #606266;
            line-height: 1;
        }
    }

    .button {
        width: 40%;
        margin: 0 auto;
@@ -223,55 +261,67 @@
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        background-color:  #409EFF;
        background-color: #409EFF;
        color: #ECF0F1;
        border-radius: 7px;
        box-shadow: inset 4px 4px 4px rgba(0,0,0,.3),
                    inset -4px -4px 4px rgba(255,255,255,.4),
                    -4px -4px 5px rgba(0,0,0,.4);
        box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
            inset -4px -4px 4px rgba(255, 255, 255, .4),
            -4px -4px 5px rgba(0, 0, 0, .4);
    }

    .button:active {
        transform: translateY(5px) scale(0.99, 0.99);
        box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
            inset -4px -4px 8px rgba(255, 255, 255, .7),
            -5px -5px 5px rgba(0, 0, 0, .3);
        transform: translateY(5px) scale(0.99, 0.99);
        box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
            inset -4px -4px 8px rgba(255, 255, 255, .7),
            -5px -5px 5px rgba(0, 0, 0, .3);
    }

    @media screen and (orientation: portrait) {

        /* 竖屏 */
        .main {
            flex-direction: column;
        }

        .left {
            height: 40%;
            width: 100%;
        }

        .right {
            height: 40%;
            height: 50%;
            width: 100%;
        }

        .logo-box {
            height: 60%;
            width: 80%;
        }
    }

    @media screen and (orientation: landscape) {

        /* 横屏 */
        .main {
            display: flex;
        }

        .left {
            height: 100%;
            width: 50%;
        }

        .right {
            height: 100%;
            width: 50%;
        }

        .logo-box {
            height: 60%;
            width: 80%;
        }
    }

    .version {
        position: fixed;
        width: 100%;
@@ -280,13 +330,14 @@
        font-size: 10px;
        color: #909399;
    }
	

    .popup {
        width: 90vw;
        height: 40vh;
        background-color: #fff;
        border-radius: 16px;
    }

    .title {
        height: 10vh;
        display: flex;
@@ -295,28 +346,49 @@
        font-size: 24px;
        color: #a8abb2;
    }

    .settings-scroll {
        height: 23vh;
        touch-action: none;
    }

    .scroll-item {
        margin: 4px 16px;
        color: #606266;
        font-size: 12px;
    }

    .item-title {
        font-size: 14px;
        width: 100%;
        text-align: center;
    }

    .settings-input1 {
        border: 1px solid #dcdfe6;
        flex: 2;
        flex: 5;
        margin: 2px;
        padding: 4px;
        border-radius: 4px;
    }

    .settings-input2 {
        border: 1px solid #dcdfe6;
        flex: 1;
        flex: 3;
        margin: 2px;
        padding: 4px;
        border-radius: 4px;
    }

    .settings-input3 {
        border: 1px solid #dcdfe6;
        flex: 2;
        flex: 3;
        margin: 2px;
        padding: 4px;
        border-radius: 4px;
		

    }

    .operate {
        height: 7vh;
        display: flex;
@@ -324,6 +396,7 @@
        border-top: 1px solid #dcdfe6;
        font-size: 16px;
    }

    .operate-cancel {
        flex: 1;
        display: flex;
@@ -331,6 +404,7 @@
        justify-content: center;
        color: #606266;
    }

    .operate-confirm {
        flex: 1;
        display: flex;

 pages/api/common/common.js