|
|
@@ -5,25 +5,35 @@
|
|
|
</config>
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <div class="content">
|
|
|
- <textarea maxlength="200" placeholder="请描述房间内需要维修的事项" v-model="content"></textarea>
|
|
|
- <div class="num">{{ content.length }}/200</div>
|
|
|
+ <van-cell-group :border="false" class="form">
|
|
|
+ <van-field label="报修人" :value="form.name" @input="form.name = $event.detail" placeholder="请输入报修人">
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="联系方式"
|
|
|
+ type="digit"
|
|
|
+ :value="form.phone"
|
|
|
+ @input="form.phone = $event.detail"
|
|
|
+ placeholder="请输入联系方式"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field label="故障图片" :border="false" readonly> </van-field>
|
|
|
+ <van-uploader :file-list="images" :after-read="afterRead" @delete="deleteImg" />
|
|
|
+ </van-cell-group>
|
|
|
+ <div class="box-bottom">
|
|
|
+ <van-field :border="false" label="故障描述" readonly> </van-field>
|
|
|
+ <van-field
|
|
|
+ :value="form.description"
|
|
|
+ @input="form.description = $event.detail"
|
|
|
+ :border="false"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请描述房间内需要描述事项"
|
|
|
+ />
|
|
|
</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 class="btn-list">
|
|
|
+ <van-button :disabled="Btn" type="default" @click="submit">提交</van-button>
|
|
|
</div>
|
|
|
- <div class="btn" :class="{ disabled: content.length === 0 }" @click="submit">提交</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -35,195 +45,108 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- content: '',
|
|
|
- files: []
|
|
|
+ form: {
|
|
|
+ phone: '',
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ images: [],
|
|
|
+ imgBox: true
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapState(['roomInfo'])
|
|
|
+ ...mapState(['roomInfo']),
|
|
|
+ Btn() {
|
|
|
+ if (this.form.phone && this.form.name && this.images) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- change(e) {
|
|
|
- console.log(e);
|
|
|
- // this.$toast.loading({ duration: 0, message: '加载中' });
|
|
|
- let form = new FormData();
|
|
|
- form.append('file', e.target.files[0]);
|
|
|
+ afterRead(file) {
|
|
|
+ this.showLoading();
|
|
|
this.$http
|
|
|
- .post('/upload/file', form)
|
|
|
+ .uploadFile(file.path)
|
|
|
.then(res => {
|
|
|
- this.$toast.clear();
|
|
|
- this.files.push(res.data);
|
|
|
+ this.imgBox = false;
|
|
|
+ this.hideLoading();
|
|
|
+ this.images = [
|
|
|
+ {
|
|
|
+ url: res
|
|
|
+ }
|
|
|
+ ];
|
|
|
})
|
|
|
.catch(e => {
|
|
|
- console.log(e);
|
|
|
- this.$toast.clear();
|
|
|
- this.$toast('上传失败');
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.error
|
|
|
+ });
|
|
|
});
|
|
|
},
|
|
|
- del(index) {
|
|
|
- this.$alert(
|
|
|
- {
|
|
|
- type: 'info',
|
|
|
- showCancel: true,
|
|
|
- confirmText: '确认',
|
|
|
- cancelText: '取消',
|
|
|
- content: '确认删除？'
|
|
|
- },
|
|
|
- _ => {
|
|
|
- this.files.splice(index, 1);
|
|
|
- }
|
|
|
- );
|
|
|
+ deleteImg(e) {
|
|
|
+ let list = [...this.images];
|
|
|
+ list.splice(e.detail.index, 1);
|
|
|
+ this.images = list;
|
|
|
},
|
|
|
- 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('提交失败');
|
|
|
- });
|
|
|
- }
|
|
|
+ submit() {}
|
|
|
}
|
|
|
};
|
|
|
</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;
|
|
|
- }
|
|
|
+ /deep/ .van-uploader {
|
|
|
+ padding-left: 18px;
|
|
|
}
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ /deep/.form {
|
|
|
+ position: relative;
|
|
|
+ .van-cell {
|
|
|
+ --cell-vertical-padding: 18px;
|
|
|
+ --cell-horizontal-padding: 18px;
|
|
|
+ --field-label-color: #000000;
|
|
|
+ --cell-text-color: #000;
|
|
|
+ .van-field__label,
|
|
|
+ .van-cell__title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
+ .van-cell__value {
|
|
|
+ // text-align: left;
|
|
|
}
|
|
|
- div {
|
|
|
- font-size: 11px;
|
|
|
- color: #aaacad;
|
|
|
- line-height: 16px;
|
|
|
- margin-top: 6px;
|
|
|
+ &::after {
|
|
|
+ left: 100px !important;
|
|
|
}
|
|
|
- input {
|
|
|
- width: 68px;
|
|
|
- min-width: 68px;
|
|
|
- height: 68px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-bottom {
|
|
|
+ /deep/ .van-field__label {
|
|
|
+ margin: 10px 0 0 2px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ /deep/ .van-field__body {
|
|
|
+ margin-left: 3px !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .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;
|
|
|
+ .btn-list {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ padding-left: 43px;
|
|
|
+ z-index: 999;
|
|
|
+ .bottom();
|
|
|
+ /deep/.van-button {
|
|
|
+ width: 290px;
|
|
|
+ height: 48px;
|
|
|
+ background: @prim;
|
|
|
+ border-radius: 12px;
|
|
|
+ line-height: 48px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
