7.17 页面修改补充
Panzihang
parent
ac4a8aed1d
commit
4d4a5d1bac
1
main.js
1
main.js
|
|
@ -23,7 +23,6 @@ Vue.component('uni-pop', uniPop)
|
|||
Vue.component('liu-step-bar', liuStepBar)
|
||||
|
||||
import Vant from 'vant';
|
||||
console.log(Vant)
|
||||
import 'vant/lib/index.less';
|
||||
Vue.use(Vant);
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
{
|
||||
"name": "port-pad",
|
||||
"name": "tongtong-条件筛选",
|
||||
"version": "1.0.6",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "tongtong-条件筛选",
|
||||
"version": "1.0.6",
|
||||
"dependencies": {
|
||||
"vant": "^2.12.54"
|
||||
}
|
||||
|
|
@ -256,7 +259,7 @@
|
|||
},
|
||||
"node_modules/vant": {
|
||||
"version": "2.12.54",
|
||||
"resolved": "https://registry.npmmirror.com/vant/-/vant-2.12.54.tgz",
|
||||
"resolved": "https://registry.npmjs.org/vant/-/vant-2.12.54.tgz",
|
||||
"integrity": "sha512-t7DCiLxNosDrg0Jm5EY9p0A5cAMo5OadmizbYtPEc0ru+OJKEa3kcfxtKIK5on7ZPqoOkyYJt8e6BQ1VDMPsrg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "7.x",
|
||||
|
|
|
|||
|
|
@ -15,5 +15,8 @@
|
|||
"前端组件",
|
||||
"通用组件"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"vant": "^2.12.54"
|
||||
}
|
||||
}
|
||||
|
|
@ -102,6 +102,8 @@
|
|||
url: '/pages/index/instruct'
|
||||
})
|
||||
},
|
||||
input_json() {},
|
||||
select_json() {},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -23,31 +23,41 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 当前船的信息
|
||||
shipInfo: {},
|
||||
infoList: [{
|
||||
name: "杂项作业单",
|
||||
url: "mixWork"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: "系解缆",
|
||||
url: "untieCord"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: "供给",
|
||||
url: "supply"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: "指导员作业布置",
|
||||
url: "workAssign"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: "船舶装卸通知单",
|
||||
url: "notice"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: "质量意见征询",
|
||||
url: "opinion"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: "异常情况",
|
||||
url: "abnormal"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: "MAFI清单",
|
||||
url: "mafi"
|
||||
}],
|
||||
}
|
||||
],
|
||||
otherListh: [{
|
||||
name: "安全巡检",
|
||||
url: "patrol"
|
||||
|
|
@ -71,10 +81,18 @@
|
|||
],
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if ('params' in options) {
|
||||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||
this.shipInfo = JSON.parse(decodeURIComponent(options.params))
|
||||
}
|
||||
console.log(this.shipInfo)
|
||||
},
|
||||
methods: {
|
||||
toGo(url) {
|
||||
const params = encodeURIComponent(JSON.stringify(this.shipInfo));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/${url}`
|
||||
url: `/pages/shipWork/${url}?params=${params}`
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
</uni-data-select>
|
||||
</view>
|
||||
<view class="select">
|
||||
<uni-data-select v-model="shipValue" :localdata="shipList" @change="shipChange"
|
||||
placeholder="请选择船名航次">
|
||||
</uni-data-select>
|
||||
<superwei-combox :candidates="shipList" :isJSON="true" keyName="spmName" placeholder="请选择船名航次"
|
||||
v-model="shipName" @input="input_json" @select="select_json"></superwei-combox>
|
||||
</view>
|
||||
<van-button type="default" @click="search">搜索</van-button>
|
||||
</view>
|
||||
<view class="itemList">
|
||||
<view v-for="(item, index) in ltemList" :key="index" class="item" @click="toGo">
|
||||
<template v-if="total != 0">
|
||||
<view v-for="(item, index) in itemList" :key="index" class="item" @click="toGo(item)">
|
||||
<view class="title">
|
||||
<view class="name">
|
||||
{{item.spmName}}
|
||||
|
|
@ -70,15 +70,21 @@
|
|||
</view> -->
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="fitem" @click="download(item)">
|
||||
下载
|
||||
</view>
|
||||
<view class="fitem" @click="upload">
|
||||
上传
|
||||
<view class="footer">
|
||||
<van-button class="fitem" type="default"
|
||||
@click.stop="download(item)">下载</van-button>
|
||||
<van-button class="fitem" type="default"
|
||||
@click.stop="upload(item)">上传</van-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||
</view>
|
||||
<view class="pageBox" v-if="total != 0">
|
||||
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
||||
@change="changePage" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -96,9 +102,15 @@
|
|||
pamValue: "",
|
||||
pamList: [],
|
||||
// 船名航次
|
||||
shipName: "",
|
||||
shipValue: '',
|
||||
shipList: [],
|
||||
ltemList: [],
|
||||
shipInput: "",
|
||||
itemList: [],
|
||||
// 分页
|
||||
total: 0,
|
||||
pageSize: 4,
|
||||
current: 1,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -110,7 +122,6 @@
|
|||
},
|
||||
mounted() {
|
||||
this.getPam();
|
||||
this.getShip();
|
||||
},
|
||||
methods: {
|
||||
// 获取船的数据
|
||||
|
|
@ -125,11 +136,30 @@
|
|||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode === 200) {
|
||||
this.ltemList = res.data.data.records
|
||||
this.total = res.data.data.records.length
|
||||
const newArr = this.getMapping(res.data.data.records, this.pageSize)
|
||||
this.itemList = newArr[this.current - 1];
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 分页切割数组(数组，分割个数)
|
||||
getMapping(list, num) {
|
||||
let len = list.length
|
||||
let newList = []
|
||||
if (len) {
|
||||
var chunk = num
|
||||
for (var i = 0, j = len; i < j; i += chunk) {
|
||||
newList.push(list.slice(i, i + chunk))
|
||||
}
|
||||
}
|
||||
return newList
|
||||
},
|
||||
// 点击页面
|
||||
changePage(e) {
|
||||
this.current = e.current;
|
||||
this.initData()
|
||||
},
|
||||
// 获取港区下拉数据
|
||||
getPam() {
|
||||
uni.request({
|
||||
|
|
@ -155,7 +185,7 @@
|
|||
// 获取船名航次下拉数据
|
||||
getShip() {
|
||||
uni.request({
|
||||
url: this.$local + '/api/shipOperate/queryShipmentVoyageData?key=阳',
|
||||
url: this.$local + '/api/shipOperate/queryShipmentVoyageData?key=' + this.shipInput,
|
||||
header: {
|
||||
'Content-Type': 'application/json' //自定义请求头信息
|
||||
},
|
||||
|
|
@ -163,29 +193,38 @@
|
|||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode === 200) {
|
||||
// this.shipList = res.data.data
|
||||
let arr = res.data.data;
|
||||
arr.forEach((v, index) => {
|
||||
this.shipList.push({
|
||||
text: v.spmName,
|
||||
value: v.vvyId
|
||||
})
|
||||
})
|
||||
this.shipList = res.data.data
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 港区下拉
|
||||
pamChange(event) {},
|
||||
// 船名航次下拉
|
||||
shipChange(e) {},
|
||||
// 船名航次下拉模糊查询
|
||||
input_json(e) {
|
||||
this.shipInput = e;
|
||||
this.getShip();
|
||||
},
|
||||
// 船名航次下拉选项
|
||||
select_json(e) {
|
||||
this.shipValue = e.vvyId
|
||||
this.shipName = e.spmName
|
||||
},
|
||||
// 点击搜索
|
||||
search() {
|
||||
this.initData()
|
||||
},
|
||||
// 点击下载
|
||||
// 下载
|
||||
download(item) {
|
||||
let ids = [item.outVvyName, item.inVvyName]
|
||||
let ids = []
|
||||
if (item.inVvyId != null && item.outVvyId == null) {
|
||||
ids.push(item.inVvyId)
|
||||
} else if (item.outVvyId != null && item.inVvyId == null) {
|
||||
ids.push(item.outVvyId)
|
||||
} else if (item.inVvyId != null && item.outVvyId != null) {
|
||||
ids.push(item.inVvyId)
|
||||
ids.push(item.outVvyId)
|
||||
}
|
||||
console.log(ids)
|
||||
uni.request({
|
||||
url: this.$local + '/api/shipOperate/download?vvyIds=' + ids,
|
||||
|
|
@ -195,15 +234,207 @@
|
|||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode === 200) {}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击上传
|
||||
upload() {},
|
||||
toGo() {
|
||||
// 上传
|
||||
upload(item) {
|
||||
let workDataInfo = {
|
||||
"adviserLayoutReqList": [{
|
||||
"altId": "33333333333",
|
||||
"bthId": "2f166d975bdc58e6a461e3d01de11289",
|
||||
"createTime": "",
|
||||
"createUser": "",
|
||||
"endTime": "2023-07-14 10:00",
|
||||
"loaderType": "装货",
|
||||
"personNumber": 10,
|
||||
"pwcType": "123321",
|
||||
"remark": "12312312",
|
||||
"sparePart": 10,
|
||||
"startTime": "2023-07-13 12:00",
|
||||
"tenantId": "",
|
||||
"termcd": "",
|
||||
"updateTime": "",
|
||||
"updateUser": "",
|
||||
"valid": "",
|
||||
"vehicleSize": 20,
|
||||
"version": "",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299"
|
||||
}],
|
||||
"conditionReqList": [{
|
||||
"operationDate": "2023-07-14",
|
||||
"remark": "123123",
|
||||
"type": "2321312",
|
||||
"vacId": "333333",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299"
|
||||
}],
|
||||
"consultationReqList": [{
|
||||
"bthId": "2f166d975bdc58e6a461e3d01de11289",
|
||||
"handlingType": "装货",
|
||||
"operationDate": "2023-07-14",
|
||||
"spareNumber": "12",
|
||||
"vehiclesNumber": "22",
|
||||
"vqcId": "123132132131321",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299"
|
||||
}],
|
||||
"delAlIds": [],
|
||||
"delCsIds": [],
|
||||
"delCtIds": [],
|
||||
"delLnIds": [],
|
||||
"delMfIds": [],
|
||||
"delPmIds": [],
|
||||
"delSauIds": [],
|
||||
"delSiIds": [],
|
||||
"delSoiIds": [],
|
||||
"delSrmIds": [],
|
||||
"delSsIds": [],
|
||||
"delSwmIds": [],
|
||||
"inVvyId": "6cb63df0526f20ecbaa43795774a1299",
|
||||
"loadUnloadNoticeReqList": [{
|
||||
"sluId": "11111",
|
||||
"vbtId": "22222222",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299",
|
||||
"workDate": "2023-07-14"
|
||||
}],
|
||||
"outVvyId": "6cb63df0526f20ecbaa43795774a1299",
|
||||
"personMessageReqList": [{
|
||||
"bthId": "2f166d975bdc58e6a461e3d01de11289",
|
||||
"jobEndTime": "2023-7-14 10:00",
|
||||
"jobStartTime": "2023-7-13 12:00",
|
||||
"pmeId": "111",
|
||||
"remark": "123123123remark",
|
||||
"shipPerson": 0,
|
||||
"termcd": "2222",
|
||||
"valid": "33333",
|
||||
"vbtId": "44444",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299",
|
||||
"weatherType": "晴",
|
||||
"workSuite": 0
|
||||
}],
|
||||
"shipmentAttachUnmoorReqList": [{
|
||||
"attachTime": "2023-07-13 12:00",
|
||||
"bthId": "2f166d975bdc58e6a461e3d01de11289",
|
||||
"createTime": "",
|
||||
"createUser": "",
|
||||
"noProductBerthTime": "2023-07-13 12:00",
|
||||
"remark": "23123123",
|
||||
"sauId": "333333",
|
||||
"shiftingBerthTime": "2023-07-13 12:00",
|
||||
"shipDeadWeight": 30,
|
||||
"tenantId": "11122222",
|
||||
"termcd": "111222",
|
||||
"unmoorTime": "2023-07-13 12:00",
|
||||
"updateTime": "2023-07-13 12:00",
|
||||
"updateUser": "111111",
|
||||
"valid": "2222222",
|
||||
"version": 20,
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299"
|
||||
}],
|
||||
"shipmentMafiListReqList": [{
|
||||
"loadType": "卸货",
|
||||
"mafiBarcode": "000002",
|
||||
"pamId": "ac9b606e04a2bc71b876914a64ccb0b6",
|
||||
"size": 10,
|
||||
"smlId": "1111",
|
||||
"type": "FULL",
|
||||
"vtpId": "222222",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299",
|
||||
"workDate": "2023-07-14"
|
||||
}],
|
||||
"shipmentOtherInfoReqList": [{
|
||||
"auxRemark": "111111",
|
||||
"endTm": "2023-07-14 10:00:00",
|
||||
"genNum": 20,
|
||||
"remark": "12312321",
|
||||
"soiId": "222222",
|
||||
"startTm": "2023-07-13 12:00:00",
|
||||
"tecNum": 30,
|
||||
"volume": 20,
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299",
|
||||
"waitRemark": "123123",
|
||||
"weight": 40,
|
||||
"workRemark": "1231231"
|
||||
}],
|
||||
"shipmentRetallyMessageReqList": [{
|
||||
"remId": "123123",
|
||||
"retallyReqDTOS": [{
|
||||
"remId": "1231231312",
|
||||
"retallyDetailReqDTOS": [{
|
||||
"carType": "中型车",
|
||||
"goodsNumber": 10,
|
||||
"goodsVolume": 20,
|
||||
"goodsWeight": 30,
|
||||
"retallyEndTime": "2023-07-14 10:00:00",
|
||||
"retallyOrigin": "123123",
|
||||
"retallyStartTime": "2023-07-13 12:00:00",
|
||||
"retallyTerminus": "1231321",
|
||||
"reyId": "1231321",
|
||||
"rydId": "23123123"
|
||||
}],
|
||||
"retallyType": "",
|
||||
"reyId": ""
|
||||
}],
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299"
|
||||
}],
|
||||
"shipmentSafetyInspectionReqList": [{
|
||||
"importExport": "1231312",
|
||||
"remark": "123123",
|
||||
"spmId": "32131",
|
||||
"tradeType": "123213",
|
||||
"type": "123123",
|
||||
"uploadStatus": "未上传",
|
||||
"url": [],
|
||||
"vsiId": "123123",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299"
|
||||
}],
|
||||
"shipmentShipSupplyReqList": [{
|
||||
"sssId": "",
|
||||
"stopBerthage": "2f166d975bdc58e6a461e3d01de11289",
|
||||
"supplyAmount": 8,
|
||||
"supplyDate": "2023-07-14",
|
||||
"supplyType": "",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299",
|
||||
"vvyName": "511I"
|
||||
}],
|
||||
"shipmentWorkMessageReqList": [{
|
||||
"loadType": "自装",
|
||||
"pwcType": "123",
|
||||
"remark": "132311231",
|
||||
"vvyId": "6cb63df0526f20ecbaa43795774a1299",
|
||||
"wkmId": "123123",
|
||||
"workEndTime": "2023-07-13 10:00:00",
|
||||
"workStartTime": "2023-07-13 12:00:00",
|
||||
"workMessageDetailReqDTOS": [{
|
||||
"carType": "中型车",
|
||||
"goodsNumber": 3,
|
||||
"loadingType": "自装",
|
||||
"remark": "",
|
||||
"tenantId": "",
|
||||
"termcd": "",
|
||||
"valid": "",
|
||||
"wkdId": "",
|
||||
"wkmId": ""
|
||||
}],
|
||||
}],
|
||||
"vtpId": "123123"
|
||||
}
|
||||
uni.request({
|
||||
url: this.$local + '/api/shipOperate/upload',
|
||||
data: workDataInfo,
|
||||
header: {
|
||||
'Content-Type': 'application/json' //自定义请求头信息
|
||||
},
|
||||
method: 'POST', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
}
|
||||
})
|
||||
},
|
||||
toGo(item) {
|
||||
const shipInfo = item;
|
||||
const params = encodeURIComponent(JSON.stringify(shipInfo));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/documentList`
|
||||
url: `/pages/shipWork/documentList?params=${params}`
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -248,6 +479,11 @@
|
|||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
/deep/.o-empty {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 49%;
|
||||
margin-top: 15px;
|
||||
|
|
@ -265,7 +501,7 @@
|
|||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.nitem {
|
||||
|
|
@ -278,17 +514,13 @@
|
|||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
font-size: 21px;
|
||||
background-color: #f7f9fa;
|
||||
color: #8d8f8f;
|
||||
justify-content: space-around;
|
||||
|
||||
.fitem {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
margin: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -297,5 +529,9 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pageBox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -45,6 +45,8 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 当前船只信息
|
||||
shipInfo: {},
|
||||
tabsList: ["人员信息", "工班信息"],
|
||||
tabsType: 1, // 1是人员信息 2是工班信息
|
||||
tabsIndex: 0,
|
||||
|
|
@ -56,21 +58,24 @@
|
|||
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",
|
||||
|
|
@ -79,6 +84,13 @@
|
|||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if ('params' in options) {
|
||||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||
this.shipInfo = JSON.parse(decodeURIComponent(options.params))
|
||||
}
|
||||
console.log(this.shipInfo)
|
||||
},
|
||||
methods: {
|
||||
tabsClick(item, index) {
|
||||
this.tabsIndex = index;
|
||||
|
|
@ -89,10 +101,8 @@
|
|||
}
|
||||
},
|
||||
add(state) {
|
||||
const obj = {
|
||||
state: state,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
this.shipInfo["state"] = state;
|
||||
const params = encodeURIComponent(JSON.stringify(this.shipInfo));
|
||||
if (this.tabsType == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/peopleAdd?params=${params}`
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 2,
|
||||
value: 0,
|
||||
fcList: [{
|
||||
infoList: [{}, {}]
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
## 1.0.1（2023-06-13）
|
||||
- 优化部分代码
|
||||
- 新增 占位高度参数
|
||||
## 1.0.0（2022-10-04）
|
||||
初始化组件
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<view :class="['o-empty']" :style="Bg+Height">
|
||||
<image :style="ImgSize" :src="Img" mode="aspectFit"></image>
|
||||
<view class="text">{{text}}</view>
|
||||
<view class="slot" v-if="$slots.default"> <slot></slot> </view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'oEmpty',
|
||||
// #ifdef MP-WEIXIN
|
||||
options:{ virtualHost:true },
|
||||
// #endif
|
||||
props:{
|
||||
|
||||
// img：缺省图片,可选值 error network search，支持传入图片URL
|
||||
// imgSize：缺省图尺寸,
|
||||
// text：描述文字,
|
||||
// bg：背景色
|
||||
// height：组件占位高度
|
||||
|
||||
img:{
|
||||
type:String,
|
||||
default:'e'
|
||||
},
|
||||
imgSize:{
|
||||
type:[String,Number],
|
||||
default:'320'
|
||||
},
|
||||
text:{
|
||||
type:String,
|
||||
default:'暂无数据'
|
||||
},
|
||||
bg:{
|
||||
type:String,
|
||||
default:'#fff'
|
||||
},
|
||||
height:{
|
||||
type:String,
|
||||
default:'480rpx'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
Bg(){ return 'backgroundColor:' + this.bg + ';'},
|
||||
Height(){return 'minHeight:' + this.height },
|
||||
Img(){
|
||||
if(['error','network','search'].includes(this.img)) return require('@/uni_modules/o-empty/static/' + this.img + '.svg');
|
||||
else if (this.img.endsWith('.jpg') || this.img.endsWith('.png') || this.img.endsWith('.svg')) return this.img;
|
||||
else return require('@/uni_modules/o-empty/static/empty.svg')
|
||||
},
|
||||
ImgSize(){
|
||||
return 'width:' + this.imgSize + 'rpx; height:' + this.imgSize + 'rpx;'
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.o-empty{
|
||||
// min-height:350rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 64rpx 0!important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.center{text-align: center;}
|
||||
.text{
|
||||
color:#969798;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.slot{
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
{
|
||||
"id": "o-empty",
|
||||
"displayName": "o-empty 暂无数据 缺省页 空白数据 占位提示组件",
|
||||
"version": "1.0.1",
|
||||
"description": "简单好用的暂无数据、Empty、缺省页、空白数据、占位提示组件, 内置通用无数据、错误、网络、搜索四类图标，支持传入图片URL",
|
||||
"keywords": [
|
||||
"Empty",
|
||||
"缺省页",
|
||||
"暂无数据",
|
||||
"空白数据",
|
||||
"占位提示"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.4.9"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "65166445"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<view class="h100">
|
||||
<view class="title">基本用法</view>
|
||||
<o-empty />
|
||||
<view class="title">自定义背景色</view>
|
||||
<o-empty img="error" bg="#f6f7f8" text="内容整理中.." />
|
||||
<view class="title">自定义大小</view>
|
||||
<o-empty img="search" text="无搜索记录" imgSize="200" />
|
||||
<view class="title">自定义插槽内容</view>
|
||||
<o-empty img="network" text="网络中断" >
|
||||
<button type="primary" size="mini">自定义按钮</button>
|
||||
</o-empty>
|
||||
<view class="title">自定义图片</view>
|
||||
<!-- #ifndef MP -->
|
||||
<o-empty img="../../static/icon.png" imgSize="180" text="自定义图片" height="50vh" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<o-empty img="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" imgSize="180" text="小程序需绝对路径" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.h100{
|
||||
height:100vh;
|
||||
}
|
||||
.title{
|
||||
padding: 20rpx 0 10rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
# o-empty 暂无数据 缺省页 空白数据 占位提示组件
|
||||
|
||||
## 描述
|
||||
Empty 简单易用 暂无数据 缺省页 空白数据 占位提示组件
|
||||
|
||||
## 使用方法
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<view class="title">基本用法</view>
|
||||
<o-empty />
|
||||
<view class="title">自定义背景色</view>
|
||||
<o-empty img="error" bg="#f6f7f8" text="内容整理中.." />
|
||||
<view class="title">自定义大小</view>
|
||||
<o-empty img="search" text="无搜索记录" imgSize="200" />
|
||||
<view class="title">自定义插槽内容</view>
|
||||
<o-empty img="network" text="网络中断" >
|
||||
<button type="primary" size="mini">自定义按钮</button>
|
||||
</o-empty>
|
||||
<view class="title">自定义图片</view>
|
||||
<!-- #ifndef MP -->
|
||||
<o-empty img="../../static/icon.png" imgSize="180" text="自定义图片" height="50vh" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<o-empty img="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg" imgSize="180" text="小程序需绝对路径" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.title{
|
||||
padding: 20rpx 0 10rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
#### oEmpty Props
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| --------- | ------ | ------- | ----------------------------------- | ----------------------------------- |
|
||||
| img | String | - | network、search、error | 缺省图片，支持传入图片URL（支持jpg、png、svg格式） |
|
||||
| imgSize | String | 320rpx | | 缺省图片大小，单位rpx |
|
||||
| text | String | 暂无数据 | | 缺省图下方描述文字 |
|
||||
| bg | String | #fff | transparent | 组件背景，style模式 |
|
||||
| height | String | 480rpx | rpx,px,em,rem,vh均可 | 占位高度，style模式，支持calc()公式，高度值单位为必填 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 152 133">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="0.65" y1="0.8" x2="0.65" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#4d5a5a" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#4d5a5a" stop-opacity="0.12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="b" x1="0.65" y1="0.8" x2="0.65" xlink:href="#a"/>
|
||||
<linearGradient id="c" x1="0.65" y1="0.95" x2="0.65" xlink:href="#a"/>
|
||||
<linearGradient id="d" x1="0.65" y1="1.2" x2="0.65" xlink:href="#b"/>
|
||||
<linearGradient id="e" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#f2f3f5"/><stop offset="1" stop-color="#dcdee0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="f" x1="0.95" y1="0.48" x2="0.055" y2="0.51" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#eaedf1"/><stop offset="1" stop-color="#dcdee0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="i" x1="0" y1="0.45" x2="1" y2="0.54" xlink:href="#f"/>
|
||||
</defs>
|
||||
|
||||
<g transform="translate(-155 -150)">
|
||||
<path d="M36,131V53H16V73H2v58Z" transform="translate(153 144)" fill="url(#a)"/>
|
||||
<path d="M123,15h22V29h9v77H123Z" transform="translate(153 144)" fill="url(#b)"/>
|
||||
<path d="M87,6c3,0,7,3,8,6a8.016,8.016,0,0,1-1,16H80a7,7,0,0,1-8-6c0-4,3-7,6-7A8.963,8.963,0,0,1,87,6Z" transform="translate(153 144)" fill="url(#c)" />
|
||||
<path d="M19,23c2,0,3,1,4,3a4.033,4.033,0,0,1,4,4,4.08,4.08,0,0,1-4,4H15c-2,0-3-2-3-4a3.193,3.193,0,0,1,3-3A4.3,4.3,0,0,1,19,23Z" transform="translate(153 144)" fill="url(#c)" />
|
||||
<g transform="translate(189 194)">
|
||||
<g transform="translate(8)">
|
||||
<rect width="36" height="53" rx="2" transform="translate(38 13)" fill="#ebedf0" opacity="0.6"/>
|
||||
<rect width="64" height="66" rx="2" fill="url(#e)"/>
|
||||
<rect width="52" height="55" rx="1" transform="translate(6 6)" fill="#fff"/>
|
||||
<g transform="translate(15 17)"><rect width="34" height="6" rx="1" fill="url(#f)"/>
|
||||
<path d="M0,14H34v6H0Z" fill="url(#f)"/><rect width="34" height="6" rx="1" transform="translate(0 28)" fill="url(#f)"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect width="88" height="28" rx="1" transform="translate(0 61)" fill="url(#i)"/>
|
||||
<rect width="30" height="6" rx="1" transform="translate(29 72)" fill="#f7f8fa"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="0.65" y1="0.8" x2="0.65" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#4d5a5a" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#4d5a5a" stop-opacity="0.12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="b" x1="0.65" y1="0.8" x2="0.65" xlink:href="#a"/>
|
||||
<linearGradient id="c" x1="0.65" y1="0.95" x2="0.65" xlink:href="#a"/>
|
||||
<radialGradient id="e" cx="0.5" cy="0.5" r="2.97" gradientTransform="translate(0.58 0.72) rotate(180) scale(0.16 0.33)" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#ebedf0"/>
|
||||
<stop offset="1" stop-color="#f2f3f5" stop-opacity="0.302"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="f" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#4d5a5a" stop-opacity="0.12"/>
|
||||
<stop offset="1" stop-color="#4d5a5a" stop-opacity="0.2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-47 -211)">
|
||||
<g transform="translate(45 205)" opacity="0.8">
|
||||
<path d="M36,131V53H16V73H2v58Z" fill="url(#a)"/>
|
||||
<path d="M123,15h22V29h9v77H123Z" fill="url(#b)"/>
|
||||
</g>
|
||||
<path d="M87,6c3,0,7,3,8,6a8.016,8.016,0,0,1-1,16H80a7,7,0,0,1-8-6c0-4,3-7,6-7A8.963,8.963,0,0,1,87,6Z" transform="translate(45 205)" fill="url(#c)"/>
|
||||
<path d="M19,23c2,0,3,1,4,3a4.3,4.3,0,0,1,4,4,4,4,0,0,1-4,3v1H16V33l-1,1c-2,0-3-2-3-4a3.193,3.193,0,0,1,3-3A4.3,4.3,0,0,1,19,23Z" transform="translate(45 205)" fill="url(#c)"/>
|
||||
<ellipse cx="46" cy="8" rx="46" ry="8" transform="translate(79 337)" opacity="0.8" fill="url(#e)"/>
|
||||
<path d="M59,60,80,81l21-21h3l9,9v3L92,93l21,21v3l-9,9h-3L80,105,59,126H56l-9-9v-3L68,93,47,72V69l9-9Z" transform="translate(45 205)" fill="url(#f)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="0.65" y1="0.8" x2="0.65" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#4d5a5a" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#4d5a5a" stop-opacity="0.12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="b" x1="0.645" y1="0.931" x2="0.64" xlink:href="#a"/>
|
||||
<radialGradient id="c" cx="0.5" cy="0" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#ebedf0"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="d" x1="0.5" x2="0.5" y2="0.84" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0" stop-color="#4d5a5a" stop-opacity="0.15"/>
|
||||
<stop offset="1" stop-color="#4d5a5a" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="e" x1="0.5" y1="-0.3" x2="0.5" y2="1" xlink:href="#a"/>
|
||||
</defs>
|
||||
<g transform="translate(-41 -391)"><path d="M36,131V53H16V73H2v58Z" transform="translate(39 376)" fill="url(#a)"/>
|
||||
<path d="M123,15h22V29h9v77H123Z" transform="translate(39 376)" fill="url(#b)"/>
|
||||
<path d="M0,139H152v21H0Z" transform="translate(41 376)" opacity="0.6" fill="url(#c)"/>
|
||||
<path d="M80,54a7,7,0,0,1,3,13V94l-2,2H79a2,2,0,0,1-2-2V67a7,7,0,0,1,3-13Z" transform="translate(39 376)" fill="url(#d)"/>
|
||||
<path d="M63.918,53.979a3.5,3.5,0,0,1-.009-4.95,30.556,30.556,0,0,0,0-43.059A3.5,3.5,0,0,1,68.867,1.03a37.568,37.568,0,0,1,0,52.941,3.5,3.5,0,0,1-4.949.009ZM10.909,53.97a37.57,37.57,0,0,1,0-52.941,3.5,3.5,0,1,1,4.958,4.941,30.558,30.558,0,0,0,0,43.059,3.5,3.5,0,1,1-4.958,4.941ZM52.833,42.891A3.5,3.5,0,0,1,53,37.944a15.417,15.417,0,0,0,4.894-10.606c0-3.729-1.491-6.877-4.978-10.363a3.5,3.5,0,1,1,4.949-4.95c4.793,4.793,7.025,9.71,7.025,15.476a22.46,22.46,0,0,1-7.109,15.556,3.5,3.5,0,0,1-4.946-.165Zm-30.92.084A22.513,22.513,0,0,1,15.889,27.5,22.406,22.406,0,0,1,21.81,12.134a3.5,3.5,0,1,1,5.157,4.732,15.454,15.454,0,0,0-4.079,10.606,15.53,15.53,0,0,0,3.975,10.553,3.5,3.5,0,0,1-4.95,4.95Z" transform="translate(78.612 408.5)" fill="url(#e)"/>
|
||||
<g transform="translate(70 481)"><rect width="98" height="34" rx="2" fill="#ebedf0"/>
|
||||
<rect width="80" height="18" rx="1.1" transform="translate(9 8)" fill="#fff"/>
|
||||
<rect width="18" height="6" rx="1.1" transform="translate(15 12)" fill="#ebedf0"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,63 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 160">
|
||||
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="100%" x2="50%" id="van-empty-10-9">
|
||||
<stop stop-color="#EEE" offset="0%"/>
|
||||
<stop stop-color="#D8D8D8" offset="100%"/>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="50%" y2="50%" id="van-empty-10-10">
|
||||
<stop stop-color="#F2F3F5" offset="0%"/>
|
||||
<stop stop-color="#DCDEE0" offset="100%"/>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" x2="50%" y2="100%" id="van-empty-10-11">
|
||||
<stop stop-color="#F2F3F5" offset="0%"/>
|
||||
<stop stop-color="#DCDEE0" offset="100%"/>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" x2="50%" y2="100%" id="van-empty-10-12">
|
||||
<stop stop-color="#FFF" offset="0%"/>
|
||||
<stop stop-color="#F7F8FA" offset="100%"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<defs>
|
||||
<linearGradient id="van-empty-10-a" x1="64%" y1="100%" x2="64%">
|
||||
<stop offset="0" stop-color="#4d5a5a" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#4d5a5a" stop-opacity="0.12"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z" fill="url(#van-empty-10-a)"/>
|
||||
<path d="M123 15h22v14h9v77h-31V15z" fill="url(#van-empty-10-a)"/>
|
||||
</g>
|
||||
|
||||
<defs>
|
||||
<linearGradient id="van-empty-10-b" x1="64%" y1="97%" x2="64%" y2="0%">
|
||||
<stop stop-color="#4d5a5a" offset="0%" stop-opacity="0.02"/>
|
||||
<stop stop-color="#4d5a5a" offset="100%" stop-opacity="0.15"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z" fill="url(#van-empty-10-b)"/>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z" fill="url(#van-empty-10-b)"/>
|
||||
</g>
|
||||
|
||||
<defs>
|
||||
<radialGradient id="van-empty-10-d" cx="50%" cy="54%" fx="50%" fy="54%" r="297%" gradientTransform="matrix(-.16 0 0 -.33 .58 .72)">
|
||||
<stop stop-color="#EBEDF0" offset="0%"/>
|
||||
<stop stop-color="#F2F3F5" offset="100%" stop-opacity="0.3"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<ellipse fill="url(#van-empty-10-d)" opacity=".8" cx="80" cy="140" rx="46" ry="8"></ellipse>
|
||||
|
||||
<g transform="rotate(-45 113 -4)" fill="none">
|
||||
<rect fill="url(#van-empty-10-9)" x="24" y="52.8" width="5.8" height="19" rx="1"></rect>
|
||||
<rect fill="url(#van-empty-10-10)" x="22.1" y="67.3" width="9.9" height="28" rx="1"></rect>
|
||||
<circle stroke="url(#van-empty-10-11)" stroke-width="8" cx="27" cy="27" r="27"></circle>
|
||||
<circle fill="url(#van-empty-10-12)" cx="27" cy="27" r="16"></circle>
|
||||
<path d="M37 7c-8 0-15 5-16 12" stroke="url(#van-empty-10-11)" stroke-width="3" opacity=".5" stroke-linecap="round" transform="rotate(45 29 13)"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in New Issue