退订组件优化

purchase_H5/src/components/unbuyModal.vue

@@ -40,13 +40,16 @@
     <van-action-sheet lock-scroll close-on-popstate v-model="showSheet" title="退订原因" @close="closeSheet">
       <van-radio-group v-model="radio">
         <van-cell-group>
-          <div v-for="(item, index) in resonList" style="width: 100%" :key="index">
-            <van-cell :key="index" :title="item.title" clickable @click="radioClick(item.value)">
-              <template #right-icon>
-                <van-radio checked-color="#d6000f" :name="item.value" />
-              </template>
-            </van-cell>
+          <div class="rowList">
+            <div v-for="(item, index) in resonList" style="width:50%" :key="index">
+              <van-cell :key="index" :title="item.title" clickable @click="radioClick(item.value)">
+                <template #right-icon>
+                  <van-radio checked-color="#d6000f" :name="item.value" />
+                </template>
+              </van-cell>
+            </div>
           </div>
+
         </van-cell-group>
         <div class="fileBox">
           <van-field v-model="message" rows="2" autosize type="textarea" placeholder="请描述原因，如遇到其他问题请反馈给我们" show-word-limit />
@@ -117,7 +120,7 @@ import {
 } from "../api/index";
 import addR from "../common/addRecord";
 import vuePuzzle from "vue-puzzle-vcode";
-import { Notify, Dialog } from "vant";
+import { Notify, Dialog, } from "vant";
 export default {
   model: {
     prop: "value",
@@ -305,6 +308,9 @@ export default {
             if (this.pageData.remarks.treaty === '1') {
               this.getOrderList(res.data.userid)
             } else {
+              // this.$toast.loading({
+              //   duration: 30000
+              // })
               this.unbuyClick()
             }
             // this.opoutShow = true;
@@ -340,23 +346,21 @@ export default {
         userid: this.$store.state.user.userid,
       };
       await this.postReson(this.$store.state.user.userid, this.$store.state.user.phone);
-      postBuy(updata).then(
-        (res) => {
-          if (res.code === 10000) {
-            addR.unBuySuccess();
-            this.$toast.success("退订成功");
-            this.$emit("change", false);
-            this.$emit("childData", "已退订");
-          }
-        },
-        (res) => {
-          addR.unBuyFail(res);
-          Dialog({
-            message: res.message,
-            theme: "round-button",
-          });
+      postBuy(updata).then((res) => {
+        if (res.code === 10000) {
+          addR.unBuySuccess();
+          this.$toast.success("退订成功");
           this.$emit("change", false);
+          this.$emit("childData", "已退订");
         }
+      }, (res) => {
+        addR.unBuyFail(res);
+        Dialog({
+          message: res.message,
+          theme: "round-button",
+        });
+        this.$emit("change", false);
+      }
       );
     },
     sureClick () {
@@ -470,6 +474,11 @@ export default {
   box-sizing: border-box;
   border: 1px solid #c4c4c4;
 }
+.rowList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
 
 .modal {
   box-sizing: border-box;