前端基于YDUI框架开发
<template>
<div class="discuss">
<div style="">
<yd-cell-group>
<yd-cell-item>
<yd-textarea
slot="right"
placeholder="发布你的晒图，最多1000字哦..."
maxlength="140"
v-model="value1"
></yd-textarea>
</yd-cell-item>
</yd-cell-group>
<ul style="padding: 0.2rem 0.25rem;;display: flex;border-top: 1px solid #eaeaea">
<li class="discussImg discussImgAdd">
＋
<input
name="file"
type="file"
class="upload"
accept="image/png,image/gif,image/jpeg,image/jpg"
@change="uploadAvatar($event)"
/>
</li>
<li
class="discussImg"
v-for="(item, key) in circleArr2"
>
<img
:src="item"
class="discussImg1"
alt=""
>
</li>
</ul>
</div>
<div class="tijiao" @click="pinlun">提交</div>
</div>
</template>
<script>
export default {
data() {
return {
value1:'',
img:[],
storeXq1:{},
circleArr2: [],
}
},
methods: {
doinfo (e,a,b) {
var data = {
'store_id': e,
'longitude': a,
'latitude': b,
}
this.$api.shuStoreXq(data, res => {
this.storeXq1 = res.data
})
},
pinlun () {
var data = {
'store_id': this.id,
'comment': this.value1,
'type': 2,
'score': this.rate7,
'is_dis': 1,
'images': this.circleArr2,
}
console.log(this.value1)
this.$api.pinlun(data, res => {
this.pinlunList = res.data;
// console.log("写评论",res.data)
})
if(this.value1 != ''){
// console.log('提交',this.value1)
this.$router.push({path: '/shuStoreDetail', query: {store_id:this.id}});
}
},
uploadAvatar(e) {
let file = e.target.files[0];
let param = new FormData();
param.append("upfile", file, file.name);
this.$api.uploadFile("image", param, res => {
if (res.status) {
let avatar = res.data.url; // 上传成功的图片地址
this.circleArr2.push(avatar);
}
});
},
},
created () {
this.id = this.$route.query.store_id
this.doinfo(this.$route.query.store_id,30.539228,104.062474)
},
}
</script>
<style scoped>
/deep/ .yd-cell:after{
height: 0;
width: 0;
border-bottom: none;
}
.tijiao{
width: 100%;
height: 1rem;
background-color: #d4b058;
color: #fff;
position: fixed;
bottom: 0;
left: 0;
font-size: 0.3rem;
line-height: 1rem;
}
.yd-cell:after{
height: 0;
width: 0;
}
.yd-cell-box{
margin-bottom: 0;
}
.yd-cell-right{
padding-right: 0;
}
.discussImg{
width: 1rem;
height: 1rem;
border-radius: 5px;
margin-right: .15rem;
}
.discussImgAdd{
border: 1px dashed #eaeaea;
color: #dedede;
line-height: 1rem;
font-size: .4rem;
font-family: 宋体;
}
.discussImg img{
width: 100%;
height: 100%;
}
/deep/ .yd-cell-box {
margin-bottom: 0;
}
.discussImg {
width: 1rem;
height: 1rem;
border-radius: 5px;
margin-right: 0.15rem;
position: relative;
}
.discussImgAdd {
border: 1px dashed #eaeaea;
color: #dedede;
line-height: 1rem;
font-size: 0.4rem;
font-family: 宋体;
position: relative;
}
.discussImg1 {
width: 1rem;
height: 1rem;
}
.upload {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 1rem;
height: 1rem;
}
</style>
