#

whycq

2023-10-16 20d63bf572e4d8e2ee94fb038a658a63c609e7ae

#

 pages/LoginDemo/LoginDemo.vue

@@ -61,6 +61,7 @@

<script>
    // import { data } from 'jquery'
    import { mapState } from 'vuex'//引入mapState
    import md5 from '../../static/js/md5.js'
    export default {
        data() {
@@ -77,6 +78,9 @@
                },
            }
        },
        computed: mapState({
            project: state => state.project
        }) ,
        mounted() {
            uni.getSystemInfo({
                success(res) {
@@ -114,8 +118,9 @@
                        title: '请配置网络信息'
                    })
                }
                path = network[0].address
                path = path.substring(0, path.length - 3);
                // path = network[0].address
                // path = path.substring(0, path.length - 3);
                path = _this.project.name
                let baseUrl = `http://${network[0].ip}:${network[0].port}/${network[0].address}`
                uni.request({
                    url: `${baseUrl}/login.action`,
@@ -136,7 +141,7 @@
                                })
                                setTimeout(() => {
                                    uni.reLaunch({
                                        url: `/pages/project/${path}/home/home`,
                                        url: `/pages/home/home`,
                                    });
                                }, 300)
                            }, 700)

 pages/home/home - ¸±±¾.vue

New file
@@ -0,0 +1,98 @@
<template>
    <view>
        <text>{{username}}</text>
        <text>{{age}}</text>
        <view class="z-swiper">
            <view>
                ä»Šæ—¥å…¥åº“  100
            </view>
            <view>
                ä»Šæ—¥å‡ºåº“  100
            </view>
            <view>
                å…¥åº“单品
            </view>
            <view>
                Top 1. å†»çŒªç¢Žè‚‰
                Top 2. å†»çŒªæŽ’
            </view>
        </view>
        <view class="home-list" v-for="(item,i) in homeList" :key="i">
            <view class="list-title flex-align-center">
                <view class="list-title-tag "></view>
                <view>{{item.name}}</view>
            </view>
            <view class="list-detl">
                <view v-for="nav in item.nav">
                    <view style="margin: 10px;">
                        {{nav.name}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'//引入mapState
    export default {
        data() {
            return {}
        },
        onShow() {
            console.log(this.project);
        },
        computed: mapState({
            // ä»Žstate中拿到数据 ç®­å¤´å‡½æ•°å¯ä½¿ä»£ç æ›´ç®€ç»ƒ
            username: state => state.username,
            age: state => state.age,
            homeList: state => state.homeList,
            project: state => state.project
        }) 
    }
</script>

<style>
    .flex-justify-center {
        display: flex;
        justify-content: center;
    }
    .flex-align-center {
        display: flex;
        align-items: center;
		
    }
    .z-swiper {
        height: 90px;
        margin: 8px;
        border-radius: 8px;
        background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
        color: #fff;
    }
    .home-list {
        display: flex;
        flex-direction: column;
        height: 90px;
        margin: 8px;
        border-radius: 8px;
        background-color: #f5f5f5;
    }
    .list-title {
        display: flex;
        height: 20px;
        margin: 10px 10px;
        /* background-color: #fff; */
    }
    .list-title-tag {
        width: 6px;
        height: 20px;
        margin: 5px 5px;
        border-radius: 8px;
        background-color: #00aeec;
		
    }
    .list-detl {
        display: flex;
        flex-direction: row;
    }
</style>

 pages/home/home.vue

@@ -1,35 +1,20 @@
<template>
    <view>
        <text>{{username}}</text>
        <text>{{age}}</text>
        <view class="z-swiper">
            <view>
                ä»Šæ—¥å…¥åº“  100
        <scroll-view scroll-y class="page">
            <view class="nav-list">
                <navigator hover-class='none' class="nav-li" navigateTo
                :url="'/pages' + item.url" 
                :class="'bg-'+item.color" 
                :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1',width: item.width}]"
                v-for="(item,index) in menu" 
                :key="index">
                    <view class="nav-title">{{item.title}}</view>
                    <view class="nav-name">{{item.name}}</view>
                    <text :class="'cuIcon-' + item.cuIcon"></text>
                </navigator>
            </view>
            <view>
                ä»Šæ—¥å‡ºåº“  100
            </view>
            <view>
                å…¥åº“单品
            </view>
            <view>
                Top 1. å†»çŒªç¢Žè‚‰
                Top 2. å†»çŒªæŽ’
            </view>
        </view>
        <view class="home-list" v-for="(item,i) in homeList" :key="i">
            <view class="list-title flex-align-center">
                <view class="list-title-tag "></view>
                <view>{{item.name}}</view>
            </view>
            <view class="list-detl">
                <view v-for="nav in item.nav">
                    <view style="margin: 10px;">
                        {{nav.name}}
                    </view>
                </view>
            </view>
        </view>
            <view class="cu-tabbar-height"></view>
        </scroll-view>
    </view>
</template>

@@ -40,59 +25,217 @@
            return {}
        },
        onShow() {
            console.log(this.project);
            console.log(this.menu);
        },
        computed: mapState({
            // ä»Žstate中拿到数据 ç®­å¤´å‡½æ•°å¯ä½¿ä»£ç æ›´ç®€ç»ƒ
            username: state => state.username,
            age: state => state.age,
            homeList: state => state.homeList,
            project: state => state.project
            menu: state => state.project.menu
        }) 
    }
</script>

<style>
    .flex-justify-center {
    @import url("../../static/css/colorUi/icon.css");
    .nav-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0px 20rpx 0px;
        justify-content: space-between;
    }
    .flex-align-center {
        display: flex;
        align-items: center;
		

    .nav-li {
        padding: 30upx;
        border-radius: 12upx;
        width: 37%;
        margin: 0 2% 40upx;
        /* background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); */
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1;
    }
    .z-swiper {
        height: 90px;
        margin: 8px;
        border-radius: 8px;
        background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);

    .nav-li::after {
        content: "";
        position: absolute;
        z-index: -1;
        background-color: inherit;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: -10%;
        border-radius: 10upx;
        opacity: 0.2;
        transform: scale(0.9, 0.9);
    }

    .nav-li.cur {
        color: #fff;
        background: rgb(94, 185, 94);
        box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
    }
    .home-list {
        display: flex;
        flex-direction: column;
        height: 90px;
        margin: 8px;
        border-radius: 8px;
        background-color: #f5f5f5;

    .nav-title {
        font-size: 32upx;
        font-weight: 300;
    }
    .list-title {
        display: flex;
        height: 20px;
        margin: 10px 10px;
        /* background-color: #fff; */

    .nav-title::first-letter {
        font-size: 40upx;
        margin-right: 4upx;
    }
    .list-title-tag {
        width: 6px;
        height: 20px;
        margin: 5px 5px;
        border-radius: 8px;
        background-color: #00aeec;
		

    .nav-name {
        font-size: 28upx;
        text-transform: Capitalize;
        margin-top: 20upx;
        position: relative;
    }
    .list-detl {
        display: flex;
        flex-direction: row;

    .nav-name::before {
        content: "";
        position: absolute;
        display: block;
        width: 40upx;
        height: 6upx;
        background: #fff;
        bottom: 0;
        right: 0;
        opacity: 0.5;
    }

    .nav-name::after {
        content: "";
        position: absolute;
        display: block;
        width: 100upx;
        height: 1px;
        background: #fff;
        bottom: 0;
        right: 40upx;
        opacity: 0.3;
    }

    .nav-name::first-letter {
        font-weight: bold;
        font-size: 36upx;
        margin-right: 1px;
    }

    .nav-li text {
        position: absolute;
        right: 30upx;
        top: 30upx;
        font-size: 52upx;
        width: 60upx;
        height: 60upx;
        text-align: center;
        line-height: 60upx;
    }

    .text-light {
        font-weight: 300;
    }

    @keyframes show {
        0% {
            transform: translateY(-50px);
        }

        60% {
            transform: translateY(40upx);
        }

        100% {
            transform: translateY(0px);
        }
    }

    @-webkit-keyframes show {
        0% {
            transform: translateY(-50px);
        }

        60% {
            transform: translateY(40upx);
        }

        100% {
            transform: translateY(0px);
        }
    }
	
    .bg-red {
        background-color: #e54d42;
        color: #ffffff;
    }
	
    .bg-orange {
        background-color: #f37b1d;
        color: #ffffff;
    }
	
    .bg-yellow {
        background-color: #fbbd08;
        color: #333333;
    }
	
    .bg-olive {
        background-color: #8dc63f;
        color: #ffffff;
    }
	
    .bg-green {
        background-color: #39b54a;
        color: #ffffff;
    }
	
    .bg-cyan {
        background-color: #1cbbb4;
        color: #ffffff;
    }
	
    .bg-blue {
        background-color: #0081ff;
        color: #ffffff;
    }
	
    .bg-purple {
        background-color: #6739b6;
        color: #ffffff;
    }
	
    .bg-mauve {
        background-color: #9c26b0;
        color: #ffffff;
    }
	
    .bg-pink {
        background-color: #e03997;
        color: #ffffff;
    }
	
    .bg-brown {
        background-color: #a5673f;
        color: #ffffff;
    }
	
    .bg-grey {
        background-color: #8799a3;
        color: #ffffff;
    }
	
    .bg-gray {
        background-color: #f0f0f0;
        color: #333333;
    }
	
    .bg-black {
        background-color: #333333;
        color: #ffffff;
    }
	
    .bg-white {
        background-color: #ffffff;
        color: #666666;
    }
</style>

 pages/project/project.json

@@ -1,9 +1,31 @@
{
    "phps": {
        "name":"平湖品上新发现",
        "menu": [
            {"name": "组托入库"},
            {"name": "订单组托"}
        ]
    "title":"平湖品上新发现",
    "name": "ps",
    "menu": [
        {
            "title": "组托入库",
            "name": "pakin",
            "url": "/pakin/pakin",
            "color": "cyan",
            "cuIcon": "pullup",
            "width": "90%",
            "sort": 1
        },
        {
            "title": "订单组托",
            "name": "orderPakin",
            "url": "/pakin/pakin",
            "color": "green",
            "cuIcon": "order",
            "sort": 2
        },
        {
            "title": "订单组托",
            "name": "orderPakin",
            "url": "/pakin/pakin",
            "color": "green",
            "cuIcon": "order",
            "sort": 2
        }
    ]
}