长图海报

library/longPoster/index.vue

@@ -23,11 +23,11 @@
 		</view>
 		<view class="ceng" v-if="isShowbtn" @click="hideBtn"></view>
 		<view class="side ddflex" v-if="isShowbtn">
-			<view class="li" @click="jumpUrl('/library/longPosterService/longPosterService?type=1')">
+			<view class="li" @click="jumpUrl('/library/longPosterService/longPosterService')">
 				<image src="/static/images/ll_dt.png"></image>
 				<view>年度账单</view>
 			</view>
-			<view class="li" @click="jumpUrl('/library/longPosterService/longPosterService?type=2')">
+			<view class="li" @click="jumpUrl('/library/longPosterService/longPosterService2')">
 				<image src="/static/images/ll_cz.png"></image>
 				<view>日/月/年报</view>
 			</view>
@@ -45,11 +45,20 @@
 		data() {
 			return {
 				searchVal:'',
-				isShowbtn:false
+				isShowbtn:false,
+				
+				searchVal:'',
+				isShow: false,
+				pageList: [],
+				isLoad: true,
+				form: {
+					page: 1,
+					limit: 10
+				},
 			}
 		},
 		onLoad(options) {
-
+			this.getPageList(true);
 		},
 		onShow() {
 			
@@ -57,12 +66,44 @@
 		onHide() {
 			this.hideBtn()
 		},
+		onReachBottom: function() {
+			this.form.page++;
+			this.getPageList(false);
+		},
 		methods: {
 			jumpUrl(url){
 				uni.navigateTo({
 					url:url
 				})
 			},
+			// 获取海报
+			getPageList(isShow){
+				if (!this.isLoad) return false;
+				this.isLoad = false;
+				let form = this.form;
+				form.code = 'poster_long'
+				form.search = this.searchVal?this.searchVal:null
+				req.loadIng('加载中')
+				req.getRequest('/api/material/library',form,res => {
+					this.isShow = true;
+					res = res?res.list:[]
+					if (res && res.length == 10) {
+						this.isLoad = true;
+					}
+					if (this.form.page > 1) {
+						res = this.pageList.concat(res);
+					}
+					this.pageList = res;
+					uni.hideLoading()
+				},isShow);
+			},
+			
+			// 搜索
+			searchFn(){
+				this.isLoad = true
+				this.form.page = 1
+				this.getPageList()
+			},
 			showBtn() {
 				this.isShowbtn = true;
 			},

library/longPosterContent/longPosterContent.vue

@@ -1,11 +1,20 @@
 <template>
-	<!-- 账单 -->
-	<view v-if="type==1">
+	<view>
+		<!-- 账单 -->
+		<view class="form-input">
+			<view class="input-label">统计时间</view>
+			<picker mode="date" fields="year" :value="time" @change="timeChange">
+				<view class="input-box ddflex">
+					<view class="fflex">{{time?time:'请选择'}}</view>
+					<image class="rico" src="../../static/pages/images/more.png"></image>
+				</view>
+			</picker>
+		</view>
 		<view class="form-input">
 			<view class="input-label">文本一</view>
-			<picker :range="yearList" range-key="label" @change="yearChange">
+			<picker :range="text1List" range-key="name" :value="text1Index" @change="(e)=>{textChange(e,1)}">
 				<view class="input-box ddflex">
-					<view class="fflex">{{yearIndex>-1?yearList[yearIndex].label:'请选择'}}</view>
+					<view class="fflex">{{text1Index>-1?text1List[text1Index].name:'请选择'}}</view>
 					<image class="rico" src="../../static/pages/images/more.png"></image>
 				</view>
 			</picker>
@@ -13,43 +22,17 @@
 		<view class="form-input">
 			<view class="input-label">文本二</view>
 			<view class="input-box ddflex">
-				<input v-model="textTitle" placeholder="请填写"/>
+				<input v-model="text2Title" class="fflex" placeholder="请填写"/>
 			</view>
 			<view class="input-box ddflex">
-				<textarea v-model="textContent" placeholder="请填写"></textarea>
+				<textarea v-model="text2Content" placeholder="请填写"></textarea>
 			</view>
 		</view>
 		<view class="form-input">
 			<view class="input-label">文本三</view>
-			<picker :range="yearList" range-key="label" @change="yearChange">
-				<view class="input-box ddflex">
-					<view class="fflex">{{yearIndex>-1?yearList[yearIndex].label:'请选择'}}</view>
-					<image class="rico" src="../../static/pages/images/more.png"></image>
-				</view>
-			</picker>
-		</view>
-		
-		<view style="height: 150rpx;"></view>
-		<view class="share-btn">
-			<view class="btn" @click="">保存</view>
-		</view>
-	</view>
-	<!-- 日报信息 -->
-	<view v-else-if="type==2">
-		<view class="form-input">
-			<view class="input-label">报表类型</view>
-			<picker :range="yearList" range-key="label" @change="yearChange">
-				<view class="input-box ddflex">
-					<view class="fflex">{{yearIndex>-1?yearList[yearIndex].label:'请选择'}}</view>
-					<image class="rico" src="../../static/pages/images/more.png"></image>
-				</view>
-			</picker>
-		</view>
-		<view class="form-input">
-			<view class="input-label">统计时间</view>
-			<picker :range="yearList" range-key="label" @change="yearChange">
+			<picker :range="text3List" range-key="name" :value="text3Index" @change="(e)=>{textChange(e,3)}">
 				<view class="input-box ddflex">
-					<view class="fflex">{{yearIndex>-1?yearList[yearIndex].label:'请选择'}}</view>
+					<view class="fflex">{{text3Index>-1?text3List[text3Index].name:'请选择'}}</view>
 					<image class="rico" src="../../static/pages/images/more.png"></image>
 				</view>
 			</picker>
@@ -57,7 +40,7 @@
 		
 		<view style="height: 150rpx;"></view>
 		<view class="share-btn">
-			<view class="btn" @click="">保存</view>
+			<view class="btn" @click="submit">保存</view>
 		</view>
 	</view>
 </template>
@@ -71,34 +54,117 @@
 		props: {},
 		data() {
 			return {
-				yearIndex:-1,
-				yearList:[{
-					label:'2023年合计理赔金额（元）',
-					value:'23396.5',
-					year:2023
-				},{
-					label:'2022年合计理赔金额（元）',
-					value:'33396.5',
-					year:2022
-				},{
-					label:'2021年合计理赔金额（元）',
-					value:'46396.5',
-					year:2021
-				}],
-				textTitle:'',
-				textContent:'',
-				type:1
+				time:'',
+				
+				text1Index:-1,
+				text1List:[],
+				
+				text3Index:-1,
+				text3List:[],
+				
+				text2Title:'',
+				text2Content:'',
+				
+				codeDetail:[]
 			}
 		},
 		onLoad(options) {
-			if(options.type) this.type = options.type
+			this.getTextsList()
 		},
 		onShow() {
 			
 		},
 		methods: {
-			yearChange(e){
-				this.yearIndex = e.detail.value
+			// 获取各下拉框的选项并初始化数据
+			getTextsList(){
+				let pages = getCurrentPages(); //获取所有页面栈实例列表
+				let prevPage = pages[pages.length - 2]; //上一页页面实例
+				this.codeDetail = prevPage.$vm.codeDetail
+				
+				this.time = prevPage.$vm.time
+				
+				this.text2Title = prevPage.$vm.dataForm[1].title
+				this.text2Content = prevPage.$vm.dataForm[1].data.value
+				
+				this.codeDetail.map(item=>{
+					if(item.chineseName == '文本一') {
+						this.text1List = item.selectValues
+						if(prevPage.$vm.dataForm[0].code){
+							this.text1Index = this.text1List.findIndex(item=>item.code==prevPage.$vm.dataForm[0].code)
+						}
+					}
+					if(item.chineseName == '文本三') {
+						this.text3List = item.selectValues
+						if(prevPage.$vm.dataForm[2].code){
+							this.text3Index = this.text3List.findIndex(item=>item.code==prevPage.$vm.dataForm[2].code)
+						}
+					}
+				})
+				console.log(this.text1List)
+			},
+			timeChange(e){
+				this.time = e.detail.value
+			},
+			textChange(e,type){
+				if(type==1){
+					this.text1Index = e.detail.value
+				}
+				if(type==3){
+					this.text3Index = e.detail.value
+				}
+			},
+			async submit(){
+				if(!this.time) return req.msg('请选择统计时间')
+				if(this.text1Index<0) return req.msg('请选择文本一')
+				if(!this.text2Title) return req.msg('请填写文本二')
+				if(!this.text2Content) return req.msg('请填写文本二内容')
+				if(this.text3Index<0) return req.msg('请选择文本三')
+				
+				let pages = getCurrentPages(); //获取所有页面栈实例列表
+				let prevPage = pages[pages.length - 2]; //上一页页面实例
+				prevPage.$vm.time = this.time
+				prevPage.$vm.dataForm = await this.getSubmitData()
+				uni.navigateBack()
+			},
+			// 获取选择后的文本数据
+			getSubmitData(){
+				return new Promise(async (r,j)=>{
+					let dataForm = []
+					let textData = await this.getTextData(this.text1List[this.text1Index].code+','+this.text3List[this.text3Index].code)
+					dataForm.push({
+						chineseName:'文本一',
+						title:this.text1List[this.text1Index].name,
+						code:this.text1List[this.text1Index].code,
+						data:JSON.parse(textData[this.text1List[this.text1Index].code])
+					})
+					dataForm.push({
+						chineseName:'文本二',
+						title:this.text2Title,
+						code:'',
+						data:{value:this.text2Content}
+					})
+					dataForm.push({
+						chineseName:'文本三',
+						title:this.text3List[this.text3Index].name,
+						code:this.text3List[this.text3Index].code,
+						data:JSON.parse(textData[this.text3List[this.text3Index].code])
+					})
+					r(dataForm)
+				})
+			},
+			getTextData(code){
+				return new Promise(async (r,j)=>{
+					let param = {
+						startTime:'2023-01-01 00:00:00',
+						endTime:'2023-12-31 23:59:59',
+						code:code
+					}
+					param.startTime = this.time+'-01-01 00:00:00'
+					param.endTime = this.time+'12-31 23:59:59'
+					req.getRequest('/api/material/longPoster/data',param,res=>{
+						r(res)
+					})
+				})
 			}
 		},
 		mounted() {

library/longPosterContent/longPosterContent2.css

@@ -0,0 +1,47 @@
+page{
+	background-color: #fff;
+}
+.form-input{
+	margin:40rpx 30rpx;
+}
+.input-label{
+	line-height: 45rpx;
+	font-size: 32rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #333333;
+}
+.input-box{
+	background: #F8F8F8;
+	border-radius: 8rpx 8rpx 8rpx 8rpx;
+	margin-top: 20rpx;
+	padding: 23rpx;
+}
+.input-box textarea{
+	width: 100%;
+}
+.rico{
+	width: 12rpx;
+	height: 22rpx;
+	margin-left: 20rpx;
+}
+
+.share-btn{
+	background-color: #fff;
+	padding: 30rpx 40rpx;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+.btn{
+	line-height: 80rpx;
+	background: #27D699;
+	border-radius: 40rpx 40rpx 40rpx 40rpx;
+	opacity: 1;
+	font-size: 32rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #FFFFFF;
+	text-align: center;
+}

library/longPosterContent/longPosterContent2.vue

@@ -0,0 +1,247 @@
+<template>
+	<!-- 日报信息 -->
+	<view>
+		<view class="form-input">
+			<view class="input-label">报表类型</view>
+			<picker :range="formList" range-key="name" :value="formIndex" @change="formTypeChange">
+				<view class="input-box ddflex">
+					<view class="fflex">{{formIndex>-1?formList[formIndex].name:'请选择'}}</view>
+					<image class="rico" src="../../static/pages/images/more.png"></image>
+				</view>
+			</picker>
+		</view>
+		<view class="form-input">
+			<view class="input-label">统计时间</view>
+			<picker mode="date" :fields="formType==1?'year':formType==2?'month':'day'" :value="time" @change="timeChange">
+				<view class="input-box ddflex">
+					<view class="fflex">{{time?time:'请选择'}}</view>
+					<image class="rico" src="../../static/pages/images/more.png"></image>
+				</view>
+			</picker>
+		</view>
+		<view class="form-input">
+			<view class="input-label">文本一</view>
+			<picker :range="text1List" range-key="name" :value="text1Index" @change="(e)=>{textChange(e,1)}">
+				<view class="input-box ddflex">
+					<view class="fflex">{{text1Index>-1?text1List[text1Index].name:'请选择'}}</view>
+					<image class="rico" src="../../static/pages/images/more.png"></image>
+				</view>
+			</picker>
+		</view>
+		<view class="form-input">
+			<view class="input-label">文本二</view>
+			<picker :range="text2List" range-key="name" :value="text2Index" @change="(e)=>{textChange(e,2)}">
+				<view class="input-box ddflex">
+					<view class="fflex">{{text2Index>-1?text2List[text2Index].name:'请选择'}}</view>
+					<image class="rico" src="../../static/pages/images/more.png"></image>
+				</view>
+			</picker>
+		</view>
+		<view class="form-input">
+			<view class="input-label">文本三</view>
+			<picker :range="text3List" range-key="name" :value="text3Index" @change="(e)=>{textChange(e,3)}">
+				<view class="input-box ddflex">
+					<view class="fflex">{{text3Index>-1?text3List[text3Index].name:'请选择'}}</view>
+					<image class="rico" src="../../static/pages/images/more.png"></image>
+				</view>
+			</picker>
+		</view>
+		<view class="form-input">
+			<view class="input-label">文本四</view>
+			<picker :range="text4List" range-key="name" :value="text4Index" @change="(e)=>{textChange(e,4)}">
+				<view class="input-box ddflex">
+					<view class="fflex">{{text4Index>-1?text4List[text4Index].name:'请选择'}}</view>
+					<image class="rico" src="../../static/pages/images/more.png"></image>
+				</view>
+			</picker>
+		</view>
+		
+		<view style="height: 150rpx;"></view>
+		<view class="share-btn">
+			<view class="btn" @click="submit">保存</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	const app = getApp();
+	const req = require("../../utils/request.js");
+
+	export default {
+		components: {},
+		props: {},
+		data() {
+			return {
+				formIndex:0,
+				formList:[{name:'年报',value:1},{name:'月报',value:2},{name:'日报',value:3}],
+				formType:1,
+				
+				time:'',
+				
+				text1Index:-1,
+				text1List:[],
+				
+				text2Index:-1,
+				text2List:[],
+				
+				text3Index:-1,
+				text3List:[],
+				
+				text4Index:-1,
+				text4List:[],
+				
+				codeDetail:[]
+			}
+		},
+		onLoad(options) {
+			this.getTextsList()
+		},
+		onShow() {
+			
+		},
+		methods: {
+			// 获取各下拉框的选项并初始化数据
+			getTextsList(){
+				let pages = getCurrentPages(); //获取所有页面栈实例列表
+				let prevPage = pages[pages.length - 2]; //上一页页面实例
+				this.codeDetail = prevPage.$vm.codeDetail
+				
+				this.formType = prevPage.$vm.formType
+				this.formIndex = this.formList.findIndex(item=>item.value==prevPage.$vm.formType)
+				this.time = prevPage.$vm.time
+				
+				this.codeDetail.map(item=>{
+					if(item.chineseName == '文本一') {
+						this.text1List = item.selectValues
+						if(prevPage.$vm.dataForm[0].code){
+							this.text1Index = this.text1List.findIndex(item=>item.code==prevPage.$vm.dataForm[0].code)
+						}
+					}
+					if(item.chineseName == '文本二') {
+						this.text2List = item.selectValues
+						if(prevPage.$vm.dataForm[1].code){
+							this.text2Index = this.text2List.findIndex(item=>item.code==prevPage.$vm.dataForm[1].code)
+						}
+					}
+					if(item.chineseName == '文本三') {
+						this.text3List = item.selectValues
+						if(prevPage.$vm.dataForm[2].code){
+							this.text3Index = this.text3List.findIndex(item=>item.code==prevPage.$vm.dataForm[2].code)
+						}
+					}
+					if(item.chineseName == '文本四') {
+						this.text4List = item.selectValues
+						if(prevPage.$vm.dataForm[3].code){
+							this.text4Index = this.text4List.findIndex(item=>item.code==prevPage.$vm.dataForm[3].code)
+						}
+					}
+				})
+			},
+			formTypeChange(e){
+				this.formIndex = e.detail.value
+				this.formType = this.formList[this.formIndex].value
+				this.time = ''
+			},
+			timeChange(e){
+				this.time = e.detail.value
+			},
+			textChange(e,type){
+				if(type==1){
+					this.text1Index = e.detail.value
+				}
+				if(type==2){
+					this.text2Index = e.detail.value
+				}
+				if(type==3){
+					this.text3Index = e.detail.value
+				}
+				if(type==4){
+					this.text4Index = e.detail.value
+				}
+			},
+			async submit(){
+				if(!this.time) return req.msg('请选择统计时间')
+				if(this.text1Index<0) return req.msg('请选择文本一')
+				if(this.text2Index<0) return req.msg('请选择文本二')
+				if(this.text3Index<0) return req.msg('请选择文本三')
+				if(this.text4Index<0) return req.msg('请选择文本四')
+				
+				
+				let pages = getCurrentPages(); //获取所有页面栈实例列表
+				let prevPage = pages[pages.length - 2]; //上一页页面实例
+				prevPage.$vm.formType = this.formType
+				prevPage.$vm.time = this.time
+				prevPage.$vm.dataForm = await this.getSubmitData()
+				uni.navigateBack()
+			},
+			// 获取选择后的文本数据
+			getSubmitData(){
+				return new Promise(async (r,j)=>{
+					
+					let dataForm = []
+					let textData = await this.getTextData(this.text1List[this.text1Index].code+','+this.text2List[this.text2Index].code+','+this.text3List[this.text3Index].code+','+this.text4List[this.text4Index].code)
+					dataForm.push({
+						chineseName:'文本一',
+						title:this.text1List[this.text1Index].name,
+						code:this.text1List[this.text1Index].code,
+						data:JSON.parse(textData[this.text1List[this.text1Index].code])
+					})
+					dataForm.push({
+						chineseName:'文本二',
+						title:this.text2List[this.text2Index].name,
+						code:this.text2List[this.text2Index].code,
+						data:JSON.parse(textData[this.text2List[this.text2Index].code])
+					})
+					dataForm.push({
+						chineseName:'文本三',
+						title:this.text3List[this.text3Index].name,
+						code:this.text3List[this.text3Index].code,
+						data:JSON.parse(textData[this.text3List[this.text3Index].code])
+					})
+					dataForm.push({
+						chineseName:'文本四',
+						title:this.text4List[this.text4Index].name,
+						code:this.text4List[this.text4Index].code,
+						data:JSON.parse(textData[this.text4List[this.text4Index].code])
+					})
+					r(dataForm)
+				})
+			},
+			getTextData(code){
+				return new Promise(async (r,j)=>{
+					let param = {
+						startTime:'2023-01-01 00:00:00',
+						endTime:'2023-12-31 23:59:59',
+						code:code
+					}
+					if(this.formType==1){
+						param.startTime = this.time+'-01-01 00:00:00'
+						param.endTime = this.time+'12-31 23:59:59'
+					}else if(this.formType==2) {
+						//获取当月最后一天的日期
+						let date = new Date()
+						var year = date.getFullYear(); //获取年份
+						var month = date.getMonth() + 1; //获取月份
+						var lastDate = new Date(year, month , 0).getDate(); //获取当月最后一日
+						month = month < 10 ? '0' + month : month ; //月份补 0
+
+						param.startTime = this.time+'-01 00:00:00'
+						param.endTime = [year,month ,lastDate ].join("-")+' 23:59:59'
+					}else if(this.formType==3){
+						param.startTime = this.time+' 00:00:00'
+						param.endTime = this.time+' 23:59:59'
+					}
+					req.getRequest('/api/material/longPoster/data',param,res=>{
+						r(res)
+					})
+				})
+			}
+		},
+		mounted() {
+		}
+	}
+</script>
+
+<style>
+	@import "./longPosterContent.css";
+</style>

library/longPosterService/longPosterService.css

@@ -44,7 +44,7 @@ page{
 }
 
 .table-th{
-	margin-top: 70rpx;
+	margin-top: 30rpx;
 	width: 604rpx;
 	height: 73rpx;
 	background: rgba(255, 255, 255, 0.8);

library/longPosterService/longPosterService.vue

@@ -2,83 +2,39 @@
 	<view>
 		<view class="poster" id="poster">
 			<!-- 年度理赔账单 -->
-			<block v-if="type==1">
-				<image class="poster-pic" :src="posterBg" mode="widthFix"></image>
+			<image class="poster-pic" :src="posterBg" mode="widthFix"></image>
+			
+			<view style="position: absolute;top: 912rpx;left: 50%;transform: translateX(-50%);min-width:604rpx;">
+				<view style="font-size: 36rpx;font-weight: bold;text-align: center;">{{dataForm[0].title?dataForm[0].title:'文本一'}}</view>
+				<view style="font-size: 90rpx;font-weight: bold;color: #FF5700;margin-top: 5rpx;line-height: 126rpx;text-align: center;">{{dataForm[0].data?dataForm[0].data.value:'300'}}</view>
 				
-				<view style="position: absolute;top: 912rpx;left: 50%;transform: translateX(-50%);min-width:604rpx;">
-					<view style="font-size: 36rpx;font-weight: bold;text-align: center;">合计理赔金额（元）</view>
-					<view style="font-size: 90rpx;font-weight: bold;color: #FF5700;margin-top: 5rpx;line-height: 126rpx;text-align: center;">340895.2</view>
-					
-					<view style="font-size: 33rpx;font-weight: bold;margin-top: 78rpx;text-align: center;">理赔概况</view>
-					<view style="width:522rpx;font-size: 26rpx;font-weight: 400;color: #333;line-height: 48rpx;margin: 17rpx auto 0;">
-						这里是理赔经过的概况描述文案这里是理赔经过的概况描述文案这里是理赔经过的概况描述文案这里是理赔经过的概况描述文案这里是理赔经过的概况描述文案这里是理赔经过的概况这里是理赔经过的概况描述文案
-					</view>
-					
-					
-					<view class="table-th ddflex">
-						<view class="table-th-item fflex">赔付事件</view>
-						<view class="table-th-item fflex">赔付金额</view>
-					</view>
-					
-					<view>
-						<view class="table-td" v-for="item,index in 10">
-							<view class="ddflex">
-								<view class="table-td-item fflex">L女士 32岁 福建人 甲状腺癌</view>
-								<view class="table-td-item">14826元</view>
-							</view>
-							<view v-if="index!=10-1" class="table-td-item-border"></view>
-						</view>
-					</view>
-					
-					<view class="ddflex" style="margin-top: 40rpx;">
-						<view class="flex">
-							<view class="poster-title">杜平 | 18665676418</view>
-							<view class="poster-note">扫码即可咨询理赔事宜</view>
-						</view>
-						<image class="poster-code" src="https://img.zhiqiyun.com/test/2023/08/23/d44ab2b86522a05ee6bd026cf04ec8bd.png"></image>
-					</view>
+				<view style="font-size: 33rpx;font-weight: bold;margin-top: 78rpx;text-align: center;">{{dataForm[1].title?dataForm[1].title:'文本二'}}</view>
+				<view style="width:522rpx;font-size: 26rpx;font-weight: 400;color: #333;line-height: 48rpx;margin: 17rpx auto 0;">
+					{{dataForm[1].data?dataForm[1].data.value:'文本二内容'}}
 				</view>
-			</block>
-			<!-- 日报 -->
-			<block v-if="type==2">
-				<image class="poster-pic" :src="posterBg" mode="widthFix"></image>
-				<view style="position: absolute;top: 484rpx;left: 50%;transform: translateX(-50%);min-width:604rpx;">
-					<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;">理赔总件数</view>
-					<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">489</view>
-					
-					<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;margin-top: 30rpx;">理赔总金额（元）</view>
-					<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">340895.2</view>
-					
-					<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;margin-top: 30rpx;">最高赔付金额（元）</view>
-					<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">40895.2</view>
-					
-					
-					<view class="table-th ddflex">
-						<view class="table-th-item fflex">赔付事件</view>
-						<view class="table-th-item fflex">理赔件数</view>
-						<view class="table-th-item fflex">赔付金额</view>
-					</view>
-					
-					<view>
-						<view class="table-td" v-for="item,index in 5">
-							<view class="ddflex">
-								<view class="table-td-item fflex">疾病医疗</view>
-								<view class="table-td-item fflex">35</view>
-								<view class="table-td-item fflex">14826元</view>
-							</view>
-							<view v-if="index!=5-1" class="table-td-item-border"></view>
-						</view>
-					</view>
-					
-					<view class="ddflex" style="margin-top: 40rpx;">
-						<view class="flex">
-							<view class="poster-title">杜平 | 18665676418</view>
-							<view class="poster-note">扫码即可咨询理赔事宜</view>
+				
+				
+				<view class="table-th ddflex">
+					<view class="table-th-item fflex" v-for="item,index in dataForm[2].data.title">{{item}}</view>
+				</view>
+				
+				<view>
+					<view class="table-td" v-for="item,index in dataForm[2].data.value">
+						<view class="ddflex">
+							<view class="table-td-item" :class="(item.length<3&&idx==0||item.length>2)?'fflex':''" v-for="it,idx in item">{{it}}</view>
 						</view>
-						<image class="poster-code" src="https://img.zhiqiyun.com/test/2023/08/23/d44ab2b86522a05ee6bd026cf04ec8bd.png"></image>
+						<view v-if="index!=dataForm[2].data.value.length-1" class="table-td-item-border"></view>
 					</view>
 				</view>
-			</block>
+				
+				<!-- <view class="ddflex" style="margin-top: 40rpx;">
+					<view class="flex">
+						<view class="poster-title">杜平 | 18665676418</view>
+						<view class="poster-note">扫码即可咨询理赔事宜</view>
+					</view>
+					<image class="poster-code" src="https://img.zhiqiyun.com/test/2023/08/23/d44ab2b86522a05ee6bd026cf04ec8bd.png"></image>
+				</view> -->
+			</view>
 			
 		</view>
 		<view class="ddflex" style="margin: 30rpx 0 10rpx;justify-content: space-between;">
@@ -88,7 +44,7 @@
 					更换背景
 				</view>
 				<view class="line"></view>
-				<view class="option ddflex" @click="jumpUrl('/library/longPosterContent/longPosterContent?type='+type)">
+				<view class="option ddflex" @click="jumpUrl('/library/longPosterContent/longPosterContent')">
 					<image mode="aspectFit" src="../static/images/opt2.png"></image>
 					编辑内容
 				</view>
@@ -108,21 +64,34 @@
 		props: {},
 		data() {
 			return {
-				systems: {},
-				isTop:0,
 				productLink:'',
 				posterBg:'',
 				base64:'',
-				type:1,
+				
+				time:'',
+				dataForm:[{
+					chineseName:'文本一',
+					title:'',
+					code:'',
+					data:''
+				},{
+					chineseName:'文本二',
+					title:'',
+					code:'',
+					data:''
+				},{
+					chineseName:'文本三',
+					title:'',
+					code:'',
+					data:[]
+				}],
+				
+				codeDetail:''
 			}
 		},
 		onLoad(options) {
-			if(options.type) this.type = options.type
-			if(this.type == 1){
-				this.posterBg = 'https://img.zhiqiyun.com/test/2023/08/23/e5705790f7614ebede4c06073b7abd50.png'
-			}else{
-				this.posterBg = 'https://img.zhiqiyun.com/test/2023/08/23/d2ae45f898abdb12559da237f3c92188.png'
-			}
+			this.posterBg = 'https://img.zhiqiyun.com/test/2023/08/23/e5705790f7614ebede4c06073b7abd50.png'
+			this.getCodeDetail('nianduzhangdan')
 		},
 		onShow() {
 			
@@ -133,8 +102,10 @@
 					url:url
 				})
 			},
-			creatCode(){
-				
+			getCodeDetail(code){
+				req.getRequest('/api/material/longPosterDetail',{code:code},res=>{
+					this.codeDetail = res&&res.extForm?JSON.parse(res.extForm):[]
+				})
 			},
 			toImg() {
 				// 使页面滑到顶部，避免顶部出现白边
@@ -200,22 +171,6 @@
 			},
 		},
 		mounted() {
-			const systemInfo = uni.getSystemInfoSync();
-			// px转换到rpx的比例
-			let pxToRpxScale = 750 / systemInfo.windowWidth;
-			let systems = {
-				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
-				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
-			};
-			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
-			this.systems = systems;
-		},
-		onPageScroll: function(e) {
-			if (e.scrollTop > this.systems.barHeight) {
-				this.isTop = 1;
-			} else {
-				this.isTop = 0;
-			}
 		}
 	}
 </script>

library/longPosterService/longPosterService2.css

@@ -0,0 +1,115 @@
+page{
+	background-color: #333333;
+	padding: 30rpx;
+}
+.poster{
+	position: relative;
+	overflow: hidden;
+}
+.poster-pic{
+	width: 100%;
+}
+.option{
+	line-height: 33rpx;
+	font-size: 24rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #FFFFFF;
+}
+.option image{
+	width: 48rpx;
+	height: 48rpx;
+	margin-right: 20rpx;
+	opacity: 1;
+}
+.line{
+	width: 2rpx;
+	height: 48rpx;
+	opacity: 1;
+	background-color: #707070;
+	margin: 0 50rpx;
+}
+.option-btn{
+	width: 155rpx;
+	height: 56rpx;
+	line-height: 56rpx;
+	background: var(--main);
+	border-radius: 28rpx 28rpx 28rpx 28rpx;
+	opacity: 1;
+	font-size: 24rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #FFFFFF;
+	text-align: center;
+}
+
+.table-th{
+	margin-top: 30rpx;
+	width: 604rpx;
+	height: 73rpx;
+	background: rgba(255, 255, 255, 0.8);
+}
+.table-th-item{
+	font-size: 24rpx;
+	font-weight: bold;
+	color: #333333;
+	line-height: 33rpx;
+	text-align: center;
+	padding: 0 30rpx;
+}
+.table-th-item:first-child{
+	text-align: left;
+}
+.table-th-item:last-child{
+	text-align: right;
+}
+
+.table-td{
+	background: #FFFFFF;
+}
+.table-td:first-child{
+	padding-top: 30rpx;
+}
+.table-td:last-child{
+	padding-bottom: 30rpx;
+}
+.table-td-item{
+	font-size: 22rpx;
+	font-weight: bold;
+	color: #333333;
+	line-height: 33rpx;
+	text-align: center;
+	padding: 13rpx 30rpx 13rpx;
+}
+.table-td-item-border{
+	height: 2rpx;
+	margin: 0 30rpx;
+	background-color: #EAEAEA;
+}
+.table-td-item:first-child{
+	text-align: left;
+}
+.table-td-item:last-child{
+	text-align: right;
+}
+
+.poster-title{
+	line-height: 50rpx;
+	font-size: 36rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: bold;
+	color: #FFFFFF;
+}
+.poster-note{
+	line-height: 37rpx;
+	font-size: 26rpx;
+	font-family: PingFang SC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #FFFFFF;
+	margin-top:12rpx;
+}
+.poster-code{
+	width: 126rpx;
+	height: 126rpx;
+	margin-left: 20rpx;
+}

library/longPosterService/longPosterService2.vue

@@ -0,0 +1,199 @@
+<template>
+	<view>
+		<view class="poster" id="poster">
+			<!-- 日报 -->
+			<image class="poster-pic" :src="posterBg" mode="widthFix"></image>
+			<view style="position: absolute;top: 414rpx;left: 50%;transform: translateX(-50%);min-width:604rpx;">
+				<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;">{{dataForm[0].title?dataForm[0].title:'文本一'}}</view>
+				<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">{{dataForm[0].data?dataForm[0].data.value:'300'}}</view>
+				
+				<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;margin-top: 20rpx;">{{dataForm[1].title?dataForm[1].title:'文本二'}}</view>
+				<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">{{dataForm[1].data?dataForm[1].data.value:'文本二内容'}}</view>
+				
+				<view style="font-size: 36rpx;font-weight: 400;text-align: left;color: #FFFFFF;margin-top: 20rpx;">{{dataForm[2].title?dataForm[2].title:'文本三'}}</view>
+				<view style="font-size: 90rpx;font-weight: bold;text-align: left;color: #FFFFFF;">{{dataForm[2].data?dataForm[2].data.value:'文本三内容'}}</view>
+				
+				
+				<view class="table-th ddflex" v-if="dataForm[3].data.title&&dataForm[3].data.title.length>0">
+					<view class="table-th-item fflex" v-for="item,index in dataForm[3].data.title">{{item}}</view>
+				</view>
+				
+				<view v-if="dataForm[3].data.value&&dataForm[3].data.value.length>0">
+					<view class="table-td" v-for="item,index in dataForm[3].data.value">
+						<view class="ddflex">
+							<view class="table-td-item" :class="(item.length<3&&idx==0||item.length>2)?'fflex':''" v-for="it,idx in item">{{it}}</view>
+						</view>
+						<view v-if="index!=dataForm[3].data.value.length-1" class="table-td-item-border"></view>
+					</view>
+				</view>
+				
+				<!-- <view class="ddflex" style="margin-top: 40rpx;">
+					<view class="flex">
+						<view class="poster-title">杜平 | 18665676418</view>
+						<view class="poster-note">扫码即可咨询理赔事宜</view>
+					</view>
+					<image class="poster-code" src="https://img.zhiqiyun.com/test/2023/08/23/d44ab2b86522a05ee6bd026cf04ec8bd.png"></image>
+				</view> -->
+			</view>
+			
+		</view>
+		<view class="ddflex" style="margin: 30rpx 0 10rpx;justify-content: space-between;">
+			<view class="ddflex">
+				<view class="option ddflex" @click="uploadImage">
+					<image mode="aspectFit" src="../static/images/opt1.png"></image>
+					更换背景
+				</view>
+				<view class="line"></view>
+				<view class="option ddflex" @click="jumpUrl('/library/longPosterContent/longPosterContent2')">
+					<image mode="aspectFit" src="../static/images/opt2.png"></image>
+					编辑内容
+				</view>
+			</view>
+			<view class="option-btn" @click="toImg">发布</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	const app = getApp();
+	const req = require("../../utils/request.js");
+	import html2canvas from '../static/html2canvas.min.js';
+
+	export default {
+		components: {},
+		props: {},
+		data() {
+			return {
+				systems: {},
+				isTop:0,
+				productLink:'',
+				posterBg:'',
+				base64:'',
+				
+				formType:1,//1 年报 2 月报 3日报
+				time:'',
+				
+				dataForm:[{
+					chineseName:'文本一',
+					title:'',
+					code:'',
+					data:''
+				},{
+					chineseName:'文本二',
+					title:'',
+					code:'',
+					data:''
+				},{
+					chineseName:'文本三',
+					title:'',
+					code:'',
+					data:''
+				},{
+					chineseName:'文本四',
+					title:'',
+					code:'',
+					data:[]
+				}],
+				
+				codeDetail:''
+			}
+		},
+		onLoad(options) {
+			this.posterBg = 'https://img.zhiqiyun.com/test/2023/08/23/d2ae45f898abdb12559da237f3c92188.png'
+			this.getCodeDetail('riyuenianbao')
+		},
+		onShow() {
+			
+		},
+		methods: {
+			jumpUrl(url){
+				uni.navigateTo({
+					url:url
+				})
+			},
+			getCodeDetail(code){
+				req.getRequest('/api/material/longPosterDetail',{code:code},res=>{
+					this.codeDetail = res&&res.extForm?JSON.parse(res.extForm):[]
+				})
+			},
+			creatCode(){
+				
+			},
+			toImg() {
+				// 使页面滑到顶部，避免顶部出现白边
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 0
+				})
+				var dom = document.querySelector('#poster'); // 获取dom元素
+				html2canvas(dom, {
+					width: dom.clientWidth, //dom 原始宽度
+					height: dom.clientHeight,
+					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
+					scrollX: 0,
+					useCORS: true, //支持跨域，但好像没什么用
+				}).then((canvas) => {
+					// 将生产的canvas转为base64图片
+					this.base64 = canvas.toDataURL('image/png')
+					// console.log(this.base64)
+					// let path = this.base64ToFile(this.base64,new Date().getTime())
+					let path = uni.base64ToArrayBuffer(this.base64);
+					console.log(path)
+					req.uploadFile('/api/nocheck/upload', path, res => {
+						console.log(res)
+					});
+					// uni.downloadFile({
+					// 	url: this.base64, //仅为示例，并非真实的资源
+					// 	success: (res) => {
+					// 		console.log(res)
+					// 		if (res.statusCode === 200) {
+					// 			console.log('下载成功');
+					// 			var oA = document.createElement("a");
+					// 			oA.download = ''; // 设置下载的文件名，默认是'下载'
+					// 			oA.href = res.tempFilePath; //临时路径再保存到本地
+					// 			document.body.appendChild(oA);
+					// 			oA.click();
+					// 			oA.remove(); // 下载之后把创建的元素删除
+					// 		}
+					
+					// 	}
+					// });
+				});
+			},
+			uploadImage(){
+				let that = this;
+				let count = 1
+				uni.chooseImage({
+					count: count,
+					sizeType: ['original', 'compressed'],
+					sourceType: ['album', 'camera'],
+					success: function({ tempFilePaths }) {
+						var promise = Promise.all(
+							tempFilePaths.map(tempFilePath => {
+								return new Promise(function(resolve, reject) {
+									req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
+										that.posterBg = res.src
+									});
+								});
+							})
+						);
+						promise
+							.then(function(results) {
+								console.log(results);
+							})
+							.catch(function(err) {
+								console.log(err);
+							});
+					}
+				});
+			},
+		},
+		mounted() {
+		},
+		onPageScroll: function(e) {
+		}
+	}
+</script>
+<style>
+	@import "./longPosterService.css";
+</style>

pages.json

@@ -82,10 +82,20 @@
 					"navigationBarTitleText": "长图海报"
 				}
 			},{
+				"path": "longPosterService/longPosterService2",
+				"style": {
+					"navigationBarTitleText": "长图海报"
+				}
+			},{
 				"path": "longPosterContent/longPosterContent",
 				"style": {
 					"navigationBarTitleText": "编辑内容"
 				}
+			},{
+				"path": "longPosterContent/longPosterContent2",
+				"style": {
+					"navigationBarTitleText": "编辑内容"
+				}
 			}]
 		}
 	],