vue.js2.0 (簡易)水果商城 vuex vant-ui
開發初衷：
一直在學習vue.js,以前學習構建工具搭建的項目都是從github下載的，學習着就想本身經過vue-cli搭建一個簡易的水果商城項目.該項目系本人首次發佈於github，有諸多問題須要修正，目前項目還會繼續更新，還請各位大神多多指點，輕噴，謝謝了。項目比較簡單，適合新手學習項目佈局，一些簡單的數據交互，若是以爲能經過項目學到一點東西，麻煩再github上給個star,先在這裏謝過了。vue
github地址ios
項目結構：
組件結構：
需求分析：
提示：本項目中調用本地json數據後，數據會被存到localstorage，減小屢次接口調用
- 實現各類水果產品的展現 home.vue
請求statci/fruit.json獲取全部數據，fruit.json包含水果數據、收貨地址列表數據、 水果文章數據.將fruitData與addressList存入localstorage。 - 點擊水果產品進入對應的詳情頁 Detail.vue
此組件旨在渲染對應水果的具體數據：輪播圖、價格、名稱、介紹，對水果的數量進行修
改。而且能夠將水果添加到購物車，也能夠直接進行結算。 - 若是在詳情頁直接點擊結算，則直接跳轉到結算頁面
若是點擊購物車，則進入購物車組件，在購物車組件能夠修改水果購買數量以及選擇結算那
些水果。
購物車組件 Car.vue
結算組件 Pay.vue PaySuccess.vue - 進入結算頁面後 能夠設置發票擡頭、支付方式、留言信息
- 結算成功後進入PaySuccess.vue 在支付成功頁能夠進入訂單詳情頁面和訂單列表頁面
Order.vue 訂單列表 OrderDetail.vue 訂單詳情 - 我的中心My.vue
個人收藏 Collection.vue
個人收貨地址：（列表）AddressList.vue （新增編輯）AddressEdit.vue - 水果相關文章
文章詳情：Article.vue
文章詳情：ArticleDetail.vue - 文章和水果都有收藏功能，收藏成功後能夠在我的中心的個人收藏裏面看到
項目頁面截圖：
vuex:
index.jsgit
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions
})
state.jsgithub
const state={
fruitData:localStorage["fruitData"]?JSON.parse(localStorage["fruitData"]): [], //水果數據
addressList:localStorage["addressList"]?JSON.parse(localStorage["addressList"]): [], //地址列表
addressEdit:localStorage.getItem("addressEdit")?JSON.parse(localStorage.getItem("addressEdit")):{}, //當前編輯地址對象
carts:localStorage["carts"]?JSON.parse(localStorage["carts"]): [], //購物車
orders:localStorage["orders"]?JSON.parse(localStorage["orders"]): [], //本次結算訂單
ordersList:localStorage["ordersList"]?JSON.parse(localStorage["ordersList"]): [], //所有訂單
payStyles:[
{
id:"1",
name:"在線支付",
introduce:"支持支付寶支付、微信支付、銀行卡支付、財付通等"
},
{
id:"2",
name:"螞蟻花唄",
introduce:"花唄分期是花唄聯合天貓淘寶推出的，面向互聯網的賒購服務，經過支付寶輕鬆還款，0首付"
},
{
id:"3",
name:"貨到付款",
introduce:"貨到再付款，支持現金交易"
}
],
currentOrder:localStorage.getItem("currentOrder")?JSON.parse(localStorage.getItem("currentOrder")):{}, //當前操做訂單
nowIndex:localStorage.getItem("nowIndex")?JSON.parse(localStorage.getItem("nowIndex")):0,
articles:localStorage["articles"]?JSON.parse(localStorage["articles"]): [], //所有文章
articlesCollect:localStorage["articlesCollect"]?JSON.parse(localStorage["articlesCollect"]): [], //收藏文章
goodsCollect:localStorage["goodsCollect"]?JSON.parse(localStorage["goodsCollect"]): [], //收藏商品
}
export default state
action.jsvue-router
const actions={
//水果數據
setFruit({commit},data){
commit('SET_FRUIT',data)
},
//地址列表
setAddresslist({commit},data){
commit('SET_ADDRESSLIST',data)
},
//添加到購物車
addCar({commit},data){
commit('ADD_CARTS',data)
},
//購物車結算
setOrders({commit},data){
commit('SET_ORDERS',data)
},
//所有訂單
getAllOrders({commit},data){
commit('GET_ORDERS',data)
},
//當前訂單
setCurrentorder({commit},data){
commit('SET_CURRENTORDER',data)
},
//設置當前導航索引
setIndex({commit},data){
commit('SET_INDEX',data)
},
//設置當前地址編輯對象
setAddressedit({commit},data){
commit('SET_ADDRESSEDIT',data)
},
//設置當前收貨地址
defaultAddress({commit},data){
commit('DEFAULT_ADDRESS',data)
},
//新增時清空當前編輯地址，避免新增輸入框裏面有編輯地址時的內容
emptyAddress({commit}){
commit('EMPTY_ADDRESS')
},
//獲取所有文章
getArticle({commit},data){
commit('GET_ARTICLE',data)
},
//文章收藏
setArticle({commit},data){
commit('SET_ARTICLE',data)
},
//文章點贊
praiseArticle({commit},data){
commit('SET_ARTICLE',data)
},
//商品收藏
collectGoods({commit},data){
commit('COLLECT_GOODS',data)
}
}
export default actions
type.jsvuex
export const PRAISE_ARTICLE ='PRAISE_ARTICLE' //文章收藏 export const SET_FRUIT ='SET_FRUIT' //水果數據 export const SET_ADDRESSLIST ='SET_ADDRESSLIST' //地址列表 export const ADD_CARTS = 'ADD_CARTS' //加入購物車 export const GET_ORDERS='GET_ORDERS' //全部訂單 export const SET_ORDERS='SET_ORDERS' //本次結算訂單 export const SET_CURRENTORDER='SET_CURRENTORDER' //當前操做訂單 export const SET_INDEX='SET_INDEX' //設置當前導航索引 export const SET_ADDRESSEDIT='SET_ADDRESSEDIT' //設置當前地址編輯對象 export const DEFAULT_ADDRESS='DEFAULT_ADDRESS' //設置當前地址 export const EMPTY_ADDRESS='EMPTY_ADDRESS' //新增時清空當前編輯地址，避免新增輸入框裏面有編輯地址時的內容 export const GET_ARTICLE ='GET_ARTICLE' //獲取所有文章 export const SET_ARTICLE ='SET_ARTICLE' //文章收藏 export const COLLECT_GOODS='COLLECT_GOODS' //商品收藏
mutationsvue-cli
import state from './state'
import * as type from './type.js'
import { Dialog } from 'vant';
const matutaions={
//水果數據
[type.SET_FRUIT](state,data){
state.fruitData = data;
localStorage.setItem("fruitData",JSON.stringify(state.fruitData));
},
//地址列表
[type.SET_ADDRESSLIST](state,data){
state.addressList = data;
localStorage.setItem("addressList",JSON.stringify(state.addressList));
},
//購物車
[type.ADD_CARTS](state,data){
state.carts.push(data);
localStorage.setItem("carts",JSON.stringify(state.carts));
},
//購物車刪除
shanchu:(state,index)=>{
Dialog.confirm({
title: '確認刪除',
message: '您確認刪除嘛？'
}).then(() => {
state.carts.splice(index,1)
localStorage.setItem("carts",JSON.stringify(state.carts));
}).catch(() => {
});
},
//訂單
[type.SET_ORDERS](state,data){ //本次結算訂單
state.orders = data
localStorage.setItem("orders",JSON.stringify(state.orders));
},
//獲取所有訂單
[type.GET_ORDERS](state,data){
state.ordersList.push(data);
localStorage.setItem("ordersList",JSON.stringify(state.ordersList));
},
//當前操做訂單
[type.SET_CURRENTORDER](state,data){
state.currentOrder = data
localStorage.setItem("currentOrder",JSON.stringify(state.currentOrder));
},
//設置當前導航索引
[type.SET_INDEX](state,data){
state.nowIndex = data
localStorage.setItem("nowIndex",JSON.stringify(state.nowIndex));
},
//設置當前地址編輯對象
[type.SET_ADDRESSEDIT](state,data){
state.addressEdit = data
localStorage.setItem("addressEdit",JSON.stringify(state.addressEdit));
},
//設置當前地址
[type.DEFAULT_ADDRESS](state,data){
state.defaultAddress = data
//先將地址列表的默認地址都設置爲false
state.addressList.forEach((item,index)=>{
item.is_default = false
});
var addressId = data.id;
//再講當前選中地址設置爲true
state.addressList.forEach((item,index)=>{
if(item.id === addressId){
item.is_default = true
}
});
console.log(state.addressList);
localStorage.setItem("addressList",JSON.stringify(state.addressList));
},
//新增時清空當前編輯地址，避免新增輸入框裏面有編輯地址時的內容
[type.EMPTY_ADDRESS](state){
state.addressEdit = {};
localStorage.setItem("addressEdit",JSON.stringify(state.addressEdit));
},
//獲取所有文章
[type.GET_ARTICLE](state,data){
state.articles = data
localStorage.setItem("articles",JSON.stringify(state.articles));
},
//收藏文章
[type.SET_ARTICLE](state,data){
var collectId = data.id;
if(data.isCollected){
state.articles.forEach((item)=>{
if(item.id === collectId){
item.isCollected = false
}
});
state.articlesCollect.forEach((item,index)=>{
if(item.id === collectId){
state.articlesCollect.splice(index,1);
}
})
} else {
state.articles.forEach((item)=>{
if(item.id === collectId){
item.isCollected = true
}
});
state.articlesCollect.push(data);
}
localStorage.setItem("articles",JSON.stringify(state.articles));
localStorage.setItem("articlesCollect",JSON.stringify(state.articlesCollect));
},
//點贊文章
[type.PRAISE_ARTICLE](state,data){
},
//收藏商品
[type.COLLECT_GOODS](state,data){
var collectId = data.id;
if(data.isCollected){
state.fruitData.forEach((item,index)=>{
if(item.id === collectId){
item.isCollected = false
}
})
state.fruitData.forEach((item,index)=>{
if(item.id === collectId){
state.goodsCollect.splice(index,1);
}
})
}else{
state.fruitData.forEach((item,index)=>{
if(item.id === collectId){
item.isCollected = true
}
});
state.goodsCollect.push(data);
}
localStorage.setItem("goodsCollect",JSON.stringify(state.goodsCollect));
localStorage.setItem("fruitData",JSON.stringify(state.fruitData));
},
//文章刪除
del:(state,index)=>{
MessageBox.confirm('肯定取消收藏該文章麼？').then(action=>{
state.article.splice(index,1)
localStorage.setItem("article",JSON.stringify(state.article));
})
},
//商品刪除
cancel:(state,index)=>{
MessageBox.confirm('肯定取消收藏該商品麼？').then(action=>{
state.collections.splice(index,1)
localStorage.setItem("collections",JSON.stringify(state.collections));
})
},
laji:(state,index)=>{
MessageBox.confirm('肯定刪除收貨地址麼？').then(action=>{
state.address.splice(index,1)
localStorage.setItem("address",JSON.stringify(state.address));
})
},
//訂單刪除
delOrders:(state,index)=>{
Dialog.confirm({
title: '確認刪除',
message: '肯定刪除該訂單麼？'
}).then(() => {
state.ordersList.splice(index,1)
localStorage.setItem("ordersList",JSON.stringify(state.ordersList));
}).catch(() => {
});
},
//數量加
add(state,index){
state.carts[index].value++
},
//數量減
reduce(state,index){
state.carts[index].value==1?state.carts[index].value=1: state.carts[index].value--
},
settlement:(state,data)=>{
state.carts=[];
localStorage.setItem("carts",JSON.stringify(state.carts));
},
}
export default matutaions
總結：
該項目開發的初衷是熟悉vuex以及練習商城vant-ui框架。本項目是參考github一個vivo商城項目，地址爲https://github.com/Mynameisfw... 參考該項目思路，在這裏對原做者表示感謝。 數據圖片來源於中國水果網，再次表示感謝，侵權聯繫便刪。json
github地址axios
有任何問題意見建議能夠在https://github.com/dabaoRain/... 這裏給我留言，你們一塊兒分享學習討論。若是以爲能經過項目學到一點東西，麻煩再github上給個star,先在這裏謝過了。sass
技術參考網站：http://jspang.com/ vue官網
技術棧：vue全家桶 vue+vuex+vue-router+axios+vant-ui+localstorage+sass
相關連接：van-ui官網 https://youzan.github.io/vant/
相關文章
- 1. Javaweb 水果商城網站
- 2. 「天天淘」簡易商城
- 3. vuex+vant商城（購物車）
- 4. Springboot項目—簡易商城系統(一)
- 5. 簡易商城 [ html + css ] 練習
- 6. PHP簡易商城(一)概述
- 7. css之簡易水波效果
- 8. Vue.js2.0-餓了麼商家
- 9. 商城簡介
- 10. 淘淘商城簡介——淘淘商城
- 更多相關文章...
- • XSD 簡易元素 - XML Schema 教程
- • SVG 模糊效果 - SVG 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Javaweb 水果商城網站
- 2. 「天天淘」簡易商城
- 3. vuex+vant商城（購物車）
- 4. Springboot項目—簡易商城系統(一)
- 5. 簡易商城 [ html + css ] 練習
- 6. PHP簡易商城(一)概述
- 7. css之簡易水波效果
- 8. Vue.js2.0-餓了麼商家
- 9. 商城簡介
- 10. 淘淘商城簡介——淘淘商城