From c3e507747c33e05c088a0cfa02a18462f89abc8c Mon Sep 17 00:00:00 2001 From: Panzihang <819652404@qq.com> Date: Tue, 21 Nov 2023 17:43:02 +0800 Subject: [PATCH] 11.21 --- components/head-info/head-info.vue | 2 +- .../lx-progress-bar/lx-progress-bar.vue | 225 ++++ components/lx-progress-bar/props.js | 84 ++ pages/discharge/index.vue | 10 +- pages/discharge/instruct.vue | 1011 ++++++++------- pages/index/index.vue | 14 +- pages/index/instruct.vue | 1148 +++++++++-------- pages/quality/details.vue | 41 +- pages/quality/edit.vue | 10 +- pages/quality/index.vue | 4 +- pages/quality/zsEdit.vue | 72 +- pages/shipWork/abnormalAdd.vue | 4 +- pages/shipWork/documentList.vue | 2 +- pages/shipWork/index.vue | 27 +- pages/shipWork/mafiAdd.vue | 6 +- pages/shipWork/noticeAdd.vue | 4 +- pages/shipWork/opinionAdd.vue | 4 +- pages/shipWork/patrol.vue | 58 +- pages/shipWork/patrolAdd.vue | 293 +++-- pages/shipWork/peopleAdd.vue | 4 +- pages/shipWork/shiftAdd.vue | 4 +- pages/shipWork/supplyAdd.vue | 4 +- pages/shipWork/untieAdd.vue | 4 +- pages/shipWork/workAssignAdd.vue | 4 +- static/images/zs2.jpg | Bin 66658 -> 30647 bytes static/images/zs2.png | Bin 0 -> 162805 bytes .../custom-waterfalls-flow/changelog.md | 17 + .../custom-waterfalls-flow.vue | 323 +++++ .../custom-waterfalls-flow/package.json | 80 ++ uni_modules/custom-waterfalls-flow/readme.md | 445 +++++++ uni_modules/helang-waterfall/changelog.md | 22 + .../components/waterfall/waterfall-item.vue | 98 ++ .../components/waterfall/waterfall-list.vue | 241 ++++ .../mock-data/waterfall-list.js | 39 + uni_modules/helang-waterfall/package.json | 76 ++ .../pages/waterfall/waterfall.vue | 247 ++++ uni_modules/helang-waterfall/readme.md | 1 + .../helang-waterfall/static/waterfall/0.jpg | Bin 0 -> 22088 bytes .../helang-waterfall/static/waterfall/1.jpg | Bin 0 -> 21980 bytes .../helang-waterfall/static/waterfall/2.jpg | Bin 0 -> 21912 bytes .../static/waterfall/empty.png | Bin 0 -> 17165 bytes .../static/waterfall/fail.png | Bin 0 -> 18545 bytes uni_modules/jp-signature.rar | Bin 32427 -> 0 bytes uni_modules/q-previewImage/changelog.md | 24 + .../q-previewImage/q-previewImage.vue | 121 ++ uni_modules/q-previewImage/package.json | 81 ++ uni_modules/q-previewImage/readme.md | 244 ++++ 47 files changed, 3885 insertions(+), 1213 deletions(-) create mode 100644 components/lx-progress-bar/lx-progress-bar.vue create mode 100644 components/lx-progress-bar/props.js create mode 100644 static/images/zs2.png create mode 100644 uni_modules/custom-waterfalls-flow/changelog.md create mode 100644 uni_modules/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue create mode 100644 uni_modules/custom-waterfalls-flow/package.json create mode 100644 uni_modules/custom-waterfalls-flow/readme.md create mode 100644 uni_modules/helang-waterfall/changelog.md create mode 100644 uni_modules/helang-waterfall/components/waterfall/waterfall-item.vue create mode 100644 uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue create mode 100644 uni_modules/helang-waterfall/mock-data/waterfall-list.js create mode 100644 uni_modules/helang-waterfall/package.json create mode 100644 uni_modules/helang-waterfall/pages/waterfall/waterfall.vue create mode 100644 uni_modules/helang-waterfall/readme.md create mode 100644 uni_modules/helang-waterfall/static/waterfall/0.jpg create mode 100644 uni_modules/helang-waterfall/static/waterfall/1.jpg create mode 100644 uni_modules/helang-waterfall/static/waterfall/2.jpg create mode 100644 uni_modules/helang-waterfall/static/waterfall/empty.png create mode 100644 uni_modules/helang-waterfall/static/waterfall/fail.png delete mode 100644 uni_modules/jp-signature.rar create mode 100644 uni_modules/q-previewImage/changelog.md create mode 100644 uni_modules/q-previewImage/components/q-previewImage/q-previewImage.vue create mode 100644 uni_modules/q-previewImage/package.json create mode 100644 uni_modules/q-previewImage/readme.md diff --git a/components/head-info/head-info.vue b/components/head-info/head-info.vue index 8c7e1ec..431383a 100644 --- a/components/head-info/head-info.vue +++ b/components/head-info/head-info.vue @@ -572,7 +572,7 @@ .borContent { width: 100%; - height: 120px; + height: 140px; overflow: scroll; display: flex; flex-direction: column; diff --git a/components/lx-progress-bar/lx-progress-bar.vue b/components/lx-progress-bar/lx-progress-bar.vue new file mode 100644 index 0000000..2065c19 --- /dev/null +++ b/components/lx-progress-bar/lx-progress-bar.vue @@ -0,0 +1,225 @@ + + + + + diff --git a/components/lx-progress-bar/props.js b/components/lx-progress-bar/props.js new file mode 100644 index 0000000..adcdb11 --- /dev/null +++ b/components/lx-progress-bar/props.js @@ -0,0 +1,84 @@ +export default { + props: { + // 标题 + title: { + type: String, + required: true + }, + // 标题样式 + titleStyle: { + type: String, + }, + // 总数,计算的分母 + total: { + type: Number, + required: true + }, + // 第一个值 + firstValue: { + type: Number, + required: true + }, + // 第二个值 + secondValue: { + type: Number + }, + // 进度条背景颜色 + backColor: { + type: String, + default: '#f2f2f2' + }, + // 进度条高度 + barHeight: { + type: String + }, + // 进度条圆角 + barRadius: { + type: String + }, + // 进度条颜色 + contentColor: { + type: String, + default: '#4cd964' + }, + // 进度条2颜色 + contentColor2: { + type: String, + default: '#f0ad4e' + }, + // 进度条最小长度 + minWidth: { + type: String + }, + // 文字大小 + textSize: { + type: String, + default: '16px' + }, + // 文字颜色 + textColor: { + type: String, + default: '#333333' + }, + // 文字内显、外显、不显，可选值：inside/outside/none + textPosition: { + type: String, + default: 'inside' + }, + // 展示百分比或值 + percentum: { + type: Boolean, + default: false + }, + // 百分比精确到小数点后几位 + precision: { + type: [String, Number], + default: 2 + }, + // 是否选择动画加载 + animation: { + type: Boolean, + default: false + } + } +} \ No newline at end of file diff --git a/pages/discharge/index.vue b/pages/discharge/index.vue index d8c21ac..3354f68 100644 --- a/pages/discharge/index.vue +++ b/pages/discharge/index.vue @@ -151,6 +151,12 @@ // 选择船输入框 shipInput(e) { this.shipValue = e + if (e == "") { + this.vvyId = "" + this.vvyShip = "" + this.shipId = "" + this.shipName = "" + } this.getShip() }, // 获取船舶 @@ -254,7 +260,7 @@ line-height: 35px; padding-left: 10px; margin-right: 15px; - margin-top: 8px; + margin-top: 10px; } .btn { @@ -265,7 +271,7 @@ color: #fff; background-color: #0067CF; margin-right: 10px; - margin-top: 8px; + margin-top: 10px; } } diff --git a/pages/discharge/instruct.vue b/pages/discharge/instruct.vue index 03236e0..f3bdef4 100644 --- a/pages/discharge/instruct.vue +++ b/pages/discharge/instruct.vue @@ -75,113 +75,116 @@ - @@ -247,13 +250,156 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -892,9 +911,8 @@ placeTabs: 0, // 分页 - // total: 0, - // pageSize: 4, - // current: 1, + pageSize: 10, + current: 1, // 配载图港口 pzPotList: [], @@ -920,7 +938,6 @@ }, onLoad(options) { this.shipInfo = JSON.parse(decodeURIComponent(options.params)).shipInfo - console.log(this.shipInfo) this.title = `${this.shipInfo.spmIdDesc} / ${this.shipInfo.vvyName}` this.loginObj = uni.getStorageSync('loginObj') if (this.tabsValue == 0) { @@ -938,6 +955,9 @@ HeadInfo, place, }, + onReachBottom() { + console.log(this.itemList) + }, methods: { // 点击tabs changeTabs(e) { @@ -950,6 +970,7 @@ this.tabsValue = e.value this.zTjActive = -1 this.shipDeck = "" + this.current = 1 if (e.value == 1 || e.value == 2) { this.loadOtherOrder() } else if (e.value == 0) { @@ -1027,24 +1048,27 @@ let fsum = v.branchSentCount + v.branchNotSentCount this.$set(v, "fsum", fsum) }) - console.log(this.zTjList) } }) }, // 获取总指令列表 loadSumOrder() { uni.request({ - url: `${this.$local}/api/shipInstructions/page?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&shipDeck=${this.shipDeck}`, - // &size=${this.pageSize}¤t=${this.current} + url: `${this.$local}/api/shipInstructions/page?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&shipDeck=${this.shipDeck}&size=${this.pageSize}¤t=${this.current}`, header: { 'Content-Type': 'application/json', //自定义请求头信息 'Authorization': `Bearer ${this.loginObj.access_token}` }, method: 'GET', //请求方式，必须为大写 success: (res) => { - this.itemList = res.data.data.records - this.total = res.data.data.total + this.itemList.push(...res.data.data.records) + if (res.data.data.records.length == 10) { + this.current++ + this.loadSumOrder() + } this.itemList.forEach((v, index) => { + v.image = '../../static/images/theme/car1.png' + v.index = index // if (v.branchPlanStatus == 0) { this.zzlLwpIdList.push(v.lwpId) // } @@ -1061,16 +1085,22 @@ this.sendValue = 1 } uni.request({ - url: `${this.$local}/api/shipInstructions/pageCommandForBranch?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&sendStatus=${this.sendValue}&shipDeck=${this.shipDeck}&teamFlag=${teamFlag}`, // &size=${this.pageSize}¤t=${this.current} + url: `${this.$local}/api/shipInstructions/pageCommandForBranch?vvyId=${this.shipInfo.vvyId}&brdId=${this.brdId}&mnfBl=${this.mnfBl}&potId=${this.potId}&bvmId=${this.bvmId}&sendStatus=${this.sendValue}&shipDeck=${this.shipDeck}&teamFlag=${teamFlag}&size=${this.pageSize}¤t=${this.current}`, header: { 'Content-Type': 'application/json', //自定义请求头信息 'Authorization': `Bearer ${this.loginObj.access_token}` }, method: 'GET', //请求方式，必须为大写 success: (res) => { - this.itemList = res.data.data.records - this.total = res.data.data.total + console.log(res) + this.itemList.push(...res.data.data.records) + if (res.data.data.records.length == 10) { + this.current++ + this.loadOtherOrder() + } this.itemList.forEach((v, index) => { + v.image = '../../static/images/theme/car1.png' + v.index = index this.getBottomInfo(v.lwpId, index) }) } @@ -1482,7 +1512,6 @@ // 配载图相关 // 获取配载图港口及对应颜色 getPotList() { - this.shipInfo.vvyId = 'f4303b2c8b6d715f4007f961f2498b10' uni.request({ url: `${this.$local}/api/stowage/portList?vvyId=${this.shipInfo.vvyId}`, header: { @@ -1496,7 +1525,7 @@ this.pzPotList.forEach(v => { this.$set(v, 'background', `background:${v.potColor}`) }) - console.log(this.pzPotList) + // console.log(this.pzPotList, '配载图顶部数据, 颜色色块') } } }) @@ -1511,9 +1540,14 @@ }, method: 'GET', //请求方式，必须为大写 success: (res) => { - console.log(res) + if (res.data.status == "200") { this.imgInfo = res.data.data + // 默认船舱画布高度最小为162 暂定10000 防止不画 + this.imgInfo.cabinInfoList.forEach(item => { + // + item.maxHeight = 10000 + }) } } }) @@ -1530,11 +1564,59 @@ success: (res) => { if (res.data.status == "200") { this.goodsInfo = res.data.data - console.log(this.goodsInfo) + this.goodsInfo.forEach((item, index) => { + item.stowageList.forEach(ele => { + let vertexPositionArr = ele.vertexPosition.split(',') + let y = vertexPositionArr[1] * 35 + let bigNum = (vertexPositionArr[1] + ele.blockLength) * 35 + if (bigNum < 162) { + bigNum = 162 + } + this.$set(this.imgInfo.cabinInfoList, index, { + ...this.imgInfo.cabinInfoList[index], + maxHeight: bigNum + }) + }) + this.initCanvas(item, index) + }) } } }) }, + initCanvas(item, index) { + let canvas = 'mycanvas' + index + const ctx = uni.createCanvasContext(canvas, this) + let sum = item.cabinNo + item.stowageList.forEach(ele => { + // 宽为850 每个仓位为20 850/20 + let widthDw = (42 / sum).toFixed(2) + let vertexPositionArr = ele.vertexPosition.split(',') + let x = vertexPositionArr[0] * widthDw + let y = vertexPositionArr[1] * 35 + // let bigNum = (vertexPositionArr[1] + ele.blockLength) * 35 + // console.log(this.imgInfo.cabinInfoList[index]); + // if (this.imgInfo.cabinInfoList[index].maxHeight < bigNum) { + // this.$set(this.imgInfo.cabinInfoList, index, { + // ...this.imgInfo.cabinInfoList[index], + // maxHeight: bigNum + // }) + // } + console.log(this.imgInfo.cabinInfoList[index].maxHeight); + ctx.setFillStyle(ele.potColor); + // 每层加一个 + ctx.fillRect(x, y, widthDw * ele.blockWidth - 3, ele.blockLength * 35 - 3); + ctx.fillStyle = '#fff' + ctx.font = 'bold 18px Arial' + ctx.setFontSize(20); + let stowageNo = '' + if (ele.stowageNo) { + stowageNo = ',' + ele.stowageNo + } + ctx.fillText(ele.potName + ',' + ele.amount + stowageNo, x, y + 22, widthDw * ele + .blockWidth, ele.blockLength * 35) + }) + ctx.draw(); + }, // 场位图相关 // 点击车道 toGoPlace() { @@ -1553,6 +1635,10 @@ color: #108ee9; } + page { + overflow: hidden; + } + .content2 { background-color: #F6F7F9; position: relative; @@ -1590,6 +1676,7 @@ .main { height: calc(100vh - 134px); + overflow: hidden; } .askBox { @@ -1853,232 +1940,241 @@ } .itemBox { - height: 465px; + height: 535px; overflow: scroll; + padding-bottom: 60px; } .itemList { display: flex; flex-wrap: wrap; justify-content: space-between; + align-items: flex-start; padding: 0 12px; .exp { - // width: 100%; - width: 49.5%; + width: 100%; margin-bottom: 15px; background: #FFFFFF; border-radius: 8px; padding: 12px; padding-right: 0; position: relative; + } - .rowHead { - /deep/uni-checkbox .uni-checkbox-input { - width: 16px !important; - height: 16px !important; + /deep/.waterfalls-flow { + width: 100%; + } + + /deep/.waterfalls-flow-column { + margin-left: 2%; + } + + .rowHead { + /deep/uni-checkbox .uni-checkbox-input { + width: 16px !important; + height: 16px !important; + } + } + + .row { + display: flex; + padding: 5px 0px; + + .title { + display: flex; + font-size: 16px; + color: #23262E; + font-weight: bold; + + .titleImg { + width: 18px; + height: 18px; + margin-right: 5px; + margin-top: 2px; } } - .row { + .schedule { + padding: 5px 8px; + background: #F7F7F7; + margin-left: 8px; display: flex; - padding: 5px 0; + + .text { + font-size: 12px; + color: #999999; + } + + .progressBox { + width: 50px; + margin-top: 5px; + margin: 5px 8px; + } + } + + .planStatus { + width: 68px; + height: 26px; + border-radius: 13px 0 0 13px; + position: absolute; + right: 0; + top: 16px; + text-align: center; + line-height: 26px; + + .text { + font-size: 16px; + font-weight: bold; + } + } + + .planStatus0 { + background: #F1F8FF; + + .text { + color: #0067CF; + } + } + + .planStatus1 { + background: #F7F7F7; + + .text { + color: #666; + } + } + + .planStatus3 { + background: #E8FFF7; + + .text { + color: #04B578; + } + } + + .planStatus5 { + background: #FFF5F0; + + .text { + color: #fc4f00; + } + } + + + .rowInfo { + display: flex; + flex-direction: column; + font-size: 14px; + width: 48%; + margin-top: 10px; + border-right: 1px solid #eee; + gap: 12px; + margin-left: 10px; + + text:first-child { + color: #999999; + } + + text:last-child { + color: #23262E; + } + } + + .rowInfo:last-child { + border: none; + } + } + + .xfBtn { + display: flex; + justify-content: flex-end; + padding: 10px 0; + border-top: 1px solid rgba(0, 0, 0, .1); + margin-top: 10px; + + .btn { + padding: 8px 12px; + text-align: center; + color: #fff; + background: #0067CF; + border-radius: 4px; + font-size: 12px; + margin-right: 28px; + } + + .stopbtn { + border: 1px solid #FC4F00; + color: #FC4F00; + background-color: #fff; + } + } + + .expand { + position: absolute; + left: 47%; + bottom: -10px; + font-size: 12px; + color: #23262E; + background: #FFFFFF; + text-align: center; + line-height: 14px; + border: 1px solid #EEEEEE; + border-radius: 13px; + padding: 6px; + } + + .details { + padding-right: 16px; + margin-top: 16px; + + .itemDetails { + background: rgba(236, 242, 249, .7); + + .detailsBox { + padding: 16px; + border-bottom: 1px dashed #D3DCE6; + } .title { + width: 100%; display: flex; - font-size: 16px; - color: #23262E; - font-weight: bold; + justify-content: space-between; - .titleImg { - width: 18px; - height: 18px; - margin-right: 5px; + text { + font-size: 16px; + color: #23262E; margin-top: 2px; } - } - .schedule { - padding: 5px 8px; - background: #F7F7F7; - margin-left: 8px; - display: flex; - - .text { - font-size: 12px; - color: #999999; - } - - .progressBox { - width: 50px; - margin-top: 5px; - margin: 5px 8px; - } - } - - .planStatus { - width: 68px; - height: 26px; - border-radius: 13px 0 0 13px; - position: absolute; - right: 0; - top: 16px; - text-align: center; - line-height: 26px; - - .text { - font-size: 16px; - font-weight: bold; - } - } - - .planStatus0 { - background: #F1F8FF; - - .text { + button { + wdith: 50px; + height: 25px; + text-align: center; + line-height: 25px; color: #0067CF; + background: #FFFFFF; + border: 1px solid #EEEEEE; + border-radius: 4px; + font-size: 14px; + margin: 0; } } - .planStatus1 { - background: #F7F7F7; - - .text { - color: #666; - } - } - - .planStatus3 { - background: #E8FFF7; - - .text { - color: #04B578; - } - } - - .planStatus5 { - background: #FFF5F0; - - .text { - color: #fc4f00; - } - } - - - .rowInfo { + .info { display: flex; - flex-direction: column; - font-size: 14px; - width: 48%; - margin-top: 10px; - border-right: 1px solid #eee; - gap: 12px; - margin-left: 10px; + flex-wrap: wrap; - text:first-child { - color: #999999; - } + .cell { + margin-right: 15px; + margin-top: 10px; - text:last-child { - color: #23262E; - } - } + text:first-child { + color: #999999; + } - .rowInfo:last-child { - border: none; - } - } - - .xfBtn { - display: flex; - justify-content: flex-end; - padding: 10px 0; - border-top: 1px solid rgba(0, 0, 0, .1); - margin-top: 10px; - - .btn { - padding: 8px 12px; - text-align: center; - color: #fff; - background: #0067CF; - border-radius: 4px; - font-size: 12px; - margin-right: 28px; - } - - .stopbtn { - border: 1px solid #FC4F00; - color: #FC4F00; - background-color: #fff; - } - } - - .expand { - position: absolute; - left: 47%; - bottom: -10px; - font-size: 12px; - color: #23262E; - background: #FFFFFF; - text-align: center; - line-height: 14px; - border: 1px solid #EEEEEE; - border-radius: 13px; - padding: 6px; - } - - .details { - padding-right: 16px; - margin-top: 16px; - - .itemDetails { - background: rgba(236, 242, 249, .7); - - .detailsBox { - padding: 16px; - border-bottom: 1px dashed #D3DCE6; - } - - .title { - width: 100%; - display: flex; - justify-content: space-between; - - text { - font-size: 16px; + text:last-child { color: #23262E; - margin-top: 2px; - } - - button { - wdith: 50px; - height: 25px; - text-align: center; - line-height: 25px; - color: #0067CF; - background: #FFFFFF; - border: 1px solid #EEEEEE; - border-radius: 4px; - font-size: 14px; - margin: 0; - } - } - - .info { - display: flex; - flex-wrap: wrap; - - .cell { - margin-right: 15px; - margin-top: 10px; - - text:first-child { - color: #999999; - } - - text:last-child { - color: #23262E; - } } } } @@ -2145,6 +2241,7 @@ .imgTable { margin-top: 20px; + padding: 0 20px; .title { font-size: 20px; @@ -2158,36 +2255,43 @@ .imgLi { display: flex; - position: relative; - - .shipImg { - width: 100%; - height: 171px; - } .maskBox { - width: calc(100% - 200px); - height: 150px; - background-color: transparent; - display: flex; - position: absolute; - top: 11px; - left: 60px; + width: 1060px; + height: 191px; + margin: 0 auto; + background: url('@/static/images/ship-split.svg'); + background-repeat: no-repeat; + background-size: contain; + position: relative; + + .line { + position: absolute; + width: 850px; + height: 85%; + top: 15px; + left: 60px; + display: flex; + overflow-y: auto; + + .testLine { + flex: 1; + border-left: 1px solid #999; + } + + .testLine:first-child { + border: none; + } + + .mycanvas { + position: absolute; + top: 0; + left: 0; + width: 850px; + } - .testLine { - flex: 1; - height: 100%; - border-left: 1px solid #999; } - .testLine:first-child { - border-left: none; - } - - .testInfo { - height: 30px; - background-color: #0067CF; - } } .heightBox { @@ -2198,36 +2302,34 @@ } .imgSize { - width: 28px; - height: 28px; + width: 60px; position: absolute; } .leftTopImg { transform: rotate(90deg); - top: 10px; - left: 8px; + top: 5px; + left: -5px; } .imgSize2 { - width: 100px; - height: 30px; + width: 130px; position: absolute; } .leftBotImg { - bottom: 10px; - left: 8px; + bottom: 2px; + left: -1px; } .topImg { - top: -5px; + top: 0; left: 40%; } .botImg { transform: rotate(180deg); - bottom: -6px; + bottom: 0; left: 40%; } } diff --git a/pages/quality/details.vue b/pages/quality/details.vue index c4a4ab6..c580ea1 100644 --- a/pages/quality/details.vue +++ b/pages/quality/details.vue @@ -29,8 +29,8 @@ 板车照片 - + + + + diff --git a/uni_modules/q-previewImage/package.json b/uni_modules/q-previewImage/package.json new file mode 100644 index 0000000..3550c3f --- /dev/null +++ b/uni_modules/q-previewImage/package.json @@ -0,0 +1,81 @@ +{ + "id": "q-previewImage", + "displayName": "图片预览、多图左右滑动、图片放大、支持覆盖原生组件、原生导航栏、tabbar", + "version": "1.1.1", + "description": "最简洁的模拟图片预览,支持长按事件，多图左右滑动，大图上下滑动查看，支持图片放大，支持覆盖原生组件/原生导航栏/tabbar 支持vue2/vue3/app/小程序/h5", + "keywords": [ + "图片预览" +], + "repository": "", + "engines": { + "HBuilderX": "^3.4.14" + }, + "dcloudext": { + "type": "component-vue", + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "无", + "data": "无", + "permissions": "无" + }, + "npmurl": "" + }, + "uni_modules": { + "dependencies": [], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "Vue": { + "vue2": "y", + "vue3": "y" + }, + "App": { + "app-vue": "y", + "app-nvue": "n" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "u", + "微信浏览器(Android)": "u", + "QQ浏览器(Android)": "u" + }, + "H5-pc": { + "Chrome": "u", + "IE": "u", + "Edge": "u", + "Firefox": "u", + "Safari": "u" + }, + "小程序": { + "微信": "y", + "阿里": "u", + "百度": "u", + "字节跳动": "u", + "QQ": "u", + "钉钉": "u", + "快手": "u", + "飞书": "u", + "京东": "u" + }, + "快应用": { + "华为": "u", + "联盟": "u" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/q-previewImage/readme.md b/uni_modules/q-previewImage/readme.md new file mode 100644 index 0000000..76c9508 --- /dev/null +++ b/uni_modules/q-previewImage/readme.md @@ -0,0 +1,244 @@ +# 最简洁的模拟图片预览,支持长按事件，多图左右滑动，大图上下滑动查看，支持图片放大，支持覆盖原生组件/原生导航栏/tabbar 支持vue2/vue3/app/小程序/h5 + + - 为了解决项目中因一些特殊原因无法使用uni.previewImage，例如App.onShow或者页面的oShow中写了方法。 + - 如果用uni.previewImage，每次预览图片都会进到onShow的方法里 + - 可以基本实现官方的预览图片功能，但是体验不如uni.previewImage() + - 如没有特殊原因，还是推荐官方的uni.previewImage() + +## 安装指引 + +##1. 在插件市场打开本插件页面，在右侧点击`使用 HBuilderX 导入插件`，选择要导入的项目点击确定 + +##2. 使用方法 vue2写法 + +``` + + + + + +``` + +##3. vue3 setup写法 + +``` + + + + + +``` + +##4. 项目示例 (一般返回的数据图片是以逗号或特殊字符分割的字符串，点击时就需要传两个参数，一个是图片数组，一个是当前图片的index) +## 注意q-previewImage不要写在循环体中，imgs其实就是用来存放当前图片的数组，每次点击每次赋值就行 + +``` + + + + +``` + + +## 如果插件对您有一点帮助，请给个五星好评，感谢支持 + + +## 如有问题，请加qq 965969604 \ No newline at end of file