1-2

src/api/api.js

@@ -1,5 +1,5 @@
 // 引入封装的请求
-import { getData, postData, getIdData,getIddData,getcIdData,deleteData } from "./http";
+import { getData, postData, getIdData,getIddData,getcIdData,deleteData,getIdddData } from "./http";
 
 let apiServe = {
     // 登录接口
@@ -32,6 +32,10 @@ let apiServe = {
     addpinglun:(data) => postData("culture/addComment", "post", data),
     // 删除留言
     delliuyan:(data) => deleteData("message", "delete", data),
+    // 商城列表
+    shoplist:(data) => getData("good/list", "get", data),
+    // 商城购买
+    shop:(id) => getIdddData("point/getGoodByPoint", "get", id),
 }
 
 export { apiServe };

src/api/http.js

@@ -137,6 +137,25 @@ export function getIddData(url, method, id) {
         })
     })
 }
+export function getIdddData(url, method, id) {
+    return new Promise(resolve => {
+        // 调用自定义的axios
+        server({
+            method,
+            url: `${url}?goodId=${id}`,
+            // params: data 
+        })
+        .then(res => {
+            resolve(res);
+        })
+        .catch(() => {
+            Message({
+                message: '系统错误',
+                type: 'error'
+            })
+        })
+    })
+}
 // 封装get 通过id 详情
 export function getcIdData(url, method, id) {
     return new Promise(resolve => {

src/components/shop/shop.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="box">
+    <div class="content">
+      <div class="container">
+        <h1>积分商城</h1>
+        <hr />
+        <el-row :gutter="20">
+          <el-col :span="6" v-for="(item,index) in list" :key="index">
+            <div class="grid-content ">
+              <img src="item.goodPic" alt="" />
+              <h2>{{item.goodName}}</h2>
+              <h5>{{ item.goodDescription }}</h5>
+              <el-button type="primary" @click="gmshop(item.id)">兑换</el-button>
+            </div>
+            </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import { apiServe } from "@/api/api";
+export default {
+  name: "WenhuaWebuiZhiShi",
+
+  data() {
+    return {
+      list: [],
+      imageUrl: "",
+      cdata: {},
+    };
+  },
+
+  mounted() {
+    this.cdata.token = localStorage.getItem("token");
+    let token = localStorage.getItem("token");
+    console.log(token);
+    if (!token) {
+      if (!token) {
+        this.$confirm("您还未登录，是否前去登录?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            // 跳转登录
+            this.$router.push("/login");
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消",
+            });
+            this.$router.push("/");
+          });
+      }
+    }
+    this.searchUser();
+  },
+
+  methods: {
+    searchUser() {
+      apiServe.shoplist(this.cdata).then((res) => {
+        console.log(res);
+        this.list = res.data.data;
+      });
+    },
+    gmshop(id){
+      this.$confirm("是否购买此商品?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // 跳转登录
+          apiServe.shop(id).then((res) => {
+           console.log(res);
+           this.$message({
+            type:'success',
+            message: '兑换成功',
+          });
+        });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消",
+          });
+        });
+      
+    }
+  },
+};
+</script>
+  
+<style scoped lang="less">
+.box::v-deep {
+  height: 100%;
+  //   background-color: #ccc;
+  padding: 50px 60px 30px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .content {
+    width: 90%;
+    // height: 300px;
+    // background-color: #ffffff;
+    padding: 30px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+
+  .container {
+    width: 100%;
+    .el-row {
+      margin-top: 50px;
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .el-col {
+      border-radius: 4px;
+    }
+    .grid-content {
+      text-align: center;
+      height: auto;
+      border-radius: 4px;
+      min-height: 36px;
+      border: 1px solid #ccc;
+      position: relative;
+      margin-bottom: 10px;
+      img{
+        width: 90%;
+        display: block;
+        margin: 10px 0;
+        margin-left: 20px;
+      }
+      button{
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+    }
+    .row-bg {
+      padding: 10px 0;
+    }
+  }
+}
+</style>

src/router/list.js

@@ -60,6 +60,15 @@ export default {
                 title: '答题详情'
             }
         },
+        {
+            path: 'shop',
+            name: 'shop',
+            // 动态引入路由 路由的懒加载
+            component: () => import("@/components/shop/shop.vue"),
+            meta: {
+                title: '积分商城'
+            }
+        },
 
     ]
 }

src/views/commonHeader.vue

@@ -13,6 +13,7 @@
           <el-menu-item index="/index">首页</el-menu-item>
           <el-menu-item index="/zhishi">文化小知识</el-menu-item>
           <el-menu-item index="/liuyan">留言板</el-menu-item>
+          <el-menu-item index="/shop">积分商城</el-menu-item>
         </el-menu>
         <el-dropdown>
         <div class="ronde" @click="handleOut">