mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-06 23:36:43 +08:00
Compare commits
3 Commits
release/【2
...
feature/FM
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c6144902dd | ||
|
|
b236bbc14f | ||
|
|
fc3f261800 |
@@ -90,3 +90,11 @@ export function queryOutPosters(data) {
|
||||
})
|
||||
}
|
||||
|
||||
//大单榜海报列表接口
|
||||
export function queryOutPostersBig(data) {
|
||||
return request({
|
||||
url: getUrl(`/sale/makePosters/queryOutPostersBig`, 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,200 +1,307 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div v-if="posterList.length !== 0">
|
||||
<van-grid :column-num="3" :gutter="5">
|
||||
<van-grid-item v-for="(item, index) in posterList" :key="index" @click="previewImg(item, index)">
|
||||
<van-image class="fill" :src="item.posterUrl" />
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
<div class="pageWrapper">
|
||||
<van-pagination class="bottom-btn" v-model="pageNum" :page-count="totalPage" @change="pageChange" />
|
||||
<div class="good-start-scheme bg-white">
|
||||
<div v-if="isShow == true">
|
||||
<div class="flex justify-content-s pt10 pb15">
|
||||
<div class="fs12 bntTab">
|
||||
<span :class="[active == 'appnt' ? 'tab' : 'unTab']" @click="tabChange('appnt')">预收</span>
|
||||
<span :class="[active == 'sign' ? 'tab' : 'unTab']" @click="tabChange('sign')">承保</span>
|
||||
</div>
|
||||
<div>
|
||||
<div @click="timePopup" class="fs12 red h30 mt5 mr15">
|
||||
{{ titleTime }}
|
||||
<img src="@/assets/images/u79.png" alt class="ml5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-image-preview id="preview" v-model="isPrevShow" :images="images" :start-position="startPosition" @change="onPageChange" />
|
||||
<div class="flex justify-content-s bottom-btn bottom15 border-color" v-show="isPrevShow">
|
||||
<van-button square type="default" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button>
|
||||
<van-button square type="danger" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button>
|
||||
<div v-if="pics.length">
|
||||
<van-grid :column-num="3">
|
||||
<van-grid-item v-for="(pic, i) in pics" :key="i">
|
||||
<van-image height="200" :src="pic.posterUrl" @click="prevImg(pic, i)" />
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
<van-image-preview id="preview" v-model="isPrevShow" :images="images" :start-position="startPosition" @change="onPageChange" />
|
||||
<!-- <van-button class="share-btn" v-show="isPrevShow" type="danger" block @click="shareImg">分享</van-button> -->
|
||||
<div class="flex justify-content-s bottom-btn bottom15 border-color" v-show="isPrevShow">
|
||||
<van-button square type="default" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button>
|
||||
<van-button square type="danger" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="posterList.length === 0" class="text-center">
|
||||
<!-- {{isShow}} {{pics.length}} -->
|
||||
<div v-if="isShow == false || pics.length == '0'" class="text-center height100vh">
|
||||
<img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
|
||||
<div class="fs17 c-gray-dark mt40">暂无数据</div>
|
||||
<div class="fs17 c-gray-dark mt40" v-if="isShow == false">您暂无使用权限。</div>
|
||||
<div class="fs17 c-gray-dark mt40" v-if="isShow == true && pics.length == '0'">暂无数据</div>
|
||||
</div>
|
||||
<!-- 筛选年月日 -->
|
||||
<van-popup v-model="dateShow" position="bottom">
|
||||
<van-datetime-picker v-model="currentDate" type="date" title="选择日期" :min-date="minDate" :max-date="maxDate" @cancel="handleCancel" @confirm="handleEndDateConfirm"/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Sticky, Grid, GridItem, Pagination, ImagePreview, List, Image } from 'vant'
|
||||
import { queryBigPosters } from '@/api/ebiz/poster/poster'
|
||||
// import config from '@/config'
|
||||
import Vue from 'vue'
|
||||
import { Grid, GridItem, Image, ImagePreview, Pagination } from 'vant'
|
||||
import { queryOutPostersBig, getBranchByUser} from '@/api/ebiz/goodStart'
|
||||
import { getAgentInfo} from '@/api/ebiz/my/my.js'
|
||||
import utils from '@/assets/js/utils/date-utils'
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.use(ImagePreview)
|
||||
export default {
|
||||
name: 'posterList',
|
||||
components: {
|
||||
[Sticky.name]: Sticky,
|
||||
[Grid.name]: Grid,
|
||||
[GridItem.name]: GridItem,
|
||||
[Pagination.name]: Pagination,
|
||||
[List.name]: List,
|
||||
[Image.name]: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// posterType: 'hb',
|
||||
srcUrl: '@/images/u10199.png',
|
||||
pageNum: 1,
|
||||
pageSize: 9,
|
||||
posterList: [], // 贺报列表
|
||||
realImgUrls: [],
|
||||
// index: 0,
|
||||
totalPage: 0,
|
||||
isPrevShow: false,
|
||||
startPosition: 0,
|
||||
currentPage: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
images() {
|
||||
const picArr = []
|
||||
for (let pic of this.posterList) {
|
||||
picArr.push(pic.posterUrl)
|
||||
}
|
||||
return picArr
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPostList()
|
||||
},
|
||||
methods: {
|
||||
onPageChange(index) {
|
||||
this.currentPage = index
|
||||
// 全局注册
|
||||
Vue.use(ImagePreview)
|
||||
export default {
|
||||
components: {
|
||||
[Grid.name]: Grid,
|
||||
[GridItem.name]: GridItem,
|
||||
[Image.name]: Image,
|
||||
[Pagination.name]: Pagination
|
||||
},
|
||||
// 贺报列表查询
|
||||
async getPostList() {
|
||||
let param = {
|
||||
// posterInfoDTO: {
|
||||
// posterType: this.posterType
|
||||
// },
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
data() {
|
||||
return {
|
||||
dateShow: false,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
titleTime:'', //筛选时间
|
||||
isFromService: '',
|
||||
isPrevShow: false,
|
||||
currentPage: 0,
|
||||
pics: [],
|
||||
startPosition: 0,
|
||||
branchType:'', //以N打头的是内勤 其他是外勤,0: 外勤,1: 内勤
|
||||
isShow:false, //是否有权限查看
|
||||
manageLv:null,
|
||||
active:'appnt'
|
||||
}
|
||||
this.$toast.loading({
|
||||
message: '加载中...',
|
||||
forbidClick: true,
|
||||
loadingType: 'spinner'
|
||||
})
|
||||
let res = await queryBigPosters(param)
|
||||
if (res.result == 0) {
|
||||
this.realImgUrls.splice(0)
|
||||
this.totalPage = res.content.pages
|
||||
this.posterList = res.content.list
|
||||
for (let item of this.posterList) {
|
||||
// let narrowUrl = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterNarrowUrl}`).replace(/\+/g, '%2B')
|
||||
// let url = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterUrl}`).replace(/\+/g, '%2B')
|
||||
// item.narrowUrl = narrowUrl
|
||||
this.realImgUrls.push(item.posterUrl)
|
||||
},
|
||||
computed: {
|
||||
images() {
|
||||
const picArr = []
|
||||
for (let pic of this.pics) {
|
||||
picArr.push(pic.posterUrl)
|
||||
}
|
||||
} else {
|
||||
this.$toast(res.resultMessage)
|
||||
return picArr
|
||||
}
|
||||
},
|
||||
previewImg(item, index) {
|
||||
// this.isPrevShow = true
|
||||
// ImagePreview({
|
||||
// images: this.realImgUrls,
|
||||
// startPosition: index
|
||||
// })
|
||||
this.isPrevShow = true
|
||||
this.startPosition = index
|
||||
created() {
|
||||
},
|
||||
pageChange(pageNum) {
|
||||
this.pageNum = pageNum
|
||||
this.getPostList()
|
||||
mounted() {
|
||||
this.minDate = new Date(this.getPrevDate(30))
|
||||
this.titleTime = utils.formatDate(new Date(), 'yyyy-MM-dd')
|
||||
this.getAgentInfoFunc()
|
||||
this.getBranchByUserFunc()
|
||||
},
|
||||
shareImg() {
|
||||
console.log(this.images[this.currentPage])
|
||||
// eslint-disable-next-line no-undef
|
||||
EWebBridge.webCallAppInJs('bridge', {
|
||||
flag: 'share',
|
||||
extra: {
|
||||
shareType: '1',
|
||||
img: this.images[this.currentPage]
|
||||
methods: {
|
||||
getPrevDate(numDays) {
|
||||
var today = new Date();
|
||||
today.setDate(today.getDate() - numDays);
|
||||
return today.toLocaleDateString();
|
||||
},
|
||||
//选择当月时间
|
||||
seceltCurrentMonth() {
|
||||
this.titleTime = utils.formatDate(new Date(), 'yyyy-MM-dd')
|
||||
this.queryOutPostersBig()
|
||||
},
|
||||
timePopup() {
|
||||
this.dateShow = true
|
||||
},
|
||||
handleCancel() {
|
||||
this.dateShow = false
|
||||
},
|
||||
//tab按钮切换
|
||||
tabChange(active) {
|
||||
this.active = active
|
||||
this.queryOutPostersBig()
|
||||
},
|
||||
//点击筛选年月日--点击确认
|
||||
handleEndDateConfirm(e) {
|
||||
this.dateShow = false
|
||||
this.titleTime = utils.formatDate(e, 'yyyy-MM-dd')
|
||||
this.queryOutPostersBig()
|
||||
},
|
||||
// 获取代理人信息,区分内外勤
|
||||
async getAgentInfoFunc() {
|
||||
const res = await getAgentInfo({})
|
||||
if (res.result == 0) {
|
||||
// res.branchType 以N打头的是内勤 其他是外勤,0: 外勤,1: 内勤
|
||||
this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
|
||||
} else {
|
||||
return this.$toast(res.resultMessage)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 原生下载图片的方法
|
||||
downLoadImagesFunc() {
|
||||
if (this.images[this.currentPage]) {
|
||||
},
|
||||
//获取当前人机构
|
||||
async getBranchByUserFunc(){
|
||||
let resData = await getBranchByUser({})
|
||||
// 内勤一、二、三 级暂无使用权限
|
||||
this.manageLv = resData.content.level?Number(resData.content.level.substr(1, 1)):9
|
||||
if(this.manageLv == 4 || this.manageLv == 5 ||this.manageLv == 6 ||this.manageLv == 7 ||this.manageLv == 8 ||this.manageLv == 9){
|
||||
this.isShow = true //是否有权限查看
|
||||
this.queryOutPostersBig()
|
||||
}
|
||||
},
|
||||
prevChange(index) {
|
||||
this.startPosition = index
|
||||
},
|
||||
interceptAppBtn() {
|
||||
setTimeout(() => {
|
||||
// eslint-disable-next-line no-undef
|
||||
EWebBridge.webCallAppInJs('webview_left_button', {
|
||||
intercept: '1'
|
||||
})
|
||||
}, 100)
|
||||
window.appCallBack = this.appCallBack
|
||||
},
|
||||
appCallBack(data) {
|
||||
if (data.trigger == 'left_button_click') {
|
||||
if (!this.isPrevShow) {
|
||||
if (this.isFromService) {
|
||||
this.$jump({
|
||||
flag: 'service'
|
||||
})
|
||||
} else {
|
||||
this.$jump({
|
||||
flag: 'h5',
|
||||
extra: {
|
||||
title: '开门红专区',
|
||||
forbidSwipeBack: 1,
|
||||
url: location.origin + `/#/goodStart/prefecture`
|
||||
},
|
||||
routerInfo: {
|
||||
path: `/goodStart/prefecture/prefecture`,
|
||||
type: '1'
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.isPrevShow = false
|
||||
}
|
||||
}
|
||||
},
|
||||
onPageChange(page) {
|
||||
this.currentPage = page
|
||||
},
|
||||
async queryOutPostersBig() {
|
||||
const param = {
|
||||
appntType: this.active,
|
||||
appntMonth: this.titleTime
|
||||
}
|
||||
const result = await queryOutPostersBig(param)
|
||||
if (result.result === '0') {
|
||||
this.pics = result.content.list
|
||||
} else {
|
||||
this.$toast(result.resultMessage)
|
||||
}
|
||||
},
|
||||
prevImg(pic, i) {
|
||||
this.isPrevShow = true
|
||||
this.startPosition = i
|
||||
},
|
||||
shareImg() {
|
||||
console.log(this.images[this.currentPage])
|
||||
// eslint-disable-next-line no-undef
|
||||
EWebBridge.webCallAppInJs('download', {
|
||||
name: '开门红方案.png',
|
||||
url: this.images[this.currentPage]
|
||||
}).then(() => {
|
||||
console.log('下载完成')
|
||||
}).catch(() => {
|
||||
this.$toast.fail('图片下载失败,请重新下载!')
|
||||
EWebBridge.webCallAppInJs('bridge', {
|
||||
flag: 'share',
|
||||
extra: {
|
||||
shareType: '1',
|
||||
img: this.images[this.currentPage]
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$toast.fail('图片下载失败,请重新下载!')
|
||||
},
|
||||
// 原生下载图片的方法
|
||||
downLoadImagesFunc() {
|
||||
if (this.images[this.currentPage]) {
|
||||
// eslint-disable-next-line no-undef
|
||||
EWebBridge.webCallAppInJs('download', {
|
||||
name: '开门红方案.png',
|
||||
url: this.images[this.currentPage]
|
||||
})
|
||||
.then(() => {
|
||||
console.log('下载完成')
|
||||
})
|
||||
.catch(() => {
|
||||
this.$toast.fail('图片下载失败,请重新下载!')
|
||||
})
|
||||
} else {
|
||||
this.$toast.fail('图片下载失败,请重新下载!')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .van-grid-item {
|
||||
height: 30vh;
|
||||
}
|
||||
.height100vh{
|
||||
height: 100vh;
|
||||
}
|
||||
.good-start-scheme {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/deep/ .fill {
|
||||
height: 100%;
|
||||
}
|
||||
/deep/ .van-grid-item__content {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.share-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.post-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
}
|
||||
/deep/ .van-image-preview__image {
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.post {
|
||||
width: 28vw;
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
margin: 5px;
|
||||
}
|
||||
/deep/ .van-pagination__item {
|
||||
color: #ff0033;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
/deep/ .van-pagination__item--active {
|
||||
background-color: #ff0033;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .van-list__loading,
|
||||
/deep/ .van-list__finished-text {
|
||||
width: 100%;
|
||||
}
|
||||
#pagination {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/deep/ .van-pagination__item {
|
||||
color: #ff4040;
|
||||
}
|
||||
.border-color {
|
||||
z-index: 9999;
|
||||
border: 2px solid;
|
||||
border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2;
|
||||
}
|
||||
/deep/ .van-button--danger {
|
||||
background: linear-gradient(to right, #f26e43, #ac0209) !important; /*设置按钮为渐变颜色*/
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/deep/.van-pagination__item:active,
|
||||
/deep/.van-pagination__item--active {
|
||||
background-color: #ff4040;
|
||||
color: #fff;
|
||||
}
|
||||
.border-color {
|
||||
z-index: 9999;
|
||||
border: 2px solid;
|
||||
border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2;
|
||||
}
|
||||
/deep/ .van-button--danger {
|
||||
background: linear-gradient(to right, #f26e43, #ac0209) !important; /*设置按钮为渐变颜色*/
|
||||
border: none !important;
|
||||
}
|
||||
// 顶部tab按钮
|
||||
.bntTab {
|
||||
text-align: center;
|
||||
.tab {
|
||||
background: red;
|
||||
color: #fff;
|
||||
border-radius: 14px;
|
||||
width: 64px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.unTab {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #c1c1c1;
|
||||
border-radius: 14px;
|
||||
width: 64px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user