修改分享界面

src/views/home/personal_question/components/ShareDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible="dialogVisible" title="分享" width="700px" @close="dialogClose" @closed="dialogClosed">
+  <el-dialog :visible="dialogVisible" title="分享" width="730px" @close="dialogClose" @closed="dialogClosed">
     <div class="share-condition">
       <div class="condition-top">
         <span>开始日期</span>
@@ -25,10 +25,7 @@
         <el-input v-model="memo" placeholder="请输入" type="textarea" />
       </div>
 
-      <div
-        class="condition-bottom"
-        :style="{ 'grid-template': `30px 32px / repeat(auto-fill, ${send_type === sendModes[0].type ? 272 : 300}px` }"
-      >
+      <div class="condition-bottom" :style="{ 'grid-template': `30px 32px / repeat(3, 1fr)` }">
         <span>发送方式</span>
         <el-radio-group v-model="send_type">
           <el-radio v-for="{ type, name } in sendModes" :key="type" :label="type">{{ name }}</el-radio>
@@ -40,6 +37,12 @@
               {{ name }}
             </el-radio>
           </el-radio-group>
+          <span>正确答案</span>
+          <el-radio-group v-model="correct_answer_show_mode">
+            <el-radio v-for="{ type, name } in correctAnswerShowModeList" :key="type" :label="type">
+              {{ name }}
+            </el-radio>
+          </el-radio-group>
         </template>
         <template v-if="send_type === sendModes[1].type">
           <span>访问权限</span>
@@ -48,6 +51,14 @@
               {{ name }}
             </el-radio>
           </el-radio-group>
+          <span :class="{ disabled: access_popedom === accessPermissions[0].type }">作答模式</span>
+          <el-radio-group
+            v-model="answer_mode"
+            :disabled="access_popedom === accessPermissions[0].type"
+            :class="{ disabled: access_popedom === accessPermissions[0].type }"
+          >
+            <el-radio v-for="{ type, name } in answerModes" :key="type" :label="type">{{ name }}</el-radio>
+          </el-radio-group>
         </template>
       </div>
     </div>
@@ -63,13 +74,11 @@
         <span slot="suffix">人</span>
       </el-input>
       <span class="tips">可直接输入人数</span>
-      <span :class="{ disabled: access_popedom === accessPermissions[0].type }">作答模式</span>
-      <el-radio-group
-        v-model="answer_mode"
-        :disabled="access_popedom === accessPermissions[0].type"
-        :class="{ disabled: access_popedom === accessPermissions[0].type }"
-      >
-        <el-radio v-for="{ type, name } in answerModes" :key="type" :label="type">{{ name }}</el-radio>
+      <span class="disabled">正确答案</span>
+      <el-radio-group v-model="correct_answer_show_mode" :disabled="true" class="disabled">
+        <el-radio v-for="{ type, name } in correctAnswerShowModeList" :key="type" :label="type">
+          {{ name }}
+        </el-radio>
       </el-radio-group>
     </div>
 
@@ -117,7 +126,7 @@ export default {
         { type: 1, name: '练习模式' },
         { type: 2, name: '考试模式' },
       ],
-      access_popedom: 1, // 访问权限
+      access_popedom: 2, // 访问权限
       accessPermissions: [
         {
           type: 1,
@@ -128,6 +137,11 @@ export default {
           name: '仅作答',
         },
       ], // 访问权限
+      correct_answer_show_mode: 1,
+      correctAnswerShowModeList: [
+        { type: 1, name: '答题后显示' },
+        { type: 2, name: '手动推送' },
+      ],
       max_person_count: '', // 访问人数
       begin_date: this.getNowDate(),
       effective_days: 50,
@@ -149,6 +163,7 @@ export default {
         send_type: this.send_type,
         answer_mode: this.answer_mode,
         access_popedom: this.access_popedom,
+        correct_answer_show_mode: this.correct_answer_show_mode,
         max_person_count: this.max_person_count || -1,
         memo: this.memo,
       }).then(({ status, ...data }) => {
@@ -195,7 +210,7 @@ export default {
 
       .condition-top {
         display: grid;
-        grid-template: 30px 32px / repeat(auto-fill, 210px);
+        grid-template: 30px 32px / repeat(3, 1fr);
         grid-auto-flow: column;
         column-gap: 16px;
       }
@@ -209,10 +224,15 @@ export default {
       .condition-bottom {
         display: grid;
         grid-auto-flow: column;
+        column-gap: 24px;
 
         .el-radio-group {
           display: flex;
         }
+
+        .disabled {
+          opacity: 0.5;
+        }
       }
     }
 
@@ -222,9 +242,9 @@ export default {
 
     .generate-condition {
       display: grid;
-      grid-template: 30px 32px 30px / repeat(auto-fill, 300px);
+      grid-template: 30px 32px 30px / repeat(auto-fill, 210px);
       grid-auto-flow: column;
-      column-gap: 16px;
+      column-gap: 32px;
       align-items: center;
       margin-top: 16px;