开始做点击表格药品名，显示药品详情

src/components/index.vue

@@ -88,10 +88,21 @@
               <articleList :articleList="articles"></articleList>
 
               <template>
-                <div class="pagination-wrap">
+                <div class=" pagination-wrap">
                   <el-table :data="table1List">
-                    <el-table-column prop="drug1" label="药品A"></el-table-column>
-                    <el-table-column prop="drug2" label="药品B"></el-table-column>
+<!--                    <el-table-column prop="drug1" label="药品A"></el-table-column>-->
+<!--                    <el-table-column prop="drug2" label="药品B"></el-table-column>-->
+                    <el-table-column label="药品A">
+                      <template slot-scope="{ row }">
+                        <span @click="selectDrugDetails(row.drug1)">{{ row.drug1 }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="药品B">
+                      <template slot-scope="{ row }">
+                        <span @click="selectDrugDetails(row.drug2)">{{ row.drug2 }}</span>
+                      </template>
+                    </el-table-column>
+
                     <el-table-column prop="reaction" label="相互作用效果"></el-table-column>
                   </el-table>
 <!--                  <div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">-->
@@ -136,7 +147,7 @@
   </div>
 </template>
 <script>
-import {listTable1, listTotal} from "@/utils/table1";
+import {listTable1, listTotal, selectDetails} from "@/utils/table1";
 
   const loader = () => import( "./common/loader");
   const zombie = () => import( "./common/zombie");

src/components/myAside.vue

@@ -31,9 +31,9 @@
       </div>
       <div style="display: flex">
         <input class="ais-SearchBox-input" type="text"
-               v-model="articleSearch"
+               v-model="drugName"
                placeholder="搜索药品" maxlength="32">
-        <div class="ais-SearchBox-submit" @click="selectArticle()">
+        <div class="ais-SearchBox-submit" @click="selectDrugDetails()">
           <svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
             <path
               d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z"
@@ -108,12 +108,13 @@
 <!--          <span v-for="(s, i) in sort.sortName.split('')" :key="i">{{ s }}</span>-->
 <!--        </div>-->
 <!--      </div>-->
+      {{drugDetails}}
     </div>
 
     <!-- 赞赏 -->
     <div class="shadow-box-mini background-opacity wow admire-box"
          v-if="!$common.isEmpty(admires)">
-      <div style="font-weight: bold;margin-bottom: 20px">🧨赞赏</div>
+      <div style="font-weight: bold;margin-bottom: 20px">🧨援助</div>
       <div>
         <vue-seamless-scroll :data="admires" style="height: 200px;overflow: hidden">
           <div v-for="(item, i) in admires"
@@ -132,12 +133,12 @@
         </vue-seamless-scroll>
       </div>
       <div class="admire-btn" @click="showAdmire()">
-        赞赏
+        援助
       </div>
     </div>
 
 <!--     微信 -->
-    <el-dialog title="赞赏"
+    <el-dialog title="援助"
                :visible.sync="showAdmireDialog"
                width="25%"
                :append-to-body="true"
@@ -146,8 +147,8 @@
       <div>
         <div class="admire-image"></div>
         <div>
-          <div class="admire-content">1. 感谢老铁送来的666</div>
-          <div class="admire-content">2. 申请通过后会加博客交流群，不需要加群或者退群后会定期清理好友（强迫症福利）</div>
+          <div class="admire-content">1. 身处热闹人间，没有谁可以保持真正的清醒；不踩到生死边界，活得都是一场梦。</div>
+          <div class="admire-content">2. 如果您愿意帮助其他病友，可以伸出您的援助之手，我们将会将赞助全部援助到病友手中</div>
         </div>
       </div>
     </el-dialog>
@@ -156,6 +157,7 @@
 
 <script>
   import vueSeamlessScroll from "vue-seamless-scroll";
+  import {listTable1, selectDetails} from "@/utils/table1";
 
   export default {
     components: {
@@ -171,7 +173,9 @@
         recommendArticles: [],
         admires: [],
         showAdmireDialog: false,
-        articleSearch: ""
+        articleSearch: "",
+        drugDetails: '',
+        drugName:''
       }
     },
     computed: {
@@ -187,6 +191,11 @@
       this.getAdmire();
     },
     methods: {
+      selectDrugDetails(){
+        selectDetails(this.drugName).then(response => {
+          this.drugDetails = response;
+        });
+      },
       selectSort(sort) {
         this.$emit("selectSort", sort);
       },

src/utils/table1.js

@@ -7,6 +7,11 @@ export function listTable1(query) {
     .catch(error => console.error(error));
 }
 
+/**
+ * 查询药品总条数
+ * @param query
+ * @returns {Promise<AxiosResponse<any> | void>}
+ */
 export function listTotal(query) {
   const url = '/system/table1/total';
   return axios.get(url, { params: query })
@@ -14,14 +19,27 @@ export function listTotal(query) {
     .catch(error => console.error(error));
 }
 
-// 查询药品作用管理详细
-export function getTable1(id) {
-  return request({
-    url: '/system/table1/' + id,
-    method: 'get'
-  })
+/**
+ * 查询药品详细描述
+ * @param query
+ * @returns {Promise<AxiosResponse<any> | void>}
+ */
+export function selectDetails(drugName) {
+  const url = '/system/table1/details';
+  return axios.get(url, { params:  { drugName } })
+    .then(response => response.data)
+    .catch(error => console.error(error));
 }
 
+
+// 查询药品作用管理详细
+// export function getTable1(id) {
+//   return request({
+//     url: '/system/table1/' + id,
+//     method: 'get'
+//   })
+// }
+
 // // 新增药品作用管理
 // export function addTable1(data) {
 //   return request({