增加广告图片上传

src/components/ad/ad.css

@@ -0,0 +1,32 @@
+/* ad */
+.first-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 50px;
+}
+
+.third-row {
+	margin-top: 10px;
+}
+
+.tag {
+	width: 108px;
+	height: 40px;
+	font-size: 24px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: bold;
+	color: #000000;
+	line-height: 54px;
+}
+
+.left-margin {
+	margin-left: 30px;
+}
+
+.tip {
+	font-size: 22px;
+	font-family: Microsoft YaHei-3970(82674968);
+	font-weight: 400;
+	color: #010101;
+}

src/components/ad/ad.vue

@@ -0,0 +1,100 @@
+<template>
+	<div>
+		<el-row>
+			<el-col :span="24" class="first-row">
+				<div class="tag">广告管理</div>
+			</el-col>
+		</el-row>
+		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
+		<el-row>
+			<el-col :span="12" class="third-row">
+				<el-link type="danger">{{send_url}}</el-link>
+				<el-upload ref="upload_send" :limit="1" :auto-upload="false" list-type="picture" accept=".jpg"
+					action="#" :multiple="false">
+					<el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
+					<el-button style="margin-left: 10px;" size="small" type="success" @click="send_ad">上传到服务器
+					</el-button>
+					<div slot="tip" class="el-upload__tip">提示：仅允许上传多1个".jpg"文件，且不超过500kb</div>
+				</el-upload>
+			</el-col>
+			<el-col :span="12" class="third-row">
+				<el-link type="danger">{{modify_url}}</el-link>
+				<el-upload ref="upload_modi" :limit="1" :auto-upload="false" list-type="picture" accept=".jpg"
+					action="#" :multiple="false">
+					<el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
+					<el-button style="margin-left: 10px;" size="small" type="success" @click="modify_ad">上传到服务器
+					</el-button>
+					<div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过500kb</div>
+				</el-upload>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				send_url: '上传成功显示URL',
+				modify_url: '修改成功显示URL'
+			}
+		},
+		methods: {
+			/**
+			 * 上传广告图片
+			 */
+			send_ad() {
+				var _this = this
+				let file = this.$refs.upload_send.uploadFiles.pop().raw; //这里获取上传的文件对象
+				let formData = new FormData();
+				formData.append("myFile", file);
+				formData.append("url_name", '水电广告');
+				formData.append("remark", '备注');
+				this.$axios.post('/shuidian/HotWaters/adverthimage.action', formData)
+					.then(res => {
+						// console.log(res.data);
+						if (res.data.code == 200) {
+							_this.$message.success(res.data.message);
+							_this.send_url = res.data.url;
+						} else {
+							_this.$message.warning(res.data.messag);
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【上传图片】请求异常: ' + err);
+					})
+			},
+			/**
+			 * 修改广告图片
+			 */
+			modify_ad() {
+				var _this = this
+				let file = this.$refs.upload_modi.uploadFiles.pop().raw; //这里获取上传的文件对象
+				let formData = new FormData();
+				formData.append("myFile", file);
+				formData.append("url_name", '修改水电广告');
+				formData.append("remark", '备注修改图片');
+				formData.append("id", 1);
+				this.$axios.post('/shuidian/HotWaters/adverth_uimage.action', formData)
+					.then(res => {
+						// console.log(res.data);
+						if (res.data.code == 200) {
+							_this.$message.success(res.data.message);
+							_this.modify_url = res.data.url;
+						} else {
+							_this.$message.warning(res.data.messag);
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('【修改图片】请求异常: ' + err);
+					})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	@import url("ad.css");
+</style>

src/components/index/Index.css

@@ -126,6 +126,13 @@
 	background-size: cover;
 }
 
+.el-menu-item .el-icon-ad {
+	width: 27px;
+	height: 27px;
+	background: url(../../../static/images/ad.png) center center no-repeat;
+	background-size: contain;
+}
+
 .diwen {
 	margin: 30px 0 0 76px;
 	width: 176px;

src/components/index/Index.vue

@@ -69,6 +69,12 @@
 								<span slot="title">账号管理</span>
 							</el-menu-item>
 						</router-link>
+						<router-link to="ad">
+							<el-menu-item index="/index/ad">
+								<i class="el-icon-ad"></i>
+								<span slot="title">广告管理</span>
+							</el-menu-item>
+						</router-link>
 					</el-menu>
 				</el-col>
 			</el-row>

src/router/index.js

@@ -11,6 +11,7 @@ import FLSZ from '@/components/feilvset/feilvset' // 费率设置
 import YSYC from '@/components/yongshuiyichang/yongshuiyichang' // 用水异常
 import ZFYC from '@/components/zhifuyichang/zhifuyichang' // 支付异常
 import ZHGL from '@/components/zhuanghaoguanli/zhuanghaoguanli' // 账户管理
+import AD from '@/components/ad/ad' // 广告管理
 
 Vue.use(Router)
 
@@ -62,6 +63,10 @@ export default new Router({
 			path: 'zhgl',
 			name: 'ZHGL',
 			component: ZHGL // 账户管理
+		}, {
+			path: 'ad',
+			name: 'AD',
+			component: AD // 广告管理
 		}]
 	}]
 })