事项新增 事项列表 详情

api/me/matters/matters.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// 我的事项列表
+export function getMattersList(query) {
+  return request({
+    url: '/system/matter/list',
+    method: 'get',
+	params:query
+  })
+}
+
+// 事项详情
+export function getMattersDetail(id) {
+  return request({
+    url: `/system/matter/lists/${id}`,
+    method: 'get'
+  })
+}
+
+// 查询主题类型配置列表
+export function getListTopicType(query) {
+  return request({
+    url: `/jnb/topicType/list`,
+    method: 'get',
+	params: query
+  })
+}
+
+// 查询部门列表
+export function getListDepts(query) {
+  return request({
+    url: `/system/department/list`,
+    method: 'get',
+	params: query
+  })
+}

pages.json

@@ -144,6 +144,24 @@
 			}
 		},
 		{
+			"path": "pages/mattersAdd/mattersAdd",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "新增事项"
+			}
+		},
+		{
+			"path": "pages/mattersDetail/mattersDetail",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "事项详情"
+			}
+		},
+		{
 			"path": "pages/sannong/sannong",
 			"style": {
 				"usingComponents": {

pages/matters/matters.css

@@ -0,0 +1,204 @@
+/* pages/fuwu.wxss */
+/* pages/sannong.wxss */
+.snTab {
+    width: 100%;
+}
+
+.fontColorBox,
+.fontColorBox1 {
+    color: #07c160;
+}
+
+.navBox {
+    /* 顶部tab盒子样式 */
+    width: 100%;
+    height: 108rpx;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    justify-content: center;
+}
+/* 最后一个tab标题的样式 */
+
+.titleBox {
+    /* 未选中文字的样式 */
+    color: rgb(168, 170, 175);
+    font-size: 30rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 32%;
+}
+.lineBox,
+.notLineBox {
+    /* 选中及未选中底线共同样式 */
+    width: 32rpx;
+    height: 8rpx;
+}
+
+.lineBox {
+    /* 选中底线样式 */
+    background: #07c160;
+    margin-top: 16rpx;
+    border-radius: 4rpx;
+}
+
+.notLineBox {
+    /* 未选中底线样式 */
+    background: transparent;
+}
+
+.swiperTtemBox {
+    /* 底部内容样式 */
+    height: 100vh;
+    overflow: scroll;
+    margin: 12rpx 0rpx;
+    background: white;
+    font-size: 28rpx;
+}
+
+/* 热门问答 */
+.rnwdList {
+    width: 100%;
+    height: 100%;
+}
+.list {
+    border-bottom: solid 2rpx #f6f6f6;
+    padding: 10rpx 0;
+    width: 100%;
+}
+.listTitle {
+    font-size: 32rpx;
+    color: #333;
+    line-height: 40rpx;
+}
+.jlSj {
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    margin: 20rpx 0 0 0;
+}
+.jf {
+    color: #07c160;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+}
+.icon-pinglun,
+.icon-chakan,
+.icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+}
+.onePic {
+    width: 100%;
+    height: 360rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    margin: 20rpx 0;
+}
+.onePic image {
+    width: 100%;
+    height: 100%;
+}
+.twoPic {
+    width: 100%;
+    height: 220rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.twoPic image {
+    width: 49%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.threePic {
+    width: 100%;
+    height: 160rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.threePic image {
+    width: 32%;
+    height: auto;
+    border-radius: 20rpx;
+}
+
+.pane-con {
+    margin: 20rpx 0;
+}
+.tabs-pane {
+    padding: 10rpx 20rpx;
+    margin-right: 20rpx;
+    border: 1px solid lightgrey;
+}
+.tabs-pane:nth-last-child(1) {
+    margin-right: 0;
+}
+.tabs-pane.active {
+    background: #5495df;
+    border-color: #5495df;
+    color: #fff;
+}
+
+.tab-class {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    bottom: 0;
+}
+
+.guidebook .img_box {
+    margin-bottom: 12rpx;
+    padding-left: 4rpx;
+}
+.guidebook .img_box .many_img {
+    display: flex;
+    justify-self: start;
+    flex-wrap: wrap;
+}
+.guidebook .img_item.four {
+    width: 198rpx;
+    height: 198rpx;
+    margin-right: 16rpx;
+    margin-bottom: 16rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+}
+.guidebook .img_item.four:nth-child(2n) {
+    margin-right: 30rpx;
+}
+.guidebook .img_item.many {
+    width: 198rpx;
+    height: 198rpx;
+    margin-right: 16rpx;
+    margin-bottom: 16rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+}
+.guidebook .img_item.many:nth-child(3n) {
+    margin-right: 0;
+}
+.addInfomarionBtn{
+	position: fixed;
+	bottom: 3%;
+	right: 3%;
+	width: 40px;
+	height: 40px;
+	background: url('@/static/images/upload/add.png') 0 0 no-repeat;
+	background-size: 100% 100%;
+}
+.addInfomarionBtn::after{
+	border: none;
+}

pages/matters/matters.vue

@@ -1,11 +1,206 @@
 <template>
-	<view class="">
-		我的事项
+    <!-- pages/me.wxml -->
+	<view class="container">
+		<uni-search-bar  :focus="true" v-model="searchValue"  @input="search"
+			style="width: 100%;"
+			@cancel="cancel">
+		</uni-search-bar>
+		<!-- <view style="width: 100%;display: flex;">
+			<uni-search-bar  :focus="true" v-model="searchValue"  @input="search"
+				style="width: 70%;"
+				@cancel="cancel">
+			</uni-search-bar>
+			  <uni-data-select
+				  style="width: 30%;margin: auto;"
+				  v-model="value"
+				  placeholder="请选择排序"
+				  :localdata="range"
+				  @change="getList(value)"
+			></uni-data-select>
+		</view> -->
+	    <view class="rnwdList">
+	        <view class="list" @tap="goDetails(item)" v-for="(item, index1) in qbwd" :key="index1">
+	            <span class="listTitle">{{ item.title }}</span>
+	            <view class="onePic">
+	                <image :src="loadImgSrc(item.picture)">
+					</image>
+	            </view>
+			</view>
+			<uni-fab ref="fab" horizontal="right"  style="position: fixed;bottom: 1%;right: 1%;z-index: 200;"
+			         @fabClick="fabClick()"/>
+	    </view>
+		<!-- 新增资讯按钮 -->
+		<!-- <button class="addInfomarionBtn" @click="addInfomation()"></button> -->
 	</view>
 </template>
 
 <script>
+import { getMattersList } from '@/api/me/matters/matters.js'
+// pages/me.js
+export default {
+    data() {
+        return {
+			qbwd:[],
+			listParams:{
+			  pageNum: 1,
+			  pageSize: 7,
+			  title: '',
+			  isTop:0,
+			  type: 11,
+			  flag:''
+			},
+			topList:[],
+			total:0,
+			searchValue:'',
+			favoriteList:[],
+			value: 1,
+			range: [
+				{ value: 'watch', text: "热度" },
+				{ value: 'like', text: "点赞" },
+				{ value: '', text: "最新" },
+			],
+		};
+    },
+	created(){
+		this.getList()
+	},
+	onReachBottom(){
+		let pageNum = this.listParams.pageNum
+		let pageSize = this.listParams.pageSize
+		let total = this.total
+		if(pageNum * pageSize >= total){
+			uni.showToast({
+				title:'暂无更多数据'
+			})
+			return
+		} else {
+			this.listParams.pageNum += 1;
+			this.getList(null,'dropDown')
+		}
+	},
+	methods:{
+		currentFavoriteCount(e){
+			if(this.favoriteList.includes(e.id)){
+				return e.likeNum + 1
+			} else {
+				return e.likeNum
+			}
+		},
+		addFavorite(e){
+			if(this.favoriteList.includes(e.id)) return
+			likeServer({
+				id:e.id,
+				type:11
+			}).then(e => {
+			})
+			this.favoriteList.push(e.id)
+			return
+			if(this.favoriteList.includes(e.id)){
+				// 取消点赞
+				likeServer({
+					id:e.id,
+					type:12
+				})
+				let deleteIdx = this.favoriteList.findIndex((v => v == e.id))
+				this.favoriteList.splice(deleteIdx,1)
+			} else {
+				likeServer({
+					id:e.id,
+					type:12
+				})
+				this.favoriteList.push(e.id)
+			}
+		},
+		cancel(){
+			this.listParams.title = ''
+		},
+		fabClick(){
+			uni.navigateTo({
+				url: `../mattersAdd/mattersAdd`
+			})
+		},
+		search(){
+			this.listParams.title = this.searchValue
+			this.getList()
+		},
+		getList(val = null,type){
+			this.listParams.flag = val || ''
+			switch(type){
+				case 'dropDown':
+				// 上拉
+					getMattersList(this.listParams).then(res => {
+						this.qbwd = [...this.qbwd,...res.rows]
+						this.total = res.total
+					})
+				break;
+				default:
+					this.qbwd = this.topList
+					getMattersList(this.listParams).then(res => {
+						this.qbwd = [...this.qbwd,...res.rows]
+						this.total = res.total
+					})
+				break;
+			}
+		},
+		goDetails(e) {
+			let id = e.id || ''
+			let type = 11
+		    uni.navigateTo({
+		        url: `../mattersDetail/mattersDetail?id=${id}`
+		    });
+		},
+		// 新增资讯
+		addInfomation(){
+			uni.navigateTo({
+			    url: `../informationAdd/informationAdd`
+			});
+		}
+	},
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {},
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {},
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {},
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {},
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {},
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {},
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {},
+};
 </script>
-
-<style>
-</style>
+<style lang="scss">
+@import './matters.css';
+.container{
+	height: 100%;
+}
+.container{
+	height: 100%;
+	content: '\e633';
+}
+.favorite{
+	.icon-shoucang:before{
+		color: red;
+	}
+}
+.not-favorite{
+	
+}
+</style>

pages/mattersAdd/mattersAdd.css

@@ -0,0 +1,4 @@
+.container{
+	width: 100%;
+	height: 100%;
+}

pages/mattersAdd/mattersAdd.vue

@@ -0,0 +1,296 @@
+/*
+ *@description: 新增资讯
+ *@author: yh Fu
+ *@date: 2024-03-04 14:45:49
+ *@version: V1.0.5
+*/
+<template>
+	<view>
+		<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext" class="uniForm">
+			<uni-group title="基本信息" top="0">
+				<uni-forms-item name="name" required label="事项标题">
+					<uni-easyinput type="text" :inputBorder="true" v-model="formData.titleName" placeholder="请输入事项标题"></uni-easyinput>
+				</uni-forms-item>
+				<!-- 使用原生input，需要绑定binddata -->
+				<uni-forms-item name="textDetails" required label="正文">
+					<uni-easyinput type="textarea" v-model="formData.textDetails" :maxlength="50" @blur="binddata('textDetails', $event.detail.value)" placeholder="请输入正文"></uni-easyinput>
+				</uni-forms-item>
+				<uni-forms-item label="电话" required name="phone">
+					<uni-easyinput v-model="formData.phone" placeholder="请输入电话" />
+				</uni-forms-item>
+				<uni-forms-item name="address" required label="地址">
+					<uni-easyinput type="text" :inputBorder="true" v-model="formData.address" placeholder="请输入地址"></uni-easyinput>
+				</uni-forms-item>
+				<uni-forms-item name="checked" label="主题类型" label-width="30%">
+					<uni-data-select
+						  style="width: 30%;margin: auto;"
+						  v-model="formData.type"
+						  placeholder="请选择主题类型"
+						  field="deptName as value, deptName as text"	
+						  :localdata="topicTypeList"
+					></uni-data-select>
+				</uni-forms-item>
+				<uni-forms-item name="checked" label="所属部门" label-width="30%">
+					<uni-data-select
+						  style="width: 30%;margin: auto;"
+						  v-model="formData.department"
+						  placeholder="请选择所属部门"
+						  field="name as value, name as text"	
+						  :localdata="departmentList"
+					></uni-data-select>
+				</uni-forms-item>
+				<uni-forms-item name="checked" label="是否常办" label-width="30%">
+					<switch :checked="formData.isTop" @change="change(' isTop', $event.detail.value)" style="margin-top: 2%;"/>
+				</uni-forms-item>
+				<uni-forms-item name="urlList" required label="图片">
+					<upload :imgArr="imageList" :fileSize="1" :limit="3" @updateImg="updateImg"></upload>
+				</uni-forms-item>
+			</uni-group>
+			<view>
+				<!-- <button  @click="submitForm('form')">校验表单</button>
+				<button size="mini" @click="validateField('form')">只校验用户名和邮箱项</button>
+				<button size="mini" @click="clearValidate('form', 'name')">移除用户名的校验结果</button>
+				<button size="mini" @click="clearValidate('form')">移除全部表单校验结果</button>
+				<button  @click="resetForm">重置表单</button> -->
+				<button  @click="submitForm('form')">新增</button>
+			</view>
+		</uni-forms>
+	</view>
+</template>
+ 
+<script>
+	import { 
+		getListTopicType,
+		getListDepts ,
+	} from '@/api/me/matters/matters.js'
+	import upload from '@/components/upload/index.vue'
+	export default {
+		components: {
+			upload
+		},
+		created(){
+			getListTopicType().then(e => {
+				e.rows.forEach(v => {
+					this.topicTypeList.push({
+						text:v.deptName,
+						value:v.id
+					})
+				})
+			})
+			getListDepts().then(e => {
+				e.rows.forEach(v => {
+					this.departmentList.push({
+						text:v.name,
+						value:v.name
+					})
+				})
+			})
+		},
+		data() {
+			return {
+				formData: {
+					titleName: '',
+					textDetails: '',
+					address:'',
+					phone:'',
+					email: '',
+					sex: '0',
+					hobby: [0, 2],
+					remarks: '热爱学习，热爱生活',
+					isGovernment: false,
+					isTop: false,
+					country: 2,
+					weight: 120,
+					birth: '',
+					type:'',
+					department:''
+				},
+				imageList:[],
+				topicTypeList:[],
+				departmentList:[],
+				sex: [{
+						text: '男',
+						value: '0'
+					},
+					{
+						text: '女',
+						value: '1'
+					},
+					{
+						text: '未知',
+						value: '2'
+					}
+				],
+				hobby: [{
+						text: '足球',
+						value: 0
+					},
+					{
+						text: '篮球',
+						value: 1
+					},
+					{
+						text: '游泳',
+						value: 2
+					}
+				],
+				range: ['中国', '美国', '澳大利亚'],
+				show: false,
+				rules: {
+					titleName: {
+						rules: [{
+								required: true,
+								errorMessage: '请输入标题'
+							},
+							{
+								minLength: 1,
+								errorMessage: '标题不得为空'
+							}
+						]
+					},
+					textDetails: {
+						rules: [{
+								required: true,
+								errorMessage: '请输入正文'
+							},
+							{
+								minLength: 10,
+								errorMessage: '正文不得少于 {minLength} 字'
+							}
+						]
+					},
+					weight: {
+						rules: [{
+								format: 'number',
+								errorMessage: '体重必须是数字'
+							},
+							{
+								minimum: 100,
+								maximum: 200,
+								errorMessage: '体重应该大于 {minimum} 斤，小于 {maximum} 斤'
+							}
+						]
+					},
+					birth: {
+						rules: [
+							{
+								required: true,
+								errorMessage: '请选择时间'
+							},
+							{
+								format: 'timestamp',
+								errorMessage: '必须是时间戳'
+							}
+						]
+					},
+					email: {
+						rules: [{
+							format: 'email',
+							errorMessage: '请输入正确的邮箱地址'
+						}]
+					},
+					isGovernment: {
+						rules: [{
+							format: 'bool'
+						}]
+					},
+					isTop: {
+						rules: [{
+							format: 'bool'
+						}]
+					},
+					sex: {
+						rules: [{
+							format: 'string'
+						}]
+					},
+					hobby: {
+						rules: [{
+								format: 'array'
+							},
+							{
+								validateFunction: function(rule, value, data, callback) {
+									if (value.length < 2) {
+										callback('请至少勾选两个兴趣爱好')
+									}
+									return true
+								}
+							}
+						]
+					}
+				}
+			}
+		},
+		methods: {
+			change(name, value) {
+				this.formData.checked = value
+				this.$refs.form.setValue(name, value)
+			},
+ 
+			submitForm(form) {
+				this.$refs[form]
+					.submit()
+					.then(res => {
+						console.log('表单的值：', res)
+						uni.showToast({
+							title: '验证成功'
+						})
+					})
+					.catch(errors => {
+						console.error('验证失败：', errors)
+					})
+			},
+ 
+			//重置表单 。原生的组件input组件不能重置表单
+			resetForm() {
+				this.$refs.form.resetFields()
+			},
+			validateField(form) {
+				this.$refs[form]
+					.validateField(['name', 'email'])
+					.then(res => {
+						uni.showToast({
+							title: '验证成功'
+						})
+						console.log('表单的值：', res)
+					})
+					.catch(errors => {
+						console.error('验证失败：', errors)
+					})
+			},
+			updateImg(imgList){
+				this.imageList = imgList;
+			},
+			clearValidate(form, name) {
+				if (!name) name = []
+				this.$refs[form].clearValidate(name)
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	.uniForm{
+		.uni-forms-item{
+			margin: auto;
+			.uni-forms-item__content{
+				margin: auto;
+			}
+		}
+	}
+	.radioView{
+		margin: auto;
+		.uni-forms-item__content{
+			margin: auto;
+		}
+	}
+	.uni-input-border {
+		padding: 0 10px;
+		height: 35px;
+		width: 100%;
+		font-size: 14px;
+		color: #666;
+		border: 1px #e5e5e5 solid;
+		border-radius: 5px;
+		box-sizing: border-box;
+	}
+</style>

pages/mattersDetail/mattersDetail.css

@@ -0,0 +1,161 @@
+/* pages/wenbaxiangqing.wxss */
+.title {
+    font-size: 44rpx;
+    text-align: center;
+    line-height: 70rpx;
+    color: #333;
+    margin: 30rpx 0;
+}
+.wenzhangLy {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 14rpx 0;
+}
+.txTime {
+    display: flex;
+    flex-direction: row;
+}
+.txTime image {
+    width: 80rpx;
+    height: 80rpx;
+}
+.time {
+    display: flex;
+    flex-direction: column;
+    padding: 10rpx 0 0 8px;
+}
+.time p {
+    font-size: 28rpx;
+    color: #9c9c9c;
+}
+.time span {
+    font-size: 24rpx;
+    color: #c4c4c4;
+}
+
+.jf {
+    color: #07c160;
+    line-height: 80rpx;
+    font-size: 24rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+    font-size: 28rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.ck .icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+    line-height: 0;
+}
+.wenzhangCont {
+	width: 100vw;
+    font-size: 34rpx;
+    margin: 30rpx 0;
+}
+.wenzhangCont image {
+    width: 100%;
+    height: 320rpx;
+    margin: 20rpx auto;
+}
+.pinglunTj {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0;
+}
+.pinglunTitle {
+    font-size: 34rpx;
+    color: #2e2e2e;
+    font-weight: 600;
+}
+.pinglunTitle em {
+    font-size: 34rpx;
+    color: #9b9b9b;
+    font-weight: normal;
+    margin: 0 0 0 10rpx;
+}
+.pinglunList {
+    width: 100%;
+    padding: 0 0 120rpx 0;
+}
+.pinglunList li {
+    margin: 20rpx 0;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 20rpx 0;
+    display: flex;
+    flex-direction: column;
+}
+.plListcont {
+    font-size: 30rpx;
+    color: #696868;
+    margin: 20rpx 0;
+}
+.pinglunList li button {
+    width: 80%;
+    border-radius: 10rpx;
+    background: #07c160;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: normal;
+    margin: 16rpx auto;
+}
+.fabiaoPl {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 112rpx;
+    background: #e8e8e8;
+    box-shadow: 0rpx 0rpx 16rpx #999;
+}
+.shuRu {
+    width: 72%;
+    display: flex;
+    flex-direction: row;
+    height: 76rpx;
+    background: #e0e0e0;
+    border-radius: 60rpx;
+    margin: 20rpx 0 0 20rpx;
+}
+.shuRu input {
+    line-height: 38px;
+    height: 76rpx;
+    font-size: 30rpx;
+    width: 83%;
+}
+.icon-bianji {
+    font-size: 38rpx;
+    line-height: 76rpx;
+    margin: 0 10rpx 0 20rpx;
+    color: #828181;
+}
+.icon-shoucang {
+    font-size: 50rpx;
+    line-height: 112rpx;
+    color: #828181;
+}
+.fasong {
+    width: 58rpx;
+    height: 58rpx;
+    border-radius: 50rpx;
+    background: #07c160;
+    margin: 26rpx 20rpx 0 10rpx;
+    text-align: center;
+    line-height: 58rpx;
+}
+.icon-fasong {
+    font-size: 40rpx;
+    color: #fff;
+}

pages/mattersDetail/mattersDetail.vue

@@ -0,0 +1,253 @@
+<template>
+    <view>
+        <!-- pages/me.wxml -->
+        <view class="container">
+            <h1 class="title">{{ detailInfo.titleName }}</h1>
+            <view class="wenzhangLy">
+                <!-- 头像昵称 -->
+                <view class="txTime">
+                    <image :src="loadImgSrc(detailInfo.headImg!=null?detailInfo.headImg:'/profile/upload/2024/03/05/abf969632ee94bd5a429c8c2dbb2f6b4 (1)_20240305092823A002.png')" style="border-radius: 50px;"></image>
+                    <view class="time">
+                        <p>{{detailInfo.department?detailInfo.department:'网友'}}</p>
+                        <span>{{ detailInfo.createTime }}</span>
+                    </view>
+                </view>
+                <!-- 积分 -->
+<!--                <span class="jf">100</span> -->
+            </view>
+            <view class="wenzhangCont article">
+                <span v-html="detailInfo.content">
+                </span>
+			
+                <view >
+                    <image :src="loadImgSrc(detailInfo.picture)"  style="background-size: 100% 100%;"></image>
+                </view>
+            </view>
+			
+			
+        </view>
+	</view>
+</template>
+
+<script>
+import { 
+	getMattersDetail 
+} from '@/api/me/matters/matters.js'
+export default {
+    data() {
+        return {
+			anwserVal:'',
+			anwserList:[
+				{
+					deptName:'国家乡村振兴局',
+					updateTime:'2023-2-27 16:04',
+					desc:'用好政策效果评估成果，进一步优化巩固拓展脱贫攻坚成果同乡村振兴有效衔接政策供给，为推动工作提质增效提供有力支撑保障。',					
+				}
+			],
+			isCollection:false,
+			isAdopt:false,
+			adoptTopSize:'115',
+			adoptIndex:null,
+			detailInfo:{},
+        };
+    },
+	methods: {
+		// 评论回答
+		answerFunc(){
+			this.anwserList.push({
+				deptName:'国家烟草局',
+				updateTime:new Date().getFullYear() + "-" + new Date().getMonth() + "-" + new Date().getDay() + " " + (new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours()) + ':' + (new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()),
+				desc:this.anwserVal,		
+			})
+			this.anwserVal = null
+		},
+		adoptFunc(idx){
+			this.adoptIndex = idx
+			this.isAdopt = true
+		},
+		// 标记喜欢
+		collectionFunc(){
+			this.isCollection = !this.isCollection
+		},
+		// 加工图片路径
+		srcExcutedFunc(html){
+			let newReg = /(?<=(src="))[^"]*?(?=")/ig;
+			let newHtml = html
+			var allSrc = html.match(newReg);
+			try{
+				if(allSrc.length != 0){
+					allSrc.forEach(e => {
+						newHtml = newHtml.replace(e,this.loadImgSrc(e))
+					})
+				} 
+			}catch(e){
+				//TODO handle the exception
+			}
+			
+			return newHtml
+		}
+	}
+    /**
+     * 生命周期函数--监听页面加载
+     */,
+    onLoad(options) {
+		getMattersDetail(options.id).then(res => {
+			debugger
+			let result = res.data
+			// result.textDetails = this.srcExcutedFunc(result.textDetails)
+			this.detailInfo = result
+		})
+	},
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady(e) {  
+	}, 
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {},
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {},
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {},
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {},
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {},
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {},
+};
+</script>
+<style lang="scss">
+@import './mattersDetail.css';
+
+.collect{
+	.icon-shoucang:before{
+		color: red;
+	}
+}
+.not-collect{
+	
+}
+.effectBix{
+	width: 56px;
+	height: 56px;
+	border-radius: 50px;
+	font-family: 'Bebas Neue', cursive;
+	background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+	border: 0;
+	color: #fff;
+	text-align: center;
+	line-height: 56px;
+	outline: transparent;
+	position: absolute;
+	transform: rotate(-30deg);
+	right:3%;
+	top: -5%;
+}
+
+.effectBox, .effectBox::after {
+  width: 56px;
+  height: 56px;
+  border-radius: 50px;
+  font-size: 16px;
+  font-family: 'Bebas Neue', cursive;
+  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+  border: 0;
+  color: #fff;
+  opacity: 1;
+  letter-spacing: 3px;
+  text-align: center;
+  line-height: 56px;
+  outline: transparent;
+  position: relative;
+  left: 78%;
+  top: 113%;
+  transform: rotate(-30deg);
+  z-index: 1;
+}
+
+.effectBox::after {
+  --slice-0: inset(50% 50% 50% 50%);
+  --slice-1: inset(80% -6px 0 0);
+  --slice-2: inset(50% -6px 30% 0);
+  --slice-3: inset(10% -6px 85% 0);
+  --slice-4: inset(40% -6px 43% 0);
+  --slice-5: inset(80% -6px 5% 0);
+  
+  content: 'AVAILABLE NOW';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
+  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
+  clip-path: var(--slice-0);
+}
+
+.effectBox:hover::after {
+  animation: 1s glitch;
+  animation-timing-function: steps(2, end);
+}
+
+@keyframes glitch {
+  0% {
+    clip-path: var(--slice-1);
+    transform: translate(-20px, -10px);
+  }
+  10% {
+    clip-path: var(--slice-3);
+    transform: translate(10px, 10px);
+  }
+  20% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 10px);
+  }
+  30% {
+    clip-path: var(--slice-3);
+    transform: translate(0px, 5px);
+  }
+  40% {
+    clip-path: var(--slice-2);
+    transform: translate(-5px, 0px);
+  }
+  50% {
+    clip-path: var(--slice-3);
+    transform: translate(5px, 0px);
+  }
+  60% {
+    clip-path: var(--slice-4);
+    transform: translate(5px, 10px);
+  }
+  70% {
+    clip-path: var(--slice-2);
+    transform: translate(-10px, 10px);
+  }
+  80% {
+    clip-path: var(--slice-5);
+    transform: translate(20px, -10px);
+  }
+  90% {
+    clip-path: var(--slice-1);
+    transform: translate(-10px, 0px);
+  }
+  100% {
+    clip-path: var(--slice-1);
+    transform: translate(0);
+  }
+}
+
+</style>