|
|
@@ -0,0 +1,235 @@
|
|
|
+<config>
|
|
|
+{
|
|
|
+ "navigationBarTitleText": "申请打扫",
|
|
|
+}
|
|
|
+</config>
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="content">
|
|
|
+ <div class="box-bottom">
|
|
|
+ <van-field :border="false" label="申请打扫" readonly> </van-field>
|
|
|
+ <van-field
|
|
|
+ :value="content"
|
|
|
+ @input="content = $event.detail"
|
|
|
+ :border="false"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="填写备注"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="num">{{ content.length }}/200</div>
|
|
|
+ <div class="box-bottom">
|
|
|
+ <van-field label="打扫图片" :border="false" readonly> </van-field>
|
|
|
+ <van-uploader max-count="5" :file-list="images" :after-read="afterRead" @delete="deleteImg" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn-list">
|
|
|
+ <van-button :disabled="!canSubmit" type="default" @click="submit">提交</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'repairReport',
|
|
|
+ metaInfo: {
|
|
|
+ title: '申请打扫'
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ content: '',
|
|
|
+ imagesBox: [],
|
|
|
+ images: [],
|
|
|
+ image: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['roomInfo']),
|
|
|
+ canSubmit() {
|
|
|
+ if (this.content && this.images.length != 0) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // afterRead(file) {
|
|
|
+ // this.showLoading();
|
|
|
+ // this.$http
|
|
|
+ // .uploadFile(file.path)
|
|
|
+ // .then(res => {
|
|
|
+ // this.imgBox = false;
|
|
|
+ // this.hideLoading();
|
|
|
+ // this.image = [
|
|
|
+ // {
|
|
|
+ // url: res
|
|
|
+ // }
|
|
|
+ // ];
|
|
|
+ // this.imagesBox.push(this.image);
|
|
|
+ // this.imagesBox.map(item => {
|
|
|
+ // this.images = item.map(i => {
|
|
|
+ // // console.log(i.url);
|
|
|
+ // return i.url;
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // console.log(this.images);
|
|
|
+ // })
|
|
|
+
|
|
|
+ // .catch(e => {
|
|
|
+ // this.hideLoading();
|
|
|
+ // wx.showToast({
|
|
|
+ // icon: 'none',
|
|
|
+ // title: e.error
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ afterRead(file) {
|
|
|
+ this.showLoading();
|
|
|
+ this.$http
|
|
|
+ .uploadFile(file.path)
|
|
|
+ .then(res => {
|
|
|
+ this.imgBox = false;
|
|
|
+ this.hideLoading();
|
|
|
+ this.images = [
|
|
|
+ {
|
|
|
+ url: res
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.error
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteImg(e) {
|
|
|
+ let list = [...this.images];
|
|
|
+ list.splice(e.detail.index, 1);
|
|
|
+ this.images = list;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.content) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请填写申请描述'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$http
|
|
|
+ .post('/cleaningInfo/create', {
|
|
|
+ targetId: this.roomInfo.roomId,
|
|
|
+ cleaningType: 'ROOM',
|
|
|
+ images: this.images[0].url
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ // this.$router.replace({
|
|
|
+ // name: 'result',
|
|
|
+ // params: {
|
|
|
+ // title: '提交成功',
|
|
|
+ // type: 'success',
|
|
|
+ // desc: '您已成功提交申请打扫服务',
|
|
|
+ // showBack: true
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.error
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</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: 14px;
|
|
|
+ }
|
|
|
+ /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 !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-cell__value {
|
|
|
+ // text-align: left;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ left: 100px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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-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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
