first commit
This commit is contained in:
commit
2a49a6ce4f
|
|
@ -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"
|
||||||
|
},
|
||||||
|
"mp-weixin" :
|
||||||
|
{
|
||||||
|
"launchtype" : "local"
|
||||||
|
},
|
||||||
|
"type" : "uniCloud"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
12
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
12
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
{
|
||||||
|
"id": "uni-easyinput",
|
||||||
|
"displayName": "uni-easyinput 增强输入框",
|
||||||
|
"version": "1.0.2",
|
||||||
|
"description": "Easyinput 组件是对原生input组件的增强",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"input",
|
||||||
|
"uni-easyinput",
|
||||||
|
"输入框"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-icons"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Rate 评分
|
||||||
|
> **组件名：uni-rate**
|
||||||
|
> 代码块： `uRate`
|
||||||
|
> 关联组件：`uni-icons`
|
||||||
|
|
||||||
|
|
||||||
|
评分组件，多用于购买商品后，对商品进行评价等场景
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-rate)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-breadcrumb-item">
|
||||||
|
<view :class="{
|
||||||
|
'uni-breadcrumb-item--slot': true,
|
||||||
|
'uni-breadcrumb-item--slot-link': to && currentPage !== to.path
|
||||||
|
}" @click="navTo">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
<i v-if="separatorClass" class="uni-breadcrumb-item--separator" :class="separatorClass" />
|
||||||
|
<text v-else class="uni-breadcrumb-item--separator">{{ separator }}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* BreadcrumbItem 面包屑导航子组件
|
||||||
|
* @property {String/Object} to 路由跳转页面路径/对象
|
||||||
|
* @property {Boolean} replace 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录(仅 h5 支持）
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
to: {
|
||||||
|
type: [String, Object],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
replace: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
inject: ['uniBreadcrumb'],
|
||||||
|
computed: {
|
||||||
|
separator() {
|
||||||
|
return this.uniBreadcrumb.separator
|
||||||
|
},
|
||||||
|
separatorClass() {
|
||||||
|
return this.uniBreadcrumb.separatorClass
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
this.currentPage = val.path
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
navTo() {
|
||||||
|
const {
|
||||||
|
to,
|
||||||
|
$router
|
||||||
|
} = this
|
||||||
|
if (this.currentPage === to.path) return
|
||||||
|
if (to && $router) {
|
||||||
|
this.replace ?
|
||||||
|
$router.replace(to) :
|
||||||
|
$router.push(to)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.uni-breadcrumb-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&--slot {
|
||||||
|
color: #666;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
&-link {
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #2979ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--separator {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child &--separator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:first-child &--slot {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
{
|
||||||
|
"id": "uni-tag",
|
||||||
|
"displayName": "uni-tag 标签",
|
||||||
|
"version": "2.1.0",
|
||||||
|
"description": "Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"",
|
||||||
|
"tag",
|
||||||
|
"标签"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import tools from '@/common/tools.js'
|
||||||
|
|
||||||
|
let token
|
||||||
|
//页面黑名单
|
||||||
|
const blackList = [
|
||||||
|
|
||||||
|
]
|
||||||
|
//未登录黑名单
|
||||||
|
const tokenList = [
|
||||||
|
'mallDet/mallDet',
|
||||||
|
'qushi/pushQuShi',
|
||||||
|
'quDet'
|
||||||
|
]
|
||||||
|
//回调处理
|
||||||
|
function isNext(back,login) {
|
||||||
|
console.log(back,login)
|
||||||
|
if (!back) {//如果是黑名单中的路径
|
||||||
|
tools.showtt('该功能暂未开放')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!login) {//如果是登录名单中的路径,并且没登陆
|
||||||
|
uni.showModal({
|
||||||
|
content: "请先授权登录再进行此操作",
|
||||||
|
title: "未登录",
|
||||||
|
success(res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
tools.goNext('/pages/login/login')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//拦截器
|
||||||
|
// e.url == pagesOne/order/orderlist
|
||||||
|
uni.addInterceptor('navigateTo', {
|
||||||
|
invoke(e) {
|
||||||
|
console.log(e)
|
||||||
|
token = uni.getStorageSync('token')
|
||||||
|
//黑名单判断
|
||||||
|
let back = blackList.every(val => val !== e.url)
|
||||||
|
//登录名单判断
|
||||||
|
let login = tokenList.every(val => e.url.indexOf(val) == -1 || token)
|
||||||
|
//白名单
|
||||||
|
// let back = !blackList.every(val => val !== e.url)
|
||||||
|
//拦截回调
|
||||||
|
isNext(back,login)
|
||||||
|
return login && back
|
||||||
|
},
|
||||||
|
success(e) {
|
||||||
|
console.log(e,'拦截器成功回调')
|
||||||
|
},
|
||||||
|
fail(e) {
|
||||||
|
console.log(e,'拦截器失败回调')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
|
||||||
|
<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
|
||||||
|
<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
|
||||||
|
<view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
|
||||||
|
<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
|
||||||
|
<view v-if="showSelect" style="margin-right: 20rpx;">
|
||||||
|
<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" />
|
||||||
|
</view>
|
||||||
|
<text class="uni-indexed-list__item-content">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'UniIndexedList',
|
||||||
|
emits:['itemClick'],
|
||||||
|
props: {
|
||||||
|
loaded: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
idx: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showSelect: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick(idx, index) {
|
||||||
|
this.$emit("itemClick", {
|
||||||
|
idx,
|
||||||
|
index
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-indexed-list__list {
|
||||||
|
background-color: $uni-bg-color;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-top-color: #DEDEDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item {
|
||||||
|
font-size: 14px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item-container {
|
||||||
|
padding-left: 15px;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item-border {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 50px;
|
||||||
|
padding: 25px;
|
||||||
|
padding-left: 0;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: #DEDEDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item-border--last {
|
||||||
|
border-bottom-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__item-content {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #191919;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__title-wrapper {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-indexed-list__title {
|
||||||
|
padding: 6px 12px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
## Badge 数字角标
|
||||||
|
> **组件名：uni-badge**
|
||||||
|
> 代码块： `uBadge`
|
||||||
|
|
||||||
|
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-badge)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,269 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-steps">
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
||||||
|
<view v-for="(item,index) in options" :key="index"
|
||||||
|
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
||||||
|
<text :style="{color:index === active?activeColor:deactiveColor}"
|
||||||
|
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||||||
|
<text :style="{color: deactiveColor}"
|
||||||
|
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
|
||||||
|
v-for="(item,index) in options" :key="index">
|
||||||
|
<view
|
||||||
|
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
||||||
|
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
|
||||||
|
</view>
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
|
||||||
|
v-if="index === active">
|
||||||
|
<uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
|
||||||
|
:style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
|
||||||
|
<view
|
||||||
|
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
||||||
|
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Steps 步骤条
|
||||||
|
* @description 评分组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=34
|
||||||
|
* @property {Number} active 当前步骤
|
||||||
|
* @property {String} direction = [row|column] 当前步骤
|
||||||
|
* @value row 横向
|
||||||
|
* @value column 纵向
|
||||||
|
* @property {String} activeColor 选中状态的颜色
|
||||||
|
* @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniSteps',
|
||||||
|
props: {
|
||||||
|
direction: {
|
||||||
|
// 排列方向 row column
|
||||||
|
type: String,
|
||||||
|
default: 'row'
|
||||||
|
},
|
||||||
|
activeColor: {
|
||||||
|
// 激活状态颜色
|
||||||
|
type: String,
|
||||||
|
default: '#2979FF'
|
||||||
|
},
|
||||||
|
deactiveColor: {
|
||||||
|
// 未激活状态颜色
|
||||||
|
type: String,
|
||||||
|
default: '#B7BDC6'
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
// 当前步骤
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
activeIcon: {
|
||||||
|
// 当前步骤
|
||||||
|
type: String,
|
||||||
|
default: 'checkbox-filled'
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
} // 数据
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$uni-border-color:#EDEDED;
|
||||||
|
.uni-steps {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-text-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-text-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-text {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-text {
|
||||||
|
padding: 6px 0px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: $uni-border-color;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-title {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-title {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
width: 30px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-line-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
height: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-line-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-line {
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #B7BDC6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-line {
|
||||||
|
width: 1px;
|
||||||
|
background-color: #B7BDC6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-line--after {
|
||||||
|
transform: translateX(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-line--after {
|
||||||
|
flex: 1;
|
||||||
|
transform: translate(0px, 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-line--before {
|
||||||
|
transform: translateX(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-line--before {
|
||||||
|
height: 6px;
|
||||||
|
transform: translate(0px, -13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-circle {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #B7BDC6;
|
||||||
|
margin: 0px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-circle {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #B7BDC6;
|
||||||
|
margin: 4px 0px 5px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-check {
|
||||||
|
margin: 0px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-check {
|
||||||
|
height: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
margin: 2px 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 580 B |
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"uni-countdown.day": "day",
|
||||||
|
"uni-countdown.h": "h",
|
||||||
|
"uni-countdown.m": "m",
|
||||||
|
"uni-countdown.s": "s"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Calendar 日历
|
||||||
|
> **组件名：uni-calendar**
|
||||||
|
> 代码块： `uCalendar`
|
||||||
|
|
||||||
|
|
||||||
|
日历组件
|
||||||
|
|
||||||
|
> **注意事项**
|
||||||
|
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||||||
|
> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)
|
||||||
|
> - 仅支持自定义组件模式
|
||||||
|
> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
|
||||||
|
> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
|
||||||
|
> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
|
||||||
|
|
||||||
|
|
||||||
|
### 安装方式
|
||||||
|
|
||||||
|
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||||
|
|
||||||
|
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||||
|
|
||||||
|
### 基本用法
|
||||||
|
|
||||||
|
在 ``template`` 中使用组件
|
||||||
|
|
||||||
|
```html
|
||||||
|
<view>
|
||||||
|
<uni-calendar
|
||||||
|
:insert="true"
|
||||||
|
:lunar="true"
|
||||||
|
:start-date="'2019-3-2'"
|
||||||
|
:end-date="'2019-5-20'"
|
||||||
|
@change="change"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 通过方法打开日历
|
||||||
|
|
||||||
|
需要设置 `insert` 为 `false`
|
||||||
|
|
||||||
|
```html
|
||||||
|
<view>
|
||||||
|
<uni-calendar
|
||||||
|
ref="calendar"
|
||||||
|
:insert="false"
|
||||||
|
@confirm="confirm"
|
||||||
|
/>
|
||||||
|
<button @click="open">打开日历</button>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open(){
|
||||||
|
this.$refs.calendar.open();
|
||||||
|
},
|
||||||
|
confirm(e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Calendar Props
|
||||||
|
|
||||||
|
| 属性名 | 类型 | 默认值| 说明 |
|
||||||
|
| | |
|
||||||
|
| date | String |- | 自定义当前时间，默认为今天 |
|
||||||
|
| lunar | Boolean | false | 显示农历 |
|
||||||
|
| startDate | String |- | 日期选择范围-开始日期 |
|
||||||
|
| endDate | String |- | 日期选择范围-结束日期 |
|
||||||
|
| range | Boolean | false | 范围选择 |
|
||||||
|
| insert | Boolean | false | 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
|
||||||
|
|clearDate |Boolean |true |弹窗模式是否清空上次选择内容 |
|
||||||
|
| selected | Array |- | 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
|
||||||
|
|showMonth | Boolean | true | 是否显示月份为背景 |
|
||||||
|
|
||||||
|
### Calendar Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 |返回值|
|
||||||
|
| | | |
|
||||||
|
| open | 弹出日历组件，`insert :false` 时生效|- |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 组件示例
|
||||||
|
|
||||||
|
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"uni-load-more.contentdown": "上拉显示更多",
|
||||||
|
"uni-load-more.contentrefresh": "正在加载...",
|
||||||
|
"uni-load-more.contentnomore": "没有更多数据了"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,563 @@
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
localdata: {
|
||||||
|
type: [Array, Object],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
spaceInfo: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
collection: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
action: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
field: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
orderby: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
where: {
|
||||||
|
type: [String, Object],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
pageData: {
|
||||||
|
type: String,
|
||||||
|
default: 'add'
|
||||||
|
},
|
||||||
|
pageCurrent: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
pageSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 20
|
||||||
|
},
|
||||||
|
getcount: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
getone: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
gettree: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
manual: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
preload: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
stepSearh: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
selfField: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
parentField: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
map: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
text: "text",
|
||||||
|
value: "value"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
errorMessage: '',
|
||||||
|
loadMore: {
|
||||||
|
contentdown: '',
|
||||||
|
contentrefresh: '',
|
||||||
|
contentnomore: ''
|
||||||
|
},
|
||||||
|
dataList: [],
|
||||||
|
selected: [],
|
||||||
|
selectedIndex: 0,
|
||||||
|
page: {
|
||||||
|
current: this.pageCurrent,
|
||||||
|
size: this.pageSize,
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isLocaldata() {
|
||||||
|
return !this.collection.length
|
||||||
|
},
|
||||||
|
postField() {
|
||||||
|
let fields = [this.field];
|
||||||
|
if (this.parentField) {
|
||||||
|
fields.push(`${this.parentField} as parent_value`);
|
||||||
|
}
|
||||||
|
return fields.join(',');
|
||||||
|
},
|
||||||
|
dataValue() {
|
||||||
|
let isModelValue = Array.isArray(this.modelValue) ? (this.modelValue.length > 0) : (this.modelValue !== null || this.modelValue !== undefined)
|
||||||
|
return isModelValue ? this.modelValue : this.value
|
||||||
|
},
|
||||||
|
hasValue() {
|
||||||
|
if (typeof this.dataValue === 'number') {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return (this.dataValue != null) && (this.dataValue.length > 0)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$watch(() => {
|
||||||
|
var al = [];
|
||||||
|
['pageCurrent',
|
||||||
|
'pageSize',
|
||||||
|
'spaceInfo',
|
||||||
|
'value',
|
||||||
|
'modelValue',
|
||||||
|
'localdata',
|
||||||
|
'collection',
|
||||||
|
'action',
|
||||||
|
'field',
|
||||||
|
'orderby',
|
||||||
|
'where',
|
||||||
|
'getont',
|
||||||
|
'getcount',
|
||||||
|
'gettree'
|
||||||
|
].forEach(key => {
|
||||||
|
al.push(this[key])
|
||||||
|
});
|
||||||
|
return al
|
||||||
|
}, (newValue, oldValue) => {
|
||||||
|
let needReset = false
|
||||||
|
for (let i = 2; i < newValue.length; i++) {
|
||||||
|
if (newValue[i] != oldValue[i]) {
|
||||||
|
needReset = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (newValue[0] != oldValue[0]) {
|
||||||
|
this.page.current = this.pageCurrent
|
||||||
|
}
|
||||||
|
this.page.size = this.pageSize
|
||||||
|
|
||||||
|
this.onPropsChange()
|
||||||
|
})
|
||||||
|
this._treeData = []
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onPropsChange() {
|
||||||
|
this._treeData = []
|
||||||
|
},
|
||||||
|
getCommand(options = {}) {
|
||||||
|
/* eslint-disable no-undef */
|
||||||
|
let db = uniCloud.database(this.spaceInfo)
|
||||||
|
|
||||||
|
const action = options.action || this.action
|
||||||
|
if (action) {
|
||||||
|
db = db.action(action)
|
||||||
|
}
|
||||||
|
|
||||||
|
const collection = options.collection || this.collection
|
||||||
|
db = db.collection(collection)
|
||||||
|
|
||||||
|
const where = options.where || this.where
|
||||||
|
if (!(!where || !Object.keys(where).length)) {
|
||||||
|
db = db.where(where)
|
||||||
|
}
|
||||||
|
|
||||||
|
const field = options.field || this.field
|
||||||
|
if (field) {
|
||||||
|
db = db.field(field)
|
||||||
|
}
|
||||||
|
|
||||||
|
const orderby = options.orderby || this.orderby
|
||||||
|
if (orderby) {
|
||||||
|
db = db.orderBy(orderby)
|
||||||
|
}
|
||||||
|
|
||||||
|
const current = options.pageCurrent !== undefined ? options.pageCurrent : this.page.current
|
||||||
|
const size = options.pageSize !== undefined ? options.pageSize : this.page.size
|
||||||
|
const getCount = options.getcount !== undefined ? options.getcount : this.getcount
|
||||||
|
const getTree = options.gettree !== undefined ? options.gettree : this.gettree
|
||||||
|
|
||||||
|
const getOptions = {
|
||||||
|
getCount,
|
||||||
|
getTree
|
||||||
|
}
|
||||||
|
if (options.getTreePath) {
|
||||||
|
getOptions.getTreePath = options.getTreePath
|
||||||
|
}
|
||||||
|
|
||||||
|
db = db.skip(size * (current - 1)).limit(size).get(getOptions)
|
||||||
|
|
||||||
|
return db
|
||||||
|
},
|
||||||
|
getNodeData(callback) {
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
this.getCommand({
|
||||||
|
field: this.postField,
|
||||||
|
where: this._pathWhere()
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
this.selected = res.result.data
|
||||||
|
callback && callback()
|
||||||
|
}).catch((err) => {
|
||||||
|
this.loading = false
|
||||||
|
this.errorMessage = err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getTreePath(callback) {
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
this.getCommand({
|
||||||
|
field: this.postField,
|
||||||
|
getTreePath: {
|
||||||
|
startWith: `${this.selfField}=='${this.dataValue}'`
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
let treePath = []
|
||||||
|
this._extractTreePath(res.result.data, treePath)
|
||||||
|
this.selected = treePath
|
||||||
|
callback && callback()
|
||||||
|
}).catch((err) => {
|
||||||
|
this.loading = false
|
||||||
|
this.errorMessage = err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
loadData() {
|
||||||
|
if (this.isLocaldata) {
|
||||||
|
this._processLocalData()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.dataValue != null) {
|
||||||
|
this._loadNodeData((data) => {
|
||||||
|
this._treeData = data
|
||||||
|
this._updateBindData()
|
||||||
|
this._updateSelected()
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.stepSearh) {
|
||||||
|
this._loadNodeData((data) => {
|
||||||
|
this._treeData = data
|
||||||
|
this._updateBindData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this._loadAllData((data) => {
|
||||||
|
this._treeData = []
|
||||||
|
this._extractTree(data, this._treeData, null)
|
||||||
|
this._updateBindData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_loadAllData(callback) {
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
this.getCommand({
|
||||||
|
field: this.postField,
|
||||||
|
gettree: true,
|
||||||
|
startwith: `${this.selfField}=='${this.dataValue}'`
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
callback(res.result.data)
|
||||||
|
this.onDataChange()
|
||||||
|
}).catch((err) => {
|
||||||
|
this.loading = false
|
||||||
|
this.errorMessage = err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
_loadNodeData(callback, pw) {
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
|
this.getCommand({
|
||||||
|
field: this.postField,
|
||||||
|
where: pw || this._postWhere(),
|
||||||
|
pageSize: 500
|
||||||
|
}).then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
callback(res.result.data)
|
||||||
|
this.onDataChange()
|
||||||
|
}).catch((err) => {
|
||||||
|
this.loading = false
|
||||||
|
this.errorMessage = err
|
||||||
|
})
|
||||||
|
},
|
||||||
|
_pathWhere() {
|
||||||
|
let result = []
|
||||||
|
let where_field = this._getParentNameByField();
|
||||||
|
if (where_field) {
|
||||||
|
result.push(`${where_field} == '${this.dataValue}'`)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.where) {
|
||||||
|
return `(${this.where}) && (${result.join(' || ')})`
|
||||||
|
}
|
||||||
|
|
||||||
|
return result.join(' || ')
|
||||||
|
},
|
||||||
|
_postWhere() {
|
||||||
|
let result = []
|
||||||
|
let selected = this.selected
|
||||||
|
let parentField = this.parentField
|
||||||
|
if (parentField) {
|
||||||
|
result.push(`${parentField} == null || ${parentField} == ""`)
|
||||||
|
}
|
||||||
|
if (selected.length) {
|
||||||
|
for (var i = 0; i < selected.length - 1; i++) {
|
||||||
|
result.push(`${parentField} == '${selected[i].value}'`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let where = []
|
||||||
|
if (this.where) {
|
||||||
|
where.push(`(${this.where})`)
|
||||||
|
}
|
||||||
|
if (result.length) {
|
||||||
|
where.push(`(${result.join(' || ')})`)
|
||||||
|
}
|
||||||
|
|
||||||
|
return where.join(' && ')
|
||||||
|
},
|
||||||
|
_nodeWhere() {
|
||||||
|
let result = []
|
||||||
|
let selected = this.selected
|
||||||
|
if (selected.length) {
|
||||||
|
result.push(`${this.parentField} == '${selected[selected.length - 1].value}'`)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.where) {
|
||||||
|
return `(${this.where}) && (${result.join(' || ')})`
|
||||||
|
}
|
||||||
|
|
||||||
|
return result.join(' || ')
|
||||||
|
},
|
||||||
|
_getParentNameByField() {
|
||||||
|
const fields = this.field.split(',');
|
||||||
|
let where_field = null;
|
||||||
|
for (let i = 0; i < fields.length; i++) {
|
||||||
|
const items = fields[i].split('as');
|
||||||
|
if (items.length < 2) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (items[1].trim() === 'value') {
|
||||||
|
where_field = items[0].trim();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return where_field
|
||||||
|
},
|
||||||
|
_isTreeView() {
|
||||||
|
return (this.parentField && this.selfField)
|
||||||
|
},
|
||||||
|
_updateSelected() {
|
||||||
|
var dl = this.dataList
|
||||||
|
var sl = this.selected
|
||||||
|
let textField = this.map.text
|
||||||
|
let valueField = this.map.value
|
||||||
|
for (var i = 0; i < sl.length; i++) {
|
||||||
|
var value = sl[i].value
|
||||||
|
var dl2 = dl[i]
|
||||||
|
for (var j = 0; j < dl2.length; j++) {
|
||||||
|
var item2 = dl2[j]
|
||||||
|
if (item2[valueField] === value) {
|
||||||
|
sl[i].text = item2[textField]
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_updateBindData(node) {
|
||||||
|
const {
|
||||||
|
dataList,
|
||||||
|
hasNodes
|
||||||
|
} = this._filterData(this._treeData, this.selected)
|
||||||
|
|
||||||
|
let isleaf = this._stepSearh === false && !hasNodes
|
||||||
|
|
||||||
|
if (node) {
|
||||||
|
node.isleaf = isleaf
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dataList = dataList
|
||||||
|
this.selectedIndex = dataList.length - 1
|
||||||
|
|
||||||
|
if (!isleaf && this.selected.length < dataList.length) {
|
||||||
|
this.selected.push({
|
||||||
|
value: null,
|
||||||
|
text: "请选择"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
isleaf,
|
||||||
|
hasNodes
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_filterData(data, paths) {
|
||||||
|
let dataList = []
|
||||||
|
let hasNodes = true
|
||||||
|
|
||||||
|
dataList.push(data.filter((item) => {
|
||||||
|
return (item.parent_value === null || item.parent_value === undefined || item.parent_value === '')
|
||||||
|
}))
|
||||||
|
for (let i = 0; i < paths.length; i++) {
|
||||||
|
var value = paths[i].value
|
||||||
|
var nodes = data.filter((item) => {
|
||||||
|
return item.parent_value === value
|
||||||
|
})
|
||||||
|
|
||||||
|
if (nodes.length) {
|
||||||
|
dataList.push(nodes)
|
||||||
|
} else {
|
||||||
|
hasNodes = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
dataList,
|
||||||
|
hasNodes
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_extractTree(nodes, result, parent_value) {
|
||||||
|
let list = result || []
|
||||||
|
let valueField = this.map.value
|
||||||
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
let node = nodes[i]
|
||||||
|
|
||||||
|
let child = {}
|
||||||
|
for (let key in node) {
|
||||||
|
if (key !== 'children') {
|
||||||
|
child[key] = node[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (parent_value !== null && parent_value !== undefined && parent_value !== '') {
|
||||||
|
child.parent_value = parent_value
|
||||||
|
}
|
||||||
|
result.push(child)
|
||||||
|
|
||||||
|
let children = node.children
|
||||||
|
if (children) {
|
||||||
|
this._extractTree(children, result, node[valueField])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_extractTreePath(nodes, result) {
|
||||||
|
let list = result || []
|
||||||
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
let node = nodes[i]
|
||||||
|
|
||||||
|
let child = {}
|
||||||
|
for (let key in node) {
|
||||||
|
if (key !== 'children') {
|
||||||
|
child[key] = node[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
result.push(child)
|
||||||
|
|
||||||
|
let children = node.children
|
||||||
|
if (children) {
|
||||||
|
this._extractTreePath(children, result)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_findNodePath(key, nodes, path = []) {
|
||||||
|
let textField = this.map.text
|
||||||
|
let valueField = this.map.value
|
||||||
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
let node = nodes[i]
|
||||||
|
let children = node.children
|
||||||
|
let text = node[textField]
|
||||||
|
let value = node[valueField]
|
||||||
|
|
||||||
|
path.push({
|
||||||
|
value,
|
||||||
|
text
|
||||||
|
})
|
||||||
|
|
||||||
|
if (value === key) {
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
|
||||||
|
if (children) {
|
||||||
|
const p = this._findNodePath(key, children, path)
|
||||||
|
if (p.length) {
|
||||||
|
return p
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
path.pop()
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
_processLocalData() {
|
||||||
|
this._treeData = []
|
||||||
|
this._extractTree(this.localdata, this._treeData)
|
||||||
|
|
||||||
|
var inputValue = this.dataValue
|
||||||
|
if (inputValue === undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(inputValue)) {
|
||||||
|
inputValue = inputValue[inputValue.length - 1]
|
||||||
|
if (typeof inputValue === 'object' && inputValue[this.map.value]) {
|
||||||
|
inputValue = inputValue[this.map.value]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selected = this._findNodePath(inputValue, this.localdata)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
## DataPicker 级联选择
|
||||||
|
> **组件名：uni-data-picker**
|
||||||
|
> 代码块： `uDataPicker`
|
||||||
|
> 关联组件：`uni-data-pickerview`、`uni-load-more`。
|
||||||
|
|
||||||
|
|
||||||
|
`<uni-data-picker>` 是一个选择类[datacom组件](https://uniapp.dcloud.net.cn/component/datacom)。
|
||||||
|
|
||||||
|
支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。
|
||||||
|
|
||||||
|
候选数据支持一次性加载完毕，也支持懒加载，比如示例图中，选择了“北京”后，动态加载北京的区县数据。
|
||||||
|
|
||||||
|
`<uni-data-picker>` 组件尤其适用于地址选择、分类选择等选择类。
|
||||||
|
|
||||||
|
`<uni-data-picker>` 支持本地数据、云端静态数据(json)，uniCloud云数据库数据。
|
||||||
|
|
||||||
|
`<uni-data-picker>` 可以通过JQL直连uniCloud云数据库，配套[DB Schema](https://uniapp.dcloud.net.cn/uniCloud/schema)，可在schema2code中自动生成前端页面，还支持服务器端校验。
|
||||||
|
|
||||||
|
在uniCloud数据表中新建表“uni-id-address”和“opendb-city-china”，这2个表的schema自带foreignKey关联。在“uni-id-address”表的表结构页面使用schema2code生成前端页面，会自动生成地址管理的维护页面，自动从“opendb-city-china”表包含的中国所有省市区信息里选择地址。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-picker)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"filter-dropdown.reset": "Reiniciar",
|
||||||
|
"filter-dropdown.search": "Búsqueda",
|
||||||
|
"filter-dropdown.submit": "Entregar",
|
||||||
|
"filter-dropdown.filter": "Filtrar",
|
||||||
|
"filter-dropdown.gt": "Mayor o igual a",
|
||||||
|
"filter-dropdown.lt": "Menos que o igual a",
|
||||||
|
"filter-dropdown.date": "Fecha"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Title 章节标题
|
||||||
|
> **组件名：uni-title**
|
||||||
|
> 代码块： `uTitle`
|
||||||
|
|
||||||
|
|
||||||
|
章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题 。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-title)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -0,0 +1,171 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-title__box" :style="{'align-items':textAlign}">
|
||||||
|
<text class="uni-title__base" :class="['uni-'+type]" :style="{'color':color}">{{title}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Title 章节标题
|
||||||
|
* @description 章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=1066
|
||||||
|
* @property {String} type = [h1|h2|h3|h4|h5] 标题类型
|
||||||
|
* @value h1 一级标题
|
||||||
|
* @value h2 二级标题
|
||||||
|
* @value h3 三级标题
|
||||||
|
* @value h4 四级标题
|
||||||
|
* @value h5 五级标题
|
||||||
|
* @property {String} title 章节标题内容
|
||||||
|
* @property {String} align = [left|center|right] 对齐方式
|
||||||
|
* @value left 做对齐
|
||||||
|
* @value center 居中对齐
|
||||||
|
* @value right 右对齐
|
||||||
|
* @property {String} color 字体颜色
|
||||||
|
* @property {Boolean} stat = [true|false] 是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"UniTitle",
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
align: {
|
||||||
|
type: String,
|
||||||
|
default: 'left'
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
|
stat: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
textAlign() {
|
||||||
|
let align = 'center';
|
||||||
|
switch (this.align) {
|
||||||
|
case 'left':
|
||||||
|
align = 'flex-start'
|
||||||
|
break;
|
||||||
|
case 'center':
|
||||||
|
align = 'center'
|
||||||
|
break;
|
||||||
|
case 'right':
|
||||||
|
align = 'flex-end'
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return align
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
title(newVal) {
|
||||||
|
if (this.isOpenStat()) {
|
||||||
|
// 上报数据
|
||||||
|
if (uni.report) {
|
||||||
|
uni.report('title', this.title)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.isOpenStat()) {
|
||||||
|
// 上报数据
|
||||||
|
if (uni.report) {
|
||||||
|
uni.report('title', this.title)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isOpenStat() {
|
||||||
|
if (this.stat === '') {
|
||||||
|
this.isStat = false
|
||||||
|
}
|
||||||
|
let stat_type = (typeof(this.stat) === 'boolean' && this.stat) || (typeof(this.stat) === 'string' && this.stat !==
|
||||||
|
'')
|
||||||
|
if (this.type === "") {
|
||||||
|
this.isStat = true
|
||||||
|
if (this.stat.toString() === 'false') {
|
||||||
|
this.isStat = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.type !== '') {
|
||||||
|
this.isStat = true
|
||||||
|
if (stat_type) {
|
||||||
|
this.isStat = true
|
||||||
|
} else {
|
||||||
|
this.isStat = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.isStat
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* .uni-title {
|
||||||
|
|
||||||
|
} */
|
||||||
|
.uni-title__box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-title__base {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
/* font-weight: 400; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
/* font-weight: 300; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-h5 {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
/* font-weight: 200; */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import en from './en.json'
|
||||||
|
import es from './es.json'
|
||||||
|
import fr from './fr.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
es,
|
||||||
|
fr,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Collapse 折叠面板
|
||||||
|
> **组件名：uni-collapse**
|
||||||
|
> 代码块： `uCollapse`
|
||||||
|
> 关联组件：`uni-collapse-item`、`uni-icons`。
|
||||||
|
|
||||||
|
|
||||||
|
折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-collapse)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
## 1.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)
|
||||||
|
## 1.1.7（2021-11-08）
|
||||||
|
- 优化 升级ui
|
||||||
|
- 修改 size 属性默认值调整为 small
|
||||||
|
- 修改 type 属性，默认值调整为 error，info 替换 default
|
||||||
|
## 1.1.6（2021-09-22）
|
||||||
|
- 修复 在字节小程序上样式不生效的 bug
|
||||||
|
## 1.1.5（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.4（2021-07-29）
|
||||||
|
- 修复 去掉 nvue 不支持css 的 align-self 属性，nvue 下不暂支持 absolute 属性
|
||||||
|
## 1.1.3（2021-06-24）
|
||||||
|
- 优化 示例项目
|
||||||
|
## 1.1.1（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.0（2021-05-12）
|
||||||
|
- 新增 uni-badge 的 absolute 属性，支持定位
|
||||||
|
- 新增 uni-badge 的 offset 属性，支持定位偏移
|
||||||
|
- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
|
||||||
|
- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
|
||||||
|
- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
|
||||||
|
## 1.0.7（2021-05-07）
|
||||||
|
- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
|
||||||
|
- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
|
||||||
|
- 新增 uni-badge 属性 custom-style， 支持自定义样式
|
||||||
|
## 1.0.6（2021-02-04）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,475 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-cursor-point">
|
||||||
|
<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{
|
||||||
|
'uni-fab--leftBottom': leftBottom,
|
||||||
|
'uni-fab--rightBottom': rightBottom,
|
||||||
|
'uni-fab--leftTop': leftTop,
|
||||||
|
'uni-fab--rightTop': rightTop
|
||||||
|
}" class="uni-fab">
|
||||||
|
<view :class="{
|
||||||
|
'uni-fab__content--left': horizontal === 'left',
|
||||||
|
'uni-fab__content--right': horizontal === 'right',
|
||||||
|
'uni-fab__content--flexDirection': direction === 'vertical',
|
||||||
|
'uni-fab__content--flexDirectionStart': flexDirectionStart,
|
||||||
|
'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
|
||||||
|
'uni-fab__content--other-platform': !isAndroidNvue
|
||||||
|
}" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
|
||||||
|
class="uni-fab__content" elevation="5">
|
||||||
|
<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
|
||||||
|
<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }"
|
||||||
|
class="uni-fab__item" @click="_onItemClick(index, item)">
|
||||||
|
<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image"
|
||||||
|
mode="aspectFit" />
|
||||||
|
<text class="uni-fab__item-text"
|
||||||
|
:style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view :class="{
|
||||||
|
'uni-fab__circle--leftBottom': leftBottom,
|
||||||
|
'uni-fab__circle--rightBottom': rightBottom,
|
||||||
|
'uni-fab__circle--leftTop': leftTop,
|
||||||
|
'uni-fab__circle--rightTop': rightTop,
|
||||||
|
'uni-fab__content--other-platform': !isAndroidNvue
|
||||||
|
}" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick">
|
||||||
|
<uni-icons class="fab-circle-icon" type="plusempty" :color="styles.iconColor" size="32"
|
||||||
|
:class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons>
|
||||||
|
<!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
|
||||||
|
<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let platform = 'other'
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
platform = uni.getSystemInfoSync().platform
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fab 悬浮按钮
|
||||||
|
* @description 点击可展开一个图形按钮菜单
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=144
|
||||||
|
* @property {Object} pattern 可选样式配置项
|
||||||
|
* @property {Object} horizontal = [left | right] 水平对齐方式
|
||||||
|
* @value left 左对齐
|
||||||
|
* @value right 右对齐
|
||||||
|
* @property {Object} vertical = [bottom | top] 垂直对齐方式
|
||||||
|
* @value bottom 下对齐
|
||||||
|
* @value top 上对齐
|
||||||
|
* @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
|
||||||
|
* @value horizontal 水平显示
|
||||||
|
* @value vertical 垂直显示
|
||||||
|
* @property {Array} content 展开菜单内容配置项
|
||||||
|
* @property {Boolean} popMenu 是否使用弹出菜单
|
||||||
|
* @event {Function} trigger 展开菜单点击事件，返回点击信息
|
||||||
|
* @event {Function} fabClick 悬浮按钮点击事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniFab',
|
||||||
|
emits: ['fabClick', 'trigger'],
|
||||||
|
props: {
|
||||||
|
pattern: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
horizontal: {
|
||||||
|
type: String,
|
||||||
|
default: 'left'
|
||||||
|
},
|
||||||
|
vertical: {
|
||||||
|
type: String,
|
||||||
|
default: 'bottom'
|
||||||
|
},
|
||||||
|
direction: {
|
||||||
|
type: String,
|
||||||
|
default: 'horizontal'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
popMenu: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fabShow: false,
|
||||||
|
isShow: false,
|
||||||
|
isAndroidNvue: platform === 'android',
|
||||||
|
styles: {
|
||||||
|
color: '#3c3e49',
|
||||||
|
selectedColor: '#007AFF',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
buttonColor: '#007AFF',
|
||||||
|
iconColor: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
contentWidth(e) {
|
||||||
|
return (this.content.length + 1) * 55 + 15 + 'px'
|
||||||
|
},
|
||||||
|
contentWidthMin() {
|
||||||
|
return '55px'
|
||||||
|
},
|
||||||
|
// 动态计算宽度
|
||||||
|
boxWidth() {
|
||||||
|
return this.getPosition(3, 'horizontal')
|
||||||
|
},
|
||||||
|
// 动态计算高度
|
||||||
|
boxHeight() {
|
||||||
|
return this.getPosition(3, 'vertical')
|
||||||
|
},
|
||||||
|
// 计算左下位置
|
||||||
|
leftBottom() {
|
||||||
|
return this.getPosition(0, 'left', 'bottom')
|
||||||
|
},
|
||||||
|
// 计算右下位置
|
||||||
|
rightBottom() {
|
||||||
|
return this.getPosition(0, 'right', 'bottom')
|
||||||
|
},
|
||||||
|
// 计算左上位置
|
||||||
|
leftTop() {
|
||||||
|
return this.getPosition(0, 'left', 'top')
|
||||||
|
},
|
||||||
|
rightTop() {
|
||||||
|
return this.getPosition(0, 'right', 'top')
|
||||||
|
},
|
||||||
|
flexDirectionStart() {
|
||||||
|
return this.getPosition(1, 'vertical', 'top')
|
||||||
|
},
|
||||||
|
flexDirectionEnd() {
|
||||||
|
return this.getPosition(1, 'vertical', 'bottom')
|
||||||
|
},
|
||||||
|
horizontalLeft() {
|
||||||
|
return this.getPosition(2, 'horizontal', 'left')
|
||||||
|
},
|
||||||
|
horizontalRight() {
|
||||||
|
return this.getPosition(2, 'horizontal', 'right')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
pattern: {
|
||||||
|
handler(val, oldVal) {
|
||||||
|
this.styles = Object.assign({}, this.styles, val)
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.isShow = this.show
|
||||||
|
if (this.top === 0) {
|
||||||
|
this.fabShow = true
|
||||||
|
}
|
||||||
|
// 初始化样式
|
||||||
|
this.styles = Object.assign({}, this.styles, this.pattern)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_onClick() {
|
||||||
|
this.$emit('fabClick')
|
||||||
|
if (!this.popMenu) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.isShow = !this.isShow
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
this.isShow = true
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.isShow = false
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 按钮点击事件
|
||||||
|
*/
|
||||||
|
_onItemClick(index, item) {
|
||||||
|
this.$emit('trigger', {
|
||||||
|
index,
|
||||||
|
item
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取 位置信息
|
||||||
|
*/
|
||||||
|
getPosition(types, paramA, paramB) {
|
||||||
|
if (types === 0) {
|
||||||
|
return this.horizontal === paramA && this.vertical === paramB
|
||||||
|
} else if (types === 1) {
|
||||||
|
return this.direction === paramA && this.vertical === paramB
|
||||||
|
} else if (types === 2) {
|
||||||
|
return this.direction === paramA && this.horizontal === paramB
|
||||||
|
} else {
|
||||||
|
return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
$uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default;
|
||||||
|
|
||||||
|
.uni-fab {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 10;
|
||||||
|
border-radius: 45px;
|
||||||
|
box-shadow: $uni-shadow-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-cursor-point {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab--active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab--leftBottom {
|
||||||
|
left: 15px;
|
||||||
|
bottom: 30px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
left: calc(15px + var(--window-left));
|
||||||
|
bottom: calc(30px + var(--window-bottom));
|
||||||
|
/* #endif */
|
||||||
|
// padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab--leftTop {
|
||||||
|
left: 15px;
|
||||||
|
top: 30px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
left: calc(15px + var(--window-left));
|
||||||
|
top: calc(30px + var(--window-top));
|
||||||
|
/* #endif */
|
||||||
|
// padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab--rightBottom {
|
||||||
|
right: 15px;
|
||||||
|
bottom: 30px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
right: calc(15px + var(--window-right));
|
||||||
|
bottom: calc(30px + var(--window-bottom));
|
||||||
|
/* #endif */
|
||||||
|
// padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab--rightTop {
|
||||||
|
right: 15px;
|
||||||
|
top: 30px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
right: calc(15px + var(--window-right));
|
||||||
|
top: calc(30px + var(--window-top));
|
||||||
|
/* #endif */
|
||||||
|
// padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
background-color: #3c3e49;
|
||||||
|
border-radius: 45px;
|
||||||
|
z-index: 11;
|
||||||
|
// box-shadow: $uni-shadow-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle--leftBottom {
|
||||||
|
left: 15px;
|
||||||
|
bottom: 30px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
left: calc(15px + var(--window-left));
|
||||||
|
bottom: calc(30px + var(--window-bottom));
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle--leftTop {
|
||||||
|
left: 15px;
|
||||||
|
top: 30px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
left: calc(15px + var(--window-left));
|
||||||
|
top: calc(30px + var(--window-top));
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle--rightBottom {
|
||||||
|
right: 15px;
|
||||||
|
bottom: 30px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
right: calc(15px + var(--window-right));
|
||||||
|
bottom: calc(30px + var(--window-bottom));
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle--rightTop {
|
||||||
|
right: 15px;
|
||||||
|
top: 30px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
right: calc(15px + var(--window-right));
|
||||||
|
top: calc(30px + var(--window-top));
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle--left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle--right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle--top {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__circle--bottom {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__plus {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .fab-circle-v {
|
||||||
|
// position: absolute;
|
||||||
|
// width: 2px;
|
||||||
|
// height: 24px;
|
||||||
|
// left: 0;
|
||||||
|
// top: 0;
|
||||||
|
// right: 0;
|
||||||
|
// bottom: 0;
|
||||||
|
// /* #ifndef APP-NVUE */
|
||||||
|
// margin: auto;
|
||||||
|
// /* #endif */
|
||||||
|
// background-color: white;
|
||||||
|
// transform: rotate(0deg);
|
||||||
|
// transition: transform 0.3s;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .fab-circle-h {
|
||||||
|
// position: absolute;
|
||||||
|
// width: 24px;
|
||||||
|
// height: 2px;
|
||||||
|
// left: 0;
|
||||||
|
// top: 0;
|
||||||
|
// right: 0;
|
||||||
|
// bottom: 0;
|
||||||
|
// /* #ifndef APP-NVUE */
|
||||||
|
// margin: auto;
|
||||||
|
// /* #endif */
|
||||||
|
// background-color: white;
|
||||||
|
// transform: rotate(0deg);
|
||||||
|
// transition: transform 0.3s;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.fab-circle-icon {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__plus--active {
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
border-radius: 55px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition-property: width, height;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
width: 55px;
|
||||||
|
border-color: #DDDDDD;
|
||||||
|
border-width: 1rpx;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__content--other-platform {
|
||||||
|
border-width: 0px;
|
||||||
|
box-shadow: $uni-shadow-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__content--left {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__content--right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__content--flexDirection {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__content--flexDirectionStart {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__content--flexDirectionEnd {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__item--active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__item-image {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__item-text {
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-fab__item--first {
|
||||||
|
width: 55px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
@import './styles/index.scss';
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
## 1.0.1（2021-11-23）
|
||||||
|
- 修复 参数为对象的情况下，url在某些情况显示错误的bug
|
||||||
|
## 1.0.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
|
||||||
|
## 0.2.16（2021-11-08）
|
||||||
|
- 修复 传入空对象 ，显示错误的Bug
|
||||||
|
## 0.2.15（2021-08-30）
|
||||||
|
- 修复 return-type="object" 时且存在v-model时，无法删除文件的Bug
|
||||||
|
## 0.2.14（2021-08-23）
|
||||||
|
- 新增 参数中返回 fileID 字段
|
||||||
|
## 0.2.13（2021-08-23）
|
||||||
|
- 修复 腾讯云传入fileID 不能回显的bug
|
||||||
|
- 修复 选择图片后，不能放大的问题
|
||||||
|
## 0.2.12（2021-08-17）
|
||||||
|
- 修复 由于 0.2.11 版本引起的不能回显图片的Bug
|
||||||
|
## 0.2.11（2021-08-16）
|
||||||
|
- 新增 clearFiles(index) 方法，可以手动删除指定文件
|
||||||
|
- 修复 v-model 值设为 null 报错的Bug
|
||||||
|
## 0.2.10（2021-08-13）
|
||||||
|
- 修复 return-type="object" 时，无法删除文件的Bug
|
||||||
|
## 0.2.9（2021-08-03）
|
||||||
|
- 修复 auto-upload 属性失效的Bug
|
||||||
|
## 0.2.8（2021-07-31）
|
||||||
|
- 修复 fileExtname属性不指定值报错的Bug
|
||||||
|
## 0.2.7（2021-07-31）
|
||||||
|
- 修复 在某种场景下图片不回显的Bug
|
||||||
|
## 0.2.6（2021-07-30）
|
||||||
|
- 修复 return-type为object下，返回值不正确的Bug
|
||||||
|
## 0.2.5（2021-07-30）
|
||||||
|
- 修复（重要） H5 平台下如果和uni-forms组件一同使用导致页面卡死的问题
|
||||||
|
## 0.2.3（2021-07-28）
|
||||||
|
- 优化 调整示例代码
|
||||||
|
## 0.2.2（2021-07-27）
|
||||||
|
- 修复 vue3 下赋值错误的Bug
|
||||||
|
- 优化 h5平台下上传文件导致页面卡死的问题
|
||||||
|
## 0.2.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 0.1.1（2021-07-02）
|
||||||
|
- 修复 sourceType 缺少默认值导致 ios 无法选择文件
|
||||||
|
## 0.1.0（2021-06-30）
|
||||||
|
- 优化 解耦与uniCloud的强绑定关系 ，如不绑定服务空间，默认autoUpload为false且不可更改
|
||||||
|
## 0.0.11（2021-06-30）
|
||||||
|
- 修复 由 0.0.10 版本引发的 returnType 属性失效的问题
|
||||||
|
## 0.0.10（2021-06-29）
|
||||||
|
- 优化 文件上传后进度条消失时机
|
||||||
|
## 0.0.9（2021-06-29）
|
||||||
|
- 修复 在uni-forms 中，删除文件 ，获取的值不对的Bug
|
||||||
|
## 0.0.8（2021-06-15）
|
||||||
|
- 修复 删除文件时无法触发 v-model 的Bug
|
||||||
|
## 0.0.7（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 0.0.6（2021-04-09）
|
||||||
|
- 修复 选择的文件非 file-extname 字段指定的扩展名报错的Bug
|
||||||
|
## 0.0.5（2021-04-09）
|
||||||
|
- 优化 更新组件示例
|
||||||
|
## 0.0.4（2021-04-09）
|
||||||
|
- 优化 file-extname 字段支持字符串写法，多个扩展名需要用逗号分隔
|
||||||
|
## 0.0.3（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 修复 微信小程序不指定 fileExtname 属性选择失败的Bug
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"uni-pagination.prevText": "上一頁",
|
||||||
|
"uni-pagination.nextText": "下一頁"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
## 1.0.1（2022-02-07）
|
||||||
|
- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
|
||||||
|
## 1.0.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
|
||||||
|
## 0.2.5（2021-08-23）
|
||||||
|
- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
|
||||||
|
## 0.2.4（2021-08-17）
|
||||||
|
- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
|
||||||
|
## 0.2.3（2021-08-11）
|
||||||
|
- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
|
||||||
|
## 0.2.2（2021-07-30）
|
||||||
|
- 优化 在uni-forms组件，与label不对齐的问题
|
||||||
|
## 0.2.1（2021-07-27）
|
||||||
|
- 修复 单选默认值为0不能选中的Bug
|
||||||
|
## 0.2.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 0.1.11（2021-07-06）
|
||||||
|
- 优化 删除无用日志
|
||||||
|
## 0.1.10（2021-07-05）
|
||||||
|
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
|
||||||
|
## 0.1.9（2021-07-05）
|
||||||
|
- 修复 nvue 黑框样式问题
|
||||||
|
## 0.1.8（2021-06-28）
|
||||||
|
- 修复 selectedTextColor 属性不生效的Bug
|
||||||
|
## 0.1.7（2021-06-02）
|
||||||
|
- 新增 map 属性，可以方便映射text/value属性
|
||||||
|
## 0.1.6（2021-05-26）
|
||||||
|
- 修复 不关联服务空间的情况下组件报错的Bug
|
||||||
|
## 0.1.5（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 0.1.4（2021-04-09）
|
||||||
|
- 修复 nvue 下无法选中的问题
|
||||||
|
## 0.1.3（2021-03-22）
|
||||||
|
- 新增 disabled属性
|
||||||
|
## 0.1.2（2021-02-24）
|
||||||
|
- 优化 默认颜色显示
|
||||||
|
## 0.1.1（2021-02-24）
|
||||||
|
- 新增 支持nvue
|
||||||
|
## 0.1.0（2021-02-18）
|
||||||
|
- “暂无数据”显示居中
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-breadcrumb">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Breadcrumb 面包屑导航父组件
|
||||||
|
* @description 显示当前页面的路径，快速返回之前的任意页面
|
||||||
|
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-breadcrumb
|
||||||
|
* @property {String} separator 分隔符，默认为斜杠'/'
|
||||||
|
* @property {String} separatorClass 图标分隔符 class
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
separator: {
|
||||||
|
type: String,
|
||||||
|
default: '/'
|
||||||
|
},
|
||||||
|
separatorClass: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
uniBreadcrumb: this
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.uni-breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="pl-20 pr-20 bgff">
|
||||||
|
<uni-search-bar v-model="keyword" @confirm="search()"></uni-search-bar>
|
||||||
|
</view>
|
||||||
|
<v-tabs height="76rpx" activeFontSize="26rpx" fontSize="26rpx" lineHeight="6rpx"
|
||||||
|
:lineScale=".5" lineColor="#fa3326" activeColor="#000"
|
||||||
|
scroll :tabs="cateList" v-model="current"></v-tabs>
|
||||||
|
<view class="h-84 rows rowsm tct fs-28">
|
||||||
|
<view class="w-160" @tap="swtichMode(1)" :class="{'active':paiType==1}">默认</view>
|
||||||
|
<view @tap="swtichMode(2)" class="rowsc rowsm w-180">
|
||||||
|
<text :class="{'active':paiType==2||paiType==3}" class="mr-10">销量</text>
|
||||||
|
<view class="relative" style="top: 4rpx;">
|
||||||
|
<image v-if="paiType != 2&&paiType != 3" src="/static/drgth.png" class="w-24 h-26"></image>
|
||||||
|
<image v-if="paiType == 2" src="/static/drgtsdgh.png" class="w-24 h-26"></image>
|
||||||
|
<image v-if="paiType == 3" src="/static/drgt.png" class="w-24 h-26"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view @tap="swtichMode(4)" class="w-180 rowsc">
|
||||||
|
<text :class="{'active':paiType==4||paiType==5}" class="mr-10">价格</text>
|
||||||
|
<view class="relative" style="top: 4rpx;">
|
||||||
|
<image v-if="paiType != 4&&paiType != 5" src="/static/drgth.png" class="w-24 h-26"></image>
|
||||||
|
<image v-if="paiType == 4" src="/static/drgtsdgh.png" class="w-24 h-26"></image>
|
||||||
|
<image v-if="paiType == 5" src="/static/drgt.png" class="w-24 h-26"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pl-20 pr-20">
|
||||||
|
<goodslist :type="2" :goodslist="goodslist"></goodslist>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
paiType: 2,
|
||||||
|
|
||||||
|
cateList: ['分类A','分类B','分类C'],
|
||||||
|
current: 0,
|
||||||
|
goodslist: [{},{}],
|
||||||
|
keyword: '',
|
||||||
|
isPush: true,
|
||||||
|
pages: 1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
this.type = e.type || 1
|
||||||
|
if (e.title) {
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: e.title
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// this.getCateList()
|
||||||
|
this.getGoodsList()
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
this.getGoodsList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
swtichMode(index) {//切换排序模式
|
||||||
|
if (index == 2 || index == 3) {
|
||||||
|
this.paiType = this.paiType == 2?3:2
|
||||||
|
} else if (index == 4 || index == 5) {
|
||||||
|
this.paiType = this.paiType == 4?5:4
|
||||||
|
} else {
|
||||||
|
this.paiType = index
|
||||||
|
}
|
||||||
|
},
|
||||||
|
search() {
|
||||||
|
this.isPush = true
|
||||||
|
this.pages = 1
|
||||||
|
this.goodslist = []
|
||||||
|
this.getGoodsList()
|
||||||
|
},
|
||||||
|
getGoodsList() {
|
||||||
|
if (!this.isPush) return this.showtt('暂无更多数据')
|
||||||
|
this.axiosFromToken('POST','index/business', {
|
||||||
|
page: this.pages,
|
||||||
|
pagenum: 10,
|
||||||
|
keyword: this.keyword,
|
||||||
|
type: this.type
|
||||||
|
}, '加载中').then(res => {
|
||||||
|
if (res.data.data&&res.data.data.length!==0) {
|
||||||
|
this.goodslist.push(...res.data.data)
|
||||||
|
this.pages++
|
||||||
|
} else {
|
||||||
|
this.isPush = false
|
||||||
|
if (this.pages !== 1) {
|
||||||
|
this.$tools.showtt('暂无更多数据')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCateList() {//获取分类
|
||||||
|
let type = {'1':1,'2':2,'3':5}
|
||||||
|
this.axiosFromToken('POST', 'other/getClassification', {
|
||||||
|
type: type[this.type]
|
||||||
|
}, '加载中').then(res => {
|
||||||
|
this.cateList = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background: #f7f6fa;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
|
||||||
|
|
||||||
|
### LoadMore 加载更多
|
||||||
|
> **组件名：uni-load-more**
|
||||||
|
> 代码块： `uLoadMore`
|
||||||
|
|
||||||
|
|
||||||
|
用于列表中，做滚动加载使用，展示 loading 的各种状态。
|
||||||
|
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
{
|
||||||
|
"id": "uni-pagination",
|
||||||
|
"displayName": "uni-pagination 分页器",
|
||||||
|
"version": "1.2.1",
|
||||||
|
"description": "Pagination 分页器组件，用于展示页码、请求数据等。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"分页器",
|
||||||
|
"页码"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss","uni-icons"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,997 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-date">
|
||||||
|
<view class="uni-date-editor" @click="show">
|
||||||
|
<slot>
|
||||||
|
<view class="uni-date-editor--x" :class="{'uni-date-editor--x__disabled': disabled,
|
||||||
|
'uni-date-x--border': border}">
|
||||||
|
<view v-if="!isRange" class="uni-date-x uni-date-single">
|
||||||
|
<uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
|
||||||
|
<input class="uni-date__x-input" type="text" v-model="singleVal"
|
||||||
|
:placeholder="singlePlaceholderText" :disabled="true" />
|
||||||
|
</view>
|
||||||
|
<view v-else class="uni-date-x uni-date-range">
|
||||||
|
<uni-icons type="calendar" color="#e1e1e1" size="22"></uni-icons>
|
||||||
|
<input class="uni-date__x-input t-c" type="text" v-model="range.startDate"
|
||||||
|
:placeholder="startPlaceholderText" :disabled="true" />
|
||||||
|
<slot>
|
||||||
|
<view class="">{{rangeSeparator}}</view>
|
||||||
|
</slot>
|
||||||
|
<input class="uni-date__x-input t-c" type="text" v-model="range.endDate"
|
||||||
|
:placeholder="endPlaceholderText" :disabled="true" />
|
||||||
|
</view>
|
||||||
|
<view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
|
||||||
|
<uni-icons type="clear" color="#e1e1e1" size="18"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-show="popup" class="uni-date-mask" @click="close"></view>
|
||||||
|
<view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
|
||||||
|
<view v-if="!isRange" class="uni-date-single--x" :style="popover">
|
||||||
|
<view class="uni-popper__arrow"></view>
|
||||||
|
<view v-if="hasTime" class="uni-date-changed popup-x-header">
|
||||||
|
<input class="uni-date__input t-c" type="text" v-model="tempSingleDate"
|
||||||
|
:placeholder="selectDateText" />
|
||||||
|
<time-picker type="time" v-model="time" :border="false" :disabled="!tempSingleDate"
|
||||||
|
:start="reactStartTime" :end="reactEndTime" :hideSecond="hideSecond" style="width: 100%;">
|
||||||
|
<input class="uni-date__input t-c" type="text" v-model="time" :placeholder="selectTimeText"
|
||||||
|
:disabled="!tempSingleDate" />
|
||||||
|
</time-picker>
|
||||||
|
</view>
|
||||||
|
<calendar ref="pcSingle" :showMonth="false" :start-date="caleRange.startDate"
|
||||||
|
:end-date="caleRange.endDate" :date="defSingleDate" @change="singleChange"
|
||||||
|
style="padding: 0 8px;" />
|
||||||
|
<view v-if="hasTime" class="popup-x-footer">
|
||||||
|
<!-- <text class="">此刻</text> -->
|
||||||
|
<text class="confirm" @click="confirmSingleChange">{{okText}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-date-popper__arrow"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else class="uni-date-range--x" :style="popover">
|
||||||
|
<view class="uni-popper__arrow"></view>
|
||||||
|
<view v-if="hasTime" class="popup-x-header uni-date-changed">
|
||||||
|
<view class="popup-x-header--datetime">
|
||||||
|
<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
|
||||||
|
:placeholder="startDateText" />
|
||||||
|
<time-picker type="time" v-model="tempRange.startTime" :start="reactStartTime" :border="false"
|
||||||
|
:disabled="!tempRange.startDate" :hideSecond="hideSecond">
|
||||||
|
<input class="uni-date__input uni-date-range__input" type="text"
|
||||||
|
v-model="tempRange.startTime" :placeholder="startTimeText"
|
||||||
|
:disabled="!tempRange.startDate" />
|
||||||
|
</time-picker>
|
||||||
|
</view>
|
||||||
|
<uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons>
|
||||||
|
<view class="popup-x-header--datetime">
|
||||||
|
<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate"
|
||||||
|
:placeholder="endDateText" />
|
||||||
|
<time-picker type="time" v-model="tempRange.endTime" :end="reactEndTime" :border="false"
|
||||||
|
:disabled="!tempRange.endDate" :hideSecond="hideSecond">
|
||||||
|
<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime"
|
||||||
|
:placeholder="endTimeText" :disabled="!tempRange.endDate" />
|
||||||
|
</time-picker>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="popup-x-body">
|
||||||
|
<calendar ref="left" :showMonth="false" :start-date="caleRange.startDate"
|
||||||
|
:end-date="caleRange.endDate" :range="true" @change="leftChange" :pleStatus="endMultipleStatus"
|
||||||
|
@firstEnterCale="updateRightCale" @monthSwitch="leftMonthSwitch" style="padding: 0 8px;" />
|
||||||
|
<calendar ref="right" :showMonth="false" :start-date="caleRange.startDate"
|
||||||
|
:end-date="caleRange.endDate" :range="true" @change="rightChange"
|
||||||
|
:pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
|
||||||
|
@monthSwitch="rightMonthSwitch" style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
|
||||||
|
</view>
|
||||||
|
<view v-if="hasTime" class="popup-x-footer">
|
||||||
|
<text class="" @click="clear">{{clearText}}</text>
|
||||||
|
<text class="confirm" @click="confirmRangeChange">{{okText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<calendar v-show="isPhone" ref="mobile" :clearDate="false" :date="defSingleDate" :defTime="reactMobDefTime"
|
||||||
|
:start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
|
||||||
|
:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
|
||||||
|
:hideSecond="hideSecond" @confirm="mobileChange" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* DatetimePicker 时间选择器
|
||||||
|
* @description 同时支持 PC 和移动端使用日历选择日期和日期范围
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=3962
|
||||||
|
* @property {String} type 选择器类型
|
||||||
|
* @property {String|Number|Array|Date} value 绑定值
|
||||||
|
* @property {String} placeholder 单选择时的占位内容
|
||||||
|
* @property {String} start 起始时间
|
||||||
|
* @property {String} end 终止时间
|
||||||
|
* @property {String} start-placeholder 范围选择时开始日期的占位内容
|
||||||
|
* @property {String} end-placeholder 范围选择时结束日期的占位内容
|
||||||
|
* @property {String} range-separator 选择范围时的分隔符
|
||||||
|
* @property {Boolean} border = [true|false] 是否有边框
|
||||||
|
* @property {Boolean} disabled = [true|false] 是否禁用
|
||||||
|
* @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
|
||||||
|
* @event {Function} change 确定日期时触发的事件
|
||||||
|
* @event {Function} show 打开弹出层
|
||||||
|
* @event {Function} close 关闭弹出层
|
||||||
|
* @event {Function} clear 清除上次选中的状态和值
|
||||||
|
**/
|
||||||
|
import calendar from './calendar.vue'
|
||||||
|
import timePicker from './time-picker.vue'
|
||||||
|
import {
|
||||||
|
initVueI18n
|
||||||
|
} from '@dcloudio/uni-i18n'
|
||||||
|
import messages from './i18n/index.js'
|
||||||
|
const {
|
||||||
|
t
|
||||||
|
} = initVueI18n(messages)
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniDatetimePicker',
|
||||||
|
components: {
|
||||||
|
calendar,
|
||||||
|
timePicker
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isRange: false,
|
||||||
|
hasTime: false,
|
||||||
|
mobileRange: false,
|
||||||
|
// 单选
|
||||||
|
singleVal: '',
|
||||||
|
tempSingleDate: '',
|
||||||
|
defSingleDate: '',
|
||||||
|
time: '',
|
||||||
|
// 范围选
|
||||||
|
caleRange: {
|
||||||
|
startDate: '',
|
||||||
|
startTime: '',
|
||||||
|
endDate: '',
|
||||||
|
endTime: ''
|
||||||
|
},
|
||||||
|
range: {
|
||||||
|
startDate: '',
|
||||||
|
// startTime: '',
|
||||||
|
endDate: '',
|
||||||
|
// endTime: ''
|
||||||
|
},
|
||||||
|
tempRange: {
|
||||||
|
startDate: '',
|
||||||
|
startTime: '',
|
||||||
|
endDate: '',
|
||||||
|
endTime: ''
|
||||||
|
},
|
||||||
|
// 左右日历同步数据
|
||||||
|
startMultipleStatus: {
|
||||||
|
before: '',
|
||||||
|
after: '',
|
||||||
|
data: [],
|
||||||
|
fulldate: ''
|
||||||
|
},
|
||||||
|
endMultipleStatus: {
|
||||||
|
before: '',
|
||||||
|
after: '',
|
||||||
|
data: [],
|
||||||
|
fulldate: ''
|
||||||
|
},
|
||||||
|
visible: false,
|
||||||
|
popup: false,
|
||||||
|
popover: null,
|
||||||
|
isEmitValue: false,
|
||||||
|
isPhone: false,
|
||||||
|
isFirstShow: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'datetime'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [String, Number, Array, Date],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number, Array, Date],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
start: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
returnType: {
|
||||||
|
type: String,
|
||||||
|
default: 'string'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
startPlaceholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
endPlaceholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
rangeSeparator: {
|
||||||
|
type: String,
|
||||||
|
default: '-'
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: [Boolean],
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: [Boolean],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
clearIcon: {
|
||||||
|
type: [Boolean],
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
hideSecond: {
|
||||||
|
type: [Boolean],
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
type: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (newVal.indexOf('time') !== -1) {
|
||||||
|
this.hasTime = true
|
||||||
|
} else {
|
||||||
|
this.hasTime = false
|
||||||
|
}
|
||||||
|
if (newVal.indexOf('range') !== -1) {
|
||||||
|
this.isRange = true
|
||||||
|
} else {
|
||||||
|
this.isRange = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #ifndef VUE3
|
||||||
|
value: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (this.isEmitValue) {
|
||||||
|
this.isEmitValue = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.initPicker(newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
modelValue: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (this.isEmitValue) {
|
||||||
|
this.isEmitValue = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.initPicker(newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
start: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (!newVal) return
|
||||||
|
const {
|
||||||
|
defDate,
|
||||||
|
defTime
|
||||||
|
} = this.parseDate(newVal)
|
||||||
|
this.caleRange.startDate = defDate
|
||||||
|
if (this.hasTime) {
|
||||||
|
this.caleRange.startTime = defTime
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (!newVal) return
|
||||||
|
const {
|
||||||
|
defDate,
|
||||||
|
defTime
|
||||||
|
} = this.parseDate(newVal)
|
||||||
|
this.caleRange.endDate = defDate
|
||||||
|
if (this.hasTime) {
|
||||||
|
this.caleRange.endTime = defTime
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
reactStartTime() {
|
||||||
|
const activeDate = this.isRange ? this.tempRange.startDate : this.tempSingleDate
|
||||||
|
const res = activeDate === this.caleRange.startDate ? this.caleRange.startTime : ''
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
reactEndTime() {
|
||||||
|
const activeDate = this.isRange ? this.tempRange.endDate : this.tempSingleDate
|
||||||
|
const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : ''
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
reactMobDefTime() {
|
||||||
|
const times = {
|
||||||
|
start: this.tempRange.startTime,
|
||||||
|
end: this.tempRange.endTime
|
||||||
|
}
|
||||||
|
return this.isRange ? times : this.time
|
||||||
|
},
|
||||||
|
mobSelectableTime() {
|
||||||
|
return {
|
||||||
|
start: this.caleRange.startTime,
|
||||||
|
end: this.caleRange.endTime
|
||||||
|
}
|
||||||
|
},
|
||||||
|
datePopupWidth() {
|
||||||
|
// todo
|
||||||
|
return this.isRange ? 653 : 301
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* for i18n
|
||||||
|
*/
|
||||||
|
singlePlaceholderText() {
|
||||||
|
return this.placeholder || (this.type === 'date' ? this.selectDateText : t(
|
||||||
|
"uni-datetime-picker.selectDateTime"))
|
||||||
|
},
|
||||||
|
startPlaceholderText() {
|
||||||
|
return this.startPlaceholder || this.startDateText
|
||||||
|
},
|
||||||
|
endPlaceholderText() {
|
||||||
|
return this.endPlaceholder || this.endDateText
|
||||||
|
},
|
||||||
|
selectDateText() {
|
||||||
|
return t("uni-datetime-picker.selectDate")
|
||||||
|
},
|
||||||
|
selectTimeText() {
|
||||||
|
return t("uni-datetime-picker.selectTime")
|
||||||
|
},
|
||||||
|
startDateText() {
|
||||||
|
return this.startPlaceholder || t("uni-datetime-picker.startDate")
|
||||||
|
},
|
||||||
|
startTimeText() {
|
||||||
|
return t("uni-datetime-picker.startTime")
|
||||||
|
},
|
||||||
|
endDateText() {
|
||||||
|
return this.endPlaceholder || t("uni-datetime-picker.endDate")
|
||||||
|
},
|
||||||
|
endTimeText() {
|
||||||
|
return t("uni-datetime-picker.endTime")
|
||||||
|
},
|
||||||
|
okText() {
|
||||||
|
return t("uni-datetime-picker.ok")
|
||||||
|
},
|
||||||
|
clearText() {
|
||||||
|
return t("uni-datetime-picker.clear")
|
||||||
|
},
|
||||||
|
showClearIcon() {
|
||||||
|
const {
|
||||||
|
clearIcon,
|
||||||
|
disabled,
|
||||||
|
singleVal,
|
||||||
|
range
|
||||||
|
} = this
|
||||||
|
const bool = clearIcon && !disabled && (singleVal || (range.startDate && range.endDate))
|
||||||
|
return bool
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form = this.getForm('uniForms')
|
||||||
|
this.formItem = this.getForm('uniFormsItem')
|
||||||
|
|
||||||
|
// if (this.formItem) {
|
||||||
|
// if (this.formItem.name) {
|
||||||
|
// this.rename = this.formItem.name
|
||||||
|
// this.form.inputChildrens.push(this)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.platform()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniForms') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
initPicker(newVal) {
|
||||||
|
if (!newVal || Array.isArray(newVal) && !newVal.length) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.clear(false)
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!Array.isArray(newVal) && !this.isRange) {
|
||||||
|
const {
|
||||||
|
defDate,
|
||||||
|
defTime
|
||||||
|
} = this.parseDate(newVal)
|
||||||
|
this.singleVal = defDate
|
||||||
|
this.tempSingleDate = defDate
|
||||||
|
this.defSingleDate = defDate
|
||||||
|
if (this.hasTime) {
|
||||||
|
this.singleVal = defDate + ' ' + defTime
|
||||||
|
this.time = defTime
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const [before, after] = newVal
|
||||||
|
if (!before && !after) return
|
||||||
|
const defBefore = this.parseDate(before)
|
||||||
|
const defAfter = this.parseDate(after)
|
||||||
|
const startDate = defBefore.defDate
|
||||||
|
const endDate = defAfter.defDate
|
||||||
|
this.range.startDate = this.tempRange.startDate = startDate
|
||||||
|
this.range.endDate = this.tempRange.endDate = endDate
|
||||||
|
|
||||||
|
if (this.hasTime) {
|
||||||
|
this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime
|
||||||
|
this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime
|
||||||
|
this.tempRange.startTime = defBefore.defTime
|
||||||
|
this.tempRange.endTime = defAfter.defTime
|
||||||
|
}
|
||||||
|
const defaultRange = {
|
||||||
|
before: defBefore.defDate,
|
||||||
|
after: defAfter.defDate
|
||||||
|
}
|
||||||
|
this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
|
||||||
|
which: 'right'
|
||||||
|
})
|
||||||
|
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
|
||||||
|
which: 'left'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateLeftCale(e) {
|
||||||
|
const left = this.$refs.left
|
||||||
|
// 设置范围选
|
||||||
|
left.cale.setHoverMultiple(e.after)
|
||||||
|
left.setDate(this.$refs.left.nowDate.fullDate)
|
||||||
|
},
|
||||||
|
updateRightCale(e) {
|
||||||
|
const right = this.$refs.right
|
||||||
|
// 设置范围选
|
||||||
|
right.cale.setHoverMultiple(e.after)
|
||||||
|
right.setDate(this.$refs.right.nowDate.fullDate)
|
||||||
|
},
|
||||||
|
platform() {
|
||||||
|
const systemInfo = uni.getSystemInfoSync()
|
||||||
|
this.isPhone = systemInfo.windowWidth <= 500
|
||||||
|
this.windowWidth = systemInfo.windowWidth
|
||||||
|
},
|
||||||
|
show(event) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.platform()
|
||||||
|
if (this.isPhone) {
|
||||||
|
this.$refs.mobile.open()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.popover = {
|
||||||
|
top: '10px'
|
||||||
|
}
|
||||||
|
const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
|
||||||
|
dateEditor.boundingClientRect(rect => {
|
||||||
|
if (this.windowWidth - rect.left < this.datePopupWidth) {
|
||||||
|
this.popover.right = 0
|
||||||
|
}
|
||||||
|
}).exec()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.popup = !this.popup
|
||||||
|
if (!this.isPhone && this.isRange && this.isFirstShow) {
|
||||||
|
this.isFirstShow = false
|
||||||
|
const {
|
||||||
|
startDate,
|
||||||
|
endDate
|
||||||
|
} = this.range
|
||||||
|
if (startDate && endDate) {
|
||||||
|
if (this.diffDate(startDate, endDate) < 30) {
|
||||||
|
this.$refs.right.next()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$refs.right.next()
|
||||||
|
this.$refs.right.cale.lastHover = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}, 50)
|
||||||
|
},
|
||||||
|
|
||||||
|
close() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.popup = false
|
||||||
|
this.$emit('maskClick', this.value)
|
||||||
|
}, 20)
|
||||||
|
},
|
||||||
|
setEmit(value) {
|
||||||
|
if (this.returnType === "timestamp" || this.returnType === "date") {
|
||||||
|
if (!Array.isArray(value)) {
|
||||||
|
if (!this.hasTime) {
|
||||||
|
value = value + ' ' + '00:00:00'
|
||||||
|
}
|
||||||
|
value = this.createTimestamp(value)
|
||||||
|
if (this.returnType === "date") {
|
||||||
|
value = new Date(value)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!this.hasTime) {
|
||||||
|
value[0] = value[0] + ' ' + '00:00:00'
|
||||||
|
value[1] = value[1] + ' ' + '00:00:00'
|
||||||
|
}
|
||||||
|
value[0] = this.createTimestamp(value[0])
|
||||||
|
value[1] = this.createTimestamp(value[1])
|
||||||
|
if (this.returnType === "date") {
|
||||||
|
value[0] = new Date(value[0])
|
||||||
|
value[1] = new Date(value[1])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.formItem && this.formItem.setValue(value)
|
||||||
|
this.$emit('change', value)
|
||||||
|
this.$emit('input', value)
|
||||||
|
this.$emit('update:modelValue', value)
|
||||||
|
this.isEmitValue = true
|
||||||
|
},
|
||||||
|
createTimestamp(date) {
|
||||||
|
date = this.fixIosDateFormat(date)
|
||||||
|
return Date.parse(new Date(date))
|
||||||
|
},
|
||||||
|
singleChange(e) {
|
||||||
|
this.tempSingleDate = e.fulldate
|
||||||
|
if (this.hasTime) return
|
||||||
|
this.confirmSingleChange()
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmSingleChange() {
|
||||||
|
if (!this.tempSingleDate) {
|
||||||
|
this.popup = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.hasTime) {
|
||||||
|
this.singleVal = this.tempSingleDate + ' ' + (this.time ? this.time : '00:00:00')
|
||||||
|
} else {
|
||||||
|
this.singleVal = this.tempSingleDate
|
||||||
|
}
|
||||||
|
this.setEmit(this.singleVal)
|
||||||
|
this.popup = false
|
||||||
|
},
|
||||||
|
|
||||||
|
leftChange(e) {
|
||||||
|
const {
|
||||||
|
before,
|
||||||
|
after
|
||||||
|
} = e.range
|
||||||
|
this.rangeChange(before, after)
|
||||||
|
const obj = {
|
||||||
|
before: e.range.before,
|
||||||
|
after: e.range.after,
|
||||||
|
data: e.range.data,
|
||||||
|
fulldate: e.fulldate
|
||||||
|
}
|
||||||
|
this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
|
||||||
|
},
|
||||||
|
|
||||||
|
rightChange(e) {
|
||||||
|
const {
|
||||||
|
before,
|
||||||
|
after
|
||||||
|
} = e.range
|
||||||
|
this.rangeChange(before, after)
|
||||||
|
const obj = {
|
||||||
|
before: e.range.before,
|
||||||
|
after: e.range.after,
|
||||||
|
data: e.range.data,
|
||||||
|
fulldate: e.fulldate
|
||||||
|
}
|
||||||
|
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
|
||||||
|
},
|
||||||
|
|
||||||
|
mobileChange(e) {
|
||||||
|
if (this.isRange) {
|
||||||
|
const {
|
||||||
|
before,
|
||||||
|
after
|
||||||
|
} = e.range
|
||||||
|
this.handleStartAndEnd(before, after, true)
|
||||||
|
if (this.hasTime) {
|
||||||
|
const {
|
||||||
|
startTime,
|
||||||
|
endTime
|
||||||
|
} = e.timeRange
|
||||||
|
this.tempRange.startTime = startTime
|
||||||
|
this.tempRange.endTime = endTime
|
||||||
|
}
|
||||||
|
this.confirmRangeChange()
|
||||||
|
|
||||||
|
} else {
|
||||||
|
if (this.hasTime) {
|
||||||
|
this.singleVal = e.fulldate + ' ' + e.time
|
||||||
|
} else {
|
||||||
|
this.singleVal = e.fulldate
|
||||||
|
}
|
||||||
|
this.setEmit(this.singleVal)
|
||||||
|
}
|
||||||
|
this.$refs.mobile.close()
|
||||||
|
},
|
||||||
|
|
||||||
|
rangeChange(before, after) {
|
||||||
|
if (!(before && after)) return
|
||||||
|
this.handleStartAndEnd(before, after, true)
|
||||||
|
if (this.hasTime) return
|
||||||
|
this.confirmRangeChange()
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmRangeChange() {
|
||||||
|
if (!this.tempRange.startDate && !this.tempRange.endDate) {
|
||||||
|
this.popup = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let start, end
|
||||||
|
if (!this.hasTime) {
|
||||||
|
start = this.range.startDate = this.tempRange.startDate
|
||||||
|
end = this.range.endDate = this.tempRange.endDate
|
||||||
|
} else {
|
||||||
|
start = this.range.startDate = this.tempRange.startDate + ' ' +
|
||||||
|
(this.tempRange.startTime ? this.tempRange.startTime : '00:00:00')
|
||||||
|
end = this.range.endDate = this.tempRange.endDate + ' ' +
|
||||||
|
(this.tempRange.endTime ? this.tempRange.endTime : '00:00:00')
|
||||||
|
}
|
||||||
|
const displayRange = [start, end]
|
||||||
|
this.setEmit(displayRange)
|
||||||
|
this.popup = false
|
||||||
|
},
|
||||||
|
|
||||||
|
handleStartAndEnd(before, after, temp = false) {
|
||||||
|
if (!(before && after)) return
|
||||||
|
const type = temp ? 'tempRange' : 'range'
|
||||||
|
if (this.dateCompare(before, after)) {
|
||||||
|
this[type].startDate = before
|
||||||
|
this[type].endDate = after
|
||||||
|
} else {
|
||||||
|
this[type].startDate = after
|
||||||
|
this[type].endDate = before
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 比较时间大小
|
||||||
|
*/
|
||||||
|
dateCompare(startDate, endDate) {
|
||||||
|
// 计算截止时间
|
||||||
|
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||||
|
// 计算详细项的截止时间
|
||||||
|
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||||
|
if (startDate <= endDate) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 比较时间差
|
||||||
|
*/
|
||||||
|
diffDate(startDate, endDate) {
|
||||||
|
// 计算截止时间
|
||||||
|
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||||
|
// 计算详细项的截止时间
|
||||||
|
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||||
|
const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
|
||||||
|
return Math.abs(diff)
|
||||||
|
},
|
||||||
|
|
||||||
|
clear(needEmit = true) {
|
||||||
|
if (!this.isRange) {
|
||||||
|
this.singleVal = ''
|
||||||
|
this.tempSingleDate = ''
|
||||||
|
this.time = ''
|
||||||
|
if (this.isPhone) {
|
||||||
|
this.$refs.mobile && this.$refs.mobile.clearCalender()
|
||||||
|
} else {
|
||||||
|
this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
|
||||||
|
}
|
||||||
|
if (needEmit) {
|
||||||
|
this.formItem && this.formItem.setValue('')
|
||||||
|
this.$emit('change', '')
|
||||||
|
this.$emit('input', '')
|
||||||
|
this.$emit('update:modelValue', '')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.range.startDate = ''
|
||||||
|
this.range.endDate = ''
|
||||||
|
this.tempRange.startDate = ''
|
||||||
|
this.tempRange.startTime = ''
|
||||||
|
this.tempRange.endDate = ''
|
||||||
|
this.tempRange.endTime = ''
|
||||||
|
if (this.isPhone) {
|
||||||
|
this.$refs.mobile && this.$refs.mobile.clearCalender()
|
||||||
|
} else {
|
||||||
|
this.$refs.left && this.$refs.left.clearCalender()
|
||||||
|
this.$refs.right && this.$refs.right.clearCalender()
|
||||||
|
this.$refs.right && this.$refs.right.next()
|
||||||
|
}
|
||||||
|
if (needEmit) {
|
||||||
|
this.formItem && this.formItem.setValue([])
|
||||||
|
this.$emit('change', [])
|
||||||
|
this.$emit('input', [])
|
||||||
|
this.$emit('update:modelValue', [])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
parseDate(date) {
|
||||||
|
date = this.fixIosDateFormat(date)
|
||||||
|
const defVal = new Date(date)
|
||||||
|
const year = defVal.getFullYear()
|
||||||
|
const month = defVal.getMonth() + 1
|
||||||
|
const day = defVal.getDate()
|
||||||
|
const hour = defVal.getHours()
|
||||||
|
const minute = defVal.getMinutes()
|
||||||
|
const second = defVal.getSeconds()
|
||||||
|
const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day)
|
||||||
|
const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this
|
||||||
|
.lessTen(second)))
|
||||||
|
return {
|
||||||
|
defDate,
|
||||||
|
defTime
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
lessTen(item) {
|
||||||
|
return item < 10 ? '0' + item : item
|
||||||
|
},
|
||||||
|
|
||||||
|
//兼容 iOS、safari 日期格式
|
||||||
|
fixIosDateFormat(value) {
|
||||||
|
if (typeof value === 'string') {
|
||||||
|
value = value.replace(/-/g, '/')
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
},
|
||||||
|
|
||||||
|
leftMonthSwitch(e) {
|
||||||
|
// console.log('leftMonthSwitch 返回:', e)
|
||||||
|
},
|
||||||
|
rightMonthSwitch(e) {
|
||||||
|
// console.log('rightMonthSwitch 返回:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.uni-date-x {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-x--border {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-editor--x {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-editor--x .uni-date__icon-clear {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 9px solid transparent;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date__x-input {
|
||||||
|
padding: 0 8px;
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-c {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date__input {
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-range__input {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 142px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-picker__container {
|
||||||
|
position: relative;
|
||||||
|
/* position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 996;
|
||||||
|
font-size: 14px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-mask {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
z-index: 996;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-single--x {
|
||||||
|
/* padding: 0 8px; */
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999;
|
||||||
|
border: 1px solid #EBEEF5;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-range--x {
|
||||||
|
/* padding: 0 8px; */
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999;
|
||||||
|
border: 1px solid #EBEEF5;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-editor--x__disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-editor--logo {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加时间 */
|
||||||
|
.popup-x-header {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
/* justify-content: space-between; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-x-header--datetime {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-x-body {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-x-footer {
|
||||||
|
padding: 0 15px;
|
||||||
|
border-top-color: #F1F1F1;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
/* background-color: #fff; */
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: right;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-x-footer text:hover {
|
||||||
|
color: #007aff;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-x-footer .confirm {
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #007aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-changed {
|
||||||
|
/* background-color: #fff; */
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
border-bottom-color: #F1F1F1;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
/* padding: 0 50px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-changed--time text {
|
||||||
|
/* padding: 0 20px; */
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-changed .uni-date-changed--time {
|
||||||
|
/* display: flex; */
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-date-changed--time-date {
|
||||||
|
color: #333;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-50 {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
|
||||||
|
.uni-popper__arrow,
|
||||||
|
.uni-popper__arrow::after {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popper__arrow {
|
||||||
|
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||||
|
top: -6px;
|
||||||
|
left: 10%;
|
||||||
|
margin-right: 3px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #EBEEF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popper__arrow::after {
|
||||||
|
content: " ";
|
||||||
|
top: 1px;
|
||||||
|
margin-left: -6px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
{
|
||||||
|
"name" : "太极",
|
||||||
|
"appid" : "__UNI__73F0D10",
|
||||||
|
"description" : "",
|
||||||
|
"versionName" : "1.0.0",
|
||||||
|
"versionCode" : "100",
|
||||||
|
"transformPx" : false,
|
||||||
|
/* 5+App特有相关 */
|
||||||
|
"app-plus" : {
|
||||||
|
"usingComponents" : true,
|
||||||
|
"nvueStyleCompiler" : "uni-app",
|
||||||
|
"compilerVersion" : 3,
|
||||||
|
"splashscreen" : {
|
||||||
|
"alwaysShowBeforeRender" : true,
|
||||||
|
"waiting" : true,
|
||||||
|
"autoclose" : true,
|
||||||
|
"delay" : 0
|
||||||
|
},
|
||||||
|
/* 模块配置 */
|
||||||
|
"modules" : {},
|
||||||
|
/* 应用发布信息 */
|
||||||
|
"distribute" : {
|
||||||
|
/* android打包配置 */
|
||||||
|
"android" : {
|
||||||
|
"permissions" : [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* ios打包配置 */
|
||||||
|
"ios" : {},
|
||||||
|
/* SDK配置 */
|
||||||
|
"sdkConfigs" : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 快应用特有相关 */
|
||||||
|
"quickapp" : {},
|
||||||
|
/* 小程序特有相关 */
|
||||||
|
"mp-weixin" : {
|
||||||
|
"appid" : "wxbcce181903c8097f",
|
||||||
|
"setting" : {
|
||||||
|
"urlCheck" : false,
|
||||||
|
"es6" : false,
|
||||||
|
"minified" : false,
|
||||||
|
"postcss" : false
|
||||||
|
},
|
||||||
|
"usingComponents" : true,
|
||||||
|
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],
|
||||||
|
"permission" : {
|
||||||
|
"scope.userLocation" : {
|
||||||
|
"desc" : "用于获取您附近的商家"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"mp-alipay" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-baidu" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-toutiao" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"uniStatistics" : {
|
||||||
|
"enable" : false
|
||||||
|
},
|
||||||
|
"vueVersion" : "2"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<view class="pl-20 pr-20 pt-20" style="line-height: 1.6;">
|
||||||
|
<rich-text :nodes="text"></rich-text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
type: 0,
|
||||||
|
text: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
this.type = e.type
|
||||||
|
let system = uni.getStorageSync('system')
|
||||||
|
if (this.type == 0) {
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: '用户协议'
|
||||||
|
})
|
||||||
|
this.text = system[11]
|
||||||
|
} else if (this.type == 1) {
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: '隐私政策'
|
||||||
|
})
|
||||||
|
this.text = system[9]
|
||||||
|
} else {
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: '关于我们'
|
||||||
|
})
|
||||||
|
this.text = system[10]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,169 @@
|
||||||
|
## 插件说明
|
||||||
|
|
||||||
|
> 这是 `v-tabs` 插件的升级版本，参数上有很大变动，支持 `H5` `小程序` `手机端`，如果是在之前的插件上升级的话，请注意参数的变更，触发的事件没有变更。
|
||||||
|
|
||||||
|
## 使用说明
|
||||||
|
|
||||||
|
### 1、最基本用法
|
||||||
|
|
||||||
|
- 视图文件
|
||||||
|
|
||||||
|
```html
|
||||||
|
<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
|
||||||
|
```
|
||||||
|
|
||||||
|
- 脚本文件
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: 0,
|
||||||
|
tabs: [
|
||||||
|
'军事',
|
||||||
|
'国内',
|
||||||
|
'新闻新闻',
|
||||||
|
'军事',
|
||||||
|
'国内',
|
||||||
|
'新闻',
|
||||||
|
'军事',
|
||||||
|
'国内',
|
||||||
|
'新闻',
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeTab(index) {
|
||||||
|
console.log('当前选中的项：' + index)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2、平铺整个屏幕
|
||||||
|
|
||||||
|
- 视图文件
|
||||||
|
|
||||||
|
```html
|
||||||
|
<v-tabs
|
||||||
|
v-model="activeTab"
|
||||||
|
:scroll="false"
|
||||||
|
:tabs="['全部', '进行中', '已完成']"
|
||||||
|
></v-tabs>
|
||||||
|
```
|
||||||
|
|
||||||
|
- 脚本文件
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeTab: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3、胶囊用法
|
||||||
|
|
||||||
|
- 视图文件
|
||||||
|
|
||||||
|
```html
|
||||||
|
<v-tabs
|
||||||
|
v-model="current"
|
||||||
|
:tabs="tabs"
|
||||||
|
:pills="true"
|
||||||
|
line-height="0"
|
||||||
|
activeColor="#fff"
|
||||||
|
@change="changeTab"
|
||||||
|
></v-tabs>
|
||||||
|
```
|
||||||
|
|
||||||
|
- 脚本文件
|
||||||
|
|
||||||
|
```js
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: 2,
|
||||||
|
tabs: [
|
||||||
|
'军事',
|
||||||
|
'国内',
|
||||||
|
'新闻新闻',
|
||||||
|
'军事',
|
||||||
|
'国内',
|
||||||
|
'新闻',
|
||||||
|
'军事',
|
||||||
|
'国内',
|
||||||
|
'新闻',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeTab(index) {
|
||||||
|
console.log('当前选中索引：' + index)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 文档说明
|
||||||
|
|
||||||
|
### 1、属性说明
|
||||||
|
|
||||||
|
| 参数 | 类型 | 默认值 | 说明 |
|
||||||
|
| :---------------: | :-----: | :-------: | :--------------------------------------: |
|
||||||
|
| value | Number | 0 | 必传(双向绑定的值) |
|
||||||
|
| color | String | '#333' | 默认文字颜色 |
|
||||||
|
| activeColor | String | '#2979ff' | 选中文字的颜色 |
|
||||||
|
| fontSize | String | '28rpx' | 默认文字大小(rpx 或 px) |
|
||||||
|
| bold | Boolean | true | 是否加粗选中项 |
|
||||||
|
| scroll | Boolean | true | 是否显示滚动条，平铺设置 false |
|
||||||
|
| height | String | '70rpx' | tab 高度(rpx 或 px) |
|
||||||
|
| lineHeight | String | '10rpx' | 滑块高度(rpx 或 px) |
|
||||||
|
| lineColor | String | '#2979ff' | 滑块的颜色 |
|
||||||
|
| lineScale | Number | 0.5 | 滑块宽度缩放值 |
|
||||||
|
| lineRadius | String | '10rpx' | 滑块圆角宽度(rpx 或 px) |
|
||||||
|
| pills | Boolean | false | 是否开启胶囊 |
|
||||||
|
| pillsColor | String | '#2979ff' | 胶囊背景颜色(rpx 或 px) |
|
||||||
|
| pillsBorderRadius | String | '10rpx' | 胶囊圆角宽度(rpx 或 px) |
|
||||||
|
| field | String | '' | 如果 tabs 子项是对象，输入需要展示的键名 |
|
||||||
|
| bgColor | String | '#fff' | 背景色，支持 linear-gradient 渐变 |
|
||||||
|
| padding | String | '0' | 整个 tab padding 属性 |
|
||||||
|
|
||||||
|
### 2、事件说明
|
||||||
|
|
||||||
|
| 名称 | 参数 | 说明 |
|
||||||
|
| :----: | :---: | :--------------------------------: |
|
||||||
|
| change | index | 改变选中项触发, index 选中项的下标 |
|
||||||
|
|
||||||
|
## 更新日志
|
||||||
|
|
||||||
|
### 2020-08-29
|
||||||
|
|
||||||
|
1. 优化异步改变 `tabs` 后，下划线不初始化问题
|
||||||
|
2. `github` 地址上有图 2 的源码，需要的自行下载，页面路径：`pages/tabs/order.vue`
|
||||||
|
|
||||||
|
### 2020-08-20
|
||||||
|
|
||||||
|
1. 优化 `节点查询` 和 `选中渲染`
|
||||||
|
2. 优化支付宝中 `createSelectorQuery()` 的影响
|
||||||
|
|
||||||
|
### 2020-08-19
|
||||||
|
|
||||||
|
1. 优化 `change` 事件触发机制
|
||||||
|
|
||||||
|
### 2020-08-16
|
||||||
|
|
||||||
|
1. 修改默认高度为 `70rpx`
|
||||||
|
2. 新增属性 `bgColor`，可设置背景颜色，默认 `#fff`
|
||||||
|
3. 新增整个 `tab` 的 `padding` 属性，默认 `0`
|
||||||
|
|
||||||
|
### 2020-08-13
|
||||||
|
|
||||||
|
1. 全新的 `v-tabs 2.0`
|
||||||
|
2. 支持 `H5` `小程序` `APP`
|
||||||
|
3. 属性高度可配置
|
||||||
|
|
||||||
|
## 预览
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
## 1.2.2（2021-12-29）
|
||||||
|
- 更新 组件依赖
|
||||||
|
## 1.2.1（2021-11-19）
|
||||||
|
- 修复 阴影颜色不正确的bug
|
||||||
|
## 1.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fab](https://uniapp.dcloud.io/component/uniui/uni-fab)
|
||||||
|
## 1.1.1（2021-11-09）
|
||||||
|
- 新增 提供组件设计资源，组件样式调整
|
||||||
|
## 1.1.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.7（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.0.6（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 优化 按钮背景色调整
|
||||||
|
- 优化 兼容pc端
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
## 1.0.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-dateformat](https://uniapp.dcloud.io/component/uniui/uni-dateformat)
|
||||||
|
## 0.0.5（2021-07-08）
|
||||||
|
- 调整 默认时间不再是当前时间，而是显示'-'字符
|
||||||
|
## 0.0.4（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 0.0.3（2021-02-04）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 修复 iOS 平台日期格式化出错的问题
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<view class="pl-30 pr-30 fs-30 pt-50 fw-600" style="line-height: 1.8;">
|
||||||
|
<view>账号取消后：</view>
|
||||||
|
<view>以下信息将被清空且无法找回</view>
|
||||||
|
<view>
|
||||||
|
<view>1、身份，账号信息等权限</view>
|
||||||
|
<view>2、图片库所有信息</view>
|
||||||
|
<view>3、所有投放订单信息</view>
|
||||||
|
<view>4、请确保所有交易已完结且无纠纷,账号删除后,历史交易可能产生资金退出将视为自动放弃</view>
|
||||||
|
</view>
|
||||||
|
<view class="rowsc pt-100">
|
||||||
|
<view @tap="deleteAccount" class="h-94 w-550 br-60 rowsc rowsm colfff" style="background-image: linear-gradient(#97e1de,#18a5a8);">立即注销</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
deleteAccount() {
|
||||||
|
this.axiosFromToken('POST', 'user/zhuxiaoAccount', {
|
||||||
|
token: this.app.token
|
||||||
|
}, '加载中').then(res => {
|
||||||
|
if (res.code == 1) {
|
||||||
|
this.outLogin()
|
||||||
|
} else {
|
||||||
|
this.showtt(res.msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
outLogin() {//退出登录
|
||||||
|
uni.removeStorage({
|
||||||
|
key: 'token'
|
||||||
|
})
|
||||||
|
uni.removeStorage({
|
||||||
|
key: 'userInfo'
|
||||||
|
})
|
||||||
|
getApp().globalData.token = ''
|
||||||
|
getApp().globalData.userInfo = {}
|
||||||
|
this.$tools.goReLaunch('/pages/login/login/login')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,270 @@
|
||||||
|
const MIN_DISTANCE = 10;
|
||||||
|
export default {
|
||||||
|
showWatch(newVal, oldVal, ownerInstance, instance,self) {
|
||||||
|
var state = self.state
|
||||||
|
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
|
||||||
|
if(!$el) return
|
||||||
|
this.getDom(instance, ownerInstance,self)
|
||||||
|
if (newVal && newVal !== 'none') {
|
||||||
|
this.openState(newVal, instance, ownerInstance,self)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state.left) {
|
||||||
|
this.openState('none', instance, ownerInstance,self)
|
||||||
|
}
|
||||||
|
this.resetTouchStatus(instance,self)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始触摸操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ins
|
||||||
|
*/
|
||||||
|
touchstart(e, ownerInstance, self) {
|
||||||
|
let instance = e.instance;
|
||||||
|
let disabled = instance.getDataset().disabled
|
||||||
|
let state = self.state;
|
||||||
|
this.getDom(instance, ownerInstance, self)
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = this.getDisabledType(disabled)
|
||||||
|
if (disabled) return
|
||||||
|
// 开始触摸时移除动画类
|
||||||
|
instance.requestAnimationFrame(function() {
|
||||||
|
instance.removeClass('ani');
|
||||||
|
ownerInstance.callMethod('closeSwipe');
|
||||||
|
})
|
||||||
|
|
||||||
|
// 记录上次的位置
|
||||||
|
state.x = state.left || 0
|
||||||
|
// 计算滑动开始位置
|
||||||
|
this.stopTouchStart(e, ownerInstance, self)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始滑动操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
touchmove(e, ownerInstance, self) {
|
||||||
|
let instance = e.instance;
|
||||||
|
// 删除之后已经那不到实例了
|
||||||
|
if(!instance) return;
|
||||||
|
let disabled = instance.getDataset().disabled
|
||||||
|
let state = self.state
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = this.getDisabledType(disabled)
|
||||||
|
if (disabled) return
|
||||||
|
// 是否可以滑动页面
|
||||||
|
this.stopTouchMove(e, self);
|
||||||
|
if (state.direction !== 'horizontal') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (e.preventDefault) {
|
||||||
|
// 阻止页面滚动
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
let x = state.x + state.deltaX
|
||||||
|
this.move(x, instance, ownerInstance, self)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 结束触摸操作
|
||||||
|
* @param {Object} e
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
touchend(e, ownerInstance, self) {
|
||||||
|
let instance = e.instance;
|
||||||
|
let disabled = instance.getDataset().disabled
|
||||||
|
let state = self.state
|
||||||
|
// fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
|
||||||
|
disabled = this.getDisabledType(disabled)
|
||||||
|
|
||||||
|
if (disabled) return
|
||||||
|
// 滑动过程中触摸结束,通过阙值判断是开启还是关闭
|
||||||
|
// fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
|
||||||
|
this.moveDirection(state.left, instance, ownerInstance, self)
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置移动距离
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} instance
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
move(value, instance, ownerInstance, self) {
|
||||||
|
value = value || 0
|
||||||
|
let state = self.state
|
||||||
|
let leftWidth = state.leftWidth
|
||||||
|
let rightWidth = state.rightWidth
|
||||||
|
// 获取可滑动范围
|
||||||
|
state.left = this.range(value, -rightWidth, leftWidth);
|
||||||
|
instance.requestAnimationFrame(function() {
|
||||||
|
instance.setStyle({
|
||||||
|
transform: 'translateX(' + state.left + 'px)',
|
||||||
|
'-webkit-transform': 'translateX(' + state.left + 'px)'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取元素信息
|
||||||
|
* @param {Object} instance
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
getDom(instance, ownerInstance, self) {
|
||||||
|
var state = self.state
|
||||||
|
var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
|
||||||
|
var leftDom = $el.querySelector('.button-group--left')
|
||||||
|
var rightDom = $el.querySelector('.button-group--right')
|
||||||
|
|
||||||
|
state.leftWidth = leftDom.offsetWidth || 0
|
||||||
|
state.rightWidth = rightDom.offsetWidth || 0
|
||||||
|
state.threshold = instance.getDataset().threshold
|
||||||
|
},
|
||||||
|
|
||||||
|
getDisabledType(value) {
|
||||||
|
return (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取范围
|
||||||
|
* @param {Object} num
|
||||||
|
* @param {Object} min
|
||||||
|
* @param {Object} max
|
||||||
|
*/
|
||||||
|
range(num, min, max) {
|
||||||
|
return Math.min(Math.max(num, min), max);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动方向判断
|
||||||
|
* @param {Object} left
|
||||||
|
* @param {Object} value
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
* @param {Object} ins
|
||||||
|
*/
|
||||||
|
moveDirection(left, ins, ownerInstance, self) {
|
||||||
|
var state = self.state
|
||||||
|
var threshold = state.threshold
|
||||||
|
var position = state.position
|
||||||
|
var isopen = state.isopen || 'none'
|
||||||
|
var leftWidth = state.leftWidth
|
||||||
|
var rightWidth = state.rightWidth
|
||||||
|
if (state.deltaX === 0) {
|
||||||
|
this.openState('none', ins, ownerInstance, self)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
|
||||||
|
rightWidth +
|
||||||
|
left < threshold)) {
|
||||||
|
// right
|
||||||
|
this.openState('right', ins, ownerInstance, self)
|
||||||
|
} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
|
||||||
|
leftWidth - left < threshold)) {
|
||||||
|
// left
|
||||||
|
this.openState('left', ins, ownerInstance, self)
|
||||||
|
} else {
|
||||||
|
// default
|
||||||
|
this.openState('none', ins, ownerInstance, self)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开启状态
|
||||||
|
* @param {Boolean} type
|
||||||
|
* @param {Object} ins
|
||||||
|
* @param {Object} ownerInstance
|
||||||
|
*/
|
||||||
|
openState(type, ins, ownerInstance, self) {
|
||||||
|
let state = self.state
|
||||||
|
let leftWidth = state.leftWidth
|
||||||
|
let rightWidth = state.rightWidth
|
||||||
|
let left = ''
|
||||||
|
state.isopen = state.isopen ? state.isopen : 'none'
|
||||||
|
switch (type) {
|
||||||
|
case "left":
|
||||||
|
left = leftWidth
|
||||||
|
break
|
||||||
|
case "right":
|
||||||
|
left = -rightWidth
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
left = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// && !state.throttle
|
||||||
|
|
||||||
|
if (state.isopen !== type) {
|
||||||
|
state.throttle = true
|
||||||
|
ownerInstance.callMethod('change', {
|
||||||
|
open: type
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
state.isopen = type
|
||||||
|
// 添加动画类
|
||||||
|
ins.requestAnimationFrame(()=> {
|
||||||
|
ins.addClass('ani');
|
||||||
|
this.move(left, ins, ownerInstance, self)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
getDirection(x, y) {
|
||||||
|
if (x > y && x > MIN_DISTANCE) {
|
||||||
|
return 'horizontal';
|
||||||
|
}
|
||||||
|
if (y > x && y > MIN_DISTANCE) {
|
||||||
|
return 'vertical';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置滑动状态
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
resetTouchStatus(instance, self) {
|
||||||
|
let state = self.state;
|
||||||
|
state.direction = '';
|
||||||
|
state.deltaX = 0;
|
||||||
|
state.deltaY = 0;
|
||||||
|
state.offsetX = 0;
|
||||||
|
state.offsetY = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置滑动开始位置
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
stopTouchStart(event, ownerInstance, self) {
|
||||||
|
let instance = event.instance;
|
||||||
|
let state = self.state
|
||||||
|
this.resetTouchStatus(instance, self);
|
||||||
|
var touch = event.touches[0];
|
||||||
|
state.startX = touch.clientX;
|
||||||
|
state.startY = touch.clientY;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 滑动中，是否禁止打开
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
stopTouchMove(event, self) {
|
||||||
|
let instance = event.instance;
|
||||||
|
let state = self.state;
|
||||||
|
let touch = event.touches[0];
|
||||||
|
|
||||||
|
state.deltaX = touch.clientX - state.startX;
|
||||||
|
state.deltaY = touch.clientY - state.startY;
|
||||||
|
state.offsetY = Math.abs(state.deltaY);
|
||||||
|
state.offsetX = Math.abs(state.deltaX);
|
||||||
|
state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
<template>
|
||||||
|
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
|
||||||
|
:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
|
||||||
|
<view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
|
||||||
|
index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
|
||||||
|
index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
|
||||||
|
index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
|
||||||
|
:style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
|
||||||
|
class="segmented-control__item" @click="_onClick(index)">
|
||||||
|
<view>
|
||||||
|
<text :style="{color:
|
||||||
|
index === currentIndex
|
||||||
|
? styleType === 'text'
|
||||||
|
? activeColor
|
||||||
|
: '#fff'
|
||||||
|
: styleType === 'text'
|
||||||
|
? '#000'
|
||||||
|
: activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* SegmentedControl 分段器
|
||||||
|
* @description 用作不同视图的显示
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=54
|
||||||
|
* @property {Number} current 当前选中的tab索引值，从0计数
|
||||||
|
* @property {String} styleType = [button|text] 分段器样式类型
|
||||||
|
* @value button 按钮类型
|
||||||
|
* @value text 文字类型
|
||||||
|
* @property {String} activeColor 选中的标签背景色与边框颜色
|
||||||
|
* @property {Array} values 选项数组
|
||||||
|
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniSegmentedControl',
|
||||||
|
emits: ['clickItem'],
|
||||||
|
props: {
|
||||||
|
current: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
values: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#2979FF'
|
||||||
|
},
|
||||||
|
styleType: {
|
||||||
|
type: String,
|
||||||
|
default: 'button'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current(val) {
|
||||||
|
if (val !== this.currentIndex) {
|
||||||
|
this.currentIndex = val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.currentIndex = this.current
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_onClick(index) {
|
||||||
|
if (this.currentIndex !== index) {
|
||||||
|
this.currentIndex = index
|
||||||
|
this.$emit('clickItem', {
|
||||||
|
currentIndex: index
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.segmented-control {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
height: 36px;
|
||||||
|
overflow: hidden;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item--button {
|
||||||
|
border-style: solid;
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-left-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item--button--first {
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item--button--last {
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__item--text {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control__text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view>
|
||||||
|
<view class="pb-16" v-for="(item,index) in 2" :key="index">
|
||||||
|
<view class="rowsb pl-20 pr-20 pt-24 pb-16">
|
||||||
|
<view class="rows rowsm">
|
||||||
|
<image src="/static/wd_gr.png" class="h-68 w-68"></image>
|
||||||
|
<view class="fs-28 pl-20">王唤七</view>
|
||||||
|
</view>
|
||||||
|
<view class="rows rowsm fs-28">
|
||||||
|
<text style="color: #FF6F00;">好评</text>
|
||||||
|
<image src="/static/index/haoping.png" class="w-52 h-52 ml-10"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="pl-20 pr-20 fs-26 col333">我是评价信息，我是评价信息，我是评价信息，我是评价信息，我是评价信息，我是评价信息，我是评价信息。</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,10 @@
|
||||||
|
|
||||||
|
|
||||||
|
## CountDown 倒计时
|
||||||
|
> **组件名：uni-countdown**
|
||||||
|
> 代码块： `uCountDown`
|
||||||
|
|
||||||
|
倒计时组件。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
<template>
|
||||||
|
<view class="fs-30 col333">
|
||||||
|
<view class="bgff">
|
||||||
|
<view class="pl-30 pr-30 bgff rowsb rowsm h-120" style="border-bottom: 2rpx solid #f1f1f1;">
|
||||||
|
<view class="f-5 one_overflow">姓名</view>
|
||||||
|
<input v-model="parmas.name" placeholder="请输入姓名" class="f-5 trt fs-26 col666"/>
|
||||||
|
</view>
|
||||||
|
<view class="pl-30 pr-30 bgff mt-10 rowsb rowsm h-120" style="border-bottom: 2rpx solid #f1f1f1;">
|
||||||
|
<view class="f-5 one_overflow">身份证号</view>
|
||||||
|
<input v-model="parmas.id_numbber" placeholder="请输入所属银行" class="f-5 trt fs-26 col666"/>
|
||||||
|
</view>
|
||||||
|
<view class="pl-30 pr-30 bgff mt-10 rowsb rowsm h-120" style="border-bottom: 2rpx solid #f1f1f1;">
|
||||||
|
<view class="f-5 one_overflow">银行开户行</view>
|
||||||
|
<input v-model="parmas.bank_name" placeholder="请输入银行开户行" class="f-5 trt fs-26 col666"/>
|
||||||
|
</view>
|
||||||
|
<view class="pl-30 pr-30 bgff mt-10 rowsb rowsm h-120" style="border-bottom: 2rpx solid #f1f1f1;">
|
||||||
|
<view class="f-5 one_overflow">卡号</view>
|
||||||
|
<input v-model="parmas.card_number" type="number" placeholder="请输入卡号" class="f-5 trt fs-26 col666"/>
|
||||||
|
</view>
|
||||||
|
<view class="pl-30 pr-30 bgff mt-10 rowsb rowsm h-120" style="border-bottom: 2rpx solid #f1f1f1;">
|
||||||
|
<view class="f-5 one_overflow">预留手机号</view>
|
||||||
|
<input v-model="parmas.yu_mobile" type="number" placeholder="请输入预留手机号" class="f-5 trt fs-26 col666"/>
|
||||||
|
</view>
|
||||||
|
<view class="pl-30 pr-30 bgff mt-10 rowsb rowsm h-120" style="border-bottom: 2rpx solid #f1f1f1;">
|
||||||
|
<view class="f-5 one_overflow">提现金额<text class="fs-24 col999 ml-4">(提现手续费1%)</text></view>
|
||||||
|
<input v-model="parmas.amount" type="number" placeholder="请输入提现金额" class="f-5 trt fs-26 col666"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view @tap="saveCare" class="w-690 h-100 br-20 mt-80 fs-30 colfff tct lh-100 ml-30 bg">立即提现</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
parmas: {
|
||||||
|
id_numbber: '',
|
||||||
|
bank_name: '',//开户人
|
||||||
|
name: '',//银行
|
||||||
|
card_number: '',//开户行
|
||||||
|
amount: '',//银行卡号
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
saveCare() {
|
||||||
|
let bool = this.$tools.formInfo(this.parmas)
|
||||||
|
if (!bool) return this.showtt('字段不能为空')
|
||||||
|
this.axiosFromToken('POST','store_merchandise/applyWithdrawal', this.parmas, '加载中').then(res => {
|
||||||
|
if (res.code == 1) {
|
||||||
|
this.showtt('申请成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.goBack()
|
||||||
|
},500)
|
||||||
|
} else {
|
||||||
|
this.showtt(res.msg)
|
||||||
|
for (let key in this.parmas) {
|
||||||
|
this.parmas[key] = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
page {
|
||||||
|
background: #f5f7f9;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,193 @@
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
x: 0,
|
||||||
|
transition: false,
|
||||||
|
width: 0,
|
||||||
|
viewWidth: 0,
|
||||||
|
swipeShow: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(newVal) {
|
||||||
|
if (this.autoClose) return
|
||||||
|
if (newVal && newVal !== 'none' ) {
|
||||||
|
this.transition = true
|
||||||
|
this.open(newVal)
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.swipeaction = this.getSwipeAction()
|
||||||
|
if (this.swipeaction.children !== undefined) {
|
||||||
|
this.swipeaction.children.push(this)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.isopen = false
|
||||||
|
setTimeout(() => {
|
||||||
|
this.getQuerySelect()
|
||||||
|
}, 50)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
appTouchStart(e) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
this.clientX = clientX
|
||||||
|
this.timestamp = new Date().getTime()
|
||||||
|
},
|
||||||
|
appTouchEnd(e, index, item, position) {
|
||||||
|
const {
|
||||||
|
clientX
|
||||||
|
} = e.changedTouches[0]
|
||||||
|
// fixed by xxxx 模拟点击事件，解决 ios 13 点击区域错位的问题
|
||||||
|
let diff = Math.abs(this.clientX - clientX)
|
||||||
|
let time = (new Date().getTime()) - this.timestamp
|
||||||
|
if (diff < 40 && time < 300) {
|
||||||
|
this.$emit('click', {
|
||||||
|
content: item,
|
||||||
|
index,
|
||||||
|
position
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 移动触发
|
||||||
|
* @param {Object} e
|
||||||
|
*/
|
||||||
|
onChange(e) {
|
||||||
|
this.moveX = e.detail.x
|
||||||
|
this.isclose = false
|
||||||
|
},
|
||||||
|
touchstart(e) {
|
||||||
|
this.transition = false
|
||||||
|
this.isclose = true
|
||||||
|
this.autoClose && this.swipeaction.closeOther(this)
|
||||||
|
},
|
||||||
|
touchmove(e) {},
|
||||||
|
touchend(e) {
|
||||||
|
// 0的位置什么都不执行
|
||||||
|
if (this.isclose && this.isopen === 'none') return
|
||||||
|
if (this.isclose && this.isopen !== 'none') {
|
||||||
|
this.transition = true
|
||||||
|
this.close()
|
||||||
|
} else {
|
||||||
|
this.move(this.moveX + this.leftWidth)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动
|
||||||
|
* @param {Object} moveX
|
||||||
|
*/
|
||||||
|
move(moveX) {
|
||||||
|
// 打开关闭的处理逻辑不太一样
|
||||||
|
this.transition = true
|
||||||
|
// 未打开状态
|
||||||
|
if (!this.isopen || this.isopen === 'none') {
|
||||||
|
if (moveX > this.threshold) {
|
||||||
|
this.open('left')
|
||||||
|
} else if (moveX < -this.threshold) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (moveX < 0 && moveX < this.rightWidth) {
|
||||||
|
const rightX = this.rightWidth + moveX
|
||||||
|
if (rightX < this.threshold) {
|
||||||
|
this.open('right')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
} else if (moveX > 0 && moveX < this.leftWidth) {
|
||||||
|
const leftX = this.leftWidth - moveX
|
||||||
|
if (leftX < this.threshold) {
|
||||||
|
this.open('left')
|
||||||
|
} else {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开
|
||||||
|
*/
|
||||||
|
open(type) {
|
||||||
|
this.x = this.moveX
|
||||||
|
this.animation(type)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.x = this.moveX
|
||||||
|
// TODO 解决 x 值不更新的问题，所以会多触发一次 nextTick ，待优化
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.x = -this.leftWidth
|
||||||
|
if(this.isopen!=='none'){
|
||||||
|
this.$emit('change', 'none')
|
||||||
|
}
|
||||||
|
this.isopen = 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行结束动画
|
||||||
|
* @param {Object} type
|
||||||
|
*/
|
||||||
|
animation(type) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (type === 'left') {
|
||||||
|
this.x = 0
|
||||||
|
} else {
|
||||||
|
this.x = -this.rightWidth - this.leftWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.isopen!==type){
|
||||||
|
this.$emit('change', type)
|
||||||
|
}
|
||||||
|
this.isopen = type
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
getSlide(x) {},
|
||||||
|
getQuerySelect() {
|
||||||
|
const query = uni.createSelectorQuery().in(this);
|
||||||
|
query.selectAll('.movable-view--hock').boundingClientRect(data => {
|
||||||
|
this.leftWidth = data[1].width
|
||||||
|
this.rightWidth = data[2].width
|
||||||
|
this.width = data[0].width
|
||||||
|
this.viewWidth = this.width + this.rightWidth + this.leftWidth
|
||||||
|
if (this.leftWidth === 0) {
|
||||||
|
// TODO 疑似bug ,初始化的时候如果x 是0，会导致移动位置错误，所以让元素超出一点
|
||||||
|
this.x = -0.1
|
||||||
|
} else {
|
||||||
|
this.x = -this.leftWidth
|
||||||
|
}
|
||||||
|
this.moveX = this.x
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.swipeShow = 1
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!this.buttonWidth) {
|
||||||
|
this.disabledView = true
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.autoClose) return
|
||||||
|
if (this.show !== 'none') {
|
||||||
|
this.transition = true
|
||||||
|
this.open(this.shows)
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
|
|
@ -0,0 +1,87 @@
|
||||||
|
{
|
||||||
|
"id": "uni-link",
|
||||||
|
"displayName": "uni-link 超链接",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"link",
|
||||||
|
"超链接",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,45 @@
|
||||||
|
// #ifdef H5
|
||||||
|
export default {
|
||||||
|
name: 'Keypress',
|
||||||
|
props: {
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const keyNames = {
|
||||||
|
esc: ['Esc', 'Escape'],
|
||||||
|
tab: 'Tab',
|
||||||
|
enter: 'Enter',
|
||||||
|
space: [' ', 'Spacebar'],
|
||||||
|
up: ['Up', 'ArrowUp'],
|
||||||
|
left: ['Left', 'ArrowLeft'],
|
||||||
|
right: ['Right', 'ArrowRight'],
|
||||||
|
down: ['Down', 'ArrowDown'],
|
||||||
|
delete: ['Backspace', 'Delete', 'Del']
|
||||||
|
}
|
||||||
|
const listener = ($event) => {
|
||||||
|
if (this.disable) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const keyName = Object.keys(keyNames).find(key => {
|
||||||
|
const keyName = $event.key
|
||||||
|
const value = keyNames[key]
|
||||||
|
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||||
|
})
|
||||||
|
if (keyName) {
|
||||||
|
// 避免和其他按键事件冲突
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit(keyName, {})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener('keyup', listener)
|
||||||
|
// this.$once('hook:beforeDestroy', () => {
|
||||||
|
// document.removeEventListener('keyup', listener)
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
render: () => {}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
|
||||||
|
## SwipeAction 滑动操作
|
||||||
|
> **组件名：uni-swipe-action**
|
||||||
|
> 代码块： `uSwipeAction`、`uSwipeActionItem`
|
||||||
|
|
||||||
|
|
||||||
|
通过滑动触发选项的容器
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swipe-action)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-group" :class="['uni-group--'+mode ,margin?'group-margin':'']" :style="{marginTop: `${top}px` }">
|
||||||
|
<slot name="title">
|
||||||
|
<view v-if="title" class="uni-group__title" :style="{'padding-left':border?'30px':'15px'}">
|
||||||
|
<text class="uni-group__title-text">{{ title }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<view class="uni-group__content" :class="{'group-conent-padding':border}">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Group 分组
|
||||||
|
* @description 表单字段分组
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=3281
|
||||||
|
* @property {String} title 主标题
|
||||||
|
* @property {Number} top 分组间隔
|
||||||
|
* @property {Number} mode 模式
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniGroup',
|
||||||
|
emits:['click'],
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
top: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
margin: false,
|
||||||
|
border: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
title(newVal) {
|
||||||
|
if (uni.report && newVal !== '') {
|
||||||
|
uni.report('title', newVal)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form = this.getForm()
|
||||||
|
if (this.form) {
|
||||||
|
this.margin = true
|
||||||
|
this.border = this.form.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm() {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== 'uniForms') {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-group {
|
||||||
|
background: #fff;
|
||||||
|
margin-top: 10px;
|
||||||
|
// border: 1px red solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-margin {
|
||||||
|
// margin: 0 -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-group__title {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 15px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #eee;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-group__content {
|
||||||
|
padding: 15px;
|
||||||
|
// padding-bottom: 5px;
|
||||||
|
// background-color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-conent-padding {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-group__title-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.distraction {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-group--card {
|
||||||
|
margin: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.08);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Combox 组合框
|
||||||
|
> **组件名：uni-combox**
|
||||||
|
> 代码块： `uCombox`
|
||||||
|
|
||||||
|
|
||||||
|
组合框组件。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
@mixin radius($r,$d:null ,$important: false){
|
||||||
|
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||||
|
// Key exists within the $uni-radius variable
|
||||||
|
@if (map-has-key($uni-radius, $r) and $d){
|
||||||
|
@if $d == t {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
}@else if $d == r {
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == b {
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == l {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
}@else if $d == tl {
|
||||||
|
border-top-left-radius:$radius-value;
|
||||||
|
}@else if $d == tr {
|
||||||
|
border-top-right-radius:$radius-value;
|
||||||
|
}@else if $d == br {
|
||||||
|
border-bottom-right-radius:$radius-value;
|
||||||
|
}@else if $d == bl {
|
||||||
|
border-bottom-left-radius:$radius-value;
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
border-radius:$radius-value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $child in $uni-radius {
|
||||||
|
@if($key){
|
||||||
|
.uni-radius-#{"" + $key} {
|
||||||
|
@include radius($key)
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
.uni-radius {
|
||||||
|
@include radius($key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||||
|
@each $key, $child in $uni-radius {
|
||||||
|
@if($key){
|
||||||
|
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||||
|
@include radius($key,$direction,false)
|
||||||
|
}
|
||||||
|
}@else{
|
||||||
|
.uni-radius-#{$direction} {
|
||||||
|
@include radius($key,$direction,false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
|
||||||
|
|
||||||
|
## DataCheckbox 数据驱动的单选复选框
|
||||||
|
> **组件名：uni-data-checkbox**
|
||||||
|
> 代码块： `uDataCheckbox`
|
||||||
|
|
||||||
|
|
||||||
|
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
|
||||||
|
|
||||||
|
1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
|
||||||
|
2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
|
||||||
|
3. 本组件合并了单选多选
|
||||||
|
4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
|
||||||
|
|
||||||
|
在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,395 @@
|
||||||
|
<template>
|
||||||
|
<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
|
||||||
|
<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound"
|
||||||
|
:color="color" size="22" />
|
||||||
|
<view ref="textBox" class="uni-noticebar__content-wrapper"
|
||||||
|
:class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
|
||||||
|
<view :id="elIdBox" class="uni-noticebar__content"
|
||||||
|
:class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
|
||||||
|
<text :id="elId" ref="animationEle" class="uni-noticebar__content-text"
|
||||||
|
:class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || showGetMore)}"
|
||||||
|
:style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point"
|
||||||
|
@click="clickMore">
|
||||||
|
<text v-if="moreText.length > 0" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
|
||||||
|
<uni-icons v-else type="right" :color="moreColor" size="16" />
|
||||||
|
</view>
|
||||||
|
<view class="uni-noticebar-close uni-cursor-point" v-if="(showClose === true || showClose === 'true') && (showGetMore === false || showGetMore === 'false')">
|
||||||
|
<uni-icons
|
||||||
|
type="closeempty" :color="color" size="16" @click="close" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const dom = weex.requireModule('dom');
|
||||||
|
const animation = weex.requireModule('animation');
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
/**
|
||||||
|
* NoticeBar 自定义导航栏
|
||||||
|
* @description 通告栏组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=30
|
||||||
|
* @property {Number} speed 文字滚动的速度，默认100px/秒
|
||||||
|
* @property {String} text 显示文字
|
||||||
|
* @property {String} backgroundColor 背景颜色
|
||||||
|
* @property {String} color 文字颜色
|
||||||
|
* @property {String} moreColor 查看更多文字的颜色
|
||||||
|
* @property {String} moreText 设置“查看更多”的文本
|
||||||
|
* @property {Boolean} single = [true|false] 是否单行
|
||||||
|
* @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
|
||||||
|
* @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
|
||||||
|
* @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
|
||||||
|
* @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
|
||||||
|
* @event {Function} click 点击 NoticeBar 触发事件
|
||||||
|
* @event {Function} close 关闭 NoticeBar 触发事件
|
||||||
|
* @event {Function} getmore 点击”查看更多“时触发事件
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniNoticeBar',
|
||||||
|
emits: ['click', 'getmore', 'close'],
|
||||||
|
props: {
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
moreText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#FFF9EA'
|
||||||
|
},
|
||||||
|
speed: {
|
||||||
|
// 默认1s滚动100px
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#FF9A43'
|
||||||
|
},
|
||||||
|
moreColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#FF9A43'
|
||||||
|
},
|
||||||
|
single: {
|
||||||
|
// 是否单行
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
scrollable: {
|
||||||
|
// 是否滚动，添加后控制单行效果取消
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showIcon: {
|
||||||
|
// 是否显示左侧icon
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showGetMore: {
|
||||||
|
// 是否显示右侧查看更多
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showClose: {
|
||||||
|
// 是否显示左侧关闭按钮
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||||
|
const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
|
||||||
|
return {
|
||||||
|
textWidth: 0,
|
||||||
|
boxWidth: 0,
|
||||||
|
wrapWidth: '',
|
||||||
|
webviewHide: false,
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
stopAnimation: false,
|
||||||
|
// #endif
|
||||||
|
elId: elId,
|
||||||
|
elIdBox: elIdBox,
|
||||||
|
show: true,
|
||||||
|
animationDuration: 'none',
|
||||||
|
animationPlayState: 'paused',
|
||||||
|
animationDelay: '0s'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
var pages = getCurrentPages();
|
||||||
|
var page = pages[pages.length - 1];
|
||||||
|
var currentWebview = page.$getAppWebview();
|
||||||
|
currentWebview.addEventListener('hide', () => {
|
||||||
|
this.webviewHide = true
|
||||||
|
})
|
||||||
|
currentWebview.addEventListener('show', () => {
|
||||||
|
this.webviewHide = false
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initSize()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
beforeDestroy() {
|
||||||
|
this.stopAnimation = true
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
methods: {
|
||||||
|
initSize() {
|
||||||
|
if (this.scrollable) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
let query = [],
|
||||||
|
boxWidth = 0,
|
||||||
|
textWidth = 0;
|
||||||
|
let textQuery = new Promise((resolve, reject) => {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
// #ifndef MP-ALIPAY
|
||||||
|
.in(this)
|
||||||
|
// #endif
|
||||||
|
.select(`#${this.elId}`)
|
||||||
|
.boundingClientRect()
|
||||||
|
.exec(ret => {
|
||||||
|
this.textWidth = ret[0].width
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
let boxQuery = new Promise((resolve, reject) => {
|
||||||
|
uni.createSelectorQuery()
|
||||||
|
// #ifndef MP-ALIPAY
|
||||||
|
.in(this)
|
||||||
|
// #endif
|
||||||
|
.select(`#${this.elIdBox}`)
|
||||||
|
.boundingClientRect()
|
||||||
|
.exec(ret => {
|
||||||
|
this.boxWidth = ret[0].width
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
query.push(textQuery)
|
||||||
|
query.push(boxQuery)
|
||||||
|
Promise.all(query).then(() => {
|
||||||
|
this.animationDuration = `${this.textWidth / this.speed}s`
|
||||||
|
this.animationDelay = `-${this.boxWidth / this.speed}s`
|
||||||
|
setTimeout(() => {
|
||||||
|
this.animationPlayState = 'running'
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
dom.getComponentRect(this.$refs['animationEle'], (res) => {
|
||||||
|
let winWidth = uni.getSystemInfoSync().windowWidth
|
||||||
|
this.textWidth = res.size.width
|
||||||
|
animation.transition(this.$refs['animationEle'], {
|
||||||
|
styles: {
|
||||||
|
transform: `translateX(-${winWidth}px)`
|
||||||
|
},
|
||||||
|
duration: 0,
|
||||||
|
timingFunction: 'linear',
|
||||||
|
delay: 0
|
||||||
|
}, () => {
|
||||||
|
if (!this.stopAnimation) {
|
||||||
|
animation.transition(this.$refs['animationEle'], {
|
||||||
|
styles: {
|
||||||
|
transform: `translateX(-${this.textWidth}px)`
|
||||||
|
},
|
||||||
|
timingFunction: 'linear',
|
||||||
|
duration: (this.textWidth - winWidth) / this.speed * 1000,
|
||||||
|
delay: 1000
|
||||||
|
}, () => {
|
||||||
|
if (!this.stopAnimation) {
|
||||||
|
this.loopAnimation()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if (!this.scrollable && (this.single || this.moreText)) {
|
||||||
|
dom.getComponentRect(this.$refs['textBox'], (res) => {
|
||||||
|
this.wrapWidth = res.size.width
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
loopAnimation() {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
animation.transition(this.$refs['animationEle'], {
|
||||||
|
styles: {
|
||||||
|
transform: `translateX(0px)`
|
||||||
|
},
|
||||||
|
duration: 0
|
||||||
|
}, () => {
|
||||||
|
if (!this.stopAnimation) {
|
||||||
|
animation.transition(this.$refs['animationEle'], {
|
||||||
|
styles: {
|
||||||
|
transform: `translateX(-${this.textWidth}px)`
|
||||||
|
},
|
||||||
|
duration: this.textWidth / this.speed * 1000,
|
||||||
|
timingFunction: 'linear',
|
||||||
|
delay: 0
|
||||||
|
}, () => {
|
||||||
|
if (!this.stopAnimation) {
|
||||||
|
this.loopAnimation()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
clickMore() {
|
||||||
|
this.$emit('getmore')
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
this.show = false;
|
||||||
|
this.$emit('close')
|
||||||
|
},
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-noticebar {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-cursor-point {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar-close {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar-icon {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__content-wrapper--single {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
line-height: 18px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__content-wrapper--single,
|
||||||
|
.uni-noticebar__content-wrapper--scrollable {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-noticebar__content-wrapper--scrollable {
|
||||||
|
position: relative;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.uni-noticebar__content--scrollable {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 0;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__content--single {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
flex: none;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__content-text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
word-break: break-all;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__content-text--single {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
/* #endif */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__content-text--scrollable {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
padding-left: 750rpx;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-left: 100%;
|
||||||
|
animation: notice 10s 0s linear infinite both;
|
||||||
|
animation-play-state: paused;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__more {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-noticebar__more-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes notice {
|
||||||
|
100% {
|
||||||
|
transform: translate3d(-100%, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
## 1.2.2（2022-05-06）
|
||||||
|
- 修复 vue3 input 事件不生效的bug
|
||||||
|
## 1.2.1（2022-05-06）
|
||||||
|
- 修复 多余代码导致的bug
|
||||||
|
## 1.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-search-bar](https://uniapp.dcloud.io/component/uniui/uni-search-bar)
|
||||||
|
## 1.1.2（2021-08-30）
|
||||||
|
- 修复 value 属性与 modelValue 属性不兼容的Bug
|
||||||
|
## 1.1.1（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.1.0（2021-07-30）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.9（2021-05-12）
|
||||||
|
- 新增 项目示例地址
|
||||||
|
## 1.0.8（2021-04-21）
|
||||||
|
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||||
|
## 1.0.7（2021-04-15）
|
||||||
|
- uni-ui 新增 uni-search-bar 的 focus 事件
|
||||||
|
|
||||||
|
## 1.0.6（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
|
||||||
|
## 1.0.5（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 支持双向绑定
|
||||||
|
- 更改 input 事件的返回值，e={value:Number} --> e=value
|
||||||
|
- 新增 支持图标插槽
|
||||||
|
- 新增 支持 clear、blur 事件
|
||||||
|
- 新增 支持 focus 属性
|
||||||
|
- 去掉组件背景色
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
@mixin get-styles($k,$c) {
|
||||||
|
@if $k == size or $k == weight{
|
||||||
|
font-#{$k}:#{$c}
|
||||||
|
}@else{
|
||||||
|
#{$k}:#{$c}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $key, $child in $uni-headings {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-#{$key} {
|
||||||
|
@each $k, $c in $child {
|
||||||
|
@include get-styles($k,$c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
.container .uni-#{$key} {
|
||||||
|
@each $k, $c in $child {
|
||||||
|
@include get-styles($k,$c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,663 @@
|
||||||
|
.uniui-color:before {
|
||||||
|
content: "\e6cf";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-wallet:before {
|
||||||
|
content: "\e6b1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-settings-filled:before {
|
||||||
|
content: "\e6ce";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-auth-filled:before {
|
||||||
|
content: "\e6cc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-shop-filled:before {
|
||||||
|
content: "\e6cd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-staff-filled:before {
|
||||||
|
content: "\e6cb";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-vip-filled:before {
|
||||||
|
content: "\e6c6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-plus-filled:before {
|
||||||
|
content: "\e6c7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-folder-add-filled:before {
|
||||||
|
content: "\e6c8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-color-filled:before {
|
||||||
|
content: "\e6c9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-tune-filled:before {
|
||||||
|
content: "\e6ca";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-calendar-filled:before {
|
||||||
|
content: "\e6c0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-notification-filled:before {
|
||||||
|
content: "\e6c1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-wallet-filled:before {
|
||||||
|
content: "\e6c2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-medal-filled:before {
|
||||||
|
content: "\e6c3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gift-filled:before {
|
||||||
|
content: "\e6c4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-fire-filled:before {
|
||||||
|
content: "\e6c5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-refreshempty:before {
|
||||||
|
content: "\e6bf";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-location-filled:before {
|
||||||
|
content: "\e6af";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-person-filled:before {
|
||||||
|
content: "\e69d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-personadd-filled:before {
|
||||||
|
content: "\e698";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-back:before {
|
||||||
|
content: "\e6b9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-forward:before {
|
||||||
|
content: "\e6ba";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrow-right:before {
|
||||||
|
content: "\e6bb";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinright:before {
|
||||||
|
content: "\e6bb";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrow-left:before {
|
||||||
|
content: "\e6bc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinleft:before {
|
||||||
|
content: "\e6bc";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrow-up:before {
|
||||||
|
content: "\e6bd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinup:before {
|
||||||
|
content: "\e6bd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrow-down:before {
|
||||||
|
content: "\e6be";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthindown:before {
|
||||||
|
content: "\e6be";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-bottom:before {
|
||||||
|
content: "\e6b8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowdown:before {
|
||||||
|
content: "\e6b8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-right:before {
|
||||||
|
content: "\e6b5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowright:before {
|
||||||
|
content: "\e6b5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-top:before {
|
||||||
|
content: "\e6b6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowup:before {
|
||||||
|
content: "\e6b6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-left:before {
|
||||||
|
content: "\e6b7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowleft:before {
|
||||||
|
content: "\e6b7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-eye:before {
|
||||||
|
content: "\e651";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-eye-filled:before {
|
||||||
|
content: "\e66a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-eye-slash:before {
|
||||||
|
content: "\e6b3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-eye-slash-filled:before {
|
||||||
|
content: "\e6b4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-info-filled:before {
|
||||||
|
content: "\e649";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-reload:before {
|
||||||
|
content: "\e6b2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-micoff-filled:before {
|
||||||
|
content: "\e6b0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-map-pin-ellipse:before {
|
||||||
|
content: "\e6ac";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-map-pin:before {
|
||||||
|
content: "\e6ad";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-location:before {
|
||||||
|
content: "\e6ae";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-starhalf:before {
|
||||||
|
content: "\e683";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-star:before {
|
||||||
|
content: "\e688";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-star-filled:before {
|
||||||
|
content: "\e68f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-calendar:before {
|
||||||
|
content: "\e6a0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-fire:before {
|
||||||
|
content: "\e6a1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-medal:before {
|
||||||
|
content: "\e6a2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-font:before {
|
||||||
|
content: "\e6a3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gift:before {
|
||||||
|
content: "\e6a4";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-link:before {
|
||||||
|
content: "\e6a5";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-notification:before {
|
||||||
|
content: "\e6a6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-staff:before {
|
||||||
|
content: "\e6a7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-vip:before {
|
||||||
|
content: "\e6a8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-folder-add:before {
|
||||||
|
content: "\e6a9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-tune:before {
|
||||||
|
content: "\e6aa";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-auth:before {
|
||||||
|
content: "\e6ab";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-person:before {
|
||||||
|
content: "\e699";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-email-filled:before {
|
||||||
|
content: "\e69a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-phone-filled:before {
|
||||||
|
content: "\e69b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-phone:before {
|
||||||
|
content: "\e69c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-email:before {
|
||||||
|
content: "\e69e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-personadd:before {
|
||||||
|
content: "\e69f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chatboxes-filled:before {
|
||||||
|
content: "\e692";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-contact:before {
|
||||||
|
content: "\e693";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chatbubble-filled:before {
|
||||||
|
content: "\e694";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-contact-filled:before {
|
||||||
|
content: "\e695";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chatboxes:before {
|
||||||
|
content: "\e696";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chatbubble:before {
|
||||||
|
content: "\e697";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-upload-filled:before {
|
||||||
|
content: "\e68e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-upload:before {
|
||||||
|
content: "\e690";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-weixin:before {
|
||||||
|
content: "\e691";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-compose:before {
|
||||||
|
content: "\e67f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-qq:before {
|
||||||
|
content: "\e680";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-download-filled:before {
|
||||||
|
content: "\e681";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-pyq:before {
|
||||||
|
content: "\e682";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-sound:before {
|
||||||
|
content: "\e684";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-trash-filled:before {
|
||||||
|
content: "\e685";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-sound-filled:before {
|
||||||
|
content: "\e686";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-trash:before {
|
||||||
|
content: "\e687";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-videocam-filled:before {
|
||||||
|
content: "\e689";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-spinner-cycle:before {
|
||||||
|
content: "\e68a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-weibo:before {
|
||||||
|
content: "\e68b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-videocam:before {
|
||||||
|
content: "\e68c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-download:before {
|
||||||
|
content: "\e68d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-help:before {
|
||||||
|
content: "\e679";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-navigate-filled:before {
|
||||||
|
content: "\e67a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-plusempty:before {
|
||||||
|
content: "\e67b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-smallcircle:before {
|
||||||
|
content: "\e67c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-minus-filled:before {
|
||||||
|
content: "\e67d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-micoff:before {
|
||||||
|
content: "\e67e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-closeempty:before {
|
||||||
|
content: "\e66c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-clear:before {
|
||||||
|
content: "\e66d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-navigate:before {
|
||||||
|
content: "\e66e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-minus:before {
|
||||||
|
content: "\e66f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-image:before {
|
||||||
|
content: "\e670";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-mic:before {
|
||||||
|
content: "\e671";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-paperplane:before {
|
||||||
|
content: "\e672";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-close:before {
|
||||||
|
content: "\e673";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-help-filled:before {
|
||||||
|
content: "\e674";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-paperplane-filled:before {
|
||||||
|
content: "\e675";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-plus:before {
|
||||||
|
content: "\e676";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-mic-filled:before {
|
||||||
|
content: "\e677";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-image-filled:before {
|
||||||
|
content: "\e678";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-locked-filled:before {
|
||||||
|
content: "\e668";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-info:before {
|
||||||
|
content: "\e669";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-locked:before {
|
||||||
|
content: "\e66b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-camera-filled:before {
|
||||||
|
content: "\e658";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chat-filled:before {
|
||||||
|
content: "\e659";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-camera:before {
|
||||||
|
content: "\e65a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-circle:before {
|
||||||
|
content: "\e65b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-checkmarkempty:before {
|
||||||
|
content: "\e65c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-chat:before {
|
||||||
|
content: "\e65d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-circle-filled:before {
|
||||||
|
content: "\e65e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-flag:before {
|
||||||
|
content: "\e65f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-flag-filled:before {
|
||||||
|
content: "\e660";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gear-filled:before {
|
||||||
|
content: "\e661";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-home:before {
|
||||||
|
content: "\e662";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-home-filled:before {
|
||||||
|
content: "\e663";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gear:before {
|
||||||
|
content: "\e664";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-smallcircle-filled:before {
|
||||||
|
content: "\e665";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-map-filled:before {
|
||||||
|
content: "\e666";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-map:before {
|
||||||
|
content: "\e667";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-refresh-filled:before {
|
||||||
|
content: "\e656";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-refresh:before {
|
||||||
|
content: "\e657";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cloud-upload:before {
|
||||||
|
content: "\e645";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cloud-download-filled:before {
|
||||||
|
content: "\e646";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cloud-download:before {
|
||||||
|
content: "\e647";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cloud-upload-filled:before {
|
||||||
|
content: "\e648";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-redo:before {
|
||||||
|
content: "\e64a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-images-filled:before {
|
||||||
|
content: "\e64b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-undo-filled:before {
|
||||||
|
content: "\e64c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-more:before {
|
||||||
|
content: "\e64d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-more-filled:before {
|
||||||
|
content: "\e64e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-undo:before {
|
||||||
|
content: "\e64f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-images:before {
|
||||||
|
content: "\e650";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-paperclip:before {
|
||||||
|
content: "\e652";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-settings:before {
|
||||||
|
content: "\e653";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-search:before {
|
||||||
|
content: "\e654";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-redo-filled:before {
|
||||||
|
content: "\e655";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-list:before {
|
||||||
|
content: "\e644";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-mail-open-filled:before {
|
||||||
|
content: "\e63a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-hand-down-filled:before {
|
||||||
|
content: "\e63c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-hand-down:before {
|
||||||
|
content: "\e63d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-hand-up-filled:before {
|
||||||
|
content: "\e63e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-hand-up:before {
|
||||||
|
content: "\e63f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-heart-filled:before {
|
||||||
|
content: "\e641";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-mail-open:before {
|
||||||
|
content: "\e643";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-heart:before {
|
||||||
|
content: "\e639";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-loop:before {
|
||||||
|
content: "\e633";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-pulldown:before {
|
||||||
|
content: "\e632";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-scan:before {
|
||||||
|
content: "\e62a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-bars:before {
|
||||||
|
content: "\e627";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cart-filled:before {
|
||||||
|
content: "\e629";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-checkbox:before {
|
||||||
|
content: "\e62b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-checkbox-filled:before {
|
||||||
|
content: "\e62c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-shop:before {
|
||||||
|
content: "\e62f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-headphones:before {
|
||||||
|
content: "\e630";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-cart:before {
|
||||||
|
content: "\e631";
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 577 B |
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<view class="pl-50 pt-30 pr-50">
|
||||||
|
<radio-group v-if="coupon && coupon[0]">
|
||||||
|
<label class="rows rowsm w-650 h-207 relative mb-21 colfff" v-for="(item,index) in coupon" :key="index">
|
||||||
|
<view class="w-244 h-207 rowsc rowsm tct">
|
||||||
|
<view>
|
||||||
|
<view class="fs-30"><text class="fs-67">25</text>元</view>
|
||||||
|
<view class="fs-22">满450元可用</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pl-20">
|
||||||
|
<radio class="absolute" color="#22cfa2" style="transform: scale(.8);right: 14rpx; top: 14srpx;"></radio>
|
||||||
|
<view class="fs-33 col333 mb-20">优惠券名称</view>
|
||||||
|
<view class="fs-22 col999">有效期至 2019-08-12</view>
|
||||||
|
</view>
|
||||||
|
<image src="/static/icon_21.png" class="w-650 h-207 absolute" style="left: 0; top: 0; z-index: -1;"></image>
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
<view class="tct fs-28 col888 pt-400">暂无相关优惠券</view>
|
||||||
|
<view class="w-650 h-98 h-98 br-10 rowsc rowsm colfff fs-36 fixed" style="bottom: 60rpx;background: #22cfa2;">确认选择</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
coupon: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getUserCoupon()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getUserCoupon() {
|
||||||
|
this.axiosFromToken('POST','user/getUserCouponList', {user_token: this.app.token}, '加载中').then(res => {
|
||||||
|
this.coupon = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
page {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 652 B |
|
|
@ -0,0 +1,12 @@
|
||||||
|
import en from './en.json'
|
||||||
|
import es from './es.json'
|
||||||
|
import fr from './fr.json'
|
||||||
|
import zhHans from './zh-Hans.json'
|
||||||
|
import zhHant from './zh-Hant.json'
|
||||||
|
export default {
|
||||||
|
en,
|
||||||
|
es,
|
||||||
|
fr,
|
||||||
|
'zh-Hans': zhHans,
|
||||||
|
'zh-Hant': zhHant
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<text>{{dateShow}}</text>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {friendlyDate} from './date-format.js'
|
||||||
|
/**
|
||||||
|
* Dateformat 日期格式化
|
||||||
|
* @description 日期格式化组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=3279
|
||||||
|
* @property {Object|String|Number} date 日期对象/日期字符串/时间戳
|
||||||
|
* @property {String} locale 格式化使用的语言
|
||||||
|
* @value zh 中文
|
||||||
|
* @value en 英文
|
||||||
|
* @property {Array} threshold 应用不同类型格式化的阈值
|
||||||
|
* @property {String} format 输出日期字符串时的格式
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniDateformat',
|
||||||
|
props: {
|
||||||
|
date: {
|
||||||
|
type: [Object, String, Number],
|
||||||
|
default () {
|
||||||
|
return '-'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
locale: {
|
||||||
|
type: String,
|
||||||
|
default: 'zh',
|
||||||
|
},
|
||||||
|
threshold: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return [0, 0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
format: {
|
||||||
|
type: String,
|
||||||
|
default: 'yyyy/MM/dd hh:mm:ss'
|
||||||
|
},
|
||||||
|
// refreshRate使用不当可能导致性能问题，谨慎使用
|
||||||
|
refreshRate: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
refreshMark: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
dateShow() {
|
||||||
|
this.refreshMark
|
||||||
|
return friendlyDate(this.date, {
|
||||||
|
locale: this.locale,
|
||||||
|
threshold: this.threshold,
|
||||||
|
format: this.format
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
refreshRate: {
|
||||||
|
handler() {
|
||||||
|
this.setAutoRefresh()
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
refresh() {
|
||||||
|
this.refreshMark++
|
||||||
|
},
|
||||||
|
setAutoRefresh() {
|
||||||
|
clearInterval(this.refreshInterval)
|
||||||
|
if (this.refreshRate) {
|
||||||
|
this.refreshInterval = setInterval(() => {
|
||||||
|
this.refresh()
|
||||||
|
}, parseInt(this.refreshRate))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"filter-dropdown.reset": "重置",
|
||||||
|
"filter-dropdown.search": "搜索",
|
||||||
|
"filter-dropdown.submit": "確定",
|
||||||
|
"filter-dropdown.filter": "篩選",
|
||||||
|
"filter-dropdown.gt": "大於等於",
|
||||||
|
"filter-dropdown.lt": "小於等於",
|
||||||
|
"filter-dropdown.date": "日期範圍"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,185 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-calendar-item__weeks-box" :class="{
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked-x':weeks.afterMultiple,
|
||||||
|
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
|
||||||
|
<view class="uni-calendar-item__weeks-box-item" :class="{
|
||||||
|
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
|
||||||
|
'uni-calendar-item--checked-range-text': checkHover,
|
||||||
|
'uni-calendar-item--before-checked':weeks.beforeMultiple,
|
||||||
|
'uni-calendar-item--multiple': weeks.multiple,
|
||||||
|
'uni-calendar-item--after-checked':weeks.afterMultiple,
|
||||||
|
'uni-calendar-item--disable':weeks.disable,
|
||||||
|
}">
|
||||||
|
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||||
|
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
|
||||||
|
</view>
|
||||||
|
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
weeks: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calendar: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lunar: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
checkHover: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
choiceDate(weeks) {
|
||||||
|
this.$emit('change', weeks)
|
||||||
|
},
|
||||||
|
handleMousemove(weeks) {
|
||||||
|
this.$emit('handleMouse', weeks)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.uni-calendar-item__weeks-box {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1px 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-text {
|
||||||
|
font-size: 14px;
|
||||||
|
// font-family: Lato-Bold, Lato;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #455997;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-lunar-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-item {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box-circle {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #dd524d;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box .uni-calendar-item--disable {
|
||||||
|
// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
|
||||||
|
color: #D1D1D1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--isDay {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 17%;
|
||||||
|
background-color: #dd524d;
|
||||||
|
width:6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--extra {
|
||||||
|
color: #dd524d;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item__weeks-box .uni-calendar-item--checked {
|
||||||
|
background-color: #007aff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 3px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--checked .uni-calendar-item--checked-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--multiple {
|
||||||
|
background-color: #F6F7FC;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--multiple .uni-calendar-item--before-checked,
|
||||||
|
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
|
||||||
|
background-color: #409eff;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 3px solid #F6F7FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
|
||||||
|
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--before-checked-x {
|
||||||
|
border-top-left-radius: 50px;
|
||||||
|
border-bottom-left-radius: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #F6F7FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-calendar-item--after-checked-x {
|
||||||
|
border-top-right-radius: 50px;
|
||||||
|
border-bottom-right-radius: 50px;
|
||||||
|
background-color: #F6F7FC;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<tr class="uni-table-tr">
|
||||||
|
<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
|
||||||
|
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
|
||||||
|
</th>
|
||||||
|
<slot></slot>
|
||||||
|
<!-- <uni-th class="th-fixed">123</uni-th> -->
|
||||||
|
</tr>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef H5 -->
|
||||||
|
<view class="uni-table-tr">
|
||||||
|
<view v-if="selection === 'selection' " class="checkbox" :class="{ 'tr-table--border': border }">
|
||||||
|
<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
|
||||||
|
</view>
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import tableCheckbox from './table-checkbox.vue'
|
||||||
|
/**
|
||||||
|
* Tr 表格行组件
|
||||||
|
* @description 表格行组件 仅包含 th,td 组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniTr',
|
||||||
|
components: { tableCheckbox },
|
||||||
|
props: {
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
keyValue: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
virtualHost: true
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: false,
|
||||||
|
border: false,
|
||||||
|
selection: false,
|
||||||
|
widthThArr: [],
|
||||||
|
ishead: true,
|
||||||
|
checked: false,
|
||||||
|
indeterminate:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.root = this.getTable()
|
||||||
|
this.head = this.getTable('uniThead')
|
||||||
|
if (this.head) {
|
||||||
|
this.ishead = false
|
||||||
|
this.head.init(this)
|
||||||
|
}
|
||||||
|
this.border = this.root.border
|
||||||
|
this.selection = this.root.type
|
||||||
|
this.root.trChildren.push(this)
|
||||||
|
const rowData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
|
||||||
|
if(rowData){
|
||||||
|
this.rowData = rowData
|
||||||
|
}
|
||||||
|
this.root.isNodata()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.widthThArr.length > 0) {
|
||||||
|
const selectionWidth = this.selection === 'selection' ? 50 : 0
|
||||||
|
this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #ifndef VUE3
|
||||||
|
destroyed() {
|
||||||
|
const index = this.root.trChildren.findIndex(i => i === this)
|
||||||
|
this.root.trChildren.splice(index, 1)
|
||||||
|
this.root.isNodata()
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
unmounted() {
|
||||||
|
const index = this.root.trChildren.findIndex(i => i === this)
|
||||||
|
this.root.trChildren.splice(index, 1)
|
||||||
|
this.root.isNodata()
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
methods: {
|
||||||
|
minWidthUpdate(width) {
|
||||||
|
this.widthThArr.push(width)
|
||||||
|
},
|
||||||
|
// 选中
|
||||||
|
checkboxSelected(e) {
|
||||||
|
let rootData = this.root.data.find(v => v[this.root.rowKey] === this.keyValue)
|
||||||
|
this.checked = e.checked
|
||||||
|
this.root.check(rootData||this, e.checked,rootData? this.keyValue:null)
|
||||||
|
},
|
||||||
|
change(e) {
|
||||||
|
this.root.trChildren.forEach(item => {
|
||||||
|
if (item === this) {
|
||||||
|
this.root.check(this, e.detail.value.length > 0 ? true : false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getTable(name = 'uniTable') {
|
||||||
|
let parent = this.$parent
|
||||||
|
let parentName = parent.$options.name
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name
|
||||||
|
}
|
||||||
|
return parent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$border-color: #ebeef5;
|
||||||
|
|
||||||
|
.uni-table-tr {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: table-row;
|
||||||
|
transition: all 0.3s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
padding: 0 8px;
|
||||||
|
width: 26px;
|
||||||
|
padding-left: 12px;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
/* #endif */
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
border-bottom: 1px $border-color solid;
|
||||||
|
font-size: 14px;
|
||||||
|
// text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr-table--border {
|
||||||
|
border-right: 1px $border-color solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-table-tr {
|
||||||
|
::v-deep .uni-table-th {
|
||||||
|
&.table--border:last-child {
|
||||||
|
// border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .uni-table-td {
|
||||||
|
&.table--border:last-child {
|
||||||
|
// border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
|
|
@ -0,0 +1,104 @@
|
||||||
|
<template>
|
||||||
|
<scroll-view class="br-10" :scroll-y="true" :style="{'height': scrollHeight+'px'}">
|
||||||
|
<view v-for="(item,index) in goods" :key="index" @tap="orderTap(item.id,item.status)" class="w100 br-20 bgff mb-20 pl-20 pr-20" style="padding-bottom: 0;">
|
||||||
|
<view class="h-80 rowsb rowsm fs-28" style="border-bottom: 2rpx solid #f1f1f1;">
|
||||||
|
<view class="f-8 pr-20 one_overflow">{{ item.business.busname }}</view>
|
||||||
|
<text class="f-2 trt col999" >{{ status[item.status] }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="w-670 mt-32 relative" style="overflow: hidden;">
|
||||||
|
<view class="rows">
|
||||||
|
<view class="mr-20" v-for="(goods,ind) in item.goods" :key="ind">
|
||||||
|
<image class="w-166 h-130 br-12" mode="aspectFill" :src="URL + goods.image"></image>
|
||||||
|
<view class="fs-24 col666 one_overflow">{{ goods.name }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="item.goods.length >= 5" class="absolute h100 pt-20 w-40 fs-22 col666 zi-2 tct pl-10 pr-10" style="right: 0;top: 0; background: rgba(255, 255, 255, 0.8); ;">
|
||||||
|
<text>共{{ item.goods.length }}件</text>
|
||||||
|
</view>
|
||||||
|
<view class="pt-20 pb-26 rowsb">
|
||||||
|
<text class="fs-26 col999">订单时间：{{ item.createtime }}</text>
|
||||||
|
<text class="fs-24 col888">合计<text class="fs-32 fw-600 col000">￥{{ item.price }}</text></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="rowsb h-108 rowsm">
|
||||||
|
<view></view>
|
||||||
|
<view class="fs-26 tct">
|
||||||
|
<!-- 待付款 -->
|
||||||
|
<view v-if="item.status == '1'" class="rowse">
|
||||||
|
<view @tap.stop="cancelOrder(item.id,index)" class="br-8 ml-20 w-166 h-64 lh-64" style="border: 1rpx solid #D5D5D5; color: #666;">取消订单</view>
|
||||||
|
<view @tap.stop="orderTap(item.id)" class="br-4 colfff ml-20 w-166 h-64 lh-64" style="background: #91B584;">去付款</view>
|
||||||
|
</view>
|
||||||
|
<!-- 待发货 -->
|
||||||
|
<view v-if="item.status == '2'" class="rowse">
|
||||||
|
<view @tap.stop="showtt('已催促，商家正在加急出餐~')" class="br-4 colfff ml-20 w-166 h-64 lh-64" style="background: #91B584;">催发货</view>
|
||||||
|
</view>
|
||||||
|
<!-- 待收货 -->
|
||||||
|
<view v-if="item.status == '3'" class="rowse">
|
||||||
|
<view @tap.stop="commitGoods(item.id)" class="br-4 colfff ml-20 w-166 h-64 lh-64" style="background: #91B584;">确认收货</view>
|
||||||
|
</view>
|
||||||
|
<!-- 已完成 -->
|
||||||
|
<view v-if="item.status == '4'" class="rowse">
|
||||||
|
<view @tap.stop="orderTap(item.id)" class="br-4 colfff ml-20 w-166 h-64 lh-64" style="background: #91B584;">查看详情</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const app = getApp().globalData
|
||||||
|
export default {
|
||||||
|
name:"orderGoods",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
status: {
|
||||||
|
1: '待付款',
|
||||||
|
2: '待配送',
|
||||||
|
3: '配送中',
|
||||||
|
4: '已完成'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
orderTap(id) {//订单点击，前往详情页
|
||||||
|
this.$tools.goNext(`orderDet?id=${id}`)
|
||||||
|
},
|
||||||
|
cancelOrder(id,index) {//取消订单
|
||||||
|
this.$tools.axiosFromToken('POST','order/del_order_goods',{
|
||||||
|
token: app.token,
|
||||||
|
id: id,
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 1) {
|
||||||
|
this.$emit('getOrder')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
commitGoods(id) {//确认收货
|
||||||
|
this.axiosFromToken('POST','order/determine',{
|
||||||
|
id
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 1) {
|
||||||
|
this.$tools.showtt('成功确认收货')
|
||||||
|
this.$emit('getOrder')
|
||||||
|
} else this.$tools.showtt(res.msg)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
goods: {
|
||||||
|
type:Array,
|
||||||
|
},
|
||||||
|
scrollHeight: {
|
||||||
|
type: Number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.col_22cfa2 {
|
||||||
|
color: #22cfa2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
{
|
||||||
|
"id": "uni-list",
|
||||||
|
"displayName": "uni-list 列表",
|
||||||
|
"version": "1.2.1",
|
||||||
|
"description": "List 组件 ，帮助使用者快速构建列表。",
|
||||||
|
"keywords": [
|
||||||
|
"",
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"列表",
|
||||||
|
"",
|
||||||
|
"list"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-badge",
|
||||||
|
"uni-icons"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"uni-search-bar.cancel": "cancel",
|
||||||
|
"uni-search-bar.placeholder": "Search enter content"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
{
|
||||||
|
"id": "uni-data-picker",
|
||||||
|
"displayName": "uni-data-picker 数据驱动的picker选择器",
|
||||||
|
"version": "1.0.4",
|
||||||
|
"description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"picker",
|
||||||
|
"级联",
|
||||||
|
"省市区",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-load-more",
|
||||||
|
"uni-icons",
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -0,0 +1,189 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="">
|
||||||
|
<view class="border_level_bottom_f1 pdlft20 pdRit20" style="border-radius: 8rpx;margin-top: 50rpx;">
|
||||||
|
<view class="fs-30 bold">昵称(最多6个字)</view>
|
||||||
|
<input v-model="phone" maxlength="6" type="number" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请输入昵称"/>
|
||||||
|
</view>
|
||||||
|
<view class="border_level_bottom_f1 pdlft20 pdRit20" style="border-radius: 8rpx;margin-top: 50rpx;">
|
||||||
|
<view class="fs-30 bold">手机号</view>
|
||||||
|
<input v-model="phone" maxlength="11" type="number" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请输入手机号"/>
|
||||||
|
</view>
|
||||||
|
<view class="border_level_bottom_f1 pdlft20 pdRit20 relative" style="border-radius: 8rpx;margin-top: 50rpx;">
|
||||||
|
<view class="fs-30 bold">验证码</view>
|
||||||
|
<input v-model="code" maxlength="11" type="number" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请输入验证码"/>
|
||||||
|
<view @click="verificationes()" class="get_corasd tct fs24 colfff">
|
||||||
|
{{verifications?`倒计时${times}s` : '获取验证码' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="border_level_bottom_f1 pdlft20 pdRit20" style="border-radius: 8rpx;margin-top: 50rpx;">
|
||||||
|
<view class="fs-30 bold">密码</view>
|
||||||
|
<input v-model="password" type="password" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请输入密码"/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="border_level_bottom_f1 pdlft20 pdRit20" style="border-radius: 8rpx;margin-top: 50rpx;">
|
||||||
|
<view class="fs-30 bold">确认密码</view>
|
||||||
|
<input v-model="passwords" type="password" class="fs-28 col999" style="width: 500rpx;height: 80rpx;" placeholder-class="fs-28 col999" placeholder="请再次输入密码"/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view @click="isSubmit" class="logis_dsfg colfff fs-30 tct mt-30">立即注册</view>
|
||||||
|
<view class="tct fs-24 pt-67">
|
||||||
|
<text class="mr-10">已有账号</text>
|
||||||
|
<text @tap="goBack()" style="color: #fd4d47;">登录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
timerInsad:null,//定时器
|
||||||
|
// name:'',//昵称
|
||||||
|
modeList: ['厂家定制','现货批发商','门店店铺','公司采购','个人用户'],
|
||||||
|
mode: {type:'',text: ''},//注册类型
|
||||||
|
phone:'',//手机号
|
||||||
|
password:'',//密码
|
||||||
|
passwords:'',//确认密码
|
||||||
|
code:'',//验证码
|
||||||
|
times:199,//倒计时的时间
|
||||||
|
verifications:false,//显示的那个倒计时
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
this.heigha = uni.getSystemInfoSync().windowHeight;//获取设备高
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
modeChange(e) {//模式改变
|
||||||
|
this.mode.type = e.detail.value + 1
|
||||||
|
this.mode.text = this.modeList[e.detail.value]
|
||||||
|
console.log(this.mode.type)
|
||||||
|
},
|
||||||
|
isSubmit() {//做的非空验证+$
|
||||||
|
const reg = /^(?=.*\d)(?=.*[a-z]).{6,12}$/;
|
||||||
|
if(!this.mode.type) {
|
||||||
|
this.$tools.showtt('请选择注册类型')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
|
||||||
|
this.$tools.showtt('手机号格式不正确')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if(!this.password) {
|
||||||
|
this.$tools.showtt('请输入密码')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if(this.password != this.passwords) {
|
||||||
|
this.$tools.showtt('两次密码输入不一致')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if(!this.code) {
|
||||||
|
this.$tools.showtt('请输入验证码')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loginOne();//注册
|
||||||
|
},
|
||||||
|
verificationes() {// 获取验证码的事件
|
||||||
|
if(this.verifications) {
|
||||||
|
this.$tools.showtt('您已获取验证码')
|
||||||
|
} else {
|
||||||
|
if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
|
||||||
|
this.$tools.showtt('手机号格式不正确','none')
|
||||||
|
return false
|
||||||
|
} else {
|
||||||
|
let obj = {
|
||||||
|
mobile:this.phone,//手机号
|
||||||
|
flag:'1',
|
||||||
|
}
|
||||||
|
this.$tools.axios('POST','sms/send',obj).then(zifan => {
|
||||||
|
if(zifan.code == 1) {
|
||||||
|
this.$tools.showtt(zifan.msg+'')
|
||||||
|
this.verifications = true
|
||||||
|
this.timerInsad = setInterval( res => {
|
||||||
|
if(this.times <= 0) {
|
||||||
|
this.verifications = false
|
||||||
|
this.times = 199
|
||||||
|
this.code = ''
|
||||||
|
clearInterval(this.timerInsad)
|
||||||
|
} else {
|
||||||
|
this.times--
|
||||||
|
}
|
||||||
|
},1000)
|
||||||
|
} else {
|
||||||
|
this.$tools.showtt(zifan.msg+'')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loginOne() {//按钮
|
||||||
|
|
||||||
|
let obj = {
|
||||||
|
// name:this.name,//昵称
|
||||||
|
mobile:this.phone,//手机号
|
||||||
|
re_password: this.passwords,//确认密码
|
||||||
|
password:this.password,//密码
|
||||||
|
code:this.code,//验证码
|
||||||
|
type: this.mode.type
|
||||||
|
}
|
||||||
|
this.$tools.axios('POST','user/register',obj,'注册中').then(one => {
|
||||||
|
clearInterval(this.timerInsad)
|
||||||
|
this.verifications = false
|
||||||
|
this.times = 199
|
||||||
|
if(one.code == 1) {
|
||||||
|
this.$tools.showtt('注册成功')
|
||||||
|
setTimeout(two => {
|
||||||
|
this.$tools.goBack(1)
|
||||||
|
},600)
|
||||||
|
} else {
|
||||||
|
this.$tools.showtt(one.msg)
|
||||||
|
this.name = '';
|
||||||
|
this.password = '';
|
||||||
|
this.passwords = '';
|
||||||
|
this.code = '';
|
||||||
|
this.mode.type = ''
|
||||||
|
this.mode.text = ''
|
||||||
|
this.phone = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 750rpx;
|
||||||
|
padding-left: 50rpx;
|
||||||
|
padding-right: 50rpx;
|
||||||
|
}
|
||||||
|
.logis_dsfg {
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
background-image: linear-gradient(#ff5c5b,#fa3427);
|
||||||
|
border-radius: 100rpx;
|
||||||
|
margin-top: 100rpx;
|
||||||
|
}
|
||||||
|
.get_corasd {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
width: 180rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
color: #fa3326;
|
||||||
|
border: 2rpx solid #fa3326;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
}
|
||||||
|
.border_level_bottom_f1 {
|
||||||
|
border-bottom: 2rpx solid #f1f1f1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 730 B |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -0,0 +1,96 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import icons from './icons.js';
|
||||||
|
const getVal = (val) => {
|
||||||
|
const reg = /^[0-9]*$/g
|
||||||
|
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
|
||||||
|
}
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
var domModule = weex.requireModule('dom');
|
||||||
|
import iconUrl from './uniicons.ttf'
|
||||||
|
domModule.addRule('fontFace', {
|
||||||
|
'fontFamily': "uniicons",
|
||||||
|
'src': "url('"+iconUrl+"')"
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Icons 图标
|
||||||
|
* @description 用于展示 icons 图标
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||||
|
* @property {Number} size 图标大小
|
||||||
|
* @property {String} type 图标图案，参考示例
|
||||||
|
* @property {String} color 图标颜色
|
||||||
|
* @property {String} customPrefix 自定义图标
|
||||||
|
* @event {Function} click 点击 Icon 触发事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniIcons',
|
||||||
|
emits:['click'],
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 16
|
||||||
|
},
|
||||||
|
customPrefix:{
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
icons: icons.glyphs
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
unicode(){
|
||||||
|
let code = this.icons.find(v=>v.font_class === this.type)
|
||||||
|
if(code){
|
||||||
|
return unescape(`%u${code.unicode}`)
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
iconSize(){
|
||||||
|
return getVal(this.size)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_onClick() {
|
||||||
|
this.$emit('click')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
@import './uniicons.css';
|
||||||
|
@font-face {
|
||||||
|
font-family: uniicons;
|
||||||
|
src: url('./uniicons.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.uni-icons {
|
||||||
|
font-family: uniicons;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
## 1.7.9（2022-04-02）
|
||||||
|
- 修复 弹出层内部无法滚动的bug
|
||||||
|
## 1.7.8（2022-03-28）
|
||||||
|
- 修复 小程序中高度错误的bug
|
||||||
|
## 1.7.7（2022-03-17）
|
||||||
|
- 修复 快速调用open出现问题的Bug
|
||||||
|
## 1.7.6（2022-02-14）
|
||||||
|
- 修复 safeArea 属性不能设置为false的bug
|
||||||
|
## 1.7.5（2022-01-19）
|
||||||
|
- 修复 isMaskClick 失效的bug
|
||||||
|
## 1.7.4（2022-01-19）
|
||||||
|
- 新增 cancelText \ confirmText 属性 ，可自定义文本
|
||||||
|
- 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色
|
||||||
|
- 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题
|
||||||
|
## 1.7.3（2022-01-13）
|
||||||
|
- 修复 设置 safeArea 属性不生效的bug
|
||||||
|
## 1.7.2（2021-11-26）
|
||||||
|
- 优化 组件示例
|
||||||
|
## 1.7.1（2021-11-26）
|
||||||
|
- 修复 vuedoc 文字错误
|
||||||
|
## 1.7.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||||
|
## 1.6.2（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.6.1（2021-07-30）
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.6.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.5.0（2021-06-23）
|
||||||
|
- 新增 mask-click 遮罩层点击事件
|
||||||
|
## 1.4.5（2021-06-22）
|
||||||
|
- 修复 nvue 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.4（2021-06-18）
|
||||||
|
- 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.3（2021-06-08）
|
||||||
|
- 修复 错误的 watch 字段
|
||||||
|
- 修复 safeArea 属性不生效的问题
|
||||||
|
- 修复 点击内容，再点击遮罩无法关闭的Bug
|
||||||
|
## 1.4.2（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.4.1（2021-04-29）
|
||||||
|
- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
|
||||||
|
## 1.4.0 （2021-04-29）
|
||||||
|
- 新增 type 属性的 left\right 值，支持左右弹出
|
||||||
|
- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
|
||||||
|
- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
|
||||||
|
- 新增 safeArea 属性，是否适配底部安全区
|
||||||
|
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||||
|
- 修复 App 端弹出等待的Bug
|
||||||
|
- 优化 提升低配设备性能，优化动画卡顿问题
|
||||||
|
- 优化 更简单的组件自定义方式
|
||||||
|
## 1.2.9（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
## 1.2.8（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
## 1.2.7（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 支持 PC 端
|
||||||
|
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Link 链接
|
||||||
|
> **组件名：uni-link**
|
||||||
|
> 代码块： `uLink`
|
||||||
|
|
||||||
|
|
||||||
|
uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-link)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
## 1.3.1（2021-12-20）
|
||||||
|
- 修复 在vue页面下略缩图显示不正常的bug
|
||||||
|
## 1.3.0（2021-11-19）
|
||||||
|
- 重构插槽的用法 ，header 替换为 title
|
||||||
|
- 新增 actions 插槽
|
||||||
|
- 新增 cover 封面图属性和插槽
|
||||||
|
- 新增 padding 内容默认内边距离
|
||||||
|
- 新增 margin 卡片默认外边距离
|
||||||
|
- 新增 spacing 卡片默认内边距
|
||||||
|
- 新增 shadow 卡片阴影属性
|
||||||
|
- 取消 mode 属性，可使用组合插槽代替
|
||||||
|
- 取消 note 属性 ，使用actions插槽代替
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card)
|
||||||
|
## 1.2.1（2021-07-30）
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.2.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.1.8（2021-07-01）
|
||||||
|
- 优化 图文卡片无图片加载时，提供占位图标
|
||||||
|
- 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持）
|
||||||
|
- 修复 thumbnail 不存在仍然占位的 bug
|
||||||
|
## 1.1.7（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.6（2021-02-04）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
## 1.1.1（2021-11-22）
|
||||||
|
- 修复 vue3中某些scss变量无法找到的问题
|
||||||
|
## 1.1.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-steps](https://uniapp.dcloud.io/component/uniui/uni-steps)
|
||||||
|
## 1.0.8（2021-05-12）
|
||||||
|
- 新增 项目示例地址
|
||||||
|
## 1.0.7（2021-05-06）
|
||||||
|
- 修复 uni-steps 横向布局时，多行文字高度不合理的 bug
|
||||||
|
## 1.0.6（2021-04-21）
|
||||||
|
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||||
|
## 1.0.5（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
|
||||||
|
## 1.0.4（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 902 B |
|
|
@ -0,0 +1,108 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view class="uni-list uni-border-top-bottom">
|
||||||
|
<view v-if="border" class="uni-list--border-top"></view>
|
||||||
|
<slot />
|
||||||
|
<view v-if="border" class="uni-list--border-bottom"></view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* List 列表
|
||||||
|
* @description 列表组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||||
|
* @property {String} border = [true|false] 标题
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniList',
|
||||||
|
'mp-weixin': {
|
||||||
|
options: {
|
||||||
|
multipleSlots: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
enableBackToTop: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
scrollY: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// provide() {
|
||||||
|
// return {
|
||||||
|
// list: this
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
created() {
|
||||||
|
this.firstChildAppend = false;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadMore(e) {
|
||||||
|
this.$emit('scrolltolower');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" >
|
||||||
|
$uni-bg-color:#ffffff;
|
||||||
|
$uni-border-color:#e5e5e5;
|
||||||
|
.uni-list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
background-color: $uni-bg-color;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border {
|
||||||
|
position: relative;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
border-bottom-color: $uni-border-color;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
|
||||||
|
.uni-list--border-top {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
## Badge 数字角标
|
||||||
|
> **组件名：uni-data-select**
|
||||||
|
> 代码块： `uDataSelect`
|
||||||
|
|
||||||
|
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
<template>
|
||||||
|
<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector">
|
||||||
|
<slot></slot>
|
||||||
|
</picker>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AllAddress from './data.js'
|
||||||
|
let selectVal = ['','','']
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'wangding-pickerAddress',
|
||||||
|
data() {
|
||||||
|
return{
|
||||||
|
value: [0,0,0],
|
||||||
|
array: [],
|
||||||
|
index: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initSelect()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 初始化地址选项
|
||||||
|
initSelect() {
|
||||||
|
this.updateSourceDate() // 更新源数据
|
||||||
|
.updateAddressDate() // 更新结果数据
|
||||||
|
.$forceUpdate() // 触发双向绑定
|
||||||
|
},
|
||||||
|
// 地址控件改变控件
|
||||||
|
columnchange(d) {
|
||||||
|
this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
|
||||||
|
.updateSourceDate() // 更新源数据
|
||||||
|
.updateAddressDate() // 更新结果数据
|
||||||
|
.$forceUpdate() // 触发双向绑定
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新源数据
|
||||||
|
* */
|
||||||
|
updateSourceDate() {
|
||||||
|
this.array = []
|
||||||
|
this.array[0] = AllAddress.map(obj => {
|
||||||
|
return {
|
||||||
|
name: obj.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.array[1] = AllAddress[this.value[0]].city.map(obj => {
|
||||||
|
return {
|
||||||
|
name: obj.name
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => {
|
||||||
|
return {
|
||||||
|
name: obj
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新索引
|
||||||
|
* */
|
||||||
|
updateSelectIndex(column, value){
|
||||||
|
let arr = JSON.parse(JSON.stringify(this.value))
|
||||||
|
arr[column] = value
|
||||||
|
if(column === 0 ) {
|
||||||
|
arr[1] = 0
|
||||||
|
arr[2] = 0
|
||||||
|
}
|
||||||
|
if(column === 1 ) {
|
||||||
|
arr[2] = 0
|
||||||
|
}
|
||||||
|
this.value = arr
|
||||||
|
return this
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新结果数据
|
||||||
|
* */
|
||||||
|
updateAddressDate() {
|
||||||
|
selectVal[0] = this.array[0][this.value[0]].name
|
||||||
|
selectVal[1] = this.array[1][this.value[1]].name
|
||||||
|
selectVal[2] = this.array[2][this.value[2]].name
|
||||||
|
return this
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点击确定
|
||||||
|
* */
|
||||||
|
bindPickerChange(e) {
|
||||||
|
this.$emit('change', {
|
||||||
|
index: this.value,
|
||||||
|
data: selectVal
|
||||||
|
})
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,89 @@
|
||||||
|
{
|
||||||
|
"id": "uni-indexed-list",
|
||||||
|
"displayName": "uni-indexed-list 索引列表",
|
||||||
|
"version": "1.2.1",
|
||||||
|
"description": "索引列表组件，右侧带索引的列表，方便快速定位到具体内容，通常用于城市/机场选择等场景",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"索引列表",
|
||||||
|
"索引",
|
||||||
|
"列表"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-icons"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
<template>
|
||||||
|
<view class="bg-white margin-top">
|
||||||
|
<view class="common-logistics bgff">
|
||||||
|
<view class="logistic-item" v-for="(item,index) in logisticsData" :key="index">
|
||||||
|
<view class="total-wrap" :style="{marginTop: item.isFirstNode ? '22rpx' : '6rpx'}">
|
||||||
|
<view class="item-container">
|
||||||
|
<view class="w-120 tct"
|
||||||
|
:class="[index == 0 ? 'text-1A1A1A' : 'text-808080']">
|
||||||
|
<view class="text-df col333 fs-20">{{item.monthDay}}</view>
|
||||||
|
<view class="text-sm col_868686 fs-20">{{item.hourMinute}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-container-center ">
|
||||||
|
<view v-if="String(item.status) != '在途'" class="tag-container rowsc">
|
||||||
|
<image class="w-48 h-48" :src="nodeIconUrl(item.status,index)" mode="scaleToFill"></image>
|
||||||
|
</view>
|
||||||
|
<view v-else class="rowsc rowsm">
|
||||||
|
<view class="w-12 h-12 br-6" style="background-color: #ddd;"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="line-container h100">
|
||||||
|
<view v-if="index !== logisticsData.length - 1" class="line h100" :style="{height: item.isFirstNode ? '120rpx':'80rpx'}"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-container-right" :style="{paddingTop: item.isFirstNode?'0':'8rpx'}">
|
||||||
|
<view v-if="item.isFirstNode" class="item-title text-dm text-bold" :class="[index == 0 ? 'text-1A1A1A' : 'text-808080']">{{item.status}}</view>
|
||||||
|
<view class="fs-24" :class="[index == 0 ? 'col333' : 'col_868686']" style="line-height: 1.2;" :style="{marginTop: item.isFirstNode ? '10rpx' : '0'}">{{item.context}}</view>
|
||||||
|
<view class="item-time">{{item.createTime}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
logisticsData: {
|
||||||
|
type: [Object, Array]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
nodeIconUrl() {
|
||||||
|
return function(data, isFirstIndex) {
|
||||||
|
console.log(data)
|
||||||
|
// 0在途，1揽收，2疑难，3签收，4退签，5派件，6退回，7转单，10待清关，11清关中，12已清关，13清关异常，14收件人拒签
|
||||||
|
// 图标根据需要自行更改,这里只作演示
|
||||||
|
if (data == '在途') {
|
||||||
|
return isFirstIndex === 0 ? '/static/shohuo1.png' : '/static/shohuo1.png'
|
||||||
|
} else if (data == '揽收') {
|
||||||
|
return isFirstIndex === 0 ? '/static/shohuo1.png' : '/static/shohuo1.png'
|
||||||
|
} else if (data == '在途') {
|
||||||
|
return isFirstIndex === 0 ? '/static/ckwl_yunshuzhong.png' : '/static/ckwl_yunshuzhong.png'
|
||||||
|
} else if (data == '疑难') {
|
||||||
|
return isFirstIndex === 0 ? '/static/images/logo.png' : '/static/images/logo.png'
|
||||||
|
} else if (data == '签收') {
|
||||||
|
return isFirstIndex === 0 ? '/static/ckwl_shou.png' : '/static/images/logo.png'
|
||||||
|
} else if (data == '退签') {
|
||||||
|
return isFirstIndex === 0 ? '/static/images/logo.png' : '/static/images/logo.png'
|
||||||
|
} else if (data == '派件') {
|
||||||
|
return isFirstIndex === 0 ? '/static/ckwl_yunshuzhong.png' : '/static/ckwl_yunshuzhong.png'
|
||||||
|
} else if (data == '退回') {
|
||||||
|
return isFirstIndex === 0 ? '/static/images/logo.png' : '/static/images/logo.png'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.common-logistics {
|
||||||
|
width: 710rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
height: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20rpx 30rpx 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-container {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.item-container-left {
|
||||||
|
width: 120rpx;
|
||||||
|
max-width: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-container-center {
|
||||||
|
width: 44rpx;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.tag-container {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-tag-container {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item-tag {
|
||||||
|
width: 14rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 2rpx;
|
||||||
|
background-color: #dcdcdc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-container-right {
|
||||||
|
width: 510rpx;
|
||||||
|
max-width: 510rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 10rpx 0 24rpx;
|
||||||
|
|
||||||
|
.item-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 44rpx;
|
||||||
|
color: #222;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-desc {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-time {
|
||||||
|
margin-top: 12rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 34rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-state {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.take-space {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-1A1A1A {
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-999999 {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-808080 {
|
||||||
|
color: #808080;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
## 1.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fav](https://uniapp.dcloud.io/component/uniui/uni-fav)
|
||||||
|
## 1.1.1（2021-08-24）
|
||||||
|
- 新增 支持国际化
|
||||||
|
## 1.1.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.6（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.0.5（2021-04-21）
|
||||||
|
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||||
|
## 1.0.4（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
## 1.0.3（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
## 1.0.2（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue