首页增加历史提煤单

qingyiay

2023-03-23 accaf01dabdf317e67b7f24c13c81c1023d51cd4

首页增加历史提煤单

 api/globalApi.js

@@ -36,7 +36,7 @@
    //     method: "POST"
    // },
    /**
     * @转发修改
     * @description 转发修改
     */
    forward: {
        url: "/wrzs/userOperation/forwardList",
@@ -56,6 +56,13 @@
        url: "/wrzs/userOperation/deleteForward",
        method: "POST"
    },
    /**
     * @description 获取历史提煤单
     */
    getJhOrderPlanDataPage: {
        url: '/wrzs/userOperation/getJhOrderPlanDataPage',
        method: "GET"
    },
    // 货代首页列表
    // huoDaiList: {
    //     url: "/wrzs/wx/huoDaiList",

 api/publicInterface.js

@@ -4,7 +4,7 @@
// const BaseUrl = "http://192.168.3.159:9999/";
import {BaseUrl as wrBaseUrl} from '@/api/request.js'
// const BaseUrl = "http://192.168.0.120:9999"
const BaseUrl = "http://192.168.3.109:9999"
const BaseUrl = "http://192.168.110.101:9999"

// 登录
// function apiLogin({

 api/request.js

@@ -80,8 +80,8 @@

// const BaseUrl = "http://192.168.0.120:9997"
// const webSocketUrl = "ws://192.168.0.120:9997/wrzs/ws/info"
const BaseUrl = "http://192.168.3.109:9997";
const webSocketUrl = "ws://192.168.3.109:9997/wrzs/ws/info"
const BaseUrl = "http://192.168.110.101:9997";
const webSocketUrl = "ws://192.168.110.101:9997/wrzs/ws/info"

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

 manifest.json

@@ -1,75 +1,75 @@
{
    "name" : "unattended-app",
    "appid" : "__UNI__103882A",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    /* 5+App特有相关 */
    "app-plus" : {
        "usingComponents" : true,
        "nvueStyleCompiler" : "uni-app",
        "compilerVersion" : 3,
        "splashscreen" : {
            "alwaysShowBeforeRender" : true,
            "waiting" : true,
            "autoclose" : true,
            "delay" : 0
        },
        /* 模块配置 */
        "modules" : {},
        /* 应用发布信息 */
        "distribute" : {
            /* android打包配置 */
            "android" : {
                "permissions" : [
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            /* ios打包配置 */
            "ios" : {},
            /* SDK配置 */
            "sdkConfigs" : {}
        }
    },
    /* 快应用特有相关 */
    "quickapp" : {},
    /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wx4a62fc1684c429a9",
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "minified" : true,
            "postcss" : false
        },
        "usingComponents" : true
    },
    "mp-alipay" : {
        "usingComponents" : true
    },
    "mp-baidu" : {
        "usingComponents" : true
    },
    "mp-toutiao" : {
        "usingComponents" : true
    },
    "uniStatistics" : {
        "enable" : false
    },
    "vueVersion" : "2"
    "name": "unattended-app",
    "appid": "__UNI__103882A",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": "100",
    "transformPx": false,
    /* 5+App特有相关 */
    "app-plus": {
        "usingComponents": true,
        "nvueStyleCompiler": "uni-app",
        "compilerVersion": 3,
        "splashscreen": {
            "alwaysShowBeforeRender": true,
            "waiting": true,
            "autoclose": true,
            "delay": 0
        },
        /* 模块配置 */
        "modules": {},
        /* 应用发布信息 */
        "distribute": {
            /* android打包配置 */
            "android": {
                "permissions": [
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            /* ios打包配置 */
            "ios": {},
            /* SDK配置 */
            "sdkConfigs": {}
        }
    },
    /* 快应用特有相关 */
    "quickapp": {},
    /* 小程序特有相关 */
    "mp-weixin": {
        "appid": "wx2463f9b1ba3b9651",
        "setting": {
            "urlCheck": false,
            "es6": true,
            "minified": true,
            "postcss": false
        },
        "usingComponents": true
    },
    "mp-alipay": {
        "usingComponents": true
    },
    "mp-baidu": {
        "usingComponents": true
    },
    "mp-toutiao": {
        "usingComponents": true
    },
    "uniStatistics": {
        "enable": false
    },
    "vueVersion": "2"
}

 pages/customer-page/customer-index/customer-index.vue

@@ -46,7 +46,32 @@
                </template>
            </card>
        </view>

        <view class="history-numbers">
            <combined-title title="历史提煤单"></combined-title>
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
                <uni-table border stripe emptyText="暂无更多数据" :loading="loading">
                    <uni-tr>
                        <uni-th width="100" align="center">发运日期</uni-th>
                        <uni-th width="100" align="center">所属单位</uni-th>
                        <uni-th align="center" width="150">煤场名称</uni-th>
                        <uni-th align="center" width="100">煤种名称</uni-th>
                        <uni-th align="center" width="150">订单编号</uni-th>
                        <uni-th align="center" width="100">订单剩余量</uni-th>
                        <uni-th align="center" width="80">提煤单个数</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item, index) in historyCoalData" :key="index">
                        <uni-td align="center">{{ item.sendDate }}</uni-td>
                        <uni-td align="left">{{ item.deptName }}</uni-td>
                        <uni-td align="center">{{ item.filedName }}</uni-td>
                        <uni-td align="center">{{ item.coalName }}</uni-td>
                        <uni-td align="center">{{ item.orderCode }}</uni-td>
                        <uni-td align="center">{{ item.carNumSurplus }}</uni-td>
                        <uni-td align="center">{{ item.tmCount }}</uni-td>
                    </uni-tr>
                </uni-table>
            </scroll-view>
            <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change2" /></view>
        </view>
        <!-- 领取弹出框 -->
        <u-popup :show="show" @close="close" @open="open" mode="center" round="10">
            <view class="receiverPopup">
@@ -60,10 +85,12 @@

<script>
import card from '@/components/card/card.vue';
import combinedTitle from '@/components/combined-title/combined-title.vue';
import { customerId } from '@/utils/status';
export default {
    components: {
        card
        card,
        combinedTitle
    },
    data() {
        return {
@@ -73,15 +100,27 @@
            getOrderNum: {
                num: '',
                id: null
            }
            },
            historyCoalData: [],
            // 表格加载状态
            loading: false,
            scrollTop: 0,
            // 每页数据量
            pageSize: 5,
            // 当前页
            pageCurrent: 1,
            // 数据总量
            total: 0
        };
    },
    onLoad() {},
    onShow() {
        this.init();
    },
    methods: {
        init() {
            this.GetOrderPlan();
            this.getJhOrderPlanDataPage();
        },
        // 获取发运计划列表
        GetOrderPlan() {
@@ -92,6 +131,20 @@
                this.orderPlanData = res.data;
                uni.hideLoading();
            });
        },
        // 获取历史提煤单
        getJhOrderPlanDataPage() {
            this.loading = true;
            this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
                this.historyCoalData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        change2(e) {
            console.log(e, '页码改变');
            this.pageCurrent = e.current;
            this.getJhOrderPlanDataPage();
        },
        popupDetermineClick() {
            if (this.receiveNum) {
@@ -161,6 +214,12 @@
</script>

<style lang="scss" scoped>
.uni-pagination-box {
    height: 60rpx;
}
.scroll-Y {
    height: 600rpx;
}
::v-deep.customer-index {
    width: 94%;
    margin: 0 auto;

 pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue

@@ -14,17 +14,17 @@
                    <view class="right-top">
                        <view class="card-right-top-row">
                            <view>
                                <text>转发剩余：{{ item.carNumSurplusHuodai||'' }}</text>
                                <text>转发剩余：{{ item.carNumSurplusHuodai || '' }}</text>
                            </view>
                            <view>
                                <text>{{ item.coalName||'' }}</text>
                                <text>{{ item.coalName || '' }}</text>
                            </view>
                        </view>
                    </view>
                </template>
                <template v-slot:right-bottom>
                    <view class="code">
                        <text>编号：{{ item.orderCode||'' }}</text>
                        <text>编号：{{ item.orderCode || '' }}</text>
                    </view>
                </template>
            </card>
@@ -64,7 +64,7 @@
        // 转发
        forwardClick(value) {
            uni.navigateTo({
                url: `/pages/public-page/forward/forward?orderPlanId=${value.id}&carNumSurplusHuodai=${value.carNumSurplusHuodai}`
                url: `/pages/public-page/forward/forward?orderPlanId=${value.orderPlanId}&carNumSurplusHuodai=${value.carNumSurplusHuodai}`
            });
        }
    }
@@ -81,7 +81,7 @@

        // 卡片样式
        .card-left__top {
            margin-top:vww(26);
            margin-top: vww(26);
            text-align: center;
            color: #ffffff;
            text {

 pages/login/userPassword.vue

@@ -44,7 +44,7 @@
    data() {
        return {
            // username: '12222222222', // 客户
            username: '13333333332', // 司机
            username: '13333333332',// 司机
            password: '123456',
            remember: true,
            baseUrl: ''

 uni_modules/uni-pagination/changelog.md

New file
@@ -0,0 +1,27 @@
## 1.2.4（2022-09-19）
- 修复，未对主题色设置默认色，导致未引入 uni-scss 变量文件报错。
- 修复，未对移动端当前页文字做主题色适配。
## 1.2.3（2022-09-15）
- 修复未使用 uni-scss 主题色的 bug。
## 1.2.2（2022-07-06）
- 修复 es 语言 i18n 错误
## 1.2.1（2021-11-22）
- 修复 vue3中某些scss变量无法找到的问题
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-pagination](https://uniapp.dcloud.io/component/uniui/uni-pagination)
## 1.1.2（2021-10-08）
- 修复 current 、value 属性未监听，导致高亮样式失效的 bug
## 1.1.1（2021-08-20）
- 新增 支持国际化
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12）
- 新增 组件示例地址
## 1.0.6（2021-04-12）
- 新增 PC 和 移动端适配不同的 ui 
## 1.0.5（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件

## 1.0.4（2021-02-05）
- 调整为uni_modules目录规范

 uni_modules/uni-pagination/components/uni-pagination/i18n/en.json

New file
@@ -0,0 +1,5 @@
{
    "uni-pagination.prevText": "prev",
    "uni-pagination.nextText": "next",
    "uni-pagination.piecePerPage": "piece/page"
}

 uni_modules/uni-pagination/components/uni-pagination/i18n/es.json

New file
@@ -0,0 +1,5 @@
{
    "uni-pagination.prevText": "anterior",
    "uni-pagination.nextText": "prxima",
    "uni-pagination.piecePerPage": "Artículo/Página"
}

 uni_modules/uni-pagination/components/uni-pagination/i18n/fr.json

New file
@@ -0,0 +1,5 @@
{
    "uni-pagination.prevText": "précédente",
    "uni-pagination.nextText": "suivante",
    "uni-pagination.piecePerPage": "Articles/Pages"
}

 uni_modules/uni-pagination/components/uni-pagination/i18n/index.js

New file
@@ -0,0 +1,12 @@
import en from './en.json'
import es from './es.json'
import fr from './fr.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
    en,
    es,
    fr,
    'zh-Hans': zhHans,
    'zh-Hant': zhHant
}

 uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hans.json

New file
@@ -0,0 +1,5 @@
{
    "uni-pagination.prevText": "上一页",
    "uni-pagination.nextText": "下一页",
    "uni-pagination.piecePerPage": "条/页"
}

 uni_modules/uni-pagination/components/uni-pagination/i18n/zh-Hant.json

New file
@@ -0,0 +1,5 @@
{
    "uni-pagination.prevText": "上一頁",
    "uni-pagination.nextText": "下一頁",
    "uni-pagination.piecePerPage": "條/頁"
}

 uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue

New file
@@ -0,0 +1,465 @@
<template>
    <view class="uni-pagination">
        <!-- #ifndef MP -->
        <picker v-if="showPageSize === true || showPageSize === 'true'" class="select-picker" mode="selector"
            :value="pageSizeIndex" :range="pageSizeRange" @change="pickerChange" @cancel="pickerClick"
            @click.native="pickerClick">
            <button type="default" size="mini" :plain="true">
                <text>{{pageSizeRange[pageSizeIndex]}} {{piecePerPage}}</text>
                <uni-icons class="select-picker-icon" type="arrowdown" size="12" color="#999"></uni-icons>
            </button>
        </picker>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
        <view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view>
        <!-- #endif -->
        <view class="uni-pagination__btn"
            :class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
            :hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'" :hover-start-time="20"
            :hover-stay-time="70" @click="clickLeft">
            <template v-if="showIcon === true || showIcon === 'true'">
                <uni-icons color="#666" size="16" type="left" />
            </template>
            <template v-else>
                <text class="uni-pagination__child-btn">{{ prevPageText }}</text>
            </template>
        </view>
        <view class="uni-pagination__num uni-pagination__num-flex-none">
            <view class="uni-pagination__num-current">
                <text class="uni-pagination__num-current-text is-pc-hide current-index-text">{{ currentIndex }}</text>
                <text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
                <!-- #ifndef APP-NVUE -->
                <view v-for="(item, index) in paper" :key="index" :class="{ 'page--active': item === currentIndex }"
                    class="uni-pagination__num-tag tag--active is-phone-hide" @click.top="selectPage(item, index)">
                    <text>{{ item }}</text>
                </view>
                <!-- #endif -->

            </view>
        </view>
        <view class="uni-pagination__btn"
            :class="currentIndex >= maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
            :hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'" :hover-start-time="20"
            :hover-stay-time="70" @click="clickRight">
            <template v-if="showIcon === true || showIcon === 'true'">
                <uni-icons color="#666" size="16" type="right" />
            </template>
            <template v-else>
                <text class="uni-pagination__child-btn">{{ nextPageText }}</text>
            </template>
        </view>
    </view>
</template>

<script>
    /**
     * Pagination 分页器
     * @description 分页器组件，用于展示页码、请求数据等
     * @tutorial https://ext.dcloud.net.cn/plugin?id=32
     * @property {String} prevText 左侧按钮文字
     * @property {String} nextText 右侧按钮文字
     * @property {String} piecePerPageText 条/页文字
     * @property {Number} current 当前页
     * @property {Number} total 数据总量
     * @property {Number} pageSize 每页数据量
     * @property {Boolean} showIcon = [true|false] 是否以 icon 形式展示按钮
     * @property {Boolean} showPageSize = [true|false] 是否展示每页条数
     * @property {Array} pageSizeRange = [20, 50, 100, 500] 每页条数选框
     * @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
     * * @event {Function} pageSizeChange 当前每页条数改变时触发 ,e={pageSize} pageSize 为当前所选的每页条数
     */

    import {
        initVueI18n
    } from '@dcloudio/uni-i18n'
    import messages from './i18n/index.js'
    const {
        t
    } = initVueI18n(messages)
    export default {
        name: 'UniPagination',
        emits: ['update:modelValue', 'input', 'change', 'pageSizeChange'],
        props: {
            value: {
                type: [Number, String],
                default: 1
            },
            modelValue: {
                type: [Number, String],
                default: 1
            },
            prevText: {
                type: String,
            },
            nextText: {
                type: String,
            },
            piecePerPageText: {
                type: String
            },
            current: {
                type: [Number, String],
                default: 1
            },
            total: {
                // 数据总量
                type: [Number, String],
                default: 0
            },
            pageSize: {
                // 每页数据量
                type: [Number, String],
                default: 10
            },
            showIcon: {
                // 是否以 icon 形式展示按钮
                type: [Boolean, String],
                default: false
            },
            showPageSize: {
                // 是否以 icon 形式展示按钮
                type: [Boolean, String],
                default: false
            },
            pagerCount: {
                type: Number,
                default: 7
            },
            pageSizeRange: {
                type: Array,
                default: () => [20, 50, 100, 500]
            }
        },
        data() {
            return {
                pageSizeIndex: 0,
                currentIndex: 1,
                paperData: [],
                pickerShow: false
            }
        },
        computed: {
            piecePerPage() {
                return this.piecePerPageText || t('uni-pagination.piecePerPage')
            },
            prevPageText() {
                return this.prevText || t('uni-pagination.prevText')
            },
            nextPageText() {
                return this.nextText || t('uni-pagination.nextText')
            },
            maxPage() {
                let maxPage = 1
                let total = Number(this.total)
                let pageSize = Number(this.pageSize)
                if (total && pageSize) {
                    maxPage = Math.ceil(total / pageSize)
                }
                return maxPage
            },
            paper() {
                const num = this.currentIndex
                // TODO 最大页数
                const pagerCount = this.pagerCount
                // const total = 181
                const total = this.total
                const pageSize = this.pageSize
                let totalArr = []
                let showPagerArr = []
                let pagerNum = Math.ceil(total / pageSize)
                for (let i = 0; i < pagerNum; i++) {
                    totalArr.push(i + 1)
                }
                showPagerArr.push(1)
                const totalNum = totalArr[totalArr.length - (pagerCount + 1) / 2]
                totalArr.forEach((item, index) => {
                    if ((pagerCount + 1) / 2 >= num) {
                        if (item < pagerCount + 1 && item > 1) {
                            showPagerArr.push(item)
                        }
                    } else if (num + 2 <= totalNum) {
                        if (item > num - (pagerCount + 1) / 2 && item < num + (pagerCount + 1) / 2) {
                            showPagerArr.push(item)
                        }
                    } else {
                        if ((item > num - (pagerCount + 1) / 2 || pagerNum - pagerCount < item) && item < totalArr[
                                totalArr.length - 1]) {
                            showPagerArr.push(item)
                        }
                    }
                })
                if (pagerNum > pagerCount) {
                    if ((pagerCount + 1) / 2 >= num) {
                        showPagerArr[showPagerArr.length - 1] = '...'
                    } else if (num + 2 <= totalNum) {
                        showPagerArr[1] = '...'
                        showPagerArr[showPagerArr.length - 1] = '...'
                    } else {
                        showPagerArr[1] = '...'
                    }
                    showPagerArr.push(totalArr[totalArr.length - 1])
                } else {
                    if ((pagerCount + 1) / 2 >= num) {} else if (num + 2 <= totalNum) {} else {
                        showPagerArr.shift()
                        showPagerArr.push(totalArr[totalArr.length - 1])
                    }
                }

                return showPagerArr
            }
        },
        watch: {
            current: {
                immediate: true,
                handler(val, old) {
                    if (val < 1) {
                        this.currentIndex = 1
                    } else {
                        this.currentIndex = val
                    }
                }
            },
            value: {
                immediate: true,
                handler(val) {
                    if (Number(this.current) !== 1) return
                    if (val < 1) {
                        this.currentIndex = 1
                    } else {
                        this.currentIndex = val
                    }
                }
            },
            pageSizeIndex(val) {
                this.$emit('pageSizeChange', this.pageSizeRange[val])
            }
        },
        methods: {
            pickerChange(e) {
                this.pageSizeIndex = e.detail.value
                this.pickerClick()
            },
            pickerClick() {
                // #ifdef H5
                const body = document.querySelector('body')
                if (!body) return

                const className = 'uni-pagination-picker-show'
                this.pickerShow = !this.pickerShow

                if (this.pickerShow) {
                    body.classList.add(className)
                } else {
                    setTimeout(() => body.classList.remove(className), 300)
                }
                // #endif
            },
            // 选择标签
            selectPage(e, index) {
                if (parseInt(e)) {
                    this.currentIndex = e
                    this.change('current')
                } else {
                    let pagerNum = Math.ceil(this.total / this.pageSize)
                    // let pagerNum = Math.ceil(181 / this.pageSize)
                    // 上一页
                    if (index <= 1) {
                        if (this.currentIndex - 5 > 1) {
                            this.currentIndex -= 5
                        } else {
                            this.currentIndex = 1
                        }
                        return
                    }
                    // 下一页
                    if (index >= 6) {
                        if (this.currentIndex + 5 > pagerNum) {
                            this.currentIndex = pagerNum
                        } else {
                            this.currentIndex += 5
                        }
                        return
                    }
                }
            },
            clickLeft() {
                if (Number(this.currentIndex) === 1) {
                    return
                }
                this.currentIndex -= 1
                this.change('prev')
            },
            clickRight() {
                if (Number(this.currentIndex) >= this.maxPage) {
                    return
                }
                this.currentIndex += 1
                this.change('next')
            },
            change(e) {
                this.$emit('input', this.currentIndex)
                this.$emit('update:modelValue', this.currentIndex)
                this.$emit('change', {
                    type: e,
                    current: this.currentIndex
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    $uni-primary: #2979ff !default;
    .uni-pagination {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        position: relative;
        overflow: hidden;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .uni-pagination__total {
        font-size: 14px;
        color: #999;
        margin-right: 15px;
    }

    .uni-pagination__btn {
        /* #ifndef APP-NVUE */
        display: flex;
        cursor: pointer;
        /* #endif */
        padding: 0 8px;
        line-height: 30px;
        font-size: 12px;
        position: relative;
        background-color: #F0F0F0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 5px;
        // border-width: 1px;
        // border-style: solid;
        // border-color: $uni-border-color;
    }

    .uni-pagination__child-btn {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        font-size: 12px;
        position: relative;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #666;
        font-size: 12px;
    }

    .uni-pagination__num {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #666;
        margin: 0 5px;
    }

    .uni-pagination__num-tag {
        /* #ifdef H5 */
        cursor: pointer;
        min-width: 30px;
        /* #endif */
        margin: 0 5px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        // border: 1px red solid;
        color: #999;
        border-radius: 4px;
        // border-width: 1px;
        // border-style: solid;
        // border-color: $uni-border-color;
    }

    .uni-pagination__num-current {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }

    .uni-pagination__num-current-text {
        font-size: 15px;
    }

    .current-index-text{
        color: $uni-primary;
    }

    .uni-pagination--enabled {
        color: #333333;
        opacity: 1;
    }

    .uni-pagination--disabled {
        opacity: 0.5;
        /* #ifdef H5 */
        cursor: default;
        /* #endif */
    }

    .uni-pagination--hover {
        color: rgba(0, 0, 0, 0.6);
        background-color: #eee;
    }

    .tag--active:hover {
        color: $uni-primary;
    }

    .page--active {
        color: #fff;
        background-color: $uni-primary;
    }

    .page--active:hover {
        color: #fff;
    }

    /* #ifndef APP-NVUE */
    .is-pc-hide {
        display: block;
    }

    .is-phone-hide {
        display: none;
    }

    @media screen and (min-width: 450px) {
        .is-pc-hide {
            display: none;
        }

        .is-phone-hide {
            display: block;
        }

        .uni-pagination__num-flex-none {
            flex: none;
        }
    }

    /* #endif */
</style>

 uni_modules/uni-pagination/package.json

New file
@@ -0,0 +1,83 @@
{
  "id": "uni-pagination",
  "displayName": "uni-pagination 分页器",
  "version": "1.2.4",
  "description": "Pagination 分页器组件，用于展示页码、请求数据等。",
  "keywords": [
    "uni-ui",
    "uniui",
    "分页器",
    "页码"
],
  "repository": "https://github.com/dcloudio/uni-ui",
  "engines": {
    "HBuilderX": ""
  },
  "directories": {
    "example": "../../temps/example_temps"
  },
"dcloudext": {
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "无",
      "data": "无",
      "permissions": "无"
    },
    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
    "type": "component-vue"
  },
  "uni_modules": {
    "dependencies": ["uni-scss","uni-icons"],
    "encrypt": [],
    "platforms": {
      "cloud": {
        "tcb": "y",
        "aliyun": "y"
      },
      "client": {
        "App": {
          "app-vue": "y",
          "app-nvue": "y"
        },
        "H5-mobile": {
          "Safari": "y",
          "Android Browser": "y",
          "微信浏览器(Android)": "y",
          "QQ浏览器(Android)": "y"
        },
        "H5-pc": {
          "Chrome": "y",
          "IE": "y",
          "Edge": "y",
          "Firefox": "y",
          "Safari": "y"
        },
        "小程序": {
          "微信": "y",
          "阿里": "y",
          "百度": "y",
          "字节跳动": "y",
          "QQ": "y"
        },
        "快应用": {
          "华为": "u",
          "联盟": "u"
        },
        "Vue": {
            "vue2": "y",
            "vue3": "y"
        }
      }
    }
  }
}

 uni_modules/uni-pagination/readme.md

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


## Pagination 分页器
> **组件名：uni-pagination**
> 代码块： `uPagination`


分页器组件，用于展示页码、请求数据等。

### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-pagination)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839