You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
337 lines
8.5 KiB
Vue
337 lines
8.5 KiB
Vue
<template>
|
|
<loading-html v-if="loadingShow" />
|
|
<view class="content" v-else>
|
|
<view class="tab">
|
|
<view class="tab-top">
|
|
<uni-search-bar class="search" placeholder="请输入搜索内容" radius="40" cancelButton="none" @confirm="search">
|
|
</uni-search-bar>
|
|
<view class="add-btn" @click="goAdd"> 新增 </view>
|
|
</view>
|
|
<v-tabs v-model="current" fontSize="30rpx" color="#666" activeColor="#666" lineColor="#3c9cff" :bold="false"
|
|
lineHeight=" 6rpx" :tabs="tabs" @change="changeTab"></v-tabs>
|
|
</view>
|
|
<view class="swipe-action-box">
|
|
<view class="swipe-action__content" :class="{'edit-box': inEdit}" v-for="i in 10">
|
|
<view class="edit-icon" v-if="inEdit">
|
|
<!-- <text class="iconfont icon-checkbox"></text>-->
|
|
<text class="iconfont icon-fuxuankuangxuanzhong active"></text>
|
|
</view>
|
|
<view class="swipe-action__content__top">
|
|
<view class="left" @longpress="longTap('123132')">
|
|
<text class="iconfont icon-yundanhao"></text>
|
|
<text>主提单号： 2132123</text>
|
|
</view>
|
|
<view class="right entered" v-if="i < 1"> 已录入 </view>
|
|
<view class="right exported" v-else-if="i%6 == 0"> 已导出 </view>
|
|
<view class="right has-been-sent" v-else-if="i%5 == 0"> 已直发 </view>
|
|
<view class="right sending" v-else-if="i%4 == 0"> 发送中 </view>
|
|
<view class="right send-complete" v-else-if="i%3 == 0"> 发送成功 </view>
|
|
<view class="right send-fail" v-else-if="i%2 == 0"> 发送失败 </view>
|
|
<view class="right send-timeout" v-else-if="i%1 == 0"> 发送超时 </view>
|
|
</view>
|
|
<view class="swipe-action__content__center">
|
|
<view class="area">
|
|
<view class="from">
|
|
<text class="top">起运港</text>
|
|
<text class="bottom">CDBS</text>
|
|
</view>
|
|
<text class="iconfont icon-daoda icon"></text>
|
|
<view class="to">
|
|
<text class="top">卸货港</text>
|
|
<text class="bottom">CDBS</text>
|
|
</view>
|
|
</view>
|
|
<view class="line-box">
|
|
<view class="line">
|
|
<text class="left">
|
|
<text class="iconfont icon-dailishang-dailishangguanli"></text>
|
|
<text>船代：</text>
|
|
</text>
|
|
<text class="right">中国运通中国</text>
|
|
</view>
|
|
<view class="line">
|
|
<text class="left">
|
|
<text class="iconfont icon-a-2yubeichuanmingxiugai"></text>
|
|
<text>船名：</text>
|
|
</text>
|
|
<text class="right">ASDcxASDcx</text>
|
|
</view>
|
|
<view class="line">
|
|
<text class="left">
|
|
<text class="iconfont icon-lishihangci"></text>
|
|
<text>航次：</text>
|
|
</text>
|
|
<text class="right">123s123</text>
|
|
</view>
|
|
<view class="line">
|
|
<text class="left">
|
|
<text class="iconfont icon-shiyongwendang"></text>
|
|
<text>分提单号：</text>
|
|
</text>
|
|
<text class="right">1231654654654564646546</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="swipe-action__content__bottom">
|
|
<view class="declare-log" @click="goDeclareLog">
|
|
申报日志
|
|
</view>
|
|
<view class="declare-time">
|
|
<text class="iconfont icon-shijian"></text>
|
|
<text class="left">接受申报：</text>
|
|
<text class="right">2022-11-23 12:00:12</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom" direction="horizontal"
|
|
:popMenu="true" @trigger="trigger" @fabClick="fabClick" />
|
|
|
|
<view class="edit-alert-bg" v-if="show" @click="openAlert"></view>
|
|
<view class="edit-alert" v-if="show">
|
|
<view class="edit-tit">
|
|
编辑信息
|
|
<text class="iconfont icon-guanbi icon" @click="openAlert"></text>
|
|
</view>
|
|
<view class="radio-box">
|
|
<label class="radio">
|
|
<radio value="r1" checked="true" color="#2c96fb" />选中
|
|
</label>
|
|
<label class="radio">
|
|
<radio value="r2" color="#2c96fb" />未选中
|
|
</label>
|
|
<label class="radio">
|
|
<radio value="r3" color="#2c96fb" />未选中
|
|
</label>
|
|
</view>
|
|
<view class="input-box">
|
|
<textarea cols="30" rows="10"></textarea>
|
|
</view>
|
|
<view class="btn">
|
|
<button>关闭</button>
|
|
<button>确定发送</button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniTab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue'
|
|
import uniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'
|
|
import vTabs from '@/components/v-tabs/v-tabs.vue'
|
|
|
|
import loadingHtml from './components/skeleton/index.vue'
|
|
|
|
export default {
|
|
components: {
|
|
uniTab,
|
|
uniSearchBar,
|
|
vTabs,
|
|
loadingHtml,
|
|
},
|
|
data() {
|
|
return {
|
|
loadingShow: true,
|
|
current: '',
|
|
tabs: ['全部', '已录入', '已直发', '发送失败', '发送超时'],
|
|
tab: [{
|
|
name: '全部',
|
|
}, {
|
|
name: '已录入',
|
|
}, {
|
|
name: '已直发',
|
|
}, {
|
|
name: '发送失败',
|
|
}, {
|
|
name: '发送超时',
|
|
}],
|
|
options4: [{
|
|
text: '禁用状态',
|
|
disabled: true,
|
|
options: [{
|
|
text: '置顶',
|
|
style: {
|
|
backgroundColor: '#3c9cff',
|
|
}
|
|
},
|
|
{
|
|
text: '取消',
|
|
style: {
|
|
backgroundColor: '#f9ae3d',
|
|
}
|
|
},
|
|
],
|
|
}, {
|
|
text: '正常状态',
|
|
disabled: false,
|
|
options: [{
|
|
text: '置顶',
|
|
style: {
|
|
backgroundColor: '#3c9cff',
|
|
}
|
|
},
|
|
{
|
|
text: '取消',
|
|
style: {
|
|
backgroundColor: '#f9ae3d',
|
|
}
|
|
},
|
|
],
|
|
}, {
|
|
text: '自动关闭',
|
|
disabled: false,
|
|
options: [{
|
|
text: '置顶',
|
|
style: {
|
|
backgroundColor: '#3c9cff',
|
|
}
|
|
},
|
|
{
|
|
text: '取消',
|
|
style: {
|
|
backgroundColor: '#f9ae3d',
|
|
}
|
|
},
|
|
],
|
|
}],
|
|
pattern: {
|
|
color: '#333',
|
|
backgroundColor: '#FFFFFF',
|
|
selectedColor: '#999',
|
|
buttonColor: '#2c96fb'
|
|
},
|
|
content: [{
|
|
iconPath: '../../../../static/image/tabBar/send-active.png',
|
|
selectedIconPath: '../../../../static/image/tabBar/send-active.png',
|
|
text: '直发',
|
|
active: false
|
|
},
|
|
{
|
|
iconPath: '../../../../static/image/tabBar/remove-active.png',
|
|
selectedIconPath: '../../../../static/image/tabBar/remove-active.png',
|
|
text: '删除',
|
|
active: false
|
|
},
|
|
{
|
|
iconPath: '../../../../static/image/tabBar/copy-active.png',
|
|
selectedIconPath: '../../../../static/image/tabBar/copy-active.png',
|
|
text: '复制',
|
|
active: false
|
|
}
|
|
],
|
|
inEdit: false,
|
|
show: false,
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
this.loadingShow = false;
|
|
}, 1500)
|
|
},
|
|
methods: {
|
|
trigger(e) {
|
|
if (e.index == 0) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `激活状态：${e.item.active};选中项：${e.item.text}`,
|
|
success(res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
} else if (e.index == 1) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `激活状态：${e.item.active};选中项：${e.item.text}`,
|
|
success(res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
this.openAlert();
|
|
}
|
|
},
|
|
fabClick() {
|
|
this.inEdit = !this.inEdit;
|
|
let tip = this.inEdit ? '进入编辑模式' : '退出编辑模式'
|
|
uni.showToast({
|
|
title: tip,
|
|
icon: 'none'
|
|
});
|
|
},
|
|
openAlert() {
|
|
this.show = !this.show;
|
|
},
|
|
// 跳转新增
|
|
goAdd() {
|
|
uni.navigateTo({
|
|
url: '/pages/manifest/newManifest/newManifest'
|
|
})
|
|
},
|
|
// 查看申报日志
|
|
goDeclareLog() {
|
|
uni.navigateTo({
|
|
url: '/pages/manifest/declarationLog/declarationLog'
|
|
})
|
|
},
|
|
longTap(val) {
|
|
console.log('== 长按 ==', val);
|
|
uni.setClipboardData({
|
|
data: val, //要被复制的内容
|
|
success: () => { //复制成功的回调函数
|
|
uni.showToast({ //提示
|
|
title: '主提单号复制成功',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
},
|
|
search() {
|
|
console.log('====search=====')
|
|
},
|
|
changeTab(index) {
|
|
console.log('==== 切换标签 =====', index)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@import url("./manifest.less");
|
|
|
|
.search-result {
|
|
padding-top: 10px;
|
|
padding-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.search-result-text {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.example-body {
|
|
/* #ifndef APP-NVUE */
|
|
display: block;
|
|
/* #endif */
|
|
padding: 0px;
|
|
}
|
|
|
|
.uni-mt-10 {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|