Skip to content

J
jz_Travel
Commit b00a64d7 authored by 罗超's avatar 罗超
Browse files
Options

补充提交uview

parent df59c87c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 35825 additions and 80 deletions
App.vue
View file @ b00a64d7
......@@ -104,14 +104,14 @@ export default {
<style lang="scss">
@import "uview-ui/index.scss";
@font-face {
font-family: "oswald";
src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
}
html,
body {
font-family: "oswald" !important;
}
// @font-face {
// font-family: "oswald";
// src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
// }
// html,
// body {
// font-family: "oswald" !important;
// }
swiper {
height: unset;
......
components/goods/style2.vue
View file @ b00a64d7
......@@ -33,9 +33,11 @@
</view>
<view class="good-info">
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
<view class="good-sub-name">这里的小文字介绍一点特色...</view>
<view class="good-price-info">
<view class="price" :style="{ color: mainColor }">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}
<span style='text-decoration: line-through;margin-left: 10px;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span>
<view class="price">
{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}
<!-- <span style='text-decoration: line-through;margin-left: 10px;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span> -->
</view>
<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
......@@ -125,6 +127,9 @@ export default {
border-radius: 10rpx;
overflow: hidden;
padding-bottom: 10rpx;
box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
border-radius: 20rpx;
}
.good-two .tips {
width: 64rpx;
......@@ -136,9 +141,10 @@ export default {
}
.good-two .img-box {
width: 100%;
height: 0;
padding-top: 100%;
height: 330rpx;
position: relative;
border-radius: 20rpx;
overflow: hidden;
}
.good-two .img-box .img-show {
position: absolute;
......@@ -161,27 +167,44 @@ export default {
top: 0;
}
.good-two .good-info {
padding: 6rpx;
margin-top: -5px;
padding-bottom: 0;
padding: 20rpx;
/* margin-top: -5px;
padding-bottom: 0; */
}
.good-two .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin: 3px 0;
font-size: 13px;
height: 37px;
/* -webkit-line-clamp: 2;
-webkit-box-orient: vertical; */
white-space: nowrap;
margin-bottom: 10rpx;
font-size: 26rpx;
font-weight: 600;
/* height: 37px; */
}
.good-two .good-info .good-sub-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 2;
-webkit-box-orient: vertical; */
white-space: nowrap;
margin-bottom: 10rpx;
font-size: 22rpx;
color: #999999;
/* height: 37px; */
}
.good-two .good-info .good-price-info {
display: flex;
flex-direction: row-reverse;
}
.good-two .good-info .good-price-info .price {
color: #ff4544;
flex: 1;
font-size: 14px;
color: #FF3166;
/* flex: 1; */
font-size: 26rpx;
font-weight: 500;
text-align: right;
}
.good-two .good-info .good-price-info .buy {
/* width: 24px; */
......
components/goods/style5.vue
View file @ b00a64d7
......@@ -25,12 +25,14 @@
</view>
<view class="good-info">
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
<view class="good-sub-name">这里的小文字介绍一点特色一类...</view>
<view class="good-price-info">
<view class="price" :style="{ color: mainColor }">
<span>
<view class="good-sub-name" style="flex:1;">1天·共3个观光点</view>
<span style="color: #111;">
{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}
</span>
<span style='text-decoration: line-through;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span>
<!-- <span style='text-decoration: line-through;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span> -->
</view>
<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
......@@ -122,12 +124,16 @@ export default {
} */
.her-scoller .good-five {
position: relative;
margin-right: 12px;
width: 30%;
border: 1rpx solid transparent;
margin-right: 30rpx;
/* width: 30%; */
/* border: 1rpx solid transparent;
border-radius: 10rpx;
padding-bottom: 10rpx;
padding-bottom: 10rpx; */
display:inline-block;
width: 560rpx;
box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
border-radius: 20rpx;
/* float: left; */
}
.her-scoller .good-five .tips {
......@@ -140,9 +146,12 @@ export default {
}
.her-scoller .good-five .img-box {
width: 100%;
height: 0;
padding-top: 100%;
/* height: 0;
padding-top: 100%; */
position: relative;
height: 224rpx;
border-radius: 20rpx;
overflow: hidden;
}
.her-scoller .good-five .img-box .img-show {
position: absolute;
......@@ -166,18 +175,28 @@ export default {
top: 0;
}
.her-scoller .good-five .good-info {
padding: 6rpx;
padding-bottom: 0;
padding: 30rpx;
}
.her-scoller .good-five .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 4rpx;
font-size: 13px;
/* -webkit-line-clamp: 2;
-webkit-box-orient: vertical; */
white-space: nowrap;
margin-bottom: 10rpx;
font-size: 26rpx;
width: 100%;
font-weight: 600;
}
.her-scoller .good-five .good-info .good-sub-name{
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
font-size: 22rpx;
color: #999999;
margin-bottom: 10rpx;
}
.her-scoller .good-five .good-info .good-price-info {
display: flex;
......@@ -192,7 +211,7 @@ export default {
text-overflow: ellipsis;
overflow: hidden;
display: flex;
flex-direction: column;
/* flex-direction: column; */
}
.her-scoller .good-five .good-info .good-price-info .buy {
width: 24px;
......
components/goods/style7.vue
View file @ b00a64d7
<template>
<view
style="padding:0 12px;width:100%;"
style="padding:0 15px;width:100%;"
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
......@@ -18,9 +18,14 @@
}"
>
<view class="tips" v-if="goodsInfo.showGoodsTag"><image :src="goodsInfo.goodsTagPicUrl" mode="widthFix" style="width: 100%;" /></view>
<view class="img-box"><image style="width: 100%; height: 100%;" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" /></view>
<view class="img-box">
<image class="img-0" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" />
<image class="img-1" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" />
<image class="img-2" :mode="goodsInfo.fill == 1 ? 'aspectFill' : 'aspectFit'" :src="item.picUrl" />
</view>
<view class="good-info">
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ item.name }}</view>
<view class="sencond-title">这里的小文字介绍一点特色一类...</view>
<view class="good-price-info">
<view>
<u-rate
......@@ -28,15 +33,15 @@
:active-color="mainColor" inactive-color="#DDDDDD"
active-icon="star"
inactive-icon="star-o"
size="20"
size="34"
:disabled="true"
></u-rate>
<text class="good-rb-text">{{item.courseScore!=null &&item.courseScore>0?item.courseScore.toFixed(1):'5.0'}}分</text>
</view>
<view class="price" :style="{ color: mainColor }" v-if="item.price>0">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}
<view class="price" :style="{ color: mainColor }" v-if="item.price>0 && goodsInfo.showGoodsPrice">{{ goodsInfo.showGoodsPrice ? getPrice(item.price) : '' }}
<span style='text-decoration: line-through;margin-left: 3px;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span>
</view>
<view class="price" v-else style="font-size:13px;color:#999999">免费</view>
<view class="price" v-else-if="goodsInfo.showGoodsPrice" style="font-size:13px;color:#999999">免费</view>
<view class="buy" v-if="goodsInfo.showBuyBtn" @click.stop="showSkuHandler(item)">
<u-icon name="cart-o" size="40" :color="mainColor" v-if="goodsInfo.buyBtn == 'cart'" />
<u-icon name="add-o" size="40" :color="mainColor" v-else-if="goodsInfo.buyBtn == 'add'" />
......@@ -133,6 +138,12 @@ export default {
box-sizing: border-box;
padding: 0 1px 1px 0;
overflow: hidden;
padding-bottom: 14px;
border-bottom: 1px solid #e2e2e2;
}
.good-seven:last-child{
padding-bottom: 0;
border-bottom: none;
}
.good-seven .tips {
width: 64rpx;
......@@ -143,11 +154,43 @@ export default {
z-index: 4;
}
.good-seven .img-box {
width: 125px;
height: 70px;
border-radius:4px;
width: 266rpx;
height: 260rpx;
overflow: hidden;
box-shadow:0 4px 10px 1px #D2D2D2;
position: relative;
border-radius:20rpx;
}
.good-seven .img-box .img-0{
width: 200rpx;
border-radius:20rpx;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
height: 260rpx;
z-index: 3;
}
.good-seven .img-box .img-1{
width: 200rpx;
border-radius:20rpx;
overflow: hidden;
position: absolute;
left: 40rpx;
top: 20rpx;
height: 220rpx;
opacity: 0.6;
z-index: 2;
}
.good-seven .img-box .img-2{
width: 200rpx;
border-radius:20rpx;
overflow: hidden;
position: absolute;
left: 66rpx;
top: 40rpx;
height: 180rpx;
opacity: 0.3;
z-index: 1;
}
.good-seven .good-info {
padding-left: 12px;
......@@ -160,13 +203,14 @@ export default {
/* width:20%; */
}
.good-seven .good-info .good-name {
font-size: 13px;
height: 34px;
font-size: 30rpx;
height: 80rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #111;
}
.good-seven .good-info .good-price-info {
display: flex;
......@@ -177,10 +221,16 @@ export default {
flex: 1;
padding-bottom: 10rpx;
}
.good-seven .good-info .sencond-title{
font-size: 24rpx;
font-weight: 500;
color: #999999;
line-height: 32rpx;
margin-top: 5px;
}
.good-seven .good-rb-text {
font-size: 11px;
font-size: 32rpx;
color: #999999;
margin-top: 3px;
margin-left: 2px;
}
......
components/navpage/index.vue
View file @ b00a64d7
......@@ -13,9 +13,9 @@
</view>
</swiper-item>
</swiper>
<u-tabs v-if="navs.navType===0" :bg-color="navs.backgroundColor" :is-scroll="true" name="Name" :list="navs.navs" :active-color="mainColor" :current="active" @change="changeHandler2"
:show-bar="true" :activeFontSize="34" :bold="true" height="100" duration="0" font-size="28"></u-tabs>
<template>
<u-tabs v-if="navs.navType===0" :bg-color="navs.backgroundColor" :is-scroll="false" name="Name" :list="navs.navs" :active-color="mainColor" :current="active" @change="changeHandler2"
:show-bar="true" :activeFontSize="34" :inactive-color="secondary" :bold="true" height="100" duration="0" font-size="28"></u-tabs>
<template>
<template v-if="clickItem.ShowType==0">
<cats v-if="clickItem.ComponentName == 'cats'"></cats>
<activity v-if="clickItem.ComponentName == 'activity'"></activity>
......@@ -30,6 +30,7 @@
<rgoods v-if="subItem.Id == 'educationCustom'" :goods="subItem.data"></rgoods>
<matchmaking v-if="subItem.Id == 'miaiuser'" :navs="subItem.data"></matchmaking>
<pagetitle v-if="subItem.Id == 'link'" :ts="subItem.data" ></pagetitle>
<goods v-if="subItem.Id == 'goods'" :goods="subItem.data" ></goods>
</template>
</template>
</template>
......@@ -70,6 +71,7 @@
import rgoods from "@/components/study/index.vue";
import matchmaking from "@/components/matchmaking/index";
import pagetitle from "@/components/pagetitle/index";
import goods from "@/components/goods/index";
export default {
components: {
cats,
......@@ -77,7 +79,8 @@
rubik,
rgoods,
matchmaking,
pagetitle
pagetitle,
goods
},
props: ["navs"],
data() {
......@@ -95,12 +98,14 @@
CompanyName:'' //公司名-中文
},
mainColor:"",
secondary:"",
active:0
};
},
created() {
console.log(this.navs)
this.mainColor = this.$uiConfig.mainColor;
this.secondary=this.$uiConfig.secondary;
let tempArray = [];
this.height = this.navs.rows * this.height;
this.navs.navs.forEach((x, i) => {
......@@ -122,7 +127,7 @@
backgroundSize: `${this.navs.backgroundWidth}% ${this.navs.backgroundHeight}%;`,
};
} else {
if (this.navs.backgroundColor.indexOf("#") == -1) {
if (this.navs.backgroundColor && this.navs.backgroundColor.indexOf("#") == -1) {
this.navs.backgroundColor = "#" + this.navs.backgroundColor;
}
this.formatStyle = {
......
components/pagetitle/index.vue
View file @ b00a64d7
......@@ -9,7 +9,12 @@
<view
v-if="ts.style=='1'"
:style="{'text-align':ts.position,'font-size':ts.fontSize+'rpx','color':ts.color}"
>{{ts.title}}</view>
>
<span style="display: inline-block;position: relative;">
<text style="position: relative;z-index: 2;">{{ts.title}}</text>
<span style="background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
</view>
<view v-else-if="ts.style=='2'" class="style2">
<view
class="text"
......@@ -40,7 +45,8 @@
</view>
</view>
<view class="arrowRight" v-if="ts.arrowsSwitch">
<u-icon name="arrow" :size="ts.fontSize" />
<!-- <u-icon name="arrow" :size="ts.fontSize" /> -->
<text>更多</text>
</view>
</view>
</template>
......@@ -169,8 +175,10 @@ export default {
border-radius: 100%;
}
.page-title .arrowRight {
width: 8px;
width: 24px;
margin-right: 10px;
text-align: right;
font-size: 12px;
color: #999999;
}
</style>
\ No newline at end of file
components/study/style5.vue
View file @ b00a64d7
......@@ -71,25 +71,24 @@
}
.myStudy_five_study {
position: relative;
margin-bottom: 14px;
display: flex;
margin-right: 14px;
box-sizing: border-box;
padding: 0 1px 1px 0;
width:600px;
}
.myStudy_five_study:last-child{
margin-bottom:0!important;
margin-right:0!important;
}
.myStudy_five_study .img-box {
width: 110px;
height: 70px;
border-radius: 4px;
width: 210rpx;
height: 280rpx;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px 1px #D2D2D2;
}
.myStudy_five_study .good-info {
padding: 0 12px 12px 12px;
padding: 20rpx 0px 12px 0px;
flex: 1;
border: 10rpx;
padding-bottom: 0;
......@@ -101,12 +100,10 @@
.myStudy_five_study .good-info .good-name {
font-size: 13px;
margin-bottom:5px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width:130px;
white-space: nowrap;
overflow: hidden;
width:210rpx;
font-weight: 600;
}
......
node_modules/.yarn-integrity 0 → 100644
View file @ b00a64d7
{
"systemParams": "win32-x64-93",
"modulesFolders": [],
"flags": [],
"linkedModules": [],
"topLevelPatterns": [],
"lockfileEntries": {},
"files": [],
"artifacts": {}
}
\ No newline at end of file
node_modules/uview-ui/LICENSE 0 → 100644
View file @ b00a64d7
MIT License
Copyright (c) 2020 www.uviewui.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
node_modules/uview-ui/README.md 0 → 100644
View file @ b00a64d7
<p align="center">
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
</p>
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
<h3 align="center">多平台快速开发的UI框架</h3>
## 说明
uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
## 特性
- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
- 众多的常用页面和布局，让您专注逻辑，事半功倍
- 详尽的文档支持，现代化的演示效果
- 按需引入，精简打包体积
## 安装
```bash
# npm方式安装
npm i uview-ui
```
## 快速上手
1. `main.js`引入uView库
```js
// main.js
import uView from 'uview-ui';
Vue.use(uView);
```
2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
```css
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
```
3. `uni.scss`引入全局scss变量文件
```css
/* uni.scss */
@import "uview-ui/themb.scss";
```
4. `pages.json`配置easycom规则(按需引入)
```js
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
```
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
## 使用方法
配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
```html
<template>
<u-buton>按钮</u-buton>
</template>
```
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
## 链接
- [官方文档](https://uviewui.com/)
- [更新日志](https://uviewui.com/components/changelog.html)
- [升级指南](https://uviewui.com/components/changelog.html)
- [关于我们](https://uviewui.com/cooperation/about.html)
## 预览
您可以通过**微信**扫码，查看最佳的演示效果。
<br>
<br>
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
<!-- ## 捐赠uView的研发
uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
<img src="https://uviewui.com/common/wechat.png" width="220" >
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
-->
## 版权信息
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。
node_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue 0 → 100644
View file @ b00a64d7
<template>
<u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
<view class="u-tips u-border-bottom" v-if="tips.text" :style="tipsStyle">
{{tips.text}}
</view>
<block v-for="(item, index) in list" :key="index">
<view @touchmove.stop.prevent @tap="itemClick(index)" :style="[itemStyle(index)]" class="u-action-sheet-item" :class="[index < list.length - 1 ? 'u-border-bottom' : '']"
hover-class="u-hover-class" :hover-stay-time="150">
{{ item[name] || item['name']}}
</view>
</block>
<view class="u-gab" v-if="cancelBtn">
</view>
<view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
:hover-stay-time="150" v-if="cancelBtn" @tap="close">取消</view>
</u-popup>
</template>
<script>
/**
* actionSheet 操作菜单
* @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
* @tutorial https://www.uviewui.com/components/actionSheet.html
* @property {Array<Object>} list 按钮的文字数组，见官方文档示例
* @property {Object} tips 顶部的提示文字，见官方文档示例
* @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
* @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Number String} z-index z-index值（默认1075）
* @event {Function} click 点击ActionSheet列表项时触发
* @event {Function} close 点击取消按钮时触发
* @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
*/
export default {
name: "u-action-sheet",
props: {
// 点击遮罩是否可以关闭actionsheet
maskCloseAble: {
type: Boolean,
default: true
},
// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
list: {
type: Array,
default () {
// 如下
// return [{
// text: '确定',
// color: '',
// fontSize: ''
// }]
return [];
}
},
// 顶部的提示文字
tips: {
type: Object,
default () {
return {
text: '',
color: '',
fontSize: '26'
}
}
},
// 底部的取消按钮
cancelBtn: {
type: Boolean,
default: true
},
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 通过双向绑定控制组件的弹出与收起
value: {
type: Boolean,
default: false
},
// 弹出的顶部圆角值
borderRadius: {
type: [String, Number],
default: 0
},
// 弹出的z-index值
zIndex: {
type: [String, Number],
default: 0
},
// 读取传入的数组对象的属性
name: {
type: String,
default: 'text'
},
},
computed: {
// 顶部提示的样式
tipsStyle() {
let style = {};
if (this.tips.color) style.color = this.tips.color;
if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
return style;
},
// 操作项目的样式
itemStyle() {
return (index) => {
let style = {};
if (this.list[index].color) style.color = this.list[index].color;
if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
return style;
}
},
uZIndex() {
// 如果用户有传递z-index值，优先使用
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
}
},
methods: {
// 点击取消按钮
close() {
// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
// 这是一个vue发送事件的特殊用法
this.popupClose();
this.$emit('close');
},
// 弹窗关闭
popupClose() {
this.$emit('input', false);
},
// 点击某一个itemif (!this.show) return;
itemClick(index) {
this.$emit('click', index);
this.$emit('input', false);
}
}
}
</script>
<style lang="scss" scoped>
.u-tips {
font-size: 26rpx;
text-align: center;
padding: 34rpx 0;
line-height: 1;
color: $u-tips-color;
}
.u-action-sheet-item {
display: flex;
line-height: 1;
justify-content: center;
align-items: center;
font-size: 34rpx;
padding: 34rpx 0;
}
.u-gab {
height: 12rpx;
background-color: rgb(234, 234, 236);
}
.u-actionsheet-cancel {
color: $u-main-color;
}
</style>
node_modules/uview-ui/components/u-alert-tips/u-alert-tips.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-alert-tips" v-if="show" :class="{'u-close-alert-tips': !show}" :style="{
backgroundColor: computeBgColor,
borderColor: computeBorderColor
}">
<view class="u-icon-wrap">
<u-icon v-if="showIcon" :name="$u.type2icon(type)" :size="description ? 40 : 32" class="u-icon" :color="computeColor"></u-icon>
</view>
<view class="u-alert-content" @tap.stop="click">
<view class="u-alert-title" :style="{fontWeight: description ? 500 : 'normal'}">
{{title}}
</view>
<view v-if="description" class="u-alert-desc">
{{description}}
</view>
</view>
<view class="u-icon-wrap">
<u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc"
:size="22" class="u-close-icon" :style="{
top: description ? '18rpx' : '24rpx'
}"></u-icon>
</view>
<text v-if="closeAble && closeText" class="u-close-text" :style="{
top: description ? '18rpx' : '24rpx'
}">{{closeText}}</text>
</view>
</template>
<script>
/**
* alertTips 警告提示
* @description 警告提示，展现需要关注的信息
* @tutorial https://uviewui.com/components/alertTips.html
* @property {String} title 辅助性文字，颜色比title浅一点，字号也小一点，可选
* @property {String} description 显示的标题文字
* @property {String} type 关闭按钮(默认为叉号icon图标)
* @property {String} close-able 用文字替代关闭图标，close-able为true时有效
* @property {Boolean} show-icon 是否显示左边的辅助图标
* @property {Boolean} show 显示或隐藏组件
* @event {Function} click 点击组件时触发
* @event {Function} close 点击关闭按钮时触发
*/
export default {
name: 'u-alert-tips',
props: {
// 显示文字
title: {
type: String,
default: ''
},
// 主题，success/warning/info/error
type: {
type: String,
default: 'warning'
},
// 辅助性文字
description: {
type: String,
default: ''
},
// 是否可关闭
closeAble: {
type: Boolean,
default: false
},
// 关闭按钮自定义文本
closeText: {
type: String,
default: ''
},
// 是否显示图标
showIcon: {
type: Boolean,
default: false
},
// 文字颜色，如果定义了color值，icon会失效
color: {
type: String,
default: ''
},
// 背景颜色
bgColor: {
type: String,
default: ''
},
// 边框颜色
borderColor: {
type: String,
default: ''
},
// 是否显示
show: {
type: Boolean,
default: true
}
},
data() {
return {
}
},
watch: {
show(val) {
if (val == false) {
// 先opacity隐藏，再移除
setTimeout(() => {
this.showAlert = false;
}, 300);
}
}
},
computed: {
// 计算字体颜色，如果没有自定义的，就用uview主题颜色
computeColor() {
if (this.color) return this.color;
else return this.$u.color[this.type];
},
// 计算背景颜色
computeBgColor() {
if (this.bgColor) return this.bgColor;
return this.$u.color[this.type + 'Light'];
},
computeBorderColor() {
if (this.borderColor) return this.borderColor;
return this.$u.color[this.type + 'Disabled'];
}
},
methods: {
// 点击内容
click() {
this.$emit('click');
},
// 点击关闭按钮
close() {
this.$emit('close');
}
}
}
</script>
<style lang="scss" scoped>
.u-alert-tips {
display: flex;
align-items: center;
padding: 16rpx 30rpx;
border-radius: 8rpx;
position: relative;
transition: all 0.3s linear;
border: 1px solid #fff;
}
.u-close-alert-tips {
opacity: 0;
visibility: hidden;
}
@keyframes myfirst {
from {
height: 100%;
}
to {
height: 0
}
}
.u-icon {
margin-right: 16rpx;
}
.u-alert-title {
font-size: 28rpx;
color: $u-main-color;
}
.u-alert-desc {
font-size: 26rpx;
text-align: left;
color: $u-content-color;
}
.u-close-icon {
position: absolute;
top: 20rpx;
right: 20rpx;
}
.u-close-hover {
color: red;
}
.u-close-text {
font-size: 24rpx;
color: $u-tips-color;
position: absolute;
top: 20rpx;
right: 20rpx;
line-height: 1;
}
</style>
node_modules/uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="content">
<view class="cropper-wrapper" :style="{height: cropperOpt.height + 'px'}">
<canvas class="cropper" :disable-scroll="true" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }" canvas-id="cropper"></canvas>
<canvas class="cropper" :disable-scroll="true" :style="{
position: 'fixed',
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
height: `${cropperOpt.height * cropperOpt.pixelRatio}`
}"
canvas-id="targetId">
</canvas>
</view>
<view class="cropper-buttons safe-area-padding" :style="{height: bottomNavHeight + 'px'}">
<view class="upload" @tap="uploadTap">重新选择</view>
<view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
</view>
</view>
</template>
<script>
import WeCropper from './weCropper.js';
export default {
props: {
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
boundStyle: {
type: Object,
default() {
return {
lineWidth: 4,
borderColor: 'rgb(245, 245, 245)',
mask: 'rgba(0, 0, 0, 0.35)'
}
}
},
// // 裁剪框宽度，单位rpx
// rectWidth: {
// type: [String, Number],
// default: 400
// },
// // 裁剪框高度，单位rpx
// rectHeight: {
// type: [String, Number],
// default: 400
// },
// // 输出图片宽度，单位rpx
// destWidth: {
// type: [String, Number],
// default: 400
// },
// // 输出图片高度，单位rpx
// destHeight: {
// type: [String, Number],
// default: 400
// },
// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
// fileType: {
// type: String,
// default: 'jpg',
// },
// // 生成的图片质量
// // H5上无效，目前不考虑使用此参数
// quality: {
// type: [Number, String],
// default: 1
// }
},
data() {
return {
// 底部导航的高度
bottomNavHeight: 50,
originWidth: 200,
width: 0,
height: 0,
cropperOpt: {
id: 'cropper',
targetId: 'targetCropper',
pixelRatio: 1,
width: 0,
height: 0,
scale: 2.5,
zoom: 8,
cut: {
x: (this.width - this.originWidth) / 2,
y: (this.height - this.originWidth) / 2,
width: this.originWidth,
height: this.originWidth,
},
boundStyle: {
lineWidth: uni.upx2px(this.boundStyle.lineWidth),
mask: this.boundStyle.mask,
color: this.boundStyle.borderColor
},
},
// 裁剪框和输出图片的尺寸，高度默认等于宽度
// 输出图片宽度，单位px
destWidth: 200,
// 裁剪框宽度，单位px
rectWidth: 200,
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg',
}
},
onLoad(option) {
let rectInfo = uni.getSystemInfoSync();
this.width = rectInfo.windowWidth;
this.height = rectInfo.windowHeight - this.bottomNavHeight;
this.cropperOpt.width = this.width;
this.cropperOpt.height = this.height;
this.cropperOpt.pixelRatio = rectInfo.pixelRatio;
if(option.destWidth) this.destWidth = option.destWidth;
if(option.rectWidth){
let rectWidth = Number(option.rectWidth);
this.cropperOpt.cut = {
x: (this.width - rectWidth) / 2,
y: (this.height - rectWidth) / 2,
width: rectWidth,
height: rectWidth,
}
} this.rectWidth = option.rectWidth;
if(option.fileType) this.fileType = option.fileType;
// 初始化
this.cropper = new WeCropper(this.cropperOpt)
.on('ready', (ctx) => {
// console.log(`wecropper is ready for work!`)
})
.on('beforeImageLoad', (ctx) => {
// console.log(`before picture loaded, i can do something`)
})
.on('imageLoad', (ctx) => {
// console.log(`picture loaded`)
})
.on('beforeDraw', (ctx, instance) => {
// console.log(`before canvas draw,i can do something`)
})
// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#000000',
})
uni.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: (res) => {
let src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
this.cropper.pushOrign(src);
}
});
},
methods: {
touchStart(e) {
this.cropper.touchStart(e)
},
touchMove(e) {
this.cropper.touchMove(e)
},
touchEnd(e) {
this.cropper.touchEnd(e)
},
getCropperImage(isPre = false) {
let cropper_opt = {
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
destWidth: Number(this.destWidth),
fileType: this.fileType,
}
this.cropper.getCropperImage(cropper_opt, (path, err) => {
if (err) {
uni.showModal({
title: '温馨提示',
content: err.message
})
} else {
if(isPre) {
uni.previewImage({
current: '', // 当前显示图片的 http 链接
urls: [path] // 需要预览的图片 http 链接列表
})
} else {
uni.$emit('uAvatarCropper', path);
this.$u.route({
type: 'back'
})
}
}
})
},
uploadTap() {
const self = this
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
const src = res.tempFilePaths[0]
// 获取裁剪图片资源后，给data添加src属性及其值
self.cropper.pushOrign(src)
}
})
},
}
}
</script>
<style scoped>
.content {
background: rgba(255, 255, 255, 1);
}
.cropper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
}
.cropper-buttons {
background-color: #000000;
color: #eee;
}
.cropper-wrapper {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #000;
}
.cropper-buttons {
width: 100vw;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
font-size: 28rpx;
}
.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
width: 50%;
text-align: center;
}
.cropper-buttons .upload {
text-align: left;
padding-left: 50rpx;
}
.cropper-buttons .getCropperImage {
text-align: right;
padding-right: 50rpx;
}
</style>
\ No newline at end of file
node_modules/uview-ui/components/u-avatar-cropper/weCropper.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-avatar/u-avatar.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-badge/u-badge.vue 0 → 100644
View file @ b00a64d7
<template>
<view v-if="show" class="u-badge-box" :class="[isDot ? 'u-badge-dot' : 'u-badge', size == 'mini' ? 'u-badge-mini' : '']" :style="[{
top: offset[0] + 'rpx',
right: offset[1] + 'rpx',
fontSize: fontSize + 'rpx',
position: absolute ? 'absolute' : 'static',
color: color,
backgroundColor: backgroundColor
}, boxStyle]">
{{showText}}
</view>
</template>
<script>
/**
* badge 角标
* @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
* @tutorial https://www.uviewui.com/components/badge.html
* @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
* @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
* @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
* @property {String Number} overflow-count 展示封顶的数字值（默认99）
* @property {String} type 使用预设的背景颜色（默认error）
* @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
* @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
* @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
* @property {String} color 字体颜色（默认#ffffff）
* @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
* @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
* @example <u-badge type="error" count="7"></u-badge>
*/
export default {
name: 'u-badge',
props: {
// primary,warning,success,error,info
type: {
type: String,
default: 'error'
},
// default, mini
size: {
type: String,
default: 'default'
},
//是否是圆点
isDot: {
type: Boolean,
default: false
},
// 显示的数值内容
count: {
type: [Number, String],
},
// 展示封顶的数字值
overflowCount: {
type: Number,
default: 99
},
// 当数值为 0 时，是否展示 Badge
showZero: {
type: Boolean,
default: false
},
// 位置偏移
offset: {
type: Array,
default: () => {
return [20, 20]
}
},
// 是否开启绝对定位，开启了offset才会起作用
absolute: {
type: Boolean,
default: true
},
// 字体大小
fontSize: {
type: [String, Number],
default: '24'
},
// 字体演示
color: {
type: String,
default: '#ffffff'
},
// badge的背景颜色
bgColor: {
type: String,
default: ''
},
// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效
isCenter: {
type: Boolean,
default: false
}
},
computed: {
// 是否将badge中心与父组件右上角重合
boxStyle() {
let style = {};
if(this.isCenter) {
style.top = 0;
style.right = 0;
// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
style.transform = "translateY(-50%) translateX(50%)";
} else {
style.top = this.offset[0] + 'rpx';
style.right = this.offset[1] + 'rpx';
style.transform = "translateY(0) translateX(0)";
}
// 如果尺寸为mini，后接上scal()
if(this.size == 'mini') {
style.transform = style.transform + " scale(0.8)";
}
return style;
},
// isDot类型时，不显示文字
showText() {
if(this.isDot) return '';
else {
if(this.count > this.overflowCount) return `${this.overflowCount}+`;
else return this.count;
}
},
// 是否显示组件
show() {
// 如果count的值为0，并且showZero设置为false，不显示组件
if(this.count == 0 && this.showZero == false) return false;
else return true;
},
// 获取背景颜色，如果定义了bgColor参数，就放弃type主题色
backgroundColor() {
return this.bgColor ? this.bgColor : this.$u.color[this.type];
}
}
}
</script>
<style lang="scss" scoped>
.u-badge-box {
display: inline-flex;
justify-content: center;
align-items: center;
}
.u-badge {
line-height: 24rpx;
padding: 4rpx 8rpx;
border-radius: 100rpx;
}
.u-badge-dot {
height: 16rpx;
width: 16rpx;
border-radius: 100rpx;
line-height: 1;
}
.u-badge-mini {
transform: scale(0.8);
transform-origin: center center;
}
// .u-primary {
// background: $u-type-primary;
// color: #fff;
// }
// .u-error {
// background: $u-type-error;
// color: #fff;
// }
// .u-warning {
// background: $u-type-warning;
// color: #fff;
// }
// .u-success {
// background: $u-type-success;
// color: #fff;
// }
// .u-black {
// background: #585858;
// color: #fff;
// }
.u-info {
background: $u-type-info;
color: #fff;
}
</style>
\ No newline at end of file
node_modules/uview-ui/components/u-button/u-button.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-car-keyboard/u-car-keyboard.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-keyboard" @touchmove.stop.prevent>
<view class="u-keyboard-grids">
<block>
<view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
<view :hover-stay-time="100" @tap="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn"
v-for="(item, j) in group" :key="j">
{{ item }}
</view>
</view>
<view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
hover-class="u-hover-class">
<u-icon :size="38" name="backspace" :bold="true"></u-icon>
</view>
<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode">
<text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
/
<text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
</view>
</block>
</view>
</view>
</template>
<script>
/**
* carKeyboard 车牌号键盘
* @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
* @tutorial https://www.uviewui.com/components/keyboard.html
* @property {String} mode 键盘类型，见官网基本使用的说明（默认number）
* @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true）
* @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true）
* @property {String} tips 工具条中间的提示文字，见官网基本使用的说明，如不需要，请传""空字符
* @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true）
* @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true）
* @property {Boolean} mask 是否显示遮罩（默认true）
* @property {Number String} z-index 弹出键盘的z-index值（默认1075）
* @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true）
* @event {Function} change 按键被点击(不包含退格键被点击)
* @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
* @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
* @event {Function} backspace 键盘退格键被点击
* @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
*/
export default {
name: "u-keyboard",
props: {
// 是否打乱键盘按键的顺序
random: {
type: Boolean,
default: false
}
},
data() {
return {
// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
abc: false
};
},
computed: {
areaList() {
let data = [
'京',
'沪',
'粤',
'津',
'冀',
'豫',
'云',
'辽',
'黑',
'湘',
'皖',
'鲁',
'苏',
'浙',
'赣',
'鄂',
'桂',
'甘',
'晋',
'陕',
'蒙',
'吉',
'闽',
'贵',
'渝',
'川',
'青',
'琼',
'宁',
'挂',
'藏',
'港',
'澳',
'新',
'使',
'学'
];
let tmp = [];
// 打乱顺序
if (this.random) data = this.$u.randomArray(data);
// 切割成二维数组
tmp[0] = data.slice(0, 10);
tmp[1] = data.slice(10, 20);
tmp[2] = data.slice(20, 30);
tmp[3] = data.slice(30, 36);
return tmp;
},
EngKeyBoardList() {
let data = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
0,
'Q',
'W',
'E',
'R',
'T',
'Y',
'U',
'I',
'O',
'P',
'A',
'S',
'D',
'F',
'G',
'H',
'J',
'K',
'L',
'Z',
'X',
'C',
'V',
'B',
'N',
'M'
];
let tmp = [];
if (this.random) data = this.$u.randomArray(data);
tmp[0] = data.slice(0, 10);
tmp[1] = data.slice(10, 20);
tmp[2] = data.slice(20, 30);
tmp[3] = data.slice(30, 36);
return tmp;
}
},
methods: {
// 点击键盘按钮
carInputClick(i, j) {
let value = '';
// 不同模式，获取不同数组的值
if (this.abc) value = this.EngKeyBoardList[i][j];
else value = this.areaList[i][j];
this.$emit('change', value);
},
// 修改汽车牌键盘的输入模式，中文|英文
changeCarInputMode() {
this.abc = !this.abc;
},
// 点击退格键
backspaceClick() {
this.$emit('backspace');
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
this.timer = setInterval(() => {
this.$emit('backspace');
}, 250);
},
clearTimer() {
clearInterval(this.timer);
},
}
};
</script>
<style lang="scss" scoped>
.u-keyboard-grids {
background: rgb(215, 215, 217);
padding: 24rpx 0;
position: relative;
}
.u-keyboard-grids-item {
display: flex;
align-items: center;
justify-content: center;
}
.u-keyboard-grids-btn {
text-decoration: none;
width: 62rpx;
flex: 0 0 64rpx;
height: 80rpx;
display: inline-block;
font-size: 36rpx;
text-align: center;
line-height: 80rpx;
background-color: #fff;
margin: 8rpx 5rpx;
border-radius: 8rpx;
box-shadow: 0 2rpx 0rpx #888992;
font-weight: 500;
}
.u-carinput-hover {
background-color: rgb(185, 188, 195) !important;
}
.u-keyboard-back {
position: absolute;
width: 96rpx;
right: 22rpx;
bottom: 32rpx;
height: 80rpx;
background-color: rgb(185, 188, 195);
display: flex;
align-items: center;
border-radius: 8rpx;
justify-content: center;
box-shadow: 0 2rpx 0rpx #888992;
}
.u-keyboard-change {
font-size: 24rpx;
box-shadow: 0 2rpx 0rpx #888992;
position: absolute;
width: 96rpx;
left: 22rpx;
line-height: 1;
bottom: 32rpx;
height: 80rpx;
background-color: #ffffff;
display: flex;
align-items: center;
border-radius: 8rpx;
justify-content: center;
}
.u-keyboard-change .inactive.zh {
transform: scale(0.85) translateY(-10rpx);
}
.u-keyboard-change .inactive.en {
transform: scale(0.85) translateY(10rpx);
}
.u-keyboard-change .active {
color: rgb(237, 112, 64);
font-size: 30rpx;
}
.u-keyboard-change .zh {
transform: translateY(-10rpx);
}
.u-keyboard-change .en {
transform: translateY(10rpx);
}
</style>
node_modules/uview-ui/components/u-cell-group/u-cell-group.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-cell-box">
<view class="u-cell-title" v-if="title" :style="[titleStyle]">
{{title}}
</view>
<view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}">
<slot />
</view>
</view>
</template>
<script>
/**
* cellGroup 单元格父组件Group
* @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
* @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 分组标题
* @property {Boolean} border 是否显示外边框（默认true）
* @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
* @example <u-cell-group title="设置喜好">
*/
export default {
name: "u-cell-group",
props: {
// 分组标题
title: {
type: String,
default: ''
},
// 是否显示分组list上下边框
border: {
type: Boolean,
default: true
},
// 分组标题的样式，对象形式，注意驼峰属性写法
// 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'}
titleStyle: {
type: Object,
default () {
return {};
}
}
},
data() {
return {
index: 0,
}
},
provide() {
return {
uCellGroup: this
}
},
}
</script>
<style lang="scss" scoped>
.u-cell-box {
width: 100%;
}
.u-cell-title {
padding: 30rpx 32rpx 10rpx 32rpx;
font-size: 30rpx;
text-align: left;
color: $u-tips-color;
}
.u-cell-item-box {
background-color: #FFFFFF;
}
</style>
node_modules/uview-ui/components/u-cell-item/u-cell-item.vue 0 → 100644
View file @ b00a64d7
<template>
<view
@tap="click"
class="u-cell"
:class="{ 'u-cell-border': itemIndex > 0 && borderBottom, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
hover-stay-time="150"
:hover-class="hoverClass"
:style="{
backgroundColor: bgColor
}"
>
<u-icon :size="iconSize" :name="icon" v-if="icon" class="u-cell__left-icon-wrap"></u-icon>
<view class="u-flex" v-else>
<slot name="icon"></slot>
</view>
<view
class="u-cell_title"
:style="[
{
width: titleWidth ? titleWidth + 'rpx' : 'auto'
},
titleStyle
]"
>
<block v-if="title">{{ title }}</block>
<slot name="title" v-else></slot>
<view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
<block v-if="label">{{ label }}</block>
<slot name="label" v-else></slot>
</view>
</view>
<view class="u-cell__value" :style="[valueStyle]">
<block class="u-cell__value" v-if="value">{{ value }}</block>
<slot v-else></slot>
</view>
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
<view class="u-flex" v-else>
<slot name="right-icon"></slot>
</view>
</view>
</template>
<script>
/**
* cellItem 单元格Item
* @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-group使用
* @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 左侧标题
* @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
* @property {String} value 右侧内容
* @property {String} label 标题下方的描述信息
* @property {Boolean} border-bottom 是否显示每个cell的下边框（默认true）
* @property {Boolean} center 是否使内容垂直居中（默认false）
* @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
* @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
* @property {Boolean} arrow 是否显示右侧箭头（默认true）
* @property {Boolean} required 箭头方向，可选值（默认right）
* @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
* @property {Object} title-style 标题样式，对象形式
* @property {Object} value-style 右侧内容样式，对象形式
* @property {Object} label-style 标题下方描述信息的样式，对象形式
* @property {String} bg-color 背景颜色（默认transparent）
* @property {String Number} index 用于在click事件回调中返回，标识当前是第几个Item
* @property {String Number} title-width 标题的宽度，单位rpx
* @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
*/
export default {
name: 'u-cell-item',
props: {
// 左侧图标名称(只能uView内置图标)，或者图标src
icon: {
type: String,
default: ''
},
// 左侧标题
title: {
type: String,
default: ''
},
// 右侧内容
value: {
type: String,
default: ''
},
// 标题下方的描述信息
label: {
type: String,
default: ''
},
// 是否显示内边框
borderBottom: {
type: Boolean,
default: true
},
// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
borderGap: {
type: Boolean,
default: true
},
// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
hoverClass: {
type: String,
default: 'u-cell-hover'
},
// 是否显示右侧箭头
arrow: {
type: Boolean,
default: true
},
// 内容是否垂直居中
center: {
type: Boolean,
default: false
},
// 是否显示左边表示必填的星号
required: {
type: Boolean,
default: false
},
// 标题的宽度，单位rpx
titleWidth: {
type: [Number, String],
default: ''
},
// 右侧箭头方向，可选值：right|up|down，默认为right
arrowDirection: {
type: String,
default: 'right'
},
// 控制标题的样式
titleStyle: {
type: Object,
default() {
return {};
}
},
// 右侧显示内容的样式
valueStyle: {
type: Object,
default() {
return {};
}
},
// 描述信息的样式
labelStyle: {
type: Object,
default() {
return {};
}
},
// 背景颜色
bgColor: {
type: String,
default: 'transparent'
},
// 用于识别被点击的是第几个cell
index: {
type: [String, Number],
default: ''
},
// 是否使用lable插槽
useLabelSlot: {
type: Boolean,
default: false
},
// 左边图标的大小，单位rpx，只对传入icon字段时有效
iconSize: {
type: [Number, String],
default: 34
}
},
inject: ['uCellGroup'],
data() {
return {
itemIndex: 0
};
},
created() {
this.itemIndex = this.uCellGroup.index++;
},
computed: {
arrowStyle() {
let style = {};
if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
else style.transform = 'rotate(0deg)';
return style;
}
},
methods: {
click() {
this.$emit('click', this.index);
}
}
};
</script>
<style lang="scss" scoped>
.u-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: 20rpx 32rpx;
font-size: 28rpx;
line-height: 48rpx;
color: $u-content-color;
background-color: #fff;
text-align: left;
}
.u-cell_title {
font-size: 28rpx;
}
.u-cell__left-icon-wrap {
margin-right: 10rpx;
font-size: 32rpx;
}
.u-cell__right-icon-wrap {
margin-left: 10rpx;
color: #969799;
font-size: 28rpx;
}
.u-cell__left-icon-wrap,
.u-cell__right-icon-wrap {
display: flex;
align-items: center;
height: 48rpx;
}
.u-cell-border:after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
left: 0;
top: 0;
border-bottom: 1px solid $u-border-color;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.u-cell-border {
position: relative;
}
.u-border-gap:after {
left: 32rpx !important;
}
.u-cell__label {
margin-top: 6rpx;
font-size: 26rpx;
line-height: 36rpx;
color: $u-tips-color;
}
.u-cell__value {
overflow: hidden;
text-align: right;
vertical-align: middle;
color: $u-tips-color;
font-size: 26rpx;
}
.u-cell__title,
.u-cell__value {
flex: 1;
}
.u-cell--required {
overflow: visible;
display: flex;
align-items: center;
}
.u-cell--required:before {
position: absolute;
content: '*';
left: 8px;
margin-top: 4rpx;
font-size: 14px;
color: $u-type-error;
}
</style>
node_modules/uview-ui/components/u-checkbox-group/u-checkbox-group.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-checkbox-group">
<slot></slot>
</view>
</template>
<script>
/**
* checkboxGroup 开关选择器父组件Group
* @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
* @tutorial https://www.uviewui.com/components/checkbox.html
* @property {String Number} max 最多能选中多少个checkbox（默认999）
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
* @property {Boolean} disabled 是否禁用所有checkbox（默认false）
* @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
* @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
* @example <u-checkbox-group></u-checkbox-group>
*/
export default {
name: 'u-checkbox-group',
props: {
// 最多能选中多少个checkbox
max: {
type: [Number, String],
default: 999
},
// 所有选中项的 name
// value: {
// default: Array,
// default() {
// return []
// }
// },
// 是否禁用所有复选框
disabled: {
type: Boolean,
default: false
},
// 在表单内提交时的标识符
name: {
type: [Boolean, String],
default: ''
},
// 选中状态下的颜色
activeColor: {
type: String,
default: '#2979ff'
},
// 组件的整体大小
size: {
type: [String, Number],
default: 40
}
},
provide() {
return {
checkboxGroup: this
}
},
data() {
return {
// 所有子组件
// children: []
}
},
created() {
this.children = [];
},
methods: {
emitEvent() {
let values = [];
this.children.map(val => {
if(val.value) values.push(val.name);
})
this.$emit('change', values);
}
}
}
</script>
<style lang="scss" scoped>
.u-checkbox-group {
display: inline-flex;
flex-wrap: wrap;
}
</style>
node_modules/uview-ui/components/u-checkbox/u-checkbox.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-checkbox">
<view class="u-checkbox__icon-wrap" @tap="toggle">
<u-icon :class="iconClass" name="success" :size="iconSize" :color="iconColor" class="u-checkbox__icon" :style="[iconStyle]" />
</view>
<view class="u-label-class u-checkbox__label" @tap="onClickLabel" :style="{
fontSize: labelSize + 'rpx'
}">
<slot />
</view>
</view>
</template>
<script>
/**
* checkbox 复选框
* @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
* @tutorial https://www.uviewui.com/components/checkbox.html
* @property {String Number} icon-size 图标大小，单位rpx（默认24）
* @property {String Number} label-size label字体大小，单位rpx（默认28）
* @property {String Number} name checkbox组件的标示符
* @property {String} shape 形状，见官网说明（默认circle）
* @property {Boolean} disabled 是否禁用（默认false）
* @property {Boolean} label-disabled 点击文本是否可以操作checkbox（默认true）
* @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效
* @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象
* @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
*/
export default {
name: "u-checkbox",
props: {
// checkbox的名称
name: {
type: [String, Number],
default: ''
},
// 形状，square为方形，circle为原型
shape: {
type: String,
default: 'square'
},
// 是否为选中状态
value: {
type: Boolean,
default: false
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 是否禁止点击提示语选中复选框
labelDisabled: {
type: Boolean,
default: false
},
// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
activeColor: {
type: String,
default: ''
},
// 图标的大小，单位rpx
iconSize: {
type: [String, Number],
default: 24
},
// label的字体大小，rpx单位
labelSize: {
type: [String, Number],
default: 28
},
},
inject: ['checkboxGroup'],
data() {
return {
parentDisabled: false,
};
},
created() {
this.parentDisabled = this.checkboxGroup.disabled;
this.checkboxGroup.children.push(this);
},
computed: {
iconStyle() {
let style = {};
if (this.checkboxActiveColor && this.value && !this.disabled && !this.parentDisabled) {
style.borderColor = this.checkboxActiveColor;
style.backgroundColor = this.checkboxActiveColor;
}
style.width = this.checkboxGroup.size + 'rpx';
style.height = this.checkboxGroup.size + 'rpx';
return style;
},
iconColor() {
return this.value ? '#ffffff' : 'transparent';
},
iconClass() {
let classs = [];
classs.push('u-checkbox__icon--' + this.shape);
if (this.value == true) classs.push('u-checkbox__icon--checked');
if (this.disabled || this.parentDisabled) classs.push('u-checkbox__icon--disabled');
if (this.value && (this.disabled || this.parentDisabled)) classs.push('u-checkbox__icon--disabled--checked');
return classs;
},
// 激活的颜色，可能受checkboxGroup和本组件的activeColor影响
// 本组件的activeColor值优先
checkboxActiveColor() {
return this.activeColor ? this.activeColor : this.checkboxGroup.activeColor;
}
},
methods: {
onClickLabel() {
if (!this.disabled && !this.labelDisabled && !this.parentDisabled) {
this.setValue();
}
},
toggle() {
if (!this.disabled && !this.parentDisabled) {
this.setValue();
}
},
emitEvent() {
this.$emit('change', {
value: this.value,
name: this.name
})
this.checkboxGroup.emitEvent();
},
// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
setValue() {
// 判断是否超过了可选的最大数量
let checkedNum = 0;
this.checkboxGroup.children.map(val => {
if (val.value) checkedNum++;
})
// 如果原来为选中状态，那么可以取消
if (this.value == true) {
this.$emit('input', !this.value);
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
this.$nextTick(function() {
this.emitEvent();
})
} else if (checkedNum < this.checkboxGroup.max && this.value == false) {
// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
this.$emit('input', !this.value);
// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
this.$nextTick(function() {
this.emitEvent();
})
}
}
}
};
</script>
<style lang="scss" scoped>
.u-checkbox {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
}
.u-checkbox__icon-wrap,
.u-checkbox__label {
color: $u-content-color;
}
.u-checkbox__icon-wrap {
-webkit-flex: none;
flex: none;
}
.u-checkbox__icon {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
width: 42rpx;
height: 42rpx;
color: transparent;
text-align: center;
transition-property: color, border-color, background-color;
font-size: 20px;
border: 1px solid #c8c9cc;
transition-duration: 0.2s;
}
.u-checkbox__icon--circle {
border-radius: 100%;
}
.u-checkbox__icon--square {
border-radius: 3px;
}
.u-checkbox__icon--checked {
color: #fff;
background-color: #2979ff;
border-color: #2979ff;
}
.u-checkbox__icon--disabled {
background-color: #ebedf0;
border-color: #c8c9cc;
}
.u-checkbox__icon--disabled--checked {
color: #c8c9cc !important;
}
.u-checkbox__label {
word-wrap: break-word;
margin-left: 10rpx;
margin-right: 18rpx;
color: $u-content-color;
font-size: 30rpx;
}
.u-checkbox__label--disabled {
color: #c8c9cc;
}
.u-checkbox__label:empty {
margin: 0;
}
</style>
node_modules/uview-ui/components/u-circle-progress/u-circle-progress.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-circle-progress" :style="{
width: widthPx + 'px',
height: widthPx + 'px',
backgroundColor: bgColor
}">
<canvas class="u-canvas-bg" :canvas-id="elBgId" :style="{
width: widthPx + 'px',
height: widthPx + 'px'
}"></canvas>
<canvas class="u-canvas" :canvas-id="elId" :style="{
width: widthPx + 'px',
height: widthPx + 'px'
}"></canvas>
<slot></slot>
</view>
</template>
<script>
/**
* circleProgress 环形进度条
* @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
* @tutorial https://www.uviewui.com/components/circleProgress.html
* @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
* @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
* @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
* @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200）
* @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14）
* @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
* @property {String} type 如设置，active-color值将会失效
* @property {String} bg-color 整个组件背景颜色，默认为白色
* @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
*/
export default {
name: "u-circle-progress",
props: {
// 圆环进度百分比值
percent: {
type: Number,
default: 0,
// 限制值在0到100之间
validator: val => {
return val >= 0 && val <= 100;
}
},
// 底部圆环的颜色（灰色的圆环）
inactiveColor: {
type: String,
default: "#ececec"
},
// 圆环激活部分的颜色
activeColor: {
type: String,
default: '#19be6b'
},
// 圆环线条的宽度，单位rpx
borderWidth: {
type: [Number, String],
default: 14
},
// 整个圆形的宽度，单位rpx
width: {
type: [Number, String],
default: 200
},
// 整个圆环执行一圈的时间，单位ms
duration: {
type: [Number, String],
default: 1500
},
// 主题类型
type: {
type: String,
default: ''
},
// 整个圆环进度区域的背景色
bgColor: {
type: String,
default: "#ffffff"
}
},
data() {
return {
elBgId: this.$u.guid(),
elId: this.$u.guid(),
ctxBg: '', // 背景canvas实例
ctx: '', // 前景(激活时候)canvas的实例
count: 0, // 计数器
timer: null, // 定时器
times: 0, // 总共要执行的动画次数，setInterval的次数
time: 0, // 执行整个动画的时间
widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
mode: 'more', // more-percent增加，less-percent减少
}
},
watch: {
percent: {
immediate: true,
handler(nVal, oVal = 0) {
this.mode = nVal > oVal ? 'more' : 'less';
this.times = Math.ceil(nVal * 3.6);
this.time = Math.ceil(this.duration / 360 * this.times);
setTimeout(() => {
this.countInterval();
}, 50)
}
}
},
computed: {
// 有type主题时，优先起作用
circleColor() {
if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
else return this.activeColor;
}
},
mounted() {
this.ctxBg = uni.createCanvasContext(this.elBgId, this);
this.ctx = uni.createCanvasContext(this.elId, this);
// 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7)
setTimeout(() => {
this.drawProgressBg();
}, 50)
},
methods: {
drawProgressBg() {
this.ctxBg.setLineWidth(this.borderWidthPx); // 设置圆环宽度
this.ctxBg.setStrokeStyle(this.inactiveColor); // 线条颜色
this.ctxBg.setLineCap('round'); // 圆环端点的形状为圆形
this.ctxBg.beginPath(); // 开始描绘路径
// 设置一个原点(110,110)，半径为100的圆的路径到当前路径
this.ctxBg.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, 0, 2 * Math.PI,
false);
this.ctxBg.stroke(); // 对路径进行描绘
this.ctxBg.draw();
},
drawCircle(step) {
this.ctx.setLineWidth(this.borderWidthPx);
this.ctx.setStrokeStyle(this.circleColor);
this.ctx.setLineCap('round');
this.ctx.beginPath();
// 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
if (this.mode == 'more') {
this.ctx.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, -Math.PI / 2, step *
Math.PI - Math.PI / 2, false);
} else {
this.ctx.arc(this.widthPx / 2, this.widthPx / 2, this.widthPx / 2 - this.borderWidthPx / 2 - 1, -Math.PI / 2, Math
.PI / 2 - step *
Math.PI, false);
}
this.ctx.stroke();
this.ctx.draw()
},
countInterval() {
this.countTimer = setInterval(() => {
if (this.count <= this.times) {
// 全一个圆时候，值为2，这里求出每一份的值为2/360
this.drawCircle(this.count * 2 / 360);
this.count++;
} else {
clearInterval(this.countTimer);
}
}, Math.ceil(this.duration / 360)); // 总过渡时间分为360份，这里为每一份的时间
},
}
}
</script>
<style lang="scss" scoped>
.u-circle-progress {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.u-canvas-bg {
position: absolute;
}
.u-canvas {
position: absolute;
}
</style>
node_modules/uview-ui/components/u-col/u-col.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-col" :class="[
'u-col-' + span
]" :style="{
padding: `0 ${Number(gutter)/2 + 'rpx'}`,
marginLeft: 100 / 12 * offset + '%',
flex: `0 0 ${100 / 12 * span}%`
}">
<slot></slot>
</view>
</template>
<script>
/**
* col 布局单元格
* @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
* @tutorial https://www.uviewui.com/components/layout.html
* @property {String Number} span 栅格占据的列数，总12等分（默认0）
* @property {String Number} offset 分栏左边偏移，计算方式与span相同（默认0）
* @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
*/
export default {
name: "u-col",
props: {
// 占父容器宽度的多少等分，总分为12份
span: {
type: [Number, String],
default: 12
},
// 指定栅格左侧的间隔数(总12栏)
offset: {
type: [Number, String],
default: 0
},
},
inject: ['gutter'],
}
</script>
<style lang="scss">
.u-col {
/* #ifdef MP-WEIXIN */
float: left;
/* #endif */
}
.u-col-0 {
width: 0;
}
.u-col-1 {
width: calc(100%/12);
}
.u-col-2 {
width: calc(100%/12 * 2);
}
.u-col-3 {
width: calc(100%/12 * 3);
}
.u-col-4 {
width: calc(100%/12 * 4);
}
.u-col-5 {
width: calc(100%/12 * 5);
}
.u-col-6 {
width: calc(100%/12 * 6);
}
.u-col-7 {
width: calc(100%/12 * 7);
}
.u-col-8 {
width: calc(100%/12 * 8);
}
.u-col-9 {
width: calc(100%/12 * 9);
}
.u-col-10 {
width: calc(100%/12 * 10);
}
.u-col-11 {
width: calc(100%/12 * 11);
}
.u-col-12 {
width: calc(100%/12 * 12);
}
</style>
node_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-collapse-item">
<view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
<view class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
isShow && activeStyle && !arrow ? activeStyle : '']">
{{ title }}
</view>
<view class="u-icon-wrap">
<u-icon v-if="arrow" :color="arrowColor ? arrowColor : $u.color.tipsColor" :class="{ 'u-arrow-down-icon-active': isShow }"
class="u-arrow-down-icon" name="arrow-down"></u-icon>
</view>
</view>
<view class="u-collapse-body" :style="[{
height: isShow ? height + 'px' : '0'
}, bodyStyle]">
<view class="u-collapse-content" :id="elId">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
/**
* collapseItem 手风琴Item
* @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
* @tutorial https://www.uviewui.com/components/collapse.html
* @property {String} title 面板标题
* @property {String Number} index 主要用于事件的回调，标识那个Item被点击
* @property {Boolean} disabled 面板是否可以打开或收起（默认false）
* @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
* @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
* @property {String} align 标题的对齐方式（默认left）
* @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
* @event {Function} change 某个item被打开或者收起时触发
* @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
*/
export default {
name: "u-collapse-item",
props: {
// 标题
title: {
type: String,
default: ''
},
// 标题的对齐方式
align: {
type: String,
default: 'left'
},
// 是否可以点击收起
disabled: {
type: Boolean,
default: false
},
// collapse显示与否
open: {
type: Boolean,
default: false
},
// 唯一标识符
name: {
type: [Number, String],
default: ''
},
//活动样式
activeStyle: {
type: Object,
default () {
return {}
}
},
// 标识当前为第几个
index: {
type: [String, Number],
default: ''
}
},
inject: ['uCollapse'],
data() {
return {
isShow: false,
elId: this.$u.guid(),
height: 0, // body内容的高度
headStyle: {}, // 头部样式，对象形式
bodyStyle: {}, // 主体部分样式
arrowColor: '',
hoverClass: '', // 头部按下时的效果样式类
};
},
mounted() {
this.$nextTick(() => {
this.queryRect();
});
},
watch: {
open(val) {
this.isShow = val;
}
},
computed: {
arrow() {
return this.uCollapse.arrow;
},
},
created() {
this.isShow = this.open;
this.nameSync = this.name ? this.name : this.uCollapse.childrens.length;
this.uCollapse.childrens.push(this);
this.headStyle = this.uCollapse.headStyle;
this.bodyStyle = this.uCollapse.bodyStyle;
this.arrowColor = this.uCollapse.arrowColor;
this.hoverClass = this.uCollapse.hoverClass;
},
methods: {
// 点击collapsehead头部
headClick() {
if (this.disabled) return;
if (this.uCollapse.accordion == true) {
this.uCollapse.childrens.map(val => {
// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了
if (this != val) {
val.isShow = false;
}
});
}
this.isShow = !this.isShow;
// 触发本组件的事件
this.$emit('change', {
index: this.index,
show: this.isShow
})
// 只有在打开时才发出事件
if (this.isShow) this.uCollapse.onChange();
this.$forceUpdate();
},
// 查询内容高度
queryRect() {
const query = uni.createSelectorQuery().in(this);
query
.select('#' + this.elId)
.boundingClientRect(data => {
if (!data.height) {
setTimeout(() => {
this.queryRect();
}, 10);
return;
}
this.height = data.height;
})
.exec();
}
}
};
</script>
<style lang="scss" scoped>
.u-collapse-head {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
color: $u-main-color;
}
.u-collapse-title {
flex: 1;
overflow: hidden;
margin-right: 14rpx;
font-size: 30rpx;
color: $u-main-color;
line-height: 1;
padding: 24rpx 0;
text-align: left;
}
.u-arrow-down-icon {
transition: all 0.3s;
margin-right: 24rpx;
}
.u-arrow-down-icon-active {
transform: rotate(180deg);
transform-origin: center center;
}
.u-collapse-body {
overflow: hidden;
transition: all 0.3s;
}
.u-collapse-content {
overflow: hidden;
font-size: 28rpx;
color: $u-tips-color;
text-align: left;
}
</style>
node_modules/uview-ui/components/u-collapse/u-collapse.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-collapse">
<slot />
</view>
</template>
<script>
/**
* collapse 手风琴
* @description 通过折叠面板收纳内容区域
* @tutorial https://www.uviewui.com/components/collapse.html
* @property {Boolean} accordion 是否手风琴模式（默认true）
* @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
* @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
* @property {String} head-bg-color 标题的背景颜色（默认#ffffff）
* @property {String} body-bg-color 主体内容的背景颜色（默认#ffffff）
* @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
* @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
* @example <u-collapse></u-collapse>
*/
export default {
name:"u-collapse",
props: {
// 是否手风琴模式
accordion: {
type: Boolean,
default: true
},
// 头部的样式
headStyle: {
type: Object,
default () {
return {}
}
},
// 主体的样式
bodyStyle: {
type: Object,
default () {
return {}
}
},
// 是否显示右侧的箭头
arrow: {
type: Boolean,
default: true
},
// 箭头的颜色
arrowColor: {
type: String,
default: ''
},
// 标题部分按压时的样式类，"none"为无效果
hoverClass: {
type: String,
default: 'u-hover-class'
}
},
provide() {
return {
uCollapse: this
}
},
created() {
this.childrens = []
},
data() {
return {
}
},
methods: {
// collapse item被点击，由collapse item调用父组件方法
onChange() {
let activeItem = [];
this.childrens.forEach((vm, index) => {
if (vm.isShow) {
activeItem.push(vm.nameSync);
}
})
// 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串
if (this.accordion) activeItem = activeItem.join('');
this.$emit('change', activeItem);
}
}
}
</script>
<style lang="scss" scoped>
</style>
node_modules/uview-ui/components/u-count-down/u-count-down.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-count-to/u-count-to.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-divider/u-divider.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-divider" :style="{
height: height == 'auto' ? 'auto' : height + 'rpx',
backgroundColor: bgColor,
marginBottom: marginBottom + 'rpx',
marginTop: marginTop + 'rpx'
}" @tap="click">
<view class="u-divider-line" :style="[lineStyle]"></view>
<view v-if="useSlot" class="u-divider-text" :style="{
color: color,
fontSize: fontSize + 'rpx'
}"><slot /></view>
<view class="u-divider-line" :style="[lineStyle]"></view>
</view>
</template>
<script>
/**
* divider 分割线
* @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
* @tutorial https://www.uviewui.com/components/divider.html
* @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
* @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
* @property {String} color 文字颜色（默认#909399）
* @property {String Number} fontSize 字体大小，单位rpx（默认26）
* @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
* @property {String Number} height 整个divider的高度，单位rpx（默认40）
* @property {String} type 将线条设置主题色（默认primary）
* @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
* @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
* @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
* @event {Function} click divider组件被点击时触发
* @example <u-divider color="#fa3534">长河落日圆</u-divider>
*/
export default {
name: 'u-divider',
props: {
// 单一边divider横线的宽度(数值)，单位rpx。或者百分比
halfWidth: {
type: [Number, String],
default: 150
},
// divider横线的颜色，如设置，
borderColor: {
type: String,
default: '#dcdfe6'
},
// 主题色，可以是primary|info|success|warning|error之一值
type: {
type: String,
default: 'primary'
},
// 文字颜色
color: {
type: String,
default: '#909399'
},
// 文字大小，单位rpx
fontSize: {
type: [Number, String],
default: 26
},
// 整个divider的背景颜色
bgColor: {
type: String,
default: '#ffffff'
},
// 整个divider的高度单位rpx
height: {
type: [Number, String],
default: 'auto'
},
// 上边距
marginTop: {
type: [String, Number],
default: 0
},
// 下边距
marginBottom: {
type: [String, Number],
default: 0
},
// 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙
useSlot: {
type: Boolean,
default: true
}
},
computed: {
lineStyle() {
let style = {};
if(String(this.halfWidth).indexOf('%') != -1) style.width = this.halfWidth;
else style.width = this.halfWidth + 'rpx';
// borderColor优先级高于type值
if(this.borderColor) style.borderColor = this.borderColor;
else style.borderColor = this.$u.color[this.type];
return style;
}
},
methods: {
click() {
this.$emit('click');
}
}
};
</script>
<style lang="scss" scoped>
.u-divider {
width: 100%;
position: relative;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
flex-direction: row;
}
.u-divider-line {
border-bottom: 1px solid $u-border-color;
transform: scale(1, 0.5);
transform-origin: center;
}
.u-divider-text {
white-space: nowrap;
padding: 0 16rpx;
display: inline-flex;
}
</style>
node_modules/uview-ui/components/u-dropdown/u-dropdown.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-empty/icon.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-empty/u-empty.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-field/u-field.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-form-item/u-form-item.vue 0 → 100644
View file @ b00a64d7
<template>
<view class="u-form-item">
<slot />
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
node_modules/uview-ui/components/u-form/u-form.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-gap/u-gap.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-grid-item/u-grid-item.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-grid/u-grid.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-icon/u-icon.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-index-list/u-index-list.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-keyboard/u-keyboard.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-lazy-load/u-lazy-load.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-link/u-link.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-loading/u-loading.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-loadmore/u-loadmore.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-mask/u-mask.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-modal/u-modal.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-navbar/u-navbar.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-no-network/u-no-network.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-number-box/u-number-box.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-picker/u-picker.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-popup/u-popup.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-radio/u-radio.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-rate/u-rate.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-read-more/u-read-more.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-row-notice/u-row-notice.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-row/u-row.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-search/u-search.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-section/u-section.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-skeleton/u-skeleton.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-slider/u-slider.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-steps/u-steps.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-sticky/u-sticky.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-subsection/u-subsection.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-swiper/u-swiper.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-switch/u-switch.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-table/u-table.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-tabs/u-tabs.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-tag/u-tag.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-td/u-td.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-th/u-th.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-time-line/u-time-line.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-toast/u-toast.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-top-tips/u-top-tips.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-tr/u-tr.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-upload/u-upload.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/components/u-waterfall/u-waterfall.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/iconfont.css 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/index.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/index.scss 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/config/config.js 0 → 100644
View file @ b00a64d7
// 此版本发布于2020-05-08
let version = '1.2.3';
export default {
v: version,
version: version
}
\ No newline at end of file
node_modules/uview-ui/libs/config/zIndex.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/css/color.scss 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/css/common.scss 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/$parent.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/addUnit.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/color.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/colorGradient.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/getParent.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/guid.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/md5.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/queryParams.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/random.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/randomArray.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/route.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/sys.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/test.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/timeFormat.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/timeFrom.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/toast.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/trim.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/function/type2icon.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/mixin/mixin.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/mixin/mpShare.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/request/index.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/store/index.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/util/area.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/util/city.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/util/province.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/libs/validation/validation.js 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/package.json 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/theme.scss 0 → 100644
View file @ b00a64d7
This diff is collapsed.
node_modules/uview-ui/vantfont.css 0 → 100644
View file @ b00a64d7
This diff is collapsed.
pages.json
View file @ b00a64d7
This diff is collapsed.
pages/hotel/list.vue 0 → 100644
View file @ b00a64d7
This diff is collapsed.
pages/index/index.vue
View file @ b00a64d7
This diff is collapsed.
plugin/api.js
View file @ b00a64d7
This diff is collapsed.
plugin/uiconfig.js
View file @ b00a64d7
This diff is collapsed.
yarn.lock 0 → 100644
View file @ b00a64d7
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment