Vue3小兔鲜——会员中心

于 2024-10-08 14:07:05 发布
阅读量179 收藏 2
点赞数 6
分类专栏： 前端 文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014496893/article/details/142758201
版权

image.png

路由配置

1. 准备路由模版

<script setup> </script>

<template>
  <div class="container">
    <div class="xtx-member-aside">
      <div class="user-manage">
        <h4>我的账户</h4>
        <div class="links">
          <RouterLink to="/member/user">个人中心</RouterLink>
        </div>
        <h4>交易管理</h4>
        <div class="links">
          <RouterLink to="/member/order">我的订单</RouterLink>
        </div>
      </div>
    </div>
    <div class="article">
      <!-- 三级路由的挂载点 -->
      <!-- <RouterView /> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  padding-top: 20px;

  .xtx-member-aside {
    width: 220px;
    margin-right: 20px;
    border-radius: 2px;
    background-color: #fff;

    .user-manage {
      background-color: #fff;

      h4 {
        font-size: 18px;
        font-weight: 400;
        padding: 20px 52px 5px;
        border-top: 1px solid #f6f6f6;
      }

      .links {
        padding: 0 52px 10px;
      }

      a {
        display: block;
        line-height: 1;
        padding: 15px 0;
        font-size: 14px;
        color: #666;
        position: relative;

        &:hover {
          color: $xtxColor;
        }

        &.active,
        &.router-link-exact-active {
          color: $xtxColor;

          &:before {
            display: block;
          }
        }

        &:before {
          content: '';
          display: none;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          position: absolute;
          top: 19px;
          left: -16px;
          background-color: $xtxColor;
        }
      }
    }
  }

  .article {
    width: 1000px;
    background-color: #fff;
  }
}
</style>

2. 配置路由

import Member from '@/views/Member/index.vue'


{
    path: '/member',
    component: Member,
}

3. 准备个人信息和我的订单路由组件

<script setup>
const userStore = {}
</script>

<template>
  <div class="home-overview">
    <!-- 用户信息 -->
    <div class="user-meta">
      <div class="avatar">
        <img :src="userStore.userInfo?.avatar" />
      </div>
      <h4>{{ userStore.userInfo?.account }}</h4>
    </div>
    <div class="item">
      <a href="javascript:;">
        <span class="iconfont icon-hy"></span>
        <p>会员中心</p>
      </a>
      <a href="javascript:;">
        <span class="iconfont icon-aq"></span>
        <p>安全设置</p>
      </a>
      <a href="javascript:;">
        <span class="iconfont icon-dw"></span>
        <p>地址管理</p>
      </a>
    </div>
  </div>
  <div class="like-container">
    <div class="home-panel">
      <div class="header">
        <h4 data-v-bcb266e0="">猜你喜欢</h4>
      </div>
      <div class="goods-list">
        <!-- <GoodsItem v-for="good in likeList" :key="good.id" :good="good" /> -->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-overview {
  height: 132px;
  background: url(@/assets/images/center-bg.png) no-repeat center / cover;
  display: flex;

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;

    .avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
      color: white;
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &:first-child {
      border-right: 1px solid #f4f4f4;
    }

    a {
      color: white;
      font-size: 16px;
      text-align: center;

      .iconfont {
        font-size: 32px;
      }

      p {
        line-height: 32px;
      }
    }
  }
}

.like-container {
  margin-top: 20px;
  border-radius: 4px;
  background-color: #fff;
}

.home-panel {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 20px;
  height: 400px;

  .header {
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    h4 {
      font-size: 22px;
      font-weight: 400;
    }

  }

  .goods-list {
    display: flex;
    justify-content: space-around;
  }
}
</style>

<script setup>
// tab列表
const tabTypes = [
  { name: "all", label: "全部订单" },
  { name: "unpay", label: "待付款" },
  { name: "deliver", label: "待发货" },
  { name: "receive", label: "待收货" },
  { name: "comment", label: "待评价" },
  { name: "complete", label: "已完成" },
  { name: "cancel", label: "已取消" }
]
// 订单列表
const orderList = []

</script>

<template>
  <div class="order-container">
    <el-tabs>
      <!-- tab切换 -->
      <el-tab-pane v-for="item in tabTypes" :key="item.name" :label="item.label" />

      <div class="main-container">
        <div class="holder-container" v-if="orderList.length === 0">
          <el-empty description="暂无订单数据" />
        </div>
        <div v-else>
          <!-- 订单列表 -->
          <div class="order-item" v-for="order in orderList" :key="order.id">
            <div class="head">
              <span>下单时间：{{ order.createTime }}</span>
              <span>订单编号：{{ order.id }}</span>
              <!-- 未付款，倒计时时间还有 -->
              <span class="down-time" v-if="order.orderState === 1">
                <i class="iconfont icon-down-time"></i>
                <b>付款截止: {{order.countdown}}</b>
              </span>
            </div>
            <div class="body">
              <div class="column goods">
                <ul>
                  <li v-for="item in order.skus" :key="item.id">
                    <a class="image" href="javascript:;">
                      <img :src="item.image" alt="" />
                    </a>
                    <div class="info">
                      <p class="name ellipsis-2">
                        {{ item.name }}
                      </p>
                      <p class="attr ellipsis">
                        <span>{{ item.attrsText }}</span>
                      </p>
                    </div>
                    <div class="price">¥{{ item.realPay?.toFixed(2) }}</div>
                    <div class="count">x{{ item.quantity }}</div>
                  </li>
                </ul>
              </div>
              <div class="column state">
                <p>{{ order.orderState }}</p>
                <p v-if="order.orderState === 3">
                  <a href="javascript:;" class="green">查看物流</a>
                </p>
                <p v-if="order.orderState === 4">
                  <a href="javascript:;" class="green">评价商品</a>
                </p>
                <p v-if="order.orderState === 5">
                  <a href="javascript:;" class="green">查看评价</a>
                </p>
              </div>
              <div class="column amount">
                <p class="red">¥{{ order.payMoney?.toFixed(2) }}</p>
                <p>（含运费：¥{{ order.postFee?.toFixed(2) }}）</p>
                <p>在线支付</p>
              </div>
              <div class="column action">
                <el-button  v-if="order.orderState === 1" type="primary"
                  size="small">
                  立即付款
                </el-button>
                <el-button v-if="order.orderState === 3" type="primary" size="small">
                  确认收货
                </el-button>
                <p><a href="javascript:;">查看详情</a></p>
                <p v-if="[2, 3, 4, 5].includes(order.orderState)">
                  <a href="javascript:;">再次购买</a>
                </p>
                <p v-if="[4, 5].includes(order.orderState)">
                  <a href="javascript:;">申请售后</a>
                </p>
                <p v-if="order.orderState === 1"><a href="javascript:;">取消订单</a></p>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination background layout="prev, pager, next" />
          </div>
        </div>
      </div>

    </el-tabs>
  </div>

</template>

<style scoped lang="scss">
.order-container {
  padding: 10px 20px;

  .pagination-container {
    display: flex;
    justify-content: center;
  }

  .main-container {
    min-height: 500px;

    .holder-container {
      min-height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.order-item {
  margin-bottom: 20px;
  border: 1px solid #f5f5f5;

  .head {
    height: 50px;
    line-height: 50px;
    background: #f5f5f5;
    padding: 0 20px;
    overflow: hidden;

    span {
      margin-right: 20px;

      &.down-time {
        margin-right: 0;
        float: right;

        i {
          vertical-align: middle;
          margin-right: 3px;
        }

        b {
          vertical-align: middle;
          font-weight: normal;
        }
      }
    }

    .del {
      margin-right: 0;
      float: right;
      color: #999;
    }
  }

  .body {
    display: flex;
    align-items: stretch;

    .column {
      border-left: 1px solid #f5f5f5;
      text-align: center;
      padding: 20px;

      >p {
        padding-top: 10px;
      }

      &:first-child {
        border-left: none;
      }

      &.goods {
        flex: 1;
        padding: 0;
        align-self: center;

        ul {
          li {
            border-bottom: 1px solid #f5f5f5;
            padding: 10px;
            display: flex;

            &:last-child {
              border-bottom: none;
            }

            .image {
              width: 70px;
              height: 70px;
              border: 1px solid #f5f5f5;
            }

            .info {
              width: 220px;
              text-align: left;
              padding: 0 10px;

              p {
                margin-bottom: 5px;

                &.name {
                  height: 38px;
                }

                &.attr {
                  color: #999;
                  font-size: 12px;

                  span {
                    margin-right: 5px;
                  }
                }
              }
            }

            .price {
              width: 100px;
            }

            .count {
              width: 80px;
            }
          }
        }
      }

      &.state {
        width: 120px;

        .green {
          color: $xtxColor;
        }
      }

      &.amount {
        width: 200px;

        .red {
          color: $priceColor;
        }
      }

      &.action {
        width: 140px;

        a {
          display: block;

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }
}
</style>

4. 配置三级路由

import MemberInfo from '@/views/Member/components/UserInfo.vue'
import MemberOrder from '@/views/Member/components/UserOrder.vue'


{
  path: '/member',
  component: Member,
  children: [
    {
      path: '',
      component: MemberInfo
    },
    {
      path: 'order',
      component: MemberOrder
    }
  ]
}

个人中心信息渲染

1. 使用Pinia数据渲染个人信息

<script setup>
// 导入userStore
import { useUserStore } from '@/stores/userStore'
const userStore = useUserStore()
</script>

<template>
  <!-- 用户信息 -->
  <div class="user-meta">
    <div class="avatar">
      <img :src="userStore.userInfo?.avatar" />
    </div>
    <h4>{{ userStore.userInfo?.account }}</h4>
  </div>
</template>

2. 封装猜你喜欢接口

export const getLikeListAPI = ({ limit = 4 }) => {
  return request({
    url:'/goods/relevant',
    params: {
      limit 
    }
  })
}

3. 渲染猜你喜欢数据

<script setup>
import { onMounted, ref } from 'vue'
// 导入GoodsItem组件
import GoodsItem from '@/views/Home/components/GoodsItem.vue'
// 获取猜你喜欢列表
const likeList = ref([])
const getLikeList = async () => {
  const res = await getLikeListAPI({ limit: 4 })
  likeList.value = res.result
}

onMounted(() => getLikeList())
</script>

<template>
   <div class="goods-list">
      <GoodsItem v-for="good in likeList" :key="good.id" :goods="good" />
    </div>
</template>

我的订单

1. 基础列表渲染

/*
params: {
	orderState:0,
  page:1,
  pageSize:2
}
*/


export const getUserOrder = (params) => {
  return request({
    url:'/member/order',
    method:'GET',
    params
  })
}

<script setup>
import { getUserOrder } from '@/apis/order'
import { onMounted, ref } from 'vue'

// 获取订单列表
const orderList = ref([])
const params = ref({
  orderState: 0,
  page: 1,
  pageSize: 2
})
const getOrderList = async () => {
  const res = await getUserOrder(params.value)
  orderList.value = res.result.items
  total.value = res.result.counts
}
onMounted(() => getOrderList())
</script>

2. tab切换实现

<script setup>
// tab列表
const tabTypes = [
  { name: "all", label: "全部订单" },
  { name: "unpay", label: "待付款" },
  { name: "deliver", label: "待发货" },
  { name: "receive", label: "待收货" },
  { name: "comment", label: "待评价" },
  { name: "complete", label: "已完成" },
  { name: "cancel", label: "已取消" }
]

// tab切换
const tabChange = (type) => {
  params.value.orderState = type
  getOrderList()
}

</script>

<template>
  <el-tabs @tab-change="tabChange">
    <!-- 省略... -->
  </el-tabs>
</template>

3. 分页逻实现

页数 = 总条数 / 每页条数

<script setup>
// 补充总条数
const total = ref(0)
const getOrderList = async () => {
  const res = await getUserOrder(params.value)
  // 存入总条数
  total.value = res.result.counts
}
// 页数切换
const pageChange = (page) => {
  params.value.page = page
  getOrderList()
}
</script>

<template>
   <el-pagination 
     :total="total" 
     @current-change="pageChange" 
     :page-size="params.pageSize" 
     background
     layout="prev, pager, next" />
</template>

细节优化

1. 默认三级路由设置

  {
    path: 'member',
    component: Member,
    children: [
      {
        path: '', // 置空path
        component: UserInfo
      },
      {
        path: 'order',
        component: UserOrder
      }
    ]
  }

2. 订单状态显示适配

<script setup>
  // 创建格式化函数
  const fomartPayState = (payState) => {
    const stateMap = {
      1: '待付款',
      2: '待发货',
      3: '待收货',
      4: '待评价',
      5: '已完成',
      6: '已取消'
    }
    return stateMap[payState]
  }
</script>


<template>
  <!-- 调用函数适配显示 -->
  <p>{{ fomartPayState(order.orderState)}}</p>
</template>
量化接口stockapi
关注
专栏目录
黑马程序员 vue3小兔鲜电商项目笔记 一、项目初始化
qq_63787455的博客
09-05 1254
同样的方法我们在src目录下的views文件夹中创建两个名为Home和Category的文件夹，并给他俩都创建一个名为index.vue的文件，里面分别添加如下代码。保存之后我们重启一遍我们的按需导入就完成啦，那么接下来我们进行一下试验，我们来到官网，打开组件，我们选择按钮。里面有很多导入方式，因为我们所需的组件并不是他全部的，所以我们选择按需导入，接着我们在终端中输入如下命令安装。因为我们用的是vite，所以安装成功后我们需要添加代码到我们的vite.config.js中。
小兔鲜儿电商前台项目（一） —— 项目初始化
ailsa_csdn的博客
04-07 4076
电商项目的初始化：搭建项目结构、配置代码规范
前端vue3.0小兔鲜 项目
weixin_42435368的博客
06-22 783
前端vue3.0框架的小兔鲜项目
会员中心丨2023前端最新项目Vue3小兔鲜
黑马程序员官方博客
06-14 234
本课程从Vue3基础入门开始讲起，按照电商业务流程的推进方式逐一按照业务模块进行讲解。课程共分为7章：1. Vue3入门 2. Pinia和项目起步 3. Home页和一级分类 4. 二级分类和详情 5. 登录和本地购物车 6. 接口购物车和支付 7. 用户中心和拓展课程
vue3小兔鲜商城项目学习笔记+资料分享02
weixin_44125573的博客
11-10 5032
vue3小兔鲜商城项目学习笔记
小兔鲜儿Vue3.0前端电商项目实战
热门推荐
IT大神帅杰的博客
10-07 1万+
小兔鲜儿Vue3.0实现了电商平台主线业务功能，电商首页、一级分类、二级分类、商品详情、购物车、结算、支付、个人中心、订单管理、订单详情。 项目采用前后端分离模式，前台使用了VUE3.0技术栈构建，自己封装的UI组件库，接入了QQ登录，支付宝支付业务，以及前端SKU解决方案，本地线上购物车解决方案 后台接口基本完毕，但是数据缺乏（分类，商品），所以会有一些本地mock数据。 采用vuex来管理购物车和用户数据，vuex的使用会淋漓尽致。 使用vue3.0来开发，所以小兔鲜儿项目，会很 鲜嫩 酸爽 。 但是会
拓展部分丨2023前端最新项目Vue3小兔鲜
黑马程序员官方博客
06-16 585
使用Vite快速创建一个Vue项目，在项目中添加请求插件axios，然后新增一个SKU组件，在根组件中把它渲染出来，下面是规格内容的基础模板。
小兔鲜电商项目（Vite + Vue3）-vue3-rabbit.zip
11-04
【小兔鲜电商项目——基于Vite与Vue3的实现详解】 在当今互联网时代，电商平台已经成为日常生活不可或缺的一部分。"小兔鲜电商项目"是利用现代前端技术栈Vite和Vue3构建的一个示例项目，旨在展示如何高效地开发一个...
基于Vue3.0和组合API的B2C电商平台小兔鲜儿设计源码
最新发布
09-27
该项目是一款基于Vue3.0和组合API开发的B2C电商平台——小兔鲜儿的设计源码。项目包含66个文件，涵盖31个Vue组件、14个JavaScript脚本、5个PNG图片、3个JSON配置、2个Markdown文档、2个GIF动图、2个CSS样式文件以及...
小兔鲜注册页面验证、阶段案例（登录、首页页面）（重点）、小兔鲜放大镜效果——DOM
weixin_70320000的博客
02-26 1613
小兔鲜注册页面验证、阶段案例（登录、首页页面）（重点）、小兔鲜放大镜效果——DOM
django3.0+rest framework + Vue 生鲜学习素材.zip
04-27
django+rest framework + Vue 生鲜电商项目学习材料与相关代码，仅供学习,该部分为前端
小兔鲜-PC
呆呆狗
08-18 508
小兔鲜电商平台-PC端 项目介绍 此项目是 电商类的一个PC端购物平台。主要完成了首页模块、分类模块、商品详情模块、购物车的模块、登录模块、结算模块 项目技术 Vue3.x、Vue Router、Vuex、Vueuse 、axios、 主要业务描述 采用 IntersectionObserver 监测 某个Dom是否进入可视区，进入后再发起异步请求等操作，减少白屏时间 自定义骨架屏组件，搭配Vue动画，防止页面白屏内容过多，提高用户体验 自定义10+个组件，根据使用情景，全局注册为函数式组件或.
Vue3.0小兔鲜儿电商项目+项目学习笔记
JAVA编码选手的博客
06-12 1264
Vue3.0小兔鲜儿电商项目 基于 vue3.0 的组合 AP I方式与选项 API 的方式开发的一个综合品类的电商前台系统。 实现了一套完整的电商业务流程，从首页，类目，搜索，品牌，商品详情，购物车，结算，支付，个人中心，订单管理，收货地址管理，评价中心，和其他个人信息管理业务。
vue3小兔鲜商城项目学习笔记+资料分享06
weixin_44125573的博客
11-10 1654
vue3小兔鲜商城项目学习笔记+资料分享
vue3 之 数据格式化函数
Jasmin博客
02-18 719
在很多项目中，都会有数据字典表，前端通过请求后端拿到数据字典表里的数据，一般在页面列表上面状态数据都会是返回的数字，前端需要把数字转换成字典表里对应的数据值，下面写了一个前端写死的数据，stateMap里的数据可以换成从接口请求过来的数据。
vue3小兔鲜商城项目学习笔记+资料分享01
weixin_44125573的博客
11-10 3399
vue3小兔鲜商城项目学习笔记+资料分享01
vue3小兔鲜商城项目学习笔记+资料分享07
weixin_44125573的博客
11-10 4155
vue3小兔鲜商城项目学习笔记+资料分享
vue3小兔鲜商城项目学习笔记+资料分享08
weixin_44125573的博客
11-10 1167
vue3小兔鲜商城项目学习笔记+资料分享
vue3 小兔鲜电商项目
09-11
如果您在简历中提到Vue3小兔鲜电商项目，可以简要介绍一下该项目的背景和您在项目中的角色和贡献。您可以描述该项目是基于Vue3开发的一个电商网站，使用了一些常用的技术栈和工具如Router、Pinia和ESLint等。您可以提及您参与了项目的初始化，并使用命令创建了Vue3项目。另外，您可以谈论您对项目中的主题色进行了定制，使之与小兔鲜的风格保持一致，并使用Scss变量替换方案来实现。这样，您就可以在简历中突出您对Vue3和相关技术的熟悉程度和实践经验，以及对项目的贡献。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

量化接口stockapi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值