no message

src/packageWorkorder/pages/processFeedback.vue

@@ -1,31 +1,46 @@
 <template>
-	<zj-page-layout :hasFooter="true">
-		<view class="all-container">
-			<view class="type-container mt30">
-				<view class="common-title"><text>*</text>反馈类型</view>
-				<view class="list">
-					<view class="item" v-for="(item, index) in typeList" :key="index" :class="typeVal === item.value ? 'active':''" @tap="changeType(item.value)">{{item.name}}</view>
-				</view>
-			</view>
-
-			<view class="date-conteiner mt30" v-if="typeVal == '2'">
-				<view class="item">
-				  <view class="label"><text>*</text>预约上门时间</view>
-				  <view class="picker" @tap="isShowDatePicker = true">
-				    <text class="value" v-if="date">{{date}}</text>
-				    <text class="placeholder" v-else>请选择</text>
-				    <text class="iconfont icon-jinru"></text>
-				  </view>
-				</view>
-			</view>
+  <zj-page-layout :hasFooter="true">
+    <view class="all-container">
+      <view class="type-container mt30">
+        <view class="common-title"><text>*</text>反馈类型</view>
+        <view class="list">
+          <view class="item" v-for="(item, index) in typeList" :key="index"
+            :class="typeVal === item.value ? 'active' : ''" @tap="changeType(item.value)">{{ item.name }}</view>
+        </view>
+      </view>
+
+      <view class="date-conteiner mt30" v-if="typeVal == '2'">
+        <view class="item">
+          <view class="label"><text>*</text>预约上门开始时间</view>
+          <view class="picker" @tap="isShowDatePicker = true">
+            <text class="value" v-if="date">{{ date }}</text>
+            <text class="placeholder" v-else>请选择</text>
+            <text class="iconfont icon-jinru"></text>
+          </view>
+        </view>
+      </view>
+
+      <view class="date-conteiner mt30" v-if="typeVal == '2'">
+        <view class="item">
+          <view class="label"><text>*</text>预约上门结束时间</view>
+          <view class="picker" @tap="isShowDatePicker2 = true">
+            <text class="value" v-if="date2">{{ date2 }}</text>
+            <text class="placeholder" v-else>请选择</text>
+            <text class="iconfont icon-jinru"></text>
+          </view>
+        </view>
+      </view>
 
       <view class="over-container mt30" v-if="typeVal == '3'">
         <view class="row">
           <view class="label"><text>*</text>完工采集</view>
-          <view class="btn"><u-button type="primary" :text="orderDetail && orderDetail.isGather == 'YES' ? '查看采集' : '数据采集'" @click="toCollect"></u-button></view>
+          <view class="btn"><u-button type="primary"
+              :text="orderDetail && orderDetail.isGather == 'YES' ? '查看采集' : '数据采集'" @click="toCollect"></u-button>
+          </view>
         </view>
         <view class="row">
-          <view class="label">收费项目<u-icon name="question-circle" color="#999999" @click="$tips('在服务过程中消耗的产品（配件）')"></u-icon></view>
+          <view class="label">收费项目<u-icon name="question-circle" color="#999999"
+              @click="$tips('在服务过程中消耗的产品（配件）')"></u-icon></view>
           <view class="btn"><u-button type="primary" text="添加" @click="toCharge"></u-button></view>
         </view>
       </view>
@@ -39,484 +54,524 @@
         </view>
       </view>
 
-			<view class="mt30 remark-container">
-				<view class="common-title"><text v-if="typeVal == '1' || typeVal == '4'">*</text>备注信息</view>
-				<u--textarea v-model="remarkVal" placeholder="请输入备注内容" fixed border="none" height="120"></u--textarea>
-			</view>
+      <view class="mt30 remark-container">
+        <view class="common-title"><text v-if="typeVal == '1' || typeVal == '4'">*</text>备注信息</view>
+        <u--textarea v-model="remarkVal" placeholder="请输入备注内容" fixed border="none" height="120"></u--textarea>
+      </view>
 
       <view class="mt30 image-container" v-if="typeVal == '1' || typeVal == '4'">
-      	<view class="common-title">上传图片(最多6张)</view>
-      	<view class="images">
-      		<block v-for="(item, index) in imageList" :key='index'>
-      			<view class="img">
-      				<image :src="item.url" mode="aspectFill" @tap="prevImg(item.url)"></image>
-      				<text class="iconfont icon-guanbi1" @tap="delImage(index)"></text>
-      			</view>
-      		</block>
-      		<view class="add"  @tap="addImage" v-if="imageList.length < 6">
-      			<text class="iconfont icon-xiangji"></text>
-      			<text class="text">添加图片</text>
-      		</view>
-      	</view>
+        <view class="common-title">上传图片(最多6张)</view>
+        <view class="images">
+          <block v-for="(item, index) in imageList" :key='index'>
+            <view class="img">
+              <image :src="item.url" mode="aspectFill" @tap="prevImg(item.url)"></image>
+              <text class="iconfont icon-guanbi1" @tap="delImage(index)"></text>
+            </view>
+          </block>
+          <view class="add" @tap="addImage" v-if="imageList.length < 6">
+            <text class="iconfont icon-xiangji"></text>
+            <text class="text">添加图片</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <template slot="footer">
+      <view class="footer-btn-group">
+        <u-button text="确定" type="primary" size="large" @click="submitData"></u-button>
       </view>
-		</view>
-
-		<template slot="footer">
-			<view class="footer-btn-group">
-				<u-button text="确定" type="primary" size="large" @click="submitData"></u-button>
-			</view>
-		</template>
-
-    <u-datetime-picker
-      :show="isShowDatePicker"
-      v-model="datePickerValue"
-      mode="date"
-      :formatter="formatter"
-      @cancel="isShowDatePicker = false"
-      @close="isShowDatePicker = false"
-      @confirm="confirmDate"
-      :minDate="minDate"
-    ></u-datetime-picker>
+    </template>
+
+    <u-datetime-picker mode="dateTime" v-model="datePickerValue" :show="isShowDatePicker" :formatter="formatter"
+      @cancel="isShowDatePicker = false" @close="isShowDatePicker = false" @confirm="confirmDate"
+      :minDate="minDate"></u-datetime-picker>
+
+    <u-datetime-picker mode="dateTime" v-model="datePickerValue2" :show="isShowDatePicker2" :formatter="formatter"
+      @cancel="isShowDatePicker2 = false" @close="isShowDatePicker2 = false" @confirm="confirmDate2"
+      :minDate="Number(new Date(this.date))"></u-datetime-picker>
   </zj-page-layout>
 </template>
 
 <script>
-	import { uploadImgFull } from '@/common/utils/util.js';
-
-	export default {
-		data() {
-			return {
-				id: '',
-        orderDetail: {},
-				typeList: [
-					{name: '其他', value: '1'},
-					{name: '改约', value: '2'},
-					{name: '完工反馈', value: '3'},
-					{name: '异常反馈', value: '4'},
-				],
-				typeVal: '1',
-				date: '',
-				datePickerValue: Number(new Date()),
-				minDate: Number(new Date()),
-				isShowDatePicker: false,
-				remarkVal: '', // 备注值
-
-        imageList: [],
-
-        signNameUrl: '',
-
-        canClickBtn: true,
-			};
-		},
-
-		async onLoad({ id }) {
-			this.id = id;
+import { uploadImgFull } from '@/common/utils/util.js';
+
+export default {
+  data() {
+    return {
+      id: '',
+      orderDetail: {},
+      typeList: [
+        { name: '其他', value: '1' },
+        { name: '改约', value: '2' },
+        { name: '完工反馈', value: '3' },
+        { name: '异常反馈', value: '4' },
+      ],
+      typeVal: '1',
+      minDate: (new Date()).getTime(),
+      date: '',
+      datePickerValue: (new Date()).getTime(),
+      isShowDatePicker: false,
+      date2: '',
+      datePickerValue2: (new Date()).getTime(),
+      isShowDatePicker2: false,
+      remarkVal: '', // 备注值
+      imageList: [],
+      signNameUrl: '',
+      canClickBtn: true,
+    };
+  },
+
+  async onLoad({ id }) {
+    this.id = id;
+    this.getOrderDetail();
+
+    this.crossPage.$on('finishSign', async (data) => {
+      // this.$showLoading();
+      this.signNameUrl = data;
+    })
+
+    this.crossPage.$on('refreshFeedbackForm', () => {
       this.getOrderDetail();
+    })
+  },
+
+  onUnload() {
+    this.crossPage.$off('finishSign');
+    this.crossPage.$off('refreshFeedbackForm');
+  },
+
+  methods: {
+    formatter(type, value) {
+      if (type === 'year') {
+        return `${value}年`
+      }
+      if (type === 'month') {
+        return `${value}月`
+      }
+      if (type === 'day') {
+        return `${value}日`
+      }
+      if (type === 'hour') {
+        return `${value}时`
+      }
+      if (type === 'minute') {
+        return `${value}分`
+      }
+      return value
+    },
 
-      this.crossPage.$on('finishSign', async (data) => {
-      	// this.$showLoading();
-      	this.signNameUrl = data;
-      })
+    // 获取详情
+    getOrderDetail() {
+      return new Promise((resolve, reject) => {
+        this.$api.post('/pg/order/base/detail', {
+          orderBaseId: this.id,
+        }).then((res) => {
+          this.orderDetail = res.data;
+          if (res.data.appointmentTime) {
+            this.typeList[1].name = '改约';
+          } else {
+            this.typeList[1].name = '预约';
+          }
+          resolve(1);
+        })
+          .catch((res) => {
+            reject(0);
+          });
+      });
+    },
+
+    changeType(val) {
+      if (!this.orderDetail.appointmentTime && val == 3) {
+        return this.$tips('请先预约工单再完工反馈');
+      }
+      this.typeVal = val;
+    },
 
-      this.crossPage.$on('refreshFeedbackForm', () => {
-      	this.getOrderDetail();
+    // 去采集
+    toCollect() {
+      this.$navToPage({
+        url: `/packageWorkorder/pages/infoCollect/list?id=${this.id}`
       })
-		},
+    },
 
-    onUnload() {
-    	this.crossPage.$off('finishSign');
-    	this.crossPage.$off('refreshFeedbackForm');
+    confirmDate(e) {
+      this.isShowDatePicker = false;
+      this.date = this.formatTimestamp(e.value)
+      this.date2 = ""
+      this.datePickerValue2 = (new Date(e.value)).getTime()
     },
 
-		methods: {
-      formatter(type, value) {
-        if (type === 'year') {
-          return `${value}年`
-        }
-        if (type === 'month') {
-          return `${value}月`
-        }
-        if (type === 'day') {
-          return `${value}日`
-        }
-        return value
-      },
-
-      // 获取详情
-      getOrderDetail() {
-      	return new Promise((resolve, reject) => {
-      		this.$api.post('/pg/order/base/detail', {
-            orderBaseId: this.id,
-          }).then((res) => {
-            this.orderDetail = res.data;
-            if(res.data.appointmentTime) {
-              this.typeList[1].name = '改约';
-            }else {
-              this.typeList[1].name = '预约';
-            }
-            resolve(1);
-          })
-          .catch((res) => {
-            reject(0);
+    confirmDate2(e) {
+      this.isShowDatePicker2 = false;
+      this.date2 = this.formatTimestamp(e.value)
+    },
+
+    formatTimestamp(timestamp) {
+      const date = new Date(timestamp);
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const day = date.getDate().toString().padStart(2, '0');
+      const hours = date.getHours().toString().padStart(2, '0');
+      const minutes = date.getMinutes().toString().padStart(2, '0');
+      const seconds = date.getSeconds().toString().padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    },
+
+    // 添加图片
+    async addImage() {
+      uni.chooseImage({
+        count: 6 - this.imageList.length,
+        success: res => {
+          uni.showLoading();
+          res.tempFilePaths.forEach(async item => {
+            let data = await uploadImgFull(item);
+            this.imageList.push(data);
           });
-      	});
-      },
-
-      changeType(val) {
-        if(!this.orderDetail.appointmentTime && val == 3) {
-          return this.$tips('请先预约工单再完工反馈');
-        }
-        this.typeVal = val;
-      },
-
-      // 去采集
-      toCollect() {
-        this.$navToPage({
-          url: `/packageWorkorder/pages/infoCollect/list?id=${this.id}`
-        })
-      },
-
-      confirmDate(e) {
-        this.isShowDatePicker = false;
-        let time = new Date(e.value);
-        let y = time.getFullYear();
-        let m = (time.getMonth()+1) < 10 ? '0' + (time.getMonth()+1) : time.getMonth()+1;
-        let d = (time.getDate()) < 10 ? '0' + (time.getDate()) : time.getDate();
-        let hh = (time.getHours()) < 10 ? '0' + (time.getHours()) : time.getHours();
-        let mm = (time.getMinutes()) < 10 ? '0' + (time.getMinutes()) : time.getMinutes();
-        let ss = (time.getSeconds()) < 10 ? '0' + (time.getSeconds()) : time.getSeconds();
-        this.date = `${y}-${m}-${d}`;
-      },
-
-      // 添加图片
-      async addImage() {
-      	uni.chooseImage({
-      		count: 6 - this.imageList.length,
-      		success: res => {
-      			uni.showLoading();
-      			res.tempFilePaths.forEach(async item => {
-      				let data = await uploadImgFull(item);
-      				this.imageList.push(data);
-      			});
-      			uni.hideLoading();
-      		},
-      		fail: err => {}
-      	})
-      },
-
-      // 删除图片
-      delImage(index) {
-      	this.imageList.splice(index, 1);
-      },
-
-      //预览图片
-      prevImg(current) {
-      	uni.previewImage({
-      		current,
-      		urls: this.imageList.map(item => {
-      			return item.url
-      		})
-      	})
-      },
-
-      prevSignImg(url) {
-        uni.previewImage({
-        	current: url,
-        	urls: [url]
-        })
-      },
+          uni.hideLoading();
+        },
+        fail: err => { }
+      })
+    },
 
-      // 去收费
-      toCharge() {
-        this.$navToPage({
-          url: `/packageMaterial/pages/sale/index?type=${this.orderDetail.orderType == 'INSTALL' ? 'M' : 'P'}&oid=${this.id}`
-        })
-      },
+    // 删除图片
+    delImage(index) {
+      this.imageList.splice(index, 1);
+    },
 
-      toSignName() {
-        this.$navToPage({
-          url: `/packageWorkorder/pages/signName`
+    //预览图片
+    prevImg(current) {
+      uni.previewImage({
+        current,
+        urls: this.imageList.map(item => {
+          return item.url
         })
-      },
-
-			// 提交
-			async submitData() {
-        if (!this.canClickBtn) return this.$toast('请勿频繁操作');
-        this.canClickBtn = false;
-        setTimeout(() => { this.canClickBtn = true }, 3000)
-
-				if (this.typeVal == '2' && !this.date) return this.$toast('请选择改约时间');
-				if (this.typeVal == '3' && !this.signNameUrl) return this.$toast('请签名');
-				if ((this.typeVal == '1' || this.typeVal == '4') && !this.remarkVal) return this.$toast('请填写备注信息');
-
-				let params = {};
-
-				if (this.typeVal == '2') {
-          params.id = this.id;
-					params.appointmentTime = this.date + ' 00:00:00';
-					params.appointmentEndTime = this.date + ' 23:59:59';
-          params.remark = this.remarkVal;
-				}else {
-          params.orderBaseId = this.id;
-          params.content = this.remarkVal;
-        }
-
-        if (this.typeVal == '1') {
-          params.type = '其他';
-          params.typeText = '其他';
-        }
-        if (this.typeVal == '4') {
-          params.type = '异常反馈';
-          params.typeText = '异常反馈';
-        }
-        if (this.typeVal == '1' || this.typeVal == '4') {
-          params.imgSrc = this.imageList.map(item => {
-            return item.url
-          }).join(',')
-        }
-
-        if(this.typeVal == '3') {
-          const lo = await this.$getAddress();
-
-          params.orderBaseId = this.id;
-          params.overRemark = this.remarkVal;
-          params.userSign = this.signNameUrl;
-          params.address = lo.address || '';
-        }
-
-        // 其他/异常反馈
-        if (this.typeVal == '1' || this.typeVal == '4') {
-          this.$api.postJson('/pg/order/base/operator/add', {
-            ...params
-          }).then((res) => {
-          	this.submitSuccess();
-          });
-        }
-        // 改约
-        else if(this.typeVal == '2') {
-          this.$api.post('/changeOrder/changeAppointmentTime', {
-            ...params
-          }).then((res) => {
-          	this.submitSuccess();
-          });
-        }
-        // 完工反馈
-        else if(this.typeVal == '3') {
-          this.$api.post('/changeOrder/submitAll', {
-            ...params
-          }).then((res) => {
-          	this.submitSuccess('YWG');
-          });
-        }
-			},
-
-      submitSuccess(tab = '') {
-        this.$successToast('反馈成功');
-        this.crossPage.$emit('refreshWorkorderList', {tab: tab});
-        this.crossPage.$emit('refreshWorkorderDetail', '');
-        setTimeout(() => {
-          this.$navToPage({
-          	delta: 1
-          }, 'navigateBack')
-        }, 500)
+      })
+    },
+
+    prevSignImg(url) {
+      uni.previewImage({
+        current: url,
+        urls: [url]
+      })
+    },
+
+    // 去收费
+    toCharge() {
+      this.$navToPage({
+        url: `/packageMaterial/pages/sale/index?type=${this.orderDetail.orderType == 'INSTALL' ? 'M' : 'P'}&oid=${this.id}`
+      })
+    },
+
+    toSignName() {
+      this.$navToPage({
+        url: `/packageWorkorder/pages/signName`
+      })
+    },
+
+    // 提交
+    async submitData() {
+      if (!this.canClickBtn) return this.$toast('请勿频繁操作');
+      this.canClickBtn = false;
+      setTimeout(() => { this.canClickBtn = true }, 3000)
+
+      if (this.typeVal == '2' && !this.date) return this.$toast('请选择改约时间');
+      if (this.typeVal == '2' && !this.date2) return this.$toast('请选择改约时间');
+      if (this.typeVal == '3' && !this.signNameUrl) return this.$toast('请签名');
+      if ((this.typeVal == '1' || this.typeVal == '4') && !this.remarkVal) return this.$toast('请填写备注信息');
+
+      let params = {};
+
+      if (this.typeVal == '2') {
+        params.id = this.id;
+        params.appointmentTime = this.date;
+        params.appointmentEndTime = this.date2;
+        params.remark = this.remarkVal;
+      } else {
+        params.orderBaseId = this.id;
+        params.content = this.remarkVal;
+      }
+
+      if (this.typeVal == '1') {
+        params.type = '其他';
+        params.typeText = '其他';
+      }
+      if (this.typeVal == '4') {
+        params.type = '异常反馈';
+        params.typeText = '异常反馈';
       }
-		},
-	};
+      if (this.typeVal == '1' || this.typeVal == '4') {
+        params.imgSrc = this.imageList.map(item => {
+          return item.url
+        }).join(',')
+      }
+
+      if (this.typeVal == '3') {
+        const lo = await this.$getAddress();
+
+        params.orderBaseId = this.id;
+        params.overRemark = this.remarkVal;
+        params.userSign = this.signNameUrl;
+        params.address = lo.address || '';
+      }
+
+      // 其他/异常反馈
+      if (this.typeVal == '1' || this.typeVal == '4') {
+        this.$api.postJson('/pg/order/base/operator/add', {
+          ...params
+        }).then((res) => {
+          this.submitSuccess();
+        });
+      }
+      // 改约
+      else if (this.typeVal == '2') {
+        this.$api.post('/changeOrder/changeAppointmentTime', {
+          ...params
+        }).then((res) => {
+          this.submitSuccess();
+        });
+      }
+      // 完工反馈
+      else if (this.typeVal == '3') {
+        this.$api.post('/changeOrder/submitAll', {
+          ...params
+        }).then((res) => {
+          this.submitSuccess('YWG');
+        });
+      }
+    },
+
+    submitSuccess(tab = '') {
+      this.$successToast('反馈成功');
+      this.crossPage.$emit('refreshWorkorderList', { tab: tab });
+      this.crossPage.$emit('refreshWorkorderDetail', '');
+      setTimeout(() => {
+        this.$navToPage({
+          delta: 1
+        }, 'navigateBack')
+      }, 500)
+    }
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.all-container {
-		padding-bottom: 30rpx;
-	}
-
-  .common-title {
-  	font-size: 32rpx;
-  	font-weight: 600;
-    padding: 30rpx 0;
-    text {
-    	color: $minor-color;
-    }
+.all-container {
+  padding-bottom: 30rpx;
+}
+
+.common-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  padding: 30rpx 0;
+
+  text {
+    color: $minor-color;
   }
+}
+
+.type-container {
+  background: #ffffff;
+  padding: 0 30rpx;
+
+  .list {
+    display: flex;
+    flex-wrap: wrap;
 
-	.type-container {
-		background: #ffffff;
-		padding: 0 30rpx;
-
-		.list {
-			display: flex;
-			flex-wrap: wrap;
-			.item {
-				width: calc((100% - 30rpx) / 2);
-				height: 80rpx;
-				line-height: 80rpx;
-				text-align: center;
-				border-radius: 20rpx;
-				background: #F4F5F9;
-				margin-bottom: 30rpx;
-				&:nth-child(2n) {
-					margin-left: 30rpx;
-				}
-				&.active {
-					background: $theme-color;
-					color: #ffffff;
-				}
-			}
-		}
-	}
-
-  .date-conteiner {
-    background: #ffffff;
-    padding: 30rpx 30rpx;
     .item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 50rpx;
-      .label {
-        margin-right: 30rpx;
-        text {
-          color: $error-color;
-        }
+      width: calc((100% - 30rpx) / 2);
+      height: 80rpx;
+      line-height: 80rpx;
+      text-align: center;
+      border-radius: 20rpx;
+      background: #F4F5F9;
+      margin-bottom: 30rpx;
+
+      &:nth-child(2n) {
+        margin-left: 30rpx;
+      }
+
+      &.active {
+        background: $theme-color;
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+.date-conteiner {
+  background: #ffffff;
+  padding: 30rpx 30rpx;
+
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50rpx;
+
+    .label {
+      margin-right: 30rpx;
+
+      text {
+        color: $error-color;
       }
-      .picker {
-        .placeholder {
-          color: $sec-font;
-        }
-        .iconfont {
-          margin-left: 12rpx;
-          color: $sec-font;
-        }
+    }
+
+    .picker {
+      .placeholder {
+        color: $sec-font;
+      }
+
+      .iconfont {
+        margin-left: 12rpx;
+        color: $sec-font;
       }
     }
   }
+}
 
-	.over-container {
-		background: #ffffff;
-		padding: 10rpx 30rpx;
-    .row {
-      height: 100rpx;
+.over-container {
+  background: #ffffff;
+  padding: 10rpx 30rpx;
+
+  .row {
+    height: 100rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .label {
+      font-size: 32rpx;
+      font-weight: 600;
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      .label {
-      	font-size: 32rpx;
-      	font-weight: 600;
-        display: flex;
-        align-items: center;
-      	text {
-      		color: $minor-color;
-      	}
-        ::v-deep .u-icon {
-          margin-left: 8rpx;
-        }
+      text {
+        color: $minor-color;
+      }
+
+      ::v-deep .u-icon {
+        margin-left: 8rpx;
       }
-      .btn {
-        ::v-deep .u-button {
-          height: 60rpx;
-        }
+    }
+
+    .btn {
+      ::v-deep .u-button {
+        height: 60rpx;
       }
     }
-	}
+  }
+}
+
+.sign-container {
+  background: #ffffff;
+  padding: 0 30rpx 30rpx;
+
+  .empty {
+    height: 200rpx;
+    background: #f4f5f9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12rpx;
+    color: $sec-font;
+  }
+
+  .img {
+    position: relative;
 
-  .sign-container {
-    background: #ffffff;
-    padding: 0 30rpx 30rpx;
-    .empty {
+    image {
+      width: 100%;
       height: 200rpx;
-      background: #f4f5f9;
+    }
+
+    text {
+      position: absolute;
+      right: -10rpx;
+      top: -10rpx;
+      width: 40rpx;
+      height: 40rpx;
+      border-radius: 50%;
+      background: #FF3F42;
+      font-size: 24rpx;
+      color: #FFFFFF;
+      text-align: center;
+      line-height: 40rpx;
+      display: block;
+    }
+  }
+}
+
+.remark-container {
+  padding: 1rpx 30rpx 30rpx;
+  background: #ffffff;
+
+  ::v-deep .u-textarea {
+    background: #f4f5f9;
+  }
+}
+
+.image-container {
+  padding: 1rpx 30rpx 30rpx;
+  background: #ffffff;
+
+  .images {
+    display: flex;
+    flex-wrap: wrap;
+
+    .add {
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      border-radius: 12rpx;
-      color: $sec-font;
+      width: 146rpx;
+      height: 146rpx;
+      border: 2rpx dashed #dadada;
+      border-radius: 10rpx;
+      margin-top: 20rpx;
+
+      .iconfont {
+        font-size: 48rpx;
+        color: #999999;
+      }
+
+      .text {
+        font-size: 24rpx;
+        color: #999999;
+        margin-top: 10rpx;
+      }
     }
+
     .img {
       position: relative;
+      margin-right: 20rpx;
+      margin-top: 20rpx;
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+
       image {
-        width: 100%;
-        height: 200rpx;
+        width: 150rpx;
+        height: 150rpx;
+        border-radius: 10rpx;
+        overflow: hidden;
+        display: block;
       }
+
       text {
-      	position: absolute;
-      	right: -10rpx;
-      	top: -10rpx;
-      	width: 40rpx;
-      	height: 40rpx;
-      	border-radius: 50%;
-      	background: #FF3F42;
-      	font-size: 24rpx;
-      	color: #FFFFFF;
-      	text-align: center;
-      	line-height: 40rpx;
-      	display: block;
+        position: absolute;
+        right: -10rpx;
+        top: -10rpx;
+        width: 40rpx;
+        height: 40rpx;
+        border-radius: 50%;
+        background: #FF3F42;
+        font-size: 24rpx;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 40rpx;
+        display: block;
       }
     }
   }
-
-	.remark-container {
-		padding: 1rpx 30rpx 30rpx;
-		background: #ffffff;
-
-		::v-deep .u-textarea {
-			background: #f4f5f9;
-		}
-	}
-
-  .image-container {
-		padding: 1rpx 30rpx 30rpx;
-		background: #ffffff;
-    .images {
-    	display: flex;
-    	flex-wrap: wrap;
-    	.add {
-    		display: flex;
-    		flex-direction: column;
-    		align-items: center;
-    		justify-content: center;
-    		width: 146rpx;
-    		height: 146rpx;
-    		border: 2rpx dashed #dadada;
-    		border-radius: 10rpx;
-    		margin-top: 20rpx;
-    		.iconfont {
-    			font-size: 48rpx;
-    			color: #999999;
-    		}
-    		.text {
-    			font-size: 24rpx;
-    			color: #999999;
-    			margin-top: 10rpx;
-    		}
-    	}
-    	.img {
-    		position: relative;
-    		margin-right: 20rpx;
-    		margin-top: 20rpx;
-    		&:nth-child(4n) {
-    			margin-right: 0;
-    		}
-    		image {
-    			width: 150rpx;
-    			height: 150rpx;
-    			border-radius: 10rpx;
-    			overflow: hidden;
-    			display: block;
-    		}
-    		text {
-    			position: absolute;
-    			right: -10rpx;
-    			top: -10rpx;
-    			width: 40rpx;
-    			height: 40rpx;
-    			border-radius: 50%;
-    			background: #FF3F42;
-    			font-size: 24rpx;
-    			color: #FFFFFF;
-    			text-align: center;
-    			line-height: 40rpx;
-    			display: block;
-    		}
-    	}
-    }
-  }
+}
 </style>