sr-publicServicePlatform/component/doctor/appeal.js

(function() {
	Vue.component('appeal-form', {
		template: `<div><div class="container-fluid">
				<div class="container" id="head">
					<div class="top-banner">
						<img src="../../../images/doctor_logo_img.png" class="hlogo" />
						<span class="qr-container">
							<img src="../../../images/qr_code.png" class="qr_code" />
							<p class="c-f12 text-center">下载APP</p>
						</span>
						<span class="c-border-l return" @click="goLogin()">返回登录页</span>
					</div>
				</div>
			</div>
			<div class="container-fluid chahua-bg c-border-t">
				<div class="container ptb40">
					<div class="appeal-form c-border">
						<h3 class="pt20 pb10 pl0 pr20 m0 mb30 c-f16 c-border-b clearfix">账号申诉<span class="fr c-f14 c-0ad8c8 f-w400" @click="record()">申诉记录</span></h3>
						<div class="edit-question" v-if="!isRecord && isQuestion">
							<div class="question-form pl20 pr50">
								<h4 class="c-909090 f-w400 m0 mb10 txt-center" v-if="!isEdit">hi~你发现了什么问题?</h4>
								<label class="mb10">选择申诉类型<span class="c-f00">*</span></label>
								<ul class="container-fluid p0 mb20 clearfix">
									<li v-if="isEdit" class="fl question-li mr30">
										<div class="question-li-div c-323232 c-f14 txt-center select-active">功能优化</div>
									</li>
									<li v-if="!isEdit" class="fl question-li mr30" v-for="list in questionArr" :key="list.code">
										<div class="question-li-div c-323232 c-f14 txt-center" :class="{'select-active': judgeSelectIndex == list.code}" @click="select(list.code)">{{list.name}}</div>
									</li>
								</ul>
								<div>
									<label class="mb10">问题&建议<span class="c-f00">*</span></label>
									<p class="c-position-r m0" v-if="!isEdit">
										<textarea @input="limit" class="form-control" placeholder="请描述您在使用过程中遇到的问题或建议,如果遇到功能异常,上传异常页面截图能更快解决哦~"></textarea>
										<span class="limit c-909090">最多300字</span>
									</p>
									<p class="c-position-r m0" v-if="isEdit">
										<textarea @input="limit" readonly class="form-control" placeholder="请描述您在使用过程中遇到的问题或建议,如果遇到功能异常,上传异常页面截图能更快解决哦~"></textarea>
										<span class="limit c-909090">最多300字</span>
									</p>
								</div>
								<div class="h100 mtb20">
									<div class="fl set-img mr20 c-position-r" v-if="quesImg.length > 0" v-for="(imgs, key) in quesImg" :key="key">
										<img src="imgs.src" \>
										<span class="delete-img" v-if="!isEdit" @click="remove(key)"></span>
									</div>
									<div v-if="isEdit ? !isEdit : quesImg.length < 4" class="fl img-add mr20">
				                    	<input type="file" @change="uploadImg()" class="fl set-img type-hide"  accept="image/jpg,image/jpeg,image/png">
				                    </div>
				                    <span class="fl pt40 c-909090">(选填,图片最多可传4张)</span>
								</div>
								<div v-if="isEdit">
									<div class="mb10">
										<label class="m0">处理时间</label><span class="ml10">2018-04-28</span>
									</div>
									<div>
										<label class="mb10">处理记录</label>
										<p class="c-position-r m0">
											<textarea readonly="true" class="form-control" placeholder="请描述您在使用过程中遇到的问题或建议,如果遇到功能异常,上传异常页面截图能更快解决哦~"></textarea>
										</p>
									</div>
								</div>
								<div class="mt10 clearfix" v-if="!isEdit">
									<p class="c-323232 c-f14 txt-center">请留下您的联系方式,管理员会尽快为您找到解决方案</p>
									<div class="c-border pt30 pl50 b-r-5">
										<p class="form-group clearfix">
											<label class="fl form-label">姓名<span class="c-f00">*</span></label>
											<input class="fl form-control" placeholder="请输入姓名" />
										</p>
										<p class="form-group clearfix">
											<label class="fl form-label">身份证<span class="c-f00">*</span></label>
											<input class="fl form-control" placeholder="请输入身份证号" />
										</p>
										<p class="form-group clearfix">
											<label class="fl form-label">手机号<span class="c-f00">*</span></label>
											<input class="fl form-control" placeholder="请输入手机号" />
										</p>
									</div>
								</div>
								<div class="pt20">
									<span v-if="!isEdit" class="btn" @click="submit()">提&emsp;交</span>
									<span v-if="isEdit" class="btn" @click="backRecord()">返&emsp;回</span>
								</div>
							</div>
						</div>
						<div class="finish-device txt-center" v-if="!isRecord && !isQuestion">
							<h3 class="device-success">账号申诉已完成</h3>
							<p class="c-909090 c-f18">您可以在申诉记录查看意见进展</p>
							<div class="pt30">
								<span class="btn" @click="back()">返&emsp;回</span>
							</div>
						</div>
						<div v-if="isRecord">
							<ul class="list-record pl30 c-f14 m0">
								<li v-if="recordList.length == 0" class="txt-center">暂无反馈记录</li>
								<li v-if="recordList.length > 0" class="c-border-b ptb10 clearfix" v-for="(list, index) in recordList" :key="index">
									<span class="fl c-fff list-tap pr5 mr20">{{list.tit}}</span>
									<p class="fl c-909090 list-detail m0">{{list.detail}}</p>
									<span class="fl list-status mr30" :class="{'list-status-active':list.status == 1}">{{list.status == 1 ? "已处理" : '待处理'}}</span>
									<span class="fl list-view pr20 c-0ad8c8" @click="view(list)">查看</span>
								</li>
							</ul>
							<div v-if="recordList.length == 0">
								<span class="btn" @click="back()">返&emsp;回</span>
							</div>
							<div class="mt15 h30 pr30 txt-center clearfix" v-if="recordList.length > 0">
								<div class="fr ml10 clearfix">
									<span class="fl c-border-tb c-border-l page-btn-input m0"><input class="fl c-888 page-input" v-model="editPage" /></span><span class="fr c-f12 btn page-btn page-btn-sure" @click="setPage(editPage)">确定</span>
								</div>
								<span class="fr btn page-btn" @click="setPage(page + 2)" v-if="page == 1">{{page + 2}}</span>
								<span class="fr btn page-btn" @click="setPage(page + 1)">{{page + 1}}</span>
								<span class="fr btn page-btn page-btn-active">{{page}}</span>
								<span class="fr btn page-btn"  @click="setPage(page - 1)" v-if="page != 1">{{page - 1}}</span>
							</div>
						</div>
					</div>
				</div>
			</div></div>`,
		props: [],
		data: function() {
			return {
				isRecord: false,
				isEdit: false,
				isQuestion: true,
				judgeSelectIndex: null,
				questionArr: [{
					name: "手机号无法使用",
					code: "1"
				},{
					name: "无法找回密码",
					code: "2"
				},{
					name: "其他",
					code: "3"
				}],
				quesImg: [],
				recordList: [{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "手机号无法使用",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "0"
				},{
					tit: "无法找回密码",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "0"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "0"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "0"
				}],
				page: 1,
				editPage: null
			}
		},
		methods: {
			goHelp: function() {
				window.location.href = "appeal.html"
			},
			goLogin: function() {
				window.location.href = "login.html"
			},
			select: function(key) {
				if(this.judgeSelectIndex == key) {
					this.judgeSelectIndex = null
				} else {
					this.judgeSelectIndex = key
				}
			},
			record: function() {
				this.isRecord = true
			},
			limit: function() {
				
			},
			remove: function(key) {
				this.quesImg.splice(key, 1)
			},
			submit: function() {
				this.isQuestion = false
			},
			back: function() {
				this.isQuestion = true
				this.isRecord = false
			},
			setPage: function(key) {
				if(+key) {
					this.page = +key
				} else {
					alert(key)
				}
			},
			view: function(list) {
				this.isRecord = false
				this.isQuestion = true
				this.isEdit = true
			},
			backRecord: function() {
				this.isRecord = true
				this.isQuestion = false
				this.isEdit = false
			}
		},
		watch: {
//			Password: function(newVal, oldVal) {
//				var val = newVal.toString();
//				var reg = /\s+/g; //去除空格
//				if(reg.test(val)) {
//					this.Password = oldVal;
//				}
//			}
		}
	})

})()