From 9500b5d65fa9f557a70d757c8ddeb717db748e99 Mon Sep 17 00:00:00 2001
From: cwx <88888>
Date: Wed, 4 Dec 2024 11:21:46 +0800
Subject: [PATCH] cwx

---
 404.vue      |  25 ++++++++
 Business.vue |  91 +++++++++++++++++++++++++++
 Cart.vue     | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++
 Login.vue    |  95 ++++++++++++++++++++++++++++
 Orders.vue   | 165 +++++++++++++++++++++++++++++++++++++++++++++++++
 Person.vue   | 164 ++++++++++++++++++++++++++++++++++++++++++++++++
 Register.vue | 101 ++++++++++++++++++++++++++++++
 Search.vue   |  67 ++++++++++++++++++++
 8 files changed, 879 insertions(+)
 create mode 100644 404.vue
 create mode 100644 Business.vue
 create mode 100644 Cart.vue
 create mode 100644 Login.vue
 create mode 100644 Orders.vue
 create mode 100644 Person.vue
 create mode 100644 Register.vue
 create mode 100644 Search.vue

diff --git a/404.vue b/404.vue
new file mode 100644
index 00000000..e8c28f52
--- /dev/null
+++ b/404.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div style="height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center">
+      <div style="font-size: 40px">404 找不到页面 <router-link to="/">返回首页</router-link></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "404",
+  data() {
+    return {}
+  },
+  created() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/Business.vue b/Business.vue
new file mode 100644
index 00000000..83ab66fa
--- /dev/null
+++ b/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/Cart.vue b/Cart.vue
new file mode 100644
index 00000000..6a24c5e8
--- /dev/null
+++ b/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/Login.vue b/Login.vue
new file mode 100644
index 00000000..7789c366
--- /dev/null
+++ b/Login.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="container">
+    <div style="width: 400px; padding: 30px; background-color: white; border-radius: 5px;">
+      <div style="text-align: center; font-size: 20px; margin-bottom: 20px; color: #333">欢迎登录SuperRice</div>
+      <el-form :model="form" :rules="rules" ref="formRef">
+        <el-form-item prop="username">
+          <el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="form.username"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password  v-model="form.password"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="form.role" placeholder="请选择角色" style="width: 100%">
+            <el-option label="管理员" value="ADMIN"></el-option>
+            <el-option label="商家" value="BUSINESS"></el-option>
+            <el-option label="用户" value="USER"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button style="width: 100%; background-color: #AF3939FF; border-color: #AF3939FF; color: white" @click="login">登 录</el-button>
+        </el-form-item>
+        <div style="display: flex; align-items: center">
+          <div style="flex: 1"></div>
+          <div style="flex: 1; text-align: right">
+            还没有账号？请 <a href="/register">注册</a>
+          </div>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    return {
+      form: { },
+      rules: {
+        username: [
+          { required: true, message: '请输入账号', trigger: 'blur' },
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+        ],
+        role: [
+          { required: true, message: '请选择角色', trigger: 'blur' },
+        ]
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    login() {
+      this.$refs['formRef'].validate((valid) => {
+        if (valid) {
+          // 验证通过
+          this.$request.post('/login', this.form).then(res => {
+            if (res.code === '200') {
+              let user = res.data
+              localStorage.setItem("xm-user", JSON.stringify(user))  // 存储用户数据
+              if (user.role === 'USER') {
+                location.href = '/front/home'
+              } else {
+                location.href = '/home'
+              }
+              this.$message.success('登录成功')
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  height: 100vh;
+  overflow: hidden;
+  background-image: url("@/assets/imgs/bg.jpg");
+  background-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
+a {
+  color: #2a60c9;
+}
+</style>
\ No newline at end of file
diff --git a/Orders.vue b/Orders.vue
new file mode 100644
index 00000000..98f7140c
--- /dev/null
+++ b/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/Person.vue b/Person.vue
new file mode 100644
index 00000000..5ad65060
--- /dev/null
+++ b/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/Register.vue b/Register.vue
new file mode 100644
index 00000000..c46f6bfa
--- /dev/null
+++ b/Register.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="container">
+    <div style="width: 400px; padding: 30px; background-color: white; border-radius: 5px;">
+      <div style="text-align: center; font-size: 20px; margin-bottom: 20px; color: #333">欢迎注册</div>
+      <el-form :model="form" :rules="rules" ref="formRef">
+        <el-form-item prop="username">
+          <el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="form.username"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password  v-model="form.password"></el-input>
+        </el-form-item>
+        <el-form-item prop="confirmPass">
+          <el-input prefix-icon="el-icon-lock" placeholder="请确认密码" show-password  v-model="form.confirmPass"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="form.role" placeholder="请选择角色" style="width: 100%">
+            <el-option label="商家" value="BUSINESS"></el-option>
+            <el-option label="用户" value="USER"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button style="width: 100%; background-color: #333; border-color: #333; color: white" @click="register">注 册</el-button>
+        </el-form-item>
+        <div style="display: flex; align-items: center">
+          <div style="flex: 1"></div>
+          <div style="flex: 1; text-align: right">
+            已有账号？请 <a href="/login">登录</a>
+          </div>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Register",
+  data() {
+    // 验证码校验
+    const validatePassword = (rule, confirmPass, callback) => {
+      if (confirmPass === '') {
+        callback(new Error('请确认密码'))
+      } else if (confirmPass !== this.form.password) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      form: {},
+      rules: {
+        username: [
+          { required: true, message: '请输入账号', trigger: 'blur' },
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+        ],
+        confirmPass: [
+          { validator: validatePassword, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    register() {
+      this.$refs['formRef'].validate((valid) => {
+        if (valid) {
+          // 验证通过
+          this.$request.post('/register', this.form).then(res => {
+            if (res.code === '200') {
+              this.$router.push('/')  // 跳转登录页面
+              this.$message.success('注册成功')
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  height: 100vh;
+  overflow: hidden;
+  background-image: url("@/assets/imgs/bg.jpg");
+  background-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
+a {
+  color: #2a60c9;
+}
+</style>
\ No newline at end of file
diff --git a/Search.vue b/Search.vue
new file mode 100644
index 00000000..c5709689
--- /dev/null
+++ b/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