vue移动端提交用户留言信息
2018-09-09 本文已影响0人
冰淇wbq
屏幕快照 2018-09-09 09.53.38.png
<template>
<div class="bgm page" style="overflow-x: hidden" v-use-lazy>
<!--病友说-->
<div class="bgw"><a href="#/patient/details/1" class="db pr cf" style="padding: 3% 3% 1%">
<div class="patient-flex"><i class="l m patient-pic" :style="getBackground(askData.avatar)"></i>
<div class="patient-name-flex">
<div class="expert-list-tit doctor-name">
{{askData.nickname}}
</div>
<div class="c3">{{Date.format("yyyy-MM-dd hh:mm", askData.create_time * 1000)}}</div>
</div>
</div>
<h3 class="cl patient-example-bar-tit"><span class="ask-icon">问</span>
{{askData.title}}
</h3>
<!--<div class="cl">-->
<!--<div>-->
<!--<div class="contract-item"><img src=""></div>-->
<!--</div>-->
<!--</div>-->
<div class="live-interact-imgs" @click="viewImageHandle">
<template>
<img v-for="(img,index) in (askData.pic).split(',')" :key="index" :src="img" alt="" class="interact-img" style="width: 100px;height: 100px;" v-if="askData.pic.length!==0"/>
</template>
</div>
<!--评论-->
<div class="cl c3 patient-bar-foot">
<span class="comment-one-pic" v-if="commentData==1">
{{commentData}}
</span>
<span class="comment-two-pic" v-else-if="commentData>1">
{{commentData}}
</span>
<div class="r">
<div @click.prevent="addPraiseCount(askData.id);cancelPraiseCount(askData.id)">
<svg class="patient-list-icon" v-if="isActive">
<use xlink:href="#on-praise"/>
</svg>
<svg class="patient-list-icon" v-else>
<use xlink:href="#praise"/>
</svg>
{{isInit ? praiseCount : askData.praise}}
</div>
</div>
</div>
</a>
</div>
<!--回答列表-->
<div class="bgw" v-if="answerData.length" style="margin-top: 10px">
<div v-for="(item,index) in answerData" style="border-bottom: 1px dotted #dddddd" class="con2">
<div class="patient-flex"><i class="l m patient-pic" :style="getBackground(item.avatar)"></i>
<div class="patient-name-flex">
<div class="expert-list-tit doctor-name">
{{item.nickname}}
</div>
<div class="c3">{{Date.format("yyyy-MM-dd hh:mm", item.create_time * 1000)}}</div>
</div>
</div>
<div class="cl patient-example-bar-tit" style="margin-left: 3.3em;width: 85%">
{{item.title}}
</div>
</div>
</div>
<!--适症专家-->
<div v-if="expertData">
<h2 class="con com-tit bgw">
适症专家
</h2>
<router-link class="bgw doctor-bar-wrap" :to="jump(expertData.id)">
<div class="cf doctor-bar">
<i class="l m lazy-load" v-lazy="expertData.pic_circle"></i>
<div class="oh">
<h3 class="doctor-bar-name">
<span class="f1x">{{expertData.name}} </span>
<span class="tag tag-2">{{expertData.called}}</span>
</h3>
{{expertData.department}} {{expertData.disease_name}}
</div>
</div>
<div class="cl c2 doctor-desc">
<div class="clamp">
擅长：{{expertData.killed}}
</div>
</div>
</router-link>
</div>
<!--提问输入框-->
<div class="interact-foot" ref="ineractFoot">
<div class="pf interact-foot-cover" @click="formCloseHandle"></div><!-- 浮层，用于点击关闭 -->
<div class="pf interact-foot-inner">
<div class="c3 interact-foot-btn" @click="formOpenHandle">请输入互动内容</div>
<form class="dn interact-form" ref="form" @submit.prevent="formSubmitHandle">
<textarea placeholder="请输入互动内容" class="interact-input" style="height: 10em"></textarea>
<footer class="con interact-form-foot">
<input type="submit" value="发送" class="interact-send "></footer>
</form>
</div>
</div>
</div>
</template>
<script>
var three_part_css = [
"//cdn.bootcss.com/photoswipe/4.1.1/photoswipe.css",
"//cdn.bootcss.com/photoswipe/4.1.1/default-skin/default-skin.css"
];
var jquery = "//cdn.bootcss.com/jquery/2.1.4/jquery.js";
var three_part_apis = [
"//cdn.bootcss.com/photoswipe/4.1.1/photoswipe.js",
"//cdn.bootcss.com/photoswipe/4.1.1/photoswipe-ui-default.js"
],
_isLoaded = false;
function loadQueue(cb) {
if (!jquery) {
cb && cb();
return;
}
getScript(jquery, function () {
var list = three_part_apis;
if (_isLoaded) {
cb();
return;
}
var len = list.length,
i = 0,
c = 0,
ready = function () {
if (++c === len) {
cb && cb();
}
};
_isLoaded = true;
while (i < len) {
getScript(list[i++], ready);
}
three_part_css.length = three_part_apis.length = 0;
});
jquery = null;
}
function createCssLink() {
var d = document, i = three_part_css.length, s, frg = d.createDocumentFragment();
while (i--) {
s = d.createElement("link");
s.rel = "stylesheet";
s.href = three_part_css[i];
frg.appendChild(s);
}
d.head.appendChild(frg);
}
function getScript(src, cb) {
var d = document,
s = d.createElement("script");
s.async = true;
s.onload = cb;
s.src = src;
d.body.appendChild(s);
}
if (!Object.assign) {
Object.assign = function (t, s) {
for (var o in s) {
t[o] = s[o];
}
}
}
import Swiper from 'swiper';
import "swiper/dist/css/swiper.min.css";
import user from "../../components/login/user";
export default {
data() {
return {
expertData: "",
askData: '',
commentData: '',
answerData: '',
praiseCount: '',
isActive: false,
isInit: false
}
},
created() {
createCssLink();
loadQueue();
this.getDetail();
},
methods: {
//留言图片浏览
viewImageHandle: function (e) {
e.preventDefault();
if (e.target.tagName === "IMG") {
var img = e.target.parentNode.children;
var items = [];
var i = img.length;
var index = 0;
var t = e.target;
while (i--) {
items[i] = {
src: img[i].src,
w: img[i].naturalWidth || img[i].width,
h: img[i].naturalHeight || img[i].height
};
if (img[i] === t) {
index = i;
}
}
require("./PhotoSwipe.js").open(items, index);
}
},
getBackground(avatar){
return "background-image:url('"+avatar+"')";
},
jump(id) {
return "/expert/" + id;
},
getDetail() {
this.$http.get('api/question-detail?id=' + this.$route.params.id).then(res => {
let j = res.data;
if (j.code == 200) {
this.expertData = j.data.expert;
this.askData = j.data.data;
this.answerData = j.data.answer;
this.commentData = j.data.comment;
}
})
},
cancelPraiseCount(id) {
if (this.isActive === true) {
this.$http.get('api/question-de-praise?id=' + id).then(res => {
let j = res.data;
if (j.code === 200) {
this.praiseCount = j.data;
this.isActive = false;
}
})
}
},
addPraiseCount(id) {
this.isInit = true;
if (this.isActive === false) {
this.$http.get('api/question-praise?id=' + id).then(res => {
let j = res.data;
if (j.code === 200) {
this.isActive = !this.isActive;
this.praiseCount = j.data
}
}
)
}
},
//我也说几句按钮
formOpenHandle(e) {
e.preventDefault();
if (user.info) {
this.$refs.ineractFoot.classList.add("show");
}
else {
this.$router.push('/login');
}
},
//关闭留言
formCloseHandle() {
this.$refs.ineractFoot.classList.remove("show");
},
//留言提交
formSubmitHandle(e) {
e.preventDefault();
let fm=e.currentTarget,
tx=fm.elements[0],
value=tx.value.trim();
if(!value){
this.$tip("未填写互动信息");
return false;
}
this.$refs.ineractFoot.classList.remove("show");
this.$http.post('api/question-interaction', {
pid: this.$route.params.id,
disease: this.askData.disease,
title: value
}).then(res => {
var j = res.data;
if (j.code === 200) {
this.$tip("提交成功，请等待审核");
}
})
}
}
}
</script>
<style lang="less">
.doctor-bar-wrap {
display: block;
padding: 3%;
font-size: .34rem;
}
.doctor-bar {
display: flex;
align-items: center;
}
.doctor-bar > .m {
width: 20%;
height: 0;
padding-top: 20%;
margin-right: 1em;
border-radius: 50%;
background-size: cover;
}
.doctor-bar > .oh {
flex: 1;
}
.doctor-bar-name {
margin: 0;
font-weight: 400;
}
.doctor-bar .tag {
display: inline-block;
margin-left: .6em;
padding: 0 .5em;
border-radius: 5px;
font-size: .7em;
}
.doctor-bar .tag-1 {
color: #19b497;
background-color: #d8f7f1;
}
.doctor-bar .tag-2 {
color: #5777fd;
background-color: #e5eafc;
}
.doctor-company {
margin: .5em;
}
.doctor-desc {
margin-top: 3%;
padding: 3%;
border-radius: 5px;
background: #f7fbfe;
}
.patient-pic {
width: 12%;
height: 0;
padding-top: 12%;
margin-right: 1em;
border-radius: 50%;
background-size: cover;
}
.live-player-wrap {
height: 5.625rem;
}
.live-player-box {
z-index: 4;
top: 0;
width: 10rem;
text-align: center;
background: #1a1a1f;
}
.live-player-box > div {
margin: 0 auto;
}
.live-fixed-bar {
z-index: 2;
width: 10rem;
height: 3em;
font-size: .416rem;
background: #FFF;
}
.show-phone-bar,
.show-phone-bar > .live-fixed-bar {
height: 6em;
}
.show-phone-bar > .live-fixed-bar > .live-contact {
display: block;
}
/* watch-tab */
.watch-tab {
display: flex;
text-align: center;
height: 3em;
line-height: 3em;
border-bottom: 1px solid #dddddd;
}
.watch-tab > a {
flex: 1;
margin: 0 .5em;
}
.watch-tab > .on {
position: relative;
color: #00b38b;
}
.watch-tab > .on:after {
position: absolute;
content: "";
left: 50%;
bottom: 0;
width: 1.4em;
height: .2em;
margin-left: -0.7em;
background: currentColor;
}
.live-interact-header > .m {
display: block;
width: 12%;
height: 0;
padding-top: 12%;
border-radius: 50%;
margin-right: .5em;
background-size: cover;
}
.live-interact-header > .r {
width: 5em;
}
.live-interact-header > span.l {
-webkit-flex: 1;
flex: 1;
}
.interact-foot,
.interact-foot-inner {
width: 10rem;
min-height: 3em;
font-size: .4rem;
background: #FFF;
}
.interact-foot-inner {
z-index: 6;
bottom: 0;
box-shadow: 0 0 5px #CCC;
}
.interact-foot-btn {
margin: .5em 5%;
height: 3em;
line-height: 3em;
padding-left: 3em;
border-radius: 1em;
background: #f0f4f7 url(data:image/svg+xml;charset=utf8,%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%3Csvg%20viewBox%3D%220%200%201147%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221120.1171875%22%20height%3D%221000%22%3E%3Cpath%20d%3D%22M0%20956.865864%201146.877993%20956.865864%201146.877993%201020.7232%200%201020.7232%200%20956.865864ZM0%20912.775537%20300.529213%20827.452006%2085.868257%20614.103613%200%20912.775537ZM802.673951%20328.370422%20588.010209%20115.019284%20115.744481%20584.378491%20330.405437%20797.708861%20802.673951%20328.370422ZM902.442885%20149.154775%20768.272343%2015.818629C746.042941-6.277693%20708.804076-5.074616%20685.091594%2018.484019L620.682076%2082.476319%20835.34721%20295.826104%20899.75255%20231.814349C923.465032%20208.254362%20924.668109%20171.253883%20902.442885%20149.154775Z%22%20fill%3D%22%23cccccc%22%3E%3C/path%3E%3C/svg%3E) no-repeat 1em 50%;
background-size: 1.4em;
}
.interact-foot.show > .interact-foot-cover {
z-index: 6;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
}
.interact-foot.show > .interact-foot-inner > .interact-foot-btn {
display: none;
}
.interact-foot.show > .interact-foot-inner > .interact-form {
display: block;
}
.interact-input {
display: block;
margin: 1em auto;
width: 94%;
border: none;
height: 5em;
resize: none;
font-size: 14px;
outline: none;
}
.pic-list {
min-height: 5em;
}
.interact-form-foot {
display: flex;
height: 3em;
box-shadow: 0 0 5px #CCC;
align-items: center;
}
.interact-form-foot > .tr {
margin-right: 1em;
-webkit-flex: 1;
flex: 1;
}
.interact-form-foot > .tr:before {
content: "(";
}
.interact-form-foot > .tr:after {
content: ")";
}
.interact-send {
height: 2em;
line-height: 2em;
width: 4em;
border-radius: .2em;
color: #FFF;
border: 0;
background-color: #00b38b;
position: absolute;
right: 1em;
}
.interact-send:disabled {
background-color: #CCC;
}
.interact-form-foot > .m {
width: 1.6em;
height: 1.6em;
margin-right: 1em;
}
.comment-one-pic {
margin-left: 1.8em;
padding-left: 2em;
background-size: contain;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE0MjBBNkU1OUY2NjExRThBOTFEQzM5NUJCN0Y4QjUwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE0MjBBNkU2OUY2NjExRThBOTFEQzM5NUJCN0Y4QjUwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTQyMEE2RTM5RjY2MTFFOEE5MURDMzk1QkI3RjhCNTAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTQyMEE2RTQ5RjY2MTFFOEE5MURDMzk1QkI3RjhCNTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz57nj92AAAII0lEQVR42qRY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);
background-repeat: no-repeat;
display: inline-block;
}
.comment-two-pic {
margin-left: 1.8em;
padding-left: 3.7em;
background-size: contain;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAkCAYAAADWzlesAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQ0Q0IyNUU1OUY2NjExRThCMzczRjQ4NDY1NEIxNkQzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQ0Q0IyNUU2OUY2NjExRThCMzczRjQ4NDY1NEIxNkQzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDRDQjI1RTM5RjY2MTFFOEIzNzNGNDg0NjU0QjE2RDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDRDQjI1RTQ5RjY2MTFFOEIzNzNGNDg0NjU0QjE2RDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5MFvA8AAARHUlEQVR42qRa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);
background-repeat: no-repeat;
display: inline-block;
}
.patient-example-bar {
background: #ffffff;
margin: 1em;
box-shadow: 0 1px 5px #ccc;
}
.patient-example-bar-tit {
width: 100%;
margin: 0;
font-weight: 500;
font-size: 1.2em;
margin-bottom: 0.5em;
}
.example-bar-pic {
width: 31.77%;
height: 0;
padding-top: 20.42%;
margin-top: .5em;
}
.patient-bar-foot {
margin-top: 1em;
left: 3%;
bottom: 0;
width: 100%;
font-size: .9em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.example-bar-foot > .border-btn {
font-size: .8em;
height: 1.8em;
line-height: 1.8em;
margin-right: 1em;
padding: 0 .8em;
}
.ask-icon {
display: inline-block;
background: #ff5946;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 3px;
color: #ffffff;
font-size: .28rem;
line-height: 1.6em;
}
.patient-flex {
display: flex;
flex-direction: row;
justify-content: space-between;;
& > .db {
display: flex;
flex: 1;
}
.patient-name-flex {
flex: 1;
margin-right: 1em;
}
}
.icon-count {
width: 30%;
display: flex;
justify-content: flex-end;
div {
display: flex;
flex: 1;
width: 1.4em;
height: 1.4em;
.list-icon {
width: 1.4em;
height: 1.4em;
}
}
}
.interact-img{
width: 32%;
margin-right: 1%;
margin-top: 1%;
object-fit: cover;
}
.patient-list-icon {
position: relative;
top: .2em;
width: 1.4em;
height: 1.4em;
}
</style>
