yovinchen/sl-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
shuhongfan
2023-09-04 16:40:17 +08:00
commit cf5ac25c14
8267 changed files with 1305066 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
project-wl-siji-uniapp-vue3/.hbuilderx/launch.json Normal file
View File

@@ -0,0 +1,20 @@
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"app-plus" :
{
"launchtype" : "local"
},
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}

32
project-wl-siji-uniapp-vue3/App.vue Normal file
View File

@@ -0,0 +1,32 @@
<script>
export default {
onLaunch: function() {
console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import '@/uni_modules/uni-scss/index.scss';
/* #ifndef APP-NVUE */
@import '@/styles/common.scss';
// 设置整个项目的背景色
page {
background-color: #f5f5f5;
}
/* #endif */
.example-info {
font-size: 14px;
color: #333;
padding: 10px;
}
</style>

60
project-wl-siji-uniapp-vue3/README.md Normal file
View File

@@ -0,0 +1,60 @@
<p align="center">
<img width="200" src="./README/img/logo.png" alt="Vue logo">
</p>
<p align="center">
<a href="./README/ADMIN.md">管理后台</a> | <a href="./README/YONGHU.md">用户端</a> | <a href="./README/KUAIDIYUAN.md">快递员端</a> |<a href="./README/SIJI.md">司机端</a>
</p>
#### 项目简介
> 物流项目体系包含四个端：管理后台、用户端、司机端以及快递员端
#### 项目展示
<img width="406" src="./README/img/admin.gif" alt="Vue logo">
<img width="100" src="./README/img/siji.gif" alt="Vue logo">
<img width="100" src="./README/img/kuaidiyuan.gif" alt="Vue logo">
<img width="100" src="./README/img/yonghuduan.gif" alt="Vue logo">
#### 产品原型及设计
- 管理后台 ：
- [原型 吕珊：](https://codesign.qq.com/s/QmlyZwQxAQ9WRA1/preview/prototype/XMx86jzWVE9brz3)
- [设计图 王静：](https://codesign.qq.com/s/QmlyZwQxAQ9WRA1/JMwy0bRnNRq0O6L/inspect)
- 用户端：
- [原型 李芳华](https://codesign.qq.com/app/design/zm5q0XPwgM0RBb6/axure/O6ym7ZRM8K0AYED)
- [设计图 李芳华](https://codesign.qq.com/s/gRxnjPPr4EjLmqr/18zdZAgr4WM9nRK/inspect)
- 司机端
- [原型 李芳华](https://codesign.qq.com/s/7VXl9Obbb8j8WRA/preview/prototype/3JG2mj7B74ZVKdM)
- [设计图 李芳华](https://codesign.qq.com/s/7VXl9Obbb8j8WRA/zKaDZdEGYokj2GP/inspect)
- 快递员端
- [原型 转转](https://codesign.qq.com/app/design/1JyMjoK6MJjLbAV/axure/qwKrMZeQxLZk1md)
- [设计图 转转](https://codesign.qq.com/app/design/1JyMjoK6MJjLbAV/board)
- 研发 - 前端
- 快递员端 git - 娄江华: http://git.itcast.cn/development/project-wl-kuaidiyuan-uniapp-vue3
- 司机端 git - 李小刚：http://git.itcast.cn/development/project-wl-siji-uniapp-vue3
- 用户端 git - 司文强: http://git.itcast.cn/development/project-wl-yonghuduan-uniapp-vue3
- 管理后台 git - 司文强： http://git.itcast.cn/development/project-pdwl-admin-vue/tree/siwenqiang-0609
- 后端java： 张志军、张家乐、王小兵
- 网关git: http://git.itcast.cn/sl-express/sl-express-gateway
- 快递员端 git - 张家乐：http://git.itcast.cn/sl-express/sl-express-ms-web/sl-express-ms-web-courier
- 司机端 git - 张家乐： http://git.itcast.cn/sl-express/sl-express-ms-web/sl-express-ms-web-driver
- 用户端 git -王小兵： http://git.itcast.cn/sl-express/sl-express-ms-web/sl-express-ms-web-customer
- 管理后台 git - 管理后台：王小兵 http://git.itcast.cn/sl-express/sl-express-ms-web/sl-express-ms-web-manager
- 后端全部微服务 git：http://git.itcast.cn/sl-express
#### 访问地址
- 管理后台：http://slwl-admin-t.itheima.net
- 用户端：小程序
- 管理端：git库提供.apk 文件下载安装
- 司机端：git库提供.apk 文件下载安装
- apk路径：unpackage/release/apk/xxx.apk

133
project-wl-siji-uniapp-vue3/README/ADMIN.md Normal file
View File

@@ -0,0 +1,133 @@
# 神领物流 - 管理后台（PC端）
#### 项目简介
管理后台：该后台包括了从收到订单开始，通过仓库拣货发货，再通过分拨进行运输、末端配送，然后进行考核、结算等功能
#### 项目迭代日志：
- v1 - 涉及主流程
- 后台管理端包含：
- 基础数据数据
- 车型管理
- 车辆管理
- 司机管理
- 排班管理
- 运费管理
- 营业部管理
- 快递员管理
- 快递作业管理
- 机构作业管理
- 机构管理
- 货品类型管理
- 业务管理
- 订单管理
- 运单管理
- 调度管理
- 运输任务管理
- 线路管理
#### 技术栈
vue2+vuex+axios
#### 外网展示
> 部署说明：目前是 git 上传代码后在 jekenis 上自动部署
- http://slwl-admin-t.itheima.net/#/login
#### 开发环境
- windows 版本 windows 10 企业版
- 开发工具 vscode
- node 版本 v14.19.1
- npm 版本 v6.14.16
#### 运行程序
```sh
1. 安装 cnpm 工具，国内加速
npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 安装依赖包
cnpm i
3. 运行程序
npm run dev
4. 浏览器打开
http://localhost:9528/
```
#### 工程结构解析
```
├── public # 静态资源 (会被直接复制)
│ │── favicon.ico # favicon图标
│ │── manifest.json # PWA 配置文件
│ │── img # 静态图片存放
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源 (由 webpack 处理加载)
│ ├── components # 全局组件
│ ├── icons # svg 图标
│ ├── layout # 全局布局
│ ├── router # 路由
│ ├── store # 全局 vuex store
│ ├── styles # 全局样式
│ ├── utils # 全局方法
│ ├── views # 所有页面
│ └── ├── branches # 货品类型管理，机构管理，机构作业范围，快递作业管理，快递员管理（营业部管理）
│ ├── dashboard # 首页（）
│ ├── login # 菜品管理、添加菜品
│ ├── order-manage # 订单管理
│ ├── transit # 车型管理，车辆管理，司机管理，排班管理，运费管理（基础数据管理）
│ ├── transport # 运输任务管理，线路管理（调度管理）
│ ├── waybill # 运单管理
│ └── 404.vue # 404报错页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ ├── permission.ts # 权限管理
│ └── shims-vue.d.ts # 模块注入
├── dist # 打包文件夹（可删除重新打包）
├── tests # 测试
├── .circleci/ # 自动化 CI 配置
├── .browserslistrc # browserslistrc 配置文件 (用于支持 Autoprefixer)
├── .editorconfig # 编辑相关配置
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置
├── babel.config.js # babel-loader 配置
├── cypress.json # e2e 测试配置
├── jest.config.js # jest 单元测试配置
├── package.json # package.json 依赖
├── postcss.config.js # postcss 配置
├── tsconfig.json # typescript 配置
└── vue.config.js # vue-cli 配置
```
#### 相关资料
前端 负责人： 司文强
siwenqiang-0609 分支 神领物流一期 - 前端
git 地址：http://git.itcast.cn/development/project-wl-yonghuduan-uniapp-vue3
后端 负责人：王小兵，张家乐
接口：http://sl-express-gateway.yjy-public-slwl-java.svc.cluster.local:8080/manager/doc.html#/home
git 地址：http://git.itcast.cn/sl-express/sl-express-ms-web/sl-express-ms-web-manager
设计 负责人：王静
设计稿地址：https://codesign.qq.com/s/QmlyZwQxAQ9WRA1/JMwy0bRnNRq0O6L/inspect
原型 负责人：吕杉
原型地址：https://codesign.qq.com/s/QmlyZwQxAQ9WRA1/preview/prototype/XMx86jzWVE9brz3
#### 涉及到第三方库
- [vue-baidu-map] (https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting)
- [vue-treeselect:] (https://www.vue-treeselect.cn/)
- [element] (https://element.eleme.cn/#/zh-CN/)
#### 文档参考
- vue[https://cn.vuejs.org/v2/guide/]

125
project-wl-siji-uniapp-vue3/README/KUAIDIYUAN.md Normal file
View File

@@ -0,0 +1,125 @@
# 神领物流 - 快递员端（安卓APP）
#### 技术栈
- vue3+uniapp
#### 项目简介
> 快递员端：快递员端要主要包含取件派件、运费计算、微信支付宝收款、地图线路等功能
#### 项目迭代日志：
- v1 - 涉及主流程
- 快递员端包含：
- 用户登录 - 用户名密码登录
- 取件 - 包含 筛选、去取件、取消订单、转单、打印、拨打电话、发信息、收款
- 消息 - 包含 公告、公告详情、系统通知（寄件相关、签收提醒、快件取消）
- 派件 - 包含 去派件、拨打电话、发信息、收款、订单跟踪
- 历史派送 - 包含 日期筛选、取件派件列表搜索
- 运费查询 - 查询运费
- 我的 - 包含 我的详情
- 目前遗留问题：
- 订单追踪 - 未调试 （地图页面未实现）
- 搜索：各个模块搜索功能
- 打印：取件、派件打印
- 运单详情：地图路线图
- 我的：二维码弹出专属、作业范围
- 手机登录
- 电话拨打、发信息
#### 运行环境 - 初始开发环境及工具
- 安卓手机、MuMu模拟器（版本 2.2.3（x86）,桌面启动器版本 2.3.2）
- 安装包 luj
- unpackage/release/apk
- XXX.apk 文件为安装文件
- MuMu模拟器安装包
- windows：--
- MAC：mumu-mac.dmg
#### 开发环境
- 系统：windows 版本 windows 10 企业版
- 工具：HbuilderX 3.4.7.20220422
- node： 16.14.2
#### 安装运行
- 本项目为uniapp架构 需要依赖 HBuilderX编辑器
- 下载地址：https://www.dcloud.io/hbuilderx.html
##### 依赖安装
- 依赖安装
- HBuilderX为集成编辑器所有依赖都已经集成好了
- 运行
- 点击编辑器上的运行按钮 可使用手机或模拟器（默认可以使用浏览器直接预览）
- 使用手机或者模拟器 请阅读文件：
- [真机运行](https://uniapp.dcloud.net.cn/tutorial/run/run-app.html#%E8%BF%90%E8%A1%8C%E5%85%A5%E5%8F%A3)
- [安装模拟器](https://uniapp.dcloud.net.cn/tutorial/run/installSimulator.html#simulator)
- [常见问题](https://uniapp.dcloud.net.cn/tutorial/run/run-app-faq.html)
- 打包
- 点击编辑器的发行 - 云打包 会生成对应的安装包 （打包后控制台会展示打包后的路径） 默认路径为：unpackage/release/apk/xxx.apk 文件
#### 项目目录结构
```html
├── unpackage 编译结果目录
├── static icon目录
├── pages.js 路由
├── styles 共用样式
├── store vuex
├── pages 页面文件目录
| ├── api api接口
| | ├── common.js 公用
| | ├── freight.js 运费计算
| | ├── index.js 取件派件
| | ├── news.js 消息
| | ├── user.js 用户信息
| ├── start 引导文件夹
| ├── login 登录文件夹
| | ├── user.vue 用户页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── index 首页文件夹
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── cancel 取消取件文件夹
| | ├── index.vue 页面逻辑
| | ├── cause.vue 取消原因
| ├── delivery 派件文件夹
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── pickup 取件文件夹
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── details 详情文件夹
| | ├── index.vue 去取件页面逻辑
| | ├── orderMap.vue 订单追踪
| | ├── waybill.vue 去派件、运单详情
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── search 搜索
| ├── news 消息页文件夹
| | ├── index.vue 页面逻辑
| | ├── system.vue 系统通知页
| | ├── detail.vue 公告详情页
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── history 历史取派文件夹
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── freight 运费查询文件夹
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── my 我的文件夹
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
| ├── pay 收款文件夹
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
└── package.json
```
#### 相关资料
- [Vue3:](https://cn.vuejs.org/guide/introduction.html)
- [uniapp](https://uniapp.dcloud.net.cn/tutorial/)
#### 参考文档（项目开发过程中用到的所有技术难点 涉及到的相关参考）
- [vite配置:](https://vitejs.dev/config/)

81
project-wl-siji-uniapp-vue3/README/SIJI.md Normal file
View File

@@ -0,0 +1,81 @@
# 神领物流 - 司机端（安卓APP）
#### 技术栈
- vue3+uniapp
#### 项目简介
> 司机端：主要为司机提供：提货 交货及车辆信息上报等功能
#### 项目迭代日志：
- v1 - 涉及主流程
- 司机端包含：
- 用户登录 - 用户名密码登录
- 任务 - 包含 提货、在途、已完成
- 信息 - 包含 公告、系统通知
- 我的 - 车辆信息、任务数据、系统设置
- 目前遗留问题：- 接口未实现 二期补
- 上报异常 - 未调试 （地图定位页面未实现）
- 系统设置：换绑手机、修改密码、消息通知设置功能 - 未调试
#### 运行环境 - 初始开发环境及工具
- 安卓手机、MuMu模拟器（版本 2.2.3（x86）,桌面启动器版本 2.3.2）
- 安装包 luj
- unpackage/release/apk
- XXX.apk 文件为安装文件
- MuMu模拟器安装包
- windows：--
- MAC：mumu-mac.dmg
#### 开发环境
- 系统：MacOs
- 工具：HbuilderX 3.4.18.20220630
- node： 16.8.0
#### 安装运行
- 本项目为uniapp架构 需要依赖 HBuilderX编辑器
- 下载地址：https://www.dcloud.io/hbuilderx.html
##### 依赖安装
- 依赖安装
- HBuilderX为集成编辑器所有依赖都已经集成好了
- 运行
- 点击编辑器上的运行按钮 可使用手机或模拟器（默认可以使用浏览器直接预览）
- 使用手机或者模拟器 请阅读文件：
- [真机运行](https://uniapp.dcloud.net.cn/tutorial/run/run-app.html#%E8%BF%90%E8%A1%8C%E5%85%A5%E5%8F%A3)
- [安装模拟器](https://uniapp.dcloud.net.cn/tutorial/run/installSimulator.html#simulator)
- [常见问题](https://uniapp.dcloud.net.cn/tutorial/run/run-app-faq.html)
- 打包
- 点击编辑器的发行 - 云打包 会生成对应的安装包 （打包后控制台会展示打包后的路径） 默认路径为：unpackage/release/apk/xxx.apk 文件
#### 项目结构
```html
├── unpackage 编译结果目录
├── static icon目录
├── pages.js 路由
├── styles 共用样式
├── store vuex
├── pages 页面文件目录
| ├── api api接口
| ├── start 引导文件夹
| ├── login 登录文件夹
| ├── index 首页文件夹
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | └── components 页面组件
| └── message 消息页
| ├── components 组件 - 具体作用页面头部有
| ├── details.vue 详情页面
| └── index.vue 消息首页
| └── user 我的
| ├── components 我的页面中使用的组件 - 具体作用页面头部有
| ├── carrier.vue 我的主页
| ├── setCarrier.vue 更改状态
| └── index.vue 首页
├── README 四个端的说明文档
├── manifest.json 所有App相关配置都在这个文件里
└── package.json
```
#### 相关资料
- [Vue3:](https://cn.vuejs.org/guide/introduction.html)
- [uniapp](https://uniapp.dcloud.net.cn/tutorial/)
#### 参考文档（项目开发过程中用到的所有技术难点 涉及到的相关参考）
- [vite配置:](https://vitejs.dev/config/)

84
project-wl-siji-uniapp-vue3/README/YONGHU.md Normal file
View File

@@ -0,0 +1,84 @@
# 神领物流 - 用户端（小程序）
### 项目简介
用户端: 主要承担了用户登录，下单，查询订单的功能
### 技术栈
vue3+uniapp
### 项目迭代日志：
- v1 - 涉及主流程
- 用户端包含：
- 用户微信快捷登录
- 首页
- 下单
- 订单详情
- 订单取消
- 下单成功
- 实名认证
- 电子存根
### 外部环境
[启动文档](https://www.tapd.cn/33055819/personal_documents/show/1133055819001004909)
- 开发环境
- 1、申请开发权限
- 2、git拉代码
- 3、启动微信开发者工具
- 4、导入项目并启动
#### 运行环境 - 初始开发环境及工具
- 微信开发者工具（版本 1.06.2206090）
- HbuilderX (版本3.5.3.20220729)
- 开发版本（1.2.3）
- [下载地址](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
#### 开发环境
- windows 版本 windows 10 企业版
- 开发工具 vscode
- node 版本 v14.19.1
- npm 版本 v6.14.16
##### 依赖安装
- 依赖安装
- HBuilderX为集成编辑器所有依赖都已经集成好了
- 运行
- 开启开发者工具（需要有对应的开发权限 - 如果是没有请使用测试账号流程 [操作文档](./img/test.docx)）
- 点击编辑器上的运行按钮 选择 微信开发者工具 会自动打开该项目
- [参考](https://uniapp.dcloud.net.cn/tutorial/debug/debug-mp.html#mp-debug)
- 打包
- 点击编辑器的发行 - 云打包 会生成对应的安装包 （打包后控制台会展示打包后的路径） 默认路径为：unpackage/release/apk/xxx.apk 文件
- #### 项目目录结构
```html
├── unpackage 编译结果目录
├── static icon目录
├── pages.js 路由
├── styles 共用样式
├── store vuex
├── components 公用组件
├── pages 页面文件目录
| ├── api api接口
| ├── address 地址簿
| ├── express-delivery 寄快递
| ├── goodsInfo 物品信息
| ├── login 登录
| ├── my 我的页
| ├── index 首页
| | ├── index.vue 页面逻辑
| | ├── index.scss 页面样式
| | ├── components 页面组件
├── subPages 页面文件目录
| ├── account-rules 计费规则
| ├── address-info 地址详情
| ├── authentication-success 认证成功
| ├── electronic-stub 电子存根
| ├── order-cancel 订单取消
| ├── order-info 订单详情
| ├── order-success 下单成功
| ├── realName-authentication 实名认证
└── package.json
└── util
```
### 涉及到第三方库
- [uniapp] (https://uniapp.dcloud.net.cn/api/window/window.html#getcurrentpages)
- [微信开发者文档] (https://developers.weixin.qq.com/miniprogram/dev/framework/)

BIN
project-wl-siji-uniapp-vue3/README/img/admin.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 MiB

BIN
project-wl-siji-uniapp-vue3/README/img/kuaidiyuan.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 482 KiB

BIN
project-wl-siji-uniapp-vue3/README/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
project-wl-siji-uniapp-vue3/README/img/siji.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 485 KiB

BIN
project-wl-siji-uniapp-vue3/README/img/test.docx Normal file
View File

Binary file not shown.

BIN
project-wl-siji-uniapp-vue3/README/img/yonghuduan.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 585 KiB

220
project-wl-siji-uniapp-vue3/components/Card/index.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<!-- 公用卡片 -->
<view class="card" @click="goDetailsSucc()">
<view class="topCont"> <text>任务编号：{{item.transportTaskId}}</text> <text v-if="item.isDelay == 1 && type == 0" class="label">已延期</text> </view>
<view class="addrCont">
<view class="startAddr">{{item.startAddress}}</view>
<view class="endAddr">{{item.endAddress}}</view>
</view>
<view class="botCont" v-show="type == 0">
<view class="timeCont">
<view class="tit"> <text>提货时间</text> </view>
<view class="time"> <text>{{item.planDepartureTime}}</text> </view>
</view>
<view class="ButCont">
<text class="butRed" v-if="item.enablePickUp" @click="goDetails(item)" >提货</text>
<text class="butRed butDis" v-else >提货</text>
</view>
</view>
<view class="botCont" v-show="type == 1">
<view class="timeCont">
<view class="tit"> <text>预计到达时间 </text> </view>
<view class="time"> <text>{{item.planArrivalTime}}</text> </view>
</view>
<view class="ButCont" v-if="item.status <= 3 "> <text class="butRed" @click="goDetails(item)" >交付</text> </view>
<view class="ButCont" v-if="item.status == 4 "> <text class="butRed" @click="goDetails(item)" >回车登记</text> </view>
</view>
<view class="botCont " v-show="type == 2">
<view class="timeCont finish">
<view class="tit"> <text>交货时间</text> </view>
<view class="time"> <text>{{item.actualArrivalTime}}</text> </view>
</view>
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 获取父组件值、方法
const props = defineProps({
data: {
type: Object,
default: () => {}
},
type: {
type: Number,
default: 0
},
src:{
type: String,
default: ''
}
});
const item = ref({...props.data})
// 去往详情页
function goDetails(item){
if(props.src){
uni.navigateTo({
url: props.src,
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: item })
}
});
}
}
// 已完成详情
function goDetailsSucc(){
if (props.src && props.type == 2){
uni.navigateTo({
url: props.src,
// success: function(res) {
// // 通过eventChannel向被打开页面传送数据
// res.eventChannel.emit('acceptDataFromOpenerPage', { data: item })
// }
});
}
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.card{
padding: 30rpx 40rpx;
margin: 30rpx 0;
border-radius: 20rpx;
background: var(--neutral-color-white);
.topCont{
display: flex;
justify-content: space-between;
font-weight: 500;
line-height: 60rpx;
font-size: 32rpx;
color: #2A2929;
margin-bottom: 20rpx;
.label{
display: inline-block;
padding: 16rpx 10rpx 12rpx 10rpx;
border: 2rpx solid #EF4F3F;
border-radius: 6rpx;
font-weight: 400;
font-size: 28rpx;
line-height: 28rpx;
color: #EF4F3F;
letter-spacing: 0.32rpx;
}
}
.addrCont{
font-weight: 400;
font-size: 28rpx;
color: #818181;
letter-spacing: 0.32rpx;
padding-bottom: 40rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #EEEEEE;
position: relative;
&:before{
position: absolute;
left: 18rpx;
color:var(--neutral-color-white);
text-align: center;
content: '';
display: inline-block;
width: 0px;
height: 56%;
border-left: dashed 2px #D9D9D9;
border-radius: 11px;
}
.startAddr{
padding-left: 66rpx;
position: relative;
margin-bottom: 20rpx;
line-height: 44rpx;
&:before{
position: absolute;
font-size: 22rpx;
left: 0;
color:var(--neutral-color-white);
text-align: center;
content: '起';
display: inline-block;
width: 22px;
height: 22px;
background: #2A2929;
border-radius: 11px;
}
}
.endAddr{
padding-left: 66rpx;
position: relative;
line-height: 44rpx;
// height: 44rpx;
// overflow: hidden;
&:before{
font-size: 22rpx;
position: absolute;
left: 0;
color: var(--neutral-color-white);
text-align: center;
content: '止';
display: inline-block;
width: 22px;
height: 22px;
background: #EF4F3F;
border-radius: 11px;
}
}
}
.botCont{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
.timeCont{
.tit{
font-weight: 400;
font-size: 28rpx;
margin-bottom: 20rpx;
color: #818181;
}
.time{
font-size: 28rpx;
color: #2A2929;
}
}
.finish{
display: flex;
align-items: center;
.tit{
margin-bottom: 0;
margin-right: 18rpx;
}
}
.butRed, .butDis{
display: inline-block;
min-width: 80px;
line-height: 32px;
background: #EF4F3F;
border-radius: 16px;
font-size: var(--font-size-14);
text-align: center;
color: var(--neutral-color-white)
}
.butDis{
background: #DEDEDE;
}
.butAsh{
display: inline-block;
min-width: 80px;
line-height: 32px;
background: #EF4F3F;
border-radius: 16px;
text-align: center;
color: var(--neutral-color-white)
}
}
}
</style>

169
project-wl-siji-uniapp-vue3/components/CardCont/index.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<!-- 公用卡片 - 框架 -->
<view class="cardCont">
<view class="topCont" @click="openHandle()">
<view class="">
<text class="title">{{title}}</text>
<text class="label" v-show="label">{{label}}</text>
</view>
<view v-if="type == 'redio'" class="redioActionCont">
<image class="videoIcon" mode="aspectFit" :src="isOpen ? redioIconTrue : redioIconFalse"></image> <text>是</text>
<image class="videoIcon" mode="aspectFit" :src="!isOpen ? redioIconTrue : redioIconFalse"></image> <text>否</text>
</view>
<view v-else class="openHandle">
<image v-show="!isOpen" class="cardsIcon" mode="aspectFit" src="@/static/sj_add.png"></image>
<image v-show="isOpen" class="cardsIcon" mode="aspectFit" src="@/static/sj_red.png"></image>
</view>
</view>
<view class="content" :style="{height: (isOpen?height:0) +'px'}" ref="contEl">
<view :id="elId" style="padding-top: 20rpx;">
<slot></slot>
</view>
</view>
</view>
<!-- end -->
</template>
<script>
export default {
data() {
const elId = `wl_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
redioIconTrue: './../../static/sj_redio_true.png',
redioIconFalse: './../../static/sj_redio_false.png',
isOpen: this.open,
contHt: 'auto',
height: '',
elId,
}
},
props: {
// 列表标题
title: {
type: String,
default: ''
},
// 分类 默认加减号 的样式 redio 为单选形式
type: {
type: String,
default: ''
},
// 分类为redio的时候 可以设置 对应参数
redioKey: {
type: String,
default: 'redioKey'
},
//标题后面的说明文字
label: {
type: String,
default: ''
},
// 是否展开
open: {
type: Boolean,
default: false
},
},
updated(e) {
this.$nextTick(() => {
this.getCollapseHeight()
})
},
methods: {
// 展开关闭操作
openHandle(){
this.isOpen = this.isOpen ? false : true;
if(this.type == 'redio'){
let param = {key: this.redioKey, value: Number(this.isOpen) + 1}
this.$emit('redioChange',param)
}
},
// 获取内部容器的高度
getCollapseHeight(type, index = 0) {
const views = uni.createSelectorQuery().in(this)
views
.select(`#${this.elId}`)
.fields({
size: true
}, data => {
// TODO 百度中可能获取不到节点信息 ，需要循环获取
if (index >= 10) return
if (!data) {
index++
this.getCollapseHeight(false, index)
return
}
// #ifdef APP-NVUE
this.height = data.height + 1
// #endif
// #ifndef APP-NVUE
this.height = data.height
// #endif
this.isheight = true
})
.exec()
}
},
mounted() {
this.getCollapseHeight()
}
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.cardCont{
padding: 30rpx 40rpx;
margin: 30rpx 0;
border-radius: 20rpx;
background: var(--neutral-color-white);
.topCont{
display: flex;
justify-content: space-between;
font-weight: 500;
line-height: 60rpx;
font-size: 32rpx;
color: var(--neutral-color-main);
align-items: center;
// transition: 500ms;
// transform: rotate(0deg);
.title{
font-weight: 500;
font-size: 32rpx;
color: var(--neutral-color-main);
}
.label{
font-weight: 400;
padding-left: 20rpx;
font-size:var(--font-size-12);
color:var(--neutral-color-font);
}
.redioActionCont{
display: flex;
align-items: center;
.videoIcon{
width: 64rpx;
height: 64rpx;
}
}
.cardsIcon{
width: 48rpx;
height: 48rpx;
}
.openHandle{
display: flex;
align-items: center;
}
.open{
// transition: 500ms;
transform: rotate(180deg);
}
}
.content{
overflow: hidden;
transition-property: height, border-bottom-width;
transition-duration: 0.3s;
will-change: height;
}
}
</style>

56
project-wl-siji-uniapp-vue3/components/DetailsNav/index.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<!-- 公用 详情Nav -->
<view class="detailsHead">
<view class="head">
<!-- 详情页-返回头部 -->
<image style="width: 88rpx; height: 88rpx;" src="@/static/sj_back.png" @click="backHandle()" mode=""></image>
<view class="title">{{title}}</view>
<!-- end -->
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 获取父组件值、方法
const props = defineProps({
title: {
type: String,
default: ''
}
});
// ------定义变量------
const searchVal = ref('');
// ------方法------
// 返回上一页
const backHandle = () => {
uni.navigateBack({
delta: 1,
})
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
// 导航
.detailsHead {
.head{
padding-top: 10rpx;
/* #ifdef APP-PLUS */
padding-top: 44rpx;
/* #endif */
background-color: var(--neutral-color-white);
display: flex;
justify-content: space-between;
text-align: center;
.title{
flex: 1;
padding-right:90rpx;
line-height: 88rpx;
font-weight: 600;
font-size: 36rpx;
color: #2A2929;
}
}
}
</style>

31
project-wl-siji-uniapp-vue3/components/EmptyPage/index.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<view class="emptyBox">
<image src="../../static/sj_nodata.png" class="emptyImage" mode=""></image>
<view><text>{{emptyInfo}}</text></view>
</view>
</template>
<script setup>
// 获取父组件值、方法
const props = defineProps({
emptyInfo:{
type:String,
default: '',
}
})
</script>
<style>
@import url('@/styles/theme.scss');
.emptyBox{
padding: 288rpx 0 80rpx;
text-align: center;
color: var(--neutral-color-font);
font-size: var(--font-size-12);
}
.emptyImage {
width: 400rpx !important;
height: 240rpx !important;
}
</style>

88
project-wl-siji-uniapp-vue3/components/Footer/index.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<!-- 公用底部 -->
<view class="footBox">
<view class="uni-tabbar">
<view class="tabbar-item" :class="currentPage === index ? 'active' : ''" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item, index)">
<view v-if="true" class="uni-tabbar__bd">
<view class="uni-tabbar__icon" v-if="item.pagePath !== ''">
<img v-if="currentPage === index" class="item-img" :src="item.selectedIconPath" />
<img v-else class="item-img" :src="item.iconPath" />
</view>
<view v-else class="qrCode"><img :src="item.iconPath" /></view>
</view>
<view class="uni-tabbar__label" v-if="item.text !== ''">{{ item.text }}</view>
</view>
</view>
</view>
<!-- end -->
</template>
<script>
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
export default {
name: 'Footer',
components: {},
// 接收父组件的值
props: {
pagePath: {
type: String,
required: true
}
},
setup: props => {
const store = useStore();
const page = ref('contact');
const showPage = ref(false);
const containerHeight = ref(400);
const currentPage = ref(store.state.footStatus);
// 底部列表配置
const tabbar = ref([
{
pagePath: '/pages/index/index',
iconPath: 'static/sj_test_nor.png',
selectedIconPath: 'static/sj_test_sel.png',
text: '任务'
},
{
pagePath: '/pages/message/index',
iconPath: 'static/sj_mess_nor.png',
selectedIconPath: 'static/sj_mess_sel.png',
text: '消息'
},
{
pagePath: '/pages/user/index',
iconPath: 'static//sj_mine_nor.png',
selectedIconPath: 'static//sj_mine_sel.png',
text: '我的'
}
]);
// 切换事件
const changeTab = (item, index) => {
if (item.text !== '') {
currentPage.value = index;
store.commit('setFootStatus', index)
uni.redirectTo({
url: item.pagePath,
success: e => {},
fail: () => {}
});
}
};
return {
// ------变量------
page,
showPage,
containerHeight,
currentPage,
tabbar,
// ------方法------
changeTab
};
}
};
</script>
<style lang="scss" scoped>
.tabbar {
}
</style>

92
project-wl-siji-uniapp-vue3/components/ImageUpload/index.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<!-- 公用卡片 -->
<view class="upPicCont">
<view class="title">{{title}}</view>
<uni-file-picker
v-model="cargoPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="select" ></uni-file-picker>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
upload
} from '@/pages/api/index.js'
const cargoPicture = ref([])
const emit = defineEmits(['uploadImage'])
// 获取父组件值、方法
const props = defineProps({
title:{
type: String,
default: '请拍照上传货品照片'
},
tit:{
type: String,
default: ''
}
});
// 图片上传 - 请求
async function uploadHande(e){
await upload(e).then(res => {
if (res.code === 200 && res.data) {
emit('uploadImage', {key: props.tit, value: res.data})
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
}).catch(err => {
uni.showToast({
title: '图片上传失败！请联系管理员',
duration: 1000,
icon: 'none'
});
});
}
// 图片上传
async function select(e){
cargoPicture.value = []
const tempFiles = e.tempFiles[0]
if (tempFiles.size < 1024 * 5 && (tempFiles.extname == 'png' || tempFiles.extname == 'jpg' || tempFiles.extname == 'jpeg' || tempFiles.extname == 'gif')) {
uploadHande(e)
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none'
});
}
}
onMounted(()=>{
})
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.upPicCont{
margin-bottom: 32rpx;
padding-top: 30rpx;
.title{
font-weight: 400;
font-size: var(--font-size-14);
color: var(--neutral-color-font);
margin-bottom: 32rpx;
}
.file-picker__box-content{
border:none;
background: var(--neutral-color-cancel);
}
}
</style>

93
project-wl-siji-uniapp-vue3/components/Nav/index.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<!-- 公用nav -->
<view class="navBox">
<view class="nav-bg">
<!-- 头部自定义导航 -->
<text>任务</text>
<!-- end -->
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 获取父组件值、方法
const props = defineProps({
newVal: {
type: String,
default: ''
}
});
// ------定义变量------
const searchVal = ref('');
// ------方法------
const handleSearch = e => {
// 跳转到搜索页面
uni.navigateTo({
url: '/pages/search/index'
});
};
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
// 导航
.nav-bg {
background-image: linear-gradient(205deg, #f25c4d 2%, #e52d21 100%, #e52d21 100%);
line-height: 80rpx;
text-align: center;
color:var(--neutral-color-white);
::v-deep .uni-navbar__header-btns-left,
::v-deep .uni-navbar__header-btns-right {
display: none !important;
}
// 重置首页搜索图标样式
::v-deep .uni-icons {
background: url(@/static/search.png) 50% 50% no-repeat;
background-size: contain;
}
// 重置首页搜索placeholder样式
::v-deep .uni-input-placeholder {
color: #f9c5c0;
}
// 重置首页搜索input样式
::v-deep .uni-input-input {
background: rgba(250, 250, 250, 0.24);
color: #f9c5c0;
}
.uni-badge-absolute {
margin-left: 40px;
}
.rightText {
text-align: center;
padding-left: 28rpx;
}
.box {
width: 34rpx;
height: 34rpx;
// background: url(@/static/icon012.png) no-repeat;
background-size: contain;
}
.box-text {
text-align: center;
color: var(--neutral-color-white);
font-size: 12px;
}
::v-deep .uni-badge--error {
height: 24rpx;
line-height: 24rpx;
background: var(--neutral-color-white);
border-radius: 11rpx;
font-size: 18rpx;
color: #f25c4d;
right: -18px !important;
top: -3px !important;
}
.newInfo {
color: var(--neutral-color-white);
font-size: 20rpx;
line-height: 20rpx;
}
}
</style>

60
project-wl-siji-uniapp-vue3/components/Popup/changelog.md Normal file
View File

@@ -0,0 +1,60 @@
## 1.7.9（2022-04-02）
- 修复 弹出层内部无法滚动的bug
## 1.7.8（2022-03-28）
- 修复 小程序中高度错误的bug
## 1.7.7（2022-03-17）
- 修复 快速调用open出现问题的Bug
## 1.7.6（2022-02-14）
- 修复 safeArea 属性不能设置为false的bug
## 1.7.5（2022-01-19）
- 修复 isMaskClick 失效的bug
## 1.7.4（2022-01-19）
- 新增 cancelText \ confirmText 属性 ，可自定义文本
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
## 1.7.3（2022-01-13）
- 修复 设置 safeArea 属性不生效的bug
## 1.7.2（2021-11-26）
- 优化 组件示例
## 1.7.1（2021-11-26）
- 修复 vuedoc 文字错误
## 1.7.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-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
## 1.6.2（2021-08-24）
- 新增 支持国际化
## 1.6.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.6.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.5.0（2021-06-23）
- 新增 mask-click 遮罩层点击事件
## 1.4.5（2021-06-22）
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.4（2021-06-18）
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
## 1.4.3（2021-06-08）
- 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题
- 修复 点击内容，再点击遮罩无法关闭的Bug
## 1.4.2（2021-05-12）
- 新增 组件示例地址
## 1.4.1（2021-04-29）
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
## 1.4.0 （2021-04-29）
- 新增 type 属性的 left\right 值，支持左右弹出
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
- 新增 safeArea 属性，是否适配底部安全区
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
- 修复 App 端弹出等待的Bug
- 优化 提升低配设备性能，优化动画卡顿问题
- 优化 更简单的组件自定义方式
## 1.2.9（2021-02-05）
- 优化 组件引用关系，通过uni_modules引用组件
## 1.2.8（2021-02-05）
- 调整为uni_modules目录规范
## 1.2.7（2021-02-05）
- 调整为uni_modules目录规范
- 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端

45
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup-dialog/keypress.js Normal file
View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif

271
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup-dialog/uni-popup-dialog.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" v-if="title" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
</view>
<view v-if="mode === 'base'" class="uni-dialog-content">
<slot>
<text class="uni-dialog-content-text">{{content}}</text>
</slot>
</view>
<view v-else class="uni-dialog-content">
<slot>
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="closeDialog">
<text class="uni-dialog-button-text">{{closeText}}</text>
</view>
<view class="uni-dialog-button uni-border-left" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
mixins: [popup],
emits:['confirm','close'],
props: {
value: {
type: [String, Number],
default: ''
},
placeholder: {
type: [String, Number],
default: ''
},
type: {
type: String,
default: 'error'
},
mode: {
type: String,
default: 'base'
},
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
},
cancelText:{
type: String,
default: ''
},
confirmText:{
type: String,
default: ''
}
},
data() {
return {
dialogType: 'error',
focus: false,
val: ""
}
},
computed: {
okText() {
return this.confirmText || t("uni-popup.ok")
},
closeText() {
return this.cancelText || t("uni-popup.cancel")
},
placeholderText() {
return this.placeholder || t("uni-popup.placeholder")
},
titleText() {
return this.title || t("uni-popup.title")
}
},
watch: {
type(val) {
this.dialogType = val
},
mode(val) {
if (val === 'input') {
this.dialogType = 'info'
}
},
value(val) {
this.val = val
}
},
created() {
// 对话框遮罩不可点击
this.popup.disableMask()
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value
} else {
this.dialogType = this.type
}
},
mounted() {
this.focus = true
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
if (this.mode === 'input'){
this.$emit('confirm', this.val)
}else{
this.$emit('confirm')
}
if(this.beforeClose) return
this.popup.close()
},
/**
* 点击取消按钮
*/
closeDialog() {
this.$emit('close')
if(this.beforeClose) return
this.popup.close()
},
close(){
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-dialog {
width: 300px;
border-radius: 11px;
background-color: #fff;
}
.uni-dialog-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 25px;
}
.uni-dialog-title-text {
font-size: 16px;
font-weight: 500;
}
.uni-dialog-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.uni-dialog-content-text {
font-size: 14px;
color: #6C6C6C;
}
.uni-dialog-button-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-dialog-button {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
}
.uni-border-left {
border-left-color: #f0f0f0;
border-left-style: solid;
border-left-width: 1px;
}
.uni-dialog-button-text {
font-size: 16px;
color: #333;
}
.uni-button-color {
color: #EF4F3F;
}
.uni-dialog-input {
flex: 1;
font-size: 14px;
border: 1px #eee solid;
height: 40px;
padding: 0 10px;
border-radius: 5px;
color: #555;
}
.uni-popup__success {
color: #4cd964;
}
.uni-popup__warn {
color: #f0ad4e;
}
.uni-popup__error {
color: #dd524d;
}
.uni-popup__info {
color: #909399;
}
</style>

143
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup-message/uni-popup-message.vue Normal file
View File

@@ -0,0 +1,143 @@
<template>
<view class="uni-popup-message">
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
<slot>
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
</slot>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
/**
* PopUp 弹出层-消息提示
* @description 弹出层-消息提示
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} message 消息提示文字
* @property {String} duration 显示时间，设置为 0 则不会自动关闭
*/
export default {
name: 'uniPopupMessage',
mixins:[popup],
props: {
/**
* 主题 success/warning/info/error 默认 success
*/
type: {
type: String,
default: 'success'
},
/**
* 消息文字
*/
message: {
type: String,
default: ''
},
/**
* 显示时间，设置为 0 则不会自动关闭
*/
duration: {
type: Number,
default: 3000
},
maskShow:{
type:Boolean,
default:false
}
},
data() {
return {}
},
created() {
this.popup.maskShow = this.maskShow
this.popup.messageChild = this
},
methods: {
timerClose(){
if(this.duration === 0) return
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
this.popup.close()
},this.duration)
}
}
}
</script>
<style lang="scss" >
.uni-popup-message {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.uni-popup-message__box {
background-color: #e1f3d8;
padding: 10px 15px;
border-color: #eee;
border-style: solid;
border-width: 1px;
flex: 1;
}
@media screen and (min-width: 500px) {
.fixforpc-width {
margin-top: 20px;
border-radius: 4px;
flex: none;
min-width: 380px;
/* #ifndef APP-NVUE */
max-width: 50%;
/* #endif */
/* #ifdef APP-NVUE */
max-width: 500px;
/* #endif */
}
}
.uni-popup-message-text {
font-size: 14px;
padding: 0;
}
.uni-popup__success {
background-color: #e1f3d8;
}
.uni-popup__success-text {
color: #67C23A;
}
.uni-popup__warn {
background-color: #faecd8;
}
.uni-popup__warn-text {
color: #E6A23C;
}
.uni-popup__error {
background-color: #fde2e2;
}
.uni-popup__error-text {
color: #F56C6C;
}
.uni-popup__info {
background-color: #F2F6FC;
}
.uni-popup__info-text {
color: #909399;
}
</style>

187
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup-share/uni-popup-share.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
export default {
name: 'UniPopupShare',
mixins:[popup],
emits:['select'],
props: {
title: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
bottomData: [{
text: '微信',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'wx'
},
{
text: 'QQ',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina'
},
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
// name: 'copy'
// },
// {
// text: '其他',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
// name: 'more'
// }
]
}
},
created() {},
computed: {
cancelText() {
return t("uni-popup.cancel")
},
shareTitleText() {
return this.title || t("uni-popup.shareTitle")
}
},
methods: {
/**
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
})
this.close()
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-share {
background-color: #fff;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.uni-share-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
}
.uni-share-title-text {
font-size: 14px;
color: #666;
}
.uni-share-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.uni-share-content-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
}
.uni-share-content-item {
width: 90px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
align-items: center;
}
.uni-share-content-item:active {
background-color: #f5f5f5;
}
.uni-share-image {
width: 30px;
height: 30px;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
}
.uni-share-button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
color: #666;
font-size: 16px;
}
.uni-share-button::after {
border-radius: 50px;
}
</style>

7
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/i18n/en.json Normal file
View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "cancel",
"uni-popup.ok": "ok",
"uni-popup.placeholder": "pleace enter",
"uni-popup.title": "Hint",
"uni-popup.shareTitle": "Share to"
}

8
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/i18n/index.js Normal file
View File

@@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

7
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/i18n/zh-Hans.json Normal file
View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

7
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/i18n/zh-Hant.json Normal file
View File

@@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

45
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/keypress.js Normal file
View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif

26
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/popup.js Normal file
View File

@@ -0,0 +1,26 @@
export default {
data() {
return {
}
},
created(){
this.popup = this.getParent()
},
methods:{
/**
* 获取父元素实例
*/
getParent(name = 'uniPopup') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
}
}

474
project-wl-siji-uniapp-vue3/components/Popup/components/uni-popup/uni-popup.vue Normal file
View File

@@ -0,0 +1,474 @@
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart">
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
:duration="duration" :show="showTrans" @click="onTap" />
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
:show="showTrans" @click="onTap">
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
<slot />
</view>
</uni-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default {
name: 'uniPopup',
components: {
// #ifdef H5
keypress
// #endif
},
emits: ['change', 'maskClick'],
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
isMaskClick: {
type: Boolean,
default: null
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: {
type: Boolean,
default: null
},
backgroundColor: {
type: String,
default: 'none'
},
safeArea: {
type: Boolean,
default: true
},
maskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
},
},
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
if (!this.config[newVal]) return
this[this.config[this.type]](true)
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
isMaskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom'
},
maskClass: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)'
},
transClass: {
position: 'fixed',
left: 0,
right: 0
},
maskShow: true,
mkclick: true,
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
}
},
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
},
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent'
}
return this.backgroundColor
}
},
mounted() {
const fixSize = () => {
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getSystemInfoSync()
this.popupWidth = windowWidth
this.popupHeight = windowHeight + (windowTop || 0)
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom
// #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
} else {
this.safeAreaInsets = 0
}
}
fixSize()
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible()
},
// #endif
created() {
// this.mkclick = this.isMaskClick || this.maskClick
if (this.isMaskClick === null && this.maskClick === null) {
this.mkclick = true
} else {
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
}
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
this.maskClass.backgroundColor = this.maskBackgroundColor
},
methods: {
setH5Visible() {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = 'visible'
// #endif
},
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
clearTimeout(this.timer)
this.showPopup = false
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type
}
if (!this.config[direction]) {
console.error('缺少类型：', direction)
return
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
},
close(type) {
this.showTrans = false
this.$emit('change', {
show: false,
type: this.type
})
clearTimeout(this.timer)
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
},
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() {
this.clearPropagation = false
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false
return
}
this.$emit('maskClick')
if (!this.mkclick) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
this.$nextTick(() => {
if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose()
}
})
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom'
this.ani = ['slide-bottom']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: this.safeAreaInsets + 'px',
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center'
this.ani = ['zoom-out', 'fade']
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center'
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
left(type) {
this.popupstyle = 'left'
this.ani = ['slide-left']
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
right(type) {
this.popupstyle = 'right'
this.ani = ['slide-right']
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
}
}
}
</script>
<style lang="scss">
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>

90
project-wl-siji-uniapp-vue3/components/Popup/package.json Normal file
View File

@@ -0,0 +1,90 @@
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.7.9",
"description": " Popup 组件，提供常用的弹层",
"keywords": [
"uni-ui",
"弹出层",
"弹窗",
"popup",
"弹框"
],
"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": [
"uni-scss",
"uni-transition"
],
"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"
}
}
}
}
}

17
project-wl-siji-uniapp-vue3/components/Popup/readme.md Normal file
View File

@@ -0,0 +1,17 @@
## Popup 弹出层
> **组件名：uni-popup**
> 代码块： `uPopup`
> 关联组件：`uni-transition`
弹出层组件，在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

48
project-wl-siji-uniapp-vue3/components/SearchInput/index.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<!-- 公用搜索框 -->
<view class="search">
<uni-icons class="searchIcon" @click="searchHandle()" type="search"></uni-icons>
<input v-model="searchKey" class="searchInput" @confirm="searchHandle()" focus placeholder="请输入运单号" />
</view>
<!-- end -->
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
itemData: {
inputKey: String,
default: 'value'
}
});
const searchKey = ref('');
const emit = defineEmits(['searchHandle'])
const searchHandle = () => {
emit('searchHandle', searchKey.value)
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.search{
margin-bottom: 20rpx;
position: relative;
.searchIcon{
position: absolute;
left: 20rpx;
top: 18rpx;
}
.searchInput{
background-color: var(--neutral-color-cancel);
border-radius: 32rpx;
font-size: var(--font-size-12);
line-height: 64rpx;
height: 64rpx;
padding: 0 20rpx 0 60rpx;
}
}
</style>

113
project-wl-siji-uniapp-vue3/components/Select/index.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<!-- 下拉组件 -->
<view class="select" >
<view class="selHead" @click="toggle('bottom')"> 请选择 </view>
<uni-popup ref="popup" background-color="#fff" @change="change">
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
<view class="title">
<span>选择类型</span>
<image @click="close()" class="colse" src="@/static/sj_clone.png" mode=""></image>
</view>
<view class="options" v-for="(item, index) in options" @click="selectHandle(item.value)">
<text>{{item.title}}</text>
<view class="redioActionCont">
<image class="videoIcon" mode="aspectFit" :src="value == item.value ? redioIconTrue : redioIconFalse"></image>
</view>
</view>
<view class="butCont">
<text @click="selectSubmit" class="button" style="width: 59%;">确定</text>
</view>
</view>
</uni-popup>
</view>
<!-- end -->
</template>
<script>
import { ref, reactive, onMounted } from 'vue';
export default {
data (){
return {
redioIconTrue: './../../static/sj_redio_true.png',
redioIconFalse: './../../static/sj_redio_false.png',
// value: 0
}
},
props:{
options: {
type: Array,
default: []
},
value: {
type: String || Number,
default: "1"
}
},
methods:{
toggle(type) {
this.type = type
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open(type)
},
selectHandle(value){
console.log(value)
// this.close()
},
selectSubmit(){
},
change(){
// this.close()
},
// 关闭弹层
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
this.$refs.popup.close()
},
}
}
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.select{
.title{
display: flex;
padding: 40rpx;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size:var(--font-size-16);
color: var(--neutral-color-main);
letter-spacing: 0;
line-height: 42rpx;
border-bottom: solid 2rpx var(--neutral-color-background);
.colse{
width: 26rpx;
height: 26rpx;
}
}
.options{
display: flex;
justify-content: space-between;
line-height: 120rpx;
padding:0 40rpx;
color: var(--neutral-color-main);
border-bottom: solid 2rpx var(--neutral-color-background);
}
.butCont{
padding: 40rpx 0;
display: flex;
justify-content: center;
}
.redioActionCont{
display: flex;
align-items: center;
.videoIcon{
width: 64rpx;
height: 64rpx;
}
}
}
</style>

33
project-wl-siji-uniapp-vue3/components/TextArea/index.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<!-- 公用卡片 -->
<textarea class="textInput" placeholder-style="color:#818181" :placeholder="placeholder"/>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 获取父组件值、方法
const props = defineProps({
placeholder:{
type: String,
default: ''
}
});
onMounted(()=>{
})
</script>
<style lang="scss" scoped>
@import url(@/styles/theme.scss);
.textInput{
font-size: var(--font-size-14);
background-color: var(--neutral-color-cancel);
width: 100%;
border-radius: 20rpx;
padding: 30rpx;
box-sizing: border-box;
}
</style>

39
project-wl-siji-uniapp-vue3/components/reach-bottom/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<!-- <view class="bottom-box">
<view class="bottom-item">
<text class="title">{{loadingText}}</text>
</view>
</view> -->
<uni-load-more :status="status" :content-text="contentText" />
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 获取父组件值、方法
const props = defineProps({
// contentText: {
// type: Object,
// default:() => ({})
// },
// status:{
// type:String,
// default:''
// }
});
// ------定义变量------
let status = ref('more'); //loading 的状态 more(加载前)/loading(加载中)/noMore(没有更多数据)
const contentText = ref({ //加载状态说明
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
});
//把数据、方法暴漏给父组件
defineExpose({
status,
contentText
});
</script>
<style></style>

37
project-wl-siji-uniapp-vue3/components/uni-search/index.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<!-- 公用nav -->
<view class="navBox">
<view class="search">
<!-- 头部自定义导航 -->
<uni-nav-bar right-text="取消" @clickRight="handleCancel">
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
<input confirm-type="search" class="nav-bar-input" type="text" v-model="searchVal" placeholder="输入运单号/手机号/姓名查询" @confirm="handleSearch" @input="handleSearch" />
<view class="scanIcon" @click="handleQr"></view>
</view>
</uni-nav-bar>
<!-- end -->
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref } from 'vue';
// ------定义变量------
const emit =defineEmits(['handleSearch']) //子组件向父组件事件传递
const searchVal =ref('')
// -----方法------
// 取消搜索
const handleCancel=()=>{
searchVal.value = ''
}
// 搜索
const handleSearch=()=>{
emit('handleSearch',searchVal)
}
// 扫二维码
const handleQr =()=>{
}
</script>

140
project-wl-siji-uniapp-vue3/components/uni-section/uni-section.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<view class="uni-section">
<view class="uni-section-header" 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}" :style="{color:color}" class="uni-section__content-title">{{ title }}</text>
<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
</view>
</view>
<view :style="{padding: padding ? '10px' : ''}">
<slot/>
</view>
</view>
</template>
<script>
/**
* Section 标题栏
* @description 标题栏
* @property {String} type = [line|circle] 标题装饰类型
* @value line 竖线
* @value circle 圆形
* @property {String} title 主标题
* @property {String} subTitle 副标题
*/
export default {
name: 'UniSection',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
color:{
type: String,
default: '#333'
},
subTitle: {
type: String,
default: ''
},
padding: {
type: Boolean,
default: false
}
},
data() {
return {}
},
watch: {
title(newVal) {
if (uni.report && newVal !== '') {
uni.report('title', newVal)
}
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" >
$uni-primary: #2979ff !default;
.uni-section {
background-color: #fff;
// overflow: hidden;
margin-top: 10px;
}
.uni-section-header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding: 12px 10px;
// height: 50px;
font-weight: normal;
}
.uni-section__head {
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.line {
height: 12px;
background-color: $uni-primary;
border-radius: 10px;
width: 4px;
}
.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-primary;
}
.uni-section__content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
flex: 1;
color: #333;
}
.uni-section__content-title {
font-size: 14px;
color: $uni-primary;
}
.distraction {
flex-direction: row;
align-items: center;
}
.uni-section__content-sub {
font-size: 12px;
color: #999;
line-height: 16px;
margin-top: 2px;
}
</style>

14
project-wl-siji-uniapp-vue3/index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

7
project-wl-siji-uniapp-vue3/main.js Normal file
View File

@@ -0,0 +1,7 @@
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')

136
project-wl-siji-uniapp-vue3/manifest.json Normal file
View File

@@ -0,0 +1,136 @@
{
"name" : "神领-司机端",
"appid" : "__UNI__C91E013",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
/* 5+App特有相关 */
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"nvueStyleCompiler" : "uni-app",
"modules" : {
"Geolocation" : {}
},
/* 模块配置 */
"distribute" : {
/* 应用发布信息 */
"android" : {
/* android打包配置 */
"permissions" : [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH\"/>",
"<uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\"/>"
],
"abiFilters" : [ "armeabi-v7a", "x86" ],
"minSdkVersion" : 21
},
"ios" : {
"dSYMs" : false
},
/* ios打包配置 */
"sdkConfigs" : {
"ad" : {},
"geolocation" : {
"baidu" : {
"__platform__" : [ "ios", "android" ],
"appkey_ios" : "",
"appkey_android" : "284498fab56133330077ceb92ff5b7d4"
}
}
},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
},
"splashscreen" : {
"waiting" : true,
"autoclose" : true
}
},
/* SDK配置 */
"quickapp" : {},
/* 快应用特有相关 */
"mp-weixin" : {
/* 小程序特有相关 */
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"permission" : {
"scope.userLocation" : {
"desc" : ""
}
}
},
"permission" : {
"scope.userLocation" : {
"desc" : "您的位置信息将用于上报位置记录行车轨迹展示"
}
},
"vueVersion" : "3",
"h5" : {
// "devServer" : {
// "proxy" : {
// "/api" : {
// "target" : "http://172.16.43.24:18092", //请求的目标域名
// "changeOrigin" : true,
// "secure" : false,
// "pathRewrite": {
// "^/api": ""
// }
// }
// },
// "port" : 8848,
// "https" : true
// },
"title" : "神领物流"
}
}

147
project-wl-siji-uniapp-vue3/pages.json Normal file
View File

@@ -0,0 +1,147 @@
{
"pages": [
{
"path": "pages/start/index", // 引导页
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/login/user", // 登录-用户名密码登录
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/login/index", // 登录-手机号验证码登录
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/index", // 任务 - 待提货
"style": {
"navigationStyle": "custom",
// "enablePullDownRefresh": true
"pullToRefresh": {
"support": true,
"color": "#ff3333",
"style": "default",
"contentdown": {
"caption": "下拉可刷新自定义文本"
},
"contentover": {
"caption": "释放可刷新自定义文本"
},
"contentrefresh": {
"caption": "正在刷新自定义文本"
}
}
}
},
{
"path": "pages/index/delayed", // 任务 - 待提货 - 延迟提货
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/details", // 任务 - 待提货 - 详情
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/detailsRoad", // 任务 - 待提货 - 详情
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/detailsSuccess", // 任务 - 已完成 - 详情
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/exception", // 任务 - 完成 - 上报异常
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/refister", // 任务 - 完成 - 回车等级
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/message/index", // 消息首页
"style": {
"navigationStyle": "custom" //自定义头部
}
},
{
"path": "pages/message/details", // 消息首页 - 详情
"style": {
"navigationStyle": "custom" //自定义头部
}
},
{
"path": "pages/user/index", // 我的 - 我的
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/user/carrier", // 我的 - 容器
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/user/setCarrier", // 我的 - 设置相关容器
"style": {
"navigationStyle": "custom"
}
}
],
// "tabBar": {
// "list": [{
// "pagePath": "/pages/index/index",
// "iconPath": "static/sj_test_nor.png",
// "selectedIconPath": "static/sj_test_sel.png",
// "text": "任务"
// },{
// "pagePath": "/pages/message/index",
// "iconPath": "static/sj_mess_nor.png",
// "selectedIconPath": "static/sj_mess_sel.png",
// "text": "消息"
// },{
// "pagePath": "/pages/user/index",
// "iconPath": "static//sj_mine_nor.png",
// "selectedIconPath": "static//sj_mine_sel.png",
// "text": "我的"
// }]
// },
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "神领快递",
"navigationBarBackgroundColor": "#F4F4F4",
"backgroundColor": "#F4F4F4",
"app-plus": {
"background": "#F4F4F4"
}
},
"condition" : { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [
{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}
]
}
}

100
project-wl-siji-uniapp-vue3/pages/api/index.js Normal file
View File

@@ -0,0 +1,100 @@
import {
request,
requestUpload
} from "../../utils/request.js"
/**
*
* 任务的相关接口
*/
// 获取任务列表（包含待提货、在途、已完成）
export const GetTasksList = (params) =>
request({
url: '/tasks/list',
method: 'get',
params
})
// 获取任务详情
export const GetTaskDetails = (jobId) =>
request({
url: `/tasks/details/${jobId}`,
method: 'get',
})
// 获取任务详情 - 订单
export const GetTaskDetailsOrders = (params) =>
request({
url: `/tasks/orders`,
method: 'get',
params
})
// 延迟提货 - 提交
export const PutDelay = (params) =>
request({
url: `/tasks/delay`,
method: 'put',
params
})
// 联系调度中心电话
export const GetPhone = () =>
request({
url: `/tasks/dispatchCenterPhone`,
method: 'get',
})
// 提货
export const TakeDelivery = (params) =>
request({
url: `/tasks/takeDelivery`,
method: 'post',
params
})
// 上报异常
export const Exception = (params) =>
request({
url: `/tasks/exception`,
method: 'post',
params
})
// 异常详情
export const ExceptionDetails = (id) =>
request({
url: `/tasks/exception/${id}`,
method: 'get',
})
// 回车等级
export const TruckRegistration = (params) =>
request({
url: `/tasks/truckRegistration`,
method: 'post',
params
})
// 交付
export const Deliver = (params) =>
request({
url: `/tasks/deliver`,
method: 'post',
params
})
// 图片上传
export const upload = (params) =>
requestUpload({
url: `/files/imageUpload`,
method: 'post',
data:params,
params
})
// 上报位置
export const PositionUpload = (params) =>
request({
url: `/track/upload`,
method: 'put',
data:params,
params
})

23
project-wl-siji-uniapp-vue3/pages/api/news.js Normal file
View File

@@ -0,0 +1,23 @@
import {
request
} from "../../utils/request.js"
// 公告/公告详情/系统通知列表公用接口
export const getNewList = (params) =>
request({
url: `/messages/page`, //3代表快递员端接口
method: 'get',
params
})
// 标记已读
export const msgRead= (id) =>
request({
url: `/messages/${id}`,
method: 'put'
})
// 全部已读
export const msgAllRead= (params) =>
request({
url: `/messages/readAll?ids=${params}`,
method: 'put',
params
})

84
project-wl-siji-uniapp-vue3/pages/api/user.js Normal file
View File

@@ -0,0 +1,84 @@
import {
request
} from "../../utils/request.js"
// 手机号登录
export const phoneLogins = (params) =>
request({
url: `/login/phone`,
method: 'post',
params
})
// 账号登录
export const userLogins = (params) =>
request({
url: `/login/account`,
method: 'post',
params
})
// 发送短信验证码
export const getsmsCode = (params) =>
request({
url: `/users/sendCode`,
method: 'post',
params
})
// 验证码效验
export const checksmsCode = (params) =>
request({
url: `/users/verifyCode`,
method: 'post',
params
})
// 绑定手机号
export const bindPhone = (params) =>
request({
url: `/users/editPhone`,
method: 'put',
params
})
// 修改密码
export const changePass = (params) =>
request({
url: `/users/editPassword`,
method: 'put',
params
})
// 获取用户信息
export const getUserInfo = (params) =>
request({
url: `/users`,
method: 'get',
params
})
// 我的相关接口研发
// 车辆信息
export const getCarInfo = (params) =>
request({
url: `/users/truck`,
method: 'get',
params
})
// 任务数据
export const getTaskData = (params) =>
request({
url: `/users/taskReport`,
method: 'get',
params
})
// 修改手机号
export const uptPhone = (params) =>
request({
url: `/users/editPhone`,
method: 'put',
params
})
// 修改密码
export const uptPassword = (params) =>
request({
url: `/users/editPassword`,
method: 'put',
params
})

53
project-wl-siji-uniapp-vue3/pages/index/components/DetailsBaseInfo.vue Normal file
View File

@@ -0,0 +1,53 @@
<!-- 基本信息 - 已完成详情、在途详情、待提货详情 -->
<template>
<view class="">
<view class="baseInfo">
<view class="addrCont">
<view class="startAddr">{{itemData.startAddress}}</view>
<view class="endAddr">{{itemData.endAddress}}</view>
</view>
<view class="carInfo">
<view class="line"> <text>任务编号</text> <text class="ritEl">{{itemData.transportTaskId}}</text> </view>
<view class="line"> <text>联系人</text> <text class="ritEl">{{itemData.startHandover}}</text> </view>
<view class="line">
<text>联系电话</text>
<view class="phoneCont">
<text class="ritEl">{{itemData.startHandoverPhone}}</text>
<image @click="callPhone(itemData.startHandoverPhone)" class="phone" src="../../../static/sj_phone.png" mode=""></image>
</view>
</view>
<view class="line"> <text>提货时间</text> <text class="ritEl">{{itemData.planDepartureTime}}</text> </view>
<view class="line"> <text>预计送达时间</text> <text class="ritEl">{{itemData.planArrivalTime}}</text> </view>
</view>
</view>
</view>
</template>
<script setup >
// 获取父组件值、方法
const props = defineProps({
itemData: {
type: Object,
default: () => {}
}
});
// 拨打电话
const callPhone = (phone) => {
uni.makePhoneCall({
phoneNumber: phone
});
}
</script>
<style src="../index.scss" lang="scss"></style>
<style lang="scss">
.phoneCont{
display: flex;
align-items: center;
.phone{
position: relative;
padding-left: 10rpx;
top: -4rpx;
width: 48rpx;
height: 48rpx;
}
}
</style>

190
project-wl-siji-uniapp-vue3/pages/index/components/ItemList.vue Normal file
View File

@@ -0,0 +1,190 @@
<!-- 任务首页-包含待提货、在途、已完成 -->
<template>
<view class="">
<scroll-view scroll-x="true" class="tabScroll" :scroll-into-view="scrollinto" :scroll-with-animation="true">
<view v-for="(item, index) in tabBars" :key="index" :id="'tab' + index" class="scroll-row-item" @click="changeTab(index)">
<view :class="tabIndex == index ? 'scroll-row-item-act' : ''">
<text class="line"></text>
{{ item }}
</view>
</view>
</scroll-view>
<!-- 已完成页面 搜索框 - start -->
<view class="searchCont" v-if="tabIndex == 2">
<SearchInput inputKey="orderId" @searchHandle="searchHandle" ></SearchInput>
<view class="timeSearch">
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" rangeSeparator="至" />
<view v-show="!isSearch" class="searchBut" @click="searchHandle('time')">
<text class="button min" >筛选</text>
</view>
<view v-show="isSearch" class="searchBut">
<text class="button buttonDis1 min">筛选</text>
</view>
</view>
</view>
<!-- 已完成页面 搜索框 - end -->
<!-- 滑块内容 对应的是顶部选项卡的切换 :current="tabIndex" 设置的是y方向上可以滚动-->
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="swiperH" :class="{finshSwiperH: tabIndex == 2}" @scrolltolower="scrolltoupperHandle" :lower-threshold="10">
<view class="marg" v-if="itemData.length > 0">
<!-- 通用卡片组件 - 待提货、在途 -->
<Card v-for="(item, index) in itemData" :data="item" :src="filterUrl(item)" :key="item.id" :type="tabIndex" />
</view>
<!-- 无数据显示 -->
<view v-if="itemData.length === 0 && !loading">
<EmptyPage :emptyInfo="emptyInfo" />
</view>
<!-- end -->
<!-- 下拉加载更多Lodding -->
<view v-if="loading">
<uni-load-more :status="moreStatus" />
</view>
<!-- end -->
</scroll-view>
</view>
</view>
</template>
<script setup >
import { ref, reactive, onMounted, watchEffect, provide } from 'vue';
import { useStore } from 'vuex';
// 组件
import Card from '@/components/Card/index.vue'
// 取件信息
import EmptyPage from '@/components/EmptyPage/index.vue';
// searchInput
import SearchInput from '@/components/SearchInput/index.vue';
// 获取父组件值、方法
const props = defineProps({
itemData: {
type: Array,
default: () => []
},
moreStatus:{
type: String,
default: 'loading'
},
loading:{
type: Boolean,
default: false
}
});
// ------定义变量------
const scrollinto = ref('tab0'); //tab切换
const store = useStore();
const tabIndex = ref(store.state.taskStatus); //当前tab
const scrollH = ref(0); //滚动高度
const emptyInfo = ref('未找到相关任务');
const tabBars = reactive(['待提货', '在途', '已完成']);
const emit = defineEmits(['setTabIndex','searchSubmit']);
const page = ref();
const pageSize = ref();
const taskId = ref(''); // 任务ID
const isSearch = ref(true) // 搜索是否可点
const range = ref() // 日期选择
const orderId = ref('') // 搜索
// 将对应Id 做provide处理 方便后面使用
provide('taskId', taskId)
// ------生命周期------
onMounted(() => {
// 获取屏幕信息
uni.getSystemInfo({
success: function(res) {
// 获取元素信息
let info = uni.createSelectorQuery().select('.swiperH');
info
.boundingClientRect(function(data) {
//data - 各种参数
scrollH.value = data.height + 140;
})
.exec();
}
});
});
// 监听日期变更 调试是否可筛选状态
watchEffect(() => {
if (range.value){
isSearch.value = false
}
})
// ------定义方法------
// 卡片点击去往对应详情的url 处理
const filterUrl = (item) => {
let src = ''
if (tabIndex.value == 0){
src = `/pages/index/details?id=${item.id}`
} else {
switch (Number(item.status)){
case 1: // 待提货
src = `/pages/index/details?id=${item.id}`
break;
case 2: // 在途
src = `/pages/index/detailsRoad?id=${item.id}`
break;
case 4: // 已交付
src = `/pages/index/refister?id=${item.transportTaskId}&time=${item.actualDepartureTime}`
break;
case 6: // 已完成（已等级）- 交付之后需要回车等记
src = `/pages/index/detailsSuccess?id=${item.id}`
break;
default: // 3 改派 、5 作废
src = ``
break;
}
}
return src
}
// 搜索按钮
function searchHandle(type){
const params = type == 'time' ? range : type
emit('searchSubmit', params)
}
// 上拉刷新
function scrolltoupperHandle(){
emit('setTabIndex', tabIndex.value)
}
// tab选项卡切换轮播
const changeTab = index => {
// 点击的还是当前数据的时候直接return
if (tabIndex.value == index) {
return;
}
tabIndex.value = index;
emit('setTabIndex', index)
// 滑动
// scrollinto.value = 'tab' + index;
};
//
function maskClick(time){
console.log(time)
}
</script>
<style src="../index.scss" lang="scss"></style>
<style lang="scss">
.searchCont{
background-color: #fff;
padding: 0rpx 30rpx 30rpx 30rpx;
.searchBut{
width: 180rpx;
margin-left: 40rpx;
}
.timeSearch{
display: flex;
padding-top: 20rpx;
}
::v-deep .uniui-clear::before{
display: none;
}
::v-deep .uni-input-wrapper{
background-color: #f4f4f4;
}
}
</style>

55
project-wl-siji-uniapp-vue3/pages/index/components/OrderCont.vue Normal file
View File

@@ -0,0 +1,55 @@
<!-- 订单列表 - 已完成、待提货、在途的详情页面中使用 -->
<template>
<view class="orderCont">
<view class="search">
<uni-icons class="searchIcon" @click="search()" type="search"></uni-icons>
<input type="text" class="searchInput" @input="onKeyInput" @confirm="search" confirm-type="search" placeholder="请输入运单号" />
</view>
<view class="items">
<view class="item" v-for="item in itemData">
<text class="odd">{{item.id}}</text>
<text class="piece">{{item.count}} 件</text>
<text class="weight">{{item.totalWeight}} kg</text>
</view>
</view>
</view>
</template>
<script setup >
import { ref } from 'vue'
// 获取父组件值、方法
const props = defineProps({
itemData: {
type: Object,
default: () => {}
},
searchHandle: {
type: Function(),
default: () => {}
}
});
const emit = defineEmits(['searchHandle']);
// 订单号
const orderId = ref('')
// 搜索按钮
const search = ()=>{
if(orderId.value == ''){
uni.showToast({
title: '请输入运单号',
duration: 1000,
icon: 'none'
});
return
}
emit('searchHandle', orderId.value)
}
// 输入值记录到orderId
const onKeyInput = (event) => {
orderId.value = event.detail.value
}
</script>
<style src="../index.scss" lang="scss"></style>

42
project-wl-siji-uniapp-vue3/pages/index/components/RouteCont.vue Normal file
View File

@@ -0,0 +1,42 @@
<!-- 运算路线 -->
<template>
<view class="routeItem" >
<view class="routeLine">
<view class="routePoint">
<view class="tit"> <text>{{itemData.startProvince}}</text> </view>
<view class=""> <text>{{itemData.startCity}}</text> </view>
</view>
<view class="route">
<view class="line" style="">
<image class="LineImg" src="../../../static/sj_route_line.png" mode=""></image>
</view>
</view>
<view class="routePoint">
<view class="tit"> <text>{{itemData.endProvince}}</text> </view>
<view class=""> <text>{{itemData.endCity}}</text> </view>
</view>
</view>
<view class="navigat" v-if="type == 'navigation'">
<image class="naviIcon" src="../../../static/sj_navigation.png" mode=""></image>
<view class="" @click="() => openMap(itemData.startAddress,itemData.endAddress, '开始导航')">
<text>开始导航</text>
</view>
</view>
</view>
</template>
<script setup >
import { openMap } from '@/utils/index.js'
// 获取父组件值、方法
const props = defineProps({
type: {
type: String,
default: 'navigation'
},
itemData: {
type: Object,
default: () => {}
}
});
</script>
<style src="../index.scss" lang="scss"></style>

71
project-wl-siji-uniapp-vue3/pages/index/components/refisterCards.vue Normal file
View File

@@ -0,0 +1,71 @@
<!-- 单选按钮组件 - 回车登记页面使用 -->
<template>
<view class="refisterCards">
<view class="title">
{{data.title}}
</view>
<view class="items">
<view class="item" v-for="(item, index) in data.data" :key="index" @click="activeHandel(item, index)">
<view :class="{buttonDel: true, buttonAct: actVal == item}">
<text>{{item}}</text>
</view>
</view>
<!-- 布局填充用 -->
<view v-if="data.data.length % 3 == 1 || data.data.length % 3 == 2" class="item"></view>
<view v-if="data.data.length % 3 == 1" class="item"></view>
</view>
</view>
</template>
<script setup >
import {ref} from 'vue'
// 获取父组件值、方法
const props = defineProps({
// 展示源数据
data: {
type: Object,
default: () => {}
},
// 设置默认值
value: {
type: String,
default: ''
},
// 选择数据的key
choiceKey: {
type: String,
default: ''
}
});
const emit = defineEmits(['choiceHandel'])
// 标记选择项
let actVal = ref(props.value)
// 点击选中
function activeHandel(val, index){
actVal.value = val
const param = {key: props.choiceKey, value:index+1, keyInt:val}
emit('choiceHandel', param)
}
</script>
<style lang="scss">
.refisterCards{
.title{
color: #2A2929;
margin-bottom: 30rpx;
}
.items{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.item{
width: 29.5%;
padding-bottom: 30rpx;
}
}
}
</style>

191
project-wl-siji-uniapp-vue3/pages/index/delayed.vue Normal file
View File

@@ -0,0 +1,191 @@
<!-- 延迟交货 -->
<template>
<!-- end -->
<view class="pageBox">
<!-- title -->
<DetailsNav title="延迟提货"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<view class="delayedCont">
<view class="lineBoder">
<text>原定时间</text>
<text class="label">{{ orgTime }}</text>
</view>
<view class="lineBoder">
<text>延迟时间</text>
<picker
mode="time"
:value="time"
start="09:01"
end="21:01"
@change="bindTimeChange"
>
<view class="uni-input timeInfo">
<text>{{ time }}</text>
<image
class="iconImg"
src="../../static/sj_open_rit.png"
mode=""
></image>
</view>
</picker>
</view>
<view class="">
<textarea
class="textInput"
v-model="formData.delayReason"
placeholder-style="color:#818181"
placeholder="请输入延迟提货原因"
/>
</view>
<view class="butCont">
<text
class="button buttonDis1"
v-show="formData.delayReason == '' || time == '不可超过两小时'"
>提交</text
>
<text
class="button"
v-show="formData.delayReason != '' && time != '不可超过两小时'"
@click="formActioin()"
>提交</text
>
</view>
</view>
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 导入接口
import { PutDelay } from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue';
// 主体部分
// ------定义变量------
const orgTime = ref(); // 原定提货时间
const time = ref('不可超过两小时');
// 提交数据
const formData = ref({
id: '',
delayTime: '',
delayReason: '',
});
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
orgTime.value = currentPage.time;
formData.value.id = currentPage.id;
});
// ------定义方法------
const bindTimeChange = (e) => {
time.value = e.detail.value;
};
// 延迟提货提交
const formActioin = async () => {
const data = formData.value;
// 延迟时间必选
if (time.value == '不可超过两小时') {
uni.showToast({
title: '请选择延迟时间！',
duration: 1000,
icon: 'none',
});
return;
}
// 请填写延迟提货原因
if (data.delayReason.trim() == '') {
uni.showToast({
title: '请填写延迟提货原因！',
duration: 1000,
icon: 'none',
});
return;
}
// 网络慢的时候添加按钮loading
let times = setTimeout(() => {
uni.showLoading({
title: 'loading',
mask:true
});
}, 500);
// 原始时间
const lastTime = orgTime.value;
// 替换处理 延迟的实际时间
data.delayTime = lastTime.replace(/(\d+){2}(:\d+){1}/, time.value);
// 延迟提货
await PutDelay(formData.value)
.then((res) => {
if (res.code === 200) {
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times);
uni.showToast({
title: '延迟提货提交成功',
duration: 1000,
icon: 'none',
});
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/index',
});
}, 500);
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
</script>
<style lang="scss">
@import url('@/styles/theme.scss');
.delayedCont {
background-color: var(--neutral-color-white);
margin: 30rpx;
padding: 30rpx 30rpx 40rpx 30rpx;
border-radius: 20rpx;
font-size: var(--font-size-14);
.lineBoder {
display: flex;
justify-content: space-between;
padding: 40rpx 0;
border-bottom: solid 1px var(--neutral-color-cancel);
.label {
color: var(--neutral-color-font);
}
}
.textInput {
font-size: var(--font-size-14);
background-color: var(--neutral-color-cancel);
width: 100%;
border-radius: 20rpx;
margin-top: 40rpx;
padding: 30rpx;
box-sizing: border-box;
}
.butCont {
width: 60%;
margin: 40rpx auto 0 auto;
}
.timeInfo {
display: flex;
line-height: 48rpx;
.iconImg {
width: 48rpx;
height: 48rpx;
}
}
}
</style>

338
project-wl-siji-uniapp-vue3/pages/index/details.vue Normal file
View File

@@ -0,0 +1,338 @@
<!-- 待提货 - 详情 -->
<template>
<!-- 详情 -->
<view class="details">
<DetailsNav title="任务详情"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="swiperH">
<view class="cont" v-if="Object.keys(itemData).length > 0">
<!-- 通用卡片组件 - 待提货 - 带开关 -->
<CardCont title="基本信息" :open="true">
<DetailsBaseInfo :itemData="itemData"></DetailsBaseInfo>
</CardCont>
<CardCont title="车辆司机信息">
<view class="carInfo">
<view class="line">
<text class="tit">车牌号</text>
<text class="ritEl">{{ itemData.licensePlate }}</text>
</view>
<view class="line">
<text class="tit">司机姓名</text>
<text class="ritEl">{{ itemData.driverName }}</text>
</view>
</view>
</CardCont>
<CardCont title="运输路线">
<RouteCont :itemData="itemData" type="route"></RouteCont>
</CardCont>
<CardCont title="物品信息" :label="`共计: ${amount}单`">
<OrderCont
:itemData="orders"
@searchHandle="searchHandle"
></OrderCont>
</CardCont>
<CardCont title="提货信息">
<view class="upPicCont">
<view class="title">请拍照上传回单凭证</view>
<uni-file-picker
v-model="cargoPickUpPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="selectA"
/>
</view>
<view class="upPicCont">
<view class="title">请拍照上传货品照片</view>
<uni-file-picker
v-model="cargoPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="selectB"
/>
</view>
</CardCont>
</view>
<!-- 无数据显示 -->
<view v-if="Object.keys(itemData).length === 0">
<EmptyPage emptyInfo="暂无数据!" />
</view>
<!-- end -->
</scroll-view>
</view>
<!-- end -->
</view>
<!-- footer -->
<view class="footCont">
<view class="footButCan">
<text class="buttonCancel" @click="delayedHandle()">延迟提货</text>
</view>
<view class="footBut">
<text v-show="isTake" class="button" @click="takeGoods()">提货</text>
<text v-show="!isTake" class="buttonDis1">提货</text>
</view>
</view>
<!-- end -->
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUpdated,
watch,
watchEffect,
computed,
inject,
} from 'vue';
import { useStore } from 'vuex';
import { positionUploadHandle } from '@/utils/index.js';
// 导入接口
import {
GetTaskDetails,
GetTaskDetailsOrders,
TakeDelivery,
} from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue';
import EmptyPage from '@/components/EmptyPage/index.vue';
import DetailsBaseInfo from './components/DetailsBaseInfo.vue';
import OrderCont from './components/OrderCont.vue';
import RouteCont from './components/RouteCont.vue';
// 主体部分
import CardCont from '@/components/CardCont/index.vue';
// 接口调用
import { upload } from '@/pages/api/index.js';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const itemData = ref([]);
const orders = ref([]); // 货物信息列表
const amount = ref(0); // 货物信息总数
const id = ref(''); // 任务Id
const cargoPickUpPicture = ref([]); // 提货凭证
const cargoPicture = ref([]); // 货物照片
const isTake = ref(true); // 是否可提货
const taskId = ref('');
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
id.value = currentPage.id;
getDetailsInfo();
});
// 监听是否可以提货
watchEffect(
[
cargoPickUpPicture,
() => {
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
},
],
[
cargoPicture,
() => {
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
},
]
);
// ------定义方法------
// 获取任务详情的数据
const getDetailsInfo = async () => {
// 获取任务详情的数据
await GetTaskDetails(id.value)
.then((res) => {
const { data } = res;
if (res.code === 200) {
itemData.value = data;
getOrders(data.transportTaskId);
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 获取物品订单信息
const getOrders = async (orderId, transportOrderId = '') => {
const params = {
transportOrderId,
taskId: orderId,
page: 1,
pageSize: 100,
};
await GetTaskDetailsOrders(params)
.then((res) => {
if (res.code === 200) {
amount.value = res.data.counts ? res.data.counts : 0;
orders.value = res.data.items;
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 物品信息搜索
function searchHandle(transportOrderId) {
getOrders(itemData.value.transportTaskId, transportOrderId);
}
// 延迟提货
function delayedHandle() {
const data = itemData.value;
uni.navigateTo({
url: `/pages/index/delayed?id=${data.id}&time=${data.planDepartureTime}`,
});
}
// 提货
async function takeGoods() {
const cargoPickUpPictureStr = cargoPickUpPicture.value
.map((n) => n.path)
.join();
const cargoPictureStr = cargoPicture.value.map((n) => n.path).join();
const params = {
id: id.value,
cargoPickUpPicture: cargoPickUpPictureStr,
cargoPicture: cargoPictureStr,
};
// 网络慢的时候添加按钮loading
let times = setTimeout(() => {
uni.showLoading({
title: 'loading',
mask:true
});
}, 500);
await TakeDelivery(params)
.then((res) => {
if (res.code === 200) {
// 提货之后上报位置
positionUploadHandle(true);
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times);
uni.showToast({
title: '提货完成',
duration: 1000,
icon: 'none',
});
uni.redirectTo({
url: '/pages/index/index',
});
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
}
// 文件上传
async function uploadHande(e, type) {
await upload(e)
.then((res) => {
if (res.code === 200) {
if (res.data) {
isTake.value = true;
const name = res.data.split('/')[res.data.split('/').length - 1]; // .at(-1) 新语法APP不支持
let data = {
url: res.data,
name,
extName: name.split('.')[name.split('.').length - 1],
};
if (type == 'cargoPickUpPicture') {
cargoPickUpPicture.value = [...cargoPickUpPicture.value, data];
} else {
cargoPicture.value = [...cargoPicture.value, data];
}
}
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {
uni.showToast({
title: '图片上传失败！请联系管理员',
duration: 1000,
icon: 'none',
});
});
}
// 文件选择并上传 - 回单凭证上传
async function selectA(e) {
cargoPickUpPicture.value = [];
const tempFiles = e.tempFiles[0];
if (
tempFiles.size < 1024 * 5 * 1024 &&
(tempFiles.extname == 'png' ||
tempFiles.extname == 'jpg' ||
tempFiles.extname == 'jpeg' ||
tempFiles.extname == 'gif')
) {
uploadHande(e, 'cargoPickUpPicture');
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none',
});
}
}
// 文件选择并上传 - 货品照片上传
async function selectB(e) {
cargoPicture.value = [];
const tempFiles = e.tempFiles[0];
if (
tempFiles.size < 1024 * 5 * 1024 &&
(tempFiles.extname == 'png' ||
tempFiles.extname == 'jpg' ||
tempFiles.extname == 'jpeg' ||
tempFiles.extname == 'gif')
) {
uploadHande(e, 'cargoPicture');
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none',
});
}
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss" scoped>
.details {
height: calc(100vh - 120rpx);
.swiperH {
height: calc(100vh - 210rpx);
padding-bottom: 26rpx;
}
}
</style>

378
project-wl-siji-uniapp-vue3/pages/index/detailsRoad.vue Normal file
View File

@@ -0,0 +1,378 @@
<!-- 在途 - 详情 -->
<template>
<!-- 详情 -->
<view class="details">
<DetailsNav title="任务详情"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="swiperH">
<view class="cont" v-if="Object.keys(itemData).length > 0">
<!-- 通用卡片组件 - 在途 - 带开关 -->
<CardCont title="基本信息" :open="true">
<DetailsBaseInfo :itemData="itemData"></DetailsBaseInfo>
</CardCont>
<!-- 司机信息 -->
<CardCont title="车辆司机信息">
<view class="carInfo">
<view class="line">
<text class="tit">车牌号</text>
<text class="ritEl">{{ itemData.licensePlate }}</text>
</view>
<view class="line">
<text class="tit">司机姓名</text>
<text class="ritEl">{{ itemData.driverName }}</text>
</view>
</view>
</CardCont>
<CardCont title="运输路线">
<RouteCont :itemData="itemData"></RouteCont>
</CardCont>
<!-- 物品信息 -->
<CardCont title="物品信息" :label="`共计: ${amount}单`">
<OrderCont
:itemData="orders"
@searchHandle="searchHandle"
></OrderCont>
</CardCont>
<!-- 异常信息 -->
<CardCont title="异常信息">
<view v-for="(item, index) in itemData.exception" :key="index">
<view class="delay">
<view class="info">
<view class="line">
<text>上报时间 </text
><text class="desc"> {{ item.exceptionTime }} </text>
</view>
<view class="line">
<text>异常类型 </text
><text class="desc"> {{ item.exceptionType }} </text>
</view>
<view class="line">
<text>继续运输 </text
><text class="desc"> {{ item.processResults }} </text>
</view>
</view>
<image
@click="ExceptionHandle('?id=' + item.exceptionId)"
class="goInfoIcon"
src="../../static/sj_open_rit.png"
mode=""
></image>
</view>
</view>
</CardCont>
<!-- 交货信息 -->
<CardCont title="交货信息">
<view class="upPicCont">
<view class="title">请拍照上传回单凭证</view>
<uni-file-picker
v-model="cargoPickUpPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="selectA"
/>
</view>
<view class="upPicCont">
<view class="title">请拍照上传货品照片</view>
<uni-file-picker
v-model="cargoPicture"
fileMediatype="image"
mode="grid"
limit="3"
@select="selectB"
/>
</view>
</CardCont>
</view>
<!-- 无数据显示 -->
<view v-if="Object.keys(itemData).length === 0">
<EmptyPage emptyInfo="暂无数据!" />
</view>
<!-- end -->
</scroll-view>
</view>
<!-- end -->
</view>
<!-- footer -->
<view class="footCont">
<view class="footButCan">
<text class="buttonCancel" @click="ExceptionHandle()">上报异常</text>
</view>
<view class="footBut">
<text v-show="isTake" class="button" @click="takeGoods()">交付</text>
<text v-show="!isTake" class="buttonDis1">交付</text>
</view>
</view>
<!-- end -->
</template>
<script>
export default {
mounted() {
// #ifdef APP-NVUE
const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
// #endif
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.emit('acceptDataFromOpenedPage', {
data: 'data from test page',
});
eventChannel.emit('someEvent', {
data: 'data from test page for someEvent',
});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage');
},
};
</script>
<script setup>
import { ref, reactive, onMounted, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { positionUploadHandle } from '@/utils/index.js';
// 导入接口
import {
GetTaskDetails,
GetTaskDetailsOrders,
Deliver,
} from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue';
import EmptyPage from '@/components/EmptyPage/index.vue';
import DetailsBaseInfo from './components/DetailsBaseInfo.vue';
import OrderCont from './components/OrderCont.vue';
import RouteCont from './components/RouteCont.vue';
// 接口调用
import { upload } from '@/pages/api/index.js';
// 主体部分
import CardCont from '@/components/CardCont/index.vue';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const itemData = ref([]);
const orders = ref([]); // 货物信息列表
const amount = ref(0); // 货物信息总数
const id = ref(''); // 任务Id
const cargoPickUpPicture = ref([]); // 提货凭证
const cargoPicture = ref([]); // 货物照片
const isTake = ref(false);
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
id.value = currentPage.id;
getDetailsInfo();
getOrders();
});
// 监听是否可以提货
watchEffect(
[
cargoPickUpPicture,
() => {
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
},
],
[
cargoPicture,
() => {
isTake.value = cargoPickUpPicture.length > 0 && cargoPicture.length > 0;
},
]
);
// ------定义方法------
// 获取任务详情的数据
const getDetailsInfo = async () => {
// 获取任务详情的数据
await GetTaskDetails(id.value)
.then((res) => {
const { data } = res;
if (res.code === 200) {
itemData.value = data;
getOrders(data.transportTaskId);
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 获取物品订单信息
const getOrders = async (orderId, transportOrderId = '') => {
const params = {
transportOrderId,
taskId: orderId,
page: 1,
pageSize: 100,
};
await GetTaskDetailsOrders(params)
.then((res) => {
if (res.code === 200) {
amount.value = res.data.counts ? res.data.counts : 0;
orders.value = res.data.items;
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 物品信息搜索
function searchHandle(transportOrderId) {
getOrders(itemData.value.transportTaskId, transportOrderId);
}
// 上报异常 、异常详情
function ExceptionHandle(src) {
uni.showToast({
title: '上报异常暂时接口还在实现中！',
duration: 1000,
icon: 'none',
});
return false;
const url = src ? `/pages/index/exception${src}` : '/pages/index/exception';
uni.navigateTo({ url });
}
// 交付
async function takeGoods() {
const cargoPickUpPictureStr = cargoPickUpPicture.value
.map((n) => n.path)
.join();
const cargoPictureStr = cargoPicture.value.map((n) => n.path).join();
const params = {
id: id.value,
transportCertificate: cargoPickUpPictureStr,
deliverPicture: cargoPictureStr,
};
// 网络慢的时候添加按钮loading
let times = setTimeout(() => {
uni.showLoading({
title: 'loading',
mask:true
});
}, 500);
await Deliver(params)
.then((res) => {
if (res.code === 200) {
// 交付之后 上报位置
positionUploadHandle(true);
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times);
uni.showToast({
title: '提货完成',
duration: 1000,
icon: 'none',
});
uni.redirectTo({
url: '/pages/index/index',
});
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
}
// 图片上传
const imageValue = ref([]);
const upImg = ref(null);
// 文件上传
async function uploadHande(e, type) {
await upload(e)
.then((res) => {
if (res.code === 200) {
if (res.data) {
isTake.value = true;
const name = res.data.split('/')[res.data.split('/').length - 1]; // .at(-1) 新语法APP不支持
let data = {
url: res.data,
name,
extName: name.split('.')[name.split('.').length - 1],
};
if (type == 'cargoPickUpPicture') {
cargoPickUpPicture.value = [...cargoPickUpPicture.value, data];
} else {
cargoPicture.value = [...cargoPicture.value, data];
}
}
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {
uni.showToast({
title: '图片上传失败！请联系管理员',
duration: 1000,
icon: 'none',
});
});
}
// 文件选择并上传 - 回单凭证上传
async function selectA(e) {
cargoPickUpPicture.value = [];
const tempFiles = e.tempFiles[0];
if (
tempFiles.size < 1024 * 5 * 1024 &&
(tempFiles.extname == 'png' ||
tempFiles.extname == 'jpg' ||
tempFiles.extname == 'jpeg' ||
tempFiles.extname == 'gif')
) {
uploadHande(e, 'cargoPickUpPicture');
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none',
});
}
}
// 文件选择并上传 - 货品照片上传
async function selectB(e) {
cargoPicture.value = [];
const tempFiles = e.tempFiles[0];
if (
tempFiles.size < 1024 * 5 * 1024 &&
(tempFiles.extname == 'png' ||
tempFiles.extname == 'jpg' ||
tempFiles.extname == 'jpeg' ||
tempFiles.extname == 'gif')
) {
uploadHande(e, 'cargoPicture');
} else {
uni.showToast({
title: '上传图片大小不能超过5M，格式需为jpg、png、gif',
duration: 2000,
icon: 'none',
});
}
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss" scoped>
.details {
height: calc(100vh - 120rpx);
.swiperH {
height: calc(100vh - 240rpx);
padding-bottom: 26rpx;
}
}
</style>

189
project-wl-siji-uniapp-vue3/pages/index/detailsSuccess.vue Normal file
View File

@@ -0,0 +1,189 @@
<!-- 已完成 - 详情 -->
<template>
<!-- 详情 -->
<view class="details">
<DetailsNav title="任务详情"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="successSwiperH">
<view class="cont" v-if="Object.keys(itemData).length > 0">
<!-- 通用卡片组件 - 待提货 - 带开关 -->
<CardCont title="基本信息" :open="true">
<DetailsBaseInfo :itemData="itemData"></DetailsBaseInfo>
</CardCont>
<CardCont title="车辆司机信息">
<view class="carInfo">
<view class="line"> <text class="tit">车牌号</text> <text class="ritEl">{{itemData.licensePlate}}</text>
</view>
<view class="line"> <text class="tit">司机姓名</text> <text class="ritEl">{{itemData.driverName}}</text>
</view>
</view>
</CardCont>
<CardCont title="运输路线">
<RouteCont :itemData="itemData" type="route"></RouteCont>
</CardCont>
<CardCont title="物品信息" :label="`共计: ${amount}单`">
<OrderCont :itemData="orders" @searchHandle="searchHandle"></OrderCont>
</CardCont>
<CardCont title="提货凭证">
<view class="upPicCont">
<div class="tit">回单凭证</div>
<view class="upPicContImg">
<img class="image" v-for="item in itemData.cargoPickUpPicture" :src="item" alt="" srcset="">
</view>
</view>
<view class="upPicCont">
<div class="tit">提货照片</div>
<view class="upPicContImg">
<img class="image" v-for="item in itemData.cargoPicture" :src="item" alt="" srcset="">
</view>
</view>
</CardCont>
<CardCont title="交货信息">
<view class="upPicCont">
<div class="tit">回单凭证</div>
<view class="upPicContImg">
<img class="image" v-for="item in itemData.deliverPicture" :src="item" alt="" srcset="">
</view>
</view>
<view class="upPicCont">
<div class="tit">货品照片</div>
<view class="upPicContImg">
<img class="image" v-for="item in itemData.transportCertificate" :src="item" alt="" srcset="">
</view>
</view>
</CardCont>
<CardCont title="异常信息">
</CardCont>
</view>
<!-- 无数据显示 -->
<view v-if="Object.keys(itemData).length === 0">
<EmptyPage emptyInfo="暂无数据!" />
</view>
<!-- end -->
</scroll-view>
</view>
<!-- end -->
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onUpdated,
watch,
watchEffect,
computed,
inject
} from 'vue';
import {
useStore
} from 'vuex';
// 导入接口
import {
GetTaskDetails,
GetTaskDetailsOrders,
TakeDelivery
} from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue'
import EmptyPage from '@/components/EmptyPage/index.vue'
import DetailsBaseInfo from './components/DetailsBaseInfo.vue'
import OrderCont from './components/OrderCont.vue'
import RouteCont from './components/RouteCont.vue'
// 主体部分
import CardCont from '@/components/CardCont/index.vue';
// 接口调用
import {
upload
} from '@/pages/api/index.js'
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const itemData = ref({});
const orders = ref([]); // 货物信息列表
const amount = ref(0); // 货物信息总数
const id = ref('') // 任务Id
const cargoPickUpPicture = ref([]) // 提货凭证
const cargoPicture = ref([]) // 货物照片
const isTake = ref(true) // 是否可提货
const taskId = ref('')
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
id.value = currentPage.id;
getDetailsInfo();
});
// ------定义方法------
// 获取任务详情的数据
const getDetailsInfo = async () => {
// 获取任务详情的数据
await GetTaskDetails(id.value)
.then(res => {
const {
data
} = res
if (res.code === 200) {
itemData.value = data
getOrders(data.transportTaskId)
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
};
// 获取物品订单信息
const getOrders = async (orderId, transportOrderId='' ) => {
const params = {
transportOrderId,
taskId: orderId,
page: 1,
pageSize: 100
}
await GetTaskDetailsOrders(params)
.then(res => {
if (res.code === 200) {
amount.value = res.data.counts ? res.data.counts : 0
orders.value = res.data.items
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 物品信息搜索
function searchHandle(transportOrderId) {
getOrders(itemData.value.transportTaskId, transportOrderId)
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss" scoped>
.details {
.successSwiperH {
height: calc(100vh - 160rpx);
padding-bottom: 26rpx;
}
}
</style>

279
project-wl-siji-uniapp-vue3/pages/index/exception.vue Normal file
View File

@@ -0,0 +1,279 @@
<!-- 上报异常 -->
<template>
<!-- end -->
<view class="pageBox">
<!-- title -->
<DetailsNav :title="title"></DetailsNav>
<!-- 取件状态列表 -->
<view class="container">
<view class="delayedCont">
<view class="lineBoder">
<text>异常时间</text>
<text v-if="type == 'details'">{{ exceptionsDeta.time }}</text>
<!-- <text v-else class="label">请选择</text> -->
<uni-datetime-picker
v-else
type="datetime"
v-model="exceptionsDeta.time"
:clear-icon="false"
/>
</view>
<view class="lineBoder">
<text>上报位置</text>
<text v-if="type == 'details'">{{ exceptionsDeta.province }}</text>
<text v-else class="label">请选择</text>
</view>
<view class="lineBoder">
<text>异常类型</text>
<text v-if="type == 'details'">{{ exceptionsDeta.type }}</text>
<view v-else class="label">
<Select :options="typeOptions"></Select>
</view>
</view>
<view v-if="type == 'details'" class="lineBoder noborder">
<view class="" style="width: 100%">
<view>
<text>异常描述</text>
</view>
<view>
<text class="desc">{{ exceptionsDeta.description }}</text>
</view>
</view>
</view>
<view v-else class="lineBoder">
<view class="" style="width: 100%">
<text>异常描述</text>
<textarea
class="textInput"
v-model="formData.delayReason"
placeholder-style="color:#818181"
placeholder="请输入异常描述"
/>
</view>
</view>
</view>
<view class="delayedCont">
<view :class="{ upPicCont: true, setBottom: type == 'details' }">
<view class="title">上传图片（最多6张）</view>
<view v-if="type == 'details'" class="exceptionImages">
<image
class="exceptionImage"
v-for="(item, index) in exceptionsDeta.images"
:src="item"
key="index"
mode=""
></image>
</view>
<uni-file-picker
v-else
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
@progress="progress"
@success="success"
@fail="fail"
/>
</view>
</view>
</view>
<!-- end -->
<view class="footCont positionBot" style="justify-content: center">
<view class="footBut" style="width: 400rpx; flex: initial">
<text class="button" @click="exceptionHandle()">提交</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
// 导入接口
import { Exception, ExceptionDetails } from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue';
import Select from '@/components/Select/index.vue';
// 主体部分
// ------定义变量------
const imageValue = ref([]); // 上次图片
const type = ref('add'); // 类型
const title = ref('上报异常'); // 标题
const exceptionId = ref(''); // 异常的id - 详情
const exceptionsDeta = ref({});
// 类型
const typeOptions = [
{ title: '发动机启动困难', value: '1' },
{ title: '不着车，漏油', value: '2' },
{ title: '照明失灵', value: '3' },
{ title: '有异常响动', value: '4' },
{ title: '排烟异常、温度异常', value: '5' },
{ title: '其他问题', value: '6' },
];
// 提交数据
const formData = ref({
id: '',
delayTime: '',
delayReason: '',
});
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
if (Object.keys(currentPage).length > 0) {
type.value = 'details';
title.value = '异常详情';
exceptionId.value = currentPage.exceptionId;
getDetails();
} else {
type.value = 'add';
title.value = '上报异常';
}
});
// ------定义方法------
// 上报异常
const exceptionHandle = async () => {
// 网络慢的时候添加按钮loading
let times = setTimeout(() => {
uni.showLoading({
title: 'loading',
mask:true
});
}, 500);
// 上报异常
await Exception(formData)
.then((res) => {
if (res.code === 200) {
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times);
uni.showToast({
title: '提交成功',
duration: 1000,
icon: 'none',
});
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/index',
});
}, 500);
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
};
// 获取异常详情数据
async function getDetails() {
await ExceptionDetails({ exceptionId: exceptionId })
.then((res) => {
if (res.code === 200) {
const data = res.data;
data.images = [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2411191727687.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=8fed835d7336cac9b3fedb170766a678',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB1371.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645178&t=07a6e8bcc05b75d3dd86c369c70f7274',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB2154.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=54afc59b141abad9f7799f005e20c944',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2019%2F05%2F08211345608033.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=c8a2aa7a7bd874381fbb98bc4223e6fe',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2017%2F03%2F26%2FB1365.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=55b411cc1ad4aea58cef44fe11438f72',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2019%2F04%2F07090912704156.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658645143&t=fa6d42ffb721c66f1e42548895a64e89',
];
exceptionsDeta.value = res.data;
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none',
});
}
})
.catch((err) => {});
}
// 获取上传状态
function select(e) {
console.log('选择文件：', e);
}
// 获取上传进度
function progress(e) {
console.log('上传进度：', e);
}
// 上传成功
function success(e) {
console.log('上传成功');
}
// 上传失败
function fail(e) {
console.log('上传失败：', e);
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss">
@import url('@/styles/theme.scss');
.delayedCont {
background-color: var(--neutral-color-white);
margin: 30rpx;
padding: 30rpx 30rpx 40rpx 30rpx;
border-radius: 20rpx;
font-size: var(--font-size-14);
.lineBoder {
display: flex;
justify-content: space-between;
padding: 40rpx 0;
border-bottom: solid 1px var(--neutral-color-cancel);
.label {
color: var(--neutral-color-font);
}
}
.noborder {
border: none;
}
.desc {
display: inline-block;
padding-top: 40rpx;
}
.textInput {
font-size: var(--font-size-14);
background-color: var(--neutral-color-cancel);
width: 100%;
border-radius: 20rpx;
margin-top: 40rpx;
padding: 30rpx;
box-sizing: border-box;
}
.butCont {
width: 60%;
margin: 40rpx auto 0 auto;
}
.exceptionImages {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.exceptionImage {
width: 26vw;
height: 26vw;
margin-bottom: 3vw;
}
}
.setBottom {
margin-bottom: 0;
}
::v-deep .uni-input-placeholder {
text-align: right;
}
}
.positionBot {
position: fixed;
width: 100%;
bottom: 0;
}
</style>

257
project-wl-siji-uniapp-vue3/pages/index/index.scss Normal file
View File

@@ -0,0 +1,257 @@
.container{
border-radius: 20rpx;
.swiperH{
height: calc(100vh - 270rpx);
padding-bottom: 30rpx;
box-sizing: border-box;
}
.finshSwiperH{
height: calc(100vh - 460rpx);
}
.cont{
padding:0 30rpx;
}
}
// 首页 - 通用 - 左右结构
.carInfo{
.line{
.tit{
display: inline-block;
min-width: 120rpx;
}
display: flex;
justify-content: space-between;
color: var(--neutral-color-font);
font-size: var(--font-size-14);
line-height: 60rpx;
.ritEl{
color: var(--neutral-color-main);
}
}
}
// 详情-基本信息
.baseInfo{
.addrCont{
font-weight: 400;
font-size: 28rpx;
color: var(--neutral-color-font);
letter-spacing: 0.32rpx;
padding-bottom: 40rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid var(--neutral-color-segmentation);
position: relative;
&:before{
position: absolute;
left: 18rpx;
color:var(--neutral-color-white);
text-align: center;
content: '';
display: inline-block;
width: 0px;
height: 56%;
border-left: dashed 2px var(--neutral-color-border);
border-radius: 11px;
}
.startAddr{
padding-left: 66rpx;
position: relative;
margin-bottom: 20rpx;
line-height: 44rpx;
&:before{
position: absolute;
font-size: 22rpx;
left: 0;
color:var(--neutral-color-white);
text-align: center;
content: '起';
display: inline-block;
width: 22px;
height: 22px;
background: var(--neutral-color-main);
border-radius: 11px;
}
}
.endAddr{
padding-left: 66rpx;
position: relative;
line-height: 44rpx;
&:before{
font-size: 22rpx;
position: absolute;
left: 0;
color: var(--neutral-color-white);
text-align: center;
content: '止';
display: inline-block;
width: 22px;
height: 22px;
background: var(--essential-color-red);
border-radius: 11px;
}
}
}
}
// 详情-运算路线
.routeItem{
display: flex;
justify-content: center;
align-items: center;
.navigat{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0rpx 0rpx 0rpx 40rpx;
border-left: 2rpx solid #EEEEEE;
margin-left: 20rpx;
font-size: var(--font-size-12);
.naviIcon{
width: 64rpx;
height: 64rpx;
}
}
.routeLine{
display: flex;
justify-content: space-between;
padding:0 20rpx;
flex:1;
.route{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-weight: 400;
font-size: var(--font-size-12);
color: var(--neutral-color-main);
flex: 1;
.line{
width: 80%;
.LineImg{
width: 72rpx;
height: 32rpx;
}
}
}
.routePoint{
text-align: center;
font-weight: 400;
font-size: var(--font-size-14);
color: var(--neutral-color-main);
line-height: 60rpx;
.tit{
font-weight: 600;
font-size: var(--font-size-16);
color: var(--neutral-color-main);
}
}
}
}
// 详情-物品信息
.orderCont{
.search{
margin-bottom: 20rpx;
position: relative;
.searchIcon{
position: absolute;
left: 20rpx;
top: 18rpx;
}
.searchInput{
background-color: var(--neutral-color-cancel);
border-radius: 32rpx;
font-size: var(--font-size-12);
line-height: 64rpx;
height: 64rpx;
padding: 0 20rpx 0 60rpx;
}
}
.items{
.item{
display: flex;
justify-content: space-between;
font-size: 28rpx;
line-height: 60rpx;
color: var(--neutral-color-main);
.odd{
flex: 1;
}
.piece, .weight{
text-align: right;
width: 200rpx;
}
}
}
}
// 详情-异常信息
.delay{
display: flex;
font-size: var(--font-size-14);
align-items: center;
border-bottom: solid 2rpx var(--neutral-color-background);
padding: 20rpx 0;
.info{
flex: 1;
color: var(--neutral-color-main);
.line{
line-height: 60rpx;
.desc{
padding-left: 40rpx;
color: var(--neutral-color-font);
}
}
}
.goInfoIcon{
width: 48rpx;
height: 48rpx;
}
}
// 图片上传
.upPicCont{
margin-bottom: 32rpx;
.title{
font-weight: 400;
font-size: var(--font-size-14);
color: var(--neutral-color-font);
margin-bottom: 32rpx;
}
.file-picker__box-content{
border:none;
background: var(--neutral-color-cancel);
}
// 已完成的详情图片回显
.tit{
font-size: 28rpx;
margin-bottom: 20rpx;
}
.upPicContImg{
display: flex;
.image{
width: 180rpx;
height: 180rpx;
margin:0 30rpx 30rpx 0;
}
.image:nth-child(3){
margin-right: 0;
}
}
}
// 详情 - 底部的两按钮
.footCont{
display: flex;
background-color: var(--neutral-color-white);
padding: 20rpx 30rpx;
box-sizing: border-box;
.footButCan{
flex: 125;
margin-right: 30rpx;
}
.footBut{
flex: 200;
}
}

148
project-wl-siji-uniapp-vue3/pages/index/index.vue Normal file
View File

@@ -0,0 +1,148 @@
<!-- 待提货-首页 -->
<template>
<!-- end -->
<view class="pageBox">
<!-- 取件状态列表 -->
<ItemList :itemData="itemData.value" @setTabIndex="setTabIndex" @searchSubmit="searchHandle" :loadding="loading" :moreStatus="moreStatus" />
<!-- end -->
</view>
<!-- footer -->
<UniFooter :pagePath="'pages/index/index'"></UniFooter>
<!-- end -->
</template>
<script>
export default {
name: 'list',
// 上拉刷新
onPullDownRefresh() {
uni.stopPullDownRefresh();
}
};
</script>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
// 导入接口
import { GetTasksList, GetTaskDetails, PositionUpload } from '@/pages/api/index.js';
import { positionsUploadInit } from '@/utils/index.js';
// 导入组件
// 底部导航
import UniFooter from '@/components/Footer/index.vue';
// 主体部分
import ItemList from './components/ItemList.vue';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const itemData = reactive([]);
const tabIndex = ref(store.state.taskStatus); //当前tab
const moreStatus = ref('loading'); //加载更多状态 loading more noMore
const loading = ref(false); // 是否展示加载更多
const date = new Date();
const year = date.getFullYear();
const month = computed(() => {
const mt = date.getMonth();
if (mt > 0 && mt < 10) {
return '0' + mt;
} else if (mt == 0) {
return 12;
} else {
return mt;
}
});
const month1 = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
const params = reactive({
status: tabIndex != 2 ? tabIndex.value + 1 : 4,
transportTaskId: '', // 运单号 非必传
page: 1,
pageSize: 10
});
const pages = ref(0); // 总页数
// ------生命周期------
onMounted(() => {
// 上报位置 进入首页立即上报
positionsUploadInit();
getNewData();
});
// ------定义方法------
const isSendRequest = ref(false); // 是否继续发送请求
// 获取任务列表
const getNewData = async type => {
if (isSendRequest.value) {
return;
}
loading.value = true;
let infoParams = {};
if (store.state.taskStatus === 2) {
infoParams = {
...params,
startTime: month.value == 12 ? `${year - 1}-${month.value}-${day}` : `${year}-${month.value}-${day}`,
endTime: `${year}-${month1}-${day}`
};
} else {
infoParams = {
...params
};
}
await GetTasksList(infoParams)
.then(res => {
if (res.code == 200) {
const { data } = res;
// 搜索数据处理
if (type && type == 'search') {
params.page = 1;
params.pageSize = 10;
itemData.value = data.items ? data.items : [];
} else {
// items == null 会报错 把他处理掉
const items = data.items == null ? [] : data.items;
// 从第一页请求 清空之前的数据
params.page == 1 ? (itemData.value = undefined) : null;
// 下拉数据合并
itemData.value = itemData.value ? [...itemData.value, ...items] : items;
// 如果 当前页面的数据已经全部数据了 那么停止拿数据
if (data.counts == 0) {
isSendRequest.value = true;
}
}
loading.value = false;
counts.value = data.pages;
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
};
// 切换 1待提货、2在途、4已完成
const setTabIndex = index => {
const tab = store.state.taskStatus;
store.commit('setTaskStatus', index);
// 下拉加载和切换的时候处理分页参数
params.page = tab == index ? params.page + 1 : 1;
params.status = index != 2 ? index + 1 : 6;
isSendRequest.value = false;
getNewData();
};
// 已完成搜索
const searchHandle = val => {
// 已完成列表提交搜索
if (typeof val == 'string') {
params.transportTaskId = val;
} else {
params.startTime = val.value[0];
params.endTime = val.value[1];
}
getNewData('search');
};
</script>
<style src="./index.scss" lang="scss"></style>

222
project-wl-siji-uniapp-vue3/pages/index/refister.vue Normal file
View File

@@ -0,0 +1,222 @@
<!-- 回车登记 -->
<template>
<view>
<!-- 详情 -->
<view class="refister">
<DetailsNav title="回车登记"></DetailsNav>
<view class="container">
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="swiperH">
<view class="boxBg">
<view class="infoCard">
<view class="line">
<text>出车时间</text>
<text>{{startTime}}</text>
</view>
<view class="line">
<text>回车时间</text>
<uni-datetime-picker type="datetime" v-model="params.endTime" :clear-icon="false" @change="changeLog" />
</view>
</view>
<!-- 通用卡片组件 - 待提货 - 带开关 -->
<CardCont title="车辆违章" type="redio" redioKey="isBreakRules" @redioChange = "redioChange">
<refisterCards :data="breakRulesType" :value="breakRulesType.data[0]" choiceKey="breakRulesType" @choiceHandel = "choiceHandel" />
<refisterCards :data="penaltyAmount" :value="penaltyAmount.data[0]" choiceKey="penaltyAmount" @choiceHandel = "choiceHandel" />
<refisterCards :data="deductPoints" :value="deductPoints.data[0]" choiceKey="deductPoints" @choiceHandel = "choiceHandel" />
</CardCont>
<CardCont title="车辆故障" type="redio" redioKey="isFault" @redioChange = "redioChange">
<!-- 车辆是否可用 -->
<refisterCards :data="isAvailable" :value="isAvailable.data[0]" choiceKey="isAvailable" @choiceHandel = "choiceHandel" />
<!-- 故障类型 -->
<refisterCards :data="faultType" :value="faultType.data[0]" choiceKey="faultType" @choiceHandel = "choiceHandel" />
<TextArea placeholder="请简单描述故障"></TextArea>
<ImageUpload title="请拍照" @uploadImage="uploadImage" tit='faultImages'></ImageUpload>
</CardCont>
<CardCont title="车辆事故" type="redio" redioKey="isAccident" @redioChange = "redioChange">
<refisterCards :data="accidentType" :value="accidentType.data[0]" choiceKey="accidentType" @choiceHandel = "choiceHandel" />
<TextArea placeholder="请简单描述故障"></TextArea>
<ImageUpload title="请拍照" @uploadImage="uploadImage" tit='accidentImages'></ImageUpload>
</CardCont>
</view>
</scroll-view>
</view>
<!-- end -->
</view>
<!-- footer -->
<view class="footCont">
<view class="footBut">
<text class="button" v-show="params.endTime != '' && (params.endTime).length == 19 " @click="submit()">交车</text>
<text class="button buttonDis1" v-show="params.endTime == '' || (params.endTime).length < 19" >交车</text>
</view>
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted, onUpdated, watch, watchEffect, computed, inject } from 'vue';
// 导入接口
import { TruckRegistration } from '@/pages/api/index.js';
// 导入组件
import DetailsNav from '@/components/DetailsNav/index.vue'
import CardCont from '@/components/CardCont/index.vue';
import refisterCards from './components/refisterCards.vue'
import ImageUpload from '@/components/ImageUpload/index.vue'
import TextArea from '@/components/TextArea/index.vue'
// ------定义变量------
const startTime = ref('')
const breakRulesType = {
title: '违章类型',
data: ['闯红灯', '无证驾驶', '超载', '酒后驾驶', '超速驾驶']
}
const penaltyAmount = {
title: '罚款金额',
data: ['0元', '100元', '200元', '300元', '500元', '1000元', '2000元']
}
const deductPoints = {
title: '扣分',
data: ['0分', '1分', '2分', '3分', '6分', '12分']
}
const isAvailable = {
title: '车辆是否可用',
data: ['是', '否']
}
const faultType = {
title: '故障类型',
data: ['启动困难', '不着车', '漏油', '漏水', '照明失灵', '有异响', '排烟异常', '温度异常', '其他']
}
const accidentType = {
title: '事故类型',
data: ['直行事故', '追尾事故', '超车事故', '左转弯事故', '右转弯事故', '弯道事故', '坡道事故', '会车事故', '其他']
}
let params = reactive({
id: '',
startTime: '', //出车时间
endTime: '', //回车时间
isBreakRules: false, //违章
breakRulesType: 1, //违章类型
penaltyAmount: 1, //罚款金额
deductPoints: 1, //扣分
isFault: false, //是否有故障
isAvailable: true, //车辆是否可用
faultType: 1, //故障类型
faultImages: '', //故障图片
isAccident: false, // 是否有事故
accidentType: 1,
accidentImages: '' // 事故图片
})
// ------生命周期------
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
startTime.value = currentPage.time;
params.startTime = currentPage.time;
params.id = currentPage.id
});
// ------定义方法------
// 回车登级-交车数据提交
async function submit() {
// 网络慢的时候添加按钮loading
let times =
setTimeout(()=>{
uni.showLoading({
title: 'loading',
mask:true
});
},500)
await TruckRegistration(params)
.then(res => {
if (res.code === 200) {
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times)
uni.showToast({
title: '回车登记数据提交成功！',
duration: 1000,
icon: 'none'
});
uni.navigateTo({
url: '/pages/index/index'
})
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 是否打开相关的违章、故障、事故并赋值到params
function redioChange(item){
params[item.key] = item.value == 2 ? true : false
}
// 图片上传
const uploadImage = (item) => {
if (item.key == 'accidentImages'){
params.accidentImages = params.accidentImages == '' ? item.value : params.accidentImages + ',' + item.value
} else {
params.faultImages = params.faultImages == '' ? item.value : params.faultImages + ',' + item.value
}
}
// 回车时间
function changeLog(e){
if (e.length < 19){
uni.showToast({
title: '请选择回车时间(包含日期及时间)',
duration: 3000,
icon: 'none'
});
}
}
// 选择违章的数据
function choiceHandel(item){
if (item.key == 'isAvailable'){
params[item.key] = item.value == 1 ? true : false
} else {
params[item.key] = item.value
}
}
</script>
<style src="./index.scss" lang="scss"></style>
<style lang="scss">
.refister .container{
padding-top: 30rpx;
font-size: var(--font-size-14);
.infoCard{
background: #FFFFFF;
border-radius: 20rpx;
padding:0 30rpx;
.line{
display: flex;
justify-content: space-between;
line-height: 60rpx;
border-bottom: solid 2rpx #EEEEEE;
padding: 20rpx 0;
.desc{
color: #818181;
}
}
.line:last-child{
border: none;
}
}
::v-deep .uni-input-placeholder{
text-align: right;
}
}
</style>

130
project-wl-siji-uniapp-vue3/pages/login/index.scss Normal file
View File

@@ -0,0 +1,130 @@
body,
uni-page-body,
uni-page-head,
.uni-page-head {
background-color: var(--neutral-color-white);
}
.loginBox {
padding: 100rpx 34rpx 0 66rpx;
.tit {
line-height: 66rpx;
font-weight: 600;
font-size: 48rpx;
color: var(--neutral-color-main);
letter-spacing: 0;
display: flex;
padding-bottom: 52rpx;
text {
flex: 1;
}
.text {
font-weight: 500;
margin-right: 30rpx;
font-size: 32rpx;
color: var(--essential-color-red);
text-align: right;
line-height: 50rpx;
padding-top: 14rpx;
icon {
background: url(../../static/icon_go.png) no-repeat;
background-size: contain;
width: 20rpx;
height: 20rpx;
margin-left: 14rpx;
vertical-align: unset;
}
}
}
.loginMain {
::v-deep .uni-input-input{
color: var(--neutral-color-main);
}
padding-right: 32rpx;
.item {
::v-deep .is-input-border {
padding: 30rpx 0;
font-weight: 400;
font-size: 32rpx;
line-height: 40rpx;
color: #797979;
letter-spacing: 0.36rpx;
border: 0 none;
border-bottom: 1px solid var(--neutral-color-background);
position: relative;
border-radius: 0;
.uni-easyinput__placeholder-class {
font-size: 32rpx;
color: var(--neutral-color-font);
letter-spacing: 0.36rpx;
}
.uni-easyinput__content-input {
padding-left: 0 !important;
font-size: 32rpx;
}
}
::v-deep .is-input-error-border {
border-bottom: 1px solid var(--essential-color-red);
margin-bottom: 44rpx;
}
::v-deep .content-clear-icon{
padding: 0;
font-size: 28rpx !important;
line-height: 46rpx;
}
::v-deep .uniui-eye-filled{
background: url(@/static/icon-close.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
::v-deep .uniui-eye-slash-filled{
background: url(@/static/icon-open.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
}
::v-deep .uni-forms-item__inner {
padding-bottom: 0;
}
::v-deep .uni-error-message {
bottom: -10rpx;
}
::v-deep .content-clear-icon {
margin-right: 30rpx;
}
.inputW{
::v-deep .is-input-border{
padding-right: 166rpx;
}
}
.codeBox {
position: absolute;
right: 40rpx;
top: 34rpx;
font-size: 28rpx;
}
}
.setUrl{
font-size: 24rpx;
color: #ccc;
line-height: 48rpx;
text-align: center;
margin-top: 40rpx;
}
}
.item {
icon {
position: absolute;
width: 32rpx;
height: 32rpx;
right: 0;
top: 40rpx;
}
}
.fontCol {
color: var(--neutral-color-font);
}

137
project-wl-siji-uniapp-vue3/pages/login/index.vue Normal file
View File

@@ -0,0 +1,137 @@
<!-- 手机号登录页面 -->
<template>
<!-- 公用nav -->
<view class="navBox"><uni-nav-bar title="神领物流" :border="false" /></view>
<!-- end -->
<view class="loginBox">
<view class="tit">
<text>手机号登录</text>
<text class="text" @click="goLogin">
账号登录
<icon></icon>
</text>
</view>
<!-- 登录表单 手机号、验证码 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="phone"><uni-easyinput class="item" v-model="fromInfo.phone" placeholder="请输入手机号" /></uni-forms-item>
<uni-forms-item name="verifyCode">
<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" placeholder="请输入验证码" />
<view class="codeBox">
<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
</view>
</uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>登 录</text>
</view>
<!-- end -->
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 接口
import { phoneLogins, getUserInfo, getsmsCode } from '../api/user.js';
// 验证
import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const customForm = ref();
const isVerifySuccess = ref(false);
// 表单数据
const fromInfo = reactive({
phone: '', //手机号
verifyCode: '' // 验证码
});
// 验证码倒计时数据
const codeInfo = reactive({
show: true,
timer: null,
times: 60
});
// 表单校验
const customRules = reactive({
phone: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入手机号'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
});
// ------生命周期------
onMounted(() => {});
// ------定义方法------
// 获取验证码
const getCode = async () => {
let p = fromInfo.phone;
isVerifySuccess.value = isPhone(p);
if (isVerifySuccess.value) {
timeCountdown(codeInfo);
const parent = {
phone: phone.value
};
} else {
return uni.showToast({
title: '手机号输入错误！请重新输入',
duration: 1000,
icon: 'none'
});
}
};
// 登录
const handleSubmit = async() => {
// 表单校验
const valid = await customForm.value.validate();
if (valid) {
// 登录接口
await phoneLogins(fromInfo)
.then(res => {
if (res.code === 200) {
store.commit('user/setToken', res.token);
// 通过vuex获取用户信息
store.dispatch('user/GetUsersInfo')
// 跳转到首页
uni.redirectTo({
url: '/pages/index/index'
});
} else {
return uni.showToast({
title: res.data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误！请重新输入
// 账号输入错误！请重新输入
}
})
.catch(err => {});
}
};
// 去手机登录页面
const goLogin = () => {
uni.redirectTo({
url: '/pages/login/user'
});
};
</script>
<style src="./index.scss" lang="scss" scoped></style>

150
project-wl-siji-uniapp-vue3/pages/login/user.vue Normal file
View File

@@ -0,0 +1,150 @@
<!-- 用户密码登录 -->
<template>
<!-- 公用nav -->
<view class="navBox"><uni-nav-bar title="神领物流" :border="false" /></view>
<!-- end -->
<view class="loginBox">
<view class="tit">
<text>账号登录</text>
<text class="text" @click="goLogin">
手机号登录
<icon></icon>
</text>
</view>
<!-- 登录表单 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="account"><uni-easyinput class="item" v-model="fromInfo.account" placeholder="请输入账号" /></uni-forms-item>
<uni-forms-item name="password">
<uni-easyinput class="item" :type="showPassword ? 'text' : 'password'" v-model="fromInfo.password" placeholder="请输入密码" />
</uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.account.length === 0 || fromInfo.password.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>登 录</text>
</view>
<!-- 更新请求Url - 教学需求 -->
<view class="setUrl" @click="inputDialogToggle">
配置请求url
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="input" title="配置URL" :value="baseURL"
placeholder="请输入baseURL" @confirm="dialogInputConfirm"></uni-popup-dialog>
</uni-popup>
<!-- 更新请求Url - 教学需求 -->
<!-- end -->
</view>
<!-- end -->
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
// 接口
import { userLogins, getUserInfo } from '../api/user.js';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const showPassword = ref(false); //控制密码右侧图标显示隐藏
const customForm = ref(); //表单校验
// 表单数据
const fromInfo = reactive({
account: 'hzsj', //账号
password: '123456' // 密码
});
// 表单校验
const customRules = reactive({
account: {
rules: [
{
required: true,
errorMessage: '请输入手机号'
}
]
},
password: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
});
// ------声明周期------
onMounted(() => {
// 进入登录页面配置默认的请求url
// uni.setStorageSync('baseUrl', '')
// 处理定时上报位置的定时器
clearInterval(uni.getStorageSync('positions').timer)
uni.setStorageSync('positions', null)
});
// ------定义方法------
// 登录
const handleSubmit = async () => {
// // 表单校验
const valid = await customForm.value.validate();
if (valid) {
// 网络慢的时候添加按钮loading
let times =
setTimeout(()=>{
uni.showLoading({
title: 'loading',
mask:true
});
},500)
// 登录接口
await userLogins(fromInfo)
.then(res => {
if (res.code === 200) {
// 操作成功后清除loading
setTimeout(function () {
uni.hideLoading();
}, 500);
clearTimeout(times)
store.commit('user/setToken', res.data);
// 通过vuex获取用户信息
store.dispatch('user/GetUsersInfo')
// 跳转到首页
uni.navigateTo({
url: '/pages/index/index'
});
} else {
return uni.showToast({
title: res.data.msg || '请求失败！',
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
};
// 去手机登录页面
const goLogin = () => {
uni.navigateTo({
url: '/pages/login/index'
});
};
// 设置密码
const handlePwd = () => {
showPassword.value = !showPassword.value;
};
// 打开设置Url窗口
const baseURL = ref(uni.getStorageSync('baseUrl'))
const inputDialog = ref(null)
const inputDialogToggle = () => {
inputDialog.value.open()
}
// 报错配置的Url
const dialogInputConfirm = (val) => {
baseURL.value = val
uni.setStorageSync('baseUrl', val)
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

106
project-wl-siji-uniapp-vue3/pages/message/components/announcement.vue Normal file
View File

@@ -0,0 +1,106 @@
<!-- 公告 -->
<template>
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" @scrolltolower="lower">
<view v-if="itemData.length > 0">
<view class="boxCon">
<view class="tabConList">
<view class="item" v-for="(item, index) in itemData" :key="index">
<view @click="handleClick(item)">
<view class="text" :class="item.isRead===0 ? 'active' : ''">
<icon></icon>
{{ item.title }}
</view>
<text class="time">{{ item.created }}</text>
</view>
</view>
</view>
</view>
<!-- 暂时先不做，后期做 -->
<!-- <ReachBottom v-if="loading" :loadingText="loadingText"></ReachBottom> -->
</view>
<!-- 无数据显示 -->
<view v-else>
<EmptyPage :emptyInfo="emptyData"></EmptyPage>
</view>
<!-- end -->
</scroll-view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { taskTimeFormat } from '@/utils/index.js';
// 接口api
import { getNewList, msgRead } from '@/pages/api/news.js';
// 导入组件
//空页面
import EmptyPage from '@/components/EmptyPage/index.vue';
// 下拉提示
import ReachBottom from '@/components/reach-bottom/index.vue';
// ------定义变量------
let loadingText = ref('');
let loading = ref(false);
let itemData = ref([]); //列表数据
const emptyData = '暂无数据'
// 获取父组件数据
const props = defineProps({
scrollH: {
type: Number,
default: 0
}
});
// ------定义变量------
const emit = defineEmits(['handleSearch']); //子组件向父组件事件传递
// ------生命周期------
onMounted(() => {
init();
});
// ------定义方法------
const init = () => {
getList();
};
// 请求参数
const params = ref({
contentType: '200',
page: 1,
pageSize: 10
})
// 获取系统通知列表
const getList = async () => {
await getNewList(params.value)
.then(res => {
if (res.code === 200) {
itemData.value = res.data.items;
}
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
const dataAdd = () => {
this.loadingText = '没有更多了';
this.loading = true;
};
// 下拉加载
const lower = () => {
loadingText.value = '数据加载中...';
loading.value = true;
dataAdd();
};
// 标记已读
const handleClick = async item => {
await msgRead(item.id)
};
//把数据、方法暴漏给父组件
defineExpose({
getList
});
</script>
<style>
</style>

147
project-wl-siji-uniapp-vue3/pages/message/components/notification.vue Normal file
View File

@@ -0,0 +1,147 @@
<!-- 系统通知 -->
<template>
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="scrollSet">
<!-- 列表 -->
<view class=" newBox">
<scroll-view scroll-y="true" :style="{ height: scrollH + 'px' }" v-if="itemData.length>0">
<view class="systemList">
<view class="boxBg item" v-for="(item, index) in itemData" :key="index">
<view class="tit" :class="item.isRead === 0 ? 'active' : ''">
您有一个新的运输任务
<icon></icon>
</view>
<view class="address" v-html="item.content"></view>
<view class="time">
<text> {{item.created}}</text>
<button class="uni-btn redBtn" @click="handleDetail(item)">查看详情</button>
</view>
</view>
</view>
<view style="height: 50rpx;">
<!-- 下面的加载更多有问题 先占位 -->
</view>
</scroll-view>
<view v-else><EmptyPage :emptyData="emptyData"></EmptyPage></view>
</view>
</scroll-view>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { taskTimeFormat } from '@/utils/index.js';
// 接口 api
import { getNewList, msgRead, msgAllRead } from '@/pages/api/news.js';
// 导入组件
//空页面
import EmptyPage from '@/components/EmptyPage/index.vue';
// 下拉提示
import ReachBottom from '@/components/reach-bottom/index.vue';
// ------定义变量------
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
const currentPage = pages[pages.length - 1].$page.options; //获取当前页面的对象
const title = currentPage.title; //nav标题
const type = currentPage.type; //当前派件类型
const loadMore = ref(); //定义子组件的ref,可以调取子组件的值
const emptyData = ref('暂无消息');
const rithtText = ref('全部已读');
let pageNumber = ref(1);
let pageSize = ref(10);
let totalPage = ref(0);
let reload = ref(false);
let scrollH = ref(null); //滚动高度
let currentPageData = ref([]);
let itemData = ref([]);
let ids = ref([])
// 监听上拉触底事件
onReachBottom(() => {
totalPage.value = Math.ceil(itemData.value.length / pageSize.value); //计算总页数
totalPage.value = totalPage.value == 0 ? 1 : totalPage.value;
if (pageNumber.value >= totalPage.value) {
loadMore.value.status= 'noMore';
return false;
} else {
loadMore.value.status = 'loading';
let times = setTimeout(() => {
pageNumber.value++;
let begin = (pageNumber.value - 1) * pageSize.value;
let end = pageNumber.value * pageSize.value;
currentPageData.value = [...currentPageData.value, ...itemData.value.slice(begin, end)];
}, 1000); //因为接口没做分页，所以做了数据分页处理，这里延时一秒在加载方法有个loading效果
}
});
// ------生命周期------
onMounted(() => {
getList();
});
// ------定义方法------
const params = ref({
contentType: '201',
page: 1,
pageSize: 10
})
// 获取系统通知列表
const getList = async () => {
await getNewList(params.value)
.then(res => {
if (res.code === 200) {
itemData.value = res.data.items;
}
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 进入详情，标记已读
const handleDetail = async item => {
await msgRead(item.id)
.then(res => {
uni.navigateTo({
url: '/pages/message/details?obj=' + JSON.stringify(item)
});
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 全部已读 - 功能暂未实现
const handleAll = async () => {
itemData.value.map(val => {
if(val.isRead===0){
ids.value.push(val.id);
}
});
await msgAllRead(ids.value)
.then(res => {
getList(type)
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: '/pages/news/index?tabIndex=1'
});
};
</script>
<style src="./../index.scss" lang="scss"></style>

66
project-wl-siji-uniapp-vue3/pages/message/details.vue Normal file
View File

@@ -0,0 +1,66 @@
<!-- 消息的详情 -->
<template>
<!-- 自定义头部 -->
<DetailsNav :title="title"></DetailsNav>
<!-- end -->
<!-- 正文 -->
<view class=" newDetail">
<view class="tit">{{ objData.title }}</view>
<view class="time">{{ taskTimeFormat(objData.created) }}</view>
<view>{{ objData.content }}</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { taskTimeFormat } from '@/utils/index.js';
// 接口api
import { getNewList } from '@/pages/api/news.js';
// 导入组件
// 导航组件
import DetailsNav from '@/components/DetailsNav/index.vue'
// ------定义变量------
const title = ref('详情'); //nav标题
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
const currentPage = pages[pages.length - 1]; //获取当前页面的对象
let objData = ref(JSON.parse(currentPage.$page.options.obj)); //基本数据 获取列表页传过来的详情页，此页没有详情接口
// ------生命周期------
onMounted(e => {});
// ------定义方法------
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: '/pages/news/index'
});
};
</script>
<style lang="scss" scoped>
body,
uni-page-body,
uni-page-head,
.uni-page-head {
background-color:#fff !important;
}
.pageBox{
box-shadow: inset 0 22rpx 22rpx 0 rgba(162,162,162,0.06);
}
.newDetail{
padding: 40rpx 32rpx 60rpx 32rpx;
color: var(--neutral-color-font);
line-height: 48rpx;
font-size: var(--font-size-13);
.tit{
line-height: 60rpx;
font-size: var(--font-size-16);
color: var(--neutral-color-main);
font-weight: 600;
}
.time{
font-size: var(--font-size-12);
padding: 4rpx 0 28rpx;
}
}
</style>

130
project-wl-siji-uniapp-vue3/pages/message/index.scss Normal file
View File

@@ -0,0 +1,130 @@
body,
uni-page-body {
background: var(--neutral-color-background) !important;
}
.newBox {
.tabScroll {
background: var(--neutral-color-white);
::v-deep .uni-scroll-view-content {
font-size: var(--font-size-14) !important;
.scroll-row-item {
flex: 1;
text-align: center;
margin-right: 0;
}
}
}
}
::v-deep .newConBox {
.item {
line-height: 40rpx;
padding: 0 28rpx;
color: var(--neutral-color-font);
position: relative;
font-size: var(--font-size-12);
.navigator-wrap{
uni-navigator{
display: flex;
align-items: center;
}
}
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
padding: 32rpx 0 28rpx;
border-bottom: 1px solid var(--neutral-color-background);
view{
&:first-child{
color: var(--neutral-color-main);
font-size: var(--font-size-14);
padding-bottom: 4rpx;
}
}
}
.icon {
width: 64rpx;
height: 64rpx;
margin-right: 36rpx;
position: relative;
&.send {
// background: url(@/static/icon17.png);
background-size: contain;
}
&.income {
// background: url(@/static/icon18.png);
background-size: contain;
}
&.cancel {
// background: url(@/static/icon19.png);
background-size: contain;
}
&.active {
color: var(--neutral-color-main);
icon {
position: absolute;
right: -14rpx;
top: 2rpx;
width: 14rpx;
height: 14rpx;
border-radius: 50%;
margin-right: 12rpx;
background: var(--essential-color-red);
}
}
}
.time{
position: absolute;
top: 32rpx;
right: 44rpx;
}
}
}
// 详情
.scrollSet{
height: calc(100vh - 300rpx);
}
// 系统列表
.systemList{
.item{
padding:32rpx 32rpx 40rpx 32rpx;
color: var(--neutral-color-font);
line-height: 52rpx;
margin-top: 40rpx;
.tit{
line-height: 40rpx;
padding-bottom: 26rpx;
color: var(--neutral-color-main);
border-bottom: 1px solid #f4f4f4;
margin-bottom: 26rpx;
font-weight: 400;
font-size: 28rpx;
}
.time{
display: flex;
align-items: center;
font-size: 24rpx;
text{
flex:1
}
.redBtn{
display: inline-block;
width: 162rpx;
height: 48rpx;
line-height: 48rpx;
border: 2rpx solid #EF4F3F;
font-size: 24rpx;
}
}
.address{
font-size: 26rpx;
line-height: 40rpx;
margin-bottom: 18rpx;
}
}
}

108
project-wl-siji-uniapp-vue3/pages/message/index.vue Normal file
View File

@@ -0,0 +1,108 @@
<!-- 消息页面 -->
<template>
<!-- 自定义头部 -->
<view class="navHead"></view>
<!-- end -->
<!-- 列表 -->
<view class="pageBox newBox">
<!-- 搜索列表 -->
<scroll-view scroll-x="true" class="tabScroll" :scroll-into-view="scrollinto" :scroll-with-animation="true">
<view v-for="(item, index) in tabBars" :key="index" :id="'tab' + index" class="scroll-row-item" >
<view :class="tabIndex == index ? 'scroll-row-item-act' : ''" @click="changeTab(index)">
<text class="line"></text>
{{ item }}
</view>
</view>
</scroll-view>
<!-- 滑块内容 对应的是顶部选项卡的切换 :current="tabIndex" 设置的是y方向上可以滚动-->
<view class="homeSwiper">
<!-- 公告 -->
<Announcement v-show="tabIndex == 0" ref="announcement"></Announcement>
<!-- end -->
<!-- 系统通知 -->
<Notification v-show="tabIndex == 1" ref="notificat" @getTabIndex="getTabIndex"></Notification>
<!-- end -->
<!-- </swiper> -->
</view>
<!-- end -->
</view>
<!-- footer -->
<UniFooter :pagePath="'pages/index/index'" ></UniFooter>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import {taskTimeFormat} from '@/utils/index.js';
// 导入组件
// 导航组件
//空页面
import EmptyPage from '@/components/EmptyPage/index.vue';
// 下拉提示
import ReachBottom from '@/components/reach-bottom/index.vue'
// 公告列表
import Announcement from './components/announcement.vue';
// 系统通知
import Notification from './components/notification.vue';
// 底部导航
import UniFooter from '@/components/Footer/index.vue';
// ------定义变量------
const announcement = ref()//定义ref
const notificat = ref()
const title = ref('消息'); //nav标题
const emptyInfo = ref('- 没有找到相关内容 -');
const tabBars = reactive(['公告', '系统通知']);
let scrollinto = ref('tab0'); //tab切换
let tabIndex = ref(1); //当前tab
let scrollH = ref(0); //滚动高度
// ------生命周期------
onMounted(() => {
// init()
// 获取屏幕信息
uni.getSystemInfo({
success: res => {
scrollH.value = res.windowHeight - uni.upx2px(630);
}
});
});
// ------定义方法------
const init = () => {
getList()
};
// tab选项卡切换轮播
const changeTab = index => {
// 点击的还是当前数据的时候直接return
if (tabIndex.value == index) {
return;
}
// 触发tab切换接口
if(index===0){
announcement.value.getList()
}else{
// notificat.value.getOjb()
}
tabIndex.value = index;
// 滑动
scrollinto.value = 'tab' + index;
};
// 触发选项卡事件
const onChangeSwiperTab = e => {
changeTab(e.detail.current);
};
// 获取子组件传来的tabindex
const getTabIndex =(val)=>{
tabIndex.value = val
}
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: '/pages/index/index'
});
};
</script>
<style src="./index.scss" lang="scss"></style>

43
project-wl-siji-uniapp-vue3/pages/start/index.scss Normal file
View File

@@ -0,0 +1,43 @@
.starPage{
background: url(@/static/goin.png) center center no-repeat;
background-size: contain;
width: 100vw;
height: 100vh;
.page{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.tit{
width: 38rpx;
line-height: 40rpx;
font-size: 28rpx;
margin: 0 auto;
letter-spacing: 0.42rpx;
text-align: center;
text{
display: block;
padding:0 0 10rpx 0;
}
}
.map{
background: url(@/static/star.png) no-repeat;
background-size: contain;
width: 320rpx;
height: 232rpx;
margin-top: 80rpx;
margin-bottom: 142rpx;
}
.logo{
background: url(@/static/logo.png) no-repeat;
background-size: contain;
width: 242rpx;
height: 94rpx;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
bottom: 5%;
}
}

24
project-wl-siji-uniapp-vue3/pages/start/index.vue Normal file
View File

@@ -0,0 +1,24 @@
<!-- 启动页 -->
<template>
<view class="starPage"></view>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
name: 'StarPage',
setup: props => {
onMounted(() => {
const times = setTimeout(() => {
uni.redirectTo({
url: '/pages/login/user'
});
clearTimeout(times);
}, 1000);
});
return {};
}
};
</script>
<style src="./index.scss" lang="scss" scoped></style>

42
project-wl-siji-uniapp-vue3/pages/user/carrier.vue Normal file
View File

@@ -0,0 +1,42 @@
<!-- 我的-主页 -->
<template>
<!-- end -->
<view class="userContainer">
<DetailsNav :title="title"></DetailsNav>
<!-- 车辆信息 -->
<CarInfo v-if="type == 'carInfo'" ></CarInfo>
<!-- 任务数据 -->
<TaskData v-if="type == 'taskData'" ></TaskData>
<!-- 系统设置-->
<SystmSet v-if="type == 'systmSet'" ></SystmSet>
</view>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 导航
import DetailsNav from '@/components/DetailsNav/index.vue';
import CarInfo from './components/CarInfo.vue';
import TaskData from './components/TaskData.vue';
import SystmSet from './components/SystmSet.vue';
// ------定义变量------
const title = ref('车辆信息')
const type = ref('')
// 生命周期中的一些 初始化信息
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
type.value = currentPage.type;
title.value = currentPage.title;
});
</script>
<style lang="scss" scoped>
.carInfo{
}
</style>

16
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/changelog.md Normal file
View File

@@ -0,0 +1,16 @@
## 1.4.5（2022-02-25）
- 修复 条件编译 nvue 不支持的 css 样式
## 1.4.4（2022-02-25）
- 修复 条件编译 nvue 不支持的 css 样式
## 1.4.3（2021-09-22）
- 修复 startDate、 endDate 属性失效的 bug
## 1.4.2（2021-08-24）
- 新增 支持国际化
## 1.4.1（2021-08-05）
- 修复 弹出层被 tabbar 遮盖 bug
## 1.4.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.3.16（2021-05-12）
- 新增 组件示例地址
## 1.3.15（2021-02-04）
- 调整为uni_modules目录规范

546
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/calendar.js Normal file
View File

@@ -0,0 +1,546 @@
/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @github https://github.com/jjonline/calendar.js
* @Author Jea杨(JJonline@JJonline.Cn)
* @Time 2014-7-21
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var calendar = {
/**
* 农历1900-2100的润大小信息表
* @Array Of Property
* @return Hex
*/
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
/** Add By JJonline@JJonline.Cn**/
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
0x0d520], // 2100
/**
* 公历每个月份的天数普通表
* @Array Of Property
* @return Number
*/
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
/**
* 天干地支之天干速查表
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
* @return Cn string
*/
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
/**
* 天干地支之地支速查表
* @Array Of Property
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
* @return Cn string
*/
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
/**
* 天干地支之地支速查表<=>生肖
* @Array Of Property
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
* @return Cn string
*/
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
/**
* 24节气速查表
* @Array Of Property
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
* @return Cn string
*/
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
/**
* 1900-2100各年的24节气日期速查表
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
/**
* 数字转中文速查表
* @Array Of Property
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
* @return Cn string
*/
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
/**
* 日期转农历称呼速查表
* @Array Of Property
* @trans ['初','十','廿','卅']
* @return Cn string
*/
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
/**
* 月份转农历称呼速查表
* @Array Of Property
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
* @return Cn string
*/
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
/**
* 返回农历y年一整年的总天数
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays: function (y) {
var i; var sum = 348
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
return (sum + this.leapDays(y))
},
/**
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth: function (y) { // 闰字编码 \u95f0
return (this.lunarInfo[y - 1900] & 0xf)
},
/**
* 返回农历y年闰月的天数 若该年没有闰月则返回0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays: function (y) {
if (this.leapMonth(y)) {
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
}
return (0)
},
/**
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays: function (y, m) {
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
},
/**
* 返回公历(!)y年m月的天数
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays: function (y, m) {
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var ms = m - 1
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
} else {
return (this.solarMonth[ms])
}
},
/**
* 农历年份转换为干支纪年
* @param lYear 农历年的年份数
* @return Cn string
*/
toGanZhiYear: function (lYear) {
var ganKey = (lYear - 3) % 10
var zhiKey = (lYear - 3) % 12
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
},
/**
* 公历月、日判断所属星座
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro: function (cMonth, cDay) {
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
},
/**
* 传入offset偏移量返回干支
* @param offset 相对甲子的偏移量
* @return Cn string
*/
toGanZhi: function (offset) {
return this.Gan[offset % 10] + this.Zhi[offset % 12]
},
/**
* 传入公历(!)y年获得该年第n个节气的公历日期
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
*/
getTerm: function (y, n) {
if (y < 1900 || y > 2100) { return -1 }
if (n < 1 || n > 24) { return -1 }
var _table = this.sTermInfo[y - 1900]
var _info = [
parseInt('0x' + _table.substr(0, 5)).toString(),
parseInt('0x' + _table.substr(5, 5)).toString(),
parseInt('0x' + _table.substr(10, 5)).toString(),
parseInt('0x' + _table.substr(15, 5)).toString(),
parseInt('0x' + _table.substr(20, 5)).toString(),
parseInt('0x' + _table.substr(25, 5)).toString()
]
var _calday = [
_info[0].substr(0, 1),
_info[0].substr(1, 2),
_info[0].substr(3, 1),
_info[0].substr(4, 2),
_info[1].substr(0, 1),
_info[1].substr(1, 2),
_info[1].substr(3, 1),
_info[1].substr(4, 2),
_info[2].substr(0, 1),
_info[2].substr(1, 2),
_info[2].substr(3, 1),
_info[2].substr(4, 2),
_info[3].substr(0, 1),
_info[3].substr(1, 2),
_info[3].substr(3, 1),
_info[3].substr(4, 2),
_info[4].substr(0, 1),
_info[4].substr(1, 2),
_info[4].substr(3, 1),
_info[4].substr(4, 2),
_info[5].substr(0, 1),
_info[5].substr(1, 2),
_info[5].substr(3, 1),
_info[5].substr(4, 2)
]
return parseInt(_calday[n - 1])
},
/**
* 传入农历数字月份返回汉语通俗表示法
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
*/
toChinaMonth: function (m) { // 月 => \u6708
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var s = this.nStr3[m - 1]
s += '\u6708'// 加上月字
return s
},
/**
* 传入农历日期数字返回汉字表示法
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
*/
toChinaDay: function (d) { // 日 => \u65e5
var s
switch (d) {
case 10:
s = '\u521d\u5341'; break
case 20:
s = '\u4e8c\u5341'; break
break
case 30:
s = '\u4e09\u5341'; break
break
default :
s = this.nStr2[Math.floor(d / 10)]
s += this.nStr1[d % 10]
}
return (s)
},
/**
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
*/
getAnimal: function (y) {
return this.Animals[(y - 4) % 12]
},
/**
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
// 年份限定、上限
if (y < 1900 || y > 2100) {
return -1// undefined转换为数字变为NaN
}
// 公历传参最下限
if (y == 1900 && m == 1 && d < 31) {
return -1
}
// 未传参 获得当天
if (!y) {
var objDate = new Date()
} else {
var objDate = new Date(y, parseInt(m) - 1, d)
}
var i; var leap = 0; var temp = 0
// 修正ymd参数
var y = objDate.getFullYear()
var m = objDate.getMonth() + 1
var d = objDate.getDate()
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
for (i = 1900; i < 2101 && offset > 0; i++) {
temp = this.lYearDays(i)
offset -= temp
}
if (offset < 0) {
offset += temp; i--
}
// 是否今天
var isTodayObj = new Date()
var isToday = false
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
isToday = true
}
// 星期几
var nWeek = objDate.getDay()
var cWeek = this.nStr1[nWeek]
// 数字表示周几顺应天朝周一开始的惯例
if (nWeek == 0) {
nWeek = 7
}
// 农历年
var year = i
var leap = this.leapMonth(i) // 闰哪个月
var isLeap = false
// 效验闰月
for (i = 1; i < 13 && offset > 0; i++) {
// 闰月
if (leap > 0 && i == (leap + 1) && isLeap == false) {
--i
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
} else {
temp = this.monthDays(year, i)// 计算农历普通月天数
}
// 解除闰月
if (isLeap == true && i == (leap + 1)) { isLeap = false }
offset -= temp
}
// 闰月导致数组下标重叠取反
if (offset == 0 && leap > 0 && i == leap + 1) {
if (isLeap) {
isLeap = false
} else {
isLeap = true; --i
}
}
if (offset < 0) {
offset += temp; --i
}
// 农历月
var month = i
// 农历日
var day = offset + 1
// 天干地支处理
var sm = m - 1
var gzY = this.toGanZhiYear(year)
// 当月的两个节气
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
// 依据12节气修正干支月
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
if (d >= firstNode) {
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
}
// 传入的日期的节气与否
var isTerm = false
var Term = null
if (firstNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 2]
}
if (secondNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 1]
}
// 日柱 当月一日与 1900/1/1 相差天数
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
var gzD = this.toGanZhi(dayCyclical + d - 1)
// 该日期所属的星座
var astro = this.toAstro(m, d)
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
},
/**
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
var isLeapMonth = !!isLeapMonth
var leapOffset = 0
var leapMonth = this.leapMonth(y)
var leapDay = this.leapDays(y)
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
var day = this.monthDays(y, m)
var _day = day
// bugFix 2016-9-25
// if month is leap, _day use leapDays method
if (isLeapMonth) {
_day = this.leapDays(y, m)
}
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
// 计算农历的时间差
var offset = 0
for (var i = 1900; i < y; i++) {
offset += this.lYearDays(i)
}
var leap = 0; var isAdd = false
for (var i = 1; i < m; i++) {
leap = this.leapMonth(y)
if (!isAdd) { // 处理闰月
if (leap <= i && leap > 0) {
offset += this.leapDays(y); isAdd = true
}
}
offset += this.monthDays(y, i)
}
// 转换闰月农历 需补充该年闰月的前一个月的时差
if (isLeapMonth) { offset += day }
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
var cY = calObj.getUTCFullYear()
var cM = calObj.getUTCMonth() + 1
var cD = calObj.getUTCDate()
return this.solar2lunar(cY, cM, cD)
}
}
export default calendar

12
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/i18n/en.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "ok",
"uni-calender.cancel": "cancel",
"uni-calender.today": "today",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN"
}

8
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/i18n/index.js Normal file
View File

@@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

12
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/i18n/zh-Hans.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "确定",
"uni-calender.cancel": "取消",
"uni-calender.today": "今日",
"uni-calender.SUN": "周日",
"uni-calender.MON": "周一",
"uni-calender.TUE": "周二",
"uni-calender.WED": "周三",
"uni-calender.THU": "周四",
"uni-calender.FRI": "周五",
"uni-calender.SAT": "周六"
}

12
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/i18n/zh-Hant.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "確定",
"uni-calender.cancel": "取消",
"uni-calender.today": "今日",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六"
}

188
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/uni-calendar-item.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}"
@click="choiceDate(weeks)">
<view class="uni-calendar-item__weeks-box-item">
<!-- <text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> -->
<text class="uni-calendar-item__weeks-box-text" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.date}}</text>
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}">{{todayText}}</text>
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--extra':weeks.extraInfo.info,
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.extraInfo.info}}</text>
</view>
</view>
</template>
<script>
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const { t } = initVueI18n(messages)
export default {
emits:['change'],
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
}
},
computed: {
todayText() {
return t("uni-calender.today")
},
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
}
}
}
</script>
<style lang="scss" scoped>
$uni-font-size-base:14px;
$uni-text-color:#333;
$uni-font-size-sm:12px;
$uni-color-error: #EF4F3F;
$uni-opacity-disabled: 0.3;
$uni-text-color-disable:#c0c0c0;
$uni-color-primary: #EF4F3F;
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
}
.uni-calendar-item__weeks-box-text {
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm;
color: $uni-text-color;
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 100rpx;
height: 100rpx;
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $uni-color-error;
}
.uni-calendar-item--disable {
background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color: $uni-text-color-disable;
}
.uni-calendar-item--isDay-text {
color: $uni-color-primary;
}
.uni-calendar-item--isDay {
background-color: $uni-color-primary;
opacity: 0.8;
color: #fff;
}
.uni-calendar-item--extra {
color: $uni-color-error;
opacity: 0.8;
}
.uni-calendar-item--checked {
background-color: $uni-color-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple {
background-color: $uni-color-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--before-checked {
background-color: #ff5a5f;
color: #fff;
}
.uni-calendar-item--after-checked {
background-color: #ff5a5f;
color: #fff;
}
</style>

575
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/uni-calendar.vue Normal file
View File

@@ -0,0 +1,575 @@
<template>
<view class="uni-calendar">
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
<view class="uni-calendar__header-btn-box" @click="close">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text>
</view>
<view class="uni-calendar__header-btn-box" @click="confirm">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text>
</view>
</view>
<view class="uni-calendar__header">
<view class="uni-calendar__header-btn-box" @click.stop="pre">
<image src="@/static/sj_btn_data_lt.png" style="width: 30px;height: 30px;" mode=""></image>
<!-- <view class="uni-calendar__header-btn uni-calendar--left"></view> -->
</view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' 年 '+( nowDate.month||'') + '月'}} </text>
</picker>
<view class="uni-calendar__header-btn-box" @click.stop="next">
<image src="@/static/sj_btn_date_rt.png" style="width: 30px;height: 30px;" mode=""></image>
<!-- <view class="uni-calendar__header-btn uni-calendar--right"></view> -->
</view>
<!-- <text class="uni-calendar__backtoday" @click="backtoday">{{todayText}}</text> -->
</view>
<slot></slot>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{monText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
</view>
</view>
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import Calendar from './util.js';
import calendarItem from './uni-calendar-item.vue'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const { t } = initVueI18n(messages)
/**
* Calendar 日历
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
* @property {String} date 自定义当前时间，默认为今天
* @property {Boolean} lunar 显示农历
* @property {String} startDate 日期选择范围-开始日期
* @property {String} endDate 日期选择范围-结束日期
* @property {Boolean} range 范围选择
* @property {Boolean} insert = [true|false] 插入模式,默认为false
* @value true 弹窗模式
* @value false 插入模式
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
* @property {Boolean} showMonth 是否选择月份为背景
* @event {Function} change 日期改变，`insert :ture` 时生效
* @event {Function} confirm 确认选择`insert :false` 时生效
* @event {Function} monthSwitch 切换月份时触发
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
*/
export default {
components: {
calendarItem
},
emits:['close','confirm','change','monthSwitch'],
props: {
date: {
type: String,
default: ''
},
selected: {
type: Array,
default () {
return []
}
},
lunar: {
type: Boolean,
default: false
},
startDate: {
type: String,
default: ''
},
endDate: {
type: String,
default: ''
},
range: {
type: Boolean,
default: false
},
insert: {
type: Boolean,
default: true
},
showMonth: {
type: Boolean,
default: true
},
clearDate: {
type: Boolean,
default: true
}
},
data() {
return {
show: false,
weeks: [],
calendar: {},
nowDate: '',
aniMaskShow: false
}
},
computed:{
/**
* for i18n
*/
okText() {
return t("uni-calender.ok")
},
cancelText() {
return t("uni-calender.cancel")
},
todayText() {
return t("uni-calender.today")
},
monText() {
return t("uni-calender.MON")
},
TUEText() {
return t("uni-calender.TUE")
},
WEDText() {
return t("uni-calender.WED")
},
THUText() {
return t("uni-calender.THU")
},
FRIText() {
return t("uni-calender.FRI")
},
SATText() {
return t("uni-calender.SAT")
},
SUNText() {
return t("uni-calender.SUN")
},
},
watch: {
date(newVal) {
// this.cale.setDate(newVal)
this.init(newVal)
},
startDate(val){
this.cale.resetSatrtDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
endDate(val){
this.cale.resetEndDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
selected(newVal) {
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
this.weeks = this.cale.weeks
}
},
created() {
// 获取日历方法实例
this.cale = new Calendar({
// date: new Date(),
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range,
})
// 选中某一天
// this.cale.setDate(this.date)
this.init(this.date)
// this.setDay
},
methods: {
// 取消穿透
clean() {},
bindDateChange(e) {
const value = e.detail.value + '-1'
const date = this.cale.getDate(value)
this.init(value)
this.$emit('monthSwitch', {
year:date.year,
month: Number(date.month)
})
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date)
},
/**
* 打开日历弹窗
*/
open() {
// 弹窗模式并且清理数据
if (this.clearDate && !this.insert) {
this.cale.cleanMultipleStatus()
// this.cale.setDate(this.date)
this.init(this.date)
}
this.show = true
this.$nextTick(() => {
setTimeout(() => {
this.aniMaskShow = true
}, 50)
})
},
/**
* 关闭日历弹窗
*/
close() {
this.aniMaskShow = false
this.$nextTick(() => {
setTimeout(() => {
this.show = false
this.$emit('close')
}, 300)
})
},
/**
* 确认按钮
*/
confirm() {
this.setEmit('confirm')
this.close()
},
/**
* 变化触发
*/
change() {
if (!this.insert) return
this.setEmit('change')
},
/**
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate
this.$emit('monthSwitch', {
year,
month: Number(month)
})
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
let {
year,
month,
date,
fullDate,
lunar,
extraInfo
} = this.calendar
this.$emit(name, {
range: this.cale.multipleStatus,
year,
month,
date,
fulldate: fullDate,
lunar,
extraInfo: extraInfo || {}
})
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable) return
this.calendar = weeks
// 设置多选
this.cale.setMultiple(this.calendar.fullDate)
this.weeks = this.cale.weeks
this.change()
},
/**
* 回到今天
*/
backtoday() {
console.log(this.cale.getDate(new Date()).fullDate);
let date = this.cale.getDate(new Date()).fullDate
// this.cale.setDate(date)
this.init(date)
this.change()
},
/**
* 上个月
*/
pre() {
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
this.setDate(preDate)
this.monthSwitch()
},
/**
* 下个月
*/
next() {
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
this.setDate(nextDate)
this.monthSwitch()
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.cale.getInfo(date)
}
}
}
</script>
<style lang="scss" scoped>
$uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
$uni-border-color: #EDEDED;
$uni-text-color: #333;
$uni-bg-color-hover:#f1f1f1;
$uni-font-size-base:14px;
$uni-text-color-placeholder: #808080;
$uni-color-subtitle: #555555;
$uni-text-color-grey:#999;
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--mask-show {
opacity: 1
}
.uni-calendar--fixed {
position: fixed;
/* #ifdef APP-NVUE */
bottom: 0;
/* #endif */
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
/* #ifndef APP-NVUE */
bottom: calc(var(--window-bottom));
z-index: 99;
/* #endif */
}
.uni-calendar--ani-show {
transform: translateY(0);
}
.uni-calendar__content {
// background-color: #fff;
}
.uni-calendar__header {
margin: 30rpx;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
// border-bottom-color: $uni-border-color;
// border-bottom-style: solid;
// border-bottom-width: 1px;
}
.uni-calendar--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
// padding: 0 15px;
}
.uni-calendar__backtoday {
position: absolute;
right: 0;
top: 25rpx;
padding: 0 5px;
padding-left: 10px;
height: 25px;
line-height: 25px;
font-size: 12px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
color: $uni-text-color;
background-color: $uni-bg-color-hover;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: 18px;
font-weight: 500;
color: $uni-text-color;
}
.uni-calendar__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.uni-calendar__header-btn {
width: 10px;
height: 10px;
border-left-color: $uni-text-color-placeholder;
border-left-style: solid;
border-left-width: 2px;
border-top-color: $uni-color-subtitle;
border-top-style: solid;
border-top-width: 2px;
}
.uni-calendar--left {
transform: rotate(-45deg);
}
.uni-calendar--right {
transform: rotate(135deg);
}
.uni-calendar__weeks {
position: relative;
border-bottom: solid 2rpx #f4f4f4;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-bottom: solid 2rpx #f4f4f4;
}
.uni-calendar__weeks-item {
flex: 1;
}
.uni-calendar__weeks-day {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
height: 45px;
border-bottom-color: #F4F4F4;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-calendar__weeks-day-text {
font-size: 12px;
color: #818181;
}
.uni-calendar__box {
position: relative;
background:#fff;
}
.uni-calendar__box-bg {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uni-text-color-grey;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
line-height: 1;
/* #endif */
}
</style>

350
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/components/uni-calendar/util.js Normal file
View File

@@ -0,0 +1,350 @@
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
selected,
startDate,
endDate,
range
} = {}) {
// 当前日期
this.date = this.getDate(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 范围开始
this.startDate = startDate
// 范围结束
this.endDate = endDate
this.range = range
// 多选状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
// this._getWeek(this.date.fullDate)
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.selectDate = this.getDate(date)
this._getWeek(this.selectDate.fullDate)
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: '',
after: '',
data: []
}
}
/**
* 重置开始日期
*/
resetSatrtDate(startDate) {
// 范围开始
this.startDate = startDate
}
/**
* 重置结束日期
*/
resetEndDate(endDate) {
// 范围结束
this.endDate = endDate
}
/**
* 获取任意时间
*/
getDate(date, AddDayCount = 0, str = 'day') {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
switch (str) {
case 'day':
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
break
case 'month':
if (dd.getDate() === 31) {
dd.setDate(dd.getDate() + AddDayCount)
} else {
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
}
break
case 'year':
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
break
}
const y = dd.getFullYear()
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays(firstDay, full) {
let dateArr = []
for (let i = firstDay; i > 0; i--) {
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
return dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys(dateData, full) {
let dateArr = []
let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) {
let nowDate = full.year + '-' + (full.month < 10 ?
full.month : full.month) + '-' + (i < 10 ?
'0' + i : i)
// 是否今天
let isDay = fullDate === nowDate
// 获取打点信息
let info = this.selected && this.selected.find((item) => {
if (this.dateEqual(nowDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
disableBefore = this.dateCompare(this.startDate, nowDate)
}
if (this.endDate) {
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
disableAfter = this.dateCompare(nowDate, this.endDate)
}
let multiples = this.multipleStatus.data
let checked = false
let multiplesStatus = -1
if (this.range) {
if (multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, nowDate)
})
}
if (multiplesStatus !== -1) {
checked = true
}
}
let data = {
fullDate: nowDate,
year: full.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter),
isDay
}
if (info) {
data.extraInfo = info
}
dateArr.push(data)
}
return dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays(surplus, full) {
let dateArr = []
for (let i = 1; i < surplus + 1; i++) {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
return dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
}
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
return dateInfo
}
/**
* 比较时间大小
*/
dateCompare(startDate, endDate) {
// 计算截止时间
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
if (startDate <= endDate) {
return true
} else {
return false
}
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
// 计算截止时间
before = new Date(before.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
let {
before,
after
} = this.multipleStatus
if (!this.range) return
if (before && after) {
this.multipleStatus.before = ''
this.multipleStatus.after = ''
this.multipleStatus.data = []
} else {
if (!before) {
this.multipleStatus.before = fullDate
} else {
this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
}
}
this._getWeek(fullDate)
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek(dateData) {
const {
year,
month
} = this.getDate(dateData)
let firstDay = new Date(year, month - 1, 1).getDay()
let currentDay = new Date(year, month, 0).getDate()
let dates = {
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
nextMonthDays: [], // 下个月开始几天
weeks: []
}
let canlender = []
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
let weeks = {}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for (let i = 0; i < canlender.length; i++) {
if (i % 7 === 0) {
weeks[parseInt(i / 7)] = new Array(7)
}
weeks[parseInt(i / 7)][i % 7] = canlender[i]
}
this.canlender = canlender
this.weeks = weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export default Calendar

88
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/package.json Normal file
View File

@@ -0,0 +1,88 @@
{
"id": "uni-calendar",
"displayName": "uni-calendar 日历",
"version": "1.4.5",
"description": "日历组件",
"keywords": [
"uni-ui",
"uniui",
"日历",
"",
"打卡",
"日历选择"
],
"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": "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"
}
}
}
}
}

103
project-wl-siji-uniapp-vue3/pages/user/components/Calendar/readme.md Normal file
View File

@@ -0,0 +1,103 @@
## Calendar 日历
> **组件名：uni-calendar**
> 代码块： `uCalendar`
日历组件
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)
> - 仅支持自定义组件模式
> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
### 安装方式
本组件符合[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
<view>
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@change="change"
/>
</view>
```
### 通过方法打开日历
需要设置 `insert` 为 `false`
```html
<view>
<uni-calendar
ref="calendar"
:insert="false"
@confirm="confirm"
/>
<button @click="open">打开日历</button>
</view>
```
```javascript
export default {
data() {
return {};
},
methods: {
open(){
this.$refs.calendar.open();
},
confirm(e) {
console.log(e);
}
}
};
```
## API
### Calendar Props
| 属性名 | 类型 | 默认值| 说明 |
| | |
| date | String |- | 自定义当前时间，默认为今天 |
| lunar | Boolean | false | 显示农历 |
| startDate | String |- | 日期选择范围-开始日期 |
| endDate | String |- | 日期选择范围-结束日期 |
| range | Boolean | false | 范围选择 |
| insert | Boolean | false | 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
|clearDate |Boolean |true |弹窗模式是否清空上次选择内容 |
| selected | Array |- | 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
|showMonth | Boolean | true | 是否显示月份为背景 |
### Calendar Events
| 事件名 | 说明 |返回值|
| | | |
| open | 弹出日历组件，`insert :false` 时生效|- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)

75
project-wl-siji-uniapp-vue3/pages/user/components/CarInfo.vue Normal file
View File

@@ -0,0 +1,75 @@
<!-- 车辆信息 -->
<template>
<!-- end -->
<view class="carInfo">
<image class="carImage" src="@/static/sj_demo_carImg.jpg" mode=""></image>
<view class="info">
<view class="line">
<text class="tit">车辆编号</text><text>{{data.id}}</text>
</view>
<view class="line">
<text class="tit">车辆号牌</text><text>{{data.licensePlate}}</text>
</view>
<view class="line">
<text class="tit">车型</text><text>{{data.truckType}}</text>
</view>
<view class="line">
<text class="tit">载重</text><text>{{data.allowableLoad}}吨</text>
</view>
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getCarInfo } from '@/pages/api/user.js';
// ------定义变量------
const data = ref({});
// 生命周期 获取车辆信息
onMounted(async () => {
await getCarInfo()
.then(res => {
if (res.code == 200) {
if (res.data == null){
return false
}
data.value = res.data
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
})
</script>
<style lang="scss" scoped>
.carInfo{
padding: 30rpx;
.carImage{
width: 100%;
border-radius: 16rpx;
}
.info{
background: var(--neutral-color-white);
border-radius: 20rpx;
padding:40rpx;
margin-top: 24rpx;
font-size: var(--font-size-14);
.line{
display: flex;
justify-content: space-between;
line-height: 80rpx;
color: var(--neutral-color-main);
.tit{
color: var(--neutral-color-font);
}
}
}
}
</style>

230
project-wl-siji-uniapp-vue3/pages/user/components/ChangePass.vue Normal file
View File

@@ -0,0 +1,230 @@
<!-- 更改密码 -->
<template>
<!-- 登录表单 手机号、验证码 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="phone"><uni-easyinput class="item" v-model="fromInfo.phone" :clearable="false" placeholder="请输入已绑定手机号" /></uni-forms-item>
<uni-forms-item name="verifyCode">
<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" :clearable="false" placeholder="请输入验证码" />
<view class="codeBox">
<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
</view>
</uni-forms-item>
<uni-forms-item name="pass"><uni-easyinput class="item" v-model="fromInfo.pass" placeholder="请输入新密码" /></uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>确认修改</text>
</view>
<!-- end -->
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
import { getsmsCode, changePass } from '@/pages/api/user.js'
//vuex获取储存数据
const store = useStore();
const customForm = ref();
const isVerifySuccess = ref(false);
// 表单数据
const fromInfo = reactive({
phone: '', //手机号
verifyCode: '' ,// 验证码
pass:'', // 新密码
});
// 验证码倒计时数据
const codeInfo = reactive({
show: true,
timer: null,
times: 60
});
// 表单校验
const customRules = reactive({
phone: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入手机号'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
},
pass: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入新密码'
}
]
},
});
// 获取验证码
const getCode = async () => {
let p = fromInfo.phone;
isVerifySuccess.value = isPhone(p);
if (isVerifySuccess.value) {
timeCountdown(codeInfo);
const parent = {
phone: phone.value
};
// 获取手机验证码
const {data} = await getsmsCode(parent)
if(ddata.code == 0 || data.code == 200){
uni.showToast({
title: '验证码已发送成功',
duration: 1000,
icon: 'none'
});
}else{
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
} else {
return uni.showToast({
title: '手机号输入错误！请重新输入',
duration: 1000,
icon: 'none'
});
}
};
// 修改密码提交
const handleSubmit = async() => {
// 表单校验
const valid = await customForm.value.validate();
if (valid) {
// 修改密码
await changePass(fromInfo)
.then(res => {
if (res.code === 200) {
// 密码修改成功 、重新登录
uni.showToast({
title: '密码修改成功！',
duration: 1000,
icon: 'none'
});
setTimeout(()=>{
goLogin()
}, 500)
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误！请重新输入
// 账号输入错误！请重新输入
}
})
.catch(err => {});
}
};
// 去手机登录页面
const goLogin = () => {
uni.redirectTo({
url: '/pages/login/user'
});
};
</script>
<style lang="scss" scoped>
.loginMain {
background-color: #fff;
height: calc(100vh - 90rpx);
::v-deep .uni-input-input{
color: var(--neutral-color-main);
}
padding: 66rpx;
.item {
::v-deep .is-input-border {
padding: 30rpx 0;
font-weight: 400;
font-size: 32rpx;
line-height: 40rpx;
color: #797979;
letter-spacing: 0.36rpx;
border: 0 none;
border-bottom: 1px solid var(--neutral-color-background);
position: relative;
border-radius: 0;
.uni-easyinput__placeholder-class {
font-size: 32rpx;
color: var(--neutral-color-font);
letter-spacing: 0.36rpx;
}
.uni-easyinput__content-input {
padding-left: 0 !important;
font-size: 32rpx;
}
}
::v-deep .is-input-error-border {
border-bottom: 1px solid var(--essential-color-red);
margin-bottom: 44rpx;
}
::v-deep .content-clear-icon{
padding: 0;
font-size: 28rpx !important;
line-height: 46rpx;
}
::v-deep .uniui-eye-filled{
background: url(@/static/icon-close.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
::v-deep .uniui-eye-slash-filled{
background: url(@/static/icon-open.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
}
::v-deep .uni-forms-item__inner {
padding-bottom: 0;
}
::v-deep .uni-error-message {
bottom: -10rpx;
}
::v-deep .content-clear-icon {
margin-right: 30rpx;
}
.inputW{
::v-deep .is-input-border{
padding-right: 166rpx;
}
}
.codeBox {
position: absolute;
right: 40rpx;
top: 34rpx;
font-size: 28rpx;
color: #818181;
border-left: solid 4rpx #f4f4f4;
padding-left: 20rpx;
}
}
</style>

260
project-wl-siji-uniapp-vue3/pages/user/components/ChangePhon.vue Normal file
View File

@@ -0,0 +1,260 @@
<!-- 更改手机号 -->
<template>
<!-- 登录表单 手机号、验证码 -->
<view class="loginMain">
<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
<uni-forms-item name="phone">
<uni-easyinput class="item" v-model="fromInfo.phone" :clearable="false" :placeholder=" step == 1 ? '请输入已绑定手机号' : '请输入新手机号'" />
</uni-forms-item>
<uni-forms-item name="verifyCode">
<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" :clearable="false" placeholder="请输入验证码" />
<view class="codeBox">
<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
</view>
</uni-forms-item>
</uni-forms>
<!-- 按钮 -->
<view class="btnBox" style="padding-top:100rpx;">
<text class="button"
:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
@click="handleSubmit"
>{{step == 1 ? '下一步' : '确定绑定'}}</text>
</view>
<!-- end -->
</view>
<!-- end -->
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
import { getsmsCode, checksmsCode, bindPhone } from '@/pages/api/user.js'
//vuex获取储存数据
const store = useStore();
const customForm = ref();
const isVerifySuccess = ref(false);
const step = ref(1) // 1 换绑手机 老手机号验证 2 新手机号绑定
const time = ref(null) // 倒计时对象缓存 在切换下一步时清除用
// 表单数据
const fromInfo = reactive({
phone: '', //手机号
verifyCode: '' // 验证码
});
// 验证码倒计时数据
const codeInfo = reactive({
show: true,
timer: null,
times: 60
});
// 表单校验
const customRules = reactive({
phone: {
rules: [
{
required: true,
validateFunction: validatePhone,
errorMessage: '请输入手机号'
}
]
},
verifyCode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
}
]
}
});
// 获取验证码
const getCode = async () => {
let phone = fromInfo.phone;
isVerifySuccess.value = isPhone(phone);
if (isVerifySuccess.value) {
time.value = timeCountdown(codeInfo);
const parent = {
phone
};
// 获取手机验证码
const {data} = await getsmsCode(parent)
if(data.code == 0 || data.code == 200){
uni.showToast({
title: '验证码已发送成功',
duration: 1000,
icon: 'none'
});
}else{
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
} else {
return uni.showToast({
title: '手机号输入错误！请重新输入',
duration: 1000,
icon: 'none'
});
}
};
// 效验验证码通过进入下一步
const handleSubmit = async() => {
// 表单校验
const valid = await customForm.value.validate();
if (valid && step.value == 1) {
// 效验验证码
checkCode()
} else {
// 绑定手机号
bindPhoneHandle()
}
};
// 效验验证码
async function checkCode(){
// 效验验证码
await checksmsCode(fromInfo)
.then(res => {
if (res.code === 200) {
// 进入下一步
step.value = 2
// 清空输入框
fromInfo.phone = ''
fromInfo.verifyCode = ''
// 还原倒计时
codeInfo.show = true
codeInfo.times = 60
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误！请重新输入
// 账号输入错误！请重新输入
}
})
.catch(err => {});
}
// 绑定手机号
async function bindPhoneHandle(){
// 绑定手机号
await bindPhone(fromInfo)
.then(res => {
if (res.code === 200) {
// 绑定成功 重新登录
uni.showToast({
title: '绑定成功请重新登录！',
duration: 1000,
icon: 'none'
});
setTimeout(()=>{
goLogin()
}, 500)
goLogin()
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
// 密码输入错误！请重新输入
// 账号输入错误！请重新输入
}
})
.catch(err => {});
}
// 去手机登录页面
const goLogin = () => {
uni.redirectTo({
url: '/pages/login/user'
});
};
</script>
<style lang="scss" scoped>
.loginMain {
background-color: #fff;
height: calc(100vh - 90rpx);
::v-deep .uni-input-input{
color: var(--neutral-color-main);
}
padding: 66rpx;
.item {
::v-deep .is-input-border {
padding: 30rpx 0;
font-weight: 400;
font-size: 32rpx;
line-height: 40rpx;
color: #797979;
letter-spacing: 0.36rpx;
border: 0 none;
border-bottom: 1px solid var(--neutral-color-background);
position: relative;
border-radius: 0;
.uni-easyinput__placeholder-class {
font-size: 32rpx;
color: var(--neutral-color-font);
letter-spacing: 0.36rpx;
}
.uni-easyinput__content-input {
padding-left: 0 !important;
font-size: 32rpx;
}
}
::v-deep .is-input-error-border {
border-bottom: 1px solid var(--essential-color-red);
margin-bottom: 44rpx;
}
::v-deep .content-clear-icon{
padding: 0;
font-size: 28rpx !important;
line-height: 46rpx;
}
::v-deep .uniui-eye-filled{
background: url(@/static/icon-close.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
::v-deep .uniui-eye-slash-filled{
background: url(@/static/icon-open.png) 50% 50% no-repeat;
background-size: contain;
&:before{
color:transparent;
}
}
}
::v-deep .uni-forms-item__inner {
padding-bottom: 0;
}
::v-deep .uni-error-message {
bottom: -10rpx;
}
::v-deep .content-clear-icon {
margin-right: 30rpx;
}
.inputW{
::v-deep .is-input-border{
padding-right: 166rpx;
}
}
.codeBox {
position: absolute;
right: 40rpx;
top: 34rpx;
font-size: 28rpx;
color: #818181;
border-left: solid 4rpx #f4f4f4;
padding-left: 20rpx;
}
}
</style>

206
project-wl-siji-uniapp-vue3/pages/user/components/SystmSet.vue Normal file
View File

@@ -0,0 +1,206 @@
<!-- 我的- 系统设置 -->
<template>
<view class="systmSet">
<view class="navList">
<!-- <view class="line" @click="goDetails(`/pages/user/setCarrier?type=phone&title=换绑手机`)"> -->
<view class="line" @click="goDetails(``)">
<text>换绑手机</text>
<image class="icon" src="@/static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="goDetails(``)">
<!-- <view class="line" @click="goDetails(`/pages/user/setCarrier?type=pass&title=修改密码`)"> -->
<text>修改密码</text>
<image class="icon" src="@/static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="goDetails(`/pages/user/setCarrier?type=setMessage&title=消息通知设置`)">
<text>消息通知设置</text>
<image class="icon" src="@/static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="dialogToggle('clear', `清理缓存后会清空所有数据`, '清理')">
<text>清理缓存</text>
<image class="icon" src="@/static/sj_open_rit.png" mode=""></image>
</view>
</view>
<view class="navList">
<view class="back" @click="dialogToggle('back', '确定要退出登录？', '退出')">
<text>退出</text>
</view>
</view>
</view>
<!-- 提示窗示例 清理缓存、退出的提示 - start-->
<Popup ref="alertDialog" type="dialog">
<PopupDialog :type="msgType" cancelText="关闭" :confirmText="butText" :content="content" @confirm="confirmHandle"
@close="dialogClose"></PopupDialog>
</Popup>
<!-- 提示窗示例 清理缓存、退出的提示 - end-->
</template>
<script >
// 变量导入
import { ref, onMounted } from 'vue';
import Popup from '@/components/Popup/components/uni-popup/uni-popup.vue'
import PopupDialog from '@/components/Popup/components/uni-popup-dialog/uni-popup-dialog.vue'
export default {
data(){
return {
type:'clear',
msgType:'success',
content: '',
butText: '清理',
}
},
components:{
Popup,
PopupDialog
},
created() {
// 差量编译 只有在app中才纯在清理缓存的功能
// #ifdef APP-PLUS
this.formatSize()
// #endif
},
methods:{
// 计算缓存大小
formatSize() {
let that = this;
plus.cache.calculate(function(size) {
let sizeCache = parseInt(size);
if (sizeCache == 0) {
that.fileSizeString = "0B";
} else if (sizeCache < 1024) {
that.fileSizeString = sizeCache + "B";
} else if (sizeCache < 1048576) {
that.fileSizeString = (sizeCache / 1024).toFixed(2) + "KB";
} else if (sizeCache < 1073741824) {
that.fileSizeString = (sizeCache / 1048576).toFixed(2) + "MB";
} else {
that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "GB";
}
});
},
// 清楚缓存
clearCache() {
let that = this;
let os = plus.os.name;
that.formatSize();
if (parseInt(that.fileSizeString) <= 100){
uni.showToast({
icon:'none',
title: '没有缓存了',
duration: 2000
});
} else if (os == 'Android') {
let main = plus.android.runtimeMainActivity();
let sdRoot = main.getCacheDir();
let files = plus.android.invoke(sdRoot, "listFiles");
let len = files.length;
for (let i = 0; i < len; i++) {
let filePath = '' + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径
plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
if (entry.isDirectory) {
entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录
uni.showToast({
title: '缓存清理完成',
duration: 2000
});
that.formatSize(); // 重新计算缓存
}, function(e) {
console.log(e.message)
});
} else {
entry.remove();
}
}, function(e) {
console.log('文件路径读取失败')
});
}
} else { // ios
plus.cache.clear(function() {
uni.showToast({
title: '缓存清理完成',
duration: 2000
});
that.formatSize();
});
}
},
// 弹窗的点击事件设置对应的展示信息
dialogToggle(type, content, butText) {
this.type = type
this.content = content
this.butText = butText
this.$refs.alertDialog.open()
},
// 点击清理按钮清理缓存 点击退出直接退出
confirmHandle(){
this.type == 'clear' ? this.clearCache() : this.backlogin()
},
// 关闭弹窗
dialogClose(){
},
// 去详情页面
goDetails(url){
if (url == ''){
uni.showToast({
title: '抱歉 该功能暂未实现！',
duration: 2000,
icon: 'none'
});
return
}
uni.navigateTo({
url
})
},
// 退出登录
backlogin(){
this.goDetails('/pages/login/user')
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .uni-dialog-title{
padding:0;
}
::v-deep .uni-dialog-content{
padding: 80rpx 0 60rpx 0;
font-size: var(--font-size-16);
}
::v-deep .uni-dialog-content-text{
font-size: var(--font-size-16);
color: var(--neutral-color-main);
}
.systmSet{
.navList{
position: relative;
background: var(--neutral-color-white);
border-radius: 16rpx;
padding: 0rpx 48rpx;
margin: 40rpx 30rpx 80rpx 30rpx;
font-size: var(--font-size-16);
.line{
line-height: 114rpx;
border-bottom: solid 2rpx var(--neutral-color-cancel);
display: flex;
justify-content: space-between;
align-items: center;
.icon{
width: 48rpx;
height: 48rpx;
}
}
.line:last-child{
border: none;
}
}
.back{
text-align: center;
line-height: 120rpx;
font-size: var(--font-size-16);
}
}
</style>

107
project-wl-siji-uniapp-vue3/pages/user/components/TaskData.vue Normal file
View File

@@ -0,0 +1,107 @@
<!-- 车辆信息 -->
<template>
<view class="taskData">
<!-- 日历模块 - 使用uni的日历重写 - start -->
<Calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @monthSwitch="monthSwitch" >
<!-- 任务栏数据展示 -->
<view class="taskCont">
<TaskInfo :title="false" :data="taskData" class="task" />
</view>
</Calendar>
<!-- 日历模块 - start -->
</view>
</template>
<script setup>
// 模块、接口导入
import { ref,reactive, onMounted } from 'vue';
import TaskInfo from './TaskInfo.vue'
import Calendar from './Calendar/components/uni-calendar/uni-calendar.vue'
// 请求API
import { getTaskData } from '@/pages/api/user.js';
// ------定义变量------
// 日历的展示数据
const info = reactive({
lunar: true,
range: true,
insert: false,
selected: []
})
const taskData = ref({})
// 生命周期
onMounted(()=>{
const date = getDate(new Date())
getTask({year: date.year, month: date.month});
// 配置任务日历展示订单数量的数据处理 - 等日历展示处理后添加数据
setTimeout(() => {
info.date = getDate(new Date(),-30).fullDate
info.startDate = getDate(new Date(),-60).fullDate
info.endDate = getDate(new Date(),30).fullDate
info.selected = info.selected
}, 1000)
})
// 获取任务数据
async function getTask(params){
await getTaskData(params)
.then(res => {
if (res.code == 200) {
const { data } = res
// 任务数据赋值
taskData.value = data
// 日历中任务数量显示数据处理
info.selected = data.dailyMileage.map((n)=>{
if (getDate(n.dateTime).fullDate != getDate(new Date()).fullDate){
return {date: getDate(n.dateTime).fullDate, info: n.mileage}
}
}).filter(n => n != undefined)
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 通过左右箭头(和确认)改变月份 从新请求数据
function monthSwitch(e) {
getTask(e)
}
// 日期处理
function getDate(date, AddDayCount = 0) {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
// 获取AddDayCount天后的日期
dd.setDate(dd.getDate() + AddDayCount)
const y = dd.getFullYear()
// 获取当前月份的日期，不足10补0
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
// 获取当前几号，不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
</script>
<style lang="scss" >
.taskCont{
position: relative;
margin-bottom: 40rpx;
.task{
top: 0;
border-radius: 0;
}
}
</style>

73
project-wl-siji-uniapp-vue3/pages/user/components/TaskInfo.vue Normal file
View File

@@ -0,0 +1,73 @@
<!-- 月度任务信息 -->
<template>
<view class="teskInfo">
<view class="title" v-if="title">
<text> - 本月任务 - </text>
</view>
<view class="info">
<view class="cl" >
<view class="num">{{data.taskAmounts}}</view>
<view class="title">任务总量</view>
</view>
<view class="cl">
<view class="num">{{data.completedAmounts}}</view>
<view class="title">完成任务量</view>
</view>
<view class="cl" >
<view class="num">{{data.transportMileage}}</view>
<view class="title">运输里程(km)</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 导航
import UniNav from '@/components/Nav/index.vue';
const props = defineProps({
title: { // 是否展示标题 两个地方用一个有一个没用
type: Boolean,
default: true
},
data: { // 任务数据
type: Object,
default:{}
}
});
</script>
<style lang="scss" scoped>
.teskInfo{
text-align: center;
position: relative;
z-index: 1;
top: -180rpx;
background: var(--neutral-color-white);
border-radius: 16rpx;
padding: 26rpx 48rpx;
.title{
padding-bottom: 20rpx;
}
.info{
display: flex;
text-align: center;
justify-content: space-between;
line-height: 48rpx;
color: var(--neutral-color-main);
.cl{
flex: 1;
.num{
line-height: 100rpx;
font-weight: 600;
font-size: var(--font-size-18);
}
.title{
font-size: var(--font-size-12);
}
}
}
}
</style>

67
project-wl-siji-uniapp-vue3/pages/user/index.scss Normal file
View File

@@ -0,0 +1,67 @@
@import url(@/styles/theme.scss);
.userContainer {
.topbackground{
position: relative;
overflow: hidden;
height: 42vh;
&::before{
content: "";
position: absolute;
left: -50%;
z-index: 1;
width: 200vw;
border-radius: 100%;
bottom: 0;
height: 80vh;
background-color: var(--essential-color-red);
}
}
.container{
padding: 30rpx;
}
.myInfo{
width: 80%;
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 200rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
color: var(--neutral-color-white);
font-size: var(--font-size-14);
line-height: 60rpx;
.title{
font-weight: 600;
font-size: var(--font-size-18);
line-height: 80rpx;
}
.userIcon{
width: 130rpx;
height: 130rpx;
}
}
.navList{
position: relative;
top: -150rpx;
background: var(--neutral-color-white);
border-radius: 16rpx;
padding: 0rpx 48rpx;
.line{
line-height: 116rpx;
border-bottom: solid 2rpx var(--neutral-color-cancel);
display: flex;
justify-content: space-between;
align-items: center;
.icon{
width: 48rpx;
height: 48rpx;
}
}
.line:last-child{
border: none;
}
}
}

107
project-wl-siji-uniapp-vue3/pages/user/index.vue Normal file
View File

@@ -0,0 +1,107 @@
<!-- 我的首页 -->
<template>
<!-- start -->
<view class="userContainer">
<!-- 我的信息 -->
<view class="topbackground">
<view class="myInfo">
<image src="@/static/sj_userIcon.png" class="userIcon" mode=""></image>
<text class="title">{{userInfo.name}}</text>
<text>司机编号：{{userInfo.number}}</text>
<text>手机号：{{userInfo.phone}}</text>
</view>
</view>
<view class="container">
<!-- 本月任务信息 -->
<TaskInfo :data="taskData" />
<!-- end -->
<!-- 取件状态列表 -->
<view class="navList">
<view class="line" @click="goDetails(`/pages/user/carrier?type=carInfo&title=车辆信息`)">
<text>车辆信息</text>
<image class="icon" src="../../static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="goDetails(`/pages/user/carrier?type=taskData&title=任务数据`)">
<text>任务数据</text>
<image class="icon" src="../../static/sj_open_rit.png" mode=""></image>
</view>
<view class="line" @click="goDetails(`/pages/user/carrier?type=systmSet&title=系统设置`)">
<text>系统设置</text>
<image class="icon" src="../../static/sj_open_rit.png" mode=""></image>
</view>
</view>
</view>
</view>
<!-- footer -->
<UniFooter :pagePath="'pages/index/index'"></UniFooter>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 导航
import UniNav from '@/components/Nav/index.vue';
// 任务详情组件
import TaskInfo from './components/TaskInfo.vue';
// 底部导航
import UniFooter from '@/components/Footer/index.vue';
// 请求API
import { getTaskData, getUserInfo } from '@/pages/api/user.js';
// ------定义变量------
// 任务数据
const taskData = ref({})
// 车辆详细
const userInfo = ref({})
// 生命周期 - 获取任务、用户数据
onMounted(()=>{
getUser()
getTask()
})
// 获取用户信息
async function getUser (){
await getUserInfo()
.then(res => {
if (res.code == 200) {
userInfo.value = res.data
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 获取任务信息
async function getTask(){
const date = new Date()
const params = {
year: date.getFullYear(),
month: date.getMonth()+1 < 9 ? `0${date.getMonth()+1}` : date.getMonth()+1
}
await getTaskData(params)
.then(res => {
if (res.code == 200) {
taskData.value = res.data
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
}
// 去往其他页面
function goDetails(url){
uni.navigateTo({
url
})
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

77
project-wl-siji-uniapp-vue3/pages/user/setCarrier.vue Normal file
View File

@@ -0,0 +1,77 @@
<!-- 系统设置 容器页面 -->
<template>
<!-- end -->
<view class="userContainer">
<DetailsNav :title="title"></DetailsNav>
<!-- 换绑手机 -->
<!-- <CarInfo v-if="type == 'phone'" ></CarInfo> -->
<ChangePhon v-if="type == 'phone'" class="" />
<!-- 修改密码 -->
<ChangePass v-if="type == 'pass'" />
<!-- 消息通知设置-->
<!-- <SystmSet v-if="type == 'setMessage'" ></SystmSet> -->
<view v-if="type == 'setMessage'" class="setMessage">
<view class="desc"> <text>开启后，有新的任务通知你</text> </view>
<view class="set">
<text>允许给我推送任务通知</text>
<switch :checked='isMessage' color="#EF4F3F" @change="switchChange" />
</view>
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
// 导航
import DetailsNav from '@/components/DetailsNav/index.vue';
import ChangePhon from './components/ChangePhon.vue';
import ChangePass from './components/ChangePass.vue';
// ------定义变量------
const store = useStore(); //vuex获取储存数据
const title = ref('车辆信息')
const type = ref('')
const isMessage = ref(true) // 是否允许消息通知
// 初始化信息
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1].$page.options;
type.value = currentPage.type
title.value = currentPage.title
isMessage.value = store.state.isMessage
});
// 更改状态
const switchChange = function (e) {
// 全局报错
store.commit('setIsMessage', e.detail.value);
// 更新当前组件状态
isMessage.value = e.detail.value
}
</script>
<style lang="scss" scoped>
.setMessage{
padding-top: 40rpx;
.desc{
font-weight: 400;
font-size: 14px;
color: #818181;
padding: 20rpx 44rpx;
}
.set{
display: flex;
justify-content: space-between;
background-color: #ffffff;
font-weight: 400;
font-size: 16px;
padding: 30rpx 44rpx;
line-height: 64rpx;
color: #2A2929;
}
}
</style>

44
project-wl-siji-uniapp-vue3/project.config.json Normal file
View File

@@ -0,0 +1,44 @@
{
"appid": "__UNI__C91E013",
"compileType": "miniprogram",
"libVersion": "2.24.6",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"urlCheck": true,
"coverView": true,
"es6": true,
"postcss": true,
"lazyloadPlaceholderEnable": false,
"preloadBackgroundData": false,
"minified": true,
"autoAudits": false,
"uglifyFileName": false,
"uploadWithSourceMap": true,
"enhance": true,
"useMultiFrameRuntime": true,
"showShadowRootInWxmlPanel": true,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"useStaticServer": true,
"showES6CompileOption": false,
"checkInvalidKey": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"disableUseStrict": false,
"useCompilerPlugins": false,
"minifyWXML": true
},
"condition": {},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
},
"description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html"
}

7
project-wl-siji-uniapp-vue3/project.private.config.json Normal file
View File

@@ -0,0 +1,7 @@
{
"projectname": "kdy",
"setting": {
"compileHotReLoad": true
},
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html"
}

BIN
project-wl-siji-uniapp-vue3/static/goin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
project-wl-siji-uniapp-vue3/static/home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
project-wl-siji-uniapp-vue3/static/homeActive.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
project-wl-siji-uniapp-vue3/static/icon-close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
project-wl-siji-uniapp-vue3/static/icon-open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
project-wl-siji-uniapp-vue3/static/icon_go.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 452 B

BIN
project-wl-siji-uniapp-vue3/static/icon_more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 541 B

Some files were not shown because too many files have changed in this diff Show More