Compare commits

...

3 Commits

Author SHA1 Message Date
liu.xiaofeng@ebiz-digits.com
c6144902dd 大单榜保留数据从10天改为30天 2024-01-15 09:17:52 +08:00
liu.xiaofeng@ebiz-digits.com
b236bbc14f 大单帮日期选择范围修改 2024-01-10 17:59:23 +08:00
liu.xiaofeng@ebiz-digits.com
fc3f261800 大单帮修改以及接口对接 2024-01-10 15:41:01 +08:00
2 changed files with 279 additions and 164 deletions

View File

@@ -90,3 +90,11 @@ export function queryOutPosters(data) {
})
}
//大单榜海报列表接口
export function queryOutPostersBig(data) {
return request({
url: getUrl(`/sale/makePosters/queryOutPostersBig`, 1),
method: 'post',
data
})
}

View File

@@ -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>