1323

src/pages/order/remark.vue

@@ -2,44 +2,50 @@
   <view class="container">
     <Header title="评论"></Header>
     <view class="content">
-      <view class="remake">
-        <wd-row>
-          <wd-col :span="24" custom-class="text">
-            <h5>老凯里酸汤鱼</h5>
-          </wd-col>
-        </wd-row>
-        <wd-row custom-class="wd-rows">
-          <wd-col :span="16">
-            <span>评分</span>
+      <wd-form ref="form" :model="model" :rules="rules" class="remake">
+        <text class="textarea">老凯里酸汤鱼</text>
+        <view class="itemPicker">
+          <view class="item01">
+            <text class="label">评分</text>
             <wd-rate v-model="pinfen" active-color="#ff0000" size="50rpx" space="10px" />
-          </wd-col>
-          <wd-col :span="8">
-            <span>非常满意</span>
-          </wd-col>
-        </wd-row>
-        <wd-divider></wd-divider>
-
+          </view>
+          <view class="item02">
+            <text>非常满意</text>
+          </view>
+        </view>
         <wd-textarea v-model="pingjia" placeholder="亲，分享您的看法，给其他人一个参考哦！" />
-        <wd-row>
-          <wd-col :span="24" custom-class="text">
-            <h5>上传图片/视频</h5>
-          </wd-col>
-        </wd-row>
+
+        <text class="textarea">上传图片/视频</text>
+
         <wd-upload
+          class="wdUpload"
           accept="media"
           multiple
           :file-list="fileList"
           :action="action"
           @change="handleChange"
         ></wd-upload>
+        <view class="tuijian">
+          <view class="tjTitle">
+            <text class="textarea">我要推荐菜</text>
+            <text class="textRight">
+              查看全部(30)
+              <i></i>
+            </text>
+          </view>
+          <view class="itemtuijianList">
+            <wd-button type="success" plain classPrefix="fish" icon="kehuishouwu">
+              主要按钮
+            </wd-button>
+          </view>
+        </view>
 
-        <wd-row>
-          <wd-col :span="24" custom-class="text">
-            <h5>我要推荐菜</h5>
-            <h5>查看全部(30)</h5>
-          </wd-col>
-        </wd-row>
-      </view>
+        <wd-cell title="开启折扣" title-width="100px" prop="switchVal" center>
+          <view style="text-align: left">
+            <wd-switch v-model="mode.switchVal" />
+          </view>
+        </wd-cell>
+      </wd-form>
 
       <wd-button type="error" block>发布</wd-button>
     </view>
@@ -49,36 +55,37 @@
 import Header from './components/Header/index.vue';
 
 const pinfen = ref<number>(0);
-const pingjia = ref<string>('');
-
 function changeValue({ pinfen }) {
   console.log(pinfen);
 }
-const fileList = ref<any[]>([
-  {
-    url: '1',
-  },
-]);
+const pingjia = ref<string>('');
 
-const action: string = '';
+const action = ref<string>('/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload');
 
-function handleChange({ fileList: files }) {
+const fileList = ref([]);
+
+function handleChange({ files }) {
   fileList.value = files;
 }
+const mode = reactive<{
+  switchVal: boolean;
+}>({
+  switchVal: true,
+});
 </script>
 <style lang="scss" scoped>
 .container {
   width: 100%;
   height: auto;
   background: #f4f4f4;
-  margin-top: 88rpx;
-  min-height: calc(100vh - 88rpx);
+  min-height: calc(100vh - 1rpx);
   display: flex;
   flex-direction: column;
 }
 
 .content {
-  margin: 0 20rpx;
+  margin: 25rpx 20rpx 0;
+  padding-top: 88rpx;
 
   .remake {
     width: auto;
@@ -89,17 +96,60 @@ function handleChange({ fileList: files }) {
     margin-bottom: 172rpx;
     padding: 20rpx;
 
-    .wd-rows {
-      margin-top: 25rpx;
+    .itemPicker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 32rpx;
+      padding-bottom: 24rpx;
+      border-bottom: 1rpx solid #e8e8e8;
+
+      .item01 {
+        display: flex;
+        align-items: center;
+        gap: 29rpx;
+
+        .label {
+          width: 64rpx;
+          height: 32rpx;
+          font-family:
+            PingFang SC Bold,
+            PingFang SC Bold;
+          font-weight: 400;
+          font-size: 32rpx;
+          color: #333333;
+          line-height: 32rpx;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
     }
 
-    .text h5 {
+    .textarea {
       font-weight: 400;
       font-size: 32rpx;
       color: #333333;
       line-height: 32rpx;
       text-align: left;
     }
+
+    .wdUpload {
+      margin-top: 25rpx;
+    }
+  }
+
+  .tuijian {
+    margin-top: 72rpx;
+    .tjTitle {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 40rpx;
+      .textRight {
+        font-size: 24rpx;
+      }
+    }
   }
 }
 </style>