You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
5.0 KiB
161 lines
5.0 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
|
<title>黑马点评</title> |
|
<!-- 引入样式 --> |
|
<link rel="stylesheet" href="./css/element.css"> |
|
<link href="./css/main.css" rel="stylesheet"> |
|
<link href="./css/blog-edit.css" rel="stylesheet"> |
|
|
|
<style type="text/css"> |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<div id="app"> |
|
<div class="header"> |
|
<div class="header-cancel-btn" @click="goBack">取消</div> |
|
<div class="header-title"> 发笔记<i class="el-icon-info"></i></div> |
|
<div class="header-commit"> |
|
<div class="header-commit-btn" @click="submitBlog">发布</div> |
|
</div> |
|
</div> |
|
<div class="upload-box"> |
|
<input type="file" @change="fileSelected" name="file" ref="fileInput" style="display: none"> |
|
<div class="upload-btn" @click="openFileDialog"> |
|
<i class="el-icon-camera"></i> |
|
<div style="font-size: 12px;line-height: 12px">上传照片</div> |
|
</div> |
|
<div class="pic-list"> |
|
<div class="pic-box" v-for="(f,i) in fileList" :key="i"> |
|
<img :src="f" alt=""> |
|
<i class="el-icon-close" @click="deletePic(i)"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="blog-title"> |
|
<input v-model="params.title" type="text" placeholder="填写标题更容易上首页哦~"> |
|
</div> |
|
<div class="blog-content"> |
|
<textarea v-model="params.content" placeholder="最近打卡了什么地方，有什么新奇体验呢？"></textarea> |
|
</div> |
|
<div class="divider"></div> |
|
<div class="blog-shop" @click="showDialog=true"> |
|
<div class="shop-left">关联商户</div> |
|
<div v-if="selectedShop.name">{{selectedShop.name}}</div> |
|
<div v-else>去选择 <i class="el-icon-arrow-right"></i></div> |
|
</div> |
|
<div class="mask" v-show="showDialog" @click="showDialog=false"></div> |
|
|
|
<transition name="el-zoom-in-bottom"> |
|
<div class="shop-dialog" v-show="showDialog"> |
|
<div class="blog-shop"> |
|
<div class="shop-left">关联商户</div> |
|
</div> |
|
<div class="search-bar"> |
|
<div class="city-select">杭州 <i class="el-icon-arrow-down"></i></div> |
|
<div class="search-input"> |
|
<i class="el-icon-search" @click="queryShops"></i> |
|
<input v-model="shopName" type="text" placeholder="搜索商户名称"> |
|
</div> |
|
</div> |
|
<div class="shop-list"> |
|
<div v-for="s in shops" class="shop-item" @click="selectShop(s)"> |
|
<div class="shop-name">{{s.name}}</div> |
|
<div>{{s.area}}</div> |
|
</div> |
|
</div> |
|
</div> |
|
</transition> |
|
</div> |
|
<script src="./js/vue.js"></script> |
|
<script src="./js/axios.min.js"></script> |
|
<!-- 引入组件库 --> |
|
<script src="./js/element.js"></script> |
|
<script src="./js/common.js"></script> |
|
<script src="./js/footer.js"></script> |
|
<script> |
|
|
|
const app = new Vue({ |
|
el: "#app", |
|
data() { |
|
return { |
|
util, |
|
fileList: [], // 文件列表 |
|
params: {}, |
|
showDialog: false, // |
|
shops: [], // 商户信息 |
|
shopName: "", //商户名称 |
|
selectedShop: {}, // 选中的商户 |
|
} |
|
}, |
|
created() { |
|
this.checkLogin(); |
|
this.queryShops(); |
|
}, |
|
methods: { |
|
queryShops() { |
|
axios.get("/shop/of/name?name=" + this.shopName) |
|
.then(({data}) => this.shops = data) |
|
.catch(this.$message.error) |
|
}, |
|
selectShop(s) { |
|
this.selectedShop = s; |
|
this.showDialog = false; |
|
}, |
|
submitBlog() { |
|
let {...data} = this.params; |
|
data.images = this.fileList.join(","); |
|
data.shopId = this.selectedShop.id; |
|
axios.post("/blog", data) |
|
.then(resp => location.href = "/info.html") |
|
.catch(this.$message.error) |
|
}, |
|
openFileDialog() { |
|
this.$refs.fileInput.click(); |
|
}, |
|
fileSelected() { |
|
let file = this.$refs.fileInput.files[0]; |
|
let formData = new FormData(); |
|
formData.append("file", file); |
|
const config = { |
|
headers: {"Content-Type": "multipart/form-data;boundary=" + new Date().getTime()} |
|
}; |
|
axios |
|
.post("/upload/blog", formData, config) |
|
.then(({data}) => this.fileList.push('/imgs' + data)) |
|
.catch(this.$message.error); |
|
}, |
|
deletePic(i) { |
|
axios.get("/upload/blog/delete?name=" + this.fileList[i]) |
|
.then(() => this.fileList.splice(i, 1)) |
|
.catch(this.$message.error) |
|
}, |
|
checkLogin() { |
|
// 获取token |
|
let token = sessionStorage.getItem("token"); |
|
if (!token) { |
|
location.href = "login.html" |
|
} |
|
// 查询用户信息 |
|
axios.get("/user/me") |
|
.then() |
|
.catch(err => { |
|
this.$message.error(err); |
|
setTimeout(() => location.href = "login.html", 200) |
|
}) |
|
}, |
|
goBack() { |
|
history.back(); |
|
}, |
|
handleRemove(file) { |
|
console.log(file); |
|
} |
|
}, |
|
|
|
}) |
|
</script> |
|
</body> |
|
</html> |