7.11 pan
Panzihang
parent
e78200689d
commit
41cb4c650a
24
pages.json
24
pages.json
|
|
@ -24,6 +24,24 @@
|
||||||
"navigationBarTitleText": "船舶作业"
|
"navigationBarTitleText": "船舶作业"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/documentList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "单证列表"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/mixWork",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "杂项作业"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/mixAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "杂项作业编辑"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/monitor/index",
|
"path": "pages/monitor/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -41,6 +59,12 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "质损详情"
|
"navigationBarTitleText": "质损详情"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/monitor/sign",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "签名"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
|
|
|
||||||
|
|
@ -20,13 +20,13 @@
|
||||||
<li>
|
<li>
|
||||||
<p class="liTitle">板车照片</p>
|
<p class="liTitle">板车照片</p>
|
||||||
<view class="picture">
|
<view class="picture">
|
||||||
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
<img src="../../static/images/testImg.jpg" alt="" v-for="item in 3">
|
||||||
</view>
|
</view>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<p class="liTitle">板车车牌照</p>
|
<p class="liTitle">板车车牌照</p>
|
||||||
<view class="picture">
|
<view class="picture">
|
||||||
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
<img src="../../static/images/testImg.jpg" alt="" v-for="item in 3">
|
||||||
</view>
|
</view>
|
||||||
</li>
|
</li>
|
||||||
<li class="flexLi">
|
<li class="flexLi">
|
||||||
|
|
@ -70,6 +70,13 @@
|
||||||
<p>质损货物品类：</p>
|
<p>质损货物品类：</p>
|
||||||
<p>商品车</p>
|
<p>商品车</p>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="imgLi">
|
||||||
|
<img src="../../static/images/car1.png" alt="">
|
||||||
|
<img src="../../static/images/car2.png" alt="">
|
||||||
|
<img src="../../static/images/car3.png" alt="">
|
||||||
|
<img src="../../static/images/car4.png" alt="">
|
||||||
|
<img src="../../static/images/car5.png" alt="">
|
||||||
|
</li>
|
||||||
<li class="tsLi">
|
<li class="tsLi">
|
||||||
<p>质损概况：</p>
|
<p>质损概况：</p>
|
||||||
<p>其他 这是一段关于其他的描述</p>
|
<p>其他 这是一段关于其他的描述</p>
|
||||||
|
|
@ -85,21 +92,37 @@
|
||||||
<li class="zpLi">
|
<li class="zpLi">
|
||||||
<p class="liTitle">质损照片</p>
|
<p class="liTitle">质损照片</p>
|
||||||
<view class="picture">
|
<view class="picture">
|
||||||
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
<img src="../../static/images/testImg.jpg" alt="" v-for="item in 6">
|
||||||
</view>
|
</view>
|
||||||
</li>
|
</li>
|
||||||
<li class="zpLi">
|
<li class="zpLi">
|
||||||
<p class="liTitle">车架号图片</p>
|
<p class="liTitle">车架号图片</p>
|
||||||
<view class="picture">
|
<view class="picture">
|
||||||
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
<img src="../../static/images/testImg.jpg" alt="" v-for="item in 9">
|
||||||
</view>
|
</view>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/monitor/index'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
@ -149,11 +172,13 @@
|
||||||
|
|
||||||
.picture {
|
.picture {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
/deep/.file-picker__box {
|
img {
|
||||||
width: 120px !important;
|
width: 120px;
|
||||||
height: 120px !important;
|
height: 120px;
|
||||||
padding-top: 0;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -181,6 +206,42 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.imgLi {
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
img:nth-of-type(1) {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:nth-of-type(2) {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:nth-of-type(3) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:nth-of-type(4) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:nth-of-type(5) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 0;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -49,8 +49,9 @@
|
||||||
<p class="liTitle"><span class="required">*</span>责损负责人:</p>
|
<p class="liTitle"><span class="required">*</span>责损负责人:</p>
|
||||||
<van-field v-model="lossHead" placeholder="请输入" />
|
<van-field v-model="lossHead" placeholder="请输入" />
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li class="zisun">
|
||||||
<p class="liTitle"><span class="required">*</span>签名:</p>
|
<p class="liTitle"><span class="required">*</span>签名:</p>
|
||||||
|
<p class="sign" @click="sign">点击签名</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<view class="formTitle">
|
<view class="formTitle">
|
||||||
|
|
@ -96,6 +97,13 @@
|
||||||
</van-radio>
|
</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="imgLi">
|
||||||
|
<img src="../../static/images/car1.png" alt="">
|
||||||
|
<img src="../../static/images/car2.png" alt="">
|
||||||
|
<img src="../../static/images/car3.png" alt="">
|
||||||
|
<img src="../../static/images/car4.png" alt="">
|
||||||
|
<img src="../../static/images/car5.png" alt="">
|
||||||
|
</li>
|
||||||
<li class="zsLi">
|
<li class="zsLi">
|
||||||
<p class="liTitle"><span class="required">*</span>资损概况:</p>
|
<p class="liTitle"><span class="required">*</span>资损概况:</p>
|
||||||
<van-checkbox-group class="radioList" v-model="result1">
|
<van-checkbox-group class="radioList" v-model="result1">
|
||||||
|
|
@ -244,6 +252,12 @@
|
||||||
},
|
},
|
||||||
onLoad() {},
|
onLoad() {},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 点击签名
|
||||||
|
sign() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/monitor/sign'
|
||||||
|
})
|
||||||
|
},
|
||||||
// 船名
|
// 船名
|
||||||
shipChange(e) {
|
shipChange(e) {
|
||||||
this.shipValue = e
|
this.shipValue = e
|
||||||
|
|
@ -266,9 +280,8 @@
|
||||||
},
|
},
|
||||||
// 取消
|
// 取消
|
||||||
cancel() {
|
cancel() {
|
||||||
console.log("取消")
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '..//monitor/index'
|
url: '/pages/monitor/index'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -355,6 +368,13 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sign {
|
||||||
|
color: #2979ff;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.zsInfo {
|
.zsInfo {
|
||||||
|
|
@ -380,6 +400,7 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.zsLi {
|
.zsLi {
|
||||||
|
|
@ -421,6 +442,31 @@
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.imgLi {
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
img:nth-of-type(1) {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:nth-of-type(2) {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:nth-of-type(3) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:nth-of-type(4) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:nth-of-type(5) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnList {
|
.btnList {
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="rowFoot">
|
<view class="rowFoot">
|
||||||
<view class="col">
|
<view class="col" @click="details">
|
||||||
详情
|
详情
|
||||||
</view>
|
</view>
|
||||||
<view class="col" @click="edit">
|
<view class="col" @click="edit">
|
||||||
|
|
@ -132,16 +132,20 @@
|
||||||
},
|
},
|
||||||
// 点击新增
|
// 点击新增
|
||||||
add() {
|
add() {
|
||||||
console.log("新增")
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: 'pages/monitor/edit'
|
url: '/pages/monitor/edit'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 点击编辑
|
// 点击编辑
|
||||||
edit() {
|
edit() {
|
||||||
console.log("编辑")
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: 'pages/monitor/edit'
|
url: '/pages/monitor/edit'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 点击详情
|
||||||
|
details() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/monitor/details'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="sigh-btns">
|
||||||
|
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
||||||
|
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
||||||
|
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
||||||
|
<!-- <button class="btn" @tap="handleCancel">取消</button>
|
||||||
|
<button class="btn" @tap="handleReset">重写</button>
|
||||||
|
<button class="btn" @tap="handleConfirm">确认</button> -->
|
||||||
|
</view>
|
||||||
|
<view class="sign-box">
|
||||||
|
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
|
||||||
|
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
|
||||||
|
|
||||||
|
<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
var x = 20;
|
||||||
|
var y = 20;
|
||||||
|
var tempPoint = []; //用来存放当前画纸上的轨迹点
|
||||||
|
var id = 0;
|
||||||
|
var type = '';
|
||||||
|
let that;
|
||||||
|
let canvasw;
|
||||||
|
let canvash;
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ctx: '', //绘图图像
|
||||||
|
points: [], //路径点集合,
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
|
||||||
|
onLoad(option) {
|
||||||
|
that = this;
|
||||||
|
console.log(option);
|
||||||
|
id = option.id;
|
||||||
|
type = option.type;
|
||||||
|
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
|
||||||
|
//设置画笔样式
|
||||||
|
this.ctx.lineWidth = 4;
|
||||||
|
this.ctx.lineCap = 'round';
|
||||||
|
this.ctx.lineJoin = 'round';
|
||||||
|
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: function(res) {
|
||||||
|
console.log(res);
|
||||||
|
that.width = res.windowWidth * 0.8;
|
||||||
|
that.height = res.windowHeight * 0.85;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//触摸开始，获取到起点
|
||||||
|
touchstart: function(e) {
|
||||||
|
let startX = e.changedTouches[0].x;
|
||||||
|
let startY = e.changedTouches[0].y;
|
||||||
|
let startPoint = {
|
||||||
|
X: startX,
|
||||||
|
Y: startY
|
||||||
|
};
|
||||||
|
|
||||||
|
/* **************************************************
|
||||||
|
#由于uni对canvas的实现有所不同，这里需要把起点存起来
|
||||||
|
* **************************************************/
|
||||||
|
this.points.push(startPoint);
|
||||||
|
|
||||||
|
//每次触摸开始，开启新的路径
|
||||||
|
this.ctx.beginPath();
|
||||||
|
},
|
||||||
|
|
||||||
|
//触摸移动，获取到路径点
|
||||||
|
touchmove: function(e) {
|
||||||
|
let moveX = e.changedTouches[0].x;
|
||||||
|
let moveY = e.changedTouches[0].y;
|
||||||
|
let movePoint = {
|
||||||
|
X: moveX,
|
||||||
|
Y: moveY
|
||||||
|
};
|
||||||
|
this.points.push(movePoint); //存点
|
||||||
|
let len = this.points.length;
|
||||||
|
if (len >= 2) {
|
||||||
|
this.draw(); //绘制路径
|
||||||
|
}
|
||||||
|
tempPoint.push(movePoint);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
|
||||||
|
touchend: function() {
|
||||||
|
this.points = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
/* ***********************************************
|
||||||
|
# 绘制笔迹
|
||||||
|
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
||||||
|
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
|
||||||
|
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
|
||||||
|
************************************************ */
|
||||||
|
draw: function() {
|
||||||
|
let point1 = this.points[0];
|
||||||
|
let point2 = this.points[1];
|
||||||
|
this.points.shift();
|
||||||
|
this.ctx.moveTo(point1.X, point1.Y);
|
||||||
|
this.ctx.lineTo(point2.X, point2.Y);
|
||||||
|
this.ctx.stroke();
|
||||||
|
this.ctx.draw(true);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleCancel() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//清空画布
|
||||||
|
handleReset: function() {
|
||||||
|
console.log('handleReset');
|
||||||
|
that.ctx.clearRect(0, 0, that.width, that.height);
|
||||||
|
that.ctx.draw(true);
|
||||||
|
tempPoint = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||||
|
handleConfirm: function() {
|
||||||
|
if (tempPoint.length == 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先签名',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'mycanvas',
|
||||||
|
success: function(res) {
|
||||||
|
let tempPath = res.tempFilePath;
|
||||||
|
console.log(tempPath)
|
||||||
|
|
||||||
|
const ctx = uni.createCanvasContext('camCacnvs', that);
|
||||||
|
ctx.translate(0, that.width);
|
||||||
|
ctx.rotate((-90 * Math.PI) / 180);
|
||||||
|
ctx.drawImage(tempPath, 0, 0, that.width, that.height);
|
||||||
|
ctx.draw();
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
//保存签名图片到本地
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'camCacnvs',
|
||||||
|
success: function(res) {
|
||||||
|
//这是签名图片文件的本地临时地址
|
||||||
|
let path = res.tempFilePath;
|
||||||
|
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log('fail', err);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
this
|
||||||
|
);
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 100%;
|
||||||
|
padding: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-box {
|
||||||
|
width: 80%;
|
||||||
|
height: 90%;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sign-view {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sigh-btns {
|
||||||
|
height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 30px 0px;
|
||||||
|
padding: 8rpx;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
border: grey 1rpx solid;
|
||||||
|
width: 100px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mycanvas {
|
||||||
|
margin: auto 0rpx;
|
||||||
|
background-color: #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvsborder {
|
||||||
|
border: 1rpx solid #333;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 10000rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
<template>
|
||||||
|
<view class="documentList">
|
||||||
|
<view class="container">
|
||||||
|
<p class="title">作业单证</p>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="toGo(item.url)">
|
||||||
|
<view class="round"></view>
|
||||||
|
<span>{{item.name}}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="title">其他作业</p>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in otherListh" :key="index" @click="toGo(item.url)">
|
||||||
|
<view class="round"></view>
|
||||||
|
<span>{{item.name}}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
name: "杂项作业单",
|
||||||
|
url: "mixWork"
|
||||||
|
}, {
|
||||||
|
name: "系解缆",
|
||||||
|
url: "mixWork"
|
||||||
|
}, {
|
||||||
|
name: "供给",
|
||||||
|
url: "mixWork"
|
||||||
|
}, {
|
||||||
|
name: "指导员作业布置",
|
||||||
|
url: "mixWork"
|
||||||
|
}, {
|
||||||
|
name: "船舶装卸通知单",
|
||||||
|
url: "mixWork"
|
||||||
|
}, {
|
||||||
|
name: "质量意见征询",
|
||||||
|
url: "mixWork"
|
||||||
|
}, {
|
||||||
|
name: "异常情况",
|
||||||
|
url: "mixWork"
|
||||||
|
}, {
|
||||||
|
name: "MAFI清单",
|
||||||
|
url: "mixWork"
|
||||||
|
}],
|
||||||
|
otherListh: [{
|
||||||
|
name: "安全巡检",
|
||||||
|
url: "mixWork"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "船舶载货量",
|
||||||
|
url: "mixWork"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "船舶资料",
|
||||||
|
url: "mixWork"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "船舶计划",
|
||||||
|
url: "mixWork"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "作业查询",
|
||||||
|
url: "mixWork"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toGo(url) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/${url}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.documentList {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 10px 20px;
|
||||||
|
|
||||||
|
.round {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,152 @@
|
||||||
|
<template>
|
||||||
|
<view class="mixAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"></uni-data-select>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required">*</span>天气：</p>
|
||||||
|
<span>未知</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required">*</span>泊位：</p>
|
||||||
|
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"></uni-data-select>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required">*</span>作业组数：</p>
|
||||||
|
<uni-number-box @change="workChange" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required">*</span>单船人数：</p>
|
||||||
|
<uni-number-box @change="shipChange" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>作业时间：</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 泊位下拉框
|
||||||
|
bwValue: "",
|
||||||
|
bwList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "泊位0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "泊位1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "泊位2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 作业单数
|
||||||
|
workValue: 0,
|
||||||
|
// 单船人数
|
||||||
|
shipValue: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 泊位下拉
|
||||||
|
bwChange(e) {
|
||||||
|
this.bwValue = e;
|
||||||
|
},
|
||||||
|
// 作业组数
|
||||||
|
workChange(val) {
|
||||||
|
this.workValue = val;
|
||||||
|
},
|
||||||
|
// 单船人数
|
||||||
|
shipChange(val) {
|
||||||
|
this.shipValue = val;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.mixAdd {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 44%;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 20px;
|
||||||
|
line-height: 35px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: red;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.uni-numbox {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.uni-numbox-btns {
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
padding: 0 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.uni-numbox__value {
|
||||||
|
width: 100px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
<template>
|
||||||
|
<view class="mixWork">
|
||||||
|
<view class="container">
|
||||||
|
<view class="tabsList">
|
||||||
|
<view class="tabsBox" v-for="(item,index) in tabsList" :key="index" :class="{active:tabsIndex == index}"
|
||||||
|
@click="tabsClick(item,index)">{{item}}</view>
|
||||||
|
</view>
|
||||||
|
<ul v-if="tabsType == 1">
|
||||||
|
<li v-for="(item,index) in peopleInfo" :key="index">
|
||||||
|
<view class="title">航次：{{item.val1}}</view>
|
||||||
|
<p>贸易类型：{{item.val2}}</p>
|
||||||
|
<p>进出口：{{item.val3}}</p>
|
||||||
|
<p>作业组数：{{item.val4}}</p>
|
||||||
|
<p>单船人数：{{item.val5}}</p>
|
||||||
|
<p>状态：{{item.val6}}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul v-if="tabsType == 2">
|
||||||
|
<li v-for="(item,index) in shiftInfo" :key="index">
|
||||||
|
<view class="title">航次：{{item.val1}}</view>
|
||||||
|
<view class="shift">
|
||||||
|
<p>一工班</p>
|
||||||
|
<span>作业时间：2023/09/09 13:00:00</span>
|
||||||
|
</view>
|
||||||
|
<view class="shift">
|
||||||
|
<p>二工班</p>
|
||||||
|
<span>作业时间：2023/09/09 13:00:00</span>
|
||||||
|
</view>
|
||||||
|
<view class="shift">
|
||||||
|
<p>三工班</p>
|
||||||
|
<span>作业时间：2023/09/09 13:00:00</span>
|
||||||
|
</view>
|
||||||
|
<view class="state">状态：{{item.val6}}</view>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="addBtn" @click="add">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabsList: ["人员信息", "工班信息"],
|
||||||
|
tabsType: 1,
|
||||||
|
tabsIndex: 0,
|
||||||
|
peopleInfo: [{
|
||||||
|
val1: "JK9795799",
|
||||||
|
val2: "内贸",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "100",
|
||||||
|
val5: "100",
|
||||||
|
val6: "未上传",
|
||||||
|
}, {
|
||||||
|
val1: "JK9795799",
|
||||||
|
val2: "内贸",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "100",
|
||||||
|
val5: "100",
|
||||||
|
val6: "未上传",
|
||||||
|
}, {
|
||||||
|
val1: "JK9795799",
|
||||||
|
val2: "内贸",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "100",
|
||||||
|
val5: "100",
|
||||||
|
val6: "未上传",
|
||||||
|
}],
|
||||||
|
shiftInfo: [{
|
||||||
|
val1: "JK9795799",
|
||||||
|
val6: "未上传",
|
||||||
|
}, ]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabsClick(item, index) {
|
||||||
|
this.tabsIndex = index;
|
||||||
|
if (item == "人员信息") {
|
||||||
|
this.tabsType = 1;
|
||||||
|
} else {
|
||||||
|
this.tabsType = 2;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
add() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/mixAdd`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.mixWork {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
.tabsList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.tabsBox {
|
||||||
|
width: 100px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0px 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #2979ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 20px 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shift {
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addBtn {
|
||||||
|
position: fixed;
|
||||||
|
right: 50px;
|
||||||
|
bottom: 50px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #2979ff;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
|
|
@ -1,5 +1,5 @@
|
||||||
.container {
|
.container {
|
||||||
min-height: 100vh;
|
min-height: calc(100vh - 44px);
|
||||||
background-color: #f5f6fa;
|
background-color: #f5f6fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
## 1.2.3（2023-05-23）
|
||||||
|
更新示例工程
|
||||||
|
## 1.2.2（2023-05-08）
|
||||||
|
- 修复 change 事件执行顺序错误的问题
|
||||||
|
## 1.2.1（2021-11-22）
|
||||||
|
- 修复 vue3中某些scss变量无法找到的问题
|
||||||
|
## 1.2.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box)
|
||||||
|
## 1.1.2（2021-11-09）
|
||||||
|
- 新增 提供组件设计资源，组件样式调整
|
||||||
|
## 1.1.1（2021-07-30）
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.1.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.7（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.0.6（2021-04-20）
|
||||||
|
- 修复 uni-number-box 浮点数运算不精确的 bug
|
||||||
|
- 修复 uni-number-box change 事件触发不正确的 bug
|
||||||
|
- 新增 uni-number-box v-model 双向绑定
|
||||||
|
## 1.0.5（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
||||||
|
## 1.0.7（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 支持 v-model
|
||||||
|
- 新增 支持 focus、blur 事件
|
||||||
|
- 新增 支持 PC 端
|
||||||
|
|
@ -0,0 +1,221 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-numbox">
|
||||||
|
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
|
||||||
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
|
||||||
|
</view>
|
||||||
|
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
|
||||||
|
v-model="inputValue" :style="{background, color}" />
|
||||||
|
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
|
||||||
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* NumberBox 数字输入框
|
||||||
|
* @description 带加减按钮的数字输入框
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=31
|
||||||
|
* @property {Number} value 输入框当前值
|
||||||
|
* @property {Number} min 最小值
|
||||||
|
* @property {Number} max 最大值
|
||||||
|
* @property {Number} step 每次点击改变的间隔大小
|
||||||
|
* @property {String} background 背景色
|
||||||
|
* @property {String} color 字体颜色（前景色）
|
||||||
|
* @property {Boolean} disabled = [true|false] 是否为禁用状态
|
||||||
|
* @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
|
||||||
|
* @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
|
||||||
|
* @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "UniNumberBox",
|
||||||
|
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
step: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
type: String,
|
||||||
|
default: '#f5f5f5'
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333'
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value(val) {
|
||||||
|
this.inputValue = +val;
|
||||||
|
},
|
||||||
|
modelValue(val) {
|
||||||
|
this.inputValue = +val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.value === 1) {
|
||||||
|
this.inputValue = +this.modelValue;
|
||||||
|
}
|
||||||
|
if (this.modelValue === 1) {
|
||||||
|
this.inputValue = +this.value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_calcValue(type) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const scale = this._getDecimalScale();
|
||||||
|
let value = this.inputValue * scale;
|
||||||
|
let step = this.step * scale;
|
||||||
|
if (type === "minus") {
|
||||||
|
value -= step;
|
||||||
|
if (value < (this.min * scale)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (value > (this.max * scale)) {
|
||||||
|
value = this.max * scale
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "plus") {
|
||||||
|
value += step;
|
||||||
|
if (value > (this.max * scale)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (value < (this.min * scale)) {
|
||||||
|
value = this.min * scale
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.inputValue = (value / scale).toFixed(String(scale).length - 1);
|
||||||
|
// TODO vue2 兼容
|
||||||
|
this.$emit("input", +this.inputValue);
|
||||||
|
// TODO vue3 兼容
|
||||||
|
this.$emit("update:modelValue", +this.inputValue);
|
||||||
|
this.$emit("change", +this.inputValue);
|
||||||
|
},
|
||||||
|
_getDecimalScale() {
|
||||||
|
|
||||||
|
let scale = 1;
|
||||||
|
// 浮点型
|
||||||
|
if (~~this.step !== this.step) {
|
||||||
|
scale = Math.pow(10, String(this.step).split(".")[1].length);
|
||||||
|
}
|
||||||
|
return scale;
|
||||||
|
},
|
||||||
|
_onBlur(event) {
|
||||||
|
this.$emit('blur', event)
|
||||||
|
let value = event.detail.value;
|
||||||
|
if (isNaN(value)) {
|
||||||
|
this.inputValue = this.min;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
value = +value;
|
||||||
|
if (value > this.max) {
|
||||||
|
value = this.max;
|
||||||
|
} else if (value < this.min) {
|
||||||
|
value = this.min;
|
||||||
|
}
|
||||||
|
const scale = this._getDecimalScale();
|
||||||
|
this.inputValue = value.toFixed(String(scale).length - 1);
|
||||||
|
this.$emit("input", +this.inputValue);
|
||||||
|
this.$emit("update:modelValue", +this.inputValue);
|
||||||
|
this.$emit("change", +this.inputValue);
|
||||||
|
},
|
||||||
|
_onFocus(event) {
|
||||||
|
this.$emit('focus', event)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" >
|
||||||
|
$box-height: 26px;
|
||||||
|
$bg: #f5f5f5;
|
||||||
|
$br: 2px;
|
||||||
|
$color: #333;
|
||||||
|
|
||||||
|
.uni-numbox {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox-btns {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
background-color: $bg;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox__value {
|
||||||
|
margin: 0 2px;
|
||||||
|
background-color: $bg;
|
||||||
|
width: 40px;
|
||||||
|
height: $box-height;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-right-width: 0;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox__minus {
|
||||||
|
border-top-left-radius: $br;
|
||||||
|
border-bottom-left-radius: $br;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox__plus {
|
||||||
|
border-top-right-radius: $br;
|
||||||
|
border-bottom-right-radius: $br;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox--text {
|
||||||
|
// fix nvue
|
||||||
|
line-height: 20px;
|
||||||
|
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox .uni-numbox--disabled {
|
||||||
|
color: #c0c0c0 !important;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
{
|
||||||
|
"id": "uni-number-box",
|
||||||
|
"displayName": "uni-number-box 数字输入框",
|
||||||
|
"version": "1.2.3",
|
||||||
|
"description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"数字输入框"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
|
||||||
|
|
||||||
|
## NumberBox 数字输入框
|
||||||
|
> **组件名：uni-number-box**
|
||||||
|
> 代码块： `uNumberBox`
|
||||||
|
|
||||||
|
|
||||||
|
带加减按钮的数字输入框。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue