remark

src/pages/order/remark.vue

@@ -3,54 +3,56 @@
     <Header title="评论"></Header>
     <view class="content">
       <wd-form ref="form" :model="formdata" :rules="rules" class="remake">
-        <text class="textarea">{{ shopname }}</text>
-        <view class="itemPicker">
-          <view class="item01" prop="merchantServices">
-            <text class="label">评分</text>
-            <!-- 评分 -->
-            <wd-rate
-              v-model="formdata.merchantServices"
-              active-color="#ff0000"
-              size="50rpx"
-              space="10px"
-              @change="handlemerchant"
+        <wd-cell-group>
+          <text class="textarea">{{ shopname }}</text>
+          <view class="itemPicker">
+            <view class="item01" prop="merchantServices">
+              <text class="label">评分</text>
+              <!-- 评分 -->
+              <wd-rate
+                v-model="formdata.merchantServices"
+                active-color="#ff0000"
+                size="50rpx"
+                space="10px"
+                @change="handlemerchant"
+              />
+            </view>
+            <view class="item02">
+              <text>{{ merList[formdata.merchantServices] }}</text>
+            </view>
+          </view>
+          <!-- 内容描述 -->
+          <view prop="evaluation">
+            <wd-textarea
+              v-model="formdata.evaluation"
+              placeholder="亲，分享您的看法，给其他人一个参考哦！"
             />
           </view>
-          <view class="item02">
-            <text>{{ merList[formdata.merchantServices] }}</text>
+          <wd-cell title-width="0px"></wd-cell>
+          <text class="textarea">上传图片/视频</text>
+          <!-- 图片上传 -->
+          <view class="wdUpload" prop="images">
+            <wd-upload
+              multiple
+              :action="action"
+              @change="handleFile"
+              :file-list="formdata.images"
+              :before-remove="beforeRemove"
+              :header="headers"
+            ></wd-upload>
           </view>
-        </view>
-        <!-- 内容描述 -->
-        <view prop="evaluation">
-          <wd-textarea
-            v-model="formdata.evaluation"
-            placeholder="亲，分享您的看法，给其他人一个参考哦！"
-          />
-        </view>
-
-        <text class="textarea">上传图片/视频</text>
-        <!-- 图片上传 -->
 
-        <view class="wdUpload" prop="images">
-          <wd-upload
-            multiple
-            :action="action"
-            @change="handleFile"
-            :file-list="formdata.images"
-            :before-remove="beforeRemove"
-            :header="headers"
-          ></wd-upload>
-        </view>
-        <!-- 匿名评价 -->
-        <wd-cell title="匿名评价" prop="isAnonymous" class="itemSwichval">
-          <wd-switch
-            size="48rpx"
-            active-color="#EC1B1B"
-            v-model="formdata.isAnonymous"
-            active-value="1"
-            inactive-value="0"
-          />
-        </wd-cell>
+          <!-- 匿名评价 -->
+          <wd-cell title="匿名评价" prop="isAnonymous" class="itemSwichval">
+            <wd-switch
+              size="48rpx"
+              active-color="#EC1B1B"
+              v-model="formdata.isAnonymous"
+              active-value="1"
+              inactive-value="0"
+            />
+          </wd-cell>
+        </wd-cell-group>
       </wd-form>
 
       <wd-button type="error" block @click="handleSubmit">发布</wd-button>
@@ -108,7 +110,7 @@ const rules = {
   // images: [
   //   {
   //     required: true,
-  //     message: '请上传图片',
+  //     message: '请上传图片1',
   //     validator: (value: any) => {
   //       if (value.length) {
   //         console.log('上传成功');
@@ -309,6 +311,15 @@ const handleSubmit = async () => {
       :deep(.wd-upload__status-content) {
         background-color: #000;
       }
+      :deep(.wd-upload) {
+        gap: 20rpx;
+        .wd-upload__preview {
+          width: calc((100% - 60rpx) / 4);
+          margin: 0;
+          border-radius: 12rpx;
+          overflow: hidden;
+        }
+      }
     }
   }