From 70a9e725e647f7580de97a727e9df883f2081bf9 Mon Sep 17 00:00:00 2001
From: dsc <3468364190@qq.com>
Date: Wed, 27 Nov 2024 15:10:58 +0800
Subject: [PATCH] dsc-1

---
 SuperRice/vue/src/views/front/Address.vue  | 153 ++++++++++++++++
 SuperRice/vue/src/views/front/Business.vue |  91 ++++++++++
 SuperRice/vue/src/views/front/Cart.vue     | 171 ++++++++++++++++++
 SuperRice/vue/src/views/front/Collect.vue  |  97 ++++++++++
 SuperRice/vue/src/views/front/Detail.vue   | 101 +++++++++++
 SuperRice/vue/src/views/front/Home.vue     | 195 +++++++++++++++++++++
 SuperRice/vue/src/views/front/Orders.vue   | 165 +++++++++++++++++
 SuperRice/vue/src/views/front/Person.vue   | 164 +++++++++++++++++
 SuperRice/vue/src/views/front/Search.vue   |  67 +++++++
 SuperRice/vue/src/views/front/Type.vue     |  87 +++++++++
 10 files changed, 1291 insertions(+)
 create mode 100644 SuperRice/vue/src/views/front/Address.vue
 create mode 100644 SuperRice/vue/src/views/front/Business.vue
 create mode 100644 SuperRice/vue/src/views/front/Cart.vue
 create mode 100644 SuperRice/vue/src/views/front/Collect.vue
 create mode 100644 SuperRice/vue/src/views/front/Detail.vue
 create mode 100644 SuperRice/vue/src/views/front/Home.vue
 create mode 100644 SuperRice/vue/src/views/front/Orders.vue
 create mode 100644 SuperRice/vue/src/views/front/Person.vue
 create mode 100644 SuperRice/vue/src/views/front/Search.vue
 create mode 100644 SuperRice/vue/src/views/front/Type.vue

diff --git a/SuperRice/vue/src/views/front/Address.vue b/SuperRice/vue/src/views/front/Address.vue
new file mode 100644
index 00000000..c812edad
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Address.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="main-content">
+    <div style="width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="padding-bottom: 10px">
+        <div style="display: flex; font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid;">
+          <div style="flex: 3; margin-left: 20px">我的地址</div>
+          <div style="flex: 1; text-align: right; padding-right: 20px">
+            <el-button type="warning" round @click="addAddress">添加收货地址</el-button>
+          </div>
+        </div>
+        <div style="margin: 20px 0; padding: 0 50px">
+          <div class="table">
+            <el-table :data="addressData" strip>
+              <el-table-column prop="username" label="收货人" width="350px"></el-table-column>
+              <el-table-column prop="useraddress" label="收货地址"></el-table-column>
+              <el-table-column prop="phone" label="联系电话"></el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template v-slot="scope">
+                  <el-button size="mini" type="primary" plain @click="editAddress(scope.row)">编辑</el-button>
+                  <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagination" style="margin-top: 20px">
+              <el-pagination
+                  background
+                  @current-change="handleCurrentChange"
+                  :current-page="pageNum"
+                  :page-sizes="[5, 10, 20]"
+                  :page-size="pageSize"
+                  layout="total, prev, pager, next"
+                  :total="total">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog title="地址信息" :visible.sync="formVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
+      <el-form label-width="100px" style="padding-right: 50px" :model="form" :rules="rules" ref="formRef">
+        <el-form-item prop="username" label="收货人">
+          <el-input v-model="form.username" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item prop="useraddress" label="收货地址">
+          <el-input v-model="form.useraddress" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item prop="phone" label="联系电话">
+          <el-input v-model="form.phone" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="formVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      addressData: [],
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+      formVisible: false,
+      form: {},
+      rules: {
+        username: [
+          {required: true, message: '请输入收货人', trigger: 'blur'},
+        ],
+        useraddress: [
+          {required: true, message: '请输入收货地址', trigger: 'blur'},
+        ],
+        phone: [
+          {required: true, message: '请输入联系电话', trigger: 'blur'},
+        ],
+      },
+    }
+  },
+  mounted() {
+    this.loadAddress(1)
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    addAddress() {
+      this.form = {}
+      this.formVisible = true
+    },
+    editAddress(row) {
+      this.form = JSON.parse(JSON.stringify(row))
+      this.formVisible = true
+    },
+    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.form.userId = this.user.id
+          this.$request({
+            url: this.form.id ? '/address/update' : '/address/add',
+            method: this.form.id ? 'PUT' : 'POST',
+            data: this.form
+          }).then(res => {
+            if (res.code === '200') {  // 表示成功保存
+              this.$message.success('保存成功')
+              this.loadAddress(1)
+              this.formVisible = false
+            } else {
+              this.$message.error(res.msg)  // 弹出错误的信息
+            }
+          })
+        }
+      })
+    },
+    loadAddress(pageNum) {
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/address/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        }
+      }).then(res => {
+        if (res.code === '200') {
+          this.addressData = res.data?.list
+          this.total = res.data?.total
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+    del(id) {
+      this.$request.delete('/address/delete/' + id).then(res => {
+        if (res.code === '200') {
+          this.$message.success('删除成功')
+          this.loadAddress(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleCurrentChange(pageNum) {
+      this.loadAddress(pageNum)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Business.vue b/SuperRice/vue/src/views/front/Business.vue
new file mode 100644
index 00000000..83ab66fa
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Business.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="main-content">
+    <div style="width: 60%; margin: 30px auto; border-radius: 20px">
+      <div style="height: 100px; padding: 0 10px; display: flex; align-items: center; border-radius: 25px; background-color: white;">
+        <img :src="businessData.avatar" alt="" style="height: 60px; width: 60px; border-radius: 50%">
+        <div style="width: 220px; margin: 0 30px 0 15px; font-size: 20px; font-weight: bold;">
+          <div style="height: 30px; line-height: 30px">{{businessData.name}}</div>
+          <img src="@/assets/imgs/icon.png" alt="" style="height: 25px; margin-top: 5px">
+        </div>
+        <div style="width: 150px; height: 100px; padding: 20px">
+          <div style="font-size: 16px; height: 30px; line-height: 30px; color: #7F7F7FFF">店铺电话</div>
+          <div style="font-size: 16px; height: 30px; line-height: 30px; ">{{businessData.phone}}</div>
+        </div>
+        <div style="width: 150px; height: 100px; padding: 20px">
+          <div style="font-size: 16px; height: 30px; line-height: 30px; color: #7F7F7FFF">店铺邮箱</div>
+          <div style="font-size: 16px; height: 30px; line-height: 30px; ">{{businessData.email}}</div>
+        </div>
+        <div style="flex: 1; height: 100px; padding: 20px">
+          <div style="height: 60px; line-height: 30px; font-size: 16px; color: #000000FF; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
+            店铺介绍：{{businessData.description}}
+          </div>
+        </div>
+      </div>
+      <div style="border-radius: 20px; padding: 0 20px; background-color: white; margin-top: 20px">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">本店所有商品（{{goodsData.length}}件）</div>
+        <div style="margin-top: 20px">
+          <el-row>
+            <el-col :span="5" style="margin-bottom: 20px" v-for="item in goodsData">
+              <img :src="item.img" alt="" style="width: 100%; height: 150px; border-radius: 10px; border: #cccccc 1px solid" @click="navTo('/front/detail?id=' + item.id)">
+              <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 160px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{item.name}}</div>
+              <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ {{ item.price }} / {{ item.unit }}</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    let businessId = this.$route.query.id
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      businessId: businessId,
+      goodsData: [],
+      businessData: {}
+    }
+  },
+  mounted() {
+    this.loadBusiness()
+    this.loadGoods()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadBusiness() {
+      this.$request.get('/business/selectById/' + this.businessId).then(res => {
+        if (res.code === '200') {
+          this.businessData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    loadGoods() {
+      this.$request.get('/goods/selectByBusinessId?id=' + this.businessId).then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-col-5{
+  width: 20%;
+  max-width: 20%;
+  padding: 10px 10px;
+}
+</style>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Cart.vue b/SuperRice/vue/src/views/front/Cart.vue
new file mode 100644
index 00000000..6a24c5e8
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Cart.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="main-content">
+    <div style="width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="padding-bottom: 10px">
+        <div style="display: flex; font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid;">
+          <div style="margin-left: 20px; flex: 1">全部商品（{{ goodsData.length }}件）</div>
+          <div style="flex: 2; text-align: right">
+            <el-select v-model="addressId" placeholder="请选择收货地址" style="width: 70%">
+              <el-option v-for="item in addressData" :label="item.username + ' - ' + item.useraddress + ' - ' + item.phone" :value="item.id"></el-option>
+            </el-select>
+          </div>
+          <div style="flex: 1; font-size: 16px; text-align: right; padding-right: 20px">
+            已选商品 ￥ {{totalPrice}} <el-button type="danger" round @click="pay">下单</el-button>
+          </div>
+        </div>
+        <div style="margin: 20px 0; padding: 0 50px">
+          <div class="table">
+            <el-table :data="goodsData" strip @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="55" align="center"></el-table-column>
+              <el-table-column label="商品图片" width="120px">
+                <template v-slot="scope">
+                  <el-image style="width: 80px; height: 60px; border-radius: 3px" v-if="scope.row.goodsImg"
+                            :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goodsName" label="商品名称" width="240px">
+                <template v-slot="scope">
+                  <a :href="'/front/detail?id=' + scope.row.goodsId">{{scope.row.goodsName}}</a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="businessName" label="店铺名称">
+                <template v-slot="scope">
+                  <a :href="'/front/business?id=' + scope.row.businessId">{{scope.row.businessName}}</a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
+              <el-table-column prop="num" label="选择数量">
+                <template v-slot="scope">
+                  <el-input-number v-model="scope.row.num" style="width: 100px" @change="handleChange(scope.row)" :min="1"></el-input-number>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template v-slot="scope">
+                  <el-button size="mini" type="danger" plain @click="del(scope.row.id)">移除购物车</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagination" style="margin-top: 20px">
+              <el-pagination
+                  background
+                  @current-change="handleCurrentChange"
+                  :current-page="pageNum"
+                  :page-sizes="[5, 10, 20]"
+                  :page-size="pageSize"
+                  layout="total, prev, pager, next"
+                  :total="total">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      goodsData: [],
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      totalPrice: 0,
+      total: 0,
+      addressId: null,
+      addressData: [],
+      selectedData: [],
+    }
+  },
+  mounted() {
+    this.loadGoods(1)
+    this.loadAddress()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadAddress() {
+      this.$request.get('/address/selectAll').then(res => {
+        if (res.code === '200') {
+          this.addressData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    loadGoods(pageNum) {
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/cart/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        }
+      }).then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data?.list
+          this.total = res.data?.total
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+    del(id) {
+      this.$request.delete('/cart/delete/' + id).then(res => {
+        if (res.code === '200') {
+          this.$message.success('移除成功')
+          this.loadGoods(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleCurrentChange(pageNum) {
+      this.loadGoods(pageNum)
+    },
+    handleSelectionChange(rows) {
+      this.totalPrice = 0
+      this.selectedData = rows
+      // 计计算总价格
+      this.selectedData.forEach(item => {
+        this.totalPrice += (item.goodsPrice * item.num)
+      })
+    },
+    handleChange(row) {
+      this.totalPrice = 0
+      this.selectedData.forEach(item => {
+        this.totalPrice += item.goodsPrice * item.num
+      })
+    },
+    pay() {
+      if (!this.addressId) {
+        this.$message.warning('请选择收货地址')
+        return
+      }
+      if (!this.selectedData || this.selectedData.length === 0) {
+        this.$message.warning('请选择商品')
+        return
+      }
+      let data = {
+        userId: this.user.id,
+        addressId: this.addressId,
+        status: '待发货',
+        cartData: this.selectedData
+      }
+      this.$request.post('/orders/add', data).then(res => {
+        if (res.code === '200') {
+          this.$message.success('操作成功')
+          this.loadGoods(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Collect.vue b/SuperRice/vue/src/views/front/Collect.vue
new file mode 100644
index 00000000..a9e82ac9
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Collect.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="main-content">
+    <div style="width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="padding-bottom: 10px">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid;">
+          <div style="margin-left: 20px">全部收藏（{{ collectData.length }}件）</div>
+        </div>
+        <div style="margin: 20px 0; padding: 0 50px">
+          <div class="table">
+            <el-table :data="collectData" strip>
+              <el-table-column label="商品图片" width="120px">
+                <template v-slot="scope">
+                  <el-image style="width: 80px; height: 60px; border-radius: 3px" v-if="scope.row.goodsImg"
+                            :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goodsName" label="商品名称" width="350px"></el-table-column>
+              <el-table-column prop="businessName" label="店铺名称"></el-table-column>
+              <el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template v-slot="scope">
+                  <el-button size="mini" type="danger" plain @click="del(scope.row.id)">移除收藏</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagination" style="margin-top: 20px">
+              <el-pagination
+                  background
+                  @current-change="handleCurrentChange"
+                  :current-page="pageNum"
+                  :page-sizes="[5, 10, 20]"
+                  :page-size="pageSize"
+                  layout="total, prev, pager, next"
+                  :total="total">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      collectData: [],
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+    }
+  },
+  mounted() {
+    this.loadCollect(1)
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadCollect(pageNum) {
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/collect/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        }
+      }).then(res => {
+        if (res.code === '200') {
+          this.collectData = res.data?.list
+          this.total = res.data?.total
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+    del(id) {
+      this.$request.delete('/collect/delete/' + id).then(res => {
+        if (res.code === '200') {
+          this.$message.success('移除成功')
+          this.loadCollect(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleCurrentChange(pageNum) {
+      this.loadCollect(pageNum)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Detail.vue b/SuperRice/vue/src/views/front/Detail.vue
new file mode 100644
index 00000000..7203a739
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Detail.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="main-content">
+    <div style="width: 60%; background-color: white; min-height: 1000px; margin: 20px auto; border-radius: 20px">
+      <div style="padding: 15px 20px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <img :src="goodsData.img" alt="" style="width: 100%; height: 400px; border-radius: 20px">
+          </el-col>
+          <el-col :span="12">
+            <div style="font-size: 20px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{goodsData.name}}</div>
+            <div style="color: #666666FF; margin-top: 5px">销量：{{goodsData.count}}</div>
+            <div style="color: red; margin-top: 15px">疯抢价：<span style="font-size: 20px">{{goodsData.price}} / {{goodsData.unit}}</span></div>
+            <div style="margin-top: 20px">
+              <img src="@/assets/imgs/right.png" alt="" style="width: 70%; height: 130px; border-radius: 15px">
+            </div>
+            <div style="color: #666666FF; margin-top: 20px">商家：<a href="#" @click="navTo('/front/business?id=' + goodsData.businessId)">{{goodsData.businessName}}</a></div>
+            <div style="color: #666666FF; margin-top: 20px">分类：<a href="#" @click="navTo('/front/type?id=' + goodsData.typeId)">{{goodsData.typeName}}</a></div>
+            <div style="color: #666666FF; margin-top: 20px">
+              <el-button type="warning" @click="addCart">加入购物车</el-button>
+              <el-button type="warning" @click="collect">收藏</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div style="padding: 15px 20px">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="宝贝详情" name="first">
+            <div style="padding: 10px 175px" v-html="goodsData.description"></div>
+          </el-tab-pane>
+          <el-tab-pane label="宝贝评价" name="second">1111</el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    let goodsId = this.$route.query.id
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      goodsId: goodsId,
+      goodsData: {},
+      activeName: 'first'
+    }
+  },
+  mounted() {
+    this.loadGoods()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadGoods() {
+      this.$request.get('/goods/selectById?id=' + this.goodsId).then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+    },
+    collect() {
+      let data = {
+        userId: this.user.id,
+        businessId: this.goodsData.businessId,
+        goodsId: this.goodsId
+      }
+      this.$request.post('/collect/add', data).then(res => {
+        if (res.code === '200') {
+          this.$message.success('收藏成功')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    addCart() {
+      let data = {
+        userId: this.user.id,
+        businessId: this.goodsData.businessId,
+        goodsId: this.goodsId,
+        num: 1
+      }
+      this.$request.post('/cart/add', data).then(res => {
+        if (res.code === '200') {
+          this.$message.success('加入购物车成功')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Home.vue b/SuperRice/vue/src/views/front/Home.vue
new file mode 100644
index 00000000..0fbc7ae2
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Home.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="main-content">
+    <div style="height: 60px; background-color: #C566F6FF"></div>
+    <div style="display: flex">
+      <div class="left"></div>
+      <div style="width: 66%; background-color: white; height: 1000px">
+        <div style="color: #FE0137FF; margin: 15px 0 15px 18px; font-weight: bold; font-size: 16px">主题市场</div>
+        <div style="display: flex; margin: 0 25px; height: 550px">
+          <div style="flex: 2">
+            <div style="display: flex; color: #666666FF; margin: 14px 0" v-for="item in typeData">
+              <img :src="item.img" alt="" style="height: 20px; width: 20px">
+              <div style="margin-left: 10px; font-size: 14px"><a href="#" @click="navTo('/front/type?id=' + item.id)"> {{item.name}}</a></div>
+            </div>
+          </div>
+          <div style="flex: 5; margin-top: 15px">
+            <div>
+              <el-carousel height="300px" style="border-radius: 10px">
+                <el-carousel-item v-for="item in carousel_top">
+                  <img :src="item" alt="" style="width: 100%; height: 300px; border-radius: 10px">
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <div style="margin-top: 30px; display: flex">
+              <div style="flex: 1">
+                <el-carousel height="300px" style="border-radius: 10px">
+                  <el-carousel-item v-for="item in carousel_left">
+                    <img :src="item" alt="" style="width: 100%; height: 200px; border-radius: 10px">
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+              <div style="flex: 1; margin-left: 5px">
+                <el-carousel height="300px" style="border-radius: 10px">
+                  <el-carousel-item v-for="item in carousel_right">
+                    <img :src="item" alt="" style="width: 100%; height: 200px; border-radius: 10px">
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+            </div>
+          </div>
+          <div style="flex: 3; background-color: #F3F3F3FF; margin-top: 15px; margin-left: 15px; border-radius: 10px">
+            <div style="text-align: center; margin-top: 30px">
+              <img @click="navTo('/front/person')" :src="user.avatar" alt="" style="width: 80px; height: 80px; border-radius: 50%">
+              <div style="margin-top: 10px">Hi，{{user.name}}</div>
+            </div>
+            <div style="margin-top: 20px; padding: 0 15px">
+              <img src="@/assets/imgs/right.png" alt="" style="height: 150px; width: 100%; border-radius: 20px">
+            </div>
+            <div style="margin: 20px 10px 10px 10px; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+              <i class="el-icon-bell"></i>
+              <span style="font-weight: bold">公告</span>
+              <span style="color: #666666;">：{{ top }}</span>
+            </div>
+            <div style="display: flex; margin-top: 50px">
+              <div style="flex: 1; text-align: center">
+                <a href="#" @click="navTo('/front/collect')">
+                  <img src="@/assets/imgs/收藏.png" alt="" style="height: 25px; width: 25px">
+                  <div>我的收藏</div>
+                </a>
+              </div>
+              <div style="flex: 1; text-align: center">
+                <a href="#" @click="navTo('/front/address')">
+                  <img src="@/assets/imgs/店铺.png" alt="" style="height: 25px; width: 25px">
+                  <div>我的地址</div>
+                </a>
+              </div>
+              <div style="flex: 1; text-align: center">
+                <a href="#" @click="navTo('/front/cart')">
+                  <img src="@/assets/imgs/购物车.png" alt="" style="height: 25px; width: 25px">
+                  <div>我的购物车</div>
+                </a>
+              </div>
+              <div style="flex: 1; text-align: center">
+                <a href="#" @click="navTo('/front/orders')">
+                  <img src="@/assets/imgs/订单.png" alt="" style="height: 25px; width: 25px">
+                  <div>我的订单</div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="margin: 40px 0 0 15px; height: 40px; background-color: #04BF04FF; font-size: 20px; color: white; width: 130px; font-weight: bold; line-height: 40px; text-align: center; border-radius: 20px">热卖商品</div>
+        <div style="margin: 10px 5px 0 5px">
+          <el-row>
+            <el-col :span="5" v-for="item in goodsData">
+              <img @click="navTo('/front/detail?id=' + item.id)" :src="item.img" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+              <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{item.name}}</div>
+              <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ {{item.price}} / {{item.unit}}</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      typeData: [],
+      top: null,
+      notice: [],
+      goodsData: [],
+      carousel_top: [
+        require('@/assets/imgs/carousel-1.png'),
+        require('@/assets/imgs/carousel-2.png'),
+        require('@/assets/imgs/carousel-9.png'),
+      ],
+      carousel_left: [
+        require('@/assets/imgs/carousel-3.png'),
+        require('@/assets/imgs/carousel-4.png'),
+        require('@/assets/imgs/carousel-5.png'),
+      ],
+      carousel_right: [
+        require('@/assets/imgs/carousel-6.png'),
+        require('@/assets/imgs/carousel-7.png'),
+        require('@/assets/imgs/carousel-8.png'),
+      ],
+    }
+  },
+  mounted() {
+    this.loadType()
+    this.loadNotice()
+    this.loadGoods()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadType() {
+      this.$request.get('/type/selectAll').then(res => {
+        if (res.code === '200') {
+          this.typeData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    loadNotice() {
+      this.$request.get('/notice/selectAll').then(res => {
+        this.notice = res.data
+        let i = 0
+        if (this.notice && this.notice.length) {
+          this.top = this.notice[0].content
+          setInterval(() => {
+            this.top = this.notice[i].content
+            i++
+            if (i === this.notice.length) {
+              i = 0
+            }
+          }, 2500)
+        }
+      })
+    },
+    loadGoods() {
+      this.$request.get('/goods/selectTop15').then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+  }
+}
+</script>
+
+<style scoped>
+.main-content {
+  min-height: 100vh;
+  /*overflow: hidden;*/
+  background-size: 100%;
+  background-image: url('@/assets/imgs/img.png');
+}
+.left {
+  width: 17%;
+  background-repeat: no-repeat;
+  background-image: url('@/assets/imgs/left-img.png');
+}
+.right {
+  width: 17%;
+  background-repeat: no-repeat;
+  background-image: url('@/assets/imgs/right-img.png')
+}
+.el-col-5{
+  width: 20%;
+  max-width: 20%;
+  padding: 10px 10px;
+}
+</style>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Orders.vue b/SuperRice/vue/src/views/front/Orders.vue
new file mode 100644
index 00000000..98f7140c
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Orders.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="main-content">
+    <div style="width: 80%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="padding-bottom: 10px">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid;">
+          <div style="margin-left: 20px">我的订单（{{ ordersData.length }} 个）</div>
+        </div>
+        <div style="margin: 20px 0; padding: 0 50px">
+          <div class="table">
+            <el-table :data="ordersData" strip>
+              <el-table-column label="商品图片" width="120px">
+                <template v-slot="scope">
+                  <el-image style="width: 80px; height: 60px; border-radius: 3px" v-if="scope.row.goodsImg"
+                            :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>
+                </template>
+              </el-table-column>
+              <el-table-column prop="orderId" label="订单编号"></el-table-column>
+              <el-table-column prop="goodsName" label="商品名称" :show-overflow-tooltip="true">
+                <template v-slot="scope">
+                  <a :href="'/front/detail?id=' + scope.row.goodsId">{{scope.row.goodsName}}</a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="businessName" label="店铺名称">
+                <template v-slot="scope">
+                  <a :href="'/front/business?id=' + scope.row.businessId">{{scope.row.businessName}}</a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goodsPrice" label="商品价格">
+                <template v-slot="scope">
+                  {{scope.row.goodsPrice}} / {{scope.row.goodsUnit}}
+                </template>
+              </el-table-column>
+              <el-table-column prop="num" label="商品数量"></el-table-column>
+              <el-table-column prop="price" label="订单总价"></el-table-column>
+              <el-table-column prop="username" label="收货人"></el-table-column>
+              <el-table-column prop="useraddress" label="收货地址"></el-table-column>
+              <el-table-column prop="phone" label="联系电话"></el-table-column>
+              <el-table-column prop="status" label="订单状态"></el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template v-slot="scope">
+                  <el-button size="mini" type="primary" v-if="scope.row.status === '待收货'" plain @click="updateStatus(scope.row, '已完成')">确认收货</el-button>
+                  <el-button size="mini" type="primary" v-if="scope.row.status === '已完成'" plain @click="addComment(scope.row)">评价</el-button>
+                  <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagination" style="margin-top: 20px">
+              <el-pagination
+                  background
+                  @current-change="handleCurrentChange"
+                  :current-page="pageNum"
+                  :page-sizes="[5, 10, 20]"
+                  :page-size="pageSize"
+                  layout="total, prev, pager, next"
+                  :total="total">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog title="请输入评价内容" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
+      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
+        <el-form-item label="评价内容" prop="username">
+          <el-input type="textarea" v-model="form.content" placeholder="请输入评价内容"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="fromVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      ordersData: [],
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+      form: {},
+      fromVisible: false,
+    }
+  },
+  mounted() {
+    this.loadOrders(1)
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadOrders(pageNum) {
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/orders/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        }
+      }).then(res => {
+        if (res.code === '200') {
+          this.ordersData = res.data?.list
+          this.total = res.data?.total
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+    del(id) {
+      this.$request.delete('/orders/delete/' + id).then(res => {
+        if (res.code === '200') {
+          this.$message.success('删除成功')
+          this.loadOrders(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleCurrentChange(pageNum) {
+      this.loadOrders(pageNum)
+    },
+    updateStatus(row, status) {
+      this.form = row
+      this.form.status = status
+      this.$request.put('/orders/update', this.form).then(res => {
+        if (res.code === '200') {
+          this.$message.success('操作成功')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    addComment(row) {
+      this.fromVisible = true
+      this.form = row
+    },
+    save() {
+      let data = {
+        userId: this.user.id,
+        businessId: this.form.businessId,
+        goodsId: this.form.goodsId,
+        content: this.form.content,
+      }
+      this.$request.post('/comment/add', data).then(res => {
+        if (res.code === '200') {
+          this.$message.success('评价成功')
+          this.fromVisible = false
+          this.updateStatus(this.form, '已评价')
+          this.form = {}
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Person.vue b/SuperRice/vue/src/views/front/Person.vue
new file mode 100644
index 00000000..5ad65060
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Person.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="main-content">
+    <el-card style="width: 50%; margin: 30px auto">
+      <div style="text-align: right; margin-bottom: 20px">
+        <el-button type="primary" @click="updatePassword">修改密码</el-button>
+      </div>
+      <el-form :model="user" label-width="80px" style="padding-right: 20px">
+        <div style="margin: 15px; text-align: center">
+          <el-upload
+              class="avatar-uploader"
+              :action="$baseUrl + '/files/upload'"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+          >
+            <img v-if="user.avatar" :src="user.avatar" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </div>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="user.username" placeholder="用户名" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="user.name" placeholder="姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="user.phone" placeholder="电话"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="user.email" placeholder="邮箱"></el-input>
+        </el-form-item>
+        <div style="text-align: center; margin-bottom: 20px">
+          <el-button type="primary" @click="update">保 存</el-button>
+        </div>
+      </el-form>
+    </el-card>
+    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" destroy-on-close>
+      <el-form :model="user" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef">
+        <el-form-item label="原始密码" prop="password">
+          <el-input show-password v-model="user.password" placeholder="原始密码"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input show-password v-model="user.newPassword" placeholder="新密码"></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input show-password v-model="user.confirmPassword" placeholder="确认密码"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="fromVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const validatePassword = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请确认密码'))
+      } else if (value !== this.user.newPassword) {
+        callback(new Error('确认密码错误'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      dialogVisible: false,
+
+      rules: {
+        password: [
+          { required: true, message: '请输入原始密码', trigger: 'blur' },
+        ],
+        newPassword: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+        ],
+        confirmPassword: [
+          { validator: validatePassword, required: true, trigger: 'blur' },
+        ],
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    update() {
+      // 保存当前的用户信息到数据库
+      this.$request.put('/user/update', this.user).then(res => {
+        if (res.code === '200') {
+          // 成功更新
+          this.$message.success('保存成功')
+          // 更新浏览器缓存里的用户信息
+          localStorage.setItem('xm-user', JSON.stringify(this.user))
+
+          // 触发父级的数据更新
+          this.$emit('update:user')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleAvatarSuccess(response, file, fileList) {
+      // 把user的头像属性换成上传的图片的链接
+      this.$set(this.user, 'avatar', response.data)
+    },
+    // 修改密码
+    updatePassword() {
+      this.dialogVisible = true
+    },
+    save() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$request.put('/updatePassword', this.user).then(res => {
+            if (res.code === '200') {
+              // 成功更新
+              this.$message.success('修改密码成功')
+              this.$router.push('/login')
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/.el-form-item__label {
+  font-weight: bold;
+}
+/deep/.el-upload {
+  border-radius: 50%;
+}
+/deep/.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+}
+/deep/.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+  border-radius: 50%;
+}
+.avatar {
+  width: 120px;
+  height: 120px;
+  display: block;
+  border-radius: 50%;
+}
+</style>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Search.vue b/SuperRice/vue/src/views/front/Search.vue
new file mode 100644
index 00000000..c5709689
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Search.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="main-content">
+    <div style="display: flex; width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="flex: 1; padding: 0 20px">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">搜索"{{name}}"的结果</div>
+        <div style="margin: 20px 0">
+          <el-row :gutter="20">
+            <el-col :span="6" style="margin-bottom: 20px" v-for="item in goodsData">
+              <img @click="navTo('/front/detail?id=' + item.id)" :src="item.img" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+              <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{item.name}}</div>
+              <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ {{item.price}} / {{item.unit}}</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div style="width: 250px; padding: 0 20px; border-left: #cccccc 1px solid">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">猜你喜欢</div>
+        <div style="margin: 20px 0; padding: 0 10px">
+          <div style="margin-bottom: 20px">
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+          <div>
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    let name = this.$route.query.name
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      name: name,
+      goodsData: [],
+    }
+  },
+  mounted() {
+    this.loadGoods()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadGoods() {
+      this.$request.get('/goods/selectByName?name=' + this.name).then(res => {
+        console.log(res); // 打印返回值以确认数据
+        if (res.code === '200') {
+          this.goodsData = res.data;
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    navTo(url) {
+      location.href = url
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/SuperRice/vue/src/views/front/Type.vue b/SuperRice/vue/src/views/front/Type.vue
new file mode 100644
index 00000000..5c1e47da
--- /dev/null
+++ b/SuperRice/vue/src/views/front/Type.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="main-content">
+    <div style="display: flex; width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="flex: 1; padding: 0 20px">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">{{typeData.name}}</div>
+        <div style="margin: 20px 0">
+          <el-row :gutter="20">
+            <el-col :span="6" style="margin-bottom: 20px" v-for="item in goodsData">
+              <img @click="navTo('/front/detail?id=' + item.id)" :src="item.img" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+              <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{item.name}}</div>
+              <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ {{item.price}} / {{item.unit}}</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div style="width: 250px; padding: 0 20px; border-left: #cccccc 1px solid">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">猜你喜欢</div>
+        <div style="margin: 20px 0; padding: 0 10px">
+          <div style="margin-bottom: 20px">
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+          <div>
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+          <div>
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+          <div>
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    let typeId = this.$route.query.id
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      typeId: typeId,
+      goodsData: [],
+      typeData: {}
+    }
+  },
+  mounted() {
+    this.loadGoods()
+    this.loadType()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadType() {
+      this.$request.get('/type/selectById/' + this.typeId).then(res => {
+        if (res.code === '200') {
+          this.typeData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    loadGoods() {
+      this.$request.get('/goods/selectByTypeId?id=' + this.typeId).then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    }
+  }
+}
+</script>
\ No newline at end of file