。

src/main.js

@@ -25,7 +25,14 @@ app.$mount();
 export default {
     config: {
         // pages 的首个页面会被编译成首页
-        pages: ['pages/home', 'pages/my', 'pages/walletdetails', 'pages/recharge', 'pages/vuex/vuex'],
+        pages: [
+            'pages/home',
+            'pages/my',
+            'pages/walletdetails',
+            'pages/recharge',
+            'pages/repairReport',
+            'pages/vuex/vuex'
+        ],
         tabBar: {
             color: '#584C43',
             selectedColor: '#00BA64',

src/pages/my.vue

@@ -34,7 +34,7 @@
             <div class="title1">我的服务</div>
             <div class="border"></div>
             <div class="box">
-                <div class="div">
+                <div class="div" @click="baoxiu">
                     <img class="tit-img" src="../native/tabbar/wode_icon_baoxiu@3x.png" alt="" />
                     <div class="text">保修申请</div>
                 </div>
@@ -75,6 +75,9 @@ export default {
         },
         Recharge() {
             wx.navigateTo({ url: '/pages/recharge' });
+        },
+        baoxiu() {
+            wx.navigateTo({ url: '/pages/repairReport' });
         }
     }
 };

src/pages/repairReport.vue

@@ -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>