文章列表、首页文章功能

src/api/article.js

@@ -1,5 +1,10 @@
 import request from '@/utils/request'
 
+/**
+ * 文章列表
+ * @param query
+ * @returns {*}
+ */
 export function fetchArticleList(query) {
   return request({
     url: '/v1/article/list',
@@ -8,10 +13,27 @@ export function fetchArticleList(query) {
   })
 }
 
-export function fetchArticle(id) {
+/**
+ * 文章详情
+ * @param id
+ * @returns {*}
+ */
+export function fetchArticleOne(id) {
   return request({
-    url: '/v1/article/detail',
+    url: `/v1/article/detail`,
     method: 'get',
     params: { id }
   })
 }
+
+/**
+ * 文章分类
+ * @returns {*}
+ */
+export function fetchCategory() {
+  return request({
+    url: '/v1/article/category',
+    method: 'get',
+    params: {}
+  })
+}

src/lang/en.js

@@ -315,7 +315,9 @@ export default {
   },
   article: {
     title: 'Title',
+    category: 'Category',
     createTime: 'Create Time',
+    systemNotification: 'System Notification',
   },
   bonus: {
     payCycle: 'Pay Cycle',

src/lang/zh.js

@@ -311,6 +311,8 @@ export default {
   article: {
     title: '标题',
     createTime: '发布时间',
+    category: '类型',
+    systemNotification: '系统通知',
   },
   bonus: {
     payCycle: '期数',

src/views/article/article-list.vue

@@ -4,32 +4,48 @@
       :key="tableKey"
       v-loading="listLoading"
       :data="list"
-      border
       fit
       highlight-current-row
-      style="width: 100%;"
     >
       <el-table-column align="center" :label="$t('article.title')" prop="TITLE">
         <template slot-scope="{row}">
-          <span>{{ row.TITLE }}</span>
+          <span @click="handleArticle(row.ID)">
+						<el-link type="primary" href="#" target="_self" >{{ row.TITLE }}</el-link>
+					</span>
         </template>
       </el-table-column>
+			<el-table-column align="center" :label="$t('article.category')" prop="CATE_NAME">
+				<template slot-scope="{row}">
+          {{ row.CATE_NAME }}
+				</template>
+			</el-table-column>
       <el-table-column align="center" :label="$t('article.createTime')" prop="CREATED_AT">
         <template slot-scope="{row}">
-          <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
+
+		<el-dialog :title="article.TITLE" :visible.sync="dialog" :width="screenWidth" v-loading="loading" center style="margin-top: -70px;">
+			<div class="white-box" style="text-align: center;">
+				<div class="white-box-title">
+					<h1>{{ article.TITLE }}</h1>
+					<span>{{ article.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+				</div>
+				<div v-html="article.CONTENT" class="white-box-content">
+				</div>
+			</div>
+		</el-dialog>
   </div>
 </template>
 
 <script>
-import { fetchArticleList,fetchArticle } from '@/api/article'
+import {fetchArticleList, fetchArticleOne, fetchCategory} from '@/api/article'
 import waves from '@/directive/waves'
-import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination'
+import {getScreenWidth} from "@/utils"
 
 export default {
   name: 'articleList',
@@ -45,10 +61,21 @@ export default {
 				page: 1,
 				pageSize: 20
 			},
+			loading: false,
+			dialog: false,
+			article: {
+				ID: '',
+				CID: '',
+				TITLE: '',
+				CONTENT: '',
+				CREATED_AT: '',
+			},
+
+			screenWidth: getScreenWidth() > 600 ? '70%' : getScreenWidth() + 'px',
+			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
     }
   },
   created() {
-    // 列表查询
     this.getList()
   },
   methods: {
@@ -60,9 +87,26 @@ export default {
 
         setTimeout(() => {
           this.listLoading = false
-        }, 1.5 * 1000)
+        }, 0.5 * 1000)
       })
     },
+		handleArticle(id) {
+			this.loading = true
+			this.listLoading = true
+			fetchArticleOne(id).then(response => {
+				this.article = response.data
+				this.dialog = true
+				this.listLoading = false
+				setTimeout(() => {
+					this.loading = false
+				}, 0.5 * 1000)
+			})
+		},
   }
 }
 </script>
+
+<style scoped>
+.white-box-title span{color: #999}
+.white-box-content{font-size: 16px;padding: 15px 0;line-height: 2;}
+</style>

src/views/dashboard/admin/index.vue

@@ -21,19 +21,25 @@
     <el-row :gutter="40">
       <el-col :xs="24" :sm="24" :lg="12" v-for="(item,key) in news" :key="key">
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>{{$t('dashboard.articleNotification')}}</span>
-            <el-button type="text" class="box-card-more">
-              <router-link :to="`/article/list/${item.ID}`">{{$t('dashboard.more')}}+</router-link>
-            </el-button>
-          </div>
-          <template v-if="item.LISTS.length>0">
-            <div v-for="(o,k) in item.LISTS" :key="k" class="text item">
-              <router-link :to="`/article/detail/${o.ID}`" :title="o.TITLE">{{sub_str(o.TITLE)}}</router-link>
-              <span>{{ formatDate(o.CREATED_AT) }}</span>
-            </div>
-          </template>
-          <div v-if="item.LISTS.length==0">No content</div><!--暂无内容-->
+					<el-table :data="item.LISTS" lazy stripe fit highlight-current-row>
+						<el-table-column align="left" :label="$t('article.title')" prop="TITLE">
+							<template slot-scope="{row}">
+								<span @click="handleArticle(row.ID)">
+									<el-link type="primary" href="#" target="_self" >{{ row.TITLE }}</el-link>
+								</span>
+							</template>
+						</el-table-column>
+						<el-table-column align="right">
+							<template slot="header" slot-scope="scope">
+								<el-button type="text" class="box-card-more">
+									<router-link :to="`/article/article-list`">{{$t('dashboard.more')}}+</router-link>
+								</el-button>
+							</template>
+							<template slot-scope="{row}">
+								<span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d}') }}</span>
+							</template>
+						</el-table-column>
+					</el-table>
         </el-card>
       </el-col>
     </el-row>
@@ -48,6 +54,17 @@
         <box-card />
       </el-col>
     </el-row> -->
+
+		<el-dialog :title="article.TITLE" :visible.sync="dialog" :width="screenWidth" v-loading="loading" center style="margin-top: -70px;">
+			<div class="white-box" style="text-align: center;">
+				<div class="white-box-title">
+					<h1>{{ article.TITLE }}</h1>
+					<span>{{ article.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+				</div>
+				<div v-html="article.CONTENT" class="white-box-content">
+				</div>
+			</div>
+		</el-dialog>
   </div>
 </template>
 
@@ -62,6 +79,8 @@ import TransactionTable from './components/TransactionTable'
 import TodoList from './components/TodoList'
 import BoxCard from './components/BoxCard'
 import tool from '@/utils/tool'
+import {getScreenWidth} from "@/utils";
+import {fetchArticleOne} from "@/api/article";
 
 const lineChartData = {
   newVisitis: {
@@ -113,7 +132,20 @@ export default {
       cycle: '',//当前业绩期
       rmBv: '',
       endTime: '',
-      num: 0
+      num: 0,
+
+			loading: false,
+			dialog: false,
+			article: {
+				ID: '',
+				CID: '',
+				TITLE: '',
+				CONTENT: '',
+				CREATED_AT: '',
+			},
+
+			screenWidth: getScreenWidth() > 600 ? '70%' : getScreenWidth() + 'px',
+			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
     }
   },
   methods: {
@@ -138,7 +170,19 @@ export default {
     },
     formatDate(data) {
       return tool.formatDate(data,false)
-    }
+    },
+		handleArticle(id) {
+			this.loading = true
+			this.listLoading = true
+			fetchArticleOne(id).then(response => {
+				this.article = response.data
+				this.dialog = true
+				this.listLoading = false
+				setTimeout(() => {
+					this.loading = false
+				}, 0.5 * 1000)
+			})
+		},
   },
   mounted() {
     this.$store.dispatch('dashboard/getIndex', {})

src/views/finance/recharge-list.vue

@@ -16,7 +16,7 @@
 			<el-table-column align="center" :label="$t('finance.bankAccount')" prop="BANK_NO"></el-table-column>
 			<el-table-column align="center" :label="$t('finance.printVoucher')" min-width="100px">
 				<template slot-scope="{row}">
-					<el-button type="primary" size="mini" v-if="row.AUDIT_STATUS === '0'" @click="handleUpload(row)">{{ $t('finance.uploadVoucher') }}</el-button>
+					<el-button type="primary" size="mini" v-if="row.AUDIT_STATUS === '0'" @click="handleUpload(row.ID)">{{ $t('finance.uploadVoucher') }}</el-button>
 					<el-button type="success" size="mini" v-if="row.AUDIT_STATUS !== '0'" @click="handleView(row)">{{ $t('finance.viewVoucher') }}</el-button>
 				</template>
 			</el-table-column>
@@ -62,15 +62,17 @@
 		</el-dialog>
 
 		<el-dialog :title="$t('finance.uploadVoucher')" :visible.sync="uploadVoucher" :width="screenWidth" style="margin-top: -70px;">
-			<el-upload action="#" list-type="picture-card" :auto-upload="false">
-				<i slot="default" class="el-icon-plus"></i>
-				<div slot="file" slot-scope="{file}">
-					<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-				</div>
+			<el-upload
+				class="avatar-uploader"
+				:action="uploadUrl"
+				:show-file-list="false"
+				:data="uploaderData"
+				:on-success="handleSuccess"
+				:before-upload="beforeUpload"
+				:on-error="handleError">
+				<img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" />
+				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
 			</el-upload>
-			<el-dialog :visible.sync="dialogVisible">
-				<img width="100%" :src="dialogImageUrl" alt="">
-			</el-dialog>
 		</el-dialog>
 	</div>
 </template>
@@ -136,7 +138,11 @@ export default {
 
 			voucherLoading: false,
 			uploadVoucher: false,
-
+			imageUrl: '',
+			uploadUrl: '',
+			uploaderData: {
+				uploadToken: '',
+			},
 		}
 	},
 	created() {
@@ -195,20 +201,76 @@ export default {
 		onCancel() {
 			this.dialog = false
 			this.$refs['form'].resetFields()
-		},
-		handleUpload() {
-
 		},
 		handleView(row) {
 			this.voucher = tool.getArImage(row.BANK_PROVE, 'files/')
 			this.auditId = row.ID
 			this.viewVoucher = true
-			console.log('this.voucher', this.voucher)
 		},
 		uploadAgain(id) {
+			this.viewVoucher = false
+			this.handleUpload(id)
+		},
+		handleUpload(id) {
 			// 获取上传token
-			fetchToken()
+			fetchToken().then(response => {
+				this.uploaderData.uploadToken = response.data
+
+				setTimeout(() => {
+					this.listLoading = false
+				}, 0.5 * 1000)
+			})
+
+			this.auditId = id
+			this.uploadUrl = `${process.env.VUE_APP_BASE_API}/v1/finance/prove-add?id=${this.auditId}`
+			this.uploadVoucher = true
+		},
+		handleSuccess(res, file) {
+			this.imageUrl = URL.createObjectURL(file.raw);
+		},
+		beforeUpload(file) {
+			const typeAllowed = ['image/jpeg', 'image/jpg', 'image/png']
+			const isLt2M = file.size / 1024 / 1024 < 2
+			if (!typeAllowed.includes(file.type)) {
+				this.$message.error('图片只能是 JPG/JPEG/PNG 格式!')
+				return false
+			}
+			if (!isLt2M) {
+				this.$message.error('图片大小不能超过 2MB!')
+				return false
+			}
+
+			return true
+		},
+		handleError(err, file) {
+			console.log(err, file)
 		},
 	}
 }
 </script>
+
+<style>
+.avatar-uploader .el-upload {
+	border: 1px dashed #d9d9d9;
+	border-radius: 6px;
+	cursor: pointer;
+	position: relative;
+	overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+	border-color: #409EFF;
+}
+.avatar-uploader-icon {
+	font-size: 28px;
+	color: #8c939d;
+	width: 178px;
+	height: 178px;
+	line-height: 178px;
+	text-align: center;
+}
+.avatar {
+	width: 178px;
+	height: 178px;
+	display: block;
+}
+</style>