兑换成功

src/views/bookShelf/components/Payment.vue

@@ -233,7 +233,7 @@ export default {
       getLogin(MethodName, data).then((res) => {
         if (res.status === 1) {
           if (res.is_success === "true") {
-            this.$message("支付成功");
+            this.$message.success("支付成功");
             clearInterval(this.timer);
             if (this.$emit("handleSuccess")) {
               this.$emit("handleSuccess");

src/views/personalCenter/components/ConversionCode.vue

@@ -1,58 +1,63 @@
 <template>
   <div class="conversion-code personal-info">
     <h2>兑换码</h2>
-    <el-input placeholder="输入兑换码" v-model="inputValue" class="input-with-btn" maxlength="20">
-        <el-button slot="append" @click="handleExchange" :loading="loading">兑换</el-button>
+    <el-input
+      placeholder="输入兑换码"
+      v-model="inputValue"
+      class="input-with-btn"
+      maxlength="20"
+    >
+      <el-button slot="append" @click="handleExchange" :loading="loading"
+        >兑换</el-button
+      >
     </el-input>
     <el-table
-        :data="dataList"
-        v-loading="tableLoading"
-        :max-height="tableHeight"
-        style="width: 100%">
-        <el-table-column type="expand">
-            <template slot-scope="props">
-                <el-form label-position="left" inline class="demo-table-expand">
-                    <el-form-item>
-                        <h3 class="content-title">兑换内容</h3>
-                        <div class="content-list" v-for="(itemC,indexC) in props.row.goods_list" :key="indexC">
-                            <span>{{indexC+1+'.'}}</span>
-                            <b>{{itemC.goods_name}}</b>
-                        </div>
-                    </el-form-item>
-                </el-form>
-            </template>
-        </el-table-column>
-        <el-table-column
-            type="index"
-            label="#"
-            sortable
-            width="54"
-            :index="(pageNumber-1)*pageSize+1">
-        </el-table-column>
-        <el-table-column
-            label="名称"
-            prop="discount_code_name"
-            width="300">
-        </el-table-column>
-        <el-table-column
-            label="兑换码"
-            prop="discount_code"
-            width="300">
-        </el-table-column>
-        <el-table-column
-            label="使用时间"
-            prop="use_time">
-        </el-table-column>
+      :data="dataList"
+      v-loading="tableLoading"
+      :max-height="tableHeight"
+      style="width: 100%"
+    >
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-form label-position="left" inline class="demo-table-expand">
+            <el-form-item>
+              <h3 class="content-title">兑换内容</h3>
+              <div
+                class="content-list"
+                v-for="(itemC, indexC) in props.row.goods_list"
+                :key="indexC"
+              >
+                <span>{{ indexC + 1 + "." }}</span>
+                <b>{{ itemC.goods_name }}</b>
+              </div>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column
+        type="index"
+        label="#"
+        sortable
+        width="54"
+        :index="(pageNumber - 1) * pageSize + 1"
+      >
+      </el-table-column>
+      <el-table-column label="名称" prop="discount_code_name" width="300">
+      </el-table-column>
+      <el-table-column label="兑换码" prop="discount_code" width="300">
+      </el-table-column>
+      <el-table-column label="使用时间" prop="use_time"> </el-table-column>
     </el-table>
     <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="pageNumber"
-        :page-sizes="[10, 20, 30, 40, 50]"
-        :page-size="pageSize"
-        layout="total, prev, pager, next, sizes, jumper"
-        :total="total_count">
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNumber"
+      :page-sizes="[10, 20, 30, 40, 50]"
+      :page-size="pageSize"
+      layout="total, prev, pager, next, sizes, jumper"
+      :total="total_count"
+    >
     </el-pagination>
   </div>
 </template>
@@ -63,27 +68,25 @@
 import { getLogin } from "@/api/ajax";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { },
+  components: {},
   props: ["data"],
   data() {
     //这里存放数据
     return {
-        pageSize: 10, 
-        pageNumber: 1,
-        inputValue: this.$route.query.codeId?this.$route.query.codeId:'', // 兑换码输入框
-        dataList:[],
-        total_count: 0,
-        tableLoading: false,
-        tableHeight: "", // 表格高度
-        loading: false
-    }
+      pageSize: 10,
+      pageNumber: 1,
+      inputValue: this.$route.query.codeId ? this.$route.query.codeId : "", // 兑换码输入框
+      dataList: [],
+      total_count: 0,
+      tableLoading: false,
+      tableHeight: "", // 表格高度
+      loading: false,
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {
-
-  },
+  watch: {},
   //方法集合
   methods: {
     //计算table高度(动态设置table高度)
@@ -97,178 +100,178 @@ export default {
       }
     },
     handleSizeChange(val) {
-        this.pageSize = val
-        this.pageNumber = 1
-        this.getList()
+      this.pageSize = val;
+      this.pageNumber = 1;
+      this.getList();
     },
     handleCurrentChange(val) {
-        this.pageNumber = val
-        this.getList()
+      this.pageNumber = val;
+      this.getList();
     },
-    getList(val){
-        this.tableLoading = true
-        if(val){
-            this.pageNumber = val
-        }
-        let MethodName = "/ShopServer/Client/OrderManager/PageQueryMyOrderList_DiscountCode"
-        let data = {
-            page_capacity:this.pageSize,
-            cur_page:this.pageNumber
-        }
-        getLogin(MethodName, data)
+    getList(val) {
+      this.tableLoading = true;
+      if (val) {
+        this.pageNumber = val;
+      }
+      let MethodName =
+        "/ShopServer/Client/OrderManager/PageQueryMyOrderList_DiscountCode";
+      let data = {
+        page_capacity: this.pageSize,
+        cur_page: this.pageNumber,
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            this.tableLoading = false
-            if(res.status===1){
-                this.dataList = res.order_list
-                this.total_count = res.total_count
-            }
+          this.tableLoading = false;
+          if (res.status === 1) {
+            this.dataList = res.order_list;
+            this.total_count = res.total_count;
+          }
         })
         .catch(() => {
-            this.tableLoading = false
+          this.tableLoading = false;
         });
     },
     // 兑换
-    handleExchange(){
-        this.loading = true
-        let MethodName = "/ShopServer/Client/OrderManager/CreateOrder_UseDiscountCode"
-        let data = {
-            discount_code:this.inputValue.trim()
-        }
-        getLogin(MethodName, data)
+    handleExchange() {
+      this.loading = true;
+      let MethodName =
+        "/ShopServer/Client/OrderManager/CreateOrder_UseDiscountCode";
+      let data = {
+        discount_code: this.inputValue.trim(),
+      };
+      getLogin(MethodName, data)
         .then((res) => {
-            this.loading = false
-            if(res.status===1){
-                this.getList(1)
-            }
+          this.loading = false;
+          if (res.status === 1) {
+            this.$message.success("兑换成功");
+            this.getList(1);
+          }
         })
         .catch(() => {
-            this.loading = false
+          this.loading = false;
         });
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getTableHeight()
-    this.getList()
+    this.getTableHeight();
+    this.getList();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.conversion-code{
-    background: #FFFFFF;
-    border-radius: 4px;
-    padding: 24px;
-    h2{
-        font-weight: 500;
-        font-size: 20px;
-        line-height: 28px;
-        color: #1D2129;
-        margin: 0;
-    }
-    .el-table{
-        margin: 24px 0;
-    }
-    .el-pagination{
-        text-align: right;
+.conversion-code {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 24px;
+  h2 {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+    color: #1d2129;
+    margin: 0;
+  }
+  .el-table {
+    margin: 24px 0;
+  }
+  .el-pagination {
+    text-align: right;
+  }
+  .input-with-btn {
+    margin-top: 16px;
+    width: 290px;
+  }
+  .content-title {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 22px;
+    color: #000000;
+    margin: 4px 24px;
+  }
+  .content-list {
+    padding: 4px 24px;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    color: #2f3742;
+    display: flex;
+    span {
+      width: 22px;
+      display: block;
+      flex-shrink: 0;
     }
-    .input-with-btn{
-        margin-top: 16px;
-        width: 290px;
-    }
-    .content-title{
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 22px;
-        color: #000000;
-        margin: 4px 24px;
-    }
-    .content-list{
-        padding: 4px 24px;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 20px;
-        color: #2F3742;
-        display: flex;
-        span{
-            width: 22px;
-            display: block;
-            flex-shrink: 0;
-        }
-        b{
-            flex: 1;
-            font-weight: 400;
-        }
+    b {
+      flex: 1;
+      font-weight: 400;
     }
+  }
 }
 </style>
 <style lang="scss">
-.conversion-code{
-    .el-table__expanded-cell:hover{
-        background: #F7F8FA !important;
+.conversion-code {
+  .el-table__expanded-cell:hover {
+    background: #f7f8fa !important;
+  }
+  .el-form-item {
+    margin-bottom: 0;
+  }
+  .el-table__expand-column {
+    .el-icon-arrow-right:before {
+      content: "";
+      background: url("../../../assets/icon-right.png") center no-repeat;
+      background-size: cover;
+      width: 16px;
+      height: 16px;
+      display: block;
     }
-    .el-form-item{
-        margin-bottom: 0;
+    .el-table__expand-icon > .el-icon {
+      margin-left: -4px;
+      margin-top: -7px;
     }
-    .el-table__expand-column{
-        .el-icon-arrow-right:before{
-            content: '';
-            background: url('../../../assets/icon-right.png') center no-repeat;
-            background-size: cover;
-            width: 16px;
-            height: 16px;
-            display: block;
-        }
-        .el-table__expand-icon>.el-icon{
-            margin-left: -4px;
-            margin-top: -7px;
-        }
+  }
+  .el-table__expand-icon--expanded {
+    transform: none;
+    .el-icon-arrow-right:before {
+      content: "";
+      background: url("../../../assets/icon-down.png") center no-repeat;
+      background-size: cover;
+      width: 16px;
+      height: 16px;
+      display: block;
     }
-    .el-table__expand-icon--expanded{
-        transform: none;
-        .el-icon-arrow-right:before{
-            content: '';
-            background: url('../../../assets/icon-down.png') center no-repeat;
-            background-size: cover;
-            width: 16px;
-            height: 16px;
-            display: block;
-        }
+  }
+  .input-with-btn {
+    .el-input__inner {
+      height: 32px;
+      color: #1d2129;
+      background: #f2f3f5;
+      border: none;
     }
-    .input-with-btn{
-        .el-input__inner{
-            height: 32px;
-            color: #1D2129;
-            background: #F2F3F5;
-            border: none;
-        }
-        .el-input-group__append{
-            border: none;
-            width: 52px;
-            background: #F2F3F5;
-            border-left: 1px solid #E5E6EB;
-            padding: 0;
-            text-align: center;
-        }
+    .el-input-group__append {
+      border: none;
+      width: 52px;
+      background: #f2f3f5;
+      border-left: 1px solid #e5e6eb;
+      padding: 0;
+      text-align: center;
     }
-    
+  }
 }
 </style>
-