|
|
@@ -0,0 +1,230 @@
|
|
|
+<config>
|
|
|
+{
|
|
|
+ "navigationBarTitleText": "申请报修",
|
|
|
+}
|
|
|
+</config>
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="content">
|
|
|
+ <textarea maxlength="200" placeholder="请描述房间内需要维修的事项" v-model="content"></textarea>
|
|
|
+ <div class="num">{{ content.length }}/200</div>
|
|
|
+ </div>
|
|
|
+ <div class="photos">
|
|
|
+ <div class="photo" v-for="(item, index) in files" :key="item" :style="{ backgroundImage: `url(${item})` }">
|
|
|
+ <div class="del" @click="del(index)">
|
|
|
+ <div class="circle">
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="add" v-if="files.length < 3">
|
|
|
+ <img src="../native/icon_photo.png" />
|
|
|
+ <div>添加图片</div>
|
|
|
+ <input accept="image/*" type="file" @change="change" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" :class="{ disabled: content.length === 0 }" @click="submit">提交</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'repairReport',
|
|
|
+ metaInfo: {
|
|
|
+ title: '申请报修'
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ content: '',
|
|
|
+ files: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['roomInfo'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(e) {
|
|
|
+ console.log(e);
|
|
|
+ // this.$toast.loading({ duration: 0, message: '加载中' });
|
|
|
+ let form = new FormData();
|
|
|
+ form.append('file', e.target.files[0]);
|
|
|
+ this.$http
|
|
|
+ .post('/upload/file', form)
|
|
|
+ .then(res => {
|
|
|
+ this.$toast.clear();
|
|
|
+ this.files.push(res.data);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.$toast.clear();
|
|
|
+ this.$toast('上传失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ del(index) {
|
|
|
+ this.$alert(
|
|
|
+ {
|
|
|
+ type: 'info',
|
|
|
+ showCancel: true,
|
|
|
+ confirmText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ content: '确认删除？'
|
|
|
+ },
|
|
|
+ _ => {
|
|
|
+ this.files.splice(index, 1);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.content) {
|
|
|
+ this.$toast('请描述房间内需要维修的事项');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$toast.loading({ duration: 0, message: '加载中' });
|
|
|
+ this.$http
|
|
|
+ .post('/repairInfo/create', {
|
|
|
+ targetId: this.roomInfo.bedId,
|
|
|
+ repairType: 'BED',
|
|
|
+ images: this.files.join()
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.$toast.clear();
|
|
|
+ this.$router.replace({
|
|
|
+ name: 'result',
|
|
|
+ params: {
|
|
|
+ title: '提交成功',
|
|
|
+ type: 'success',
|
|
|
+ desc: '您已成功提交申请报修服务，稍后会有工作人员联系具体事项，为你带来不便深感抱歉',
|
|
|
+ showBack: true
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.$toast.clear();
|
|
|
+ this.$toast('提交失败');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.container {
|
|
|
+ .content {
|
|
|
+ width: calc(100vw - 30px);
|
|
|
+ height: 150px;
|
|
|
+ display: block;
|
|
|
+ margin: 20px auto 0 auto;
|
|
|
+ background: #f2f4f5;
|
|
|
+ border-radius: 5px;
|
|
|
+ textarea {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ padding: 15px;
|
|
|
+ resize: none;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: #f2f4f5;
|
|
|
+ font-size: 13px;
|
|
|
+ color: black;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #aaacad;
|
|
|
+ padding-right: 15px;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .photos {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ margin: 15px auto 0 auto;
|
|
|
+ .photo {
|
|
|
+ width: 68px;
|
|
|
+ min-width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ background: #f2f4f5;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ margin-right: 15px;
|
|
|
+ .del {
|
|
|
+ padding: 4px;
|
|
|
+ position: absolute;
|
|
|
+ top: -13px;
|
|
|
+ right: -13px;
|
|
|
+ .circle {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ border-radius: 9px;
|
|
|
+ background: rgb(255, 94, 96);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .line {
|
|
|
+ width: 10px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ width: 68px;
|
|
|
+ min-width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ background: #f2f4f5;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 26px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #aaacad;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ width: 68px;
|
|
|
+ min-width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ height: 44px;
|
|
|
+ margin: 0 auto 30px auto;
|
|
|
+ background: #f7931d;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: white;
|
|
|
+ line-height: 22px;
|
|
|
+ border-radius: 22px;
|
|
|
+ &.disabled {
|
|
|
+ background: #8f9294;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
