添加选择机构功能

skyouc

2024-12-23 3bc055f2ee9e813db0f08c5aefc4799be943f77f

添加选择机构功能

 App.vue

@@ -218,6 +218,10 @@
        height: 60upx;

        text-align: center;

        line-height: 60upx;

    }
	
    .uni-app--showtopwindow [data-page="pages/home/home"] uni-page-head {
        display: none;
    }

    

    .text-light {


 pages.json

@@ -1,4 +1,12 @@
{

{
    // "easycom": {
    //     "autoscan": true,
    //     "custom": {
    //         // uni-ui 规则如下配置
    //         "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    //     }
    // },	
	
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

        {

            "path": "pages/login/login",

@@ -9,7 +17,8 @@
        {

            "path": "pages/home/home",

            "style": {

                "navigationBarTitleText": "主 页"

                "navigationBarTitleText": "主 页",
                "navigationStyle": "custom"
            }

        },

        {


 pages/home/home.vue

@@ -1,6 +1,22 @@
<template>

    <view>

        <view class="box-bg">

            <uni-nav-bar shadow left-icon="bars" title="主页" @clickLeft="selectLoc()" />

        </view>

        <scroll-view scroll-y class="page">

            <view>

                <uni-drawer ref="showLeft" mode="left" :width="320">
                    <view>
                        <view>
                            <uni-section title="机构选择" type="line"></uni-section>
                        </view>
                        <uni-list v-for="(item, index) in hosts" :key="item.id">
                            <uni-list-item :title="item.name" clickable @click="itemClick(item)"></uni-list-item>
                        </uni-list>
                    </view>



                </uni-drawer>

            </view>

            <view class="nav-list">

                <navigator hover-class='none' :url="'/pages' + item.url" class="nav-li" navigateTo

                    :class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"

@@ -22,9 +38,9 @@
                baseUrl: '',

                token: '',

                icon: '',

                hosts: [],

                elements: [],

                elements2: [

                    {

                elements2: [{

                        title: '组托入库',

                        name: 'pakin',

                        color: 'cyan',

@@ -124,21 +140,73 @@
                    },



                ],

                colorList: ['cyan','blue','mauve','pink','brown','red','orange','yellow','olive','olive','green','grey' ]

                colorList: ['cyan', 'blue', 'mauve', 'pink', 'brown', 'red', 'orange', 'yellow', 'olive', 'olive', 'green',

                    'grey'

                ]

            };

        },



        onShow() {

            this.baseUrl = uni.getStorageSync('baseUrl');

            this.token = uni.getStorageSync('token');



            this.getCurrentHosts()

            this.getAuth()



        },

        methods: {





        methods: {
			
			
            selectLoc() {

                this.$refs['showLeft'].open()

            },



            closeDrawer() {

                this.$refs['showLeft'].close()



            },



            itemClick(event) {
                if (event != null && event.id != null) {
                    this.$refs['showLeft'].close()
                    uni.setStorageSync('hostId', event.id)
                }	
            },



            getCurrentHosts() {

                let that = this

                uni.request({

                    url: that.baseUrl + '/pda/current/host',

                    data: {},

                    header: {

                        'token': uni.getStorageSync('token')

                    },

                    method: "GET",

                    success(res) {

                        let result = res.data

                        if (result.code == 200) {

                            that.hosts = result.data;
                            if (uni.getStorageSync('hostId') == null || uni.getStorageSync('hostId') == '') {
                                that.$refs['showLeft'].open()
                            }

                        }

                    },

                    fail(res) {



                    }

                })

            },



            getAuth() {

                let that = this

                uni.request({

                    url: that.baseUrl + '/menu/pda/auth',

                    data: {},

                    header: { 'token': uni.getStorageSync('token') },

                    header: {

                        'token': uni.getStorageSync('token')

                    },

                    method: 'POST',

                    success(res) {

                        res = res.data

@@ -179,7 +247,7 @@
                                    url: '../login/login'

                                });

                            }, 1000);

                        } else if(res.status === 404) {

                        } else if (res.status === 404) {

                            that.elements = that.elements2

                            // uni.showToast({

                            //     title: '默认主页',

@@ -199,8 +267,9 @@
                    }

                })

            },



            getIcon(e) {

                const ways = ['pakin','orderPakin','orderPutOn']

                const ways = ['pakin', 'orderPakin', 'orderPutOn']

                if (ways.includes(e)) {

                    this.icon = 'pullup'

                }

@@ -209,7 +278,11 @@
    }

</script>



<style>

<style>
    .uni-section{
        margin-top: 0rpx;
    }
	
    .page {

        height: 100vh;

    }


 uni_modules/uni-section/changelog.md

 uni_modules/uni-section/components/uni-section/uni-section.vue

New file
@@ -0,0 +1,139 @@
<template>

    <view class="uni-section" nvue>

        <view v-if="type" class="uni-section__head">

            <view :class="type" class="uni-section__head-tag" />

        </view>

        <view class="uni-section__content">

            <text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text>

            <text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>

        </view>

        <slot />

    </view>

</template>



<script>

    /**
     * Section 标题栏
     * @description 标题栏
     * @property {String} type = [line|circle] 标题装饰类型
     *     @value line 竖线
     *     @value circle 圆形
     * @property {String} title 主标题
     * @property {String} subTitle 副标题
     */


    export default {

        name: 'UniSection',

        props: {

            type: {

                type: String,

                default: ''

            },

            title: {

                type: String,

                default: ''

            },

            subTitle: {

                type: String,

                default: ''

            }

        },

        data() {

            return {}

        },

        watch: {

            title(newVal) {

                if (uni.report && newVal !== '') {

                    uni.report('title', newVal)

                }

            }

        },

        methods: {

            onClick() {

                this.$emit('click')

            }

        }

    }

</script>

<style lang="scss" scoped>

    .uni-section {
        position: relative;

        /* #ifndef APP-NVUE */

        display: flex;

        /* #endif */

        margin-top: 10px;

        flex-direction: row;

        align-items: center;

        padding: 0 10px;

        height: 50px;

        background-color: $uni-bg-color-grey;
        /* #ifdef APP-NVUE */
        // border-bottom-color: $uni-border-color;
        // border-bottom-style: solid;
        // border-bottom-width: 0.5px;
        /* #endif */

        font-weight: normal;

    }
    /* #ifndef APP-NVUE */
    // .uni-section:after {
    //     position: absolute;
    //     bottom: 0;
    //     right: 0;
    //     left: 0;
    //     height: 1px;
    //     content: '';
    //     -webkit-transform: scaleY(.5);
    //     transform: scaleY(.5);
    //     background-color: $uni-border-color;
    // }
    /* #endif */



    .uni-section__head {

        flex-direction: row;

        justify-content: center;

        align-items: center;

        margin-right: 10px;

    }



    .line {

        height: 15px;

        background-color: $uni-text-color-disable;

        border-radius: 5px;

        width: 3px;

    }



    .circle {

        width: 8px;

        height: 8px;

        border-top-right-radius: 50px;

        border-top-left-radius: 50px;

        border-bottom-left-radius: 50px;

        border-bottom-right-radius: 50px;

        background-color: $uni-text-color-disable;

    }



    .uni-section__content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;

        flex: 1;

        color: $uni-text-color;

    }



    .uni-section__content-title {

        font-size: $uni-font-size-base;

        color: $uni-text-color;

    }



    .distraction {

        flex-direction: row;

        align-items: center;

    }



    .uni-section__content-sub {

        font-size: $uni-font-size-sm;

        color: $uni-text-color-grey;

    }

</style>

 uni_modules/uni-section/package.json

New file
@@ -0,0 +1,79 @@
{
  "id": "uni-section",
  "displayName": "Section 标题栏",
  "version": "0.0.1",
  "description": "",
  "keywords": [
    ""
  ],
  "repository": "https://github.com/dcloudio/uni-ui",
  "engines": {
    "HBuilderX": ""
  },
  "directories": {
    "example": "../../temps/example_temps"
  },
  "dcloudext": {
    "category": [
      "前端组件",
      "通用组件"
    ],
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "无",
      "data": "无",
      "permissions": "无"
    },
    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
  },
  "uni_modules": {
    "dependencies": [],
    "encrypt": [],
    "platforms": {
      "cloud": {
        "tcb": "u",
        "aliyun": "u"
      },
      "client": {
        "App": {
          "app-vue": "u",
          "app-nvue": "u"
        },
        "H5-mobile": {
          "Safari": "u",
          "Android Browser": "u",
          "微信浏览器(Android)": "u",
          "QQ浏览器(Android)": "u"
        },
        "H5-pc": {
          "Chrome": "u",
          "IE": "u",
          "Edge": "u",
          "Firefox": "u",
          "Safari": "u"
        },
        "小程序": {
          "微信": "u",
          "阿里": "u",
          "百度": "u",
          "字节跳动": "u",
          "QQ": "u"
        },
        "快应用": {
          "华为": "u",
          "联盟": "u"
        }
      }
    }
  }
}

 uni_modules/uni-section/readme.md

New file
@@ -0,0 +1,33 @@


## Section 标题栏
> 代码块： `uSection`


标题栏，用于显示标题。

### 安装方式

本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。

如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)

### 基本用法

在 ``template`` 中使用组件

```html
<uni-section title="只有主标题"></uni-section>
<uni-section title="竖线装饰" sub-title="副标题" type="line"></uni-section>
<uni-section title="圆形装饰" sub-title="副标题" type="circle"></uni-section>
```

## API

### Section Props

|属性名        |类型    |默认值    |说明                                                |
|:-:        |:-:    |:-:    |:-:                                                |
|type        |String    |-        |标题装饰类型 ，可选值：line（竖线）、circle（圆形）|
|title        |String    |-        |主标题                                                |
|sub-title    |String    |-        |副标题                                                |