Commit eb8ef934 authored by 潘永坪's avatar 潘永坪

分支合并

parent 2bc226eb
<template> <template>
<!-- 详情 --> <!-- 详情 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="75%"> <u-popup :show="showPop" :round="20" @close="showPop = false">
<view class="son-wrap"> <view class="son-wrap">
<view class="title"> <view class="title">
明细 <view style="flex: 1; text-align: center">
明细
</view>
<u-icon name="close" @click="showPop = false"></u-icon>
</view> </view>
<view style="flex: 1;overflow-y: scroll;">
<view class="middle"> <view class="middle">
<view class="merchantlist" v-for="(item,index) in merchantList" :key="index"> <view class="merchantlist" v-for="(item,index) in merchantList" :key="index">
<view class="merchant-title"> <view class="merchant-title">
{{item.merchantName}} {{item.merchantName}}
</view>
<view class="productlist" v-for="(items,a) in item.productlist" :key='a'>
<text>
{{items.name}}
</text>
<text style="font-weight: bold;">
¥{{items.sellingPrice}}
</text>
</view>
</view> </view>
<view class="productlist" v-for="(items,a) in item.productlist" :key='a'> </view>
<text>
{{items.name}} <view class="bottom">
</text> <view class="bottom-left">
<text style="font-weight: bold;"> 合计:¥
¥{{items.sellingPrice}} <text style="font-weight: bold;font-size: 40rpx;">{{priceTotal}}</text>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">
去预订
</text> </text>
</view> </view>
</view> </view>
</view> </view>
<view class="bottom">
<view class="bottom-left">
合计:¥
<text style="font-weight: bold;font-size: 40rpx;">{{priceTotal}}</text>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">
去预订
</text>
</view>
</view>
</view> </view>
</u-popup> </u-popup>
</template> </template>
...@@ -91,21 +96,20 @@ export default { ...@@ -91,21 +96,20 @@ export default {
<style scoped="scoped" lang="scss"> <style scoped="scoped" lang="scss">
.son-wrap{ .son-wrap{
position: relative; position: relative;
} height:80vh;
display: flex;
flex-direction:column;
}
.title{ .title{
text-align: center; display: flex;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
text-align: center; padding: 30rpx;
padding: 30rpx 0;
position:fixed;
top: 0;
width: 100%;
background: #fff; background: #fff;
z-index: 1; border-radius: 20rpx 20rpx 0 0;
} }
.middle { .middle {
padding: 100rpx 24rpx; padding:0 24rpx 100rpx 24rpx;
} }
.merchantlist{ .merchantlist{
border-bottom:2rpx solid #ececec; border-bottom:2rpx solid #ececec;
......
MIT License MIT License
Copyright (c) 2020 www.uviewui.com Copyright (c) 2023 www.uviewui.com
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal
...@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE ...@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 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 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
\ No newline at end of file
<p align="center"> <p align="center">
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;"> <img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
</p> </p>
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3> <h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView 2.0</h3>
<h3 align="center">多平台快速开发的UI框架</h3> <h3 align="center">多平台快速开发的UI框架</h3>
[![stars](https://img.shields.io/github/stars/umicro/uView2.0?style=flat-square&logo=GitHub)](https://github.com/umicro/uView2.0)
[![forks](https://img.shields.io/github/forks/umicro/uView2.0?style=flat-square&logo=GitHub)](https://github.com/umicro/uView2.0)
[![issues](https://img.shields.io/github/issues/umicro/uView2.0?style=flat-square&logo=GitHub)](https://github.com/umicro/uView2.0/issues)
[![Website](https://img.shields.io/badge/uView-up-blue?style=flat-square)](https://uviewui.com)
[![release](https://img.shields.io/github/v/release/umicro/uView2.0?style=flat-square)](https://gitee.com/umicro/uView2.0/releases)
[![license](https://img.shields.io/github/license/umicro/uView2.0?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
## 说明 ## 说明
uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水 uView UI,是[uni-app](https://uniapp.dcloud.io/)全面兼容nvue的uni-app生态框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水
## 特性 ## [官方文档:https://uviewui.com](https://uviewui.com)
- 兼容安卓,iOS,微信小程序,H5,QQ小程序,百度小程序,支付宝小程序,头条小程序
- 60+精选组件,功能丰富,多端兼容,让您快速集成,开箱即用
- 众多贴心的JS利器,让您飞镖在手,召之即来,百步穿杨
- 众多的常用页面和布局,让您专注逻辑,事半功倍
- 详尽的文档支持,现代化的演示效果
- 按需引入,精简打包体积
## 预览
## 安装 您可以通过**微信**扫码,查看最佳的演示效果。
<br>
<br>
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
```bash
# npm方式安装
npm i uview-ui
```
## 快速上手 ## 链接
1. `main.js`引入uView库 - [官方文档](https://www.uviewui.com/)
```js - [更新日志](https://www.uviewui.com/components/changelog.html)
// main.js - [升级指南](https://www.uviewui.com/components/changeGuide.html)
import uView from 'uview-ui'; - [关于我们](https://www.uviewui.com/cooperation/about.html)
Vue.use(uView);
```
2. `App.vue`引入基础样式(注意style标签需声明scss属性支持) ## 交流反馈
```css
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
```
3. `uni.scss`引入全局scss变量文件 欢迎加入我们的QQ群交流反馈:[点此跳转](https://www.uviewui.com/components/addQQGroup.html)
```css
/* uni.scss */
@import "uview-ui/theme.scss";
```
4. `pages.json`配置easycom规则(按需引入) ## 关于PR
```js > 我们非常乐意接受各位的优质PR,但在此之前我希望您了解uView2.0是一个需要兼容多个平台的(小程序、h5、ios app、android app)包括nvue页面、vue页面。
// pages.json > 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢!
{
"easycom": { ## 安装
// npm安装的方式不需要前面的"@/",下载安装的方式需要"@/"
// npm安装方式 #### **uni-app插件市场链接** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
// 下载安装方式
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
```
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 请通过[官网安装文档](https://www.uviewui.com/components/install.html)了解更详细的内容
## 快速上手
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
## 使用方法 ## 使用方法
配置easycom规则后,自动按需引入,无需`import`组件,直接引用即可。 配置easycom规则后,自动按需引入,无需`import`组件,直接引用即可。
```html ```html
<template> <template>
<u-button>按钮</u-button> <u-button text="按钮"></u-button>
</template> </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应用到您的产品中。 uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议,意味着您无需支付任何费用,也无需授权,即可将uView应用到您的产品中。
<template>
<view class="u-alert-tips" v-if="show" :class="[
!show ? 'u-close-alert-tips': '',
type ? 'u-alert-tips--bg--' + type + '-light' : '',
type ? 'u-alert-tips--border--' + type + '-disabled' : '',
]" :style="{
backgroundColor: bgColor,
borderColor: borderColor
}">
<view class="u-icon-wrap">
<u-icon v-if="showIcon" :name="uIcon" :size="description ? 40 : 32" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
</view>
<view class="u-alert-content" @tap.stop="click">
<view class="u-alert-title" :style="[uTitleStyle]">
{{title}}
</view>
<view v-if="description" class="u-alert-desc" :style="[descStyle]">
{{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 显示的标题文字
* @property {String} description 辅助性文字,颜色比title浅一点,字号也小一点,可选
* @property {String} type 关闭按钮(默认为叉号icon图标)
* @property {String} icon 图标名称
* @property {Object} icon-style 图标的样式,对象形式
* @property {Object} title-style 标题的样式,对象形式
* @property {Object} desc-style 描述的样式,对象形式
* @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
},
// 左边显示的icon
icon: {
type: String,
default: ''
},
// icon的样式
iconStyle: {
type: Object,
default() {
return {}
}
},
// 标题的样式
titleStyle: {
type: Object,
default() {
return {}
}
},
// 描述文字的样式
descStyle: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
}
},
computed: {
uTitleStyle() {
let style = {};
// 如果有描述文字的话,标题进行加粗
style.fontWeight = this.description ? 500 : 'normal';
// 将用户传入样式对象和style合并,传入的优先级比style高,同属性会被覆盖
return this.$u.deepMerge(style, this.titleStyle);
},
uIcon() {
// 如果有设置icon名称就使用,否则根据type主题,推定一个默认的图标
return this.icon ? this.icon : this.$u.type2icon(this.type);
},
uIconType() {
// 如果有设置图标的样式,优先使用,没有的话,则用type的样式
return Object.keys(this.iconStyle).length ? '' : this.type;
}
},
methods: {
// 点击内容
click() {
this.$emit('click');
},
// 点击关闭按钮
close() {
this.$emit('close');
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-alert-tips {
@include vue-flex;
align-items: center;
padding: 16rpx 30rpx;
border-radius: 8rpx;
position: relative;
transition: all 0.3s linear;
border: 1px solid #fff;
&--bg--primary-light {
background-color: $u-type-primary-light;
}
&--bg--info-light {
background-color: $u-type-info-light;
}
&--bg--success-light {
background-color: $u-type-success-light;
}
&--bg--warning-light {
background-color: $u-type-warning-light;
}
&--bg--error-light {
background-color: $u-type-error-light;
}
&--border--primary-disabled {
border-color: $u-type-primary-disabled;
}
&--border--success-disabled {
border-color: $u-type-success-disabled;
}
&--border--error-disabled {
border-color: $u-type-error-disabled;
}
&--border--warning-disabled {
border-color: $u-type-warning-disabled;
}
&--border--info-disabled {
border-color: $u-type-info-disabled;
}
}
.u-close-alert-tips {
opacity: 0;
visibility: hidden;
}
.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>
<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"
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"
id="targetId"
></canvas>
</view>
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
<!-- #ifdef H5 -->
<view class="upload" @tap="uploadTap">选择图片</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="upload" @tap="uploadTap">重新选择</view>
<!-- #endif -->
<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',
src: '', // 选择的图片路径,用于在点击确定时,判断是否选择了图片
};
},
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 => {
// wecropper is ready for work!
})
.on('beforeImageLoad', ctx => {
// before picture loaded, i can do something
})
.on('imageLoad', ctx => {
// picture loaded
})
.on('beforeDraw', (ctx, instance) => {
// 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 => {
this.src = res.tempFilePaths[0];
// 获取裁剪图片资源后,给data添加src属性及其值
this.cropper.pushOrign(this.src);
}
});
},
methods: {
touchStart(e) {
this.cropper.touchStart(e);
},
touchMove(e) {
this.cropper.touchMove(e);
},
touchEnd(e) {
this.cropper.touchEnd(e);
},
getCropperImage(isPre = false) {
if(!this.src) return this.$u.toast('请先选择图片再裁剪');
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) => {
self.src = res.tempFilePaths[0];
// 获取裁剪图片资源后,给data添加src属性及其值
self.cropper.pushOrign(this.src);
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../libs/css/style.components.scss';
.content {
background: rgba(255, 255, 255, 1);
}
.cropper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 11;
}
.cropper-buttons {
background-color: #000000;
color: #eee;
}
.cropper-wrapper {
position: relative;
@include vue-flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #000;
}
.cropper-buttons {
width: 100vw;
@include vue-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>
This diff is collapsed.
This diff is collapsed.
<template> <template>
<view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{ <u-transition
bottom: bottom + 'rpx', mode="fade"
right: right + 'rpx', :customStyle="backTopStyle"
borderRadius: mode == 'circle' ? '10000rpx' : '8rpx', :show="show"
zIndex: uZIndex, >
opacity: opacity <view
}, customStyle]"> class="u-back-top"
<view class="u-back-top__content" v-if="!$slots.default && !$slots.$default"> :style="[contentStyle]"
<u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon> v-if="!$slots.default && !$slots.$default"
<view class="u-back-top__content__tips"> @click="backToTop"
{{tips}} >
</view> <u-icon
:name="icon"
:custom-style="iconStyle"
></u-icon>
<text
v-if="text"
class="u-back-top__text"
>{{text}}</text>
</view> </view>
<slot v-else /> <slot v-else />
</view> </u-transition>
</template> </template>
<script> <script>
import props from './props.js';
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
/**
* backTop 返回顶部
* @description 本组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。
* @tutorial https://uviewui.com/components/backTop.html
*
* @property {String} mode 返回顶部的形状,circle-圆形,square-方形 (默认 'circle' )
* @property {String} icon 自定义图标 (默认 'arrow-upward' ) 见官方文档示例
* @property {String} text 提示文字
* @property {String | Number} duration 返回顶部滚动时间 (默认 100)
* @property {String | Number} scrollTop 滚动距离 (默认 0 )
* @property {String | Number} top 距离顶部多少距离显示,单位px (默认 400 )
* @property {String | Number} bottom 返回顶部按钮到底部的距离,单位px (默认 100 )
* @property {String | Number} right 返回顶部按钮到右边的距离,单位px (默认 20 )
* @property {String | Number} zIndex 层级 (默认 9 )
* @property {Object<Object>} iconStyle 图标的样式,对象形式 (默认 {color: '#909399',fontSize: '19px'})
* @property {Object} customStyle 定义需要用到的外部样式
*
* @example <u-back-top :scrollTop="scrollTop"></u-back-top>
*/
export default { export default {
name: 'u-back-top', name: 'u-back-top',
props: { mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
// 返回顶部的形状,circle-圆形,square-方形 computed: {
mode: { backTopStyle() {
type: String, // 动画组件样式
default: 'circle' const style = {
}, bottom: uni.$u.addUnit(this.bottom),
// 自定义图标 right: uni.$u.addUnit(this.right),
icon: { width: '40px',
type: String, height: '40px',
default: 'arrow-upward' position: 'fixed',
}, zIndex: 10,
// 提示文字
tips: {
type: String,
default: ''
},
// 返回顶部滚动时间
duration: {
type: [Number, String],
default: 100
},
// 滚动距离
scrollTop: {
type: [Number, String],
default: 0
},
// 距离顶部多少距离显示,单位rpx
top: {
type: [Number, String],
default: 400
},
// 返回顶部按钮到底部的距离,单位rpx
bottom: {
type: [Number, String],
default: 200
},
// 返回顶部按钮到右边的距离,单位rpx
right: {
type: [Number, String],
default: 40
},
// 层级
zIndex: {
type: [Number, String],
default: '9'
},
// 图标的样式,对象形式
iconStyle: {
type: Object,
default() {
return {
color: '#909399',
fontSize: '38rpx'
}
} }
return style
}, },
// 整个组件的样式 show() {
customStyle: { return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top)
type: Object, },
default() { contentStyle() {
return {} const style = {}
} let radius = 0
} // 是否圆形
}, if(this.mode === 'circle') {
watch: { radius = '100px'
showBackTop(nVal, oVal) {
// 当组件的显示与隐藏状态发生跳变时,修改组件的层级和不透明度
// 让组件有显示和消失的动画效果,如果用v-if控制组件状态,将无设置动画效果
if(nVal) {
this.uZIndex = this.zIndex;
this.opacity = 1;
} else { } else {
this.uZIndex = -1; radius = '4px'
this.opacity = 0;
} }
} // 为了兼容安卓nvue,只能这么分开写
}, style.borderTopLeftRadius = radius
computed: { style.borderTopRightRadius = radius
showBackTop() { style.borderBottomLeftRadius = radius
// 由于scrollTop为页面的滚动距离,默认为px单位,这里将用于传入的top(rpx)值 style.borderBottomRightRadius = radius
// 转为px用于比较,如果滚动条到顶的距离大于设定的距离,就显示返回顶部的按钮 return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
return this.scrollTop > uni.upx2px(this.top);
},
},
data() {
return {
// 不透明度,为了让组件有一个显示和隐藏的过渡动画
opacity: 0,
// 组件的z-index值,隐藏时设置为-1,就会看不到
uZIndex: -1
} }
}, },
methods: { methods: {
backToTop() { backToTop() {
// #ifdef APP-NVUE
if (!this.$parent.$refs['u-back-top']) {
uni.$u.error(`nvue页面需要给页面最外层元素设置"ref='u-back-top'`)
}
dom.scrollToElement(this.$parent.$refs['u-back-top'], {
offset: 0
})
// #endif
// #ifndef APP-NVUE
uni.pageScrollTo({ uni.pageScrollTo({
scrollTop: 0, scrollTop: 0,
duration: this.duration duration: this.duration
}); });
// #endif
this.$emit('click')
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import '../../libs/css/components.scss';
$u-back-top-flex:1 !default;
$u-back-top-height:100% !default;
$u-back-top-background-color:#E1E1E1 !default;
$u-back-top-tips-font-size:12px !default;
.u-back-top { .u-back-top {
width: 80rpx; @include flex;
height: 80rpx;
position: fixed;
z-index: 9;
@include vue-flex;
flex-direction: column; flex-direction: column;
justify-content: center;
background-color: #E1E1E1;
color: $u-content-color;
align-items: center; align-items: center;
transition: opacity 0.4s; flex:$u-back-top-flex;
height: $u-back-top-height;
&__content { justify-content: center;
@include vue-flex; background-color: $u-back-top-background-color;
flex-direction: column;
align-items: center; &__tips {
font-size:$u-back-top-tips-font-size;
&__tips { transform: scale(0.8);
font-size: 24rpx;
transform: scale(0.8);
line-height: 1;
}
} }
} }
</style> </style>
This diff is collapsed.
This diff is collapsed.
<template> <template>
<view class="u-keyboard" @touchmove.stop.prevent="() => {}"> <view
<view class="u-keyboard-grids"> class="u-keyboard"
<block> @touchmove.stop.prevent="noop"
<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" <view
v-for="(item, j) in group" :key="j"> v-for="(group, i) in abc ? engKeyBoardList : areaList"
{{ item }} :key="i"
</view> class="u-keyboard__button"
:index="i"
:class="[i + 1 === 4 && 'u-keyboard__button--center']"
>
<view
v-if="i === 3"
class="u-keyboard__button__inner-wrapper"
>
<view
class="u-keyboard__button__inner-wrapper__left"
hover-class="u-hover-class"
:hover-stay-time="200"
@tap="changeCarInputMode"
>
<text
class="u-keyboard__button__inner-wrapper__left__lang"
:class="[!abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
></text>
<text class="u-keyboard__button__inner-wrapper__left__line">/</text>
<text
class="u-keyboard__button__inner-wrapper__left__lang"
:class="[abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
></text>
</view> </view>
<view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back" </view>
hover-class="u-hover-class"> <view
<u-icon :size="38" name="backspace" :bold="true"></u-icon> class="u-keyboard__button__inner-wrapper"
v-for="(item, j) in group"
:key="j"
>
<view
class="u-keyboard__button__inner-wrapper__inner"
:hover-stay-time="200"
@tap="carInputClick(i, j)"
hover-class="u-hover-class"
>
<text class="u-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
</view> </view>
<view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @tap="changeCarInputMode"> </view>
<text class="zh" :class="[!abc ? 'active' : 'inactive']"></text> <view
/ v-if="i === 3"
<text class="en" :class="[abc ? 'active' : 'inactive']"></text> @touchstart="backspaceClick"
@touchend="clearTimer"
class="u-keyboard__button__inner-wrapper"
>
<view
class="u-keyboard__button__inner-wrapper__right"
hover-class="u-hover-class"
:hover-stay-time="200"
>
<u-icon
size="28"
name="backspace"
color="#303133"
></u-icon>
</view> </view>
</block> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import props from './props.js';
/**
* keyboard 键盘组件
* @description 此为uView自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3种模式,都有可以打乱按键顺序的选项。
* @tutorial https://uviewui.com/components/keyboard.html
* @property {Boolean} random 是否打乱键盘的顺序
* @event {Function} change 点击键盘触发
* @event {Function} backspace 点击退格键触发
* @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
*/
export default { export default {
name: "u-keyboard", name: "u-keyboard",
props: { mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
// 是否打乱键盘按键的顺序
random: {
type: Boolean,
default: false
}
},
data() { data() {
return { return {
// 车牌输入时,abc=true为输入车牌号码,bac=false为输入省份中文简称 // 车牌输入时,abc=true为输入车牌号码,bac=false为输入省份中文简称
...@@ -80,7 +129,7 @@ ...@@ -80,7 +129,7 @@
]; ];
let tmp = []; let tmp = [];
// 打乱顺序 // 打乱顺序
if (this.random) data = this.$u.randomArray(data); if (this.random) data = uni.$u.randomArray(data);
// 切割成二维数组 // 切割成二维数组
tmp[0] = data.slice(0, 10); tmp[0] = data.slice(0, 10);
tmp[1] = data.slice(10, 20); tmp[1] = data.slice(10, 20);
...@@ -88,7 +137,7 @@ ...@@ -88,7 +137,7 @@
tmp[3] = data.slice(30, 36); tmp[3] = data.slice(30, 36);
return tmp; return tmp;
}, },
EngKeyBoardList() { engKeyBoardList() {
let data = [ let data = [
1, 1,
2, 2,
...@@ -128,7 +177,7 @@ ...@@ -128,7 +177,7 @@
'M' 'M'
]; ];
let tmp = []; let tmp = [];
if (this.random) data = this.$u.randomArray(data); if (this.random) data = uni.$u.randomArray(data);
tmp[0] = data.slice(0, 10); tmp[0] = data.slice(0, 10);
tmp[1] = data.slice(10, 20); tmp[1] = data.slice(10, 20);
tmp[2] = data.slice(20, 30); tmp[2] = data.slice(20, 30);
...@@ -141,8 +190,10 @@ ...@@ -141,8 +190,10 @@
carInputClick(i, j) { carInputClick(i, j) {
let value = ''; let value = '';
// 不同模式,获取不同数组的值 // 不同模式,获取不同数组的值
if (this.abc) value = this.EngKeyBoardList[i][j]; if (this.abc) value = this.engKeyBoardList[i][j];
else value = this.areaList[i][j]; else value = this.areaList[i][j];
// 如果允许自动切换,则将中文状态切换为英文
if (!this.abc && this.autoChange) uni.$u.sleep(200).then(() => this.abc = true)
this.$emit('change', value); this.$emit('change', value);
}, },
// 修改汽车牌键盘的输入模式,中文|英文 // 修改汽车牌键盘的输入模式,中文|英文
...@@ -167,91 +218,94 @@ ...@@ -167,91 +218,94 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/components.scss";
$u-car-keyboard-background-color: rgb(224, 228, 230) !default;
$u-car-keyboard-padding:6px 0 6px !default;
$u-car-keyboard-button-inner-width:64rpx !default;
$u-car-keyboard-button-inner-background-color:#FFFFFF !default;
$u-car-keyboard-button-height:80rpx !default;
$u-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
$u-car-keyboard-button-border-radius:4px !default;
$u-car-keyboard-button-inner-margin:8rpx 5rpx !default;
$u-car-keyboard-button-text-font-size:16px !default;
$u-car-keyboard-button-text-color:$u-main-color !default;
$u-car-keyboard-center-inner-margin: 0 4rpx !default;
$u-car-keyboard-special-button-width:134rpx !default;
$u-car-keyboard-lang-font-size:16px !default;
$u-car-keyboard-lang-color:$u-main-color !default;
$u-car-keyboard-active-color:$u-primary !default;
$u-car-keyboard-line-font-size:15px !default;
$u-car-keyboard-line-color:$u-main-color !default;
$u-car-keyboard-line-margin:0 1px !default;
$u-car-keyboard-u-hover-class-background-color:#BBBCC6 !default;
.u-keyboard-grids { .u-keyboard {
background: rgb(215, 215, 217); @include flex(column);
padding: 24rpx 0; justify-content: space-around;
position: relative; background-color: $u-car-keyboard-background-color;
} align-items: stretch;
padding: $u-car-keyboard-padding;
.u-keyboard-grids-item { &__button {
@include vue-flex; @include flex;
align-items: center; justify-content: center;
justify-content: center; flex: 1;
} /* #ifndef APP-NVUE */
/* #endif */
.u-keyboard-grids-btn { &__inner-wrapper {
text-decoration: none; box-shadow: $u-car-keyboard-button-inner-box-shadow;
width: 62rpx; margin: $u-car-keyboard-button-inner-margin;
flex: 0 0 64rpx; border-radius: $u-car-keyboard-button-border-radius;
height: 80rpx;
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
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;
justify-content: center;
}
.u-carinput-hover {
background-color: rgb(185, 188, 195) !important;
}
.u-keyboard-back { &__inner {
position: absolute; @include flex;
width: 96rpx; justify-content: center;
right: 22rpx; align-items: center;
bottom: 32rpx; width: $u-car-keyboard-button-inner-width;
height: 80rpx; background-color: $u-car-keyboard-button-inner-background-color;
background-color: rgb(185, 188, 195); height: $u-car-keyboard-button-height;
@include vue-flex; border-radius: $u-car-keyboard-button-border-radius;
align-items: center;
border-radius: 8rpx;
justify-content: center;
box-shadow: 0 2rpx 0rpx #888992;
}
.u-keyboard-change { &__text {
font-size: 24rpx; font-size: $u-car-keyboard-button-text-font-size;
box-shadow: 0 2rpx 0rpx #888992; color: $u-car-keyboard-button-text-color;
position: absolute; }
width: 96rpx; }
left: 22rpx;
line-height: 1;
bottom: 32rpx;
height: 80rpx;
background-color: #ffffff;
@include vue-flex;
align-items: center;
border-radius: 8rpx;
justify-content: center;
}
.u-keyboard-change .inactive.zh { &__left,
transform: scale(0.85) translateY(-10rpx); &__right {
} border-radius: $u-car-keyboard-button-border-radius;
width: $u-car-keyboard-special-button-width;
height: $u-car-keyboard-button-height;
background-color: $u-car-keyboard-u-hover-class-background-color;
@include flex;
justify-content: center;
align-items: center;
box-shadow: $u-car-keyboard-button-inner-box-shadow;
}
.u-keyboard-change .inactive.en { &__left {
transform: scale(0.85) translateY(10rpx); &__line {
} font-size: $u-car-keyboard-line-font-size;
color: $u-car-keyboard-line-color;
margin: $u-car-keyboard-line-margin;
}
.u-keyboard-change .active { &__lang {
color: rgb(237, 112, 64); font-size: $u-car-keyboard-lang-font-size;
font-size: 30rpx; color: $u-car-keyboard-lang-color;
}
.u-keyboard-change .zh { &--active {
transform: translateY(-10rpx); color: $u-car-keyboard-active-color;
}
}
}
}
}
} }
.u-keyboard-change .en { .u-hover-class {
transform: translateY(10rpx); background-color: $u-car-keyboard-u-hover-class-background-color;
} }
</style> </style>
This diff is collapsed.
<template> <template>
<view class="u-cell-box"> <view :style="[$u.addStyle(customStyle)]" :class="[customClass]" class="u-cell-group">
<view class="u-cell-title" v-if="title" :style="[titleStyle]"> <view v-if="title" class="u-cell-group__title">
{{title}} <slot name="title">
</view> <text class="u-cell-group__title__text">{{ title }}</text>
<view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}"> </slot>
<slot /> </view>
</view> <view class="u-cell-group__wrapper">
</view> <u-line v-if="border"></u-line>
<slot />
</view>
</view>
</template> </template>
<script> <script>
import props from './props.js';
/** /**
* cellGroup 单元格父组件Group * cellGroup 单元格
* @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。搭配u-cell-item * @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。
* @tutorial https://www.uviewui.com/components/cell.html * @tutorial https://uviewui.com/components/cell.html
* @property {String} title 分组标题 *
* @property {Boolean} border 是否显示外边框(默认true) * @property {String} title 分组标题
* @property {Object} title-style 分组标题的的样式,对象形式,如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'} * @property {Boolean} border 是否显示外边框 (默认 true )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击cell列表时触发
* @example <u-cell-group title="设置喜好"> * @example <u-cell-group title="设置喜好">
*/ */
export default { export default {
name: "u-cell-group", name: 'u-cell-group',
props: { mixins: [uni.$u.mpMixin, uni.$u.mixin,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,
}
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/components.scss";
.u-cell-box { $u-cell-group-title-padding: 16px 16px 8px !default;
width: 100%; $u-cell-group-title-font-size: 15px !default;
} $u-cell-group-title-line-height: 16px !default;
$u-cell-group-title-color: $u-main-color !default;
.u-cell-title { .u-cell-group {
padding: 30rpx 32rpx 10rpx 32rpx; flex: 1;
font-size: 30rpx;
text-align: left; &__title {
color: $u-tips-color; padding: $u-cell-group-title-padding;
}
.u-cell-item-box { &__text {
background-color: #FFFFFF; font-size: $u-cell-group-title-font-size;
flex-direction: row; line-height: $u-cell-group-title-line-height;
} color: $u-cell-group-title-color;
}
}
&__wrapper {
position: relative;
}
}
</style> </style>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
var inline = {
abbr: 1,
b: 1,
big: 1,
code: 1,
del: 1,
em: 1,
i: 1,
ins: 1,
label: 1,
q: 1,
small: 1,
span: 1,
strong: 1,
sub: 1,
sup: 1
}
module.exports = {
use: function(item) {
return !item.c && !inline[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1
}
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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