合并冲突
lilu
2 years ago
commit
4252ef397c
@ -1,9 +1,332 @@
|
||||
|
||||
|
||||
// @uni-color-normal: #2c96fb;
|
||||
// @uni-color-yellow: #ffc827;
|
||||
// @uni-color-origin: #ff8213;
|
||||
// @uni-color-red: #ff4e20;
|
||||
// @uni-color-blue: #12c8fd;
|
||||
// @uni-color-green: #42bfac;
|
||||
Page{
|
||||
font-family: "PingFang-SC-Regular";
|
||||
height: 100%;
|
||||
font-size: 24rpx;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
body{
|
||||
height: 100%;
|
||||
}
|
||||
view{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bg-container{
|
||||
background: rgba(243,244,245,1);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
}
|
||||
.container{
|
||||
height: 100%;
|
||||
}
|
||||
.greenBg{
|
||||
background-color: green;
|
||||
}
|
||||
//全局
|
||||
.pad-rl{
|
||||
padding: 0 28rpx;
|
||||
}
|
||||
|
||||
.flex-ro{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-cu{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-side{
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-center{
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-start{
|
||||
justify-content: flex-start
|
||||
}
|
||||
.justify-end{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.align-start{
|
||||
align-items: flex-start
|
||||
}
|
||||
.warp{
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.txt-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mg-center{
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
//通用字体size
|
||||
.f-10{
|
||||
font-size:20rpx;
|
||||
}
|
||||
.f-12{
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
.f-13{
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.f-14{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.f-15{
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.f-16{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.f-17{
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.f-18{
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.f-19{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.f-20{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.font-w{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pa-l-5{
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
.pa-l-10{
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.pa-l-15{
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
.pa-l-20{
|
||||
padding-left: 40rpx;
|
||||
}
|
||||
|
||||
.pa-r-5{
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
.pa-r-10{
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
.pa-r-15{
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.pa-r-20{
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
|
||||
.pa-d-10{
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.pa-d-20{
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.pa-d-5{
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.pa-t-10{
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.pa-t-15{
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
.pa-t-20{
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.pa-t-5{
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.mg-l-5{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.mg-l-10{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.mg-r-5{
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.mg-r-10{
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.mg-r-15{
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.mg-r-20{
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.mg-d-10{
|
||||
margin-bottom: 20rpx !important;
|
||||
}
|
||||
|
||||
.mg-d-15{
|
||||
margin-bottom: 30rpx !important;
|
||||
}
|
||||
|
||||
.mg-d-20{
|
||||
margin-bottom: 40rpx !important;
|
||||
}
|
||||
.mg-d-5{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.mg-t-10{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.mg-t-15{
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.mg-t-20{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.mg-t-5{
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.col-w{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.col-h{
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
.col-low{
|
||||
color: #3f3f3f;
|
||||
}
|
||||
|
||||
.col-low-down{
|
||||
color: #898989;
|
||||
}
|
||||
|
||||
.col-ye{
|
||||
color: #f58f13;
|
||||
}
|
||||
|
||||
.col-red{
|
||||
color: #E25153!important;
|
||||
}
|
||||
|
||||
.col-redNew{
|
||||
color: #db4e3c!important;
|
||||
}
|
||||
|
||||
.bg-w{
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bg-h{
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
.bg-low{
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
|
||||
.bg-low-down{
|
||||
background-color: #898989;
|
||||
}
|
||||
.bg-low-btn{
|
||||
background-color: #d4d4d4;
|
||||
}
|
||||
|
||||
.bg-ye{
|
||||
background-color: #f58f13;
|
||||
}
|
||||
|
||||
.bg-red{
|
||||
background-color: #fa2807!important;
|
||||
}
|
||||
.bg-green{
|
||||
background-color: #00c45d;
|
||||
}
|
||||
|
||||
.bg-normal{
|
||||
background-color: rgba(243,244,245,1)!important;
|
||||
}
|
||||
|
||||
.grad {
|
||||
background-image: linear-gradient(rgb(253,118,6),rgb(252,29,12));
|
||||
}
|
||||
.newGrad{
|
||||
background-image: linear-gradient(to right, #ff933e , #ea5757)!important;
|
||||
}
|
||||
.saveNewGrad{
|
||||
background-image: linear-gradient(to right, rgb(252,85,40) , rgb(243,50,71))!important;
|
||||
}
|
||||
.newGradStop{
|
||||
background-image: linear-gradient(to right, #ffc67f , #ef6a72);
|
||||
}
|
||||
.blueGrad{
|
||||
background-image: linear-gradient(to right, #7C98F7 , #4055EF);
|
||||
}
|
||||
|
||||
.centers{
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
.fn-c-3{
|
||||
color:#333;
|
||||
}
|
||||
.fn-c-6{
|
||||
color:#333;
|
||||
}
|
||||
.fn-c-9{
|
||||
color:#333;
|
||||
}
|
||||
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
const add0 = (m) => {
|
||||
return m < 10 ? '0' + m : m
|
||||
}
|
||||
const FormatTiem = (A) => {
|
||||
let timestamp = `
|
||||
`
|
||||
if (A) {
|
||||
timestamp = A.split('(')[1].split(')')[0]
|
||||
var time = new Date(timestamp/1000);
|
||||
var y = time.getFullYear();
|
||||
var m = time.getMonth() + 1;
|
||||
var d = time.getDate();
|
||||
var h = time.getHours();
|
||||
var mm = time.getMinutes();
|
||||
var s = time.getSeconds();
|
||||
// console.log(y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s));
|
||||
return add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm)
|
||||
}
|
||||
return timestamp
|
||||
}
|
||||
// export default {FormatTiem}
|
||||
export {
|
||||
FormatTiem
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<view class="cabin-query-box">
|
||||
<query v-if="show == 'query'" @fromData="getFromData"></query>
|
||||
<history v-else :fromData="fromData" @reset="resetFun"></history>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import query from '@/pages/manifest/cabinQuery/components/query.vue'
|
||||
import history from '@/pages/manifest/cabinQuery/components/history.vue'
|
||||
export default {
|
||||
components: {
|
||||
query,
|
||||
history,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: 'query',
|
||||
fromData: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getFromData(data){
|
||||
this.fromData = data;
|
||||
this.show = 'history';
|
||||
},
|
||||
resetFun(){
|
||||
this.show = 'query'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.cabin-query-box{
|
||||
height:100vh;
|
||||
}
|
||||
</style>
|
||||
@ -1,42 +1,588 @@
|
||||
<template>
|
||||
<view class="cabin-query-box">
|
||||
<query v-if="show == 'query'" @fromData="getFromData"></query>
|
||||
<history v-else :fromData="fromData" @reset="resetFun"></history>
|
||||
<view class="cabin-query">
|
||||
<view class="query-box">
|
||||
<view class="choice-btn">
|
||||
<view class="left"><text class="iconfont icon-yunshu"></text><text class="tip">起运港</text></view>
|
||||
<view class="right" @click="openInputSerch('portDeparture')">
|
||||
<text class="gk" v-if="fromData.portDeparture">{{fromData.portDeparture }}</text>
|
||||
<text class="gk" v-else>请选择起运港</text>
|
||||
<text class="icon iconfont icon-daoda"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="choice-btn">
|
||||
<view class="left"><text class="iconfont icon-yunshu"></text><text class="tip">目的港</text></view>
|
||||
<view class="right" @click="openInputSerch('portArrival')">
|
||||
<text class="gk" v-if="fromData.portArrival">{{fromData.portArrival }}</text>
|
||||
<text class="gk" v-else>请选择目的港</text>
|
||||
<text class="icon iconfont icon-daoda"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="choice-btn" @click="openInputSerch('boxType')">
|
||||
<view class="left"><text class="iconfont icon-a-jizhuangxiang1"></text><text class="tip">箱型</text></view>
|
||||
<view class="right">
|
||||
<text class="gk" v-if="fromData.boxType">{{fromData.boxType }}</text>
|
||||
<text class="gk" v-else>请选择箱型</text>
|
||||
<text class="icon iconfont icon-daoda"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="choice-btn">
|
||||
<view class="left"><text class="iconfont icon-shijian"></text><text class="tip">开始时间</text></view>
|
||||
<view class="right">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="fromData.startTime"
|
||||
@maskClick="startTimeClick" :start="Date.now()" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="choice-btn">
|
||||
<view class="left"><text class="iconfont icon-shijian"></text><text class="tip">结束时间</text></view>
|
||||
<view class="right">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="fromData.endTime"
|
||||
@maskClick="endTimeClick" :start="Date.now()" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="button-box">
|
||||
<button class="enter" @click="goQuery">查询</button>
|
||||
<button class="reset" v-show="hasFromData" @click="resetFrom">重置</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="query-history">
|
||||
<view class="history-tit">
|
||||
<text class="left">历史记录</text>
|
||||
</view>
|
||||
<view class="history-list">
|
||||
<view class="history-view">
|
||||
<view class="setOut">
|
||||
<text class="tip">出发地</text>
|
||||
<text class="top">{{fromData.portDeparture}}</text>
|
||||
</view>
|
||||
<view class="icon iconfont icon-daoda"></view>
|
||||
<view class="arrive">
|
||||
<text class="tip">目的地</text>
|
||||
<text class="top">{{fromData.portArrival}}</text>
|
||||
</view>
|
||||
|
||||
<text class="icon-tab left"></text>
|
||||
<text class="icon-tab right"></text>
|
||||
|
||||
<text class="icon-tab top-left"></text>
|
||||
<text class="icon-tab top-right"></text>
|
||||
</view>
|
||||
|
||||
<view class="history-view">
|
||||
<view class="setOut">
|
||||
<text class="tip">出发地</text>
|
||||
<text class="top">{{fromData.portDeparture}}</text>
|
||||
</view>
|
||||
<view class="icon iconfont icon-daoda"></view>
|
||||
<view class="arrive">
|
||||
<text class="tip">目的地</text>
|
||||
<text class="top">{{fromData.portArrival}}</text>
|
||||
</view>
|
||||
|
||||
<text class="icon-tab left"></text>
|
||||
<text class="icon-tab right"></text>
|
||||
</view>
|
||||
|
||||
<view class="history-view">
|
||||
<view class="setOut">
|
||||
<text class="tip">出发地</text>
|
||||
<text class="top">{{fromData.portDeparture}}</text>
|
||||
</view>
|
||||
<view class="icon iconfont icon-daoda"></view>
|
||||
<view class="arrive">
|
||||
<text class="tip">目的地</text>
|
||||
<text class="top">{{fromData.portArrival}}</text>
|
||||
</view>
|
||||
|
||||
<text class="icon-tab left"></text>
|
||||
<text class="icon-tab right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
-->
|
||||
<inputSearch
|
||||
ref="inputView"
|
||||
v-if="inputSearchShow"
|
||||
:inputData="inputSearchData"
|
||||
@change="getInputChange"
|
||||
@submit="getInputRes"
|
||||
@cancel="cancelInput"
|
||||
/>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import query from '@/pages/manifest/cabinQuery/components/query.vue'
|
||||
import history from '@/pages/manifest/cabinQuery/components/history.vue'
|
||||
import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
|
||||
import inputSearch from '@/components/inputSearch/inputSearch.vue'
|
||||
import {
|
||||
realGk,
|
||||
realBox,
|
||||
} from '@/common/js/api/manifest/cabinQuery.js'
|
||||
export default {
|
||||
components: {
|
||||
query,
|
||||
history,
|
||||
uniDatetimePicker,
|
||||
inputSearch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: 'query',
|
||||
fromData: {},
|
||||
fromData: {
|
||||
portDeparture: 'QINGDAO',
|
||||
portDepartureCode: 'CNTAO',
|
||||
portArrival: '',
|
||||
portArrivalCode: '',
|
||||
boxType: '',
|
||||
// portArrival: 'GDANSK, POLAND',
|
||||
// portArrivalCode: 'PLGDN',
|
||||
// boxType: '22G1',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
},
|
||||
hasFromData: true,
|
||||
inputSearchShow: false,
|
||||
inputSearchData:{
|
||||
placeholder: '',
|
||||
dataList: [],
|
||||
showName: '',
|
||||
type: '',
|
||||
history: null,
|
||||
},
|
||||
inputSearchRes: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
fromData: {
|
||||
handler(newValue, oldValue) {
|
||||
let hasData = false
|
||||
for (let key in newValue) {
|
||||
if (newValue[key] != '') {
|
||||
hasData = true;
|
||||
}
|
||||
}
|
||||
this.hasFromData = hasData;
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getFromData(data){
|
||||
this.fromData = data;
|
||||
this.show = 'history';
|
||||
departureClick(e) {
|
||||
console.log(e);
|
||||
this.fromData.portDeparture = e.text;
|
||||
},
|
||||
arrivalClick(e) {
|
||||
console.log(e);
|
||||
this.fromData.portArrival = e.text;
|
||||
},
|
||||
startTimeClick(e) {
|
||||
console.log('startTimeClick事件:', e);
|
||||
},
|
||||
endTimeClick(e) {
|
||||
console.log('endTimeClick事件:', e);
|
||||
},
|
||||
goQuery() {
|
||||
let res = '';
|
||||
Object.keys(this.fromData).map((val, index) => {
|
||||
if (this.fromData[val] == '' && val!='endTime') {
|
||||
res = val
|
||||
console.log(val, this.fromData[val] == '')
|
||||
}
|
||||
})
|
||||
switch (res) {
|
||||
// case 'endTime':
|
||||
// this.$util.Tips({
|
||||
// title: '请填写结束时间'
|
||||
// });
|
||||
// return false;
|
||||
// break;
|
||||
case 'startTime':
|
||||
this.$util.Tips({
|
||||
title: '请填写开始时间'
|
||||
});
|
||||
return false;
|
||||
break;
|
||||
case 'boxType':
|
||||
this.$util.Tips({
|
||||
title: '请填写箱型'
|
||||
});
|
||||
return false;
|
||||
break;
|
||||
case 'portArrival':
|
||||
this.$util.Tips({
|
||||
title: '请填写目的港'
|
||||
});
|
||||
return false;
|
||||
break;
|
||||
case 'portDeparture':
|
||||
this.$util.Tips({
|
||||
title: '请填写起运港'
|
||||
});
|
||||
return false;
|
||||
break;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/manifest/cabinHistory/cabinHistory?data='+JSON.stringify(this.fromData)
|
||||
})
|
||||
},
|
||||
resetFrom() {
|
||||
this.fromData = {
|
||||
portDeparture: '',
|
||||
portDepartureCode: '',
|
||||
portArrival: '',
|
||||
portArrivalCode: '',
|
||||
boxType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
}
|
||||
},
|
||||
openInputSerch(type){
|
||||
this.inputSearchShow = true;
|
||||
if(type == 'portDeparture'){
|
||||
let data = {
|
||||
placeholder: '请输入起运港',
|
||||
dataList: [],
|
||||
showName: 'EnName',
|
||||
type: 'portDeparture',
|
||||
history: this.fromData.portDeparture ? {
|
||||
EnName: this.fromData.portDeparture,
|
||||
code: this.fromData.portDepartureCode,
|
||||
} : null,
|
||||
}
|
||||
this.$set(this, 'inputSearchData' , data)
|
||||
}else if(type == 'portArrival'){
|
||||
let data = {
|
||||
placeholder: '请输入目的港',
|
||||
dataList: [],
|
||||
showName: 'EnName',
|
||||
type: 'portArrival',
|
||||
history: this.fromData.portArrival ? {
|
||||
EnName: this.fromData.portArrival,
|
||||
code: this.fromData.portArrivalCode,
|
||||
} : null,
|
||||
}
|
||||
this.$set(this, 'inputSearchData' , data)
|
||||
}else if(type == 'boxType'){
|
||||
let data = {
|
||||
placeholder: '请输入箱型',
|
||||
dataList: [],
|
||||
showName: 'Code',
|
||||
type: 'boxType',
|
||||
history: this.fromData.boxType ? {
|
||||
Code: this.fromData.boxType
|
||||
} : null,
|
||||
}
|
||||
this.$set(this, 'inputSearchData' , data)
|
||||
}
|
||||
},
|
||||
resetFun(){
|
||||
this.show = 'query'
|
||||
|
||||
getInputChange(key){
|
||||
if(this.inputSearchData.type == 'portDeparture' || this.inputSearchData.type == 'portArrival'){
|
||||
realGk({
|
||||
name: key,
|
||||
port_type: this.inputSearchData.type == 'portDeparture' ? 'pol' : 'pod'
|
||||
}).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$set(this.inputSearchData, 'dataList', []);
|
||||
this.$set(this.inputSearchData, 'dataList', res.data);
|
||||
this.$refs.inputView.$data.inLoading = false;
|
||||
this.$forceUpdate()
|
||||
}else{
|
||||
this.$set(this.inputSearchData, 'dataList', []);
|
||||
this.$refs.inputView.$data.inLoading = false;
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log('报错信息==', err)
|
||||
this.$set(this.inputSearchData, 'dataList', []);
|
||||
this.$refs.inputView.$data.inLoading = false;
|
||||
})
|
||||
}else{
|
||||
realBox({
|
||||
name: key,
|
||||
}).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.$set(this.inputSearchData, 'dataList', res.data);
|
||||
this.$refs.inputView.$data.inLoading = false;
|
||||
this.$forceUpdate()
|
||||
}else{
|
||||
this.$set(this.inputSearchData, 'dataList', []);
|
||||
this.$refs.inputView.$data.inLoading = false;
|
||||
}
|
||||
}).catch(err =>{
|
||||
console.log('报错信息==', err)
|
||||
this.$set(this.inputSearchData, 'dataList', []);
|
||||
this.$refs.inputView.$data.inLoading = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getInputRes(data){
|
||||
console.log(data);
|
||||
if(this.inputSearchData.type == 'portDeparture'){
|
||||
this.fromData.portDeparture = data.EnName;
|
||||
this.fromData.portDepartureCode = data.code;
|
||||
}else if(this.inputSearchData.type == 'portArrival'){
|
||||
this.fromData.portArrival = data.EnName;
|
||||
this.fromData.portArrivalCode = data.code;
|
||||
}else if(this.inputSearchData.type == 'boxType'){
|
||||
this.fromData.boxType = data.Code;
|
||||
}
|
||||
this.inputSearchShow = false;
|
||||
this.inputSearchData = {
|
||||
placeholder: '',
|
||||
history: data,
|
||||
dataList: [],
|
||||
showName: '',
|
||||
type: '',
|
||||
}
|
||||
},
|
||||
|
||||
cancelInput(){
|
||||
this.inputSearchShow = false;
|
||||
this.inputSearchData = {
|
||||
placeholder: '',
|
||||
history: null,
|
||||
dataList: [],
|
||||
showName: '',
|
||||
type: '',
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.cabin-query-box{
|
||||
.cabin-query {
|
||||
background: #f4f4f4;
|
||||
height: 100vh;
|
||||
padding: 20rpx;
|
||||
|
||||
.query-box {
|
||||
background: #fff;
|
||||
padding: 0 30rpx 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 0 18rpx #eee;
|
||||
|
||||
.choice-btn {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.left {
|
||||
width: 220rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 44rpx;
|
||||
margin-right: 12rpx;
|
||||
margin-top: 2rpx;
|
||||
color: #86c7ff;
|
||||
// color: #999;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.tip{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.icon-shijian {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 80rpx;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.gk{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.icon{
|
||||
// float: right;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
margin-right: 20rpx;
|
||||
width: 50rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.box-type {
|
||||
height: 75rpx;
|
||||
text-align: left;
|
||||
line-height: 75rpx;
|
||||
display: block;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-box {
|
||||
margin-top: 40rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
padding: 0 40rpx;
|
||||
|
||||
button {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.enter {
|
||||
flex: 1;
|
||||
background: #ff8213;
|
||||
color: #fff;
|
||||
border-radius: 80rpx;
|
||||
border: none;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.reset {
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
color: #ff8213;
|
||||
margin-left: 20rpx;
|
||||
background: #fff;
|
||||
border: 2rpx solid #ff8213;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 80rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-history{
|
||||
padding-top: 40rpx;
|
||||
.history-tit{
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
// background:#fff;
|
||||
}
|
||||
.history-list{
|
||||
box-shadow: 0 0 10rpx #ccc;
|
||||
}
|
||||
|
||||
.history-view{
|
||||
width:100%;
|
||||
padding:10rpx 50rpx;
|
||||
background:#fff;
|
||||
display: flex;
|
||||
// height: 100rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
// box-shadow: 0 0 10rpx #eee;
|
||||
position: relative;
|
||||
border-bottom: 1px dashed #eee;
|
||||
&:nth-last-of-type(1){
|
||||
border-bottom: none;
|
||||
}
|
||||
.setOut,.arrive{
|
||||
// width: 250rpx;
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
// height: 100rpx;
|
||||
text-align: center;
|
||||
padding: 10rpx 0;
|
||||
.top{
|
||||
line-height: 50rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
}
|
||||
.tip{
|
||||
line-height: 40rpx;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
font-size: 50rpx;
|
||||
color: #2c96fb;
|
||||
width: 100rpx;
|
||||
line-height: 150rpx;
|
||||
height: 150rpx;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.screen{
|
||||
width: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.icon-tab{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #f4f4f4;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: -20rpx;
|
||||
z-index: 999;
|
||||
// box-shadow: inset 0px 0px 10px 1px #f4f4f4;
|
||||
&.left{
|
||||
left:-20rpx;
|
||||
}
|
||||
&.right{
|
||||
right:-20rpx;
|
||||
}
|
||||
}
|
||||
.top-left{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #f4f4f4;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
z-index: 999;
|
||||
left:-20rpx;
|
||||
}
|
||||
.top-right{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #f4f4f4;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
z-index: 999;
|
||||
right:-20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 29 KiB |
@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="uni-popup-dialog">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||
<slot>
|
||||
<text class="uni-dialog-content-text">{{content}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-else class="uni-dialog-content">
|
||||
<slot>
|
||||
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" @click="closeDialog">
|
||||
<text class="uni-dialog-button-text">{{closeText}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [popup],
|
||||
emits:['confirm','close'],
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cancelText:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
confirmText:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
focus: false,
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return this.confirmText || t("uni-popup.ok")
|
||||
},
|
||||
closeText() {
|
||||
return this.cancelText || t("uni-popup.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder")
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
this.val = val
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.disableMask()
|
||||
// this.popup.closeMask()
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.focus = true
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
if (this.mode === 'input'){
|
||||
this.$emit('confirm', this.val)
|
||||
}else{
|
||||
this.$emit('confirm')
|
||||
}
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
close(){
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 11px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins:[popup],
|
||||
emits:['select'],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
|
||||
name: 'sina'
|
||||
},
|
||||
// {
|
||||
// text: '百度',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||
// name: 'copy'
|
||||
// },
|
||||
// {
|
||||
// text: '其他',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||
// name: 'more'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
cancelText() {
|
||||
return t("uni-popup.cancel")
|
||||
},
|
||||
shareTitleText() {
|
||||
return this.title || t("uni-popup.shareTitle")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 11px;
|
||||
border-top-right-radius: 11px;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
@ -0,0 +1,26 @@
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
{
|
||||
"id": "uni-popup",
|
||||
"displayName": "uni-popup 弹出层",
|
||||
"version": "1.7.9",
|
||||
"description": " Popup 组件，提供常用的弹层",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"弹出层",
|
||||
"弹窗",
|
||||
"popup",
|
||||
"弹框"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-transition"
|
||||
],
|
||||
"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,128 @@
|
||||
// const defaultOption = {
|
||||
// duration: 300,
|
||||
// timingFunction: 'linear',
|
||||
// delay: 0,
|
||||
// transformOrigin: '50% 50% 0'
|
||||
// }
|
||||
// #ifdef APP-NVUE
|
||||
const nvueAnimation = uni.requireNativePlugin('animation')
|
||||
// #endif
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options
|
||||
this.animation = uni.createAnimation(options)
|
||||
this.currentStepAnimates = {}
|
||||
this.next = 0
|
||||
this.$ = _this
|
||||
|
||||
}
|
||||
|
||||
_nvuePushAnimates(type, args) {
|
||||
let aniObj = this.currentStepAnimates[this.next]
|
||||
let styles = {}
|
||||
if (!aniObj) {
|
||||
styles = {
|
||||
styles: {},
|
||||
config: {}
|
||||
}
|
||||
} else {
|
||||
styles = aniObj
|
||||
}
|
||||
if (animateTypes1.includes(type)) {
|
||||
if (!styles.styles.transform) {
|
||||
styles.styles.transform = ''
|
||||
}
|
||||
let unit = ''
|
||||
if(type === 'rotate'){
|
||||
unit = 'deg'
|
||||
}
|
||||
styles.styles.transform += `${type}(${args+unit}) `
|
||||
} else {
|
||||
styles.styles[type] = `${args}`
|
||||
}
|
||||
this.currentStepAnimates[this.next] = styles
|
||||
}
|
||||
_animateRun(styles = {}, config = {}) {
|
||||
let ref = this.$.$refs['ani'].ref
|
||||
if (!ref) return
|
||||
return new Promise((resolve, reject) => {
|
||||
nvueAnimation.transition(ref, {
|
||||
styles,
|
||||
...config
|
||||
}, res => {
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
_nvueNextAnimate(animates, step = 0, fn) {
|
||||
let obj = animates[step]
|
||||
if (obj) {
|
||||
let {
|
||||
styles,
|
||||
config
|
||||
} = obj
|
||||
this._animateRun(styles, config).then(() => {
|
||||
step += 1
|
||||
this._nvueNextAnimate(animates, step, fn)
|
||||
})
|
||||
} else {
|
||||
this.currentStepAnimates = {}
|
||||
typeof fn === 'function' && fn()
|
||||
this.isEnd = true
|
||||
}
|
||||
}
|
||||
|
||||
step(config = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation.step(config)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
|
||||
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
|
||||
this.next++
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
|
||||
run(fn) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$.animationData = this.animation.export()
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === 'function' && fn()
|
||||
}, this.$.durationTime)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.isEnd = false
|
||||
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
|
||||
if(!ref) return
|
||||
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
|
||||
this.next = 0
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
|
||||
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
|
||||
'translateZ'
|
||||
]
|
||||
const animateTypes2 = ['opacity', 'backgroundColor']
|
||||
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
|
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
|
||||
MPAnimation.prototype[type] = function(...args) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation[type](...args)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this._nvuePushAnimates(type, args)
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
})
|
||||
|
||||
export function createAnimation(option, _this) {
|
||||
if(!_this) return
|
||||
clearTimeout(_this.timer)
|
||||
return new MPAnimation(option, _this)
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-transition",
|
||||
"displayName": "uni-transition 过渡动画",
|
||||
"version": "1.3.1",
|
||||
"description": "元素的简单过渡动画",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"动画",
|
||||
"过渡",
|
||||
"过渡动画"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue