小米商城

router/index.js

import Vue from 'vue' import VueRouter from 'vue-router' import axios from 'axios' import { Toast } from 'vant'Vue.use(VueRouter)const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err) } const router = new VueRouter({routes: [{path: '/',redirect: '/index/content'},{path: '/index',name: 'Index',component: () => import('../views/Index'),children: [{path: 'content',name: 'Content',component: () => import('../views/Content'),meta: {title: '小米商城'}},{path: 'cart',name: 'Cart',component: () => import('../views/Cart'),beforeEnter: (to, from, next) => {axios.get("/user/detail", {params: {token: localStorage.getItem("miUserToken")? JSON.parse(localStorage.getItem("miUserToken")).token: "",},}).then((res) => {if (res.data.code == 2000) {Toast(res.data.msg);router.app.$router.push("/login");} else {next()}})},meta: {title: '購物車'}},{path: 'home',name: 'Home',component: () => import('../views/Home'),meta: {title: '個人中心',keepAlive: true,},}]},{path: '/detail',name: 'Detail',component: () => import('../views/Detail'),meta: {title: '商品詳情'}},{path: '/login',name: 'Login',component: () => import('../views/Login'),meta: {title: '登錄'}},{path: '/register',name: 'Register',component: () => import('../views/Register'),meta: {title: '注冊'}}] })router.beforeEach((to, from, next) => {to.meta.title ? document.title = to.meta.title : document.title = 'undefined'next() })export default router

store/index.js

import Vue from 'vue' import Vuex from 'vuex' import local from './local'Vue.use(Vuex) import { Toast } from 'vant'export default new Vuex.Store({state: {cartArr: local.get('miCart'),allChecked: true},mutations: {add2Cart(state, obj) {obj.checked = trueobj.date = new Date().getTime()let index = state.cartArr.findIndex(val => val.id == obj.id)if (index == -1) {obj.num = 1state.cartArr.push(obj)} else {state.cartArr[index].num < state.cartArr[index].stores ? state.cartArr[index] += 1 : Toast('沒貨了！')}local.set('miCart', state.cartArr)},checkAll(state, allChecked) {state.allChecked = allCheckedstate.cartArr.map(val => val.checked = allChecked)local.set('miCart', state.cartArr)},checkItem(state) {state.cartArr.findIndex(val => val.checked == false) == -1 ? state.allChecked = true : state.allChecked = falselocal.set('miCart', state.cartArr)},minusItem(state, id) {let index = state.cartArr.findIndex(val => val.id == id)state.cartArr[index].num > 1 ? state.cartArr[index].num -= 1 : Toast('如果不要請點刪除')local.set('miCart', state.cartArr)},plusItem(state, id) {let index = state.cartArr.findIndex(val => val.id == id)state.cartArr[index].num < state.cartArr[index].stores ? state.cartArr[index].num += 1 : Toast('最大庫存了')local.set('miCart', state.cartArr)},del(state, id) {state.cartArr.splice(state.cartArr.findIndex(val => val.id == id), 1)local.set('miCart', state.cartArr)}},actions: {},modules: {},getters: {totalPrice(state) {let sum = 0state.cartArr.map(val => val.checked == true ? sum += val.minPrice * val.num : sum)return sum}} })

store/local.js

export default {get(key) {return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : []},set(key, value) {localStorage.setItem(key, JSON.stringify(value))} }

App.vue

<template><div id="app"><router-view v-if="flag" /></div> </template><script> export default {// errorCaptured: (err, vm, info) => {// return false;// },data() {return {flag: true,};},// mounted() {// this.$http// .get("/list")// .then((res) => console.log(res));// },methods: {reload() {this.flag = false;this.$nextTick(() => {this.flag = true;});},},provide() {return {reload: this.reload,};}, }; </script><style> * {margin: 0;padding: 0;list-style: none; } </style>

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'import Vant from 'vant' import { Lazyload } from 'vant' import 'vant/lib/index.css'import axios from 'axios' axios.defaults.baseURL = 'https://api.it120.cc/xiaochengxu'Vue.prototype.$http = axiosVue.use(Vant) Vue.use(Lazyload)Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App) }).$mount('#app')

views/Cart.vue

<template><div class="cart"><div><input type="checkbox" :checked="allChecked" @change="checkAll" /><span>全選</span></div><div class="cart-content"><div class="cart-item" v-for="item in cartArr" :key="item.id"><input type="checkbox" v-model="item.checked" @change="checkItem" /><img :src="item.pic" alt="" /><div class="cart-item-text"><p>{{ item.name }}</p><p>{{ item.minPrice }}</p><p><button @click="minusItem(item.id)">-</button>{{ item.num}}<button @click="plusItem(item.id)">+</button></p></div><button @click="del(item.id)">刪除</button></div></div><van-submit-bar :price="totalPrice * 100" button-text="提交訂單" /></div> </template><script> import { Dialog, Toast } from "vant"; import { mapState, mapMutations, mapGetters } from "vuex"; export default {computed: {...mapState({cartArr: (state) => state.cartArr,}),...mapState(["allChecked"]),...mapGetters(["totalPrice"]),},methods: {checkAll(event) {this.$store.commit("checkAll", event.target.checked);},...mapMutations(["checkItem", "minusItem", "plusItem"]),...mapMutations({del: (commit, id) =>Dialog.confirm({ title: "確定刪除" }).then(() => commit("del", id)).catch(() => {return true;}),}),}, }; </script><style scoped> .cart {height: 100%;display: flex;flex-direction: column; } .cart-content {flex: 1;overflow: auto; } .van-submit-bar {position: static; } .cart-item {display: flex;justify-content: space-around;align-items: center;border: 1px solid rgb(255, 153, 0);margin: 10px 3px;height: 20vh; } .cart-item img {height: 100%;width: auto; } .cart-item-text {width: 30vw; } </style>

views/Content.vue

<template><div class="content"><van-swipe :autoplay="3000"><van-swipe-item v-for="(item, index) in swiperArr" :key="index"><imgclass="img"v-lazy="item.picUrl"@click="$router.push('/detail?id=' + item.id)"/></van-swipe-item></van-swipe><van-grid :column-num="3"><van-grid-itemv-for="value in 6":key="value"icon="photo-o"text="文字"/></van-grid><van-divider>推薦</van-divider><van-cardv-for="item in hotGoodsArr":key="item.id":num="item.stores":tag="item.recommendStatusStr":price="item.minPrice":desc="item.characteristic":title="item.name":thumb="item.pic":origin-price="item.originalPrice"@click="$router.push('/detail?id=' + item.id)"></van-card><van-divider>砍價商品</van-divider><van-cardv-for="item in haggleGoodsArr":key="item.id":num="item.stores":tag="item.tags":price="item.minPrice":desc="item.characteristic":title="item.name":thumb="item.pic":origin-price="item.originalPrice"@click="$router.push('/detail?id=' + item.id)"></van-card><van-divider>拼團商品</van-divider><van-cardv-for="item in groupGoodsArr":key="item.id":num="item.stores":tag="item.recommendStatusStr":price="item.minPrice":desc="item.characteristic":title="item.name":thumb="item.pic":origin-price="item.originalPrice"@click="$router.push('/detail?id=' + item.id)"></van-card></div> </template><script> export default {data() {return {swiperArr: [],hotGoodsArr: [],haggleGoodsArr: [],groupGoodsArr: [],};},mounted() {this.getSwipe();this.getHotGoods();this.getHaggleGoods();this.getGroupGoods();},methods: {async getSwipe() {this.swiperArr = (await this.$http.get("/banner/list")).data.data;},async getHotGoods() {this.hotGoodsArr = (await this.$http.get("/shop/goods/list", {params: {kanjia: false,pingtuan: false,},})).data.data;},async getHaggleGoods() {this.haggleGoodsArr = (await this.$http.get("/shop/goods/list", {params: {kanjia: true,pingtuan: false,},})).data.data;},async getGroupGoods() {this.groupGoodsArr = (await this.$http.get("/shop/goods/list", {params: {pingtuan: true,kanjia: false,},})).data.data;},}, }; </script><style scoped> .img {width: 100%; } </style>

views/Detail.vue

<template><div><van-nav-bartitle="商品詳情"left-text="返回"left-arrow@click-left="onClickLeft"></van-nav-bar><van-swipe :autoplay="3000"><van-swipe-item v-for="(image, index) in pics" :key="index"><img v-lazy="image.pic"/></van-swipe-item></van-swipe><van-divider /><div v-if="basicInfo"><p>商品名稱：{{ basicInfo.name }}</p><p>商品價格：{{ basicInfo.minPrice }}</p><p>上架時間：{{ basicInfo.dateAdd }}</p></div><van-divider /><div v-html="content" class="contentBox"></div><div class="box"></div><van-goods-action><van-goods-action-icon icon="chat-o" text="客服"></van-goods-action-icon><van-goods-action-iconicon="cart-o"text="購物車"></van-goods-action-icon><van-goods-action-icon icon="shop-o" text="店鋪"></van-goods-action-icon><van-goods-action-buttontype="warning"text="加入購物車"@click="add2Cart"></van-goods-action-button></van-goods-action></div> </template><script> import { Toast } from "vant"; export default {data() {return {basicInfo: null,content: "",pics: [],};},mounted() {this.getInfo(this.$route.query.id);},methods: {onClickLeft() {this.$router.back();},async getInfo(id) {let { basicInfo, content, pics } = (await this.$http.get("/shop/goods/detail", { params: { id } })).data.data;[this.basicInfo, this.content, this.pics] = [basicInfo, content, pics];},add2Cart() {Toast("已添加到購物車");let obj = {id: this.basicInfo.id,pic: this.basicInfo.pic,name: this.basicInfo.name,minPrice: this.basicInfo.minPrice,stores: this.basicInfo.stores,};this.$store.commit("add2Cart", obj);this.$router.push('/index/cart')},}, }; </script><style scoped> >>> img {width: 100%;height: auto; } .box {height: 50px; } p {text-indent: 2em; } </style>

views/Home.vue

<template><div><header class="hd"><div class="user ui-flex align-center"><div class="img"><img src="https://m.mi.com/static/img/avatar.76a75b8f17.png" alt="" /></div><div class="name">昵稱：{{ nick }} <br />手機號：{{ mobile }}</div><div class="userType">{{ isSeller ? "金牌賣家" : "金牌買家" }}</div></div></header><van-cell-group><van-cell title="用戶ID" :value="id" /><van-cell title="注冊時間" :value="dateAdd" /><van-cell title="注冊方式" :value="sourceStr" /><van-cell title="銀行卡號" :value="cardNumber" /><van-cell title="用戶狀態(tài)" :value="statusStr" /></van-cell-group></div> </template><script> import { Toast, Cell, CellGroup } from "vant"; export default {data() {return {cardNumber: "",dateAdd: "",id: "",mobile: "",nick: "",sourceStr: "",statusStr: "",isSeller: "",};},mounted() {this.userInfo();},methods: {userInfo() {this.$http.get("/user/detail", {params: {token: localStorage.getItem("miUserToken")? JSON.parse(localStorage.getItem("miUserToken")).token: "",},}).then((res) => {if (res.data.code == 2000) {Toast(res.data.msg);this.$router.push("/login");} else {let infoObj = res.data.data.base;this.nick = infoObj.nick;this.mobile = infoObj.mobile;this.id = infoObj.id;this.dateAdd = infoObj.dateAdd;this.cardNumber = infoObj.cardNumber;this.statusStr = infoObj.statusStr;this.sourceStr = infoObj.sourceStr;this.isSeller = infoObj.isSeller;}});},}, }; </script><style scoped> .hd {background: url(https://m.mi.com/static/img/bg.63c8e19851.png) center 0#f37d0f;background-size: auto 100%;padding: 1em 0; } .align-center {align-items: center;-webkit-box-align: center; } .ui-flex {display: flex;justify-content: space-around; } .img {width: 4em;height: 4em;/* margin: 0 1em; */overflow: hidden;border-radius: 100%;border: 3px solid hsla(0, 0%, 100%, 0.4); } img {width: 100%; } .name a, .name {margin-left: -3em;color: blanchedalmond; } .userType {color: rgb(255, 217, 0);font-weight: bold; } </style>

views/Index.vue

<template><div class="index"><div class="index-head"><h2 @click="$router.push('/')">小米商城</h2></div><div class="index-content"><keep-alive><router-view></router-view></keep-alive></div><van-tabbar route><van-tabbar-item to="/index/content" icon="home-o">首頁</van-tabbar-item><van-tabbar-item to="/index/cart" icon="shopping-cart-o">購物車</van-tabbar-item><van-tabbar-item to="/index/home" icon="manager-o">我的</van-tabbar-item></van-tabbar></div> </template><script> export default {}; </script><style scoped> .index {height: 100vh;display: flex;flex-direction: column; } .index-content {flex: 1;overflow: auto; } .index-head > h2 {line-height: 6vh;color: white;background: rgb(253, 104, 33);text-align: center; } .van-tabbar--fixed {position: static; } </style>

views/Login.vue

<template><div><van-nav-bar title="登錄" /><van-form @submit="onSubmit"><van-fieldv-model="mobile"name="mobile"label="手機號"placeholder="請輸入手機號":rules="[{ required: true, message: '請輸入手機號' }]"/><van-fieldv-model="pwd"label="密碼"name="pwd"type="password"placeholder="請輸入密碼":rules="[{ required: true, message: '請輸入密碼' }]"/><div style="margin: 16px"><van-button round block type="info" native-type="submit">登錄</van-button><router-link to="/register">我要注冊</router-link></div></van-form></div> </template><script> import qs from "qs"; import { Toast } from "vant"; export default {inject: ["reload"],data() {return {mobile: "",pwd: "",};},methods: {onSubmit(values) {values.deviceId = "0529";values.deviceName = "小米note3";let parmStr = qs.stringify(values);this.$http.post("/user/m/login", parmStr).then((res) => {if (res.data.code == 0) {Toast("登錄成功");localStorage.setItem("miUserToken", JSON.stringify(res.data.data));this.$router.push("/index/home");} else {Toast(res.data.msg);this.reload();}});},}, }; </script><style scoped> a {line-height: 3em;color: blue;font-size: 0.8em; } </style>

views/Register.vue

<template><div><van-nav-bartitle="注冊"left-text="返回"left-arrow@click-left="onClickLeft"/><van-form @submit="onSubmit"><van-fieldv-model="mobile"name="mobile"label="手機號"placeholder="請輸入手機號":rules="[{ required: true }]"/><van-fieldv-model="nick"label="用戶名"name="nick"placeholder="請輸入用戶名":rules="[{ required: true }]"/><van-fieldv-model="code"centerclearablelabel="短信驗證碼"name="code"placeholder="請輸入短信驗證碼"><template #button><van-button size="small" type="primary" @click.prevent="sendCode">發(fā)送驗證碼</van-button></template></van-field><van-fieldv-model="pwd"type="password"name="pwd"label="密碼"placeholder="請輸入密碼":rules="[{ required: true }]"/><van-field name="autoLogin" label="自動登錄"><template #input><van-checkbox v-model="autoLogin" shape="square" /></template></van-field><div style="margin: 16px"><van-button round block type="info" native-type="submit">注冊</van-button></div></van-form></div> </template><script> import qs from "qs"; import { Toast } from "vant"; export default {inject: ["reload"],data() {return {mobile: "",pwd: "",nick: "",code: "",autoLogin: "",};},methods: {onSubmit(values) {let parmStr = qs.stringify(values);this.$http.post("/user/m/register", parmStr).then((res) => {if (res.data.code == 0) {Toast("注冊成功");this.$router.push("/login");} else if (res.data.code == 10000) {Toast("用戶已存在，請登錄");this.$router.push("/login");} else {Toast(res.data.msg);this.reload();}});},onClickLeft() {this.$router.back();},sendCode() {this.mobile? this.$http.get("/verification/sms/get", { params: { mobile: this.mobile } }).then((res) =>res.data.code === 0? Toast("驗證碼發(fā)送成功"): Toast(res.data.msg)): Toast("請輸入手機號");},}, }; </script><style scoped> </style>

總結

以上是生活随笔為你收集整理的小米商城app端项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。