renguanyu111
3 years ago
commit
8f41fca621
546 changed files with 60779 additions and 0 deletions
@ -0,0 +1,16 @@ |
|||
{ // 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": [{ |
|||
"default" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"h5" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"type" : "uniCloud" |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
<script> |
|||
export default { |
|||
// 此处globalData为了演示其作用，不是uView框架的一部分 |
|||
globalData: { |
|||
// username: '白居易' |
|||
}, |
|||
onLaunch() { |
|||
// 1.1.0版本之前关于http拦截器代码，已平滑移动到/common/http.interceptor.js中 |
|||
// 注意，需要在/main.js中实例化Vue之后引入如下(详见文档说明)： |
|||
// import httpInterceptor from '@/common/http.interceptor.js' |
|||
// Vue.use(httpInterceptor, app) |
|||
// process.env.VUE_APP_PLATFORM 为通过js判断平台名称的方法，结果分别如下： |
|||
/** |
|||
* h5，app-plus(nvue下也为app-plus)，mp-weixin，mp-alipay...... |
|||
*/ |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/* #ifdef H5 */ |
|||
uni-page-head { display: none; } |
|||
/* #endif */ |
|||
@import "uview-ui/index.scss"; |
|||
@import "common/demo.scss"; |
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
MIT License |
|||
|
|||
Copyright (c) 2020 www.uviewui.com |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in all |
|||
copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|||
SOFTWARE. |
|||
@ -0,0 +1,141 @@ |
|||
<p align="center"> |
|||
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;"> |
|||
</p> |
|||
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3> |
|||
<h3 align="center">多平台快速开发的UI框架</h3> |
|||
|
|||
[](https://gitee.com/umicro/uView/stargazers) |
|||
[](https://gitee.com/umicro/uView/members) |
|||
[](https://github.com/umicro/uView) |
|||
[](https://github.com/umicro/uView) |
|||
[](https://github.com/umicro/uView/issues) |
|||
[](https://uviewui.com) |
|||
[](https://gitee.com/umicro/uView/releases) |
|||
[](https://en.wikipedia.org/wiki/MIT_License) |
|||
|
|||
## 说明 |
|||
|
|||
uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水 |
|||
|
|||
## [官方文档：https://www.uviewui.com](https://www.uviewui.com) |
|||
|
|||
### 官方1群：1042987248（已满） |
|||
### 官方2群：249718512（已满） |
|||
### 官方3群：1129077272（已满） |
|||
### 官方4群：1084514613（已满） |
|||
### 官方5群：863820668（已满） |
|||
### 官方6群：745721078（已满） |
|||
### 官方7群：627867855（已满） |
|||
### 官方8群：496409492（已满） |
|||
### 官方9群：828504448（已满） |
|||
### [点击加10群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
|||
|
|||
## 特性 |
|||
|
|||
- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序 |
|||
- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用 |
|||
- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨 |
|||
- 众多的常用页面和布局，让您专注逻辑，事半功倍 |
|||
- 详尽的文档支持，现代化的演示效果 |
|||
- 按需引入，精简打包体积 |
|||
|
|||
|
|||
## 预览 |
|||
|
|||
您可以通过**微信**扫码，查看最佳的演示效果。 |
|||
<br> |
|||
<br> |
|||
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" > |
|||
|
|||
|
|||
## 友情链接 |
|||
|
|||
#### **vue-admin-beautiful** —— [企业级、通用型中后台前端解决方案（基于vue/cli 4 最新版，同时支持电脑，手机，平板）](https://github.com/chuzhixin/vue-admin-beautiful) |
|||
|
|||
#### **vue-admin-beautiful** —— [在线演示](http://beautiful.panm.cn/vue-admin-beautiful/#/index) |
|||
|
|||
#### **pl-table** —— [ 完美解决 element 万级表格数据渲染卡顿问题](https://github.com/livelyPeng/pl-table) |
|||
|
|||
#### **luch-request** —— [基于 Promise 开发的 uni-app 跨平台、项目级别的请求库，它有更小的体积，易用的 api，方便简单的自定义能力](https://www.quanzhan.co/luch-request/) |
|||
<br> |
|||
|
|||
## 链接 |
|||
|
|||
- [官方文档](https://uviewui.com/) |
|||
- [更新日志](https://uviewui.com/components/changelog.html) |
|||
- [升级指南](https://uviewui.com/components/changelog.html) |
|||
- [关于我们](https://uviewui.com/cooperation/about.html) |
|||
|
|||
## 交流反馈 |
|||
|
|||
欢迎加入我们的QQ群交流反馈：[点此跳转](https://www.uviewui.com/components/addQQGroup.html) |
|||
|
|||
## 安装 |
|||
|
|||
#### **下载地址** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593) |
|||
|
|||
## 快速上手 |
|||
|
|||
1. `main.js`引入uView库 |
|||
```js |
|||
// main.js |
|||
import uView from 'uview-ui'; |
|||
Vue.use(uView); |
|||
``` |
|||
|
|||
2. `App.vue`引入基础样式(注意style标签需声明scss属性支持) |
|||
```css |
|||
/* App.vue */ |
|||
<style lang="scss"> |
|||
@import "uview-ui/index.scss"; |
|||
</style> |
|||
``` |
|||
|
|||
3. `uni.scss`引入全局scss变量文件 |
|||
```css |
|||
/* uni.scss */ |
|||
@import "uview-ui/theme.scss"; |
|||
``` |
|||
|
|||
4. `pages.json`配置easycom规则(按需引入) |
|||
|
|||
```js |
|||
// pages.json |
|||
{ |
|||
"easycom": { |
|||
// 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/" |
|||
// 下载安装方式 |
|||
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" |
|||
// npm安装方式 |
|||
// "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" |
|||
}, |
|||
// 此为本身已有的内容 |
|||
"pages": [ |
|||
// ...... |
|||
] |
|||
} |
|||
``` |
|||
|
|||
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 |
|||
|
|||
## 使用方法 |
|||
配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。 |
|||
|
|||
```html |
|||
<template> |
|||
<u-button>按钮</u-button> |
|||
</template> |
|||
``` |
|||
|
|||
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 |
|||
|
|||
|
|||
## 捐赠uView的研发 |
|||
|
|||
uView文档内容和框架源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。 |
|||
|
|||
<img src="https://uviewui.com/common/wechat.png" width="220" > |
|||
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" > |
|||
|
|||
## 版权信息 |
|||
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。 |
|||
@ -0,0 +1,22 @@ |
|||
// 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分)
|
|||
let hotSearchUrl = '/ebapi/store_api/hot_search'; |
|||
let indexUrl = '/ebapi/public_api/index'; |
|||
|
|||
// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
|
|||
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
|
|||
const install = (Vue, vm) => { |
|||
// 此处没有使用传入的params参数
|
|||
let getSearch = (params = {}) => vm.$u.get(hotSearchUrl, { |
|||
id: 2 |
|||
}); |
|||
|
|||
// 此处使用了传入的params参数，一切自定义即可
|
|||
let getInfo = (params = {}) => vm.$u.post(indexUrl, params); |
|||
|
|||
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
|
|||
vm.$u.api = {getSearch, getInfo}; |
|||
} |
|||
|
|||
export default { |
|||
install |
|||
} |
|||
@ -0,0 +1,41 @@ |
|||
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token
|
|||
// 同时，我们也可以在此使用getApp().globalData，如果你把token放在getApp().globalData的话，也是可以使用的
|
|||
const install = (Vue, vm) => { |
|||
Vue.prototype.$u.http.setConfig({ |
|||
baseUrl: 'https://api.youzixy.com', |
|||
// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
|
|||
// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
|
|||
// originalData: true,
|
|||
// 设置自定义头部content-type
|
|||
// header: {
|
|||
// 'content-type': 'xxx'
|
|||
// }
|
|||
}); |
|||
// 请求拦截，配置Token等参数
|
|||
Vue.prototype.$u.http.interceptor.request = (config) => { |
|||
config.header.Token = 'xxxxxx'; |
|||
// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式，见：https://uviewui.com/components/globalVariable.html
|
|||
// config.header.token = vm.token;
|
|||
// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
|
|||
// config.header.token = vm.$store.state.token;
|
|||
// 方式三，如果token放在了globalData，通过getApp().globalData获取
|
|||
// config.header.token = getApp().globalData.username;
|
|||
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的，所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
|
|||
// const token = uni.getStorageSync('token');
|
|||
// config.header.token = token;
|
|||
return config; |
|||
} |
|||
// 响应拦截，判断状态码是否通过
|
|||
Vue.prototype.$u.http.interceptor.response = (res) => { |
|||
// 如果把originalData设置为了true，这里得到将会是服务器返回的所有的原始数据
|
|||
// 判断可能变成了res.statueCode，或者res.data.code之类的，请打印查看结果
|
|||
if(res.code == 200) { |
|||
// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
|
|||
return res.data; |
|||
} else return false; |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
install |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
|
|||
// 创建 User 模块方法，方法内的方法共享 vm 对象
|
|||
let Address = (vm)=>{ |
|||
return { |
|||
getAddressList:(params = {}) => { |
|||
return vm.$u.post('api/adress/show', params) |
|||
}, |
|||
addAddressList:(params = {}) => { |
|||
return vm.$u.post('api/adress', params) |
|||
}, |
|||
deleAddress:(params = {}) => { |
|||
return vm.$u.post('api/adress', params) |
|||
}, |
|||
getAddress:(params = {}) => { |
|||
return vm.$u.post('api/adress/adressXiangqing', params) |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 抛出当前模块
|
|||
export default Address |
|||
@ -0,0 +1,21 @@ |
|||
|
|||
// 创建 User 模块方法，方法内的方法共享 vm 对象
|
|||
let DingDan = (vm)=>{ |
|||
return { |
|||
// 所有订单
|
|||
getAllDingdan:(params = {}) => { |
|||
return vm.$u.post('api/xiadan/dingdanAll', params) |
|||
}, |
|||
// 单个订单详情
|
|||
getDingdan:(params = {}) => { |
|||
return vm.$u.post('api/xiadan/dingdanxiangqing', params) |
|||
}, |
|||
// 删除单个订单
|
|||
delect:(params = {}) => { |
|||
return vm.$u.post('api/xiadan/delect', params) |
|||
}, |
|||
} |
|||
} |
|||
|
|||
// 抛出当前模块
|
|||
export default DingDan |
|||
@ -0,0 +1,100 @@ |
|||
|
|||
// 创建 User 模块方法，方法内的方法共享 vm 对象
|
|||
let Duty = (vm)=>{ |
|||
return { |
|||
// 新定性考核列表
|
|||
newqualitative:(params = {}) => { |
|||
return vm.$u.post('api/eval/newqualitative', params) |
|||
}, |
|||
// 加减分NEW
|
|||
plusorminuspoints:(params = {}) => { |
|||
return vm.$u.post('api/eval/plusorminuspointsnew', params) |
|||
}, |
|||
// 添加上报数据
|
|||
addflowrationlog:(params = {}) => { |
|||
return vm.$u.post('api/eval/addflowrationlog', params) |
|||
}, |
|||
// 定量考核列表
|
|||
qualitativeevalration:(params = {}) => { |
|||
return vm.$u.post('api/eval/qualitativeevalration', params) |
|||
}, |
|||
// 获取新定性考核详细指标
|
|||
newgetqualdetailedtarget:(params = {}) => { |
|||
return vm.$u.post('api/eval/newgetqualdetailedtarget', params) |
|||
}, |
|||
// 获取定性考核项目列表
|
|||
aboutmytask:(params = {}) => { |
|||
return vm.$u.post('api/webach/aboutmytask', params) |
|||
}, |
|||
// 获取考核指标细则
|
|||
taskparametertitlelist:(params = {}) => { |
|||
return vm.$u.post('api/webach/taskparametertitlelist', params) |
|||
}, |
|||
// succes:(params = {}) => {
|
|||
// return vm.$u.post('login/succes', params)
|
|||
// },
|
|||
seeflowlog:(params = {}) => { |
|||
return vm.$u.post('api/eval/seeflowlog', params) |
|||
}, |
|||
lookdutkscoreflow:(params = {}) => { |
|||
return vm.$u.post('api/eval/lookdutkscoreflow', params) |
|||
}, |
|||
lookrationkscoreflow:(params = {}) => { |
|||
return vm.$u.post('api/eval/lookrationkscoreflow', params) |
|||
}, |
|||
examineflow:(params = {}) => { |
|||
return vm.$u.post('api/eval/examineflow', params) |
|||
}, |
|||
departmentlist:(params = {}) => { |
|||
return vm.$u.post('api/group/departmentlist', params) |
|||
}, |
|||
operation:(params = {}) => { |
|||
return vm.$u.post('api/qual/operation', params) |
|||
}, |
|||
liangOperation:(params = {}) => { |
|||
return vm.$u.post('api/quan/operation', params) |
|||
}, |
|||
sanction:(params = {}) => { |
|||
return vm.$u.post('api/quan/sanction', params) |
|||
}, |
|||
quantechart:(params = {}) => { |
|||
return vm.$u.post('api/quant/quantechart', params) |
|||
}, |
|||
captcha:(params = {}) => { |
|||
return vm.$u.post('api/base/captcha', params) |
|||
}, |
|||
scancodelogin:(params = {}) => { |
|||
return vm.$u.post('api/base/scancodelogin', params) |
|||
}, |
|||
getpostnature:(params = {}) => { |
|||
return vm.$u.post('fileapi/postweb/getpostnature', params) |
|||
}, |
|||
getpostration:(params = {}) => { |
|||
return vm.$u.post('fileapi/postweb/getpostration', params) |
|||
}, |
|||
get_ration_target_cont:(params = {}) => { |
|||
return vm.$u.post('fileapi/postweb/get_ration_target_cont', params) |
|||
}, |
|||
submit_ration_post_cont:(params = {}) => { |
|||
return vm.$u.post('fileapi/postweb/submit_ration_post_cont', params) |
|||
}, |
|||
get_nature_post_dimerons:(params = {}) => { |
|||
return vm.$u.post('fileapi/postweb/get_nature_post_dimerons', params) |
|||
}, |
|||
get_post_deimenso_info:(params = {}) => { |
|||
return vm.$u.post('fileapi/postweb/get_post_deimenso_info', params) |
|||
}, |
|||
send_us_nature_evaluation:(params = {}) => { |
|||
return vm.$u.post('fileapi/postweb/send_us_nature_evaluation', params) |
|||
}, |
|||
get_post_nature_son_target:(params = {}) => { |
|||
return vm.$u.post('fileapi/postweb/get_post_nature_son_target', params) |
|||
}, |
|||
|
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
// 抛出当前模块
|
|||
export default Duty |
|||
@ -0,0 +1,18 @@ |
|||
|
|||
// 创建 User 模块方法，方法内的方法共享 vm 对象
|
|||
let Login = (vm)=>{ |
|||
return { |
|||
|
|||
login:(params = {}) => { |
|||
return vm.$u.post('login/false', params) |
|||
}, |
|||
succes:(params = {}) => { |
|||
return vm.$u.post('login/succes', params) |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
// 抛出当前模块
|
|||
export default Login |
|||
@ -0,0 +1,15 @@ |
|||
|
|||
// 创建 User 模块方法，方法内的方法共享 vm 对象
|
|||
let Goods = (vm)=>{ |
|||
return { |
|||
// 所有订单
|
|||
getAllGoods:(params = {}) => { |
|||
return vm.$u.get('api/goods', params) |
|||
}, |
|||
|
|||
|
|||
} |
|||
} |
|||
|
|||
// 抛出当前模块
|
|||
export default Goods |
|||
@ -0,0 +1,28 @@ |
|||
|
|||
// 创建 User 模块方法，方法内的方法共享 vm 对象
|
|||
let Pay = (vm)=>{ |
|||
return { |
|||
// 所有产品展示
|
|||
xiadan:(params = {}) => { |
|||
return vm.$u.post('xiadan', params) |
|||
}, |
|||
// 这里是支付以后 或者状态异常刷新订单状态的按钮接口
|
|||
find:(params = {}) => { |
|||
return vm.$u.get('find/', params) |
|||
}, |
|||
// 退款申请
|
|||
refundShenqing:(params = {}) => { |
|||
return vm.$u.post('xiadan/refundShenqing', params) |
|||
}, |
|||
byid:(params = {}) => { |
|||
return vm.$u.post('xiadan/byid/', params) |
|||
}, |
|||
xiadanFind:(params = {}) => { |
|||
return vm.$u.post('xiadan/find', params) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
|
|||
// 抛出当前模块
|
|||
export default Pay |
|||
File diff suppressed because it is too large
@ -0,0 +1,86 @@ |
|||
/* #ifndef APP-NVUE */ |
|||
view, |
|||
text { |
|||
box-sizing: border-box; |
|||
} |
|||
/* #endif */ |
|||
|
|||
/* start--演示页面使用的统一样式--start */ |
|||
.u-demo { |
|||
padding: 25px 20px; |
|||
} |
|||
|
|||
.u-demo-wrap { |
|||
border-width: 1px; |
|||
border-color: #ddd; |
|||
border-style: dashed; |
|||
background-color: rgb(250, 250, 250); |
|||
padding: 20px 10px; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.u-demo-area { |
|||
text-align: center; |
|||
} |
|||
|
|||
.u-no-demo-here { |
|||
color: $u-tips-color; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.u-demo-result-line { |
|||
border-width: 1px; |
|||
border-color: #ddd; |
|||
border-style: dashed; |
|||
padding: 5px 20px; |
|||
margin-top: 30px; |
|||
border-radius: 5px; |
|||
background-color: rgb(240, 240, 240); |
|||
color: $u-content-color; |
|||
font-size: 16px; |
|||
/* #ifndef APP-NVUE */ |
|||
word-break: break-word; |
|||
display: inline-block; |
|||
/* #endif */ |
|||
text-align: left; |
|||
|
|||
} |
|||
|
|||
.u-demo-title, |
|||
.u-config-title { |
|||
text-align: center; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.u-config-item { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
.u-config-title { |
|||
margin-top: 20px; |
|||
padding-bottom: 5px; |
|||
} |
|||
|
|||
.u-item-title { |
|||
position: relative; |
|||
font-size: 15px; |
|||
padding-left: 8px; |
|||
line-height: 1; |
|||
margin-bottom: 11px; |
|||
} |
|||
|
|||
.u-item-title:after { |
|||
position: absolute; |
|||
width: 4px; |
|||
top: -1px; |
|||
height: 16px; |
|||
/* #ifndef APP-NVUE */ |
|||
content: ''; |
|||
/* #endif */ |
|||
left: 0; |
|||
border-radius: 10px; |
|||
background-color: $u-content-color; |
|||
} |
|||
/* end--演示页面使用的统一样式--end */ |
|||
@ -0,0 +1,22 @@ |
|||
// 引入 User 模块
|
|||
import User from "./http.user.api.js"; |
|||
import Duty from "../common/api/http.duty.api.js"; |
|||
import Address from "./api/http.address.api.js"; |
|||
import Goods from "./api/https.goods.api.js"; |
|||
import Pay from "./api/https.pay.api.js"; |
|||
import DingDan from "./api/http.dingdan.api.js"; |
|||
|
|||
const install = (Vue, vm) => { |
|||
vm.$u.api = { |
|||
Duty:Duty(vm), |
|||
Goods:Goods(vm), |
|||
DingDan:DingDan(vm), |
|||
Pay:Pay(vm), |
|||
Address:Address(vm), |
|||
User:User(vm), |
|||
}; |
|||
} |
|||
|
|||
export default { |
|||
install |
|||
} |
|||
@ -0,0 +1,72 @@ |
|||
// common/http.interceptor.js
|
|||
|
|||
// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
|
|||
// 为一个Vue的实例，也即每个页面的"this"
|
|||
// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
|
|||
const install = (Vue, vm) => { |
|||
|
|||
var userToken1 ="" |
|||
var userKey1 ="" |
|||
|
|||
// 延迟才能取到缓存数据
|
|||
setTimeout(()=>{ |
|||
console.log("vm.$store.state.apiPass") |
|||
console.log(vm.$store.state.apiPass) |
|||
if (vm.$store.state.apiPass==2) { |
|||
|
|||
// console.log(sessionStorage.getItem('key'))
|
|||
// if (vm.$store.state.userKey==''||vm.$store.state.userToken=='') {
|
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/webindex?url=http://new.hxgk.group/sj/index.html&errorurl=http://new.hxgk.group/sj/index.html#/pages/login/login';
|
|||
// }else if(vm.$store.state.userKey==undefined||vm.$store.state.userToken==undefined){
|
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/webindex?url=http://new.hxgk.group/sj/index.html&errorurl=http://new.hxgk.group/sj/index.html#/pages/login/login';
|
|||
// }
|
|||
userToken1=vm.$store.state.userToken |
|||
userKey1=vm.$store.state.userKey |
|||
|
|||
} |
|||
},200); |
|||
// setTimeout(()=>{
|
|||
// console.log(sessionStorage.getItem('key'))
|
|||
// if (vm.$store.state.userKey==''||vm.$store.state.userToken=='') {
|
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/webindex?url=http://new.hxgk.group/sj/index.html&errorurl=http://new.hxgk.group/sj/index.html#/pages/login/login';
|
|||
// }else if(vm.$store.state.userKey==undefined||vm.$store.state.userToken==undefined){
|
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/webindex?url=http://new.hxgk.group/sj/index.html&errorurl=http://new.hxgk.group/sj/index.html#/pages/login/login';
|
|||
// }
|
|||
// console.log("userTokenuserTokenuserToken")
|
|||
// userToken1=vm.$store.state.userToken
|
|||
// userKey1=vm.$store.state.userKey
|
|||
// },200);
|
|||
// setTimeout(()=>{
|
|||
// // console.log(sessionStorage.getItem('key'))
|
|||
// if (vm.$store.state.userKey==''||vm.$store.state.userToken=='') {
|
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/webindex?url=http://new.hxgk.group/sj/index.html';
|
|||
// }else if(vm.$store.state.userKey==undefined||vm.$store.state.userToken==undefined){
|
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/webindex?url=http://new.hxgk.group/sj/index.html';
|
|||
// }
|
|||
// userToken1=vm.$store.state.userToken
|
|||
// userKey1=vm.$store.state.userKey
|
|||
// },200);
|
|||
setTimeout(()=>{ |
|||
Vue.prototype.$u.http.setConfig({ |
|||
// baseUrl: 'http://hxgk.user.phone/api',
|
|||
baseUrl: 'http://new.hxgk.group/api', |
|||
loadingText: '努力加载中~', |
|||
loadingTime: 800, |
|||
// 设置自定义头部content-type
|
|||
header: { |
|||
'user-token': userToken1, |
|||
"user-key": userKey1, |
|||
// 'user-token': 'd0b27f36e0d7dfdf883dfe0000069ca182078ed2',
|
|||
// "user-key": '4fb8e8697c366be03e8fc96319b98524'
|
|||
} |
|||
}); |
|||
},500); |
|||
|
|||
|
|||
// 此为自定义配置参数，具体参数见上方说明
|
|||
|
|||
} |
|||
|
|||
export default { |
|||
install |
|||
} |
|||
@ -0,0 +1,96 @@ |
|||
// common/http.interceptor.js
|
|||
|
|||
// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
|
|||
// 为一个Vue的实例，也即每个页面的"this"
|
|||
// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
|
|||
const install = (Vue, vm) => { |
|||
// 请求拦截部分，如配置，每次请求前都会执行
|
|||
Vue.prototype.$u.http.interceptor.request = (config) => { |
|||
config.header['user-token'] = vm.$store.state.userToken |
|||
config.header['user-key'] = vm.$store.state.userKey |
|||
config.header.Token = 'xxxxxx'; |
|||
|
|||
return config; |
|||
// 如果return一个false值，则会取消本次请求
|
|||
// if(config.url == '/user/rest') return false; // 取消某次请求
|
|||
} |
|||
// 请求拦截，配置Token等参数
|
|||
// Vue.prototype.$u.http.setConfig({
|
|||
// // baseUrl: 'http://hxgk.user.phone/api',
|
|||
// baseUrl: 'http://new.hxgk.group/api',
|
|||
// loadingText: '努力加载中~',
|
|||
// loadingTime: 800,
|
|||
// // 设置自定义头部content-type
|
|||
// header: {
|
|||
// 'user-token': userToken1,
|
|||
// "user-key": userKey1,
|
|||
// // 'user-token': 'd74c163ea3f9697b532e0f5cfeda5a90c71b36a4',
|
|||
// // "user-key": 'f782e7cfdf4732fb296f16359590d6ad'
|
|||
// }
|
|||
// });
|
|||
// console.log("heard")
|
|||
// console.log(sessionStorage.getItem('key'))
|
|||
// console.log(sessionStorage.getItem('key'))
|
|||
|
|||
|
|||
// 线上
|
|||
// var userToken1 =""
|
|||
// var userKey1 =""
|
|||
// 内网
|
|||
var userToken1 ='' |
|||
var userKey1 ='' |
|||
|
|||
|
|||
setTimeout(()=>{ |
|||
// userToken1=vm.$store.state.userToken
|
|||
// userKey1=vm.$store.state.userKey
|
|||
// alert("vm.$store.state.apiPass")
|
|||
// alert(vm.$store.state.apiPass)
|
|||
if(vm.$store.state.apiPass==2){ |
|||
// alert("1")
|
|||
// alert(vm.$store.state.userToken)
|
|||
// alert(vm.$store.state.userKey)
|
|||
// console.log(sessionStorage.getItem('key'))
|
|||
// if (vm.$store.state.userKey==''||vm.$store.state.userToken=='') {
|
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/webindex?url=http://new.hxgk.group/sj/index.html&errorurl=http://new.hxgk.group/sj/index.htmlsj/index.html#/pages/login/login';
|
|||
// }else if(vm.$store.state.userKey==undefined||vm.$store.state.userToken==undefined){
|
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/webindex?url=http://new.hxgk.group/sj/index.html&errorurl=http://new.hxgk.group/sj/index.htmlsj/index.html#/pages/login/login';
|
|||
// }
|
|||
// userToken1=vm.$store.state.userToken
|
|||
// userKey1=vm.$store.state.userKey
|
|||
} |
|||
|
|||
},200); |
|||
setTimeout(()=>{ |
|||
console.log("userKey1") |
|||
console.log(userKey1) |
|||
Vue.prototype.$u.http.setConfig({ |
|||
// 本地
|
|||
// baseUrl: 'http://hxgk.user.phone',
|
|||
// 内网
|
|||
baseUrl: 'http://kpi.hxgk.net', |
|||
// 线上
|
|||
// baseUrl: 'http://new.hxgk.group/api',
|
|||
loadingText: '努力加载中~', |
|||
loadingTime: 800, |
|||
// 设置自定义头部content-type
|
|||
header: { |
|||
// 'user-token': userToken1,
|
|||
// "user-key": userKey1,
|
|||
// 'user-token': userToken1,
|
|||
// "user-key":userKey1,
|
|||
|
|||
// 'user-token': 'd0b27f36e0d7dfdf883dfe0000069ca182078ed2',
|
|||
// "user-key": '4fb8e8697c366be03e8fc96319b98524'
|
|||
} |
|||
}); |
|||
},500); |
|||
|
|||
|
|||
// 此为自定义配置参数，具体参数见上方说明
|
|||
|
|||
} |
|||
|
|||
export default { |
|||
install |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
|
|||
// 创建 User 模块方法，方法内的方法共享 vm 对象
|
|||
let User = (vm)=>{ |
|||
return { |
|||
getSearch:(params = {}) => { |
|||
return vm.$u.get('api/yanglaojujiaApp/admin/roomSum', params) |
|||
}, |
|||
indexImg:(params = {}) => { |
|||
return vm.$u.get('api/index', params) |
|||
}, |
|||
mycontent:(params = {}) => { |
|||
return vm.$u.post('api/webach/mycontent', params) |
|||
}, |
|||
stafflist:(params = {}) => { |
|||
return vm.$u.post('hrapi/staff/archiveslist', params) |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 抛出当前模块
|
|||
export default User |
|||
@ -0,0 +1,585 @@ |
|||
module.exports = { |
|||
list: [{ |
|||
"letter": "A", |
|||
"data": [{ |
|||
"name": "阿拉斯加", |
|||
"mobile": "13588889999", |
|||
"keyword": "阿拉斯加ABA13588889999" |
|||
}, |
|||
{ |
|||
"name": "阿克苏", |
|||
"mobile": "0551-4386721", |
|||
"keyword": "阿克苏AKESU0551-4386721" |
|||
}, |
|||
{ |
|||
"name": "阿拉善", |
|||
"mobile": "4008009100", |
|||
"keyword": "阿拉善ALASHAN4008009100" |
|||
}, |
|||
{ |
|||
"name": "阿勒泰", |
|||
"mobile": "13588889999", |
|||
"keyword": "阿勒泰ALETAI13588889999" |
|||
}, |
|||
{ |
|||
"name": "阿里", |
|||
"mobile": "13588889999", |
|||
"keyword": "阿里ALI13588889999" |
|||
}, |
|||
{ |
|||
"name": "安阳", |
|||
"mobile": "13588889999", |
|||
"keyword": "13588889999安阳ANYANG" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "B", |
|||
"data": [{ |
|||
"name": "白城", |
|||
"mobile": "该主子没有留电话~", |
|||
"keyword": "白城BAICHENG" |
|||
}, |
|||
{ |
|||
"name": "白山", |
|||
"mobile": "13588889999", |
|||
"keyword": "白山BAISHAN13588889999" |
|||
}, |
|||
{ |
|||
"name": "白银", |
|||
"mobile": "13588889999", |
|||
"keyword": "白银BAIYIN13588889999" |
|||
}, |
|||
{ |
|||
"name": "保定", |
|||
"mobile": "13588889999", |
|||
"keyword": "保定BAODING13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "C", |
|||
"data": [{ |
|||
"name": "沧州", |
|||
"mobile": "13588889999", |
|||
"keyword": "沧州CANGZHOU13588889999" |
|||
}, |
|||
{ |
|||
"name": "长春", |
|||
"mobile": "13588889999", |
|||
"keyword": "长春CHANGCHUN13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "D", |
|||
"data": [{ |
|||
"name": "大理", |
|||
"mobile": "13588889999", |
|||
"keyword": "大理DALI13588889999" |
|||
}, |
|||
{ |
|||
"name": "大连", |
|||
"mobile": "13588889999", |
|||
"keyword": "大连DALIAN13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "E", |
|||
"data": [{ |
|||
"name": "鄂尔多斯", |
|||
"mobile": "13588889999", |
|||
"keyword": "鄂尔多斯EERDUOSI13588889999" |
|||
}, |
|||
{ |
|||
"name": "恩施", |
|||
"mobile": "13588889999", |
|||
"keyword": "恩施ENSHI13588889999" |
|||
}, |
|||
{ |
|||
"name": "鄂州", |
|||
"mobile": "13588889999", |
|||
"keyword": "鄂州EZHOU13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "F", |
|||
"data": [{ |
|||
"name": "防城港", |
|||
"mobile": "该主子没有留电话~", |
|||
"keyword": "防城港FANGCHENGGANG" |
|||
}, |
|||
{ |
|||
"name": "抚顺", |
|||
"mobile": "13588889999", |
|||
"keyword": "抚顺FUSHUN13588889999" |
|||
}, |
|||
{ |
|||
"name": "阜新", |
|||
"mobile": "13588889999", |
|||
"keyword": "阜新FUXIN13588889999" |
|||
}, |
|||
{ |
|||
"name": "阜阳", |
|||
"mobile": "13588889999", |
|||
"keyword": "阜阳FUYANG13588889999" |
|||
}, |
|||
{ |
|||
"name": "抚州", |
|||
"mobile": "13588889999", |
|||
"keyword": "抚州FUZHOU13588889999" |
|||
}, |
|||
{ |
|||
"name": "福州", |
|||
"mobile": "13588889999", |
|||
"keyword": "福州FUZHOU13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "G", |
|||
"data": [{ |
|||
"name": "甘南", |
|||
"mobile": "13588889999", |
|||
"keyword": "甘南GANNAN13588889999" |
|||
}, |
|||
{ |
|||
"name": "赣州", |
|||
"mobile": "13588889999", |
|||
"keyword": "赣州GANZHOU13588889999" |
|||
}, |
|||
{ |
|||
"name": "甘孜", |
|||
"mobile": "13588889999", |
|||
"keyword": "甘孜GANZI13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "H", |
|||
"data": [{ |
|||
"name": "哈尔滨", |
|||
"mobile": "13588889999", |
|||
"keyword": "哈尔滨HAERBIN13588889999" |
|||
}, |
|||
{ |
|||
"name": "海北", |
|||
"mobile": "13588889999", |
|||
"keyword": "海北HAIBEI13588889999" |
|||
}, |
|||
{ |
|||
"name": "海东", |
|||
"mobile": "13588889999", |
|||
"keyword": "海东HAIDONG13588889999" |
|||
}, |
|||
{ |
|||
"name": "海口", |
|||
"mobile": "13588889999", |
|||
"keyword": "海口HAIKOU13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "I", |
|||
"data": [{ |
|||
"name": "ice", |
|||
"mobile": "13588889999", |
|||
"keyword": "佳木斯JIAMUSI13588889999" |
|||
}] |
|||
}, |
|||
{ |
|||
"letter": "J", |
|||
"data": [{ |
|||
"name": "佳木斯", |
|||
"mobile": "13588889999", |
|||
"keyword": "佳木斯JIAMUSI13588889999" |
|||
}, |
|||
{ |
|||
"name": "吉安", |
|||
"mobile": "13588889999", |
|||
"keyword": "吉安JIAN13588889999" |
|||
}, |
|||
{ |
|||
"name": "江门", |
|||
"mobile": "13588889999", |
|||
"keyword": "江门JIANGMEN13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "K", |
|||
"data": [{ |
|||
"name": "开封", |
|||
"mobile": "13588889999", |
|||
"keyword": "开封KAIFENG13588889999" |
|||
}, |
|||
{ |
|||
"name": "喀什", |
|||
"mobile": "13588889999", |
|||
"keyword": "喀什KASHI13588889999" |
|||
}, |
|||
{ |
|||
"name": "克拉玛依", |
|||
"mobile": "13588889999", |
|||
"keyword": "克拉玛依KELAMAYI13588889999" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "L", |
|||
"data": [{ |
|||
"name": "来宾", |
|||
"mobile": "13588889999", |
|||
"keyword": "来宾LAIBIN13588889999" |
|||
}, |
|||
{ |
|||
"name": "兰州", |
|||
"mobile": "13588889999", |
|||
"keyword": "兰州LANZHOU13588889999" |
|||
}, |
|||
{ |
|||
"name": "拉萨", |
|||
"mobile": "13588889999", |
|||
"keyword": "拉萨LASA13588889999" |
|||
}, |
|||
{ |
|||
"name": "乐山", |
|||
"mobile": "13588889999", |
|||
"keyword": "乐山LESHAN13588889999" |
|||
}, |
|||
{ |
|||
"name": "凉山", |
|||
"mobile": "13588889999", |
|||
"keyword": "凉山LIANGSHAN13588889999" |
|||
}, |
|||
{ |
|||
"name": "连云港", |
|||
"mobile": "13588889999", |
|||
"keyword": "连云港LIANYUNGANG13588889999" |
|||
}, |
|||
{ |
|||
"name": "聊城", |
|||
"mobile": "18322223333", |
|||
"keyword": "聊城LIAOCHENG18322223333" |
|||
}, |
|||
{ |
|||
"name": "辽阳", |
|||
"mobile": "18322223333", |
|||
"keyword": "辽阳LIAOYANG18322223333" |
|||
}, |
|||
{ |
|||
"name": "辽源", |
|||
"mobile": "18322223333", |
|||
"keyword": "辽源LIAOYUAN18322223333" |
|||
}, |
|||
{ |
|||
"name": "丽江", |
|||
"mobile": "18322223333", |
|||
"keyword": "丽江LIJIANG18322223333" |
|||
}, |
|||
{ |
|||
"name": "临沧", |
|||
"mobile": "18322223333", |
|||
"keyword": "临沧LINCANG18322223333" |
|||
}, |
|||
{ |
|||
"name": "临汾", |
|||
"mobile": "18322223333", |
|||
"keyword": "临汾LINFEN18322223333" |
|||
}, |
|||
{ |
|||
"name": "临夏", |
|||
"mobile": "18322223333", |
|||
"keyword": "临夏LINXIA18322223333" |
|||
}, |
|||
{ |
|||
"name": "临沂", |
|||
"mobile": "18322223333", |
|||
"keyword": "临沂LINYI18322223333" |
|||
}, |
|||
{ |
|||
"name": "林芝", |
|||
"mobile": "18322223333", |
|||
"keyword": "林芝LINZHI18322223333" |
|||
}, |
|||
{ |
|||
"name": "丽水", |
|||
"mobile": "18322223333", |
|||
"keyword": "丽水LISHUI18322223333" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "M", |
|||
"data": [{ |
|||
"name": "眉山", |
|||
"mobile": "15544448888", |
|||
"keyword": "眉山MEISHAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "梅州", |
|||
"mobile": "15544448888", |
|||
"keyword": "梅州MEIZHOU15544448888" |
|||
}, |
|||
{ |
|||
"name": "绵阳", |
|||
"mobile": "15544448888", |
|||
"keyword": "绵阳MIANYANG15544448888" |
|||
}, |
|||
{ |
|||
"name": "牡丹江", |
|||
"mobile": "15544448888", |
|||
"keyword": "牡丹江MUDANJIANG15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "N", |
|||
"data": [{ |
|||
"name": "南昌", |
|||
"mobile": "15544448888", |
|||
"keyword": "南昌NANCHANG15544448888" |
|||
}, |
|||
{ |
|||
"name": "南充", |
|||
"mobile": "15544448888", |
|||
"keyword": "南充NANCHONG15544448888" |
|||
}, |
|||
{ |
|||
"name": "南京", |
|||
"mobile": "15544448888", |
|||
"keyword": "南京NANJING15544448888" |
|||
}, |
|||
{ |
|||
"name": "南宁", |
|||
"mobile": "15544448888", |
|||
"keyword": "南宁NANNING15544448888" |
|||
}, |
|||
{ |
|||
"name": "南平", |
|||
"mobile": "15544448888", |
|||
"keyword": "南平NANPING15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "O", |
|||
"data": [{ |
|||
"name": "欧阳", |
|||
"mobile": "15544448888", |
|||
"keyword": "欧阳ouyang15544448888" |
|||
}] |
|||
}, |
|||
{ |
|||
"letter": "P", |
|||
"data": [{ |
|||
"name": "盘锦", |
|||
"mobile": "15544448888", |
|||
"keyword": "盘锦PANJIN15544448888" |
|||
}, |
|||
{ |
|||
"name": "攀枝花", |
|||
"mobile": "15544448888", |
|||
"keyword": "攀枝花PANZHIHUA15544448888" |
|||
}, |
|||
{ |
|||
"name": "平顶山", |
|||
"mobile": "15544448888", |
|||
"keyword": "平顶山PINGDINGSHAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "平凉", |
|||
"mobile": "15544448888", |
|||
"keyword": "平凉PINGLIANG15544448888" |
|||
}, |
|||
{ |
|||
"name": "萍乡", |
|||
"mobile": "15544448888", |
|||
"keyword": "萍乡PINGXIANG15544448888" |
|||
}, |
|||
{ |
|||
"name": "普洱", |
|||
"mobile": "15544448888", |
|||
"keyword": "普洱PUER15544448888" |
|||
}, |
|||
{ |
|||
"name": "莆田", |
|||
"mobile": "15544448888", |
|||
"keyword": "莆田PUTIAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "濮阳", |
|||
"mobile": "15544448888", |
|||
"keyword": "濮阳PUYANG15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "Q", |
|||
"data": [{ |
|||
"name": "黔东南", |
|||
"mobile": "15544448888", |
|||
"keyword": "黔东南QIANDONGNAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "黔南", |
|||
"mobile": "15544448888", |
|||
"keyword": "黔南QIANNAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "黔西南", |
|||
"mobile": "15544448888", |
|||
"keyword": "黔西南QIANXINAN15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "R", |
|||
"data": [{ |
|||
"name": "日喀则", |
|||
"mobile": "15544448888", |
|||
"keyword": "日喀则RIKAZE15544448888" |
|||
}, |
|||
{ |
|||
"name": "日照", |
|||
"mobile": "15544448888", |
|||
"keyword": "日照RIZHAO15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "S", |
|||
"data": [{ |
|||
"name": "三门峡", |
|||
"mobile": "15544448888", |
|||
"keyword": "三门峡SANMENXIA15544448888" |
|||
}, |
|||
{ |
|||
"name": "三明", |
|||
"mobile": "15544448888", |
|||
"keyword": "三明SANMING15544448888" |
|||
}, |
|||
{ |
|||
"name": "三沙", |
|||
"mobile": "15544448888", |
|||
"keyword": "三沙SANSHA15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "T", |
|||
"data": [{ |
|||
"name": "塔城", |
|||
"mobile": "15544448888", |
|||
"keyword": "塔城TACHENG15544448888" |
|||
}, |
|||
{ |
|||
"name": "漯河", |
|||
"mobile": "15544448888", |
|||
"keyword": "漯河TAHE15544448888" |
|||
}, |
|||
{ |
|||
"name": "泰安", |
|||
"mobile": "15544448888", |
|||
"keyword": "泰安TAIAN15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "W", |
|||
"data": [{ |
|||
"name": "潍坊", |
|||
"mobile": "15544448888", |
|||
"keyword": "潍坊WEIFANG15544448888" |
|||
}, |
|||
{ |
|||
"name": "威海", |
|||
"mobile": "15544448888", |
|||
"keyword": "威海WEIHAI15544448888" |
|||
}, |
|||
{ |
|||
"name": "渭南", |
|||
"mobile": "15544448888", |
|||
"keyword": "渭南WEINAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "文山", |
|||
"mobile": "15544448888", |
|||
"keyword": "文山WENSHAN15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "X", |
|||
"data": [{ |
|||
"name": "厦门", |
|||
"mobile": "15544448888", |
|||
"keyword": "厦门XIAMEN15544448888" |
|||
}, |
|||
{ |
|||
"name": "西安", |
|||
"mobile": "15544448888", |
|||
"keyword": "西安XIAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "湘潭", |
|||
"mobile": "15544448888", |
|||
"keyword": "湘潭XIANGTAN15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "Y", |
|||
"data": [{ |
|||
"name": "雅安", |
|||
"mobile": "15544448888", |
|||
"keyword": "雅安YAAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "延安", |
|||
"mobile": "15544448888", |
|||
"keyword": "延安YANAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "延边", |
|||
"mobile": "15544448888", |
|||
"keyword": "延边YANBIAN15544448888" |
|||
}, |
|||
{ |
|||
"name": "盐城", |
|||
"mobile": "15544448888", |
|||
"keyword": "盐城YANCHENG15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "Z", |
|||
"data": [{ |
|||
"name": "枣庄", |
|||
"mobile": "15544448888", |
|||
"keyword": "枣庄ZAOZHUANG15544448888" |
|||
}, |
|||
{ |
|||
"name": "张家界", |
|||
"mobile": "15544448888", |
|||
"keyword": "张家界ZHANGJIAJIE15544448888" |
|||
}, |
|||
{ |
|||
"name": "张家口", |
|||
"mobile": "15544448888", |
|||
"keyword": "张家口ZHANGJIAKOU15544448888" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"letter": "#", |
|||
"data": [{ |
|||
"name": "其他.", |
|||
"mobile": "16666666666", |
|||
"keyword": "echo16666666666" |
|||
}] |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
export default { |
|||
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
|
|||
components: { |
|||
desc: 'Numerous components cover the various requirements of the development process, and the components are rich in functions and compatible with multiple terminals. Let you integrate quickly, out of the box' |
|||
}, |
|||
js: { |
|||
desc: 'Numerous intimate gadgets are a weapon that you can call upon during the development process, allowing you to dart in your hand and pierce the Yang with a hundred steps' |
|||
}, |
|||
template: { |
|||
desc: 'Collection of many commonly used pages and layouts, reducing the repetitive work of developers, allowing you to focus on logic and get twice the result with half the effort' |
|||
}, |
|||
nav: { |
|||
components: 'Components', |
|||
js: 'JS', |
|||
template: 'Template' |
|||
}, |
|||
common: { |
|||
intro: 'UI framework for rapid development of multiple platforms', |
|||
title: 'uView UI', |
|||
}, |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
export default { |
|||
// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
|
|||
components: { |
|||
desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用' |
|||
}, |
|||
js: { |
|||
desc: '众多的贴心小工具，是你开发过程中召之即来的利器，让你飞镖在手，百步穿杨' |
|||
}, |
|||
template: { |
|||
desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍' |
|||
}, |
|||
nav: { |
|||
components: '组件', |
|||
js: '工具', |
|||
template: '模板' |
|||
}, |
|||
common: { |
|||
intro: '多平台快速开发的UI框架', |
|||
title: 'uView UI', |
|||
}, |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,103 @@ |
|||
function formatTime(time) { |
|||
if (typeof time !== 'number' || time < 0) { |
|||
return time |
|||
} |
|||
|
|||
var hour = parseInt(time / 3600) |
|||
time = time % 3600 |
|||
var minute = parseInt(time / 60) |
|||
time = time % 60 |
|||
var second = time |
|||
|
|||
return ([hour, minute, second]).map(function(n) { |
|||
n = n.toString() |
|||
return n[1] ? n : '0' + n |
|||
}).join(':') |
|||
} |
|||
|
|||
function formatDateTime(date, fmt = 'yyyy-MM-dd hh:mm:ss') { |
|||
if(!date) { |
|||
return '' |
|||
} |
|||
if (typeof (date) === 'number') { |
|||
date = new Date(date * 1000) |
|||
} |
|||
var o = { |
|||
"M+": date.getMonth() + 1, //月份
|
|||
"d+": date.getDate(), //日
|
|||
"h+": date.getHours(), //小时
|
|||
"m+": date.getMinutes(), //分
|
|||
"s+": date.getSeconds(), //秒
|
|||
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
|||
"S": date.getMilliseconds() //毫秒
|
|||
} |
|||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)) |
|||
for (var k in o) |
|||
if (new RegExp("(" + k + ")").test(fmt)) |
|||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))) |
|||
return fmt |
|||
} |
|||
|
|||
function formatLocation(longitude, latitude) { |
|||
if (typeof longitude === 'string' && typeof latitude === 'string') { |
|||
longitude = parseFloat(longitude) |
|||
latitude = parseFloat(latitude) |
|||
} |
|||
|
|||
longitude = longitude.toFixed(2) |
|||
latitude = latitude.toFixed(2) |
|||
|
|||
return { |
|||
longitude: longitude.toString().split('.'), |
|||
latitude: latitude.toString().split('.') |
|||
} |
|||
} |
|||
|
|||
var dateUtils = { |
|||
UNITS: { |
|||
'年': 31557600000, |
|||
'月': 2629800000, |
|||
'天': 86400000, |
|||
'小时': 3600000, |
|||
'分钟': 60000, |
|||
'秒': 1000 |
|||
}, |
|||
humanize: function(milliseconds) { |
|||
var humanize = ''; |
|||
for (var key in this.UNITS) { |
|||
if (milliseconds >= this.UNITS[key]) { |
|||
humanize = Math.floor(milliseconds / this.UNITS[key]) + key + '前'; |
|||
break; |
|||
} |
|||
} |
|||
return humanize || '刚刚'; |
|||
}, |
|||
format: function(dateStr) { |
|||
var date = this.parse(dateStr) |
|||
var diff = Date.now() - date.getTime(); |
|||
if (diff < this.UNITS['天']) { |
|||
return this.humanize(diff); |
|||
} |
|||
var _format = function(number) { |
|||
return (number < 10 ? ('0' + number) : number); |
|||
}; |
|||
return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDate()) + '-' + |
|||
_format(date.getHours()) + ':' + _format(date.getMinutes()); |
|||
}, |
|||
parse: function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
|
|||
var a = str.split(/[^0-9]/); |
|||
return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]); |
|||
} |
|||
}; |
|||
|
|||
const hexToRgba = (hex, opacity) => { //16进制颜色转rgba
|
|||
return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")" |
|||
} |
|||
|
|||
module.exports = { |
|||
formatTime, |
|||
formatDateTime, |
|||
formatLocation, |
|||
dateUtils, |
|||
hexToRgba |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<view class="nav-wrap"> |
|||
<view class="nav-title"> |
|||
<image class="logo" src="https://cdn.uviewui.com/uview/common/logo.png" mode="widthFix"></image> |
|||
<view class="nav-info"> |
|||
<view class="nav-title__text"> |
|||
{{$t('common.title')}} |
|||
</view> |
|||
<view class="nav-slogan"> |
|||
{{$t('common.intro')}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="nav-desc"> |
|||
{{desc}} |
|||
</view> |
|||
<view class="lang" @tap="switchLang"> |
|||
<u-icon size="46" color="warning" :name="lang"></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
desc: String, |
|||
title: String, |
|||
}, |
|||
computed: { |
|||
lang() { |
|||
return this.$i18n.locale == 'zh' ? 'zh' : 'en'; |
|||
} |
|||
}, |
|||
methods: { |
|||
switchLang() { |
|||
this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh' : 'en'; |
|||
this.vuex_tabbar[0].text = this.$t('nav.components') |
|||
this.vuex_tabbar[1].text = this.$t('nav.js') |
|||
this.vuex_tabbar[2].text = this.$t('nav.template') |
|||
uni.setNavigationBarTitle({ |
|||
title: this.$t(this.title) |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav-wrap { |
|||
padding: 15px; |
|||
position: relative; |
|||
} |
|||
|
|||
.lang { |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 15px; |
|||
} |
|||
|
|||
.nav-title { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
.nav-info { |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
.nav-title__text { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
color: $u-main-color; |
|||
font-size: 25px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.logo { |
|||
width: 70px; |
|||
/* #ifndef APP-NVUE */ |
|||
height: auto; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.nav-slogan { |
|||
color: $u-tips-color; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.nav-desc { |
|||
margin-top: 10px; |
|||
font-size: 14px; |
|||
color: $u-content-color; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
import Vue from 'vue'; |
|||
import App from './App'; |
|||
import * as echarts from 'echarts'; |
|||
Vue.config.productionTip = false; |
|||
import ElementUI from 'element-ui' |
|||
import 'element-ui/lib/theme-chalk/index.css' |
|||
App.mpType = 'app'; |
|||
|
|||
// 此处为演示Vue.prototype使用，非uView的功能部分
|
|||
Vue.prototype.vuePrototype = '枣红'; |
|||
Vue.use(ElementUI) |
|||
// 引入全局uView
|
|||
import uView from 'uview-ui'; |
|||
Vue.use(uView); |
|||
|
|||
// 此处为演示vuex使用，非uView的功能部分
|
|||
import store from '@/store'; |
|||
|
|||
// 引入uView提供的对vuex的简写法文件
|
|||
let vuexStore = require('@/store/$u.mixin.js'); |
|||
Vue.mixin(vuexStore); |
|||
|
|||
// 引入uView对小程序分享的mixin封装
|
|||
let mpShare = require('uview-ui/libs/mixin/mpShare.js'); |
|||
Vue.mixin(mpShare); |
|||
Vue.prototype.$echarts = echarts |
|||
|
|||
// i18n部分的配置
|
|||
// 引入语言包，注意路径
|
|||
import Chinese from '@/common/locales/zh.js'; |
|||
import English from '@/common/locales/en.js'; |
|||
|
|||
// VueI18n
|
|||
import VueI18n from '@/common/vue-i18n.min.js'; |
|||
|
|||
// VueI18n
|
|||
Vue.use(VueI18n); |
|||
|
|||
const i18n = new VueI18n({ |
|||
// 默认语言
|
|||
locale: 'zh', |
|||
// 引入语言文件
|
|||
messages: { |
|||
'zh': Chinese, |
|||
'en': English, |
|||
} |
|||
}); |
|||
|
|||
// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
|
|||
Vue.prototype._i18n = i18n; |
|||
|
|||
const app = new Vue({ |
|||
i18n, |
|||
store, |
|||
...App |
|||
}); |
|||
|
|||
// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
|
|||
import httpInterceptor from '@/common/http.interceptor.js'; |
|||
Vue.use(httpInterceptor, app); |
|||
|
|||
// http接口API抽离，免于写url或者一些固定的参数
|
|||
import httpApi from '@/common/http.api.js'; |
|||
Vue.use(httpApi, app); |
|||
|
|||
app.$mount(); |
|||
@ -0,0 +1,138 @@ |
|||
{ |
|||
"name" : "hxgk-phone-jx", |
|||
"appid" : "__UNI__C505832", |
|||
"description" : "多平台快速开发的UI框架", |
|||
"versionName" : "1.8.4", |
|||
"versionCode" : "100", |
|||
"transformPx" : false, |
|||
"app-plus" : { |
|||
"optimization" : { |
|||
"subPackages" : true |
|||
}, |
|||
"safearea" : { |
|||
"bottom" : { |
|||
"offset" : "none" |
|||
} |
|||
}, |
|||
"splashscreen" : { |
|||
"alwaysShowBeforeRender" : true, |
|||
"waiting" : true, |
|||
"autoclose" : true, |
|||
"delay" : 0 |
|||
}, |
|||
"usingComponents" : true, |
|||
"nvueCompiler" : "uni-app", |
|||
"compilerVersion" : 3, |
|||
"modules" : {}, |
|||
"distribute" : { |
|||
"android" : { |
|||
"permissions" : [ |
|||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>", |
|||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|||
], |
|||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ] |
|||
}, |
|||
"ios" : {}, |
|||
"sdkConfigs" : { |
|||
"ad" : {} |
|||
}, |
|||
"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" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"quickapp" : {}, |
|||
"mp-weixin" : { |
|||
"appid" : "", |
|||
"setting" : { |
|||
"urlCheck" : true, |
|||
"es6" : false, |
|||
"minified" : true, |
|||
"postcss" : true |
|||
}, |
|||
"optimization" : { |
|||
"subPackages" : true |
|||
}, |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-alipay" : { |
|||
"usingComponents" : true, |
|||
"component2" : true |
|||
}, |
|||
"mp-qq" : { |
|||
"optimization" : { |
|||
"subPackages" : true |
|||
}, |
|||
"appid" : "15646153" |
|||
}, |
|||
"mp-baidu" : { |
|||
"usingComponents" : true, |
|||
"appid" : "" |
|||
}, |
|||
"mp-toutiao" : { |
|||
"usingComponents" : true, |
|||
"appid" : "" |
|||
}, |
|||
"h5" : { |
|||
"template" : "template.h5.html", |
|||
"router" : { |
|||
"mode" : "hash", |
|||
"base" : "./" |
|||
}, |
|||
"optimization" : { |
|||
"treeShaking" : { |
|||
"enable" : false |
|||
} |
|||
}, |
|||
"title" : "绩效考核" |
|||
} |
|||
} |
|||
@ -0,0 +1,227 @@ |
|||
{ |
|||
"name": "uView", |
|||
"version": "1.0.0", |
|||
"lockfileVersion": 2, |
|||
"requires": true, |
|||
"packages": { |
|||
"": { |
|||
"name": "uView", |
|||
"version": "1.0.0", |
|||
"license": "ISC", |
|||
"dependencies": { |
|||
"echarts": "^5.3.2", |
|||
"element-ui": "^2.15.8", |
|||
"vue-i18n": "^8.20.0" |
|||
} |
|||
}, |
|||
"node_modules/async-validator": { |
|||
"version": "1.8.5", |
|||
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz", |
|||
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==", |
|||
"dependencies": { |
|||
"babel-runtime": "6.x" |
|||
} |
|||
}, |
|||
"node_modules/babel-helper-vue-jsx-merge-props": { |
|||
"version": "2.0.3", |
|||
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz", |
|||
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==" |
|||
}, |
|||
"node_modules/babel-runtime": { |
|||
"version": "6.26.0", |
|||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", |
|||
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", |
|||
"dependencies": { |
|||
"core-js": "^2.4.0", |
|||
"regenerator-runtime": "^0.11.0" |
|||
} |
|||
}, |
|||
"node_modules/core-js": { |
|||
"version": "2.6.12", |
|||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", |
|||
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", |
|||
"deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.", |
|||
"hasInstallScript": true |
|||
}, |
|||
"node_modules/deepmerge": { |
|||
"version": "1.5.2", |
|||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz", |
|||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==", |
|||
"engines": { |
|||
"node": ">=0.10.0" |
|||
} |
|||
}, |
|||
"node_modules/echarts": { |
|||
"version": "5.3.2", |
|||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz", |
|||
"integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==", |
|||
"dependencies": { |
|||
"tslib": "2.3.0", |
|||
"zrender": "5.3.1" |
|||
} |
|||
}, |
|||
"node_modules/element-ui": { |
|||
"version": "2.15.8", |
|||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.8.tgz", |
|||
"integrity": "sha512-N54zxosRFqpYax3APY3GeRmtOZwIls6Z756WM0kdPZ5Q92PIeKHnZgF1StlamIg9bLxP1k+qdhTZvIeQlim09A==", |
|||
"dependencies": { |
|||
"async-validator": "~1.8.1", |
|||
"babel-helper-vue-jsx-merge-props": "^2.0.0", |
|||
"deepmerge": "^1.2.0", |
|||
"normalize-wheel": "^1.0.1", |
|||
"resize-observer-polyfill": "^1.5.0", |
|||
"throttle-debounce": "^1.0.1" |
|||
}, |
|||
"peerDependencies": { |
|||
"vue": "^2.5.17" |
|||
} |
|||
}, |
|||
"node_modules/normalize-wheel": { |
|||
"version": "1.0.1", |
|||
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", |
|||
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=" |
|||
}, |
|||
"node_modules/regenerator-runtime": { |
|||
"version": "0.11.1", |
|||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", |
|||
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" |
|||
}, |
|||
"node_modules/resize-observer-polyfill": { |
|||
"version": "1.5.1", |
|||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", |
|||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" |
|||
}, |
|||
"node_modules/throttle-debounce": { |
|||
"version": "1.1.0", |
|||
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz", |
|||
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==", |
|||
"engines": { |
|||
"node": ">=4" |
|||
} |
|||
}, |
|||
"node_modules/tslib": { |
|||
"version": "2.3.0", |
|||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", |
|||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" |
|||
}, |
|||
"node_modules/vue": { |
|||
"version": "2.6.14", |
|||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz", |
|||
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==", |
|||
"peer": true |
|||
}, |
|||
"node_modules/vue-i18n": { |
|||
"version": "8.20.0", |
|||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.20.0.tgz", |
|||
"integrity": "sha512-ZiAOoeR4d/JtKpbjipx3I80ey7cYG1ki5gQ7HwzWm4YFio9brA15BEYHjalEoBaEfzF5OBEZP+Y2MvAaWnyXXg==" |
|||
}, |
|||
"node_modules/zrender": { |
|||
"version": "5.3.1", |
|||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz", |
|||
"integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==", |
|||
"dependencies": { |
|||
"tslib": "2.3.0" |
|||
} |
|||
} |
|||
}, |
|||
"dependencies": { |
|||
"async-validator": { |
|||
"version": "1.8.5", |
|||
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz", |
|||
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==", |
|||
"requires": { |
|||
"babel-runtime": "6.x" |
|||
} |
|||
}, |
|||
"babel-helper-vue-jsx-merge-props": { |
|||
"version": "2.0.3", |
|||
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz", |
|||
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==" |
|||
}, |
|||
"babel-runtime": { |
|||
"version": "6.26.0", |
|||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", |
|||
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", |
|||
"requires": { |
|||
"core-js": "^2.4.0", |
|||
"regenerator-runtime": "^0.11.0" |
|||
} |
|||
}, |
|||
"core-js": { |
|||
"version": "2.6.12", |
|||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", |
|||
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" |
|||
}, |
|||
"deepmerge": { |
|||
"version": "1.5.2", |
|||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz", |
|||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==" |
|||
}, |
|||
"echarts": { |
|||
"version": "5.3.2", |
|||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.2.tgz", |
|||
"integrity": "sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==", |
|||
"requires": { |
|||
"tslib": "2.3.0", |
|||
"zrender": "5.3.1" |
|||
} |
|||
}, |
|||
"element-ui": { |
|||
"version": "2.15.8", |
|||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.8.tgz", |
|||
"integrity": "sha512-N54zxosRFqpYax3APY3GeRmtOZwIls6Z756WM0kdPZ5Q92PIeKHnZgF1StlamIg9bLxP1k+qdhTZvIeQlim09A==", |
|||
"requires": { |
|||
"async-validator": "~1.8.1", |
|||
"babel-helper-vue-jsx-merge-props": "^2.0.0", |
|||
"deepmerge": "^1.2.0", |
|||
"normalize-wheel": "^1.0.1", |
|||
"resize-observer-polyfill": "^1.5.0", |
|||
"throttle-debounce": "^1.0.1" |
|||
} |
|||
}, |
|||
"normalize-wheel": { |
|||
"version": "1.0.1", |
|||
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", |
|||
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=" |
|||
}, |
|||
"regenerator-runtime": { |
|||
"version": "0.11.1", |
|||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", |
|||
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" |
|||
}, |
|||
"resize-observer-polyfill": { |
|||
"version": "1.5.1", |
|||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", |
|||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" |
|||
}, |
|||
"throttle-debounce": { |
|||
"version": "1.1.0", |
|||
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz", |
|||
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==" |
|||
}, |
|||
"tslib": { |
|||
"version": "2.3.0", |
|||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", |
|||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" |
|||
}, |
|||
"vue": { |
|||
"version": "2.6.14", |
|||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz", |
|||
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==", |
|||
"peer": true |
|||
}, |
|||
"vue-i18n": { |
|||
"version": "8.20.0", |
|||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.20.0.tgz", |
|||
"integrity": "sha512-ZiAOoeR4d/JtKpbjipx3I80ey7cYG1ki5gQ7HwzWm4YFio9brA15BEYHjalEoBaEfzF5OBEZP+Y2MvAaWnyXXg==" |
|||
}, |
|||
"zrender": { |
|||
"version": "5.3.1", |
|||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz", |
|||
"integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==", |
|||
"requires": { |
|||
"tslib": "2.3.0" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
{ |
|||
"name": "uView", |
|||
"version": "1.0.0", |
|||
"description": "<p align=\"center\">\r <img alt=\"logo\" src=\"https://uviewui.com/common/logo.png\" width=\"120\" height=\"120\" style=\"margin-bottom: 10px;\">\r </p>\r <h3 align=\"center\" style=\"margin: 30px 0 30px;font-weight: bold;font-size:40px;\">uView</h3>\r <h3 align=\"center\">多平台快速开发的UI框架</h3>", |
|||
"main": "main.js", |
|||
"scripts": { |
|||
"test": "echo \"Error: no test specified\" && exit 1" |
|||
}, |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+https://github.com/YanxinNet/uView.git" |
|||
}, |
|||
"keywords": [], |
|||
"author": "", |
|||
"license": "ISC", |
|||
"bugs": { |
|||
"url": "https://github.com/YanxinNet/uView/issues" |
|||
}, |
|||
"homepage": "https://github.com/YanxinNet/uView#readme", |
|||
"dependencies": { |
|||
"echarts": "^5.3.2", |
|||
"element-ui": "^2.15.8", |
|||
"vue-i18n": "^8.20.0" |
|||
} |
|||
} |
|||
@ -0,0 +1,990 @@ |
|||
{ |
|||
"easycom": { |
|||
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" |
|||
}, |
|||
// "condition": { //模式配置，仅开发期间生效 |
|||
// "current": 0, //当前激活的模式(list 的索引项) |
|||
// "list": [{ |
|||
// "name": "test", //模式名称 |
|||
// "path": "pages/componentsC/test/index", //启动页面，必选 |
|||
// "query": "uuid=c4bba940-f69e-11ea-a419-6bafda9d095e&__id__=1" //启动参数，在页面的onLoad函数里面得到 |
|||
// }] |
|||
// }, |
|||
"pages": [ |
|||
|
|||
{ |
|||
"path": "pages/index/index", |
|||
"style": { |
|||
"navigationBarTitleText": "首页" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/login/login", |
|||
"style": { |
|||
"navigationBarTitleText": "登录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/task/data", |
|||
"style": { |
|||
"navigationBarTitleText": "数据提报" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/task/jia", |
|||
"style": { |
|||
"navigationBarTitleText": "加分" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/approval/dingliang", |
|||
"style": { |
|||
"navigationBarTitleText": "定量考核" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/approval/dingxing", |
|||
"style": { |
|||
"navigationBarTitleText": "定性考核" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/task/jian", |
|||
"style": { |
|||
"navigationBarTitleText": "减分" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/approval/index", |
|||
"style": { |
|||
"navigationBarTitleText": "审核" |
|||
|
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/task/details", |
|||
"style": { |
|||
"navigationBarTitleText": "考核操作" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/personal/index", |
|||
"style": { |
|||
"navigationBarTitleText": "个人中心" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/personalAudit/index", |
|||
"style": { |
|||
"navigationBarTitleText": "被考核记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/personalAudit/dingxing", |
|||
"style": { |
|||
"navigationBarTitleText": "考核记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/task/index", |
|||
"style": { |
|||
"navigationBarTitleText": "任务" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/post/index", |
|||
"style": { |
|||
"navigationBarTitleText": "岗位考核" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/post/data", |
|||
"style": { |
|||
"navigationBarTitleText": "定量考核" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/post/details", |
|||
"style": { |
|||
"navigationBarTitleText": "定性考核" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/post/jia", |
|||
"style": { |
|||
"navigationBarTitleText": "奖励" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/post/jian", |
|||
"style": { |
|||
"navigationBarTitleText": "惩罚" |
|||
} |
|||
}, |
|||
// 演示-组件 |
|||
{ |
|||
"path": "pages/example/components", |
|||
"style": { |
|||
"navigationBarTitleText": "组件" |
|||
} |
|||
}, |
|||
// avatarCropper-头像裁剪 |
|||
{ |
|||
"path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper", |
|||
"style": { |
|||
"navigationBarTitleText": "头像裁剪", |
|||
"navigationBarBackgroundColor": "#000000" |
|||
} |
|||
}, |
|||
// 演示-工具 |
|||
{ |
|||
"path": "pages/example/js", |
|||
"style": { |
|||
"navigationBarTitleText": "工具" |
|||
} |
|||
}, |
|||
// 演示-模板 |
|||
{ |
|||
"path": "pages/example/template", |
|||
"style": { |
|||
"navigationBarTitleText": "模板" |
|||
} |
|||
}, |
|||
// fullScreen-压窗屏 |
|||
{ |
|||
"path": "uview-ui/components/u-full-screen/u-full-screen", |
|||
"style": { |
|||
"navigationStyle": "custom", |
|||
"app-plus": { |
|||
"animationType": "fade-in", |
|||
"background": "transparent", |
|||
"backgroundColor": "rgba(0,0,0,0)", |
|||
"popGesture": "none" |
|||
} |
|||
} |
|||
} |
|||
], |
|||
"subPackages": [{ |
|||
"root": "pages/componentsC", |
|||
"pages": [ |
|||
// test-测试 |
|||
{ |
|||
"path": "test/index", |
|||
"style": { |
|||
"navigationBarTitleText": "Test" |
|||
// "navigationStyle": "custom" ,// 隐藏系统导航栏 |
|||
// "navigationBarTextStyle": "white" // 状态栏字体为白色 |
|||
} |
|||
}, |
|||
// gap-间隔槽 |
|||
{ |
|||
"path": "gap/index", |
|||
"style": { |
|||
"navigationBarTitleText": "gap-间隔槽" |
|||
} |
|||
}, |
|||
// subsection分段器 |
|||
{ |
|||
"path": "subsection/index", |
|||
"style": { |
|||
"navigationBarTitleText": "subsection-分段器" |
|||
} |
|||
}, |
|||
// section 查看更多 |
|||
{ |
|||
"path": "section/index", |
|||
"style": { |
|||
"navigationBarTitleText": "section-查看更多" |
|||
} |
|||
}, |
|||
// link链接 |
|||
{ |
|||
"path": "link/index", |
|||
"style": { |
|||
"navigationBarTitleText": "link-链接" |
|||
} |
|||
}, |
|||
// mask遮罩层 |
|||
{ |
|||
"path": "mask/index", |
|||
"style": { |
|||
"navigationBarTitleText": "mask-遮罩层" |
|||
} |
|||
}, |
|||
// countTo数字滚动 |
|||
{ |
|||
"path": "countTo/index", |
|||
"style": { |
|||
"navigationBarTitleText": "countTo-数字滚动" |
|||
} |
|||
}, |
|||
// color颜色 |
|||
{ |
|||
"path": "color/index", |
|||
"style": { |
|||
"navigationBarTitleText": "color-颜色" |
|||
} |
|||
}, |
|||
// countDown倒计时 |
|||
{ |
|||
"path": "countDown/index", |
|||
"style": { |
|||
"navigationBarTitleText": "countDown-倒计时" |
|||
} |
|||
}, |
|||
// progress进度条 |
|||
{ |
|||
"path": "progress/index", |
|||
"style": { |
|||
"navigationBarTitleText": "progress-进度条" |
|||
} |
|||
}, |
|||
// alertTips警告提示 |
|||
{ |
|||
"path": "alertTips/index", |
|||
"style": { |
|||
"navigationBarTitleText": "alertTips-警告提示" |
|||
} |
|||
}, |
|||
// badge 徽标数 |
|||
{ |
|||
"path": "badge/index", |
|||
"style": { |
|||
"navigationBarTitleText": "badge-徽标数" |
|||
} |
|||
}, |
|||
// button按钮 |
|||
{ |
|||
"path": "button/index", |
|||
"style": { |
|||
"navigationBarTitleText": "button-按钮" |
|||
} |
|||
}, |
|||
// collapse折叠面板 |
|||
{ |
|||
"path": "collapse/index", |
|||
"style": { |
|||
"navigationBarTitleText": "collapse-折叠面板" |
|||
} |
|||
}, |
|||
// actionSheet操作菜单 |
|||
{ |
|||
"path": "actionSheet/index", |
|||
"style": { |
|||
"navigationBarTitleText": "actionSheet-操作菜单" |
|||
} |
|||
}, |
|||
// messageInput验证码输入 |
|||
{ |
|||
"path": "messageInput/index", |
|||
"style": { |
|||
"navigationBarTitleText": "messageInput-验证码输入" |
|||
} |
|||
}, |
|||
// popup弹窗 |
|||
{ |
|||
"path": "popup/index", |
|||
"style": { |
|||
"navigationBarTitleText": "popup-弹窗" |
|||
} |
|||
}, |
|||
// listCell |
|||
{ |
|||
"path": "cell/index", |
|||
"style": { |
|||
"navigationBarTitleText": "listCell-列表" |
|||
} |
|||
}, |
|||
// numberBox数字输入框 |
|||
{ |
|||
"path": "numberBox/index", |
|||
"style": { |
|||
"navigationBarTitleText": "numberBox-步进器" |
|||
} |
|||
}, |
|||
// grid宫格布局 |
|||
{ |
|||
"path": "grid/index", |
|||
"style": { |
|||
"navigationBarTitleText": "grid-宫格布局" |
|||
} |
|||
}, |
|||
// layout栅格布局 |
|||
{ |
|||
"path": "layout/index", |
|||
"style": { |
|||
"navigationBarTitleText": "layout-栅格布局" |
|||
} |
|||
}, |
|||
// 加载更多 |
|||
{ |
|||
"path": "loadmore/index", |
|||
"style": { |
|||
"navigationBarTitleText": "loadmore-加载更多" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"root": "pages/template", |
|||
"pages": [ |
|||
// wxCenter 仿微信个人中心 |
|||
{ |
|||
"path": "wxCenter/index", |
|||
"style": { |
|||
"navigationBarTitleText": "wxCenter 仿微信个人中心", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
// keyboardPay 自定义键盘支付 |
|||
{ |
|||
"path": "keyboardPay/index", |
|||
"style": { |
|||
"navigationBarTitleText": "keyboardPay 自定义键盘支付" |
|||
} |
|||
}, |
|||
// douyin 仿抖音 |
|||
// { |
|||
// "path": "douyin/index", |
|||
// "style": { |
|||
// "navigationBarTitleText": "douyin 仿抖音" |
|||
// } |
|||
// }, |
|||
// mallMenu商城分类 |
|||
{ |
|||
"path": "mallMenu/index2", |
|||
"style": { |
|||
"navigationBarTitleText": "mallMenu-商城分类" |
|||
} |
|||
}, |
|||
// mallMenu商城分类 |
|||
{ |
|||
"path": "mallMenu/index1", |
|||
"style": { |
|||
"navigationBarTitleText": "mallMenu-商城分类" |
|||
} |
|||
}, |
|||
// coupon优惠券 |
|||
{ |
|||
"path": "coupon/index", |
|||
"style": { |
|||
"navigationBarTitleText": "coupon-优惠券" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "login/index", |
|||
"style": { |
|||
"navigationBarTitleText": "美团登录" |
|||
} |
|||
}, |
|||
// 城市选择 |
|||
{ |
|||
"path": "citySelect/index", |
|||
"style": { |
|||
"navigationBarTitleText": "城市选择" |
|||
} |
|||
}, |
|||
// SubmitBar提交订单栏 |
|||
{ |
|||
"path": "submitBar/index", |
|||
"style": { |
|||
"navigationBarTitleText": "提交订单栏" |
|||
} |
|||
}, |
|||
// comment评论 |
|||
{ |
|||
"path": "comment/index", |
|||
"style": { |
|||
"navigationBarTitleText": "评论" |
|||
} |
|||
}, |
|||
// comment评论详情 |
|||
{ |
|||
"path": "comment/reply", |
|||
"style": { |
|||
"navigationBarTitleText": "评论详情" |
|||
} |
|||
}, |
|||
// order订单 |
|||
{ |
|||
"path": "order/index", |
|||
"style": { |
|||
"navigationBarTitleText": "订单" |
|||
} |
|||
}, |
|||
// login登录获取验证码 |
|||
{ |
|||
"path": "login/code", |
|||
"style": { |
|||
"navigationBarTitleText": "登录获取验证码" |
|||
} |
|||
}, |
|||
// address用户地址 |
|||
{ |
|||
"path": "address/index", |
|||
"style": { |
|||
"navigationBarTitleText": "用户地址" |
|||
} |
|||
}, |
|||
// address添加用户地址 |
|||
{ |
|||
"path": "address/addSite", |
|||
"style": { |
|||
"navigationBarTitleText": "添加用户地址" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"root": "pages/library", |
|||
"pages": [ |
|||
// debounce-节流防抖 |
|||
{ |
|||
"path": "debounce/index", |
|||
"style": { |
|||
"navigationBarTitleText": "throttle | debounce-节流防抖" |
|||
} |
|||
}, |
|||
// deepClone-对象深度克隆 |
|||
{ |
|||
"path": "deepClone/index", |
|||
"style": { |
|||
"navigationBarTitleText": "deepClone-对象深度克隆" |
|||
} |
|||
}, |
|||
// deepMerge-对象深度合并 |
|||
{ |
|||
"path": "deepMerge/index", |
|||
"style": { |
|||
"navigationBarTitleText": "deepMerge-对象深度合并" |
|||
} |
|||
}, |
|||
// getRect-元素节点 |
|||
{ |
|||
"path": "getRect/index", |
|||
"style": { |
|||
"navigationBarTitleText": "getRect-元素节点" |
|||
} |
|||
}, |
|||
// timeFrom-多久之前 |
|||
{ |
|||
"path": "timeFrom/index", |
|||
"style": { |
|||
"navigationBarTitleText": "timeFrom-多久之前" |
|||
} |
|||
}, |
|||
// globalData-全局变量 |
|||
{ |
|||
"path": "globalVariable/globalData", |
|||
"style": { |
|||
"navigationBarTitleText": "globalData-全局变量" |
|||
} |
|||
}, |
|||
// prototype-全局变量 |
|||
{ |
|||
"path": "globalVariable/prototype", |
|||
"style": { |
|||
"navigationBarTitleText": "prototype-全局变量" |
|||
} |
|||
}, |
|||
// vuex-全局变量 |
|||
{ |
|||
"path": "globalVariable/vuex", |
|||
"style": { |
|||
"navigationBarTitleText": "vuex-全局变量" |
|||
} |
|||
}, |
|||
// globalVariable-全局变量 |
|||
{ |
|||
"path": "globalVariable/index", |
|||
"style": { |
|||
"navigationBarTitleText": "globalVariable-全局变量" |
|||
} |
|||
}, |
|||
// http-请求 |
|||
{ |
|||
"path": "http/index", |
|||
"style": { |
|||
"navigationBarTitleText": "http-请求" |
|||
} |
|||
}, |
|||
// test-规则验证 |
|||
{ |
|||
"path": "test/index", |
|||
"style": { |
|||
"navigationBarTitleText": "test-规则验证" |
|||
} |
|||
}, |
|||
// mpShare-小程序分享 |
|||
{ |
|||
"path": "mpShare/index", |
|||
"style": { |
|||
"navigationBarTitleText": "mpShare-小程序分享" |
|||
} |
|||
}, |
|||
// color-JS调用颜色 |
|||
{ |
|||
"path": "color/index", |
|||
"style": { |
|||
"navigationBarTitleText": "color-JS调用颜色" |
|||
} |
|||
}, |
|||
// trim-去除空格 |
|||
{ |
|||
"path": "trim/index", |
|||
"style": { |
|||
"navigationBarTitleText": "trim-去除空格" |
|||
} |
|||
}, |
|||
// random-随机数生成 |
|||
{ |
|||
"path": "random/index", |
|||
"style": { |
|||
"navigationBarTitleText": "random-随机数生成" |
|||
} |
|||
}, |
|||
// md5加密 |
|||
{ |
|||
"path": "md5/index", |
|||
"style": { |
|||
"navigationBarTitleText": "md5-加密" |
|||
} |
|||
}, |
|||
// colorSwitch颜色转换 |
|||
{ |
|||
"path": "colorSwitch/index", |
|||
"style": { |
|||
"navigationBarTitleText": "colorSwitch-颜色转换" |
|||
} |
|||
}, |
|||
// randomArray数组乱序 |
|||
{ |
|||
"path": "randomArray/index", |
|||
"style": { |
|||
"navigationBarTitleText": "randomArray-数组乱序" |
|||
} |
|||
}, |
|||
// guid全局唯一标识符 |
|||
{ |
|||
"path": "guid/index", |
|||
"style": { |
|||
"navigationBarTitleText": "guid-全局唯一标识符" |
|||
} |
|||
}, |
|||
// timeFormat时间格式化 |
|||
{ |
|||
"path": "timeFormat/index", |
|||
"style": { |
|||
"navigationBarTitleText": "timeFormat-时间格式化" |
|||
} |
|||
}, // route-路由 |
|||
{ |
|||
"path": "route/index", |
|||
"style": { |
|||
"navigationBarTitleText": "route-路由" |
|||
} |
|||
}, |
|||
// route-路由跳转 |
|||
{ |
|||
"path": "route/routeTo", |
|||
"style": { |
|||
"navigationBarTitleText": "route-路由跳转" |
|||
} |
|||
}, |
|||
// queryParams-对象转URL参数 |
|||
{ |
|||
"path": "queryParams/index", |
|||
"style": { |
|||
"navigationBarTitleText": "queryParams-对象转URL参数" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"root": "pages/componentsA", |
|||
"pages": [ |
|||
// parse-富文本解析器 |
|||
{ |
|||
"path": "parse/index", |
|||
"style": { |
|||
"navigationBarTitleText": "parse-富文本解析器" |
|||
} |
|||
}, |
|||
// backTop-返回顶部 |
|||
{ |
|||
"path": "backTop/index", |
|||
"style": { |
|||
"navigationBarTitleText": "backTop-返回顶部" |
|||
} |
|||
}, |
|||
// calendar-日历 |
|||
{ |
|||
"path": "calendar/index", |
|||
"style": { |
|||
"navigationBarTitleText": "calendar-日历" |
|||
} |
|||
}, |
|||
// form-表单 |
|||
{ |
|||
"path": "form/index", |
|||
"style": { |
|||
"navigationBarTitleText": "form-表单" |
|||
} |
|||
}, |
|||
// select-列选择器 |
|||
{ |
|||
"path": "select/index", |
|||
"style": { |
|||
"navigationBarTitleText": "select-列选择器" |
|||
} |
|||
}, |
|||
// slider-滑动选择器 |
|||
{ |
|||
"path": "slider/index", |
|||
"style": { |
|||
"navigationBarTitleText": "slider-滑动选择器" |
|||
} |
|||
}, |
|||
// fullScreen-压窗屏 |
|||
{ |
|||
"path": "fullScreen/index", |
|||
"style": { |
|||
"navigationBarTitleText": "fullScreen-压窗屏" |
|||
} |
|||
}, |
|||
// navbar-自定义导航栏 |
|||
{ |
|||
"path": "navbar/index", |
|||
"style": { |
|||
// "navigationBarTitleText": "navbar-自定义导航栏", |
|||
"navigationStyle": "custom", // 隐藏系统导航栏 |
|||
"navigationBarTextStyle": "white" // 状态栏字体为白色 |
|||
} |
|||
}, |
|||
// field-输入框 |
|||
{ |
|||
"path": "field/index", |
|||
"style": { |
|||
"navigationBarTitleText": "field-输入框" |
|||
} |
|||
}, |
|||
// modal-模态框 |
|||
{ |
|||
"path": "modal/index", |
|||
"style": { |
|||
"navigationBarTitleText": "modal-模态框" |
|||
} |
|||
}, |
|||
// indexList索引列表 |
|||
{ |
|||
"path": "indexList/index", |
|||
"style": { |
|||
"navigationBarTitleText": "indexList-索引列表" |
|||
} |
|||
}, |
|||
// empty内容为空 |
|||
{ |
|||
"path": "empty/index", |
|||
"style": { |
|||
"navigationBarTitleText": "empty-内容为空" |
|||
} |
|||
}, |
|||
// avatarCropper-头像裁剪 |
|||
{ |
|||
"path": "avatarCropper/index", |
|||
"style": { |
|||
"navigationBarTitleText": "avatarCropper-头像裁剪" |
|||
} |
|||
}, // noNetwork没有网络 |
|||
{ |
|||
"path": "noNetwork/index", |
|||
"style": { |
|||
"navigationBarTitleText": "noNetwork-没有网络" |
|||
} |
|||
}, // icon字体图标 |
|||
{ |
|||
"path": "icon/index", |
|||
"style": { |
|||
"navigationBarTitleText": "icon-字体图标" |
|||
} |
|||
}, // avatar-用户头像展示 |
|||
{ |
|||
"path": "avatar/index", |
|||
"style": { |
|||
"navigationBarTitleText": "avatar-用户头像展示" |
|||
} |
|||
}, // keyboard键盘 |
|||
{ |
|||
"path": "keyboard/index", |
|||
"style": { |
|||
"navigationBarTitleText": "keyboard-键盘" |
|||
} |
|||
}, // 图片懒加载 |
|||
{ |
|||
"path": "lazyLoad/index", |
|||
"style": { |
|||
"navigationBarTitleText": "lazyLoad-懒加载" |
|||
} |
|||
}, |
|||
// tabs切换 |
|||
{ |
|||
"path": "tabs/index", |
|||
"style": { |
|||
"navigationBarTitleText": "Tabs-切换" |
|||
} |
|||
}, |
|||
// tag标签 |
|||
{ |
|||
"path": "tag/index", |
|||
"style": { |
|||
"navigationBarTitleText": "tag-标签" |
|||
} |
|||
}, |
|||
// timeLine时间轴 |
|||
{ |
|||
"path": "timeLine/index", |
|||
"style": { |
|||
"navigationBarTitleText": "timeLine-时间轴" |
|||
} |
|||
}, |
|||
// toast轻提示 |
|||
{ |
|||
"path": "toast/index", |
|||
"style": { |
|||
"navigationBarTitleText": "toast-轻提示" |
|||
} |
|||
}, |
|||
// topTips消息提示 |
|||
{ |
|||
"path": "topTips/index", |
|||
"style": { |
|||
"navigationBarTitleText": "topTips-消息提示" |
|||
} |
|||
}, |
|||
// Code-验证码倒计时 |
|||
{ |
|||
"path": "verificationCode/index", |
|||
"style": { |
|||
"navigationBarTitleText": "Code-验证码倒计时" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"root": "pages/componentsB", |
|||
"pages": [ |
|||
// dropdown-下拉菜单 |
|||
{ |
|||
"path": "dropdown/index", |
|||
"style": { |
|||
"navigationBarTitleText": "dropdown-下拉菜单" |
|||
} |
|||
}, |
|||
// tabbar-底部导航栏 |
|||
{ |
|||
"path": "tabbar/index", |
|||
"style": { |
|||
"navigationBarTitleText": "tabbar-底部导航栏" |
|||
} |
|||
}, |
|||
// line-线条 |
|||
{ |
|||
"path": "line/index", |
|||
"style": { |
|||
"navigationBarTitleText": "line-线条" |
|||
} |
|||
}, |
|||
// image-图片 |
|||
{ |
|||
"path": "image/index", |
|||
"style": { |
|||
"navigationBarTitleText": "image-图片" |
|||
} |
|||
}, |
|||
// card-卡片 |
|||
{ |
|||
"path": "card/index", |
|||
"style": { |
|||
"navigationBarTitleText": "card-卡片" |
|||
} |
|||
}, |
|||
// divider-分割线 |
|||
{ |
|||
"path": "divider/index", |
|||
"style": { |
|||
"navigationBarTitleText": "divider-分割线" |
|||
} |
|||
}, |
|||
// picker选择器 |
|||
{ |
|||
"path": "picker/index", |
|||
"style": { |
|||
"navigationBarTitleText": "picker-选择器" |
|||
} |
|||
}, // noticeBar通告栏 |
|||
{ |
|||
"path": "noticeBar/index", |
|||
"style": { |
|||
"navigationBarTitleText": "noticeBar-通告栏" |
|||
} |
|||
}, |
|||
// checkbox-复选框 |
|||
{ |
|||
"path": "checkbox/index", |
|||
"style": { |
|||
"navigationBarTitleText": "checkbox-复选框" |
|||
} |
|||
}, |
|||
// radio-单选框 |
|||
{ |
|||
"path": "radio/index", |
|||
"style": { |
|||
"navigationBarTitleText": "radio-单选框" |
|||
} |
|||
}, |
|||
// loading-加载动画 |
|||
{ |
|||
"path": "loading/index", |
|||
"style": { |
|||
"navigationBarTitleText": "loading-加载动画" |
|||
} |
|||
}, |
|||
// switch-开关选择器 |
|||
{ |
|||
"path": "switch/index", |
|||
"style": { |
|||
"navigationBarTitleText": "switch-开关选择器" |
|||
} |
|||
}, |
|||
// 骨架屏 |
|||
{ |
|||
"path": "skeleton/index", |
|||
"style": { |
|||
"navigationBarTitleText": "skeleton-骨架屏" |
|||
} |
|||
}, // upload上传 |
|||
{ |
|||
"path": "upload/index", |
|||
"style": { |
|||
"navigationBarTitleText": "upload-上传" |
|||
} |
|||
}, |
|||
// waterfall瀑布流 |
|||
// #ifndef MP-TOUTIAO |
|||
{ |
|||
"path": "waterfall/index", |
|||
"style": { |
|||
"navigationBarTitleText": "waterfall-瀑布流" |
|||
} |
|||
}, |
|||
// #endif |
|||
// table表格 |
|||
{ |
|||
"path": "table/index", |
|||
"style": { |
|||
"navigationBarTitleText": "table-表格" |
|||
} |
|||
}, |
|||
// rate评分 |
|||
{ |
|||
"path": "rate/index", |
|||
"style": { |
|||
"navigationBarTitleText": "rate-评分" |
|||
} |
|||
}, |
|||
// readMore显示更多 |
|||
{ |
|||
"path": "readMore/index", |
|||
"style": { |
|||
"navigationBarTitleText": "readMore-查看更多" |
|||
} |
|||
}, |
|||
// search搜索框 |
|||
{ |
|||
"path": "search/index", |
|||
"style": { |
|||
"navigationBarTitleText": "search-搜索框" |
|||
} |
|||
}, |
|||
// steps步骤条 |
|||
{ |
|||
"path": "steps/index", |
|||
"style": { |
|||
"navigationBarTitleText": "steps-步骤条" |
|||
} |
|||
}, |
|||
// sticky吸顶 |
|||
{ |
|||
"path": "sticky/index", |
|||
"style": { |
|||
"navigationBarTitleText": "sticky-吸顶" |
|||
} |
|||
}, |
|||
// swiper轮播图 |
|||
{ |
|||
"path": "swiper/index", |
|||
"style": { |
|||
"navigationBarTitleText": "swiper-轮播图" |
|||
} |
|||
}, |
|||
// swipeAction-左滑删除 |
|||
{ |
|||
"path": "swipeAction/index", |
|||
"style": { |
|||
"navigationBarTitleText": "swipeAction-左滑删除" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
], |
|||
"preloadRule": { |
|||
"pages/example/components": { |
|||
"network": "all", |
|||
"packages": ["pages/componentsA", "pages/componentsB", "pages/componentsC"] |
|||
} |
|||
}, |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "uView", |
|||
"navigationBarBackgroundColor": "#FFFFFF", |
|||
"backgroundColor": "#FFFFFF" |
|||
}, |
|||
"tabBar": { |
|||
"color": "#999999", |
|||
"selectedColor": "#343434", |
|||
"borderStyle": "white", |
|||
"backgroundColor": "#F7F7F7", |
|||
"fontSize": "14px", |
|||
"iconWidth": "24px", |
|||
"list": [{ |
|||
"pagePath": "pages/index/index", |
|||
"iconPath": "static/img/index.png", |
|||
"selectedIconPath": "static/img/indexSele.png", |
|||
"text": "首页" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/task/index", |
|||
"iconPath": "static/img/task.png", |
|||
"selectedIconPath": "static/img/taskSele.png", |
|||
"text": "任务" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/post/index", |
|||
"iconPath": "static/img/gangwei.png", |
|||
"selectedIconPath": "static/img/gangwei1.png", |
|||
"text": "岗位" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/approval/index", |
|||
"iconPath": "static/img/approval.png", |
|||
"selectedIconPath": "static/img/approvalSele.png", |
|||
"text": "审批" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/personal/index", |
|||
"iconPath": "static/img/personal.png", |
|||
"selectedIconPath": "static/img/personalSele.png", |
|||
"text": "个人中心" |
|||
}] |
|||
} |
|||
} |
|||
@ -0,0 +1,404 @@ |
|||
<template> |
|||
<div> |
|||
<!-- <div class="p" v-if="carddianShow">{{list.groupname}}{{list.departmentname}}定量考核</div> |
|||
<div class="p2" v-if="cardShow">{{list.groupname}}{{list.departmentname}}定量考核</div> --> |
|||
<div :style="'width:' + bianKuan + '%;margin: 0 auto;padding: 5px;'"> |
|||
<el-card :body-style="{ padding: '10px' }" class="box-card" style="margin-bottom: 10px;padding-top: 5px;padding-bottom: 5px;"> |
|||
<p class="xiao">审批编号：{{form.outid}}</p> |
|||
<p class="da"> |
|||
{{list.title}} |
|||
</p> |
|||
</el-card> |
|||
<el-card v-if="carddianShow" class="box-card" v-for="(item,index) in list.List" :key="index" style="margin-bottom: 10px;"> |
|||
<el-descriptions class="margin-top" :column="3" border> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
名称 |
|||
</template> |
|||
{{item.title}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
零奖值 |
|||
</template> |
|||
{{item.zeroprize}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
全奖值 |
|||
</template> |
|||
{{item.allprize}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
实际值 |
|||
</template> |
|||
{{item.Score}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
权重分 |
|||
</template> |
|||
{{item.weight}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
封顶值 |
|||
</template> |
|||
{{item.CappingVal}}% |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
达成率 |
|||
</template> |
|||
{{item.achievement}}% |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
指标得分 |
|||
</template> |
|||
{{item.actual}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
说明 |
|||
</template> |
|||
{{item.content}} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</el-card> |
|||
<el-card v-if="cardShow" class="box-card" v-for="(item,index) in list.List" :key="index" style="margin-bottom: 10px;"> |
|||
<el-descriptions class="margin-top" :column="1"> |
|||
<el-descriptions-item label="名称">{{item.title}}</el-descriptions-item> |
|||
<el-descriptions-item label="零奖值">{{item.zeroprize}}</el-descriptions-item> |
|||
<el-descriptions-item label="全奖值">{{item.allprize}}</el-descriptions-item> |
|||
<el-descriptions-item label="封顶值">{{item.CappingVal}}%</el-descriptions-item> |
|||
<el-descriptions-item label="实际值">{{item.Score}}</el-descriptions-item> |
|||
<el-descriptions-item label="权重分">{{item.weight}}</el-descriptions-item> |
|||
<el-descriptions-item label="达成率">{{item.achievement}}%</el-descriptions-item> |
|||
<el-descriptions-item label="指标得分">{{item.actual}}</el-descriptions-item> |
|||
<el-descriptions-item label="说明">{{item.content}}</el-descriptions-item> |
|||
</el-descriptions> |
|||
</el-card> |
|||
|
|||
<el-card class="box-card" style="margin-bottom: 130px;"> |
|||
<el-steps direction="vertical" :active="buzhou"> |
|||
<el-step v-for="(item,index) in list.flowall" :key="index" :title="item.nodename" icon="el-icon-circle-check" > |
|||
<template slot="description"> |
|||
<div style="color: rgb(153,153,153);" v-for="(a,userlistIndex) in item.userlist" :key="userlistIndex"> |
|||
<el-row> |
|||
<el-col :span="4" v-if="a.log!=null"> |
|||
<el-badge is-dot type="primary "> |
|||
<el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar> |
|||
</el-badge> |
|||
</el-col> |
|||
<el-col :span="4" v-else> |
|||
<el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar> |
|||
</el-col> |
|||
<el-col :span="20" style="margin-top: -5px;"> |
|||
{{a.workshopname}}-{{a.postname}}-{{a.name}} |
|||
<el-row> |
|||
<div v-for="(i,logIndex) in a.log" :key="logIndex" style="margin-top: -5px;"> |
|||
<div class="left" v-if="i.state==2">已同意 · </div> |
|||
<div class="left" v-if="i.state==1" type="info">未操作 · </div> |
|||
<div class="left" v-if="i.state==3" type="danger">驳回 · </div> |
|||
<div class="left">{{i.time}}</div> |
|||
</div> |
|||
</el-row> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
<!-- <el-steps direction="vertical" :active="buzhou"> |
|||
<el-step v-for="(item,index) in list.flowall" :key="index" :title="item.nodename" icon="el-icon-circle-check" > |
|||
<template slot="description"> |
|||
<p style="color: rgb(153,153,153);" v-for="(a,index) in item.userlist" > |
|||
<el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar> |
|||
{{a.workshopname}}-{{a.postname}}-{{a.name}} |
|||
<template v-if="a.log!=null"> |
|||
<el-tag v-if="a.log.state==2">通过</el-tag> |
|||
<el-tag v-if="a.log.state==1" type="info">未操作</el-tag> |
|||
<el-tag v-if="a.log.state==3" type="danger">驳回</el-tag> |
|||
<div>{{a.log.time}}</div> |
|||
</template> |
|||
</p> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> --> |
|||
</el-card> |
|||
<el-card class="box-card" style="position: fixed;bottom: 0;width: 100%;z-index: 1000;" v-if="list.isset==1"> |
|||
<el-input |
|||
style="margin-bottom:10px" |
|||
type="textarea" |
|||
autosize |
|||
placeholder="请输入审批意见" |
|||
v-model="opinionText"> |
|||
</el-input> |
|||
<el-button type="primary" @click="xingOperation(1)" plain>同意</el-button> |
|||
<el-button type="danger" @click="xingOperation(2)" plain>驳回</el-button> |
|||
</el-card> |
|||
<!-- <el-timeline reverse="true"> |
|||
<el-timeline-item |
|||
v-for="(item,index) in list.flowLog" |
|||
:key="index" |
|||
> |
|||
<el-card> |
|||
<h4>{{item.groupname}}</h4> |
|||
<p v-for="(a,index) in item.userlist"> |
|||
{{a.name}} {{a.timeval}} |
|||
</p> |
|||
</el-card> |
|||
</el-timeline-item> |
|||
</el-timeline> --> |
|||
<!-- <el-card style="margin-top: 25px" class="box-card" v-for="(item,index) in list.flowLog" :key="index"> |
|||
<el-descriptions class="margin-top" :column="3" border> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
节点 |
|||
</template>+ |
|||
{{item.groupname}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
步骤 |
|||
</template> |
|||
{{item.step}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
状态 |
|||
</template> |
|||
<div v-if="item.state==1"> |
|||
未操作 |
|||
</div> |
|||
<div v-if="item.state==2"> |
|||
已操作 |
|||
</div> |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<el-table |
|||
:data="item.userlist" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="istrue" |
|||
label="操作"> |
|||
<template #default="scope"> |
|||
<div v-if="scope.row.istrue==1"><img width="20px" src="../../assets/duihao.png"></div> |
|||
<div v-if="scope.row.istrue==0"></div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="timeval" |
|||
label="操作时间"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return{ |
|||
opinionText:'', |
|||
buzhou:0, |
|||
carddianShow:false, |
|||
cardShow:false, |
|||
reverse: true, |
|||
activities: [{ |
|||
content: '活动按期开始', |
|||
}, { |
|||
content: '创建成功', |
|||
|
|||
}], |
|||
// 数据列表 |
|||
list:[], |
|||
// 选择员工配置项 |
|||
userProps: { |
|||
value: "id", |
|||
label: "name", |
|||
children: "groupUser", |
|||
emitPath:false, |
|||
multiple: false |
|||
}, |
|||
grouplistBackup:[], |
|||
form:{ |
|||
outid:'', |
|||
}, |
|||
tableData:[ |
|||
{ |
|||
type:1,//类型 |
|||
userkey:'',//人员 |
|||
weight:''//比重 |
|||
}, |
|||
], |
|||
} |
|||
}, |
|||
created () { |
|||
this.form.outid=this.$route.query.outid |
|||
this.urlData=this.$route.query |
|||
this.getData() |
|||
// if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { |
|||
|
|||
// setToken(this.$route.query.token) |
|||
// setKey(this.$route.query.key) |
|||
// if (getToken()=='') { |
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/?url=http://new.hxgk.group&controll=quantitativeList&id='+this.$route.query.id; |
|||
// }else if (typeof this.$route.query.token === 'undefined') { |
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/?url=http://new.hxgk.group&controll=quantitativeList&id='+this.$route.query.id; |
|||
// }else{ |
|||
// this.form.outid=this.$route.query.id |
|||
|
|||
// } |
|||
|
|||
// }else{ |
|||
// if (sessionStorage.getItem('userinfo')==null) { |
|||
// this.$router.push('/quantitativeListLogin?id='+this.$route.query.id) |
|||
// }else if (sessionStorage.getItem('userinfo')==undefined) { |
|||
// this.$router.push('/quantitativeListLogin?id='+this.$route.query.id) |
|||
// }else if (sessionStorage.getItem('userinfo')=='') { |
|||
// this.$router.push('/quantitativeListLogin?id='+this.$route.query.id) |
|||
// }else if (this.$store.state.user.token=='') { |
|||
// this.$router.push('/quantitativeListLogin?id='+this.$route.query.id) |
|||
// }else if (this.$store.state.user.token==null) { |
|||
// this.$router.push('/quantitativeListLogin?id='+this.$route.query.id) |
|||
// }else if (this.$store.state.user.token===undefined) { |
|||
// this.$router.push('/quantitativeListLogin?id='+this.$route.query.id) |
|||
// }else if (typeof this.$store.state.user.token=="undefined") { |
|||
// this.$router.push('/quantitativeListLogin?id='+this.$route.query.id) |
|||
// }else{ |
|||
// this.form.outid=this.$route.query.id |
|||
// this.getData() |
|||
// } |
|||
// } |
|||
|
|||
if (document.body.clientWidth<1000) { |
|||
this.bianKuan=100 |
|||
this.carddianShow=false |
|||
this.cardShow=true |
|||
}else{ |
|||
this.bianKuan=40 |
|||
this.carddianShow=true |
|||
this.cardShow=false |
|||
} |
|||
}, |
|||
methods: { |
|||
// 定量审核同意 |
|||
async xingOperation(val){ |
|||
// 同意 |
|||
if (val==1) { |
|||
const from = { |
|||
orderid: this.form.outid, //审批单ID |
|||
yesorno: 1, //1：同意；2：驳回 |
|||
content: this.opinionText //审批意见 |
|||
} |
|||
this.$u.api.Duty.sanction(from).then(res => { |
|||
if(res.code==0){ |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '成功!' |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
this.opinionText='' |
|||
this.getData() |
|||
} |
|||
// 驳回 |
|||
if (val==2) { |
|||
const from = { |
|||
orderid: this.form.outid, //审批单ID |
|||
yesorno: 2, //1：同意；2：驳回 |
|||
content: this.opinionText //审批意见 |
|||
} |
|||
this.$u.api.Duty.sanction(from).then(res => { |
|||
if(res.code==0){ |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '成功!' |
|||
}) |
|||
} |
|||
}) |
|||
this.getData() |
|||
this.opinionText='' |
|||
} |
|||
}, |
|||
// 获取数据 |
|||
getData(){ |
|||
this.$u.api.Duty.lookrationkscoreflow(this.form).then(res => { |
|||
if(res.code==0){ |
|||
this.list=res.data |
|||
this.list.flowall.forEach(element => { |
|||
if (element.state==2) { |
|||
this.buzhou=this.buzhou+1 |
|||
} |
|||
}); |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
|
|||
// 删除行 |
|||
deleteRulesList(row){ |
|||
this.tableData.splice(row.$index,1); |
|||
}, |
|||
// 数组加行 |
|||
jiaArr(){ |
|||
this.tableData.push({ |
|||
type:'',//类型 |
|||
userkey:'',//人员 |
|||
weight:''//比重 |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.recommendPage { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.el-card__body{ |
|||
padding: 10px !important; |
|||
} |
|||
.form{ |
|||
width: 100%; |
|||
margin: 0 auto; |
|||
} |
|||
.p{ |
|||
margin-bottom: 10px !important; |
|||
margin-top: 20px !important; |
|||
width: 330px; |
|||
font-size: 30px; |
|||
font-weight:bold; |
|||
margin: 0 auto; |
|||
} |
|||
.p2{ |
|||
margin-bottom: 10px !important; |
|||
margin-top: 20px !important; |
|||
width: 270px; |
|||
font-size: 24px; |
|||
margin: 0 auto; |
|||
} |
|||
.xiao{ |
|||
color: rgb(174,174,174); |
|||
} |
|||
.da{ |
|||
font-size: 16px; |
|||
font-weight:bold; |
|||
} |
|||
.left{ |
|||
float: left; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,614 @@ |
|||
<template> |
|||
<div style="background-color:rgb(242,244,246)"> |
|||
<!-- <div class="p2" v-if="cardShow">定性考核审批</div> --> |
|||
<div :style="'width:' + bianKuan + '%;margin: 0 auto;padding: 5px;'"> |
|||
<el-card class="box-card1" style="margin-bottom: 10px;" :body-style="{ padding: '10px' }"> |
|||
<p class="xiao">审批编号：{{list.orderid}}</p> |
|||
<p class="da"> |
|||
{{list.title}} |
|||
</p> |
|||
</el-card> |
|||
<el-card class="box-card" v-if="carddianShow" style="margin-bottom: 10px;"> |
|||
<el-descriptions class="margin-top" :column="1" border> |
|||
<el-descriptions-item> |
|||
<template slot="label" width='85'> |
|||
考核纬度 |
|||
</template> |
|||
{{list.dimension}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
考核指标 |
|||
</template> |
|||
{{list.target}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
考核项目 |
|||
</template> |
|||
{{list.targetsun}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
考核内容 |
|||
</template> |
|||
{{list.detailedtargent}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
考核标准 |
|||
</template> |
|||
{{list.content}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
{{list.lanmuname}} |
|||
</template> |
|||
{{list.reasoninfo}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
考核原因 |
|||
</template> |
|||
{{list.reason}} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<el-carousel v-if="imgList.length!=0" type="card" height="100px" :autoplay="false"> |
|||
<el-carousel-item v-for="(img,index) in imgList" :key="index"> |
|||
<el-image |
|||
style="width: 100px; height: 100px;" |
|||
:src="img" |
|||
:preview-src-list="imgList"> |
|||
</el-image> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
<el-row v-for="(itema,index) in list.enclosure" :key="index"> |
|||
<el-col :span="24" v-if="itema.type!=1" style="margin-top: 10px;"> |
|||
<i class="el-icon-document"></i> |
|||
<a :href="itema.filepath" :download="itema.filename">{{itema.filename}}</a> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
<el-card class="box-card font" v-if="cardShow" style="margin-bottom: 10px;"> |
|||
<el-row class="bottom"> |
|||
<el-col :span="6">考核纬度:</el-col> |
|||
<el-col :span="18">{{list.dimension}}</el-col> |
|||
</el-row> |
|||
<el-row class="bottom"> |
|||
<el-col :span="6">考核指标:</el-col> |
|||
<el-col :span="18">{{list.target}}</el-col> |
|||
</el-row> |
|||
<el-row class="bottom"> |
|||
<el-col :span="6">考核项目:</el-col> |
|||
<el-col :span="18">{{list.targetsun}}</el-col> |
|||
</el-row> |
|||
<el-row class="bottom"> |
|||
<el-col :span="6">考核内容:</el-col> |
|||
<el-col :span="18">{{list.detailedtargent}}</el-col> |
|||
</el-row> |
|||
<el-row class="bottom"> |
|||
<el-col :span="6">考核标准:</el-col> |
|||
<el-col :span="18">{{list.content}}</el-col> |
|||
</el-row> |
|||
<el-row class="bottom"> |
|||
<el-col :span="6">{{list.lanmuname}}:</el-col> |
|||
<el-col :span="18">{{list.reasoninfo}}</el-col> |
|||
<!-- <el-col>{{list.reasoninfo}}</el-col> --> |
|||
<!-- <el-col :span="19"></el-col> --> |
|||
</el-row> |
|||
<el-row class="bottom"> |
|||
<el-col :span="6">考核原因:</el-col> |
|||
<el-col :span="18">{{list.reason}}</el-col> |
|||
</el-row> |
|||
<el-carousel v-if="imgList.length!=0" type="card" height="100px" :autoplay="false"> |
|||
<el-carousel-item v-for="(img,index) in imgList" :key="index"> |
|||
<el-image |
|||
style="width: 100px; height: 100px;" |
|||
:src="img" |
|||
:preview-src-list="imgList"> |
|||
</el-image> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
<el-row v-for="(itema,index) in list.enclosure" :key="index"> |
|||
<el-col :span="24" v-if="itema.type!=1" style="margin-top: 10px;"> |
|||
<i class="el-icon-document"></i> |
|||
<a :href="itema.filepath" :download="itema.filename">{{itema.filename}}</a> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- <el-descriptions class="margin-top" :column="1"> |
|||
<el-descriptions-item label="考核纬度">{{list.dimension}}</el-descriptions-item> |
|||
<el-descriptions-item label="考核指标">{{list.target}}</el-descriptions-item> |
|||
<el-descriptions-item label="考核项目">{{list.targetsun}}</el-descriptions-item> |
|||
<el-descriptions-item label="考核内容">{{list.detailedtargent}}</el-descriptions-item> |
|||
<el-descriptions-item label="考核标准">{{list.content}}</el-descriptions-item> |
|||
<el-descriptions-item label="操作">{{list.reasoninfo}}</el-descriptions-item> |
|||
<el-descriptions-item label="考核原因">{{list.reason}}</el-descriptions-item> |
|||
</el-descriptions> --> |
|||
</el-card> |
|||
<el-card class="box-card" style="margin-bottom: 10px;" v-if="list.divresbil!=null"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>责任划分</span> |
|||
</div> |
|||
<el-descriptions style="border-bottom: 1px solid #EBEEF5;margin-top:10px" class="margin-top font" :column="1" v-for="(item,index) in list.divresbil" :key="index"> |
|||
<el-descriptions-item label="责任类型">{{item.type}}</el-descriptions-item> |
|||
<el-descriptions-item label="姓名">{{item.username}}</el-descriptions-item> |
|||
<el-descriptions-item label="比重">{{item.weight}}</el-descriptions-item> |
|||
</el-descriptions> |
|||
</el-card> |
|||
<!-- <el-card class="box-card" style="margin-bottom: 10px;" v-if="list.enclosure!=null"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>附件</span> |
|||
</div> |
|||
|
|||
<el-carousel type="card" height="100px" :autoplay="false"> |
|||
<el-carousel-item v-for="(img,index) in imgList" :key="index"> |
|||
<el-image |
|||
style="width: 100px; height: 100px;" |
|||
:src="img" |
|||
:preview-src-list="imgList"> |
|||
</el-image> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
<el-row v-for="(itema,index) in list.enclosure" :key="index"> |
|||
<el-col :span="24" v-if="itema.type!=1" style="margin-top: 10px;"> |
|||
<i class="el-icon-document"></i> |
|||
<a :href="itema.filepath" :download="itema.filename">{{itema.filename}}</a> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> --> |
|||
<el-dialog :visible.sync="dialogVisible"> |
|||
<img width="100%" :src="dialogImageUrl" alt=""> |
|||
</el-dialog> |
|||
<el-card class="box-card" v-for="(item,index) in list.rectifmeasures" :key="index" style="margin-bottom: 10px;"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>整改措施</span> |
|||
</div> |
|||
<el-descriptions class="margin-top font" :column="1"> |
|||
<el-descriptions-item label="姓名">{{item.recname}}</el-descriptions-item> |
|||
<el-descriptions-item label="内容">{{item.reccont}}</el-descriptions-item> |
|||
<el-descriptions-item label="时间">{{item.timeval}}</el-descriptions-item> |
|||
<el-carousel v-if="imgList!=null" type="card" height="100px" :autoplay="false"> |
|||
<el-carousel-item v-for="(img,index) in item.enclosure" :key="index"> |
|||
<el-image |
|||
v-if="img.type==1" |
|||
style="width: 100px; height: 100px;" |
|||
:src="img.filepath" |
|||
:preview-src-list="item.enclosure"> |
|||
</el-image> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
<el-row v-for="(itema,index) in item.enclosure" :key="index"> |
|||
<el-col :span="24" v-if="itema.type!=1" style="margin-top: 10px;"> |
|||
<i class="el-icon-document"></i> |
|||
<a :href="itema.filepath" :download="itema.filename">{{itema.filename}}</a> |
|||
</el-col> |
|||
</el-row> |
|||
</el-descriptions> |
|||
</el-card> |
|||
<!-- <el-table |
|||
:data="list.divresbil" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="type" |
|||
label="责任类型"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="username" |
|||
label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="weight" |
|||
label="比重"> |
|||
</el-table-column> |
|||
</el-table> --> |
|||
<!-- <div v-for="(item,index) in list.TechnologicalProcess"> |
|||
<el-descriptions class="margin-top" :column="3" border> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
节点 |
|||
</template> |
|||
{{item.groupname}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
步骤 |
|||
</template> |
|||
{{item.step}} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> |
|||
状态 |
|||
</template> |
|||
<div v-if="item.state==1"> |
|||
未操作 |
|||
</div> |
|||
<div v-if="item.state==2"> |
|||
已操作 |
|||
</div> |
|||
</el-descriptions-item> |
|||
|
|||
</el-descriptions> |
|||
<el-table |
|||
:data="item.userlist" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="istrue" |
|||
label="操作"> |
|||
<template #default="scope"> |
|||
<div v-if="scope.row.istrue==1"><img width="20px" src="../../assets/duihao.png"></div> |
|||
<div v-if="scope.row.istrue==0"></div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="timeval" |
|||
label="操作时间"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> --> |
|||
<!-- --> |
|||
<el-card class="box-card" style="margin-bottom: 130px;"> |
|||
|
|||
<el-steps direction="vertical" :active="buzhou"> |
|||
<el-step v-for="(item,index) in list.flowmapall" :key="index" :title="item.nodename" icon="el-icon-circle-check" > |
|||
<template slot="description"> |
|||
<div style="color: rgb(153,153,153);" v-for="(a,userlistIndex) in item.userlist" :key="userlistIndex"> |
|||
<el-row style="margin-bottom: 10px;"> |
|||
<el-col :span="4" v-if="a.log!=null"> |
|||
<el-badge is-dot type="primary "> |
|||
<el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar> |
|||
</el-badge> |
|||
</el-col> |
|||
<el-col :span="4" v-else> |
|||
<el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar> |
|||
</el-col> |
|||
<el-col :span="20" style="margin-top: -5px;"> |
|||
{{a.workshopname}}-{{a.postname}}-{{a.name}} |
|||
<el-row> |
|||
<div v-for="(i,logIndex) in a.log" :key="logIndex" style="margin-top: -5px;"> |
|||
<div class="left" v-if="i.state==2">已同意 · </div> |
|||
<div class="left" v-if="i.state==1" type="info">未操作 · </div> |
|||
<div class="left" v-if="i.state==3" type="danger">驳回 · </div> |
|||
<div class="left">{{i.time}}</div> |
|||
</div> |
|||
</el-row> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- {{userlist.log}} --> |
|||
|
|||
<!-- <div class="left"> |
|||
<el-avatar style="margin-right: 5px;" shape="square" size="small" :src="a.icon"></el-avatar> |
|||
</div> |
|||
|
|||
|
|||
<div class="left">{{a.workshopname}}-{{a.postname}}-{{a.name}} </div> |
|||
|
|||
|
|||
<div class="left" v-for="(i,logIndex) in a.log"> |
|||
<el-tag v-if="i.state==2">通过</el-tag> |
|||
<el-tag v-if="i.state==1" type="info">未操作</el-tag> |
|||
<el-tag v-if="i.state==3" type="danger">驳回</el-tag> |
|||
<div>{{i.time}}</div> |
|||
</div> --> |
|||
|
|||
|
|||
|
|||
<!-- <template v-if="a.log!=null"> |
|||
<div v-for="(i,logIndex) in a.log"> |
|||
<el-tag v-if="i.state==2">通过</el-tag> |
|||
<el-tag v-if="i.state==1" type="info">未操作</el-tag> |
|||
<el-tag v-if="i.state==3" type="danger">驳回</el-tag> |
|||
<div>{{i.time}}</div> |
|||
</div> |
|||
</template> --> |
|||
|
|||
<!-- <el-tag v-if="a.log!=null||a.log.state==1" type="info">未操作</el-tag> |
|||
<el-tag v-if="a.log!=null||a.log.state==3" type="danger">驳回</el-tag> --> |
|||
<!-- <div>{{}}</div> --> |
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
</el-card> |
|||
<el-card class="box-card" v-if="list.isset==1" style="position: fixed;bottom: 0;width: 100%;z-index: 1000;"> |
|||
<el-input |
|||
style="margin-bottom:10px" |
|||
type="textarea" |
|||
autosize |
|||
placeholder="请输入审批意见" |
|||
v-model="opinionText"> |
|||
</el-input> |
|||
<el-button type="primary" @click="xingOperation(1)" plain>同意</el-button> |
|||
<el-button type="danger" @click="xingOperation(2)" plain>驳回</el-button> |
|||
</el-card> |
|||
<!-- <el-table |
|||
:data="list.rectifmeasures" |
|||
border |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="recname" |
|||
label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="reccont" |
|||
label="操作"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="timeval" |
|||
label="时间"> |
|||
</el-table-column> |
|||
</el-table> --> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return{ |
|||
// 审批意见 |
|||
opinionText:'', |
|||
swiperOption: { |
|||
// slidesPerView: 1, |
|||
loop: true, // 循环模式 |
|||
autoplay: { |
|||
delay: 3000, |
|||
stopOnLastSlide: false, |
|||
disableOnInteraction: false |
|||
}, |
|||
speed: 2000, |
|||
// effect: 'fade', |
|||
// 显示分页 |
|||
pagination: { |
|||
el: ".swiper-pagination", |
|||
clickable: true //允许分页点击跳转 |
|||
}, |
|||
// 设置点击箭头 |
|||
navigation: { |
|||
nextEl: ".swiper-button-next", |
|||
prevEl: ".swiper-button-prev" |
|||
}, |
|||
}, |
|||
imgList:[], |
|||
dialogImageUrl: '', |
|||
dialogVisible: false, |
|||
disabled: false, |
|||
// 步骤显示 |
|||
buzhou:0, |
|||
carddianShow:false, |
|||
cardShow:false, |
|||
// 数据列表 |
|||
list:[], |
|||
// 选择员工配置项 |
|||
userProps: { |
|||
value: "id", |
|||
label: "name", |
|||
children: "groupUser", |
|||
emitPath:false, |
|||
multiple: false |
|||
}, |
|||
grouplistBackup:[], |
|||
form:{ |
|||
outid:'', |
|||
}, |
|||
tableData:[ |
|||
{ |
|||
type:1,//类型 |
|||
userkey:'',//人员 |
|||
weight:''//比重 |
|||
}, |
|||
], |
|||
} |
|||
}, |
|||
// computed: { |
|||
// swiper() { |
|||
// return this.$refs.mySwiper.swiper; |
|||
// } |
|||
// }, |
|||
created () { |
|||
this.form.outid=this.$route.query.outid |
|||
this.getData() |
|||
// if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { |
|||
// setToken(this.$route.query.token) |
|||
// setKey(this.$route.query.key) |
|||
// if (getToken()=='') { |
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/?url=http://new.hxgk.group&controll=approvalList&id='+this.$route.query.id; |
|||
// }else if (typeof this.$route.query.token === 'undefined') { |
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/?url=http://new.hxgk.group&controll=approvalList&id='+this.$route.query.id; |
|||
// }else{ |
|||
// this.form.outid=this.$route.query.id |
|||
// this.getData() |
|||
// } |
|||
// }else{ |
|||
// if (sessionStorage.getItem('userinfo')==null) { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// }else if (sessionStorage.getItem('userinfo')==undefined) { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// }else if (sessionStorage.getItem('userinfo')=='') { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// }else if (this.$store.state.user.token=='') { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// }else if (this.$store.state.user.token==null) { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// }else if (this.$store.state.user.token===undefined) { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// }else if (typeof this.$store.state.user.token=="undefined") { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// }else{ |
|||
// this.form.outid=this.$route.query.id |
|||
// this.getData() |
|||
// } |
|||
// } |
|||
|
|||
// if (sessionStorage.getItem('userinfo')==null) { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// } |
|||
// if (sessionStorage.getItem('userinfo')==undefined) { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// } |
|||
// if (sessionStorage.getItem('userinfo')=='') { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// } |
|||
// if (this.$store.state.user.token=='') { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// } |
|||
// if (this.$store.state.user.token==null) { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// } |
|||
// if (this.$store.state.user.token===undefined) { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// } |
|||
// if (typeof this.$store.state.user.token=="undefined") { |
|||
// this.$router.push('/dingxingLogin?id='+this.$route.query.id) |
|||
// } |
|||
|
|||
// this.form.outid=this.$route.query.id |
|||
// this.getData() |
|||
|
|||
if (document.body.clientWidth<1000) { |
|||
this.bianKuan=100 |
|||
this.carddianShow=false |
|||
this.cardShow=true |
|||
}else{ |
|||
this.bianKuan=40 |
|||
this.carddianShow=true |
|||
this.cardShow=false |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
// 定性审核同意 |
|||
async xingOperation(val){ |
|||
// 同意 |
|||
if (val==1) { |
|||
const from = { |
|||
orderid: this.form.outid, //审批单ID |
|||
yesorno: 1, //1：同意；2：驳回 |
|||
content: this.opinionText //审批意见 |
|||
} |
|||
this.$u.api.Duty.operation(from).then(res => { |
|||
if(res.code==0){ |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '成功!' |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
this.opinionText='' |
|||
this.getData() |
|||
} |
|||
// 驳回 |
|||
if (val==2) { |
|||
const from = { |
|||
orderid: this.form.outid, //审批单ID |
|||
yesorno: 2, //1：同意；2：驳回 |
|||
content: this.opinionText //审批意见 |
|||
} |
|||
this.$u.api.Duty.operation(from).then(res => { |
|||
if(res.code==0){ |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '成功!' |
|||
}) |
|||
} |
|||
}) |
|||
this.getData() |
|||
this.opinionText='' |
|||
} |
|||
}, |
|||
handleRemove(file) { |
|||
console.log(file); |
|||
}, |
|||
handlePictureCardPreview(file) { |
|||
this.dialogImageUrl = file.url; |
|||
this.dialogVisible = true; |
|||
}, |
|||
handleDownload(file) { |
|||
console.log(file); |
|||
}, |
|||
// 获取数据 |
|||
getData(){ |
|||
this.$u.api.Duty.lookdutkscoreflow(this.form).then(res => { |
|||
|
|||
|
|||
if(res.code==0){ |
|||
this.list=res.data |
|||
this.list.flowmapall.forEach(element => { |
|||
if (element.state==2) { |
|||
this.buzhou=this.buzhou+1 |
|||
} |
|||
}); |
|||
this.list.enclosure.forEach(element => { |
|||
if (element.type==1) { |
|||
this.imgList.push(element.filepath) |
|||
|
|||
} |
|||
}); |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
|
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.recommendPage { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.box-card1 .el-card__body{ |
|||
padding-top: 5px !important; |
|||
padding-bottom: 5px !important; |
|||
} |
|||
.left{ |
|||
float: left; |
|||
} |
|||
.xiao{ |
|||
color: rgb(174,174,174); |
|||
} |
|||
.da{ |
|||
font-size: 16px; |
|||
font-weight:bold; |
|||
} |
|||
.form{ |
|||
width: 100%; |
|||
margin: 0 auto; |
|||
} |
|||
.p{ |
|||
margin-bottom: 10px !important; |
|||
margin-top: 20px !important; |
|||
width: 235px; |
|||
// font-size: 30px; |
|||
// font-weight:bold; |
|||
margin: 0 auto; |
|||
} |
|||
.p2{ |
|||
margin-bottom: 10px !important; |
|||
margin-top: 20px !important; |
|||
width: 270px; |
|||
font-size: 24px; |
|||
margin: 0 auto; |
|||
} |
|||
.font{ |
|||
font-size: 16px; |
|||
color: #606266; |
|||
} |
|||
.bottom{ |
|||
margin-bottom: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,368 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 审核页面 --> |
|||
<!-- <u-table style="margin-top: 10px;" v-if="show==0"> |
|||
<u-tr> |
|||
<u-th>审批名称</u-th> |
|||
<u-th>审批状态</u-th> |
|||
<u-th>操作</u-th> |
|||
</u-tr> |
|||
<u-tr v-for="(iteam,index) in dataList" :key="index"> |
|||
<u-td>{{iteam.tittle}}</u-td> |
|||
<u-td style="color: #2979FF;"> |
|||
{{iteam.condition}} |
|||
</u-td> |
|||
|
|||
<u-td> |
|||
<view class="" @click="toXiang(iteam)"> |
|||
查看详情 |
|||
</view> |
|||
</u-td> |
|||
</u-tr> |
|||
|
|||
</u-table> --> |
|||
<view class="" style="padding: 10px;background-color: rgb(245,246,248);"> |
|||
<u-search bg-color='#fff' :show-action='false' input-align='center' shape="shape" style="margin-top: 5px;" placeholder="输入指标名称" v-model="keyword" @search="zhibiao" @custom="zhibiao"></u-search> |
|||
</view> |
|||
|
|||
<u-grid :col="4" :border="true"> |
|||
<u-grid-item @click="openBumen" style="height: 35px;"> |
|||
<text class="grid-text">部门<u-icon name="arrow-down"></u-icon></text> |
|||
</u-grid-item> |
|||
<u-grid-item @click="openShi" style="height: 35px;"> |
|||
<picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> |
|||
<text class="grid-text">时间<u-icon name="arrow-down"></u-icon></text> |
|||
<!-- <view>时间</view> --> |
|||
</picker> |
|||
|
|||
<!-- <u-col span="8"> |
|||
<u-icon name="arrow-down"></u-icon> |
|||
</u-col> --> |
|||
<!-- <view class="grid-text">时间</view> --> |
|||
</u-grid-item> |
|||
<u-grid-item @click="openStace" style="height: 35px;"> |
|||
<text class="grid-text">状态<u-icon name="arrow-down"></u-icon></text> |
|||
</u-grid-item> |
|||
<u-grid-item @click="openShenStace" style="height: 35px;"> |
|||
<text class="grid-text">审批<u-icon name="arrow-down"></u-icon></text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
<!-- <u-dropdown @open='openPick'> |
|||
<u-dropdown-item v-model="value1" title="状态" :options="options1" @change='seleStace'></u-dropdown-item> |
|||
<u-dropdown-item title="时间"> |
|||
<view class="slot-content"> |
|||
|
|||
</view> |
|||
</u-dropdown-item> |
|||
</u-dropdown> --> |
|||
<!-- <picker fields="month" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" v-model="pickertimeShow"> |
|||
<view>{{ date }}</view> |
|||
</picker> --> |
|||
<!-- <u-picker mode="time" :defaultTime="defaultTime" v-model="pickerShow" :params="params" end-year="2030" @confirm="confirm"></u-picker> --> |
|||
<el-card shadow="never" class="box-card" v-for="(iteam,index) in dataList" @click.native="toXiang(iteam)" :body-style="{ padding: '10px' }" :key="index"> |
|||
|
|||
<el-descriptions :column="1"> |
|||
<template slot="title" style="margin-bottom: 5px !important"> |
|||
{{iteam.tittle}} |
|||
<el-tag style="margin-left: 10px;" size="mini" effect="plain" v-if="iteam.result=='审批通过'">{{iteam.result}}</el-tag> |
|||
<el-tag style="margin-left: 10px;" size="mini" effect="plain" v-else-if="iteam.result=='审批中'" type="success">{{iteam.result}}</el-tag> |
|||
<el-tag style="margin-left: 10px;" size="mini" effect="plain" v-else-if="iteam.result=='驳回'" type="danger">{{iteam.result}}</el-tag> |
|||
<el-tag style="margin-left: 10px;" size="mini" effect="plain" v-else>{{iteam.result}}</el-tag> |
|||
</template> |
|||
<template slot="extra"> |
|||
{{iteam.monthdays}} |
|||
</template> |
|||
<!-- <el-descriptions-item label="被考核部门"> |
|||
<view class="" v-for="(item,index1) in iteam.executivedepartment" :key="index1"> |
|||
{{item}} |
|||
</view> |
|||
</el-descriptions-item> --> |
|||
<el-descriptions-item label="统计周期" style="margin-top:-15px !important" labelStyle="margin-top:-15px !important" contentStyle="margin-top:-15px !important"> |
|||
<view class="" v-if="iteam.cycle==1" > |
|||
{{iteam.year}}年 |
|||
</view> |
|||
<view class="" v-if="iteam.cycle==5"> |
|||
{{iteam.year}}年-{{iteam.quarter}}季度 |
|||
</view> |
|||
<view class="" v-if="iteam.cycle==4"> |
|||
{{iteam.year}}年-{{iteam.month}}月 |
|||
</view> |
|||
<view class="" v-if="iteam.cycle==6"> |
|||
{{iteam.year}}年 |
|||
</view> |
|||
<view class="" v-if="iteam.cycle==0"> |
|||
{{iteam.year}}年{{iteam.month}}月 |
|||
</view> |
|||
</el-descriptions-item> |
|||
<el-descriptions-item label="当前节点">{{iteam.node}}</el-descriptions-item> |
|||
</el-descriptions> |
|||
</el-card> |
|||
<u-loadmore :status="bottonSta" :icon-type="iconType" :load-text="loadText" /> |
|||
<!-- <u-picker mode="selector" :default-selector="[0]" v-model="show" @confirm="confirm" :range="range" :range-key="label"></u-picker> --> |
|||
<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj" range-key="cateName" @confirm='confirm'></u-picker> |
|||
<u-picker mode="selector" v-model="shenShow" :default-selector="[0]" :range="shenSelectorObj" range-key="cateName" @confirm='confirmShen'></u-picker> |
|||
<!-- <u-popup height="50%" mode="bottom" v-model="bumenShow"> |
|||
<el-cascader filterable clearable :options="departmentList" :show-all-levels="false" :props="props1"></el-cascader> |
|||
</u-popup> --> |
|||
<el-dialog :close-on-click-modal="false" width="100%" :visible.sync="bumenShow"> |
|||
<el-cascader-panel placeholder="请选择部门" filterable clearable :options="departmentList" :show-all-levels="false" :props="props1" @change='clickBu'></el-cascader-panel> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
function getDate(type) { |
|||
const date = new Date(); |
|||
|
|||
let year = date.getFullYear(); |
|||
let month = date.getMonth() + 1; |
|||
let day = date.getDate(); |
|||
|
|||
if (type === 'start') { |
|||
year = year - 10; |
|||
} else if (type === 'end') { |
|||
year = year + 10; |
|||
} |
|||
month = month > 9 ? month : '0' + month; |
|||
day = day > 9 ? day : '0' + day; |
|||
|
|||
return `${year}-${month}-${day}`; |
|||
} |
|||
export default { |
|||
|
|||
data() { |
|||
return { |
|||
bottonSta:'loading', |
|||
showData:{}, |
|||
shenShow:false, |
|||
keyword:'', |
|||
// 部门列表 |
|||
departmentList:[], |
|||
props1: { |
|||
checkStrictly: true, |
|||
value: "id", |
|||
label: "name", |
|||
children: "children", |
|||
emitPath:false, |
|||
}, |
|||
bumenShow:false, |
|||
// range: ['一', '片', '冰', '心', '在', '玉', '壶'], |
|||
pickertimeShow:false, |
|||
date: getDate({ |
|||
format: true |
|||
}), |
|||
startDate: getDate('start'), |
|||
endDate: getDate('end'), |
|||
value1:'', |
|||
selectorObj: [{ |
|||
cateName: '全部', |
|||
id: 0, |
|||
},{ |
|||
cateName: '起草', |
|||
id: 1, |
|||
}, |
|||
{ |
|||
cateName: '审批中', |
|||
id: 2, |
|||
}, |
|||
{ |
|||
cateName: '通过', |
|||
id: 3, |
|||
}, |
|||
{ |
|||
cateName: '驳回', |
|||
id: 3, |
|||
}, |
|||
|
|||
], |
|||
shenSelectorObj: [{ |
|||
cateName: '全部', |
|||
id: 0, |
|||
},{ |
|||
cateName: '已处理', |
|||
id: 1, |
|||
},{ |
|||
cateName: '未处理', |
|||
id: 2, |
|||
}, |
|||
|
|||
|
|||
], |
|||
searchInfo: { |
|||
state:0, |
|||
page: 1, |
|||
pagesize: 10 |
|||
}, |
|||
show:false, |
|||
liangDataList:[], |
|||
dataList:[] |
|||
} |
|||
|
|||
}, |
|||
onShow() { |
|||
this.searchInfo= { |
|||
state:0, |
|||
page: 1, |
|||
pagesize: 10 |
|||
} |
|||
this.getData() |
|||
this.getGrouplist() |
|||
}, |
|||
onLoad(){ |
|||
|
|||
// if (this.$store.state.isLogin==false) { |
|||
// window.location.href = 'https://www.hxgk.group/jumpapiurl/?url=http://new.hxgk.group/sj/index'; |
|||
// } |
|||
}, |
|||
onReachBottom(){ |
|||
this.searchInfo.pagesize=this.searchInfo.pagesize+10, |
|||
|
|||
this.getData() |
|||
|
|||
console.log("我已经滚动到底部了") |
|||
}, |
|||
methods: { |
|||
zhibiao(val){ |
|||
console.log(val) |
|||
this.searchInfo.title=this.keyword |
|||
this.getData() |
|||
}, |
|||
|
|||
clickBu(val){ |
|||
console.log(val) |
|||
this.searchInfo.department = val.toString(); |
|||
this.getData() |
|||
}, |
|||
// 获取部门 |
|||
getGrouplist(){ |
|||
const departmentFrom={ |
|||
id:309 |
|||
} |
|||
this.$u.api.Duty.departmentlist(departmentFrom).then(res => { |
|||
// alert(JSON.stringify(res)) |
|||
|
|||
if(res.code==0){ |
|||
this.departmentList=res.data |
|||
console.log(this.departmentList) |
|||
} |
|||
|
|||
}) |
|||
|
|||
|
|||
|
|||
}, |
|||
openBumen(){ |
|||
this.bumenShow=true |
|||
}, |
|||
confirm(val){ |
|||
const index = val[0] |
|||
console.log(val[0]) |
|||
this.searchInfo.state=this.selectorObj[index].id |
|||
this.getData() |
|||
|
|||
}, |
|||
confirmShen(val){ |
|||
const index = val[0] |
|||
console.log("index") |
|||
console.log(val[0]) |
|||
console.log(val[0]==0) |
|||
if(val[0]==0){ |
|||
console.log("searchInfoTrue") |
|||
this.searchInfo= { |
|||
state:0, |
|||
page: 1, |
|||
pagesize: 10 |
|||
} |
|||
|
|||
}else{ |
|||
this.searchInfo.isset=this.shenSelectorObj[index].id |
|||
|
|||
} |
|||
this.getData() |
|||
}, |
|||
openStace(){ |
|||
console.log("696") |
|||
this.show=true; |
|||
}, |
|||
openShenStace(){ |
|||
console.log("696") |
|||
this.shenShow=true; |
|||
}, |
|||
openShi(){ |
|||
console.log("696") |
|||
this.pickertimeShow=true; |
|||
console.log(this.pickertimeShow) |
|||
}, |
|||
bindDateChange: function(e) { |
|||
this.searchInfo.time = e.detail.value; |
|||
this.getData() |
|||
console.log(e.detail.value) |
|||
}, |
|||
seleStace(val){ |
|||
this.searchInfo.state=val |
|||
this.getData() |
|||
}, |
|||
getData(){ |
|||
this.bottonSta='loading' |
|||
// if(this.bottonSta=='loading'){ |
|||
// this.$u.api.Duty.seeflowlog(this.searchInfo).then(res => { |
|||
// // alert(JSON.stringify(res)) |
|||
// if(res.code==0){ |
|||
// this.dataList=res.data.list |
|||
// if (res.data.count<res.data.pageSize) { |
|||
// this.bottonSta='nomore' |
|||
// } |
|||
// } |
|||
|
|||
// }) |
|||
// } |
|||
this.$u.api.Duty.seeflowlog(this.searchInfo).then(res => { |
|||
// alert(JSON.stringify(res)) |
|||
if(res.code==0){ |
|||
this.dataList=res.data.list |
|||
if (res.data.count<res.data.pageSize) { |
|||
this.bottonSta='nomore' |
|||
} |
|||
} |
|||
|
|||
}) |
|||
|
|||
}, |
|||
thumbChange(index) { |
|||
this.show=index |
|||
}, |
|||
toXiang(iteam){ |
|||
|
|||
if(iteam.class==1){ |
|||
// 定性 |
|||
this.$u.route('/pages/approval/dingxing', iteam); |
|||
|
|||
} |
|||
if(iteam.class==2){ |
|||
// 定性 |
|||
this.$u.route('/pages/approval/dingliang', iteam); |
|||
} |
|||
|
|||
}, |
|||
toZhi(iteam){ |
|||
this.$u.route('/pages/task/details', iteam); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep.el-descriptions__title{ |
|||
margin-bottom: -15px !important; |
|||
} |
|||
::v-deep.el-descriptions__header{ |
|||
margin-bottom: 0px !important; |
|||
} |
|||
::v-deep.el-descriptions__body .el-descriptions__table{ |
|||
margin-top: -15px !important; |
|||
} |
|||
::v-deep.el-descriptions :not(.is-bordered) .el-descriptions-item__cell{ |
|||
padding-bottom: 0px; |
|||
margin-top: -15px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-avatar |
|||
:mode="mode" |
|||
:size="size" |
|||
:src="src" |
|||
:text="text" |
|||
:showLevel="showLevel" |
|||
:showSex="showSex" |
|||
:sexIcon="sexIcon" |
|||
:bgColor='bgColor' |
|||
></u-avatar> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式选择</view> |
|||
<u-subsection :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">性别选择</view> |
|||
<u-subsection :list="['男', '女', '不显示']" @change="sexChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">等级</view> |
|||
<u-subsection :list="['显示', '不显示']" @change="levelChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义内容</view> |
|||
<u-subsection current="0" :list="['图片', '文字']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">尺寸</view> |
|||
<u-subsection current="1" :list="['large', 'default', 'mini', 160]" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mode: 'circle', |
|||
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', |
|||
text: '', // 优先级比src高 |
|||
size: '90', |
|||
showLevel: true, |
|||
showSex: true, |
|||
sexIcon: 'man', |
|||
bgColor: '#fcbd71' |
|||
} |
|||
}, |
|||
methods: { |
|||
modeChange(index) { |
|||
this.mode = index == 0 ? 'circle' : 'square'; |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.text = ''; |
|||
this.src = 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'; |
|||
} else { |
|||
this.text = '无头像'; |
|||
} |
|||
}, |
|||
sizeChange(index) { |
|||
this.size = index == 0 ? 'large' : index == 1 ? 'default' : index == 2 ? 'mini' : 160; |
|||
}, |
|||
sexChange(index) { |
|||
this.showSex = true; |
|||
if(index == 0) this.sexIcon = 'man'; |
|||
if(index == 1) this.sexIcon = 'woman'; |
|||
if(index == 2) this.showSex = false; |
|||
}, |
|||
levelChange(index) { |
|||
this.showLevel = !index; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,110 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<view class="u-avatar-wrap"> |
|||
<image @tap="preAvatar" class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image> |
|||
</view> |
|||
<u-button @click="chooseAvatar">选择图片</u-button> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">生成图片质量</view> |
|||
<u-subsection :current="1" :list="['0.3', '0.7', '1']" @change="qualityChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义参数</view> |
|||
<u-subsection :current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
</view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
avatar: 'https://cdn.uviewui.com/uview/common/logo.png', |
|||
} |
|||
}, |
|||
created() { |
|||
uni.$on('uAvatarCropper', path => { |
|||
this.avatar = path; |
|||
// 可以在此上传到服务端 |
|||
// uni.uploadFile({ |
|||
// url: 'http://192.168.100.17/index.php/index/index/upload', |
|||
// filePath: path, |
|||
// name: 'file', |
|||
// complete: (res) => { |
|||
// console.log(res); |
|||
// } |
|||
// }); |
|||
}) |
|||
}, |
|||
methods: { |
|||
chooseAvatar() { |
|||
this.$u.route({ |
|||
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper', |
|||
params: { |
|||
// 输出图片宽度，高等于宽，单位px |
|||
destWidth: 300, |
|||
// 裁剪框宽度，高等于宽，单位px |
|||
rectWidth: 200, |
|||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可 |
|||
fileType: 'jpg', |
|||
} |
|||
}) |
|||
}, |
|||
qualityChange(index) { |
|||
this.quality = index == 0 ? 0.3 : index == 1 ? 0.7 : 1; |
|||
}, |
|||
styleChange(index) { |
|||
if (index == 0) { |
|||
this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 200; |
|||
this.boundStyle = { |
|||
lineWidth: 8, |
|||
borderColor: this.$u.color['error'], |
|||
mask: 'rgba(0, 0, 0, 0.8)' |
|||
} |
|||
} else { |
|||
this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 400; |
|||
this.boundStyle = { |
|||
lineWidth: 4, |
|||
borderColor: 'rgb(245, 245, 245)', |
|||
mask: 'rgba(0, 0, 0, 0.35)' |
|||
} |
|||
} |
|||
}, |
|||
// 预览图片 |
|||
preAvatar() { |
|||
wx.previewImage({ |
|||
current: '', // 当前显示图片的 http 链接 |
|||
urls: [this.avatar] // 需要预览的图片 http 链接列表 |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.u-avatar-wrap { |
|||
overflow: hidden; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.u-avatar-demo { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
border-radius: 100rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<view class="u-no-demo-here">滚动页面即可在右下角看到返回顶部的按钮</view> |
|||
</view> |
|||
<u-back-top :scrollTop="scrollTop" :mode="mode" |
|||
:bottom="bottom" :right="right" :top="top" :icon="icon" :custom-style="customStyle" |
|||
:icon-style="iconStyle" :tips="tips" |
|||
> |
|||
</u-back-top> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式</view> |
|||
<u-subsection :list="['圆形', '方形']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">组件位置</view> |
|||
<u-subsection :list="['默认', '自定义']" @change="positionChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示组件的滚动条距离</view> |
|||
<u-subsection current="1" :list="['200', '400', '600']" @change="scrollTopChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
scrollTop: 0, |
|||
mode: 'circle', |
|||
bottom: 200, |
|||
right: 40, |
|||
top: 400, |
|||
icon: 'arrow-upward', |
|||
iconStyle: { |
|||
color: '#909399', |
|||
fontSize: '38rpx' |
|||
}, |
|||
customStyle: {}, |
|||
tips: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
modeChange(index) { |
|||
this.mode = !index ? 'circle' : 'square'; |
|||
}, |
|||
positionChange(index) { |
|||
if(index == 0) { |
|||
this.bottom = 200; |
|||
this.right = 40; |
|||
} else { |
|||
this.bottom = 400; |
|||
this.right = 80; |
|||
} |
|||
}, |
|||
scrollTopChange(index) { |
|||
this.top = [200, 400, 600][index]; |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.icon = 'arrow-up'; |
|||
this.iconStyle = { |
|||
color: '#2979ff', |
|||
fontSize: '34rpx' |
|||
}; |
|||
this.customStyle = { |
|||
backgroundColor: '#a0cfff', |
|||
color: '#2979ff' |
|||
}; |
|||
this.tips = '顶部'; |
|||
} else { |
|||
this.icon = 'arrow-upward'; |
|||
this.iconStyle = { |
|||
color: '#909399', |
|||
fontSize: '38rpx' |
|||
}; |
|||
this.customStyle = {}; |
|||
this.tips = ''; |
|||
} |
|||
} |
|||
}, |
|||
onPageScroll(e) { |
|||
this.scrollTop = e.scrollTop; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo { |
|||
height: 200vh; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap" style="background-color: #FFFFFF;"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-calendar v-model="show" ref="calendar" @change="change" :mode="mode" |
|||
:start-text="startText" :end-text="endText" :range-color="rangeColor" |
|||
:range-bg-color="rangeBgColor" :active-bg-color="activeBgColor" :btn-type="btnType" |
|||
> |
|||
</u-calendar> |
|||
<view class="u-demo-result-line"> |
|||
{{result}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="showBtnStatus" :list="['显示', '隐藏']" @change="showChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式</view> |
|||
<u-subsection current="1" :list="['单个日期', '日期范围']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
mode: 'range', |
|||
result: "请选择日期", |
|||
startText: '开始', |
|||
endText: '结束', |
|||
rangeColor: '#2979ff', |
|||
rangeBgColor: 'rgba(41,121,255,0.13)', |
|||
activeBgColor: '#2979ff', |
|||
btnType: 'primary', |
|||
} |
|||
}, |
|||
computed: { |
|||
showBtnStatus() { |
|||
return this.show ? 0 : 1; |
|||
} |
|||
}, |
|||
methods: { |
|||
showChange(index) { |
|||
this.show = !index; |
|||
}, |
|||
modeChange(index) { |
|||
this.mode = index == 0 ? 'date' : 'range'; |
|||
this.show = true; |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.startText = '住店'; |
|||
this.endText = '离店'; |
|||
this.activeBgColor = '#19be6b'; |
|||
this.rangeColor = '#19be6b'; |
|||
this.rangeBgColor = 'rgba(25,190,107, 0.13)'; |
|||
this.btnType = 'success'; |
|||
} else { |
|||
this.startText = '开始'; |
|||
this.endText = '结束'; |
|||
this.activeBgColor = '#2979ff'; |
|||
this.rangeColor = '#2979ff'; |
|||
this.rangeBgColor = 'rgba(41,121,255,0.13)'; |
|||
this.btnType = 'primary'; |
|||
} |
|||
this.show = true; |
|||
}, |
|||
customChange(index) { |
|||
if(index == 0) { |
|||
this.icon1 = 'map'; |
|||
this.icon2 = 'photo'; |
|||
this.arrow = true; |
|||
} else { |
|||
this.icon1 = ''; |
|||
this.icon2 = ''; |
|||
this.arrow = false; |
|||
} |
|||
}, |
|||
textareaChange(index) { |
|||
this.type = index == 0 ? 'textarea' : 'text'; |
|||
}, |
|||
change(e) { |
|||
if (this.mode == 'range') { |
|||
this.result = e.startDate + " - " + e.endDate; |
|||
} else { |
|||
this.result = e.result; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,115 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-empty :mode="mode"> |
|||
<u-button v-if="slot" slot="bottom" size="medium"> |
|||
slot按钮 |
|||
</u-button> |
|||
</u-empty> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式选择</view> |
|||
<u-table> |
|||
<u-tr class="u-tr"> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('car')">购物车为空</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('page')">页面不存在</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('search')">没有搜索结果</u-button> |
|||
</u-td> |
|||
</u-tr> |
|||
<u-tr class="u-tr"> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('address')">没有收货地址</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('wifi')">没有WiFi</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('order')">订单为空</u-button> |
|||
</u-td> |
|||
</u-tr> |
|||
<u-tr class="u-tr"> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('coupon')">没有优惠券</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('favor')">没有收藏</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('permission')">无权限</u-button> |
|||
</u-td> |
|||
</u-tr> |
|||
<u-tr class="u-tr"> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('history')">无历史记录</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('news')">无新闻列表</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('message')">消息列表为空</u-button> |
|||
</u-td> |
|||
</u-tr> |
|||
<u-tr class="u-tr"> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('list')">列表为空</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
<u-button :hair-line="false" size="mini" @click="modeChange('data')">数据为空</u-button> |
|||
</u-td> |
|||
<u-td class="u-td"> |
|||
待扩展 |
|||
</u-td> |
|||
</u-tr> |
|||
</u-table> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">传入slot</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mode: 'data', |
|||
slot: false |
|||
} |
|||
}, |
|||
methods: { |
|||
modeChange(mode = 'data') { |
|||
this.mode = mode; |
|||
}, |
|||
slotChange(index) { |
|||
this.slot = !index; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo-area { |
|||
height: 160px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-demo-area .u-empty { |
|||
padding-top: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap" style="background-color: #FFFFFF;"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-field |
|||
v-model="mobile" |
|||
label="手机号" |
|||
:error-message="errorMessage" |
|||
placeholder="请填写手机号" |
|||
:required="required" |
|||
:icon="icon1" |
|||
:type="type" |
|||
> |
|||
</u-field> |
|||
<u-field |
|||
v-model="code" |
|||
label="验证码" |
|||
placeholder="请填写验证码" |
|||
:required="required" |
|||
:icon="icon2" |
|||
> |
|||
<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button> |
|||
</u-field> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">右侧按钮</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示错误信息</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否必填</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="requiredChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示左图标和右箭头</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="customChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">第一个输入框为textarea类型</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="textareaChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mobile: '', |
|||
code: '', |
|||
errorMessage: '', |
|||
required: false, |
|||
placeholderColor: this.$u.color['tipsColor'], |
|||
arrow: false, |
|||
showBtn: false, |
|||
icon1: '', |
|||
icon2: '', |
|||
type: 'text', |
|||
} |
|||
}, |
|||
methods: { |
|||
showBtnChange(index) { |
|||
this.showBtn = index == 0 ? true : false; |
|||
}, |
|||
errorMessageChange(index) { |
|||
this.errorMessage = index == 0 ? '手机号有误' : false |
|||
}, |
|||
requiredChange(index) { |
|||
this.required = index == 0 ? true : false; |
|||
}, |
|||
customChange(index) { |
|||
if(index == 0) { |
|||
this.icon1 = 'map'; |
|||
this.icon2 = 'photo'; |
|||
this.arrow = true; |
|||
} else { |
|||
this.icon1 = ''; |
|||
this.icon2 = ''; |
|||
this.arrow = false; |
|||
} |
|||
}, |
|||
textareaChange(index) { |
|||
this.type = index == 0 ? 'textarea' : 'text'; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,454 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType"> |
|||
<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="120" :label-position="labelPosition" label="姓名" prop="name"> |
|||
<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="性别" prop="sex"> |
|||
<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="简介" prop="intro"> |
|||
<u-input type="textarea" :border="border" placeholder="请填写简介" v-model="model.intro" /> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="密码" prop="password"> |
|||
<u-input :password-icon="true" :border="border" type="password" v-model="model.password" placeholder="请输入密码"></u-input> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="确认密码" label-width="150" prop="rePassword"> |
|||
<u-input :border="border" type="password" v-model="model.rePassword" placeholder="请确认密码"></u-input> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="水果品种" label-width="150" prop="likeFruit"> |
|||
<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap"> |
|||
<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox> |
|||
</u-checkbox-group> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="结算方式" prop="payType" label-width="150"> |
|||
<u-radio-group v-model="radio" @change="radioGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap"> |
|||
<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio> |
|||
</u-radio-group> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="所在地区" prop="region" label-width="150"> |
|||
<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="商品类型" prop="goodsType" label-width="150"> |
|||
<u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType" placeholder="请选择商品类型" @click="selectShow = true"></u-input> |
|||
</u-form-item> |
|||
<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" :label-position="labelPosition" label="手机号码" prop="phone" label-width="150"> |
|||
<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150"> |
|||
<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input> |
|||
<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button> |
|||
</u-form-item> |
|||
<!-- 此处switch的slot为right，如果不填写slot名，也即<u-switch v-model="model.remember"></u-switch>，将会左对齐 --> |
|||
<u-form-item :label-position="labelPosition" label="记住密码" prop="remember" label-width="150"> |
|||
<u-switch v-model="model.remember" slot="right"></u-switch> |
|||
</u-form-item> |
|||
<u-form-item :label-position="labelPosition" label="上传图片" prop="photo" label-width="150"> |
|||
<u-upload width="160" height="160"></u-upload> |
|||
</u-form-item> |
|||
</u-form> |
|||
<view class="agreement"> |
|||
<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox> |
|||
<view class="agreement-text"> |
|||
勾选代表同意uView的版权协议 |
|||
</view> |
|||
</view> |
|||
<u-button @click="submit">提交</u-button> |
|||
<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet> |
|||
<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select> |
|||
<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker> |
|||
<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">label对齐方式</view> |
|||
<u-subsection :list="['左边', '上方']" @change="labelPositionChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">边框</view> |
|||
<u-subsection :current="borderCurrent" :list="['显示', '隐藏']" @change="borderChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">radio、checkbox样式</view> |
|||
<u-subsection :list="['自适应', '换行', '50%宽度']" @change="radioCheckboxChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">错误提示方式</view> |
|||
<u-subsection :list="['message', 'toast', '下划线', '输入框']" @change="errorChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
let that = this; |
|||
return { |
|||
model: { |
|||
name: '', |
|||
sex: '', |
|||
likeFruit: '', |
|||
intro: '', |
|||
payType: '支付宝', |
|||
agreement: false, |
|||
region: '', |
|||
goodsType: '', |
|||
phone: '', |
|||
code: '', |
|||
password: '', |
|||
rePassword: '', |
|||
remember: false, |
|||
photo: '' |
|||
}, |
|||
selectList: [ |
|||
{ |
|||
value: '电子产品', |
|||
label: '电子产品' |
|||
}, |
|||
{ |
|||
value: '服装', |
|||
label: '服装' |
|||
}, |
|||
{ |
|||
value: '工艺品', |
|||
label: '工艺品' |
|||
} |
|||
], |
|||
rules: { |
|||
name: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入姓名', |
|||
trigger: 'blur' , |
|||
}, |
|||
{ |
|||
min: 3, |
|||
max: 5, |
|||
message: '姓名长度在3到5个字符', |
|||
trigger: ['change','blur'], |
|||
}, |
|||
{ |
|||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明 |
|||
validator: (rule, value, callback) => { |
|||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html |
|||
return this.$u.test.chinese(value); |
|||
}, |
|||
message: '姓名必须为中文', |
|||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开 |
|||
trigger: ['change','blur'], |
|||
}, |
|||
// 异步验证，用途：比如用户注册时输入完账号，后端检查账号是否已存在 |
|||
// { |
|||
// trigger: ['blur'], |
|||
// // 异步验证需要通过调用callback()，并且在里面抛出new Error() |
|||
// // 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样 |
|||
// asyncValidator: (rule, value, callback) => { |
|||
// this.$u.post('/ebapi/public_api/index').then(res => { |
|||
// // 如果验证出错，需要在callback()抛出new Error('错误提示信息') |
|||
// if(res.error) { |
|||
// callback(new Error('姓名重复')); |
|||
// } else { |
|||
// // 如果没有错误，也要执行callback()回调 |
|||
// callback(); |
|||
// } |
|||
// }) |
|||
// }, |
|||
// } |
|||
], |
|||
sex: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择性别', |
|||
trigger: 'change' |
|||
}, |
|||
], |
|||
intro: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写简介' |
|||
}, |
|||
{ |
|||
min: 5, |
|||
message: '简介不能少于5个字', |
|||
trigger: 'change' , |
|||
}, |
|||
// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文 |
|||
{ |
|||
pattern: /^[\u4e00-\u9fa5]+$/gi, |
|||
message: '简介只能为中文', |
|||
trigger: 'change', |
|||
}, |
|||
], |
|||
likeFruit: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择您喜欢的水果', |
|||
trigger: 'change', |
|||
type: 'array', |
|||
} |
|||
], |
|||
payType: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择任意一种支付方式', |
|||
trigger: 'change', |
|||
} |
|||
], |
|||
region: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择地区', |
|||
trigger: 'change', |
|||
} |
|||
], |
|||
goodsType: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择商品类型', |
|||
trigger: 'change', |
|||
} |
|||
], |
|||
phone: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入手机号', |
|||
trigger: ['change','blur'], |
|||
}, |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html |
|||
return this.$u.test.mobile(value); |
|||
}, |
|||
message: '手机号码不正确', |
|||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开 |
|||
trigger: ['change','blur'], |
|||
} |
|||
], |
|||
code: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入验证码', |
|||
trigger: ['change','blur'], |
|||
}, |
|||
{ |
|||
type: 'number', |
|||
message: '验证码只能为数字', |
|||
trigger: ['change','blur'], |
|||
} |
|||
], |
|||
password: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入密码', |
|||
trigger: ['change','blur'], |
|||
}, |
|||
{ |
|||
// 正则不能含有两边的引号 |
|||
pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/, |
|||
message: '需同时含有字母和数字，长度在6-12之间', |
|||
trigger: ['change','blur'], |
|||
} |
|||
], |
|||
rePassword: [ |
|||
{ |
|||
required: true, |
|||
message: '请重新输入密码', |
|||
trigger: ['change','blur'], |
|||
}, |
|||
{ |
|||
validator: (rule, value, callback) => { |
|||
return value === this.model.password; |
|||
}, |
|||
message: '两次输入的密码不相等', |
|||
trigger: ['change','blur'], |
|||
} |
|||
], |
|||
}, |
|||
border: false, |
|||
check: false, |
|||
selectStatus: 'close', |
|||
checkboxList: [ |
|||
{ |
|||
name: '荔枝', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '香蕉', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '橙子', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '草莓', |
|||
checked: false, |
|||
disabled: false |
|||
} |
|||
], |
|||
radioList: [ |
|||
{ |
|||
name: '支付宝', |
|||
checked: true, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '微信', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '银联', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '现金', |
|||
checked: false, |
|||
disabled: false |
|||
} |
|||
], |
|||
radio: '支付宝', |
|||
actionSheetList: [ |
|||
{ |
|||
text: '男' |
|||
}, |
|||
{ |
|||
text: '女' |
|||
}, |
|||
{ |
|||
text: '保密' |
|||
} |
|||
], |
|||
actionSheetShow: false, |
|||
pickerShow: false, |
|||
selectShow: false, |
|||
radioCheckWidth: 'auto', |
|||
radioCheckWrap: false, |
|||
labelPosition: 'left', |
|||
codeTips: '', |
|||
errorType: ['message'], |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
computed: { |
|||
borderCurrent() { |
|||
return this.border ? 0 : 1; |
|||
} |
|||
}, |
|||
onReady() { |
|||
this.$refs.uForm.setRules(this.rules); |
|||
}, |
|||
methods: { |
|||
submit() { |
|||
this.$refs.uForm.validate(valid => { |
|||
if (valid) { |
|||
if(!this.model.agreement) return this.$u.toast('请勾选协议'); |
|||
console.log('验证通过'); |
|||
} else { |
|||
console.log('验证失败'); |
|||
} |
|||
}); |
|||
}, |
|||
// 点击actionSheet回调 |
|||
actionSheetCallback(index) { |
|||
uni.hideKeyboard(); |
|||
this.model.sex = this.actionSheetList[index].text; |
|||
}, |
|||
// checkbox选择发生变化 |
|||
checkboxGroupChange(e) { |
|||
this.model.likeFruit = e; |
|||
}, |
|||
// radio选择发生变化 |
|||
radioGroupChange(e) { |
|||
this.model.payType = e; |
|||
}, |
|||
// 勾选版权协议 |
|||
checkboxChange(e) { |
|||
this.model.agreement = e.value; |
|||
}, |
|||
// 选择地区回调 |
|||
regionConfirm(e) { |
|||
this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label; |
|||
}, |
|||
// 选择商品类型回调 |
|||
selectConfirm(e) { |
|||
this.model.goodsType = ''; |
|||
e.map((val, index) => { |
|||
this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label; |
|||
}) |
|||
}, |
|||
borderChange(index) { |
|||
this.border = !index; |
|||
}, |
|||
radioCheckboxChange(index) { |
|||
if(index == 0) { |
|||
this.radioCheckWrap = false; |
|||
this.radioCheckWidth = 'auto'; |
|||
} else if(index == 1) { |
|||
this.radioCheckWrap = true; |
|||
this.radioCheckWidth = 'auto'; |
|||
} else if(index == 2) { |
|||
this.radioCheckWrap = false; |
|||
this.radioCheckWidth = '50%'; |
|||
} |
|||
}, |
|||
labelPositionChange(index) { |
|||
this.labelPosition = index == 0 ? 'left' : 'top'; |
|||
}, |
|||
codeChange(text) { |
|||
this.codeTips = text; |
|||
}, |
|||
// 获取验证码 |
|||
getCode() { |
|||
if(this.$refs.uCode.canGetCode) { |
|||
// 模拟向后端请求验证码 |
|||
uni.showLoading({ |
|||
title: '正在获取验证码', |
|||
mask: true |
|||
}) |
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
// 这里此提示会被this.start()方法中的提示覆盖 |
|||
this.$u.toast('验证码已发送'); |
|||
// 通知验证码组件内部开始倒计时 |
|||
this.$refs.uCode.start(); |
|||
}, 2000); |
|||
} else { |
|||
this.$u.toast('倒计时结束后再发送'); |
|||
} |
|||
}, |
|||
errorChange(index) { |
|||
if(index == 0) this.errorType = ['message']; |
|||
if(index == 1) this.errorType = ['toast']; |
|||
if(index == 2) this.errorType = ['border-bottom']; |
|||
if(index == 3) this.errorType = ['border']; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.wrap { |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.agreement { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 40rpx 0; |
|||
|
|||
.agreement-text { |
|||
padding-left: 8rpx; |
|||
color: $u-tips-color; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<view class="u-no-demo-here"> |
|||
通过压窗屏打开的模态框，可以遮盖顶部原生的导航栏和底部tabbar栏。 |
|||
注意：压窗屏只对APP有效，其他端无效。 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="current" :list="['打开', '关闭']" @change="openModal"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 1 |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.$nextTick(() => { |
|||
this.current = 1; |
|||
}) |
|||
}, |
|||
methods: { |
|||
openModal(index) { |
|||
// 可以传递参数 |
|||
if(index == 0) { |
|||
this.$u.route("/uview-ui/components/u-full-screen/u-full-screen?id=1"); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,652 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="u-border-left u-border-top inner-wrap"> |
|||
<view @tap="selectIcon(item.name)" class="u-icon-item u-border-bottom u-border-right" v-for="(item, index) in iconList" :key="index"> |
|||
<u-icon :name="item.name" size="40" color="#909399"></u-icon> |
|||
<text class="u-icon-name">{{item.name}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
iconList: [ |
|||
{ |
|||
name: 'level' |
|||
}, |
|||
{ |
|||
name: 'woman' |
|||
}, |
|||
{ |
|||
name: 'man' |
|||
}, |
|||
{ |
|||
name: 'arrow-left-double' |
|||
}, |
|||
{ |
|||
name: 'arrow-right-double' |
|||
}, |
|||
{ |
|||
name: 'chat' |
|||
}, |
|||
{ |
|||
name: 'chat-fill' |
|||
}, |
|||
{ |
|||
name: 'red-packet' |
|||
}, |
|||
{ |
|||
name: 'red-packet-fill' |
|||
}, |
|||
{ |
|||
name: 'order' |
|||
}, |
|||
{ |
|||
name: 'checkbox-mark' |
|||
}, |
|||
{ |
|||
name: 'arrow-up-fill' |
|||
}, |
|||
{ |
|||
name: 'arrow-down-fill' |
|||
}, |
|||
{ |
|||
name: 'backspace' |
|||
}, |
|||
{ |
|||
name: 'photo' |
|||
}, |
|||
{ |
|||
name: 'photo-fill' |
|||
}, |
|||
{ |
|||
name: 'lock' |
|||
}, |
|||
{ |
|||
name: 'lock-fill' |
|||
}, |
|||
{ |
|||
name: 'lock-open' |
|||
}, |
|||
{ |
|||
name: 'lock-opened-fill' |
|||
}, |
|||
{ |
|||
name: 'hourglass' |
|||
}, |
|||
{ |
|||
name: 'hourglass-half-fill' |
|||
}, |
|||
{ |
|||
name: 'home' |
|||
}, |
|||
{ |
|||
name: 'home-fill' |
|||
}, |
|||
{ |
|||
name: 'fingerprint' |
|||
}, |
|||
{ |
|||
name: 'cut' |
|||
}, |
|||
{ |
|||
name: 'star' |
|||
}, |
|||
{ |
|||
name: 'star-fill' |
|||
}, |
|||
{ |
|||
name: 'share' |
|||
}, |
|||
{ |
|||
name: 'share-fill' |
|||
}, |
|||
{ |
|||
name: 'volume-up' |
|||
}, |
|||
{ |
|||
name: 'volume-up-fill' |
|||
}, |
|||
{ |
|||
name: 'volume-off' |
|||
}, |
|||
{ |
|||
name: 'volume-off-fill' |
|||
}, |
|||
{ |
|||
name: 'trash' |
|||
}, |
|||
{ |
|||
name: 'trash-fill' |
|||
}, |
|||
{ |
|||
name: 'rewind-right' |
|||
}, |
|||
{ |
|||
name: 'rewind-right-fill' |
|||
}, |
|||
{ |
|||
name: 'rewind-left' |
|||
}, |
|||
{ |
|||
name: 'rewind-left-fill' |
|||
}, |
|||
{ |
|||
name: 'shopping-cart' |
|||
}, |
|||
{ |
|||
name: 'shopping-cart-fill' |
|||
}, |
|||
{ |
|||
name: 'question' |
|||
}, |
|||
{ |
|||
name: 'question-circle' |
|||
}, |
|||
{ |
|||
name: 'question-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'plus' |
|||
}, |
|||
{ |
|||
name: 'plus-circle' |
|||
}, |
|||
{ |
|||
name: 'plus-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'tags' |
|||
}, |
|||
{ |
|||
name: 'tags-fill' |
|||
}, |
|||
{ |
|||
name: 'pause' |
|||
}, |
|||
{ |
|||
name: 'pause-circle' |
|||
}, |
|||
{ |
|||
name: 'pause-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'play-circle' |
|||
}, |
|||
{ |
|||
name: 'play-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'map' |
|||
}, |
|||
{ |
|||
name: 'map-fill' |
|||
}, |
|||
{ |
|||
name: 'phone' |
|||
}, |
|||
{ |
|||
name: 'phone-fill' |
|||
}, |
|||
{ |
|||
name: 'list' |
|||
}, |
|||
{ |
|||
name: 'list-dot' |
|||
}, |
|||
{ |
|||
name: 'man-delete' |
|||
}, |
|||
{ |
|||
name: 'man-add' |
|||
}, |
|||
{ |
|||
name: 'man-add-fill' |
|||
}, |
|||
{ |
|||
name: 'person-delete-fill' |
|||
}, |
|||
{ |
|||
name: 'info' |
|||
}, |
|||
{ |
|||
name: 'info-circle' |
|||
}, |
|||
{ |
|||
name: 'info-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'minus' |
|||
}, |
|||
{ |
|||
name: 'minus-circle' |
|||
}, |
|||
{ |
|||
name: 'minus-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'mic' |
|||
}, |
|||
{ |
|||
name: 'mic-off' |
|||
}, |
|||
{ |
|||
name: 'grid' |
|||
}, |
|||
{ |
|||
name: 'grid-fill' |
|||
}, |
|||
{ |
|||
name: 'eye' |
|||
}, |
|||
{ |
|||
name: 'eye-fill' |
|||
}, |
|||
{ |
|||
name: 'eye-off' |
|||
}, |
|||
{ |
|||
name: 'file-text' |
|||
}, |
|||
{ |
|||
name: 'file-text-fill' |
|||
}, |
|||
{ |
|||
name: 'edit-pen' |
|||
}, |
|||
{ |
|||
name: 'edit-pen-fill' |
|||
}, |
|||
{ |
|||
name: 'email' |
|||
}, |
|||
{ |
|||
name: 'email-fill' |
|||
}, |
|||
{ |
|||
name: 'download' |
|||
}, |
|||
{ |
|||
name: 'checkmark' |
|||
}, |
|||
{ |
|||
name: 'checkmark-circle' |
|||
}, |
|||
{ |
|||
name: 'checkmark-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'clock' |
|||
}, |
|||
{ |
|||
name: 'clock-fill' |
|||
}, |
|||
{ |
|||
name: 'close' |
|||
}, |
|||
{ |
|||
name: 'close-circle' |
|||
}, |
|||
{ |
|||
name: 'close-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'calendar' |
|||
}, |
|||
{ |
|||
name: 'calendar-fill' |
|||
}, |
|||
{ |
|||
name: 'car' |
|||
}, |
|||
{ |
|||
name: 'car-fill' |
|||
}, |
|||
{ |
|||
name: 'bell' |
|||
}, |
|||
{ |
|||
name: 'bell-fill' |
|||
}, |
|||
{ |
|||
name: 'bookmark' |
|||
}, |
|||
{ |
|||
name: 'bookmark-fill' |
|||
}, |
|||
{ |
|||
name: 'attach' |
|||
}, |
|||
{ |
|||
name: 'play-right' |
|||
}, |
|||
{ |
|||
name: 'play-right-fill' |
|||
}, |
|||
{ |
|||
name: 'play-left' |
|||
}, |
|||
{ |
|||
name: 'play-left-fill' |
|||
}, |
|||
{ |
|||
name: 'error' |
|||
}, |
|||
{ |
|||
name: 'error-circle' |
|||
}, |
|||
{ |
|||
name: 'error-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'wifi' |
|||
}, |
|||
{ |
|||
name: 'wifi-off' |
|||
}, |
|||
{ |
|||
name: 'skip-back-left' |
|||
}, |
|||
{ |
|||
name: 'skip-forward-right' |
|||
}, |
|||
{ |
|||
name: 'search' |
|||
}, |
|||
{ |
|||
name: 'setting' |
|||
}, |
|||
{ |
|||
name: 'setting-fill' |
|||
}, |
|||
{ |
|||
name: 'volume' |
|||
}, |
|||
{ |
|||
name: 'volume-fill' |
|||
}, |
|||
{ |
|||
name: 'more-dot-fill' |
|||
}, |
|||
{ |
|||
name: 'more-circle' |
|||
}, |
|||
{ |
|||
name: 'more-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'bag' |
|||
}, |
|||
{ |
|||
name: 'bag-fill' |
|||
}, |
|||
{ |
|||
name: 'arrow-upward' |
|||
}, |
|||
{ |
|||
name: 'arrow-downward' |
|||
}, |
|||
{ |
|||
name: 'arrow-leftward' |
|||
}, |
|||
{ |
|||
name: 'arrow-rightward' |
|||
}, |
|||
{ |
|||
name: 'arrow-up' |
|||
}, |
|||
{ |
|||
name: 'arrow-down' |
|||
}, |
|||
{ |
|||
name: 'arrow-left' |
|||
}, |
|||
{ |
|||
name: 'arrow-right' |
|||
}, |
|||
{ |
|||
name: 'rmb' |
|||
}, |
|||
{ |
|||
name: 'rmb-circle' |
|||
}, |
|||
{ |
|||
name: 'rmb-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'thumb-up' |
|||
}, |
|||
{ |
|||
name: 'thumb-up-fill' |
|||
}, |
|||
{ |
|||
name: 'thumb-down' |
|||
}, |
|||
{ |
|||
name: 'thumb-down-fill' |
|||
}, |
|||
{ |
|||
name: 'coupon' |
|||
}, |
|||
{ |
|||
name: 'coupon-fill' |
|||
}, |
|||
{ |
|||
name: 'kefu-ermai' |
|||
}, |
|||
{ |
|||
name: 'server-fill' |
|||
}, |
|||
{ |
|||
name: 'server-man' |
|||
}, |
|||
{ |
|||
name: 'scan' |
|||
}, |
|||
{ |
|||
name: 'warning' |
|||
}, |
|||
{ |
|||
name: 'warning-fill' |
|||
}, |
|||
{ |
|||
name: 'google' |
|||
}, |
|||
{ |
|||
name: 'google-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'chrome-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'ie' |
|||
}, |
|||
{ |
|||
name: 'IE-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'github-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'android-fill' |
|||
}, |
|||
{ |
|||
name: 'android-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'apple-fill' |
|||
}, |
|||
{ |
|||
name: 'camera' |
|||
}, |
|||
{ |
|||
name: 'camera-fill' |
|||
}, |
|||
{ |
|||
name: 'pushpin' |
|||
}, |
|||
{ |
|||
name: 'pushpin-fill' |
|||
}, |
|||
{ |
|||
name: 'minus-square-fill' |
|||
}, |
|||
{ |
|||
name: 'plus-square-fill' |
|||
}, |
|||
{ |
|||
name: 'heart' |
|||
}, |
|||
{ |
|||
name: 'heart-fill' |
|||
}, |
|||
{ |
|||
name: 'reload' |
|||
}, |
|||
{ |
|||
name: 'account' |
|||
}, |
|||
{ |
|||
name: 'account-fill' |
|||
}, |
|||
{ |
|||
name: 'minus-people-fill' |
|||
}, |
|||
{ |
|||
name: 'plus-people-fill' |
|||
}, |
|||
{ |
|||
name: 'integral' |
|||
}, |
|||
{ |
|||
name: 'integral-fill' |
|||
}, |
|||
{ |
|||
name: 'zhihu' |
|||
}, |
|||
{ |
|||
name: 'zhihu-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'gift' |
|||
}, |
|||
{ |
|||
name: 'gift-fill' |
|||
}, |
|||
{ |
|||
name: 'zhifubao' |
|||
}, |
|||
{ |
|||
name: 'zhifubao-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'weixin-fill' |
|||
}, |
|||
{ |
|||
name: 'weixin-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'twitter' |
|||
}, |
|||
{ |
|||
name: 'twitter-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'taobao' |
|||
}, |
|||
{ |
|||
name: 'taobao-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'weibo' |
|||
}, |
|||
{ |
|||
name: 'weibo-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'qq-fill' |
|||
}, |
|||
{ |
|||
name: 'qq-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'moments' |
|||
}, |
|||
{ |
|||
name: 'moments-circel-fill' |
|||
}, |
|||
{ |
|||
name: 'qzone' |
|||
}, |
|||
{ |
|||
name: 'qzone-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'facebook' |
|||
}, |
|||
{ |
|||
name: 'facebook-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'baidu' |
|||
}, |
|||
{ |
|||
name: 'baidu-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'zhuanfa' |
|||
}, |
|||
] |
|||
}; |
|||
}, |
|||
methods: { |
|||
selectIcon(name) { |
|||
// #ifdef H5 |
|||
return this.$u.toast('H5暂不支持复制'); |
|||
// #endif |
|||
uni.setClipboardData({ |
|||
data: name, |
|||
success: () => { |
|||
|
|||
} |
|||
}); |
|||
uni.hideToast() |
|||
this.$u.toast('图标名称已复制'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.inner-wrap { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
.u-icon-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
height: 190rpx; |
|||
flex: 0 0 33.33333333%; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-icon-name { |
|||
color: $u-tips-color; |
|||
word-wrap: break-word; |
|||
word-break:break-all; |
|||
margin-top: 16rpx; |
|||
font-size: 26rpx; |
|||
padding: 0 14rpx; |
|||
// 给定高度是为了图标名超出一行时，进行换行能有更好的效果 |
|||
height: 26rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<u-index-list :scrollTop="scrollTop" :index-list="indexList"> |
|||
<view v-for="(item, index) in list" :key="index"> |
|||
<u-index-anchor :index="item.letter" /> |
|||
<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index"> |
|||
{{item1.name}} |
|||
</view> |
|||
</view> |
|||
</u-index-list> |
|||
</template> |
|||
|
|||
<script> |
|||
import indexList from "@/common/index.list.js"; |
|||
const letterArr = indexList.list.map(val => { |
|||
return val.letter; |
|||
}) |
|||
export default { |
|||
data() { |
|||
return { |
|||
scrollTop: 0, |
|||
indexList: letterArr, |
|||
list: indexList.list |
|||
} |
|||
}, |
|||
onPageScroll(e) { |
|||
this.scrollTop = e.scrollTop; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.list-cell { |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
padding: 10px 24rpx; |
|||
overflow: hidden; |
|||
color: $u-content-color; |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
background-color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<view class="input-wrap"> |
|||
<input class="input" disabled type="text" :value="input" placeholder="来自键盘的输入内容" /> |
|||
<u-button :custom-style="{height: '32px'}" :hairLine="false" class="clear-btn" @tap="input = ''">清空</u-button> |
|||
</view> |
|||
<u-keyboard :mask="mask" ref="uKeyboard" safe-area-inset-bottom @confirm="confirm" |
|||
:random="random" :dotEnable="false" :mode="mode" |
|||
:confirmBtn="true" :cancelBtn="true" :tooltip="tooltip" v-model="show" |
|||
@change="change" @backspace="backspace"></u-keyboard> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">键盘开关</view> |
|||
<u-subsection :current="show == true ? 0 : 1" :list="['开', '关']" @change="statusChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">键盘类型</view> |
|||
<u-subsection :list="['数字键盘', '身份证键盘', '车牌号键盘']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">打乱顺序</view> |
|||
<u-subsection :current="1" :list="['是', '否']" @change="randomChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">上方工具条</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="tooltipChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否显示遮罩</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="maskChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
input: '', |
|||
mode: 'number', |
|||
random: false, |
|||
tooltip: true, |
|||
mask: true, |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
statusChange(index) { |
|||
this.show = index == 0 ? true : false; |
|||
}, |
|||
modeChange(index) { |
|||
if(index == 0) this.mode = 'number'; |
|||
if(index == 1) this.mode = 'card'; |
|||
if(index == 2) this.mode = 'car'; |
|||
this.show = true; |
|||
}, |
|||
randomChange(index) { |
|||
this.random = index == 0 ? true : false; |
|||
this.show = true; |
|||
}, |
|||
tooltipChange(index) { |
|||
this.tooltip = index == 0 ? true : false; |
|||
this.show = true; |
|||
}, |
|||
maskChange(index) { |
|||
this.show = true; |
|||
this.mask = !index; |
|||
}, |
|||
// 点击退格键 |
|||
backspace() { |
|||
if(this.input.length) this.input = this.input.substr(0, this.input.length - 1); |
|||
}, |
|||
// 键盘按键发生变化 |
|||
change(detail) { |
|||
this.input += detail; |
|||
}, |
|||
confirm(e) { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.input { |
|||
border: 1px solid $u-light-color; |
|||
border-radius: 4px; |
|||
margin-bottom: 20px; |
|||
height: 32px; |
|||
font-size: 26rpx; |
|||
flex: 1; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.input-wrap { |
|||
display: flex; |
|||
} |
|||
|
|||
.clear-btn { |
|||
margin-left: 10px; |
|||
font-size: 28rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,253 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="item-warp"> |
|||
<view class="item" v-for="(item, index) in list" :key="index"> |
|||
<u-lazy-load threshold="-450" height="400" img-mode="aspectFill" border-radius="10" :image="item.src" :index="index" @statusChange="statusChange" @clickImg="clickImg"></u-lazy-load> |
|||
</view> |
|||
</view> |
|||
<u-loadmore :status="status" @loadmore="getData"></u-loadmore> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [], |
|||
status: 'loadmore', |
|||
data: [{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
// 这里会加载失败，显示错误的占位图 |
|||
src: "error.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
// 这里会加载失败，显示错误的占位图 |
|||
src: "error.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
// 这里会加载失败，显示错误的占位图 |
|||
src: "error.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1fVJJQFXXXXcyXpXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i3/TB1wnBTKFXXXXcQXXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1DX3hIpXXXXXIaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
// 这里会加载失败，显示错误的占位图 |
|||
src: "error.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i2/TB17gJ3OXXXXXcrXpXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg", |
|||
}, |
|||
{ |
|||
// 这里会加载失败，显示错误的占位图 |
|||
src: "error.jpg", |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getData(); |
|||
}, |
|||
onReachBottom() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
statusChange(status) { |
|||
//console.log(status); |
|||
}, |
|||
clickImg(img) { |
|||
//console.log(img); |
|||
}, |
|||
getData() { |
|||
let index = 0; |
|||
this.status = 'loading'; |
|||
setTimeout(() => { |
|||
for(let i = 0; i < 10; i++) { |
|||
index = this.$u.random(0, this.data.length - 1); |
|||
this.list.push({ |
|||
src: this.data[index].src |
|||
}) |
|||
} |
|||
this.status = 'loadmore'; |
|||
}, 1500); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 30rpx; |
|||
display: block; |
|||
|
|||
} |
|||
|
|||
.item-warp { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.item-warp .item { |
|||
flex: 0 0 335rpx; |
|||
height: 400rpx; |
|||
margin-bottom: 20rpx; |
|||
border-radius: 10rpx; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<view class="u-no-demo-here">请点击弹出弹窗查看效果</view> |
|||
<u-modal ref="uModal" v-model="show" :show-cancel-button="true" |
|||
:show-title="showTitle" :async-close="asyncClose" |
|||
@confirm="confirm" :content="content" |
|||
> |
|||
<!-- #ifndef MP-WEIXIN || MP-TOUTIAO --> |
|||
<view class="warp" style="margin: 30rpx;" v-if="contentSlot"> |
|||
<image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;" mode="widthFix"></image> |
|||
</view> |
|||
<!-- #endif --> |
|||
</u-modal> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否显示标题</view> |
|||
<u-subsection current="0" :list="['是', '否']" @change="titleChange"></u-subsection> |
|||
</view> |
|||
<!-- #ifndef MP-WEIXIN --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义内容</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">异步关闭</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="asyncChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
zoom: false, |
|||
content: '慈母手中线，游子身上衣', |
|||
contentSlot: false, |
|||
showTitle: true, |
|||
asyncClose: false, |
|||
}; |
|||
}, |
|||
computed: { |
|||
current() { |
|||
return this.show ? 0 : 1; |
|||
} |
|||
}, |
|||
methods: { |
|||
showChange(index) { |
|||
this.show = !index; |
|||
}, |
|||
titleChange(index) { |
|||
this.showTitle = !index; |
|||
this.show = true; |
|||
}, |
|||
contentChange(index) { |
|||
this.contentSlot = !index; |
|||
this.show = true; |
|||
}, |
|||
asyncChange(index) { |
|||
this.show = true; |
|||
this.asyncClose = !index; |
|||
}, |
|||
confirm() { |
|||
setTimeout(() => { |
|||
this.show = false; |
|||
}, 2000) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.logo { |
|||
height: auto; |
|||
will-change: transform; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,258 @@ |
|||
<template> |
|||
<view class=""> |
|||
<u-navbar title-color="#fff" back-icon-color="#ffffff" |
|||
:is-fixed="isFixed" :is-back="isBack" |
|||
:background="background" |
|||
:back-text-style="{color: '#fff'}" :title="title" |
|||
:back-icon-name="backIconName" :back-text="backText" |
|||
> |
|||
<view class="slot-wrap" v-if="useSlot"> |
|||
<view class="search-wrap" v-if="search"> |
|||
<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 --> |
|||
<u-search v-model="keyword" :show-action="showAction" height="56" :action-style="{color: '#fff'}"></u-search> |
|||
</view> |
|||
<view class="navbar-right" v-if="rightSlot"> |
|||
<view class="message-box right-item"> |
|||
<u-icon name="chat" size="38"></u-icon> |
|||
<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge> |
|||
</view> |
|||
<view class="dot-box right-item"> |
|||
<u-icon name="calendar-fill" size="38"></u-icon> |
|||
<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge> |
|||
</view> |
|||
</view> |
|||
<view class="map-wrap" v-if="custom"> |
|||
<u-icon name="map" color="#ffffff" size="24"></u-icon> |
|||
<text class="map-wrap-text">轻舟已过万重山</text> |
|||
<u-icon name="arrow-down-fill" color="#ffffff" size="22"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="navbar-right" slot="right" v-if="slotRight"> |
|||
<view class="message-box right-item"> |
|||
<u-icon name="chat" size="38"></u-icon> |
|||
<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge> |
|||
</view> |
|||
<view class="dot-box right-item"> |
|||
<u-icon name="calendar-fill" size="38"></u-icon> |
|||
<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge> |
|||
</view> |
|||
</view> |
|||
</u-navbar> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<view class="u-no-demo-here">查看顶部导航栏效果</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">标题长度</view> |
|||
<u-subsection :list="['短', '中', '长']" @change="titleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">隐藏左侧返回区域</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="backChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义左侧内容</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="leftChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义右侧内容</view> |
|||
<u-subsection :current="slotRightCurrent" :list="['是', '否']" @change="rightChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">传入整体slot</view> |
|||
<u-subsection :list="['无', '搜索框', '搜索+按钮', '搜索+图标']" @change="searchChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">完全自定义传入内容</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="customChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">背景色</view> |
|||
<u-subsection :list="['渐变', '#39CCCC', '#B471CC', '#001f3f']" @change="bgColorChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '新闻', |
|||
backText: '返回', |
|||
backIconName: 'nav-back', |
|||
right: false, |
|||
showAction: false, |
|||
rightSlot: false, |
|||
useSlot: false, |
|||
background: { |
|||
'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))' |
|||
}, |
|||
isBack: true, |
|||
search: false, |
|||
custom: false, |
|||
isFixed: true, |
|||
keyword: '', |
|||
// #ifdef MP |
|||
slotRight: false, |
|||
// #endif |
|||
// #ifndef MP |
|||
slotRight: true |
|||
// #endif |
|||
} |
|||
}, |
|||
computed: { |
|||
slotRightCurrent() { |
|||
return this.slotRight ? 0 : 1; |
|||
} |
|||
}, |
|||
methods: { |
|||
titleChange(index) { |
|||
this.useSlot = false; |
|||
this.title = index == 0 ? '新闻' : index == 1 ? '新闻列表' : '雨打梨花深闭门，忘了青春，误了青春'; |
|||
}, |
|||
leftChange(index) { |
|||
if(index == 0) { |
|||
this.backText = ''; |
|||
this.backIconName = 'arrow-leftward'; |
|||
} else { |
|||
this.backText = '返回'; |
|||
this.backIconName = 'arrow-left'; |
|||
} |
|||
}, |
|||
searchChange(index) { |
|||
this.title = null; |
|||
this.useSlot = true; |
|||
this.search = false; |
|||
this.custom = false; |
|||
if(index == 0) { |
|||
this.title = '新闻'; |
|||
this.useSlot = false; |
|||
this.rightSlot = false; |
|||
} else if(index == 1) { |
|||
this.showAction = false; |
|||
this.useSlot = true; |
|||
this.rightSlot = false; |
|||
this.search = true; |
|||
this.slotRight = false; |
|||
} else if(index == 2) { |
|||
this.useSlot = true; |
|||
this.showAction = true; |
|||
this.rightSlot = false; |
|||
this.search = true; |
|||
this.slotRight = false; |
|||
} else { |
|||
this.useSlot = true; |
|||
this.search = true; |
|||
this.showAction = false; |
|||
this.rightSlot = true; |
|||
this.slotRight = false; |
|||
} |
|||
}, |
|||
backChange(index) { |
|||
this.isBack = !!index; |
|||
}, |
|||
bgColorChange(index) { |
|||
this.background = {}; |
|||
if(index == 0) { |
|||
this.background = { |
|||
'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))' |
|||
} |
|||
} else { |
|||
let color = index == 1 ? '#39CCCC' : index == 2 ? '#B471CC' : '#001f3f'; |
|||
this.background = { |
|||
background: color |
|||
} |
|||
} |
|||
|
|||
}, |
|||
rightChange(index) { |
|||
if(index == 0) { |
|||
this.slotRight = true; |
|||
this.useSlot = false; |
|||
} else { |
|||
this.slotRight = false; |
|||
} |
|||
}, |
|||
customChange(index) { |
|||
this.search = false; |
|||
this.rightSlot = false; |
|||
if(index == 0) { |
|||
this.custom = true; |
|||
this.title = null; |
|||
this.isBack = false; |
|||
this.useSlot = true; |
|||
} else { |
|||
this.useSlot = false; |
|||
this.title = '新闻'; |
|||
this.isBack = true; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo { |
|||
//height: 200vh; |
|||
height: calc(100% - 44px); |
|||
height: calc(100% - 44px - constant(safe-area-inset-top)); |
|||
height: calc(100% - 44px - env(safe-area-inset-top)); |
|||
} |
|||
|
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.navbar-right { |
|||
margin-right: 24rpx; |
|||
display: flex; |
|||
} |
|||
|
|||
.search-wrap { |
|||
margin: 0 20rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.right-item { |
|||
margin: 0 12rpx; |
|||
position: relative; |
|||
color: #ffffff; |
|||
display: flex; |
|||
} |
|||
|
|||
.message-box { |
|||
|
|||
} |
|||
|
|||
.slot-wrap { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
} |
|||
|
|||
.map-wrap { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 4px 6px; |
|||
background-color: rgba(240,240, 240, 0.35); |
|||
color: #fff; |
|||
font-size: 22rpx; |
|||
border-radius: 100rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
|
|||
.map-wrap-text { |
|||
padding: 0 6rpx; |
|||
} |
|||
</style> |
|||
|
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<view class="u-content"> |
|||
<u-parse :html="detail.content"></u-parse> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: { |
|||
content: ` |
|||
<div class="content_area" id="content_area" style="display: block;"> |
|||
|
|||
<!--repaste.body.begin--><p> 巴尼小镇是云南省怒江傈僳族自治州首个易地扶贫搬迁集中安置点。从山上的金满村搬迁到巴尼小镇，近3年的时间里，搬迁户们的生活发生了可喜的变化。</p> |
|||
<p class="photo_img_20190808" style="text-align: center;"><img src="//p2.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613380766481.jpg" alt="泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）" isflag="1"></p> |
|||
<p class="photo_alt_20190808" style="text-align: center;"><em></em>泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）</p> |
|||
<p> 搬出四面透风、容易漏雨的“千脚落地房”，住进如今宽敞明亮的楼房，当地居民的生活不断改善。另一边，留在山上的村民在企业帮助下改种经济林果，家庭收入节节攀升。</p> |
|||
<p class="photo_img_20190808" style="text-align: center;"><img src="//p3.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613382671669.jpg" alt="金满村搬迁户在巴尼小镇的扶贫车间里上班 余秀英摄（人民视觉）" isflag="1"></p> |
|||
<p class="photo_alt_20190808" style="text-align: center;"><em></em>金满村搬迁户在巴尼小镇的扶贫车间里上班 余秀英摄（人民视觉）</p> |
|||
<p> 这阵子，52岁的米四东心里老惦记个事：吃两碗包谷稀饭。包谷稀饭是把包谷和蚕豆混在一起，有时加点腊肉，搁在三脚架上，生火煮制而成。在高黎贡山上，包谷稀饭曾是金满村人的主食，大多数人连个菜都不舍得炒，就配一碗蘸水吃。从山上搬下来快3年了，米四东说：“在山上盼着吃大米饭，如今天天吃米饭，又想念包谷稀饭了。”</p> |
|||
<p> 米四东的家在巴尼小镇，地处云南省怒江傈僳族自治州泸水市洛本卓白族乡，紧邻着怒江。这里是怒江州首个易地扶贫搬迁集中安置点，2017年国庆节，金满村首批40户村民入住，2018年最后11户村民入住新居。如今已有搬迁户168户744人，都属于白族支系勒墨人。</p> |
|||
<p> 3年时间，这里的人和生活发生了哪些变化？这个夏天，记者走进了巴尼小镇。</p> |
|||
<p> 曾经——</p> |
|||
<p> 8公里的距离，20年的差距</p> |
|||
<p> 村民叁益光的家里干净亮堂，客厅的墙上，挂着一家三口在老房子前的合影。由于山地太陡，找不到平地打地基，老房子都是篱笆为墙、木板为顶、木头为柱的“千脚落地房”的样子。四面透风的房子里面黑黢黢的，下面养牲畜，中间住人，上面放粮食。“一入雨季，屋里就怕漏雨，潮乎乎有虱子”。2017年搬迁前，金满村九成村民就住在这种房子里。</p> |
|||
<p> 从巴尼小镇往背后的高黎贡山深处走，沿着一条水泥路走上8公里，就回到了金满村村委会。金满村11个村民小组，其中5个不通公路、1个是地质灾害隐患点，这6个组如今已整体搬迁。“最远的马社王底小组有16户人家，到村委会要过悬崖、涉小河、爬陡坡，走上三四个小时。”说起过往，村委会主任沈光干嘘唏不已。</p> |
|||
<p> 站在村委会的院子里，只见大山围绕、白云悠悠，山外面还是山。2014年底，金满村人均收入仅有1400多元，全村1310人有建档立卡贫困户1250人。沈光干说：“在山上，一年到头辛辛苦苦，还是穷成这个样！”</p> |
|||
<p> 听老人们说起以前的生活，就像听“穿越故事”一样：去邻近的县背洋芋回来种，前后得一星期，头疼脑热不舍得花钱去卫生院……“过去从金满村到巴尼小镇的8公里距离，也是发展相差20年的距离。”巴尼小镇社区副主任和碧武介绍，群众刚搬出大山时，不会用电器，连起床叠被子的习惯都没有。</p> |
|||
<p> 不过，在宽敞明亮的楼房里住上一段时间，大家都知道了现代生活的好处。乡中心完小五年级的学生花燕梅一家去年搬到小镇上，每天早上走几分钟就能到学校。“搬下来好，在这里衣服不容易脏，老师也讲得好！”孩子的话，总是简单明了。</p> |
|||
<p> 如今，按照“一户一宅基地”的政策，米四东在山上的老房子拆了，一家人踏踏实实住在了小镇上。米四东感慨：“还是在山下容易赚钱。”</p> |
|||
<p> 山下——</p> |
|||
<p> 干活更方便，管理更规范</p> |
|||
<p> 在巴尼小镇，最常见的交通工具就是摩托车，还有不少人家门口停着机动三轮车、小货车和轿车。米四东说，有了钱，大家都愿意买辆摩托车，“干活方便了许多。”</p> |
|||
<p> 记者了解到，巴尼小镇目前外出务工118户282人，以本地打零工为主。在小镇上，就有家扶贫车间生产民族服装，平时有20多个女工。车间的管理人员告诉记者，一个熟练女工一个月挣三四千元没问题。</p> |
|||
<p> 赚得多了，还要看花得多不多，对于搬出大山的人来说，上楼后的生活成本增加了多少？</p> |
|||
<p> 米四东算了算账：小镇的水费一户每年20元，电费也不贵，过日子主要就是买些吃的。“这个就丰俭由己了，青菜要买，土豆南瓜山上就有。”</p> |
|||
<p> 和碧武介绍，随着巴尼小镇社区建设越来越规范，一些以前“难以想象”的方法都有了实打实的用处。“比如我们这里实行积分制管理，积极参加升国旗仪式、搞好卫生都有加分，居民可以到超市用积分兑换商品。”社区超市经营者玉花梅说，去年超市里兑换了2万多元的积分。</p> |
|||
<p> 当然，搬下来的时间并不长，对大部分人来说还是处在适应阶段。在和碧武看来，村子里的人与外界的交流还是偏少，视野和观念转变得还不够快。</p> |
|||
<p> 米四东就有这种体会。洛本卓白族乡是“中国民间文化艺术之乡”，金满村被列入“云南省第四批旅游特色村”。作为州级非物质文化遗产传人，米四东如今在巴尼小镇教授勒墨人的传统歌舞。“等哪天怒江大峡谷的旅游火起来了，这门技艺一定会是旅游的‘招牌’产品。”米四东心里寻思着。</p> |
|||
<p> 山上——</p> |
|||
<p> 既抓“生态账”，又算“经济账”</p> |
|||
<p> 一边是米四东感慨“山下容易赚钱”，另一边却是仍然留在山上的5个村民小组80户人家，如今的8公里，还有20年的发展差距吗？</p> |
|||
<p> “‘两不愁三保障’早就实现了，现在村里的生活跟过去相比简直是天壤之别。眼下村里惦记的，是怎样既抓‘生态账’，又算‘经济账’。”洛本卓乡宣传委员麻继成兼任金满村党总支书记，搬迁启动前就驻村工作，到现在还扎在村里忙活调整种养殖业结构。</p> |
|||
<p> 靠山吃山，金满村过去是在四五十度的山坡地上开荒种包谷，如今要进行山体生态修复，除了改种经济林果，别无他法。</p> |
|||
<p> 麻继成说，乡里组织搬迁群众将原住地的土地林地出租、流转或退耕还林，采取“合作社+村党总支+农户+基地”模式，种植花椒、核桃、草果、香橼等经济作物。现在，1000多亩花椒、1000多亩核桃、600多亩草果和300多亩香橼已经成了山上的“绿色银行”。“村里今年准备再发展250亩香橼，香橼两年就能挂果，收益前景非常可观。”</p> |
|||
<p> 农产品“升了级”，收入也“开了源”。麻继成说，农民在企业承包的果园里务工，每天的工资有100元，如今每天都有二三十人在果园里干活。</p> |
|||
<p> “搬出去有盼头，留下来有干劲。”如今，乡里还在加紧研究制定金满村乡村旅游规划。“等客栈、农家乐、步行街都建好了，幸福一定来敲门。”洛本卓乡党委书记郝春荣说，巩固脱贫成果、走向乡村振兴，“好日子还在后头”。</p><!--repaste.body.end--> |
|||
|
|||
</div> |
|||
` |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-content { |
|||
padding: 24rpx; |
|||
font-size: 32rpx; |
|||
color: $u-content-color; |
|||
line-height: 1.6; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-select @click="show = true" :default-value="defaultValue" :mode="mode" v-model="show" :list="list" @confirm="confirm" @cancel="cancel"></u-select> |
|||
<view class="u-demo-result-line">select值：{{ result }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="current" :list="['打开', '收起']" @change="statusChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式</view> |
|||
<u-subsection :list="['单列', '多列独立', '多列联动']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
result: '尚未选择', |
|||
defaultValue: [3], |
|||
mode: 'single-column', // single-column, mutil-column, mutil-column-auto |
|||
list: [], |
|||
list1: [ |
|||
{ |
|||
value: '江', |
|||
label: '江' |
|||
}, |
|||
{ |
|||
value: '湖', |
|||
label: '湖' |
|||
}, |
|||
{ |
|||
value: '夜', |
|||
label: '夜' |
|||
}, |
|||
{ |
|||
value: '雨', |
|||
label: '雨' |
|||
}, |
|||
{ |
|||
value: '十', |
|||
label: '十' |
|||
}, |
|||
{ |
|||
value: '年', |
|||
label: '年' |
|||
}, |
|||
{ |
|||
value: '灯', |
|||
label: '灯' |
|||
} |
|||
], |
|||
list2: [ |
|||
[ |
|||
{ |
|||
value: '昔', |
|||
label: '昔' |
|||
}, |
|||
{ |
|||
value: '去', |
|||
label: '去' |
|||
}, |
|||
{ |
|||
value: '雪', |
|||
label: '雪' |
|||
}, |
|||
{ |
|||
value: '如', |
|||
label: '如' |
|||
}, |
|||
{ |
|||
value: '花', |
|||
label: '花' |
|||
} |
|||
], |
|||
[ |
|||
{ |
|||
value: '今', |
|||
label: '今' |
|||
}, |
|||
{ |
|||
value: '来', |
|||
label: '来' |
|||
}, |
|||
{ |
|||
value: '花', |
|||
label: '花' |
|||
}, |
|||
{ |
|||
value: '似', |
|||
label: '似' |
|||
}, |
|||
{ |
|||
value: '雪', |
|||
label: '雪' |
|||
} |
|||
] |
|||
], |
|||
list3: [ |
|||
{ |
|||
label: '中国', |
|||
value: '1', |
|||
children: [ |
|||
{ |
|||
label: '广西', |
|||
value: '2', |
|||
children: [ |
|||
{ |
|||
label: '南宁', |
|||
value: '3' |
|||
}, |
|||
{ |
|||
label: '梧州', |
|||
value: '3' |
|||
}, |
|||
{ |
|||
label: '柳州', |
|||
value: '3' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
label: '广东', |
|||
value: '2', |
|||
children: [ |
|||
{ |
|||
label: '深圳', |
|||
value: '3' |
|||
}, |
|||
{ |
|||
label: '惠州', |
|||
value: '3' |
|||
}, |
|||
{ |
|||
label: '清远', |
|||
value: '3' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
label: '美国', |
|||
value: '1', |
|||
children: [ |
|||
{ |
|||
label: '纽约', |
|||
value: '2', |
|||
children: [ |
|||
{ |
|||
label: '皇后街道', |
|||
value: '3' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.list = this.list1; |
|||
}, |
|||
computed: { |
|||
current() { |
|||
return this.show ? 0 : 1; |
|||
} |
|||
}, |
|||
methods: { |
|||
statusChange(index) { |
|||
this.show = !index; |
|||
}, |
|||
modeChange(index) { |
|||
let type = ['single-column', 'mutil-column', 'mutil-column-auto']; |
|||
this.mode = type[index]; |
|||
this.list = index == 0 ? this.list1 : index == 1 ? this.list2 : this.list3; |
|||
this.show = true; |
|||
}, |
|||
confirm(e) { |
|||
this.result = ''; |
|||
e.map((val, index) => { |
|||
this.result += this.result == '' ? val.label : '-' + val.label; |
|||
}) |
|||
}, |
|||
cancel(e) { |
|||
console.log(e); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.badge-button { |
|||
padding: 4rpx 6rpx; |
|||
background-color: $u-type-error; |
|||
color: #fff; |
|||
border-radius: 10rpx; |
|||
font-size: 22rpx; |
|||
line-height: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,127 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-slider :step="step" :height="height" :block-width="blockWidth" |
|||
:active-color="activeColor" :value="30" |
|||
:use-slot="useSlot" v-model="value" |
|||
:min="min" :max="max" |
|||
@end="end" |
|||
@moving="moving" |
|||
> |
|||
<!-- #ifndef MP-WEIXIN || MP-TOUTIAO --> |
|||
<view class="" v-if="useSlot"> |
|||
<view class="badge-button"> |
|||
{{value}} |
|||
</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
</u-slider> |
|||
<view class="u-demo-result-line"> |
|||
滑块值：{{value}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义颜色</view> |
|||
<u-subsection :list="['primary', 'warning', 'error', 'success']" @change="typeChange"></u-subsection> |
|||
</view> |
|||
<!-- #ifndef MP-WEIXIN --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义传入内容</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义尺寸</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">步进值</view> |
|||
<u-subsection :list="['1', '10', '20']" @change="stepChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">最大最小值</view> |
|||
<u-subsection :list="['0-100', '40-80']" @change="minMaxchange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value: 30, |
|||
useSlot: false, |
|||
setp: 1, |
|||
activeColor: '#2979ff', |
|||
height: 6, |
|||
blockWidth: 30, |
|||
step: 1, |
|||
min: 0, |
|||
max: 100 |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
computed: { |
|||
current() { |
|||
return this.show ? 0 : 1; |
|||
} |
|||
}, |
|||
methods: { |
|||
typeChange(index) { |
|||
let type = ['primary', 'warning', 'error', 'success']; |
|||
this.activeColor = this.$u.color[type[index]]; |
|||
}, |
|||
sizeChange(index) { |
|||
if(index == 0) { |
|||
this.height = 4; |
|||
this.blockWidth = 30; |
|||
} else { |
|||
this.height = 6; |
|||
this.blockWidth = 20; |
|||
} |
|||
}, |
|||
stepChange(index) { |
|||
let arr = ['1', '10', '20']; |
|||
this.step = arr[index]; |
|||
}, |
|||
slotChange(index) { |
|||
this.useSlot = !index; |
|||
}, |
|||
minMaxchange(index) { |
|||
if(index == 0) { |
|||
this.min = 0; |
|||
this.max = 100; |
|||
} else { |
|||
this.min = 40; |
|||
this.max = 80; |
|||
} |
|||
}, |
|||
end() { |
|||
// console.log('end'); |
|||
}, |
|||
moving() { |
|||
// console.log('moving'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.badge-button { |
|||
padding: 4rpx 6rpx; |
|||
background-color: $u-type-error; |
|||
color: #fff; |
|||
border-radius: 10rpx; |
|||
font-size: 22rpx; |
|||
line-height: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list" |
|||
@change="change" :current="current" :is-scroll="isScroll" :offset="offset"></u-tabs> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式选择</view> |
|||
<u-subsection :current="sectionCurrent" :list="['滚动', '非滚动']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">标签个数(非滚动模式)</view> |
|||
<u-subsection :list="['2', '3', '4']" @change="countChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">活动选项字颜色</view> |
|||
<u-subsection mode="button" :list="['primary', 'success', 'error', 'warning']" @change="colorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">字体加粗</view> |
|||
<u-subsection mode="button" :list="['是', '否']" @change="boldChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [], |
|||
data: [{ |
|||
name: '关注', |
|||
count: 100 |
|||
}, { |
|||
name: '推荐', |
|||
count: 7 |
|||
}, { |
|||
name: '电影' |
|||
},{ |
|||
name: '电视剧' |
|||
},{ |
|||
name: '小视频' |
|||
}, { |
|||
name: '游戏' |
|||
}, { |
|||
name: '校园' |
|||
},{ |
|||
name: '影视' |
|||
},{ |
|||
name: '音乐' |
|||
}], |
|||
current: 0, |
|||
sectionCurrent: 0, |
|||
isScroll: true, |
|||
tabCountIndex: 0, |
|||
activeColor: this.$u.color['primary'], |
|||
bold: true, |
|||
control: true, |
|||
offset: [5, -5] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.list = this.data; |
|||
}, |
|||
methods: { |
|||
countChange(index) { |
|||
this.sectionCurrent = 1; |
|||
if(index == 0) { |
|||
this.list = []; |
|||
this.list.push(this.data[0]); |
|||
this.list.push(this.data[1]); |
|||
this.offset = [5, 60] |
|||
} else if(index == 1) { |
|||
this.list = []; |
|||
this.list.push(this.data[0]); |
|||
this.list.push(this.data[1]); |
|||
this.list.push(this.data[2]); |
|||
this.offset = [5, 20] |
|||
} else { |
|||
this.list = []; |
|||
this.list.push(this.data[0]); |
|||
this.list.push(this.data[1]); |
|||
this.list.push(this.data[2]); |
|||
this.list.push(this.data[3]); |
|||
this.offset = [5, 5] |
|||
} |
|||
this.tabCountIndex = index; |
|||
this.isScroll = false; |
|||
}, |
|||
change(index) { |
|||
this.current = index; |
|||
}, |
|||
modeChange(index) { |
|||
this.control = false; |
|||
this.current = 0; |
|||
if(index == 0) { |
|||
this.isScroll = true; |
|||
this.list = this.data; |
|||
this.offset = [5, -5] |
|||
} else { |
|||
this.isScroll = false; |
|||
this.countChange(this.tabCountIndex); |
|||
} |
|||
this.$nextTick(() => { |
|||
this.control = true; |
|||
}) |
|||
}, |
|||
colorChange(e) { |
|||
let color = 'primary'; |
|||
switch(e) { |
|||
case 0: |
|||
color = 'primary';break; |
|||
case 1: |
|||
color = 'success';break; |
|||
case 2: |
|||
color = 'error';break; |
|||
case 3: |
|||
color = 'warning';break; |
|||
} |
|||
this.activeColor = this.$u.color[color]; |
|||
}, |
|||
boldChange(e) { |
|||
switch(e) { |
|||
case 0: |
|||
this.bold = true;break; |
|||
case 1: |
|||
this.bold = false;break; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-config-wrap { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-tag :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode" @close="close" @click="click" :show="show" :size="size" /> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式选择</view> |
|||
<u-subsection :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示内容</view> |
|||
<u-subsection :list="['蒹葭苍苍', '白露为霜', '在水一方']" @change="textChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">主题选择</view> |
|||
<u-subsection current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">形状</view> |
|||
<u-subsection :list="['square', 'circle', 'circleLeft', 'circleRight']" @change="shapeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">尺寸</view> |
|||
<u-subsection :list="['default', 'mini']" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">关闭图标</view> |
|||
<u-subsection :list="['是', '否']" @change="closeableChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
text: '蒹葭苍苍', |
|||
mode: 'light', |
|||
type: 'error', |
|||
size: 'default', |
|||
shape: 'square', |
|||
closeable: true, |
|||
show: true |
|||
}; |
|||
}, |
|||
methods: { |
|||
modeChange(index) { |
|||
this.mode = index == 0 ? 'light' : index == 1 ? 'dark' : 'plain'; |
|||
}, |
|||
textChange(index) { |
|||
this.text = index == 0 ? '蒹葭苍苍' : index == 1 ? '白露为霜' : '在水一方'; |
|||
}, |
|||
typeChange(index) { |
|||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info'; |
|||
}, |
|||
shapeChange(index) { |
|||
this.shape = index == 0 ? 'square' : index == 1 ? 'circle' : index == 2 ? 'circleLeft' : 'circleRight'; |
|||
}, |
|||
sizeChange(index) { |
|||
this.size = index == 0 ? 'default' : 'mini'; |
|||
}, |
|||
closeableChange(index) { |
|||
this.closeable = index == 0 ? true : false; |
|||
}, |
|||
click(index) { |
|||
this.$refs.uToast.show({ |
|||
title: `第${index + 1}个标签被点击`, |
|||
type: 'success' |
|||
}); |
|||
}, |
|||
close(index) { |
|||
this.$refs.uToast.show({ |
|||
title: `关闭图标被点击`, |
|||
type: 'success' |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo { |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<u-form |
|||
:model="form" |
|||
ref="uForm" |
|||
> |
|||
<u-form-item label="姓名"> |
|||
<u-input v-model="form.name" /> |
|||
</u-form-item> |
|||
<u-form-item label="简介"> |
|||
<u-input v-model="form.intro" /> |
|||
</u-form-item> |
|||
<u-form-item label="性别"> |
|||
<u-input |
|||
v-model="form.sex" |
|||
type="select" |
|||
/> |
|||
</u-form-item> |
|||
<u-form-item label="水果"> |
|||
<u-checkbox-group> |
|||
<u-checkbox |
|||
v-model="item.checked" |
|||
v-for="(item, index) in checkboxList" |
|||
:key="index" |
|||
:name="item.name" |
|||
> |
|||
{{ item.name }} |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</u-form-item> |
|||
<u-form-item label="味道"> |
|||
<u-radio-group v-model="radio"> |
|||
<u-radio |
|||
v-for="(item, index) in radioList" |
|||
:key="index" |
|||
:name="item.name" |
|||
:disabled="item.disabled" |
|||
> |
|||
{{ item.name }} |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</u-form-item> |
|||
<u-form-item label="开关"> |
|||
<u-switch |
|||
slot="right" |
|||
v-model="switchVal" |
|||
></u-switch> |
|||
</u-form-item> |
|||
</u-form> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
form: { |
|||
name: '', |
|||
intro: '', |
|||
sex: '' |
|||
}, |
|||
checkboxList: [{ |
|||
name: '苹果', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '雪梨', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '柠檬', |
|||
checked: false, |
|||
disabled: false |
|||
} |
|||
], |
|||
radioList: [{ |
|||
name: '鲜甜', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '麻辣', |
|||
disabled: false |
|||
} |
|||
], |
|||
radio: '', |
|||
switchVal: false |
|||
}; |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,144 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<u-time-line> |
|||
<u-time-line-item nodeTop="2"> |
|||
<template v-slot:node> |
|||
<view class="u-node" style="background: #19be6b;"> |
|||
<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon> |
|||
</view> |
|||
</template> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-title">待取件</view> |
|||
<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view> |
|||
<view class="u-order-time">2019-05-08 12:12</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
<u-time-line-item nodeTop="2"> |
|||
<template v-slot:node> |
|||
<view class="u-node"> |
|||
<u-icon name="account-fill" color="#fff" :size="24"></u-icon> |
|||
</view> |
|||
</template> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-title unacive">派送中</view> |
|||
<view class="u-order-desc">【深圳市】快件已到达目的地，派件员为国产锦衣卫007号，电话：<text class="tel">13833882438</text>，请留意快递信息</view> |
|||
<view class="u-order-time">2019-05-08 06:03</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
<u-time-line-item nodeTop="2"> |
|||
<template v-slot:node> |
|||
<view class="u-node"> |
|||
<u-icon name="car-fill" color="#fff" :size="24"></u-icon> |
|||
</view> |
|||
</template> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-title unacive">运输中</view> |
|||
<view class="u-order-desc">【深圳市】快递已到达 深圳固戍一部</view> |
|||
<view class="u-order-time">2019-05-07 08:05</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
<u-time-line-item> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-desc">【深圳市】快件已从深圳运转中心发出，正在发往深圳宝安一部</view> |
|||
<view class="u-order-time">2019-12-06 22:30</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
<u-time-line-item> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-desc">【深圳市】快件已到达 深圳运转中心</view> |
|||
<view class="u-order-time">2019-12-04 16:42</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
<u-time-line-item> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-desc">【郑州市】快件已从郑州运转中心出发，正在发往深圳运转中心</view> |
|||
<view class="u-order-time">2019-12-02 12:55</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
<u-time-line-item> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-desc">【郑州市】快件已到达 郑州运转中心</view> |
|||
<view class="u-order-time">2019-12-02 08:23</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
<u-time-line-item nodeTop="0"> |
|||
<template v-slot:node> |
|||
<view class="u-node"> |
|||
<u-icon name="file-text-fill" color="#fff" :size="24"></u-icon> |
|||
</view> |
|||
</template> |
|||
<template v-slot:content> |
|||
<view> |
|||
<view class="u-order-desc">您购买的商品【尚方宝剑，先斩后奏】，经由北京军区仓库发货，国内快递承运人【中南海保镖】。</view> |
|||
<view class="u-order-time">2019-12-01 07:00</view> |
|||
</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
</u-time-line> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx 24rpx 24rpx 40rpx; |
|||
} |
|||
|
|||
.u-node { |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
border-radius: 100rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #d0d0d0; |
|||
} |
|||
|
|||
.u-order-title { |
|||
color: #333333; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.u-order-title.unacive { |
|||
color: rgb(150, 150, 150); |
|||
} |
|||
|
|||
.u-order-desc { |
|||
color: rgb(150, 150, 150); |
|||
font-size: 28rpx; |
|||
margin-bottom: 6rpx; |
|||
} |
|||
|
|||
.u-order-time { |
|||
color: rgb(200, 200, 200); |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.tel { |
|||
color: $u-type-primary; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast :type="type" ref="uToast"></u-toast> |
|||
<text class="no-mode-here">见弹出toast</text> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">主题</view> |
|||
<u-subsection :current="4" :list="['primary', 'success', 'error', 'warning', 'default']" @change="typeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">结束后自动跳转</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="urlChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">位置</view> |
|||
<u-subsection current="1" :list="['顶部', '中部', '底部']" @change="positionChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示图标</view> |
|||
<u-subsection :list="['是', '否']" @change="iconChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
type: 'success', |
|||
title: '桃花潭水深千尺', |
|||
icon: true, |
|||
position: 'center', |
|||
url: '', |
|||
} |
|||
}, |
|||
methods: { |
|||
typeChange(index) { |
|||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'default'; |
|||
this.show(); |
|||
}, |
|||
positionChange(index) { |
|||
this.position = index == 0 ? 'top' : index == 1 ? 'center' : 'bottom'; |
|||
this.show(); |
|||
}, |
|||
iconChange(index) { |
|||
this.icon = index == 0 ? true : false; |
|||
this.show(); |
|||
}, |
|||
urlChange(index) { |
|||
this.url = index == 0 ? '/pages/components/button/index' : ''; |
|||
this.show(); |
|||
}, |
|||
show() { |
|||
this.$refs.uToast.show({ |
|||
title: this.title, |
|||
position: this.position, |
|||
type: this.type, |
|||
icon: this.icon, |
|||
url: this.url, |
|||
}); |
|||
}, |
|||
hide() { |
|||
this.$refs.uToast.hide(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.no-mode-here { |
|||
color: $u-tips-color; |
|||
font-size: 28rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-top-tips ref="uTips"></u-top-tips> |
|||
<text class="u-no-demo-here">点击参数配置查看效果</text> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">主题选择</view> |
|||
<u-subsection :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示时间</view> |
|||
<u-subsection current="1" :list="['长', '正常', '短']" @change="durationChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
duration: 2000, |
|||
title: '忽如一夜春风来，千树万树梨花开', |
|||
type: 'primary' |
|||
} |
|||
}, |
|||
methods: { |
|||
showTips() { |
|||
this.$refs.uTips.show({ |
|||
duration: this.duration, |
|||
title: this.title, |
|||
type: this.type |
|||
}); |
|||
}, |
|||
typeChange(index) { |
|||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info'; |
|||
this.showTips(); |
|||
}, |
|||
durationChange(index) { |
|||
this.duration = index == 0 ? 4000 : index == 1 ? 2000 : 500; |
|||
this.showTips(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode" |
|||
@change="codeChange" :startText="startText" :changeText="changeText" |
|||
:endText="endText"></u-verification-code> |
|||
<u-button @click="getCode">{{tips}}</u-button> |
|||
<u-button :custom-style="{marginTop: '30rpx'}" @tap="reset" style="margin-top: 30rpx;">重置</u-button> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">倒计时间</view> |
|||
<u-subsection :current="0" :list="['60s', '10s', '5s']" @change="secondsChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义提示语</view> |
|||
<u-subsection :current="1" :list="['是', '否']" @change="textChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tips: '', |
|||
seconds: 60, |
|||
refCode: null, |
|||
startText: '获取验证码', |
|||
changeText: 'X秒重新获取', |
|||
endText: '重新获取' |
|||
} |
|||
}, |
|||
onReady() { |
|||
// 注意这里为错误示例，目前微信小程序最新稳定版开发工具如此 |
|||
// 赋值会报错，很诡异，其他端无此问题 |
|||
// this.refCode = this.$refs.uCode; |
|||
}, |
|||
methods: { |
|||
codeChange(text) { |
|||
// console.log(text); |
|||
this.tips = text; |
|||
}, |
|||
getCode() { |
|||
if(this.$refs.uCode.canGetCode) { |
|||
// 模拟向后端请求验证码 |
|||
uni.showLoading({ |
|||
title: '正在获取验证码' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
// 这里此提示会被this.start()方法中的提示覆盖 |
|||
this.$u.toast('验证码已发送'); |
|||
// 通知验证码组件内部开始倒计时 |
|||
this.$refs.uCode.start(); |
|||
}, 2000); |
|||
} else { |
|||
this.$u.toast('倒计时结束后再发送'); |
|||
} |
|||
}, |
|||
secondsChange(index) { |
|||
this.seconds = index == 0 ? 60 : index == 1 ? 10 : 5; |
|||
}, |
|||
textChange(index) { |
|||
if(index == 0) { |
|||
this.startText = '点一下获取', |
|||
this.changeText = '重新获取Xs', |
|||
this.endText = '再次获取' |
|||
} else { |
|||
this.startText = '获取验证码', |
|||
this.changeText = 'X秒重新获取', |
|||
this.endText = '重新获取' |
|||
} |
|||
}, |
|||
end() { |
|||
this.$u.toast('倒计时结束'); |
|||
}, |
|||
start() { |
|||
this.$u.toast('倒计时开始'); |
|||
}, |
|||
reset() { |
|||
this.$refs.uCode.reset(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,106 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="u-card-wrap"> |
|||
<u-card @click="click" @head-click="headClick" :title="title" :sub-title="subTitle" :thumb="thumb" :padding="padding" :border="border"> |
|||
<view class="" slot="body"> |
|||
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0"> |
|||
<view class="u-body-item-title u-line-2"> |
|||
瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半 |
|||
</view> |
|||
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="u-body-item u-flex u-row-between u-p-b-0"> |
|||
<view class="u-body-item-title u-line-2"> |
|||
釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放 |
|||
</view> |
|||
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
<view class="" slot="foot"> |
|||
<u-icon v-if="bottomSlot" name="chat-fill" size="34" label="30评论"></u-icon> |
|||
</view> |
|||
</u-card> |
|||
</view> |
|||
<view class="u-config-wrap u-demo"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">左上角图标</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="thumbChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">内边距</view> |
|||
<u-subsection current="1" :list="['20', '30', '40']" @change="paddingChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">底部</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="bottomChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">外边框</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="borderChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '素胚勾勒出青花，笔锋浓转淡', |
|||
subTitle: '2020-05-15', |
|||
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', |
|||
padding: 20, |
|||
bottomSlot: true, |
|||
border: true |
|||
} |
|||
}, |
|||
methods: { |
|||
thumbChange(index) { |
|||
this.thumb = index == 0 ? 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg' : ''; |
|||
}, |
|||
paddingChange(index) { |
|||
this.padding = [20, 30, 40][index]; |
|||
}, |
|||
bottomChange(index) { |
|||
this.bottomSlot = !index; |
|||
}, |
|||
borderChange(index) { |
|||
this.border = !index; |
|||
}, |
|||
click(index) { |
|||
console.log(index); |
|||
}, |
|||
headClick(index) { |
|||
console.log(index); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo { |
|||
padding-top: 0; |
|||
} |
|||
|
|||
.u-card-wrap { |
|||
background-color: $u-bg-color; |
|||
padding: 1px; |
|||
} |
|||
|
|||
.u-body-item { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
padding: 20rpx 10rpx; |
|||
} |
|||
|
|||
.u-body-item image { |
|||
width: 120rpx; |
|||
flex: 0 0 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 8rpx; |
|||
margin-left: 12rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<view class=""> |
|||
<u-checkbox-group :size="size" :width="width" |
|||
:wrap="wrap" :max="max" |
|||
@change="checkboxGroupChange" |
|||
:activeColor="activeColor" |
|||
> |
|||
<u-checkbox @change="checkboxChange" |
|||
v-model="item.checked" v-for="(item, index) in list" |
|||
:key="index" :name="item.name" |
|||
:shape="shape" |
|||
:disabled="item.disabled" |
|||
>{{item.name}}</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
<view class="u-demo-result-line"> |
|||
{{result.length ? `选中了"${getResult}"` : '请选择'}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">形状</view> |
|||
<u-subsection :list="['方形', '圆形']" @change="shapeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">整体大小(单位rpx)</view> |
|||
<u-subsection current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">激活颜色</view> |
|||
<u-subsection :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">默认选中第一个</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">每个占一行</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="wrapChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">每个宽度50%</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="widthChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">最大选择数量</view> |
|||
<u-subsection current="2" :list="['1', '2', '3']" @change="maxChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">禁用第一个</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
name: '荔枝', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '香蕉', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '橙子', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '草莓', |
|||
checked: false, |
|||
disabled: false |
|||
} |
|||
], |
|||
disabled: false, |
|||
checked: true, |
|||
result: [], |
|||
shape: 'square', |
|||
max: 3, |
|||
activeColor: '#2979ff', |
|||
size: 34, |
|||
wrap: false, |
|||
width: 'auto' |
|||
} |
|||
}, |
|||
computed: { |
|||
getResult() { |
|||
return this.result.join(","); |
|||
} |
|||
}, |
|||
methods: { |
|||
shapeChange(index) { |
|||
this.shape = index == 0 ? 'square' : 'circle'; |
|||
}, |
|||
sizeChange(index) { |
|||
this.size = index == 0 ? 30 : index == 1 ? 40 : 50; |
|||
}, |
|||
defaultChooseChange(index) { |
|||
// 特别处理对第一个选的选中的情况，涉及到提示语，选中状态等 |
|||
// 实际开发中不会存在这些情况，只是演示用 |
|||
if(index == 0) { |
|||
this.list[0].checked = true; |
|||
this.result = [this.list[0].name]; |
|||
} else { |
|||
this.list[0].checked = false; |
|||
this.result.splice(this.result.indexOf(this.list[0].name), 1); |
|||
} |
|||
}, |
|||
maxChange(index) { |
|||
this.max = index + 1; |
|||
}, |
|||
disabledChange(index) { |
|||
if(index == 0) { |
|||
this.list[0].disabled = true; |
|||
} else { |
|||
this.list[0].disabled = false; |
|||
} |
|||
}, |
|||
activeColorChange(index) { |
|||
// 如果用户尚未勾选任何checkbox，切换颜色时，默认选中第一个让用户看到效果，因为勾选了才有效果 |
|||
if(!this.result.length) this.list[0].checked = true; |
|||
let theme = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : index == 3 ? 'success' : 'info'; |
|||
this.activeColor = this.$u.color[theme]; |
|||
}, |
|||
// 选中某个复选框时，由checkbox时触发 |
|||
checkboxChange(e) { |
|||
// console.log(e); |
|||
}, |
|||
// 选中任一checkbox时，由checkbox-group触发 |
|||
checkboxGroupChange(e) { |
|||
this.result = e; |
|||
}, |
|||
widthChange(index) { |
|||
this.width = index == 0 ? '50%' : ''; |
|||
}, |
|||
wrapChange(index) { |
|||
this.wrap = !index; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-divider :type="type" :borderColor="borderColor" :bg-color="bgColor" @click="click" |
|||
:half-width="halfWidth" :color="color" :font-size="fontSize">{{text}}</u-divider> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">提示内容</view> |
|||
<u-subsection :list="['没有更多了', '到底了']" @change="textChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">单边线宽</view> |
|||
<u-subsection current="1" :list="['50', '150', '250']" @change="halfWidthChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">横线颜色</view> |
|||
<u-subsection :list="['#dcdfe6', 'primary', 'error', 'warning', 'success']" @change="borderColorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">内容样式</view> |
|||
<u-subsection :list="['默认', '自定义']" @change="contentChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
text: '没有更多了', |
|||
bgColor: '#fafafa', |
|||
halfWidth: 150, |
|||
borderColor: '#dcdfe6', |
|||
type: 'primary', |
|||
color: '#909399', |
|||
fontSize: '26' |
|||
} |
|||
}, |
|||
methods: { |
|||
textChange(index) { |
|||
this.text = index == 0 ? '没有更多了' : '到底了'; |
|||
}, |
|||
halfWidthChange(index) { |
|||
this.halfWidth = index == 0 ? 50 : index == 1 ? 150 : 250; |
|||
}, |
|||
borderColorChange(index) { |
|||
if(index == 0) { |
|||
this.borderColor = '#dcdfe6'; |
|||
} else { |
|||
// 因为border-color参数优先级高于type，要让type起作用，就需要设置border-color为空 |
|||
this.borderColor = ''; |
|||
this.type = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success'; |
|||
} |
|||
}, |
|||
contentChange(index) { |
|||
if(index == 0) { |
|||
this.color = '#909399'; |
|||
this.fontSize = 26; |
|||
} else { |
|||
this.color = this.$u.color['primary']; |
|||
this.fontSize = 30; |
|||
} |
|||
}, |
|||
click() { |
|||
console.log('click'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="u-m-p-50"> |
|||
<view class="u-demo-area u-flex u-row-center"> |
|||
<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="borderBottom"> |
|||
<u-dropdown-item @change="change" v-model="value1" title="距离" :options="options1"></u-dropdown-item> |
|||
<u-dropdown-item @change="change" v-model="value2" title="温度" :options="options2"></u-dropdown-item> |
|||
<u-dropdown-item title="属性"> |
|||
<view class="slot-content"> |
|||
<view class="item-box"> |
|||
<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in list" :key="index"> |
|||
{{item.label}} |
|||
</view> |
|||
</view> |
|||
<u-button type="primary" @click="closeDropdown">确定</u-button> |
|||
</view> |
|||
</u-dropdown-item> |
|||
</u-dropdown> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">下边框</view> |
|||
<u-subsection current="1" :list="['有', '无']" @change="borderChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">激活颜色</view> |
|||
<u-subsection :list="['#2979ff', '#ff9900', '#19be6b']" @change="activeColorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">遮罩是否可点击</view> |
|||
<u-subsection :list="['是', '否']" @change="maskChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value1: '', |
|||
value2: '2', |
|||
mask: true, |
|||
options1: [{ |
|||
label: '默认排序', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '距离优先', |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: '价格优先', |
|||
value: 3, |
|||
} |
|||
], |
|||
options2: [{ |
|||
label: '去冰', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '加冰', |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: '正常温', |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: '加热', |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: '极寒风暴', |
|||
value: 5, |
|||
} |
|||
], |
|||
list: [{ |
|||
label: '琪花瑶草', |
|||
active: true, |
|||
}, |
|||
{ |
|||
label: '清词丽句', |
|||
active: false, |
|||
}, |
|||
{ |
|||
label: '宛转蛾眉', |
|||
active: false, |
|||
}, |
|||
{ |
|||
label: '煦色韶光', |
|||
active: false, |
|||
}, |
|||
{ |
|||
label: '鱼沉雁落', |
|||
active: false, |
|||
}, |
|||
{ |
|||
label: '章台杨柳', |
|||
active: false, |
|||
}, |
|||
{ |
|||
label: '霞光万道', |
|||
active: false, |
|||
} |
|||
], |
|||
borderBottom: false, |
|||
activeColor: '#2979ff' |
|||
} |
|||
}, |
|||
methods: { |
|||
borderChange(index) { |
|||
this.borderBottom = !index; |
|||
}, |
|||
activeColorChange(index) { |
|||
this.activeColor = ['#2979ff', '#ff9900', '#19be6b'][index]; |
|||
}, |
|||
change(index) { |
|||
this.$u.toast(`点击了第${index}项`); |
|||
}, |
|||
closeDropdown() { |
|||
this.$refs.uDropdown.close(); |
|||
}, |
|||
tagClick(index) { |
|||
this.list[index].active = !this.list[index].active; |
|||
}, |
|||
maskChange(index) { |
|||
this.mask = !index; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-config-wrap { |
|||
padding: 40rpx; |
|||
} |
|||
|
|||
.slot-content { |
|||
background-color: #FFFFFF; |
|||
padding: 24rpx; |
|||
|
|||
.item-box { |
|||
margin-bottom: 50rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
|
|||
.item { |
|||
border: 1px solid $u-type-primary; |
|||
color: $u-type-primary; |
|||
padding: 8rpx 40rpx; |
|||
border-radius: 100rpx; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.active { |
|||
color: #FFFFFF; |
|||
background-color: $u-type-primary; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area u-flex u-row-center"> |
|||
<u-image :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill"> |
|||
<u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading> |
|||
<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view> |
|||
</u-image> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="statusCurrent" :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection> |
|||
</view> |
|||
<!-- 微信小程序中，无法动态切换slot，所以隐藏此部分的演示 --> |
|||
<!-- #ifndef MP-WEIXIN --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">加载中状态</view> |
|||
<u-subsection :list="['默认', '自定义']" @change="loadingChange"></u-subsection> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">加载失败状态</view> |
|||
<u-subsection :list="['默认', '自定义']" @change="errorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">形状</view> |
|||
<u-subsection :list="['方形', '圆形']" @change="shapeChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
src: 'https://cdn.uviewui.com/uview/example/fade.jpg', |
|||
width: '200', |
|||
height: '200', |
|||
loadingSlot: false, |
|||
statusCurrent: 0, |
|||
errorSlot: false, |
|||
shape: 'square' |
|||
}; |
|||
}, |
|||
computed: { |
|||
// statusCurrent() { |
|||
// } |
|||
}, |
|||
methods: { |
|||
statusChange(index) { |
|||
// 此处通过ref操作组件内部状态，仅是为了演示使用，实际中无需这些操作，由内部的图片加载事件自动完成 |
|||
if (index == 0) { |
|||
this.src = 'http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg'; |
|||
this.$refs.uImage.loading = false; |
|||
this.$refs.uImage.isError = false; |
|||
} else if (index == 1) { |
|||
this.$refs.uImage.loading = true; |
|||
} else { |
|||
this.$refs.uImage.loading = false; |
|||
this.$refs.uImage.isError = true; |
|||
} |
|||
}, |
|||
loadingChange(index) { |
|||
this.statusCurrent = 1; |
|||
this.statusChange(1); |
|||
if (index == 0) { |
|||
this.loadingSlot = false; |
|||
} else { |
|||
this.loadingSlot = true; |
|||
} |
|||
}, |
|||
errorChange(index) { |
|||
this.statusCurrent = 2; |
|||
this.statusChange(2); |
|||
if (index == 0) { |
|||
this.errorSlot = false; |
|||
} else { |
|||
this.errorSlot = true; |
|||
} |
|||
}, |
|||
shapeChange(index) { |
|||
this.shape = index == 0 ? 'square' : 'circle'; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo-area { |
|||
} |
|||
</style> |
|||
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area u-flex u-row-center"> |
|||
<!-- 头条小程序因为兼容性，必须要给组件写上u-line类 --> |
|||
<u-line class="u-line" :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">颜色</view> |
|||
<u-subsection :list="['primary', 'success', 'warning', 'error', 'info']" @change="colorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">线条类型</view> |
|||
<u-subsection :list="['实线', '方形虚线', '圆点虚线']" @change="borderStyleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">细边</view> |
|||
<u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">方向</view> |
|||
<u-subsection :list="['水平', '垂直']" @change="directionChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
direction: 'row', |
|||
hairLine: true, |
|||
length: '100%', |
|||
color: this.$u.color['primary'], |
|||
borderStyle: 'solid' |
|||
} |
|||
}, |
|||
methods: { |
|||
colorChange(index) { |
|||
this.color = this.$u.color[['primary', 'success', 'warning', 'error', 'info'][index]]; |
|||
}, |
|||
hairLineChange(index) { |
|||
this.hairLine = !index; |
|||
}, |
|||
directionChange(index) { |
|||
this.direction = index == 0 ? 'row' : 'col'; |
|||
if(index == 0) this.length = '100%'; |
|||
else this.length = '50rpx'; |
|||
}, |
|||
borderStyleChange(index) { |
|||
this.borderStyle = ['solid', 'dashed', 'dotted'][index]; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo-area { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-loading :mode="mode" :show="show" :color="color" :size="size"></u-loading> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式</view> |
|||
<u-subsection :list="['圆圈', '花朵']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">颜色(只对圆圈模式有效)</view> |
|||
<u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">尺寸(单位rpx)</view> |
|||
<u-subsection current="1" :list="['28', '34', '40']" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否显示</view> |
|||
<u-subsection current="1" :list="['否', '是']" @change="showChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mode: 'circle', |
|||
color: '#c7c7c7', |
|||
size: '34', |
|||
show: true |
|||
} |
|||
}, |
|||
methods: { |
|||
modeChange(index) { |
|||
this.mode = index == 0 ? 'circle' : 'flower'; |
|||
}, |
|||
colorChange(index) { |
|||
if(index == 0) { |
|||
this.color = '#c7c7c7'; |
|||
} else { |
|||
let color = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success'; |
|||
this.color = this.$u.color[color]; |
|||
} |
|||
}, |
|||
sizeChange(index) { |
|||
this.size = index == 0 ? '28' : index == 1 ? '34' : '40'; |
|||
}, |
|||
showChange(index) { |
|||
// 两个!!可以把0变成false，1变成true |
|||
this.show = !!index; |
|||
}, |
|||
// 选中某个复选框时，由checkbox时触发 |
|||
checkboxChange(e) { |
|||
//console.log(e); |
|||
}, |
|||
// 选中任一checkbox时，由checkbox-group触发 |
|||
checkboxGroupChange(e) { |
|||
this.result = e; |
|||
// console.log(this.result); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,144 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast :type="type" ref="uToast"></u-toast> |
|||
<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" @getMore="getMore" |
|||
:mode="mode" @end="end" @close="close" @click="click" :show="show" :type="type" :list="list" |
|||
:moreIcon="moreIcon" :volumeIcon="volumeIcon" :duration="duration" :isCircular="isCircular"></u-notice-bar> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">主题</view> |
|||
<u-subsection :current="3" :list="['primary', 'success', 'error', 'warning', 'none']" @change="typeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">滚动模式</view> |
|||
<u-subsection :current="current" :list="['水平', '垂直']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否衔接(水平模式有效)</view> |
|||
<u-subsection :list="['是', '否']" @change="isCircularChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :list="['播放', '暂停']" @change="playStateChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">速度</view> |
|||
<u-subsection :current="1" :list="['慢', '正常', '快']" @change="speedChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">图标</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="iconChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: true, |
|||
autoplay: false, |
|||
type: 'warning', |
|||
list: [ |
|||
'锦瑟无端五十弦，一弦一柱思华年', |
|||
'庄生晓梦迷蝴蝶，望帝春心托杜鹃', |
|||
'沧海月明珠有泪，蓝田日暖玉生烟' |
|||
], |
|||
mode: 'horizontal', |
|||
playState: 'play', |
|||
speed: 160, |
|||
duration: 2000, |
|||
moreIcon: true, |
|||
volumeIcon: true, |
|||
isCircular: true, |
|||
current: 0 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
typeChange(index) { |
|||
let type = ['primary', 'success', 'error', 'warning', 'none']; |
|||
this.type = type[index]; |
|||
}, |
|||
modeChange(index) { |
|||
this.current = index; |
|||
this.mode = index == 0 ? 'horizontal' : 'vertical'; |
|||
}, |
|||
playStateChange(index) { |
|||
this.playState = index == 0 ? 'play' : 'paused'; |
|||
}, |
|||
speedChange(index) { |
|||
if(index == 0) { |
|||
this.$nextTick(() => { |
|||
this.speed = 50; |
|||
this.duration = 6000; |
|||
}) |
|||
} else if(index == 1) { |
|||
this.$nextTick(() => { |
|||
this.speed = 160; |
|||
this.duration = 2000; |
|||
}) |
|||
} else { |
|||
this.$nextTick(() => { |
|||
this.speed = 350; |
|||
this.duration = 400; |
|||
}) |
|||
} |
|||
}, |
|||
iconChange(index) { |
|||
if(index == 0) { |
|||
this.moreIcon = true; |
|||
this.volumeIcon = true; |
|||
} else { |
|||
this.moreIcon = false; |
|||
this.volumeIcon = false; |
|||
} |
|||
}, |
|||
isCircularChange(index) { |
|||
this.isCircular = index == 0 ? true : false; |
|||
this.current = 0; |
|||
this.mode = 'horizontal'; |
|||
}, |
|||
close() { |
|||
this.toast(`点击了关闭图标`); |
|||
}, |
|||
click(index) { |
|||
if(this.mode == 'horizontal' && this.isCircular) { |
|||
this.toast('此模式无法获取Index值'); |
|||
} else { |
|||
this.toast(`点击了第${index + 1}条消息`); |
|||
} |
|||
|
|||
}, |
|||
getMore() { |
|||
this.toast(`点击了更多图标`); |
|||
}, |
|||
toast(title) { |
|||
this.$refs.uToast.show({ |
|||
title: title, |
|||
type: 'warning' |
|||
}) |
|||
}, |
|||
end() { |
|||
// console.log('end'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.item { |
|||
margin-top: 30px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,199 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<view class="u-demo-result-line">{{ input ? input : 'Picker值' }}</view> |
|||
<u-picker |
|||
:mode="mode" |
|||
:defaultTime="defaultTime" |
|||
v-model="show" |
|||
:defaultRegion="defaultRegion" |
|||
:params="params" |
|||
end-year="2030" |
|||
@confirm="confirm" |
|||
:defaultSelector="defaultSelector" |
|||
:range="range" |
|||
:range-key="rangKey" |
|||
@columnchange="columnchange" |
|||
></u-picker> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">Picker开关</view> |
|||
<u-subsection :current="status" :list="['显示', '隐藏']" @change="statusChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式选择</view> |
|||
<u-subsection :list="['单列', '多列', '时间', '地区']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">默认时间</view> |
|||
<u-subsection :list="['2019-12-11 20:15:35', '2020-02-05 13:09:42']" @change="defaultTimeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示时分秒</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="minSecChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">默认地区</view> |
|||
<u-subsection :list="['广东-深圳-宝安', '海南-三亚-海棠']" @change="defaultRegionChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
input: '', |
|||
rangKey: 'name', |
|||
mode: 'selector', |
|||
range: ['一', '片', '冰', '心', '在', '玉', '壶'], |
|||
defaultTime: '2019-12-11 20:15:35', |
|||
defaultSelector: [0], |
|||
defaultRegion: ['广东省', '深圳市', '宝安区'], |
|||
params: { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: true, |
|||
minute: true, |
|||
second: true, |
|||
province: true, |
|||
city: true, |
|||
area: true, |
|||
timestamp: true |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
status() { |
|||
return this.show == true ? 0 : 1; |
|||
} |
|||
}, |
|||
methods: { |
|||
statusChange(index) { |
|||
this.show = index == 0 ? true : false; |
|||
}, |
|||
modeChange(index) { |
|||
this.mode = ['selector', 'multiSelector', 'time', 'region'][index]; |
|||
if (this.mode == 'selector') { |
|||
this.range = ['一', '片', '冰', '心', '在', '玉', '壶']; |
|||
this.defaultSelector = [0]; |
|||
} |
|||
if (this.mode == 'multiSelector') { |
|||
this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']]; |
|||
this.defaultSelector = [0, 0, 0]; |
|||
} |
|||
this.show = true; |
|||
}, |
|||
defaultTimeChange(index) { |
|||
this.defaultTime = index == 0 ? '2019-12-11 20:15:35' : '2020-02-05 13:09:42'; |
|||
this.mode = 'time'; |
|||
this.show = true; |
|||
}, |
|||
defaultRegionChange(index) { |
|||
this.defaultRegion = index == 0 ? ['广东省', '深圳市', '宝安区'] : ['海南省', '三亚市', '海棠区']; |
|||
this.mode = 'region'; |
|||
this.show = true; |
|||
}, |
|||
minSecChange(index) { |
|||
if (index == 0) { |
|||
this.params.hour = true; |
|||
this.params.minute = true; |
|||
this.params.second = true; |
|||
} |
|||
if (index == 1) { |
|||
this.params.hour = false; |
|||
this.params.minute = false; |
|||
this.params.second = false; |
|||
} |
|||
this.mode = 'time'; |
|||
this.show = true; |
|||
}, |
|||
confirm(e) { |
|||
// console.log(e); |
|||
this.input = ''; |
|||
if (this.mode == 'time') { |
|||
if (this.params.year) this.input += e.year; |
|||
if (this.params.month) this.input += '-' + e.month; |
|||
if (this.params.day) this.input += '-' + e.day; |
|||
if (this.params.hour) this.input += ' ' + e.hour; |
|||
if (this.params.minute) this.input += ':' + e.minute; |
|||
if (this.params.second) this.input += ':' + e.second; |
|||
} else if (this.mode == 'region') { |
|||
this.input = e.province.label + '-' + e.city.label + '-' + e.area.label; |
|||
} else if (this.mode == 'selector') { |
|||
this.input = this.range[e[0]]; |
|||
} else if (this.mode == 'multiSelector') { |
|||
this.input = this.range[0][e[0]] + '-' + this.range[1][e[1]] + '-' + this.range[2][e[2]]; |
|||
} |
|||
}, |
|||
columnchange(e) { |
|||
let column = e.column, index = e.index; |
|||
this.defaultSelector[column] = index; |
|||
switch (column) { |
|||
case 0: |
|||
switch (index) { |
|||
case 0: |
|||
this.range[1] = ['中国', '日本'] |
|||
this.range[2] = ['北京', '上海', '广州'] |
|||
break |
|||
case 1: |
|||
this.range[1] = ['英国', '法国'] |
|||
this.range[2] = ['伦敦', '曼彻斯特'] |
|||
break |
|||
} |
|||
this.defaultSelector.splice(1, 1, 0) |
|||
this.defaultSelector.splice(2, 1, 0) |
|||
break |
|||
case 1: //拖动第2列 |
|||
switch (this.defaultSelector[0]) { //判断第一列是什么 |
|||
case 0: |
|||
switch (this.defaultSelector[1]) { |
|||
case 0: |
|||
this.range[2] = ['北京', '上海', '广州'] |
|||
break |
|||
case 1: |
|||
this.range[2] = ['东京','北海道'] |
|||
break |
|||
} |
|||
break |
|||
case 1: |
|||
switch (this.defaultSelector[1]) { |
|||
case 0: |
|||
this.range[2] = ['伦敦', '曼彻斯特'] |
|||
break |
|||
case 1: |
|||
this.range[2] = ['巴黎', '马赛'] |
|||
break |
|||
} |
|||
break |
|||
} |
|||
this.defaultSelector.splice(2, 1, 0) |
|||
break |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.input { |
|||
border: 1px solid $u-light-color; |
|||
border-radius: 4px; |
|||
margin-bottom: 20px; |
|||
height: 30px; |
|||
font-size: 26rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.input-wrap { |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<view class=""> |
|||
<u-radio-group :shape="shape" :size="size" :width="width" :wrap="wrap" v-model="value" @change="radioGroupChange" :activeColor="activeColor"> |
|||
<u-radio @change="radioChange" v-for="(item, index) in list" :disabled="item.disabled" |
|||
:key="index" :name="item.name" |
|||
>{{item.name}}</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
<view class="u-demo-result-line"> |
|||
{{value ? `选中了"${result}"` : '请选择'}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">形状</view> |
|||
<u-subsection current="1" :list="['方形', '圆形']" @change="shapeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">整体大小(单位rpx)</view> |
|||
<u-subsection current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">激活颜色</view> |
|||
<u-subsection :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">每个占一行</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="wrapChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">每个宽度50%</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="widthChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">默认选中第一个</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">禁用第一个</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
name: '荔枝', |
|||
checked: true, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '香蕉', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '橙子', |
|||
checked: false, |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '草莓', |
|||
checked: false, |
|||
disabled: false |
|||
} |
|||
], |
|||
disabled: false, |
|||
result: '荔枝', |
|||
shape: 'circle', |
|||
value: '荔枝', |
|||
activeColor: '#2979ff', |
|||
size: 34, |
|||
wrap: false, |
|||
width: 'auto' |
|||
} |
|||
}, |
|||
methods: { |
|||
shapeChange(index) { |
|||
this.shape = index == 0 ? 'square' : 'circle'; |
|||
}, |
|||
sizeChange(index) { |
|||
this.size = index == 0 ? 30 : index == 1 ? 40 : 50; |
|||
}, |
|||
defaultChooseChange(index) { |
|||
// 特别处理对第一个选的选中的情况，涉及到提示语，选中状态等 |
|||
// 实际开发中不会存在这些情况，只是演示用 |
|||
if(index == 0) { |
|||
this.result = this.value = this.list[0].name; |
|||
} else { |
|||
if(this.value == this.list[0].name) { |
|||
this.result = this.value = ''; |
|||
} |
|||
} |
|||
}, |
|||
activeColorChange(index) { |
|||
// 如果用户尚未勾选任何radio，切换颜色时，默认选中第一个让用户看到效果，因为勾选了才有效果 |
|||
if(!this.result) this.result = this.value = this.list[0].name; |
|||
let theme = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : index == 3 ? 'success' : 'info'; |
|||
this.activeColor = this.$u.color[theme]; |
|||
}, |
|||
disabledChange(index) { |
|||
if(index == 0) { |
|||
this.list[0].disabled = true; |
|||
} else { |
|||
this.list[0].disabled = false; |
|||
} |
|||
}, |
|||
// 选中某个单选框时，由radio时触发 |
|||
radioChange(e) { |
|||
//console.log(e); |
|||
}, |
|||
// 选中任一radio时，由radio-group触发 |
|||
radioGroupChange(e) { |
|||
this.result = e; |
|||
//console.log(e); |
|||
}, |
|||
widthChange(index) { |
|||
this.width = index == 0 ? '50%' : ''; |
|||
}, |
|||
wrapChange(index) { |
|||
this.wrap = !index; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-rate v-model="value" :count="count" @change="change" |
|||
:active-color="activeColor" :inaction-color="inactiveColor" |
|||
:active-icon="activeIcon" :inactive-icon="inactiveIcon" |
|||
:disabled="disabled" :colors="colors" :icons="icons"></u-rate> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">初始值</view> |
|||
<u-subsection :list="[1, 2, 3, 4]" @change="currentChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">镂空状态</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="plainChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义图标</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="iconChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否分层</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="decimalChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否禁用</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">星星数量</view> |
|||
<u-subsection current="1" :list="[4, 5, 6]" @change="countChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
// 1.4.5后推荐使用v-model双向绑定，弃用current |
|||
// current: 1, |
|||
activeColor: '#FA3534', |
|||
inactiveColor: '#b2b2b2', |
|||
disabled: false, |
|||
count: 5, |
|||
customIcon: false, |
|||
plain: false, |
|||
value: 0, |
|||
colors: [], |
|||
icons: [] |
|||
} |
|||
}, |
|||
watch: { |
|||
value(n) { |
|||
// console.log(n); |
|||
} |
|||
}, |
|||
computed: { |
|||
activeIcon() { |
|||
let icon = this.customIcon ? 'heart' : 'star'; |
|||
return this.plain ? icon : icon + '-fill' |
|||
}, |
|||
inactiveIcon() { |
|||
let icon = this.customIcon ? 'heart' : 'star'; |
|||
return this.plain ? icon : icon + '-fill' |
|||
} |
|||
}, |
|||
methods: { |
|||
currentChange(index) { |
|||
this.value = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4; |
|||
}, |
|||
plainChange(index) { |
|||
this.plain = !index; |
|||
}, |
|||
disabledChange(index) { |
|||
this.disabled = index == 0 ? true : false; |
|||
}, |
|||
countChange(index) { |
|||
this.count = index == 0 ? 4 : index == 1 ? 5 : 6; |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.activeColor = this.$u.color['primary']; |
|||
this.inactiveColor = this.$u.color['info']; |
|||
} else { |
|||
this.activeColor = '#FA3534'; |
|||
this.inactiveColor = '#b2b2b2'; |
|||
} |
|||
}, |
|||
decimalChange(index) { |
|||
if(index == 0) { |
|||
this.colors = ['#ffc454', '#ffb409', '#ff9500']; |
|||
this.icons = ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill']; |
|||
} else { |
|||
this.colors = []; |
|||
this.icons = []; |
|||
} |
|||
}, |
|||
iconChange(index) { |
|||
this.customIcon = !index; |
|||
}, |
|||
change(val) { |
|||
// console.log(val); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-read-more @open="open" @close="close" :toggle="toggle" :show-height="showHeight" ref="uReadMore"> |
|||
<!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 --> |
|||
<!-- #ifdef MP-ALIPAY --> |
|||
<u-parse :html="content"></u-parse> |
|||
<!-- #endif --> |
|||
<!-- #ifndef MP-ALIPAY --> |
|||
<rich-text :nodes="content"></rich-text> |
|||
<!-- #endif --> |
|||
</u-read-more> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">超出高度隐藏</view> |
|||
<u-subsection current="1" :list="['100', '200', '400']" @change="showHeightChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">展开后可关闭</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="toggleChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
content: `浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 |
|||
忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。 |
|||
沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。 |
|||
我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。`, |
|||
showHeight: 200, |
|||
toggle: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
showHeightChange(index) { |
|||
this.showHeight = index == 0 ? 100 : index == 1 ? 200 : 400; |
|||
}, |
|||
toggleChange(index) { |
|||
this.toggle = index == 0 ? true : false; |
|||
}, |
|||
open() { |
|||
// console.log('open'); |
|||
}, |
|||
close() { |
|||
// console.log('close'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
// 通过/deep/样式穿透去控制组件的内容 |
|||
.wrap /deep/ .u-content { |
|||
color: #666!important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-search v-model="value" @change="change" @custom="custom" @search="search" :shape="shape" :clearabled="clearabled" |
|||
:show-action="showAction" :input-align="inputAlign" @clear="clear"></u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">初始值</view> |
|||
<u-subsection :list="['空', '天山雪莲']" @change="valueChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">搜索框形状</view> |
|||
<u-subsection :list="['圆形', '方形']" @change="shapeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">清除控件</view> |
|||
<u-subsection :list="['启用', '关闭']" @change="clearabledChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">右侧控件</view> |
|||
<u-subsection :list="['启用', '关闭']" @change="showActionChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">水平对齐方式</view> |
|||
<u-subsection :list="['左', '中', '右']" @change="inputAlignChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value: '', |
|||
shape: 'round', |
|||
clearabled: true, |
|||
showAction: true, |
|||
inputAlign: 'left' |
|||
} |
|||
}, |
|||
watch: { |
|||
// 这里的演示为证明通过v-model绑定值，它是双向绑定的，意味着您无需监听change事件 |
|||
// 也能知道value值当前的内容 |
|||
value(val) { |
|||
// console.log(val); |
|||
} |
|||
}, |
|||
methods: { |
|||
valueChange(index) { |
|||
this.value = index == 0 ? '' : '天山雪莲'; |
|||
}, |
|||
shapeChange(index) { |
|||
this.shape = index == 0 ? 'round' : 'square'; |
|||
}, |
|||
clearabledChange(index) { |
|||
this.clearabled = index == 0 ? true : false; |
|||
}, |
|||
showActionChange(index) { |
|||
this.showAction = index == 0 ? true : false; |
|||
}, |
|||
inputAlignChange(index) { |
|||
this.inputAlign = index == 0 ? 'left' : index == 1 ? 'center' : 'right'; |
|||
}, |
|||
change(value) { |
|||
// 搜索框内容变化时，会触发此事件，value值为输入框的内容 |
|||
//console.log(value); |
|||
}, |
|||
custom(value) { |
|||
//console.log(value); |
|||
this.$u.toast('输入值为：' + value) |
|||
}, |
|||
search(value) { |
|||
this.$refs.uToast.show({ |
|||
title: '搜索内容为：' + value, |
|||
type: 'success' |
|||
}) |
|||
}, |
|||
clear() { |
|||
// console.log(this.value); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,128 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<view class="container u-skeleton"> |
|||
<view class="userinfo"> |
|||
<block> |
|||
<!--u-skeleton-circle 绘制圆形--> |
|||
<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image> |
|||
<!--u-skeleton-fillet 绘制圆角矩形--> |
|||
<text class="u-skeleton-fillet">{{userInfo.nickName}}</text> |
|||
</block> |
|||
</view> |
|||
<view style="margin: 20px 0"> |
|||
<!--u-skeleton-rect 绘制矩形--> |
|||
<view class="u-skeleton-rect lists" v-for="(item,index) in lists" :key="index"> |
|||
<text>{{item}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!--引用组件--> |
|||
<u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation" |
|||
:el-color="elColor" :border-radius="borderRadius"></u-skeleton> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">加载状态</view> |
|||
<u-subsection :current="current" :list="['请求中', '请求结束']" @change="loadingChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">骨架动画</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="animationChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfo: { |
|||
avatarUrl: 'https://cdn.uviewui.com/uview/common/logo.png', |
|||
nickName: 'uView' |
|||
}, |
|||
lists: [ |
|||
'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。', |
|||
'人生得意须尽欢，莫使金樽空对月', |
|||
'天生我材必有用，千金散尽还复来', |
|||
], |
|||
loading: true, // 是否显示骨架屏组件 |
|||
animation: false, |
|||
elColor: '#e5e5e5', |
|||
borderRadius: 10, |
|||
} |
|||
}, |
|||
computed: { |
|||
current() { |
|||
return this.loading ? 0 : 1; |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
animationChange(index) { |
|||
this.animation = index == 0 ? true : false; |
|||
this.getData(); |
|||
}, |
|||
loadingChange(index) { |
|||
this.loading = index == 0 ? true : false; |
|||
if(index == 0) this.getData(); |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.elColor = this.$u.color['primary']; |
|||
this.borderRadius = 14; |
|||
} else { |
|||
this.elColor = '#e5e5e5'; |
|||
this.borderRadius = 10; |
|||
} |
|||
this.getData(); |
|||
}, |
|||
getData() { |
|||
this.loading = true; |
|||
// 通过延时模拟向后端请求数据，调隐藏骨架屏 |
|||
setTimeout(() => { |
|||
this.loading = false; |
|||
}, 3000) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
text-align: left; |
|||
font-size: 28rpx; |
|||
color: $u-content-color; |
|||
} |
|||
|
|||
.userinfo { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
.userinfo-avatar { |
|||
width: 128rpx; |
|||
height: 128rpx; |
|||
margin: 20rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.lists { |
|||
margin: 10px 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-steps :direction="direction" :current="current" :list="steps" :mode="mode" :icon="icon"></u-steps> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式</view> |
|||
<u-subsection :list="['number', 'dot']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">方向</view> |
|||
<u-subsection :list="['横向', '竖向']" @change="directionChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义图标</view> |
|||
<u-subsection :list="['否', '是']" @change="iconChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">当前步值</view> |
|||
<u-subsection :list="['1', '2', '3', '4']" @change="stepChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
steps: [{ |
|||
name: '下单' |
|||
}, { |
|||
name: '出库' |
|||
}, { |
|||
name: '运输' |
|||
}, { |
|||
name: '签收' |
|||
}, ], |
|||
current: 0, |
|||
icon: 'checkmark', |
|||
mode: 'number', |
|||
direction: 'row' |
|||
} |
|||
}, |
|||
methods: { |
|||
modeChange(index) { |
|||
this.mode = index == 0 ? 'number' : 'dot'; |
|||
}, |
|||
stepChange(index) { |
|||
this.current = [0, 1, 2, 3][index]; |
|||
}, |
|||
iconChange(index) { |
|||
this.icon = index == 0 ? 'checkmark' : 'map-fill'; |
|||
}, |
|||
directionChange(index) { |
|||
this.direction = index == 0 ? 'row' : 'column'; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.box { |
|||
margin: 50rpx 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed" @unfixed="unfixed"> |
|||
<view class="sticky"> |
|||
宝剑锋从磨砺出,梅花香自苦寒来 |
|||
</view> |
|||
</u-sticky> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">吸顶高度</view> |
|||
<u-subsection :list="[0, 120, 200]" @change="offsetTopChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :list="['允许吸顶', '禁止吸顶']" @change="enableChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
offsetTop: 0, |
|||
enable: true, |
|||
} |
|||
}, |
|||
methods: { |
|||
offsetTopChange(index) { |
|||
this.offsetTop = index == 0 ? 0 : index == 1 ? 120 : 200; |
|||
uni.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 0 |
|||
}) |
|||
}, |
|||
enableChange(index) { |
|||
this.enable = index == 0 ? true : false; |
|||
}, |
|||
fixed() { |
|||
this.$refs.uToast.show({ |
|||
type: 'warning', |
|||
title: '触发吸顶' |
|||
}) |
|||
}, |
|||
unfixed() { |
|||
this.$refs.uToast.show({ |
|||
type: 'success', |
|||
title: '取消吸顶' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo-area { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.u-config-wrap { |
|||
height: 200vh; |
|||
} |
|||
|
|||
.u-demo-title { |
|||
margin-bottom: 140rpx; |
|||
} |
|||
|
|||
.sticky { |
|||
background-color: $u-type-primary; |
|||
color: #fff; |
|||
padding: 24rpx; |
|||
margin: auto; |
|||
font-size: 28rpx; |
|||
line-height: 1; |
|||
border-radius: 5px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,153 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-swipe-action |
|||
bg-color="rgb(250, 250, 250)" |
|||
@open="open" |
|||
:disabled="disabled" |
|||
:index="index" |
|||
v-for="(item, index) in list" |
|||
:key="item.id" |
|||
:show="item.show" |
|||
@click="click" |
|||
:btn-width="btnWidth" |
|||
@close="close" |
|||
:options="options" |
|||
@content-click="contentClick" |
|||
> |
|||
<view class="item u-border-bottom"> |
|||
<image mode="aspectFill" :src="item.images" /> |
|||
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 --> |
|||
<view class="title-wrap"> |
|||
<text class="title u-line-2">{{ item.title }}</text> |
|||
</view> |
|||
</view> |
|||
</u-swipe-action> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态(操作第一个)</view> |
|||
<u-subsection :current="1" :list="['打开', '关闭']" @change="showChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">禁止滑动</view> |
|||
<u-subsection :current="1" :list="['是', '否']" @change="disabledChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list1: [ |
|||
{ |
|||
id: 1, |
|||
title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来', |
|||
images: 'https://cdn.uviewui.com/uview/common/logo.png', |
|||
show: false |
|||
}, |
|||
{ |
|||
id: 2, |
|||
title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来', |
|||
images: 'https://cdn.uviewui.com/uview/common/logo.png', |
|||
show: false |
|||
}, |
|||
{ |
|||
id: 3, |
|||
title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇', |
|||
images: 'https://cdn.uviewui.com/uview/common/logo.png', |
|||
show: false, |
|||
} |
|||
], |
|||
list: [], |
|||
disabled: false, |
|||
btnWidth: 180, |
|||
show: false, |
|||
options: [ |
|||
{ |
|||
text: '收藏', |
|||
style: { |
|||
backgroundColor: '#007aff' |
|||
} |
|||
}, |
|||
{ |
|||
text: '删除', |
|||
style: { |
|||
backgroundColor: '#dd524d' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
setTimeout(() => { |
|||
this.list = this.list1; |
|||
}, 0) |
|||
}, |
|||
methods: { |
|||
disabledChange(index) { |
|||
this.disabled = index == 0 ? true : false; |
|||
}, |
|||
showChange(index) { |
|||
if (index == 0) { |
|||
this.list.map((val, ids) => { |
|||
if (ids != 0) val.show = false; |
|||
else val.show = true; |
|||
}); |
|||
} else { |
|||
this.list[0].show = false; |
|||
} |
|||
}, |
|||
click(index, index1) { |
|||
if(index1 == 1) { |
|||
this.list.splice(index, 1); |
|||
this.$u.toast(`删除了第${index}个cell`); |
|||
} else { |
|||
this.list[index].show = false; |
|||
this.$u.toast(`收藏成功`); |
|||
} |
|||
}, |
|||
open(index) { |
|||
this.list[index].show = true; |
|||
this.list.map((val, idx) => { |
|||
if (index != idx) this.list[idx].show = false; |
|||
}); |
|||
}, |
|||
close(index) { |
|||
this.list[index].show = false; |
|||
}, |
|||
contentClick(index) { |
|||
// console.log(index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.item { |
|||
display: flex; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
image { |
|||
width: 120rpx; |
|||
flex: 0 0 120rpx; |
|||
height: 120rpx; |
|||
margin-right: 20rpx; |
|||
border-radius: 12rpx; |
|||
} |
|||
|
|||
.title { |
|||
text-align: left; |
|||
font-size: 28rpx; |
|||
color: $u-content-color; |
|||
margin-top: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-swiper @change="change" :height="250" :list="list" :title="title" :effect3d="effect3d" |
|||
:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">指示器模式</view> |
|||
<u-subsection :list="['round', 'rect', 'number', 'none']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">标题</view> |
|||
<u-subsection current="1" :list="['显示', '隐藏']" @change="titleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">指示器位置</view> |
|||
<u-subsection current="3" :list="['上左', '上右', '下左', '下中', '下右']" @change="indicatorPosChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">3D效果</view> |
|||
<u-subsection current="1" :list="['开启', '关闭']" @change="effect3dChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|||
title: '昨夜星辰昨夜风，画楼西畔桂堂东' |
|||
}, |
|||
{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg', |
|||
title: '身无彩凤双飞翼，心有灵犀一点通' |
|||
}, |
|||
{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg', |
|||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳' |
|||
} |
|||
], |
|||
title: false, |
|||
mode: 'round', |
|||
indicatorPos: 'bottomCenter', |
|||
effect3d: false, |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
titleChange(index) { |
|||
this.title = index == 0 ? true : false; |
|||
}, |
|||
modeChange(index) { |
|||
this.mode = index == 0 ? 'round' : index == 1 ? 'rect' : index == 2 ? 'number' : 'none'; |
|||
}, |
|||
indicatorPosChange(index) { |
|||
this.indicatorPos = index == 0 ? 'topLeft' : index == 1 ? 'topRight' : index == 2 ? 'bottomLeft' : index == 3 ? 'bottomCenter' : 'bottomRight'; |
|||
}, |
|||
effect3dChange(index) { |
|||
this.effect3d = index == 0 ? true : false; |
|||
}, |
|||
click(index) { |
|||
this.$refs.uToast.show({ |
|||
title: `点击了第${index + 1}张图片`, |
|||
type: 'success' |
|||
}) |
|||
}, |
|||
change(index) { |
|||
// console.log(index); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.item { |
|||
margin: 30rpx 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-switch v-model="checked" :loading="loading" |
|||
:size="size" @change="change" |
|||
:active-color="activeColor" |
|||
:disabled="disabled" |
|||
:activeValue="100" |
|||
:inactiveValue="1" |
|||
></u-switch> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :list="['关闭', '打开']" @change="modelChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">颜色</view> |
|||
<u-subsection :list="['primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">尺寸(单位rpx)</view> |
|||
<u-subsection current="1" :list="['40', '60', '80']" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">加载中</view> |
|||
<u-subsection :list="['否', '是']" @change="loadingChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">禁用</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">异步控制</view> |
|||
<u-subsection :list="['关闭', '打开']" @change="asyncChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
checked: false, |
|||
activeColor: '#2979ff', |
|||
size: 50, |
|||
loading: false, |
|||
disabled: false |
|||
} |
|||
}, |
|||
methods: { |
|||
modelChange(index) { |
|||
// 两个!!可以把0变成false，1变成true |
|||
this.checked = !!index; |
|||
}, |
|||
colorChange(index) { |
|||
let color = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : 'success'; |
|||
this.activeColor = this.$u.color[color]; |
|||
}, |
|||
sizeChange(index) { |
|||
this.size = index == 0 ? '40' : index == 1 ? '60' : '80'; |
|||
}, |
|||
loadingChange(index) { |
|||
this.loading = !!index; |
|||
}, |
|||
disabledChange(index) { |
|||
this.disabled = index == 0 ? true : false; |
|||
}, |
|||
asyncChange(index) { |
|||
if(this.checked && index == 1) { |
|||
this.$u.toast('请先关闭选择器'); |
|||
return; |
|||
} |
|||
if(!this.checked && index == 0) { |
|||
this.$u.toast('请先打开选择器'); |
|||
return; |
|||
} |
|||
let str = index == 0 ? '是否要关闭？' : '是否要打开？'; |
|||
this.loading = true; |
|||
let oldStatus = this.checked; |
|||
this.checked = true; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: str, |
|||
complete: (res) => { |
|||
this.loading = false; |
|||
if(res.confirm) { |
|||
if(oldStatus) this.checked = false; |
|||
else this.checked = true; |
|||
} else { |
|||
if(!oldStatus) this.checked = false; |
|||
else this.checked = true; |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
change(value) { |
|||
// console.log(value); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,133 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="u-demo"> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="showChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">凸起按钮</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="minButtonChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">背景色</view> |
|||
<u-subsection :list="['#ffffff', '#1f1f1d']" @change="bgColorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">顶部边框</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="borderTopChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">提示角标</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="badgeChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<u-tabbar |
|||
v-model="current" |
|||
:show="show" |
|||
:bg-color="bgColor" |
|||
:border-top="borderTop" |
|||
:list="list" |
|||
:mid-button="midButton" |
|||
:inactive-color="inactiveColor" |
|||
:activeColor="activeColor" |
|||
></u-tabbar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 0, |
|||
show: true, |
|||
bgColor: '#ffffff', |
|||
borderTop: true, |
|||
list: [{ |
|||
iconPath: "home", |
|||
selectedIconPath: "home-fill", |
|||
text: '首页', |
|||
count: 2, |
|||
isDot: true, |
|||
customIcon: false, |
|||
}, |
|||
{ |
|||
iconPath: "photo", |
|||
selectedIconPath: "photo-fill", |
|||
text: '放映厅', |
|||
customIcon: false, |
|||
}, |
|||
{ |
|||
iconPath: "/static/uview/example/min_button.png", |
|||
selectedIconPath: "/static/uview/example/min_button_select.png", |
|||
text: '发布', |
|||
midButton: true, |
|||
customIcon: false, |
|||
}, |
|||
{ |
|||
iconPath: "play-right", |
|||
selectedIconPath: "play-right-fill", |
|||
text: '直播', |
|||
customIcon: false, |
|||
}, |
|||
{ |
|||
iconPath: "account", |
|||
selectedIconPath: "account-fill", |
|||
text: '我的', |
|||
count: 23, |
|||
isDot: false, |
|||
customIcon: false, |
|||
}, |
|||
], |
|||
midButton: true, |
|||
inactiveColor: '#909399', |
|||
activeColor: '#5098FF' |
|||
} |
|||
}, |
|||
methods: { |
|||
beforeSwitch(index) { |
|||
return true; |
|||
}, |
|||
showChange(index) { |
|||
this.show = !index; |
|||
}, |
|||
bgColorChange(index) { |
|||
if(index == 0) { |
|||
this.activeColor = '#5098FF'; |
|||
this.inactiveColor = '#909399'; |
|||
} |
|||
if(index == 1) { |
|||
this.activeColor = '#D0D0D0'; |
|||
this.inactiveColor = '#5A5A5A'; |
|||
} |
|||
this.bgColor = ['#ffffff', '#1f1f1d'][index]; |
|||
}, |
|||
borderTopChange(index) { |
|||
this.borderTop = !index; |
|||
}, |
|||
badgeChange(index) { |
|||
if (index == 1) { |
|||
this.list[0].count = 0; |
|||
this.list[4].count = 0; |
|||
} else { |
|||
this.list[0].count = 2; |
|||
this.list[4].count = 23; |
|||
} |
|||
}, |
|||
minButtonChange(index) { |
|||
this.midButton = !index; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.u-demo-area { |
|||
margin: 0 -40rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-table :align="align" :borderColor="borderColor"> |
|||
<u-tr class="u-tr"> |
|||
<u-th class="u-th">姓名</u-th> |
|||
<u-th class="u-th">年龄</u-th> |
|||
<u-th class="u-th">籍贯</u-th> |
|||
<u-th class="u-th">性别</u-th> |
|||
</u-tr> |
|||
<u-tr class="u-tr"> |
|||
<u-td class="u-td">吕布</u-td> |
|||
<u-td class="u-td">22</u-td> |
|||
<u-td class="u-td">楚河</u-td> |
|||
<u-td class="u-td">男</u-td> |
|||
</u-tr> |
|||
<u-tr class="u-tr"> |
|||
<u-td class="u-td">项羽</u-td> |
|||
<u-td class="u-td">28</u-td> |
|||
<u-td class="u-td">汉界</u-td> |
|||
<u-td class="u-td">男</u-td> |
|||
</u-tr> |
|||
<u-tr class="u-tr"> |
|||
<u-td class="u-td">木兰</u-td> |
|||
<u-td class="u-td">24</u-td> |
|||
<u-td class="u-td">南国</u-td> |
|||
<u-td class="u-td">女</u-td> |
|||
</u-tr> |
|||
</u-table> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">边框颜色</view> |
|||
<u-subsection :list="['gray', 'primary', 'warning']" @change="borderColorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">对齐方式</view> |
|||
<u-subsection current="1" :list="['左', '中', '右']" @change="alignChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mode: false, |
|||
borderColor: '#e4e7ed', |
|||
align: 'center', |
|||
index: 0, |
|||
} |
|||
}, |
|||
methods: { |
|||
modeChange(index) { |
|||
// #ifdef MP-WEIXIN |
|||
return this.$u.toast('微信小程序暂不支持单元格合并') |
|||
// #endif |
|||
this.mode = index == 0 ? true : false; |
|||
this.key ++; |
|||
}, |
|||
borderColorChange(index) { |
|||
this.borderColor = index == 0 ? '#e4e7ed' : index == 1 ? '#2979ff' : '#ff9900'; |
|||
}, |
|||
alignChange(index) { |
|||
this.align = index == 0 ? 'left' : index == 1 ? 'center' : 'right'; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,224 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<view class="pre-box" v-if="!showUploadList"> |
|||
<view class="pre-item" v-for="(item, index) in lists" :key="index"> |
|||
<image class="pre-item-image" :src="item.url" mode="aspectFill"></image> |
|||
<view class="u-delete-icon" @tap.stop="deleteItem(index)"> |
|||
<u-icon name="close" size="20" color="#ffffff"></u-icon> |
|||
</view> |
|||
<u-line-progress v-if="item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress" |
|||
:percent="item.progress"></u-line-progress> |
|||
</view> |
|||
</view> |
|||
<u-upload @on-choose-fail="onChooseFail" :before-remove="beforeRemove" ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList" |
|||
:show-progress="showProgress" :deletable="deletable" :max-count="maxCount" @on-list-change="onListChange"> |
|||
<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> |
|||
<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon> |
|||
</view> |
|||
</u-upload> |
|||
<u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button> |
|||
<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button> |
|||
<!-- <u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button> --> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">上传方式</view> |
|||
<u-subsection current="1" :list="['自动上传', '手动上传']" @change="autoUploadChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义控件(进度条和删除按钮)</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="controlChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">最大上传数量</view> |
|||
<u-subsection current="1" :list="['1', '2', '4']" @change="maxCountChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式(预览区域和上传按钮)</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="customStyleChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
action: 'http://127.0.0.1:7001/upload', |
|||
// 预置上传列表 |
|||
fileList: [], |
|||
// fileList: [{ |
|||
// url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg', |
|||
// error: false, |
|||
// progress: 100 |
|||
// }], |
|||
showUploadList: true, |
|||
customBtn: false, |
|||
autoUpload: false, |
|||
showProgress: true, |
|||
deletable: true, |
|||
customStyle: false, |
|||
maxCount: 2, |
|||
lists: [], // 组件内部的文件列表 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
reUpload() { |
|||
this.$refs.uUpload.reUpload(); |
|||
}, |
|||
clear() { |
|||
this.$refs.uUpload.clear(); |
|||
}, |
|||
autoUploadChange(index) { |
|||
this.autoUpload = index == 0 ? true : false; |
|||
}, |
|||
controlChange(index) { |
|||
if(index == 0) { |
|||
this.showProgress = true; |
|||
this.deletable = true; |
|||
} else { |
|||
this.showProgress = false; |
|||
this.deletable = false; |
|||
} |
|||
}, |
|||
maxCountChange(index) { |
|||
this.maxCount = index == 0 ? 1 : index == 1 ? 2 : 4; |
|||
}, |
|||
customStyleChange(index) { |
|||
if (index == 0) { |
|||
this.showUploadList = false; |
|||
this.customBtn = true; |
|||
|
|||
} else { |
|||
this.showUploadList = true; |
|||
this.customBtn = false; |
|||
} |
|||
}, |
|||
upload() { |
|||
this.$refs.uUpload.upload(); |
|||
}, |
|||
deleteItem(index) { |
|||
this.$refs.uUpload.remove(index); |
|||
}, |
|||
onOversize(file, lists) { |
|||
// console.log('onOversize', file, lists); |
|||
}, |
|||
onPreview(url, lists) { |
|||
// console.log('onPreview', url, lists); |
|||
}, |
|||
onRemove(index, lists) { |
|||
// console.log('onRemove', index, lists); |
|||
}, |
|||
onSuccess(data, index, lists) { |
|||
// console.log('onSuccess', data, index, lists); |
|||
}, |
|||
onChange(res, index, lists) { |
|||
// console.log('onChange', res, index, lists); |
|||
}, |
|||
error(res, index, lists) { |
|||
// console.log('onError', res, index, lists); |
|||
}, |
|||
onProgress(res, index, lists) { |
|||
// console.log('onProgress', res, index, lists); |
|||
}, |
|||
onUploaded(lists) { |
|||
// console.log('onUploaded', lists); |
|||
}, |
|||
onListChange(lists) { |
|||
// console.log('onListChange', lists); |
|||
this.lists = lists; |
|||
}, |
|||
beforeRemove(index, lists) { |
|||
return true; |
|||
}, |
|||
onChooseFail(e) { |
|||
// console.log(e); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-demo-wrap { |
|||
background-color: #FFFFFF; |
|||
padding: 40rpx 8rpx; |
|||
margin-left: -14rpx; |
|||
margin-right: -14rpx; |
|||
} |
|||
|
|||
.u-add-wrap { |
|||
flex-direction: column; |
|||
color: $u-content-color; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
/deep/ .slot-btn { |
|||
width: 329rpx; |
|||
height: 140rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: rgb(244, 245, 246); |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.slot-btn__hover { |
|||
background-color: rgb(235, 236, 238); |
|||
} |
|||
|
|||
.pre-box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.pre-item { |
|||
flex: 0 0 48.5%; |
|||
border-radius: 10rpx; |
|||
height: 140rpx; |
|||
overflow: hidden; |
|||
position: relative; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.u-progress { |
|||
position: absolute; |
|||
bottom: 10rpx; |
|||
left: 8rpx; |
|||
right: 8rpx; |
|||
z-index: 9; |
|||
width: auto; |
|||
} |
|||
|
|||
.pre-item-image { |
|||
width: 100%; |
|||
height: 140rpx; |
|||
} |
|||
|
|||
.u-delete-icon { |
|||
position: absolute; |
|||
top: 10rpx; |
|||
right: 10rpx; |
|||
z-index: 10; |
|||
background-color: $u-type-error; |
|||
border-radius: 100rpx; |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,224 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<u-waterfall v-model="flowList" ref="uWaterfall"> |
|||
<template v-slot:left="{ leftList }"> |
|||
<view class="demo-warter" v-for="(item, index) in leftList" :key="index"> |
|||
<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 --> |
|||
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> |
|||
<view class="demo-title">{{ item.title }}</view> |
|||
<view class="demo-price">{{ item.price }}元</view> |
|||
<view class="demo-tag"> |
|||
<view class="demo-tag-owner">自营</view> |
|||
<view class="demo-tag-text">放心购</view> |
|||
</view> |
|||
<view class="demo-shop">{{ item.shop }}</view> |
|||
<view class="u-close"> |
|||
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-slot:right="{ rightList }"> |
|||
<view class="demo-warter" v-for="(item, index) in rightList" :key="index"> |
|||
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> |
|||
<view class="demo-title">{{ item.title }}</view> |
|||
<view class="demo-price">{{ item.price }}元</view> |
|||
<view class="demo-tag"> |
|||
<view class="demo-tag-owner">自营</view> |
|||
<view class="demo-tag-text">放心购</view> |
|||
</view> |
|||
<view class="demo-shop">{{ item.shop }}</view> |
|||
<view class="u-close"> |
|||
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</u-waterfall> |
|||
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
loadStatus: 'loadmore', |
|||
flowList: [], |
|||
list: [ |
|||
{ |
|||
price: 35, |
|||
title: '北国风光，千里冰封，万里雪飘', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg' |
|||
}, |
|||
{ |
|||
price: 75, |
|||
title: '望长城内外，惟余莽莽', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg' |
|||
}, |
|||
{ |
|||
price: 385, |
|||
title: '大河上下，顿失滔滔', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg' |
|||
}, |
|||
{ |
|||
price: 784, |
|||
title: '欲与天公试比高', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg' |
|||
}, |
|||
{ |
|||
price: 7891, |
|||
title: '须晴日，看红装素裹，分外妖娆', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg' |
|||
}, |
|||
{ |
|||
price: 2341, |
|||
shop: '李白杜甫白居易旗舰店', |
|||
title: '江山如此多娇，引无数英雄竞折腰', |
|||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg' |
|||
}, |
|||
{ |
|||
price: 661, |
|||
shop: '李白杜甫白居易旗舰店', |
|||
title: '惜秦皇汉武，略输文采', |
|||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg' |
|||
}, |
|||
{ |
|||
price: 1654, |
|||
title: '唐宗宋祖，稍逊风骚', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg' |
|||
}, |
|||
{ |
|||
price: 1678, |
|||
title: '一代天骄，成吉思汗', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg' |
|||
}, |
|||
{ |
|||
price: 924, |
|||
title: '只识弯弓射大雕', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg' |
|||
}, |
|||
{ |
|||
price: 8243, |
|||
title: '俱往矣，数风流人物，还看今朝', |
|||
shop: '李白杜甫白居易旗舰店', |
|||
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg' |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.addRandomData(); |
|||
}, |
|||
onReachBottom() { |
|||
this.loadStatus = 'loading'; |
|||
// 模拟数据加载 |
|||
setTimeout(() => { |
|||
this.addRandomData(); |
|||
this.loadStatus = 'loadmore'; |
|||
}, 1000); |
|||
}, |
|||
methods: { |
|||
addRandomData() { |
|||
for (let i = 0; i < 10; i++) { |
|||
let index = this.$u.random(0, this.list.length - 1); |
|||
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱 |
|||
let item = JSON.parse(JSON.stringify(this.list[index])); |
|||
item.id = this.$u.guid(); |
|||
this.flowList.push(item); |
|||
} |
|||
}, |
|||
remove(id) { |
|||
this.$refs.uWaterfall.remove(id); |
|||
}, |
|||
clear() { |
|||
this.$refs.uWaterfall.clear(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
/* page不能写带scope的style标签中，否则无效 */ |
|||
page { |
|||
background-color: rgb(240, 240, 240); |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.demo-warter { |
|||
border-radius: 8px; |
|||
margin: 5px; |
|||
background-color: #ffffff; |
|||
padding: 8px; |
|||
position: relative; |
|||
} |
|||
|
|||
.u-close { |
|||
position: absolute; |
|||
top: 32rpx; |
|||
right: 32rpx; |
|||
} |
|||
|
|||
.demo-img-wrap { |
|||
} |
|||
|
|||
.demo-image { |
|||
width: 100%; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.demo-title { |
|||
font-size: 30rpx; |
|||
margin-top: 5px; |
|||
color: $u-main-color; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.demo-tag { |
|||
display: flex; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.demo-tag-owner { |
|||
background-color: $u-type-error; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 4rpx 14rpx; |
|||
border-radius: 50rpx; |
|||
font-size: 20rpx; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.demo-tag-text { |
|||
border: 1px solid $u-type-primary; |
|||
color: $u-type-primary; |
|||
margin-left: 10px; |
|||
border-radius: 50rpx; |
|||
line-height: 1; |
|||
padding: 4rpx 14rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-radius: 50rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.demo-price { |
|||
font-size: 30rpx; |
|||
color: $u-type-error; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.demo-shop { |
|||
font-size: 22rpx; |
|||
color: $u-tips-color; |
|||
margin-top: 5px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-button @click="showAction">唤起ActionSheet</u-button> |
|||
<u-action-sheet :cancel-btn="cancel" :mask-close-able="maskClick" :tips="tips" |
|||
@click="click" :list="list" v-model="show" :safe-area-inset-bottom="true"></u-action-sheet> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">取消按钮</view> |
|||
<u-subsection :list="['是', '否']" @change="cancelChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">点击遮罩关闭</view> |
|||
<u-subsection :list="['是', '否']" @change="maskClickChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [{ |
|||
text: '最是人间留不住', |
|||
}, { |
|||
text: '朱颜辞镜花辞树', |
|||
disabled: true |
|||
}, { |
|||
text: '正是江南好风景', |
|||
subText: '春江水暖鸭先知' |
|||
}, { |
|||
text: '落花时节又逢君' |
|||
}], |
|||
tips: { |
|||
text: '' |
|||
}, |
|||
show: false, |
|||
cancel: true, |
|||
maskClick: true |
|||
} |
|||
}, |
|||
methods: { |
|||
showAction() { |
|||
this.show = true; |
|||
}, |
|||
click(index) { |
|||
this.$refs.uToast.show({ |
|||
type: 'success', |
|||
title: '点击了第' + (index + 1) + '项' |
|||
}) |
|||
}, |
|||
tipsChange(index) { |
|||
if(index == 0) this.show = true; |
|||
this.tips.text = index == 0 ? '请谨慎执行您的操作' : '' |
|||
}, |
|||
cancelChange(index) { |
|||
this.show = true; |
|||
this.cancel = index == 0 ? true : false |
|||
}, |
|||
maskClickChange(index) { |
|||
if(index == 1) this.cancel = true; |
|||
this.show = true; |
|||
this.maskClick = index == 0 ? true : false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-alert-tips @close="close" :closeAble="closeAble" :show="show" @click="click" |
|||
:type="type" :title="title" :description="description" :showIcon="showIcon"></u-alert-tips> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">左侧图标</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="showIconChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">关闭图标</view> |
|||
<u-subsection current="1" :list="['显示', '隐藏']" @change="closeAbleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">主题</view> |
|||
<u-subsection current="3" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="current" :list="['开启', '关闭']" @change="showChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '大漠孤烟直，长河落日圆', |
|||
description: "月落乌啼霜满天，江枫渔火对愁眠。姑苏城外寒山寺，夜半钟声到客船。飞流直下三千尺，疑是银河落九天！", |
|||
show: true, |
|||
closeAble: false, |
|||
showIcon: false, |
|||
type: 'warning', |
|||
} |
|||
}, |
|||
computed: { |
|||
current() { |
|||
return this.show ? 0 : 1; |
|||
} |
|||
}, |
|||
methods: { |
|||
showIconChange(index) { |
|||
this.showIcon = index == 0 ? true : false; |
|||
}, |
|||
showChange(index) { |
|||
this.show = index == 0 ? true : false; |
|||
}, |
|||
closeAbleChange(index) { |
|||
this.closeAble = index == 0 ? true : false; |
|||
}, |
|||
typeChange(index) { |
|||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info'; |
|||
}, |
|||
close() { |
|||
this.show = false; |
|||
this.$refs.uToast.show({ |
|||
type: 'warning', |
|||
title: '点击关闭按钮' |
|||
}) |
|||
}, |
|||
click() { |
|||
this.$refs.uToast.show({ |
|||
type: 'warning', |
|||
title: '点击内容' |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.item { |
|||
margin: 30rpx 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<view class="u-badge-wrap"><u-badge :is-center="isCenter" :type="type" :count="count" :is-dot="isDot" :offset="offset" :size="size"></u-badge></view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">数值显示</view> |
|||
<u-subsection current="1" :list="[0, 8, 15, 106, 209]" @change="countChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">主题选择</view> |
|||
<u-subsection current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示点</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="isDotChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">尺寸</view> |
|||
<u-subsection :list="['default', 'mini']" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">位置偏移</view> |
|||
<u-subsection current="1" :list="['[20, 20]', '[-8, -8]', '[-20, -20]']" @change="offsetChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">中心点与父右上角重合</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="isCenterChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
count: 8, |
|||
type: 'error', |
|||
isDot: false, |
|||
offset: [-8, -8], |
|||
size: 'default', |
|||
isCenter: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
countChange(index) { |
|||
this.count = index == 0 ? 0 : index == 1 ? 8 : index == 2 ? 15 : index == 3 ? 106 : 209; |
|||
}, |
|||
typeChange(index) { |
|||
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info'; |
|||
}, |
|||
sizeChange(index) { |
|||
this.size = index == 0 ? 'default' : 'mini'; |
|||
}, |
|||
isDotChange(index) { |
|||
this.isDot = index == 0 ? true : false; |
|||
}, |
|||
offsetChange(index) { |
|||
this.offset = index == 0 ? [20, 20] : index == 1 ? [-8, -8] : [-20, -20]; |
|||
}, |
|||
isCenterChange(index) { |
|||
this.isCenter = index == 0 ? true : false; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-badge-wrap { |
|||
width: 60px; |
|||
height: 60px; |
|||
border-radius: 6px; |
|||
background-color: $u-light-color; |
|||
position: relative; |
|||
margin: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-button @click="btnClick" data-name="3333" :loading="loading" :plain="plain" :shape="shape" :size="size" :ripple="ripple" :hairLine="hairLine" :type="type">山川异域，风月同天</u-button> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">主题选择</view> |
|||
<u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="typeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">尺寸大小</view> |
|||
<u-subsection :list="['默认', '中等', '迷你']" @change="sizeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">形状</view> |
|||
<u-subsection :list="['直角', '圆角']" @change="shapeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">镂空</view> |
|||
<u-subsection :current="1" :list="['是', '否']" @change="plainChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">水波纹(感觉哪里有问题？点击顶部的按钮试试)</view> |
|||
<u-subsection :current="1" :list="['是', '否']" @change="rippleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">细边框</view> |
|||
<u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">加载中</view> |
|||
<u-subsection :current="1" :list="['是', '否']" @change="loadingChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
hairLine: true, |
|||
type: 'default', |
|||
size: 'default', |
|||
shape: 'square', |
|||
plain: false, |
|||
ripple: false, |
|||
loading: false, |
|||
} |
|||
}, |
|||
methods: { |
|||
typeChange(e) { |
|||
switch (e) { |
|||
case 0: |
|||
this.type = 'default'; |
|||
break; |
|||
case 1: |
|||
this.type = 'primary'; |
|||
break; |
|||
case 2: |
|||
this.type = 'error'; |
|||
break; |
|||
case 3: |
|||
this.type = 'warning'; |
|||
break; |
|||
case 4: |
|||
this.type = 'success'; |
|||
break;s |
|||
} |
|||
}, |
|||
sizeChange(e) { |
|||
switch (e) { |
|||
case 0: |
|||
this.size = 'default'; |
|||
break; |
|||
case 1: |
|||
this.size = 'medium'; |
|||
break; |
|||
case 2: |
|||
this.size = 'mini'; |
|||
break; |
|||
} |
|||
}, |
|||
shapeChange(e) { |
|||
this.shape = e == 0 ? 'square' : 'circle'; |
|||
}, |
|||
plainChange(e) { |
|||
this.plain = e == 0 ? true : false; |
|||
}, |
|||
rippleChange(e) { |
|||
this.ripple = e == 0 ? true : false; |
|||
}, |
|||
hairLineChange(e) { |
|||
this.hairLine = e == 0 ? true : false; |
|||
}, |
|||
loadingChange(index) { |
|||
this.loading = index == 0 ? true : false; |
|||
}, |
|||
btnClick() { |
|||
this.$u.toast('按钮被点击') |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.box { |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.box /deep/ button { |
|||
margin-bottom: 40rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap" style="padding-left:0;padding-right:0;margin-left: -40rpx;margin-right: -40rpx;"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-cell-group title="读万卷书"> |
|||
<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i ndex="index" @click="click" :hover-class="hoverClass" |
|||
:arrow="arrow" :title="title" :icon="icon"> |
|||
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge> |
|||
<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch> |
|||
</u-cell-item> |
|||
<u-cell-item :border-bottom="false" value="" title="铁马冰河入梦来" value="行万里路" :arrow="false"> |
|||
<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon> |
|||
<u-icon slot="right-icon" size="34" name="calendar"></u-icon> |
|||
<u-field slot="value"></u-field> |
|||
</u-cell-item> |
|||
</u-cell-group> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">更换图标</view> |
|||
<u-subsection :list="['是', '否']" @change="iconChange"></u-subsection> |
|||
</view> |
|||
<!-- 小程序无法动态切换slot --> |
|||
<!-- #ifndef MP --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义右侧内容</view> |
|||
<u-subsection :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">描述信息</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="lableChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">更换标题</view> |
|||
<u-subsection :list="['是', '否']" @change="titleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">右侧箭头</view> |
|||
<u-subsection :list="['是', '否']" @change="arrowChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
icon: 'setting', |
|||
arrow: true, |
|||
label: '', |
|||
title: '青山一道同云雨', |
|||
rightSlot: true, |
|||
checked: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
hoverClass() { |
|||
// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上 |
|||
return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover'; |
|||
} |
|||
}, |
|||
methods: { |
|||
iconChange(index) { |
|||
this.icon = index == 0 ? 'setting' : 'file-text' |
|||
}, |
|||
arrowChange(index) { |
|||
this.arrow = index == 0 ? true : false |
|||
}, |
|||
lableChange(index) { |
|||
this.label = index == 0 ? '岂曰无衣，与子同裳' : '' |
|||
}, |
|||
titleChange(index) { |
|||
this.title = index == 0 ? '青山一道同云雨' : '明月何曾是两乡' |
|||
}, |
|||
rightSlotChange(index) { |
|||
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge' |
|||
if (index == 0) this.arrow = true; |
|||
else this.arrow = false; |
|||
}, |
|||
click(index) { |
|||
// console.log(index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.gab { |
|||
background-color: rgb(245, 245, 245); |
|||
height: 20rpx; |
|||
} |
|||
|
|||
.wrap { |
|||
height: 100vh; |
|||
background-color: rgb(241, 241, 241); |
|||
} |
|||
|
|||
.box { |
|||
padding: 30rpx 00rpx; |
|||
font-size: 28rpx; |
|||
color: $u-type-info; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="item"> |
|||
<u-circle-progress type="warning" :percent="percent"> |
|||
<view class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<text class='u-progress-info'>查找中</text> |
|||
</view> |
|||
</u-circle-progress> |
|||
<u-circle-progress type="warning" :width="150" :percent="percent"> |
|||
<view class="u-progress-content"> |
|||
<view class="u-progress-dot"></view> |
|||
<text class='u-progress-info'>查找中</text> |
|||
</view> |
|||
</u-circle-progress> |
|||
</view> |
|||
<view class="item"> |
|||
<u-line-progress></u-line-progress> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
percent: 33 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
setTimeout(() => { |
|||
this.percent = 50; |
|||
}, 1500); |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.u-progress-content { |
|||
position: absolute; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.u-progress-dot { |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
border-radius: 50%; |
|||
background-color: #fb9126; |
|||
} |
|||
|
|||
.u-progress-info { |
|||
font-size: 28rpx; |
|||
padding-left: 16rpx; |
|||
letter-spacing: 2rpx |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap" style="background-color: #ffffff;"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-collapse v-if="key" :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change"> |
|||
<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index"> |
|||
{{item.body}} |
|||
</u-collapse-item> |
|||
</u-collapse> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">手风琴模式</view> |
|||
<u-subsection :list="['是', '否']" @change="accordionChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">右侧箭头</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="arrowChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
itemList: [{ |
|||
head: "赏识在于角度的转换", |
|||
body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来：闪光的道德、妙异的智慧、优美的人情…… 赏识不是单向的施舍，是智慧与智慧的主动碰撞", |
|||
show: false, |
|||
}, { |
|||
head: "生活中不是缺少美，而是缺少发现美的眼睛", |
|||
body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美", |
|||
show: false, |
|||
}, { |
|||
head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧", |
|||
body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美，用它绝对雕不出好的艺术品，总之它被批评为一块不受人赏识的普通石头", |
|||
show: false, |
|||
}, { |
|||
head: "点燃心中的火焰，找回了自信和人生的价值", |
|||
body: "他随手翻了几页，竟被一篇题名为《童年》的小说所吸引，作者是一个初出茅庐的无名小辈，但屠格涅夫却十分欣赏，钟爱有加", |
|||
show: false, |
|||
}, { |
|||
head: "因为赏识，那块被人不耻的石头变成了雕塑", |
|||
body: "这个材料反应的就是赏识的问题，赏识是一种理解和信任，包含了肯定与欣赏，也是一种激励和引导，可以使人悔过自新，扬长避短，更健康地成长和进步", |
|||
show: false, |
|||
}], |
|||
accordion: true, |
|||
arrow: true, |
|||
hoverClass: 'hover2', |
|||
itemStyle: {}, |
|||
key: true |
|||
} |
|||
}, |
|||
methods: { |
|||
accordionChange(index) { |
|||
this.accordion = index == 0 ? true : false; |
|||
}, |
|||
arrowChange(index) { |
|||
this.arrow = index == 0 ? true : false; |
|||
this.changeStatus(); |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.itemStyle = { |
|||
border: '1px solid rgb(230, 230, 230)', |
|||
marginTop: '20px', |
|||
padding: '0 8rpx' |
|||
} |
|||
} else { |
|||
this.itemStyle = {} |
|||
} |
|||
this.changeStatus(); |
|||
}, |
|||
change(index) { |
|||
let str = ''; |
|||
if(Array.isArray(index)) { |
|||
let arr = index.map(val => { |
|||
return Number(val) + 1; |
|||
}) |
|||
index = arr.join(','); |
|||
} else { |
|||
index = Number(index) + 1; |
|||
} |
|||
this.$refs.uToast.show({ |
|||
title: `点击了第${index}个`, |
|||
type: 'warning' |
|||
}) |
|||
}, |
|||
itemChange(e) { |
|||
console.log(e); |
|||
}, |
|||
changeStatus() { |
|||
this.key = false; |
|||
this.$nextTick(function(){ |
|||
this.key = true; |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.hover1 { |
|||
background-color: red; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
// padding: 24rpx; |
|||
} |
|||
|
|||
.item { |
|||
//padding: 0 24rpx; |
|||
} |
|||
|
|||
.head { |
|||
font-size: 30rpx; |
|||
color: $u-main-color; |
|||
line-height: 1; |
|||
padding: 24rpx 24rpx; |
|||
} |
|||
|
|||
.body { |
|||
font-size: 28rpx; |
|||
color: $u-tips-color; |
|||
line-height: 1.4; |
|||
padding: 24rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,364 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
主色调 |
|||
</view> |
|||
<view class="color-box"> |
|||
<view class="color-item" style="background: #2979ff;"> |
|||
<view class="color-title"> |
|||
Primary |
|||
</view> |
|||
<view class="color-value"> |
|||
#2979ff |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #2b85e4;"> |
|||
<view class="color-title"> |
|||
Dark |
|||
</view> |
|||
<view class="color-value"> |
|||
#2b85e4 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #a0cfff;"> |
|||
<view class="color-title"> |
|||
Disabled |
|||
</view> |
|||
<view class="color-value"> |
|||
#a0cfff |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #ecf5ff;color: #909399;"> |
|||
<view class="color-title"> |
|||
Light |
|||
</view> |
|||
<view class="color-value"> |
|||
#ecf5ff |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
Error |
|||
</view> |
|||
<view class="color-box"> |
|||
<view class="color-item" style="background: #fa3534;"> |
|||
<view class="color-title"> |
|||
Error |
|||
</view> |
|||
<view class="color-value"> |
|||
#fa3534 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #dd6161;"> |
|||
<view class="color-title"> |
|||
Dark |
|||
</view> |
|||
<view class="color-value"> |
|||
#dd6161 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #fab6b6;"> |
|||
<view class="color-title"> |
|||
Disabled |
|||
</view> |
|||
<view class="color-value"> |
|||
#fab6b6 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #fef0f0;color: #909399;"> |
|||
<view class="color-title"> |
|||
Light |
|||
</view> |
|||
<view class="color-value"> |
|||
#fef0f0 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
Warning |
|||
</view> |
|||
<view class="color-box"> |
|||
<view class="color-item" style="background: #ff9900;"> |
|||
<view class="color-title"> |
|||
Warning |
|||
</view> |
|||
<view class="color-value"> |
|||
#ff9900 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #f29100;"> |
|||
<view class="color-title"> |
|||
Dark |
|||
</view> |
|||
<view class="color-value"> |
|||
#f29100 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #fcbd71;"> |
|||
<view class="color-title"> |
|||
Disabled |
|||
</view> |
|||
<view class="color-value"> |
|||
#fcbd71 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #fdf6ec;color: #909399;"> |
|||
<view class="color-title"> |
|||
Light |
|||
</view> |
|||
<view class="color-value"> |
|||
#fdf6ec |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
Info |
|||
</view> |
|||
<view class="color-box"> |
|||
<view class="color-item" style="background: #909399;"> |
|||
<view class="color-title"> |
|||
Info |
|||
</view> |
|||
<view class="color-value"> |
|||
#909399 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #82848a;"> |
|||
<view class="color-title"> |
|||
Dark |
|||
</view> |
|||
<view class="color-value"> |
|||
#82848a |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #c8c9cc;"> |
|||
<view class="color-title"> |
|||
Disabled |
|||
</view> |
|||
<view class="color-value"> |
|||
#c8c9cc |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #f4f4f5;color: #909399;"> |
|||
<view class="color-title"> |
|||
Light |
|||
</view> |
|||
<view class="color-value"> |
|||
#f4f4f5 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
Success |
|||
</view> |
|||
<view class="color-box"> |
|||
<view class="color-item" style="background: #19be6b;"> |
|||
<view class="color-title"> |
|||
Success |
|||
</view> |
|||
<view class="color-value"> |
|||
#19be6b |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #18b566;"> |
|||
<view class="color-title"> |
|||
Dark |
|||
</view> |
|||
<view class="color-value"> |
|||
#18b566 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #71d5a1;"> |
|||
<view class="color-title"> |
|||
Disabled |
|||
</view> |
|||
<view class="color-value"> |
|||
#71d5a1 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #dbf1e1;color: #909399;"> |
|||
<view class="color-title"> |
|||
Light |
|||
</view> |
|||
<view class="color-value"> |
|||
#dbf1e1 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
文字颜色 |
|||
</view> |
|||
<view class="color-box"> |
|||
<view class="color-item" style="background: #303133;"> |
|||
<view class="color-title"> |
|||
主要文字 |
|||
</view> |
|||
<view class="color-value"> |
|||
#303133 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #606266;"> |
|||
<view class="color-title"> |
|||
常规文字 |
|||
</view> |
|||
<view class="color-value"> |
|||
#606266 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #909399;"> |
|||
<view class="color-title"> |
|||
次要文字 |
|||
</view> |
|||
<view class="color-value"> |
|||
#909399 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #c0c4cc;"> |
|||
<view class="color-title"> |
|||
占位文字 |
|||
</view> |
|||
<view class="color-value"> |
|||
#c0c4cc |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
边框颜色 |
|||
</view> |
|||
<view class="color-box"> |
|||
<view class="color-item" style="background: #dcdfe6;color: #909399;"> |
|||
<view class="color-title"> |
|||
一级边框 |
|||
</view> |
|||
<view class="color-value"> |
|||
#dcdfe6 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #e4e7ed;color: #909399;"> |
|||
<view class="color-title"> |
|||
二级边框 |
|||
</view> |
|||
<view class="color-value"> |
|||
#e4e7ed |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #ebeef5;color: #909399;"> |
|||
<view class="color-title"> |
|||
三级边框 |
|||
</view> |
|||
<view class="color-value"> |
|||
#ebeef5 |
|||
</view> |
|||
</view> |
|||
<view class="color-item" style="background: #f2f6fc;color: #909399;"> |
|||
<view class="color-title"> |
|||
四级边框 |
|||
</view> |
|||
<view class="color-value"> |
|||
#f2f6fc |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="title"> |
|||
背景颜色 |
|||
</view> |
|||
<view class="color-box"> |
|||
<view class="color-item" style="background: #f3f4f6;color: #909399;"> |
|||
<view class="color-title"> |
|||
背景颜色 |
|||
</view> |
|||
<view class="color-value"> |
|||
#f3f4f6 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
onLoad() { |
|||
getApp().globalData.username = 'test12'; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 18rpx; |
|||
} |
|||
|
|||
.item { |
|||
margin: 30rpx 0; |
|||
margin-top: 44rpx; |
|||
|
|||
&:first-child { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 30rpx; |
|||
position: relative; |
|||
line-height: 1; |
|||
padding-left: 22rpx; |
|||
|
|||
&:before { |
|||
width: 4px; |
|||
height: 15px; |
|||
border-radius: 100rpx; |
|||
background-color: $u-content-color; |
|||
content: ''; |
|||
position: absolute; |
|||
left: 6rpx; |
|||
top: -1px; |
|||
} |
|||
} |
|||
|
|||
.color-box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
color: #fff; |
|||
text-align: center; |
|||
margin-top: 20rpx; |
|||
|
|||
.color-item { |
|||
display: flex; |
|||
flex: 1; |
|||
margin: 0 8rpx; |
|||
flex-direction: column; |
|||
border-radius: 6rpx; |
|||
padding: 12rpx 0; |
|||
} |
|||
|
|||
|
|||
.color-title { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.color-value { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-count-down class="count-down-demo" :timestamp="timestamp" :separator="separator" :showBorder="showBorder" |
|||
:separator-color="separatorColor" :showDays="showDays" :fontSize="fontSize" @change="change" ref="uCountDown" |
|||
:border-color="borderColor" :color="color" @end="end" bg-color="rgb(250, 250, 250)"></u-count-down> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">调整时间</view> |
|||
<u-subsection :list="['60', '86400', '983272']" @change="timestampChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">分隔符</view> |
|||
<u-subsection :list="['英文冒号', '中文名称']" @change="separatorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示天</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="showDaysChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">字体大小</view> |
|||
<u-subsection current="1" :list="['26', '30', '34']" @change="fontSizeChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
timestamp: 60, |
|||
separator: 'colon', |
|||
showBorder: false, |
|||
borderColor: '#303133', |
|||
color: '#303133', |
|||
showDays: false, |
|||
fontSize: 30, |
|||
separatorColor: '#303133', |
|||
}; |
|||
}, |
|||
methods: { |
|||
timestampChange(index) { |
|||
this.timestamp = index == 0 ? 60 : index == 1 ? 86400 : 983272; |
|||
}, |
|||
separatorChange(index) { |
|||
this.separator = index == 0 ? 'colon' : 'zh'; |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.showBorder = true; |
|||
this.borderColor = this.$u.color['primary']; |
|||
this.color = this.$u.color['primary']; |
|||
this.separatorColor = this.$u.color['primary']; |
|||
} else { |
|||
this.showBorder = false; |
|||
this.borderColor = '#303133'; |
|||
this.color = '#303133'; |
|||
this.separatorColor = '#303133'; |
|||
} |
|||
}, |
|||
showDaysChange(index) { |
|||
this.showDays = index == 0 ? true : false; |
|||
}, |
|||
fontSizeChange(index) { |
|||
this.fontSize = index == 0 ? 26 : index == 1 ? 30 : 34; |
|||
}, |
|||
end() { |
|||
this.$refs.uToast.show({ |
|||
title: '倒计时结束', |
|||
type: 'warning' |
|||
}) |
|||
}, |
|||
change(timestamp) { |
|||
// console.log(timestamp); |
|||
}, |
|||
getSeconds() { |
|||
// console.log(this.$refs.uCountDown.seconds); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.count-down-demo { |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<view class="u-no-demo-here">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view> |
|||
<view class="count-to-demo"> |
|||
<u-count-to |
|||
class="count-to" |
|||
:useEasing="useEasing" |
|||
ref="uCountTo" |
|||
:autoplay="autoplay" |
|||
:startVal="startVal" |
|||
:endVal="endVal" |
|||
:duration="duration" |
|||
:decimals="decimals" |
|||
:bold="bold" |
|||
@end="end" |
|||
></u-count-to> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">目标值</view> |
|||
<u-subsection :list="[608, 5604, 45617]" @change="endValChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">滚动时间</view> |
|||
<u-subsection current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">显示小数</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">字体加粗</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="boldChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
startVal: 0, |
|||
endVal: 608, |
|||
separator: ',', |
|||
decimals: 0, |
|||
duration: 2000, |
|||
autoplay: false, |
|||
useEasing: true, |
|||
current: 3, |
|||
isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN |
|||
bold: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
endValChange(index) { |
|||
this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617; |
|||
this.reset(); |
|||
this.start(); |
|||
}, |
|||
durationChange(index) { |
|||
this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000; |
|||
}, |
|||
boldChange(index) { |
|||
this.bold = !!!index; |
|||
}, |
|||
decimalsChange(index) { |
|||
this.decimals = index == 0 ? 2 : 0; |
|||
}, |
|||
statusChange(index) { |
|||
this.current = index; |
|||
if (index == 0) { |
|||
this.start(); |
|||
} else if (index == 1) { |
|||
this.stop(); |
|||
} else if (index == 2) { |
|||
this.resume(); |
|||
} else { |
|||
this.reset(); |
|||
} |
|||
}, |
|||
end() { |
|||
this.current = 3; |
|||
this.$refs.uToast.show({ |
|||
type: 'warning', |
|||
title: '滚动结束' |
|||
}); |
|||
}, |
|||
start() { |
|||
this.current = 0; |
|||
this.isStop = true; |
|||
this.$refs.uCountTo.start(); |
|||
}, |
|||
stop() { |
|||
this.$refs.uCountTo.stop(); |
|||
}, |
|||
resume() { |
|||
if (!this.isStop) { |
|||
this.$refs.uToast.show({ |
|||
type: 'error', |
|||
title: '请开始并暂停后才能继续' |
|||
}); |
|||
this.$nextTick(() => { |
|||
this.current = 3; |
|||
}); |
|||
return; |
|||
} |
|||
this.$refs.uCountTo.resume(); |
|||
}, |
|||
reset() { |
|||
this.$refs.uCountTo.reset(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.count-to-demo { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<!-- |
|||
* @Desc: --- ---- |
|||
* @Date: 2020-04-22 12:29:21 |
|||
* @LastEditors: 王 |
|||
* @LastEditTime: 2020-04-22 18:33:28 |
|||
--> |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom">参数配置</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">背景颜色</view> |
|||
<u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="bgColorChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">高度</view> |
|||
<u-subsection :list="['30', '50', '70']" @change="heightChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">上下外边距</view> |
|||
<u-subsection :list="['30', '50', '70']" @change="marginChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
height: 30, |
|||
bgColor: this.$u.color.bgColor, |
|||
marginTop: 30, |
|||
marginBottom: 30 |
|||
}; |
|||
}, |
|||
methods: { |
|||
bgColorChange(index) { |
|||
let color = index == 0 ? 'default' : index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success'; |
|||
this.bgColor = color == 'default' ? this.$u.color['bgColor'] : this.$u.color[color]; |
|||
}, |
|||
heightChange(index) { |
|||
this.height = index == 0 ? 30 : index == 1 ? 50 : 70; |
|||
}, |
|||
marginChange(index) { |
|||
this.marginTop = ['30', '50', '70'][index]; |
|||
this.marginBottom = this.marginTop; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-grid :col="col" @click="click" v-if="!isSwiper" :border="border"> |
|||
<u-grid-item name="item1" :index="0" @click="itemClick"> |
|||
<u-badge count="9" :offset="[col == 3 ? 20 : 14, col == 3 ? 30 : 20]"></u-badge> |
|||
<u-icon name="photo" :size="46"></u-icon> |
|||
<view class="grid-text">图片</view> |
|||
</u-grid-item> |
|||
<u-grid-item :index="1"> |
|||
<u-icon name="lock" :size="46"></u-icon> |
|||
<view class="grid-text">锁头</view> |
|||
</u-grid-item> |
|||
<u-grid-item :index="2"> |
|||
<image src="https://cdn.uviewui.com/uview/grid/hot5.png" :style="{ |
|||
top: col == 3 ? '14rpx' : '8rpx', |
|||
right: col == 3 ? '40rpx' : '28rpx' |
|||
}" style="width: 34rpx;height: 34rpx;" class="badge-icon" mode="widthFix"></image> |
|||
<u-icon name="hourglass" :size="46"></u-icon> |
|||
<view class="grid-text">沙漏</view> |
|||
</u-grid-item> |
|||
<u-grid-item :index="3"> |
|||
<u-icon name="home" :size="46"></u-icon> |
|||
<view class="grid-text">首页</view> |
|||
</u-grid-item> |
|||
<u-grid-item :index="4"> |
|||
<u-icon name="star" :size="46"></u-icon> |
|||
<view class="grid-text">星星</view> |
|||
</u-grid-item> |
|||
<u-grid-item :index="5"> |
|||
<u-icon name="volume-up" :size="46"></u-icon> |
|||
<view class="grid-text">音量</view> |
|||
</u-grid-item> |
|||
<u-grid-item :index="6"> |
|||
<image src="https://cdn.uviewui.com/uview/grid/hot6.png" style="width: 44rpx;height: 44rpx;top:0;right:0;" class="badge-icon"></image> |
|||
<u-icon name="trash" :size="46"></u-icon> |
|||
<view class="grid-text">回收站</view> |
|||
</u-grid-item> |
|||
<u-grid-item :index="7"> |
|||
<u-icon name="rewind-right" :size="46"></u-icon> |
|||
<view class="grid-text">快进</view> |
|||
</u-grid-item> |
|||
<u-grid-item :index="8"> |
|||
<u-icon name="shopping-cart" :size="46"></u-icon> |
|||
<view class="grid-text">购物车</view> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
<swiper class="swiper" v-else @change="change"> |
|||
<swiper-item> |
|||
<u-grid :border="border" :col="col" @click="click" hover-class="hover-class"> |
|||
<u-grid-item v-for="(item, index) in list" :index="index" :key="index"> |
|||
<u-icon :name="item" :size="46"></u-icon> |
|||
<text class="grid-text">{{ '宫格' + (index + 1) }}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<u-grid :border="border" :col="col" @click="click"> |
|||
<u-grid-item v-for="(item, index) in list" :index="index + 9" :key="index"> |
|||
<u-icon :name="item" :size="46"></u-icon> |
|||
<text class="grid-text">{{ '宫格' + (index + 1) }}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<u-grid :border="border" :col="col" @click="click"> |
|||
<u-grid-item v-for="(item, index) in list" :index="index + 18" :key="index"> |
|||
<u-icon :name="item" :size="46"></u-icon> |
|||
<text class="grid-text">{{ '宫格' + (index + 1) }}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</swiper-item> |
|||
</swiper> |
|||
<view class="indicator-dots" v-if="isSwiper"> |
|||
<view class="indicator-dots-item" :class="[current == 0 ? 'indicator-dots-active' : '']"> |
|||
</view> |
|||
<view class="indicator-dots-item" :class="[current == 1 ? 'indicator-dots-active' : '']"> |
|||
</view> |
|||
<view class="indicator-dots-item" :class="[current == 2 ? 'indicator-dots-active' : '']"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否显示边框</view> |
|||
<u-subsection :list="['是', '否']" @change="borderChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否可滑动</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="isSwiperChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">修改列数</view> |
|||
<u-subsection :list="['3', '4']" @change="colChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'], |
|||
isSwiper: false, |
|||
current: 0, |
|||
border: true, |
|||
col: 3 |
|||
}; |
|||
}, |
|||
methods: { |
|||
isSwiperChange(index) { |
|||
this.isSwiper = index == 0 ? true : false; |
|||
}, |
|||
borderChange(index) { |
|||
this.border = index == 0 ? true : false; |
|||
}, |
|||
colChange(index) { |
|||
this.col = index == 0 ? 3 : 4; |
|||
}, |
|||
click(index) { |
|||
this.$refs.uToast.show({ |
|||
title: `点击了第${index + 1}宫格`, |
|||
type: 'warning' |
|||
}) |
|||
}, |
|||
change(e) { |
|||
this.current = e.detail.current; |
|||
}, |
|||
// 针对单个grid-item的事件 |
|||
itemClick(index) { |
|||
// console.log(index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.grid-text { |
|||
font-size: 28rpx; |
|||
margin-top: 4rpx; |
|||
color: $u-type-info; |
|||
} |
|||
|
|||
.badge-icon { |
|||
position: absolute; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
.swiper { |
|||
height: 480rpx; |
|||
} |
|||
|
|||
.indicator-dots { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.indicator-dots-item { |
|||
background-color: $u-tips-color; |
|||
height: 6px; |
|||
width: 6px; |
|||
border-radius: 10px; |
|||
margin: 0 3px; |
|||
} |
|||
|
|||
.indicator-dots-active { |
|||
background-color: $u-type-primary; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,145 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-row :justify="justify" @click="rowClick"> |
|||
<u-col :span="span" :offset="offset" @click="click" stop> |
|||
<view class="demo-layout bg-purple-dark"> |
|||
|
|||
</view> |
|||
</u-col> |
|||
<u-col :span="span" :offset="offset"> |
|||
<view class="demo-layout bg-purple-dark"> |
|||
|
|||
</view> |
|||
</u-col> |
|||
<u-col :span="span" :offset="offset"> |
|||
<view class="demo-layout bg-purple-dark"> |
|||
|
|||
</view> |
|||
</u-col> |
|||
</u-row> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">每个栅格占用栏数(演示共3个栅格)</view> |
|||
<u-subsection :current="2" :list="[1, 2, 3, 4]" @change="spanChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">分栏偏移</view> |
|||
<u-subsection :list="[0, 1, 2, 3]" @change="offsetChange"></u-subsection> |
|||
</view> |
|||
<!-- #ifndef MP --> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">水平排列方式(微信小程序无效)</view> |
|||
<u-subsection :list="['start', 'end', 'around', 'between']" @change="justifyChange"></u-subsection> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
span: 3, |
|||
offset: 0, |
|||
justify: 'start' |
|||
} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
console.log('col click'); |
|||
}, |
|||
rowClick() { |
|||
console.log('row click'); |
|||
}, |
|||
spanChange(e) { |
|||
switch (e) { |
|||
case 0: |
|||
this.span = 1; |
|||
break; |
|||
case 1: |
|||
this.span = 2; |
|||
break; |
|||
case 2: |
|||
this.span = 3; |
|||
break; |
|||
case 3: |
|||
this.span = 4; |
|||
break; |
|||
case 4: |
|||
this.span = 5; |
|||
break; |
|||
} |
|||
}, |
|||
offsetChange(e) { |
|||
switch (e) { |
|||
case 0: |
|||
this.offset = 0; |
|||
break; |
|||
case 1: |
|||
this.offset = 1; |
|||
break; |
|||
case 2: |
|||
this.offset = 2; |
|||
break; |
|||
case 3: |
|||
this.offset = 3; |
|||
break; |
|||
} |
|||
}, |
|||
justifyChange(e) { |
|||
switch (e) { |
|||
case 0: |
|||
this.justify = 'start'; |
|||
break; |
|||
case 1: |
|||
this.justify = 'end'; |
|||
break; |
|||
case 2: |
|||
this.justify = 'around'; |
|||
break; |
|||
case 3: |
|||
this.justify = 'between'; |
|||
break; |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.demo-layout { |
|||
height: 70rpx; |
|||
border-radius: 8rpx; |
|||
margin: 20rpx 0; |
|||
} |
|||
|
|||
.bg-purple { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
.bg-purple-light { |
|||
background: #e5e9f2; |
|||
} |
|||
|
|||
.bg-purple-dark { |
|||
background: #99a9bf; |
|||
} |
|||
|
|||
// H5中，电脑端文档演示时，可能会导致演示块挤出边界，特别处理。 |
|||
// 真实使用环境不会产生此问题 |
|||
/* #ifdef H5 */ |
|||
.u-demo-area /deep/ .u-row { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
/* #endif */ |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-link :color="color" :font-size="fontSize" :under-line="underLine" :href="href">点此链接，跳转uView官网</u-link> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">下划线</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="underLineChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
href: 'https://www.uviewui.com', |
|||
underLine: true, |
|||
fontSize: 28, |
|||
color: '#2979ff' |
|||
} |
|||
}, |
|||
methods: { |
|||
underLineChange(index) { |
|||
this.underLine = index == 0 ? true : false; |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.color = this.$u.color['tipsColor']; |
|||
this.fontSize = 34; |
|||
} else { |
|||
this.color = this.$u.color['primary']; |
|||
this.fontSize = 28; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast" /> |
|||
<u-loadmore :status="status" :loadText="loadText" |
|||
:icon-type="iconType" :is-dot="isDot" @loadmore="loadmore"/> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式选择</view> |
|||
<u-subsection :current="current" :list="['加载前', '加载中', '加载后', '没有更多']" @change="statusChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义提示语</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="loadTextChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">加载中图标样式</view> |
|||
<u-subsection :list="['circle', 'flower']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">没有更多时用点替代</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="isDotChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
status: 'loadmore', |
|||
iconType: 'circle', |
|||
isDot: false, |
|||
loadText: { |
|||
loadmore: '点击或上拉加载更多', |
|||
loading: '正在加载...', |
|||
nomore: '没有更多了' |
|||
}, |
|||
current: 0 |
|||
} |
|||
}, |
|||
onReachBottom() { |
|||
// 在此请求下一页 |
|||
}, |
|||
methods: { |
|||
statusChange(index) { |
|||
this.current = index; |
|||
this.status = index == 0 ? 'loadmore' : index == 1 ? 'loading' : index == 2 ? 'loadmore' : 'nomore'; |
|||
}, |
|||
loadTextChange(index) { |
|||
if(index == 0) { |
|||
this.loadText = { |
|||
loadmore: '用力往上拉', |
|||
loading: '正在加载，请喝杯茶...', |
|||
nomore: '我也是有底线的' |
|||
} |
|||
} else { |
|||
this.loadText = { |
|||
loadmore: '点击或上拉加载更多', |
|||
loading: '正在加载...', |
|||
nomore: '没有更多了' |
|||
} |
|||
} |
|||
}, |
|||
styleChange(index) { |
|||
this.current = 1; |
|||
this.statusChange(1); |
|||
this.iconType = index == 0 ? 'circle' : 'flower'; |
|||
}, |
|||
isDotChange(index) { |
|||
this.current = 3; |
|||
this.statusChange(3); |
|||
this.isDot = index == 0 ? true : false; |
|||
}, |
|||
// 点击组件，触发加载更多事件(status为'loadmore'状态下才触发) |
|||
loadmore() { |
|||
this.$refs.uToast.show({ |
|||
title: '点击触发加载更多', |
|||
type: 'success' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<view class="u-no-demo-here"> |
|||
请点击弹出遮罩查看效果 |
|||
</view> |
|||
<u-mask :show="show" @click="show = false" :zoom="zoom" :duration="duration"> |
|||
<view class="warp" v-if="content"> |
|||
<view class="rect" @tap.stop></view> |
|||
</view> |
|||
</u-mask> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">缩放效果</view> |
|||
<u-subsection :list="['是', '否']" @change="zoomChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">内容填充</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">动画时长(ms)</view> |
|||
<u-subsection current="1" :list="['100', '300', '800']" @change="durationChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
zoom: true, |
|||
duration: 300, |
|||
content: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
current() { |
|||
return this.show ? 0 : 1; |
|||
} |
|||
}, |
|||
methods: { |
|||
showChange(index) { |
|||
this.show = index == 0 ? true : false; |
|||
}, |
|||
zoomChange(index) { |
|||
this.zoom = index == 0 ? true : false; |
|||
this.show = true; |
|||
}, |
|||
durationChange(index) { |
|||
this.duration = index == 0 ? 100 : index == 1 ? 300 : 800; |
|||
this.show = true; |
|||
}, |
|||
contentChange(index) { |
|||
this.content = index == 0 ? true : false; |
|||
this.show = true; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.warp { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 100%; |
|||
} |
|||
|
|||
.rect { |
|||
width: 120px; |
|||
height: 120px; |
|||
background-color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-message-input :mode="mode" :maxlength="maxlength" :value="value" |
|||
:breathe="breathe" :bold="bold" @finish="finish" :dot-fill="dotFill"></u-message-input> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">模式选择</view> |
|||
<u-subsection :list="['方框', '下划线', '中划线']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">输入长度</view> |
|||
<u-subsection :list="[4, 5, 6]" @change="maxLengthChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<view class="u-item-title">初始值(为满足演示需要，微信小程序切换会有抖动，非性能问题)</view> |
|||
<!-- #endif --> |
|||
<!-- #ifndef MP-WEIXIN --> |
|||
<view class="u-item-title">初始值</view> |
|||
<!-- #endif --> |
|||
<u-subsection :list="['空', '23', '678']" @change="valueChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">呼吸灯效果</view> |
|||
<u-subsection :list="['是', '否']" @change="breatheChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否加粗</view> |
|||
<u-subsection :list="['是', '否']" @change="boldChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">点替代输入值</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="dotFillChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mode: 'box', |
|||
maxlength: 4, |
|||
value: '', |
|||
bold: true, |
|||
breathe: true, |
|||
dotFill: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
modeChange(index) { |
|||
this.mode = index == 0 ? 'box' : index == 1 ? 'bottomLine' : 'middleLine'; |
|||
}, |
|||
maxLengthChange(index) { |
|||
this.maxlength = index == 0 ? 4 : index == 1 ? 5 : 6; |
|||
}, |
|||
valueChange(index) { |
|||
this.value = index == 0 ? '' : index == 1 ? '23' : '678'; |
|||
}, |
|||
breatheChange(index) { |
|||
this.breathe = index == 0 ? true : false; |
|||
}, |
|||
boldChange(index) { |
|||
this.bold = index == 0 ? true : false; |
|||
}, |
|||
dotFillChange(index) { |
|||
this.dotFill = index == 0 ? true : false; |
|||
}, |
|||
finish(value) { |
|||
this.$refs.uToast.show({ |
|||
title: '输入完成，值为：' + value, |
|||
type: 'success' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-number-box v-model="value" :bg-color="bgColor" :color="color" :min="0" |
|||
:step="step" :disabled="disabled" @change="change" @focus="focus"></u-number-box> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">初始值</view> |
|||
<u-subsection :list="[1, 5, 18]" @change="valueChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">自定义样式</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">是否禁用</view> |
|||
<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">步进值</view> |
|||
<u-subsection :list="[1, 3, 5, 8]" @change="stepChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value: 1, |
|||
bgColor: "#F2F3F5", |
|||
color: '#323233', |
|||
disabled: false, |
|||
step: 1, |
|||
|
|||
}; |
|||
}, |
|||
methods: { |
|||
valueChange(index) { |
|||
this.value = index == 0 ? 1 : index == 1 ? 5 : 18; |
|||
}, |
|||
styleChange(index) { |
|||
if(index == 0) { |
|||
this.bgColor = '#ff6d00'; |
|||
this.color = '#fff'; |
|||
} else { |
|||
this.bgColor = "#F2F3F5"; |
|||
this.color = '#323233'; |
|||
} |
|||
}, |
|||
disabledChange(index) { |
|||
this.disabled = index == 0 ? true : false; |
|||
}, |
|||
stepChange(index) { |
|||
this.step = index == 0 ? 1 : index == 1 ? 3 : index == 2 ? 5 : 8; |
|||
}, |
|||
change(e) { |
|||
//console.log(e.value); |
|||
}, |
|||
focus() { |
|||
console.log('focus'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.u-demo {} |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<view class="u-demo"> |
|||
<view class="u-demo-wrap"> |
|||
<view class="u-demo-title">演示效果</view> |
|||
<view class="u-demo-area"> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-button @click="btnClick">唤起弹窗</u-button> |
|||
<u-popup border-radius="10" v-model="show" |
|||
@close="close" @open="open" :mode="mode" |
|||
length="50%" :mask="mask" |
|||
:closeable="closeable" |
|||
:close-icon-pos="closeIconPos" |
|||
> |
|||
<view v-if="mode == 'center'" style="height: 400rpx"> |
|||
<view class="close-btn"> |
|||
<u-button @click="show = false;" size="medium">关闭弹窗</u-button> |
|||
</view> |
|||
</view> |
|||
<view class="close-btn" v-if="mode != 'center'"> |
|||
<u-button size="medium" @click="show = false;">关闭弹窗</u-button> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
</view> |
|||
<view class="u-config-wrap"> |
|||
<view class="u-config-title u-border-bottom"> |
|||
参数配置 |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">状态</view> |
|||
<u-subsection :current="show == false ? 1 : 0" :list="['打开', '关闭']" @change="showChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">弹出方向</view> |
|||
<u-subsection :current="2" :list="['上', '下', '左', '右', '中']" @change="modeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">关闭按钮</view> |
|||
<u-subsection :list="['显示', '隐藏']" @change="closeChange"></u-subsection> |
|||
</view> |
|||
<view class="u-config-item"> |
|||
<view class="u-item-title">关闭按钮位置</view> |
|||
<u-subsection :current="1" :list="['左上角', '右上角', '左下角', '右下角']" @change="closePosChange"></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
mode: 'left', |
|||
mask: true, // 是否显示遮罩 |
|||
closeable: true, |
|||
closeIconPos: 'top-right' |
|||
} |
|||
}, |
|||
watch: { |
|||
show(n) { |
|||
// console.log(n); |
|||
} |
|||
}, |
|||
methods: { |
|||
modeChange(index) { |
|||
this.mode = index == 0 ? 'top' : index == 1 ? 'bottom' : index == 2 ? 'left' : index == 3 ? 'right' : 'center'; |
|||
this.show = true; |
|||
}, |
|||
showChange(index) { |
|||
this.show = index == 0 ? true : false; |
|||
}, |
|||
closeChange(index) { |
|||
this.closeable = !index; |
|||
}, |
|||
closePosChange(index) { |
|||
this.closeIconPos = ['top-left', 'top-right', 'bottom-left', 'bottom-right'][index]; |
|||
}, |
|||
close() { |
|||
// console.log('close'); |
|||
}, |
|||
open() { |
|||
// console.log('open'); |
|||
}, |
|||
btnClick() { |
|||
this.show = true; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.close-btn { |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue