
美团外卖项目
文章平均质量分 87
CaraYQ
这个作者很懒,什么都没留下…
展开
-
vuex中保存的内容
目录cartstatemutationADD_CART将食物加入购物车REDUCE_CART从购物车中删除食品vuex中有三个模块:cart,address,restaurantcartstatecartList是个对象 里面存了restaurant_id商店id 也是个对象32是商店id(restaurant_id),里面有食品id(food_id)、商店图片pic_url、商店名称restaurant_name、总数totalNum、总价totalPrice点开之后:1087是食品id(原创 2022-01-24 23:10:38 · 841 阅读 · 0 评论 -
login登录页
目录顶部导航条:复用head组件账号密码登录表单顶部导航条:复用head组件<v-head goBack="true" title="登录"></v-head>账号密码登录表单密码显示与隐藏由passwordVisible控制。passwordVisible默认false,密码不可见(密码输入框的type为password),展示闭眼的图标。passwordVisible为true,密码可见(密码输入框的type为text),展示睁眼的图标。点击图标可改变passwo原创 2022-01-23 15:44:37 · 7253 阅读 · 0 评论 -
order订单页
目录顶部导航条:复用head组件顶部导航条:复用head组件<v-head goBack="true" title="订单"></v-head>原创 2022-01-14 21:18:28 · 535 阅读 · 0 评论 -
search搜索页面
这里写目录标题顶部导航条:复用head组件搜索栏:复用search组件搜索结果展示复用alertTip顶部导航条:复用head组件<v-head title="搜索" goBack=true></v-head>搜索栏:复用search组件searchRestaurant会带着输入框的参数调用后端searchRestaurant接口 后端searchRestaurant中会带着参数查询数据库 若查询到了 返回状态码200和查询结果给前端 若没有查询到 则返回状态码-1和原创 2022-01-14 17:18:20 · 903 阅读 · 0 评论 -
pay支付页面
目录顶部导航条:复用head组件美团外卖图片支付剩余时间订单信息支付方式确定支付蒙版scan扫描虚拟DOM挂载到真实DOM上之后 获取订单信息中的商家信息、剩余时间 剩余时间为0 将overtime设为true 不为0 每隔1s计算剩余时间mounted() { let _this = this; // 从路由中获取订单id和商品价格 this.order_id = this.$route.query.order_id; this.price = this.$route.qu原创 2022-01-14 16:06:59 · 1470 阅读 · 0 评论 -
location选择收货地址
目录顶部导航条:复用head组件搜索:复用search组件点击定位当前位置其他组件上一个路由是首页上一个路由不是首页虚拟DOM挂载到真实DOM上面后 从路由中获取参数fromIndex 若为true 代表从首页跳转到本组件 展示“点击定位当前位置” 否则从其他页面跳转过来mounted() { this.fromIndex = !!this.$route.query.fromIndex;}顶部导航条:复用head组件<v-head goBack="true" title="选择原创 2022-01-13 15:49:10 · 1864 阅读 · 0 评论 -
confirm-order提交订单
目录顶部导航条:复用head组件组件一创建 就从localStorage获取当前准备下单的商品 并取出餐馆id、总数量、食物信息、总价 然后获取用户地址 根据商店ip获取店铺信息created() { let confirmOrderData = JSON.parse(localStorage.getItem('confirmOrderData')); this.restaurant_id = confirmOrderData.restaurant_id;//餐馆id this.to原创 2022-01-11 22:41:19 · 1269 阅读 · 2 评论 -
store店铺页面
目录空白页顶部导航条:复用head组件店铺信息活动列表跳转到店铺页面时 会携带商店id 组件一创建 就从路由中获取商店id 然后根据商店id获取店铺信息created() { //根据路由query获得商店id this.restaurant_id = this.$route.query.id; //根据商店id获取店家信息 this.$store.dispatch('getRestaurant', this.restaurant_id); //活动列表不停滚动播放(原创 2021-12-29 16:04:59 · 796 阅读 · 0 评论 -
cart购物车
组件一创建created() { this.emptyCart = !Object.keys(this.cartList).length Object.keys(this.cartList).forEach(restaurant_id => { //初始化选中列表 this.selectFood[restaurant_id] = { allSelect: true, totalPrice: 0 }; ...原创 2021-12-28 18:55:50 · 521 阅读 · 0 评论 -
error错误页面
顶部导航栏复用head头部导航图片失效了 不然上面会显示一个图片 下面显示字 在下面是个router-link 点击后会回到首页页角展示“美团外卖客服:10109777”原创 2021-12-28 18:18:46 · 351 阅读 · 0 评论 -
index首页
目录顶部导航条:复用head组件定位搜索导航轮播图nav组件组件一创建 首先判断有没有定位 没有定位则调用后端的接口进行定位created() { let {lat, lng} = this.address; if (!lat || !lng) {//如果没有定位 进行定位 this.getLocation();//定位 }}getLocation() { //获取当前定位 this.$store.dispatch('location');//调用vuex的location方法}l原创 2021-12-21 14:56:36 · 1469 阅读 · 0 评论 -
home我的页面
目录顶部导航条:复用head组件用户信息兴趣栏我的收藏我的足迹我的评价我的好友答谢记录我的地址我的资产栏更多推荐一进入home组件 就去cookie中获取用户信息username 如果能获取到 就带着username调用后端的接口去数据库中取用户头像 mounted() { this.username = getInfo(); if (this.username) { userInfo().then((response) => { th原创 2021-12-18 23:21:33 · 330 阅读 · 0 评论 -
components公用组件
head头部导航左边后退图标:图标是iconfont v-if来控制该标签的显示和隐藏 因为在某些组件中(如购物车组件 首页组件) 不使用该图标 监听该图标的点击 点击后返回上一页<span class="go-back" v-if="goBack" @click="funGoBack()"> <i class="iconfont"></i></span><script> funGoBack() {原创 2021-12-18 10:25:44 · 797 阅读 · 0 评论