国外手机设计网站推荐,wordpress使用方法,游戏代理免费加盟,wordpress免费淘宝客主题#x1f4c2;文章目录
一、#x1f4d4;网站题目
二、✍️网站描述
三、#x1f4da;网站介绍
四、#x1f310;网站演示
#x1f4f8;部分截图
#x1f3ac;视频演示
五、⚙️网站代码
#x1f9f1;项目结构
#x1f492;vue代码预览
六、#x1f527;完整…文章目录
一、网站题目
二、✍️网站描述
三、网站介绍
四、网站演示
部分截图
视频演示
五、⚙️网站代码
项目结构
vue代码预览
六、完整源码下载
七、更多 一、网站题目
⭐基于Vue实现的移动端手机商城项目 电商购物网站 成品源码共20页。
❤ 我的主页【获取更多优质源码】
❤ 更多源码【Web网页设计作业成品源码分享(持续更新)】 二、✍️网站描述
️本项目是基于Vue2实现的手机端移动端手机商城电商购物网站。
其中使用到的技术栈为vue2、vue-router、json、axios、mint-ui、vant、vuex、node.js、webpack、html、css、js、tab切换、等。
其中网页包含首页、购物车页、个人中心页、商品详情页、订单列表页、订单详情页、作者页、选择页 、自定义订单页、新闻详情页、新闻列表页、配件页、修改页、成功页、我的收藏页、分类页、订单详情 页、支付页、地址管理页、添加地址页、修改地址页、结算页等。 三、网站介绍
网站布局采用DIVCSS进行网页布局兼容不同尺寸的手机移动端适配
网站素材图片均采自网络素材符合了页面主题规范
网站文件网页采用模块化开发并且使用.vue文件作为组件
网页编辑如(DW、HBuilder、NotePAD、VScode、Sublime、Webstorm、Text、Notepad)都可修改代码。 四、网站演示
部分截图
视频演示 基于Vue实现的移动端手机商城项目 电商购物网站 成品演示 五、⚙️网站代码
项目结构
vue代码预览 templatediv classcartCart-Header title购物车/Cart-Headerdiv classcartMainulli v-for(cart, index) in carts classcartList :keyindex!-- 购物车单选 --div classselect clickchooseone(cart)i classiconfont icon-xuanzekuangmoren v-show!cart.danx1uan/ii classiconfont icon-xuanzekuangxuanzhong v-showcart.danx1uan stylecolor:#25b5fe/i/div!-- 购物车商品信息 --div classcartImageimg :srccart.img/divdiv classcartInformationdiv classcartName{{ cart.name }}a classiconfont icon-huishouzhan7 clickshanchu(index)/a/divp classcartPrice{{ cart.price }}/p/div!-- 购物车商品数量 --div classcartNumbera click.stopreduce(index) classadd-/ainput typetext v-modelcart.value readonlyreadonly /a click.stopadd(index) classreduce/a/div/li/ul/divdiv classcartImg v-if!carts.lengthimg src/static/img/gouwuche.png alt购物车图片h1购物车是空的哦快去购物吧/h1router-link :to{ name: Home }逛一逛/router-link/divdiv classcartFooter v-ifcarts.lengthdiv classcheckAll clickquanxuan()i classiconfont icon-xuanzekuangmoren v-show!qx/ii classiconfont icon-xuanzekuangxuanzhong v-showqx stylecolor:#25b5fe/ispan全选/span/divdiv classTotal合计span stylefont-size: 0.54rem;color:#E3211E{{ sum }}/span/divdiv classSettlementa click.stopgoPay结算 {{ sumValue }}/a/div!-- div classSettlementtworouter-link :to{name:Home} 继续购物/router-link/div --/div/div
/template
script
import { Toast, MessageBox } from mint-ui;
import { mapState, mapMutations, mapGetters } from vuex;
import CartHeader from ../../common/header
export default {name: cart,data() {return {qx: false,};},components: {CartHeader},computed: {carts() {return this.$store.state.carts;},sum: function () {var sum 0;this.$store.state.carts.forEach(cart {if (cart.danx1uan) {sum cart.price * cart.value;}});return sum;},sumValue() {var sumValue 0;this.$store.state.carts.forEach(cart {if (cart.danx1uan) {sumValue parseInt(cart.value);}});return sumValue;}},methods: {...mapMutations([shanchu, add, reduce, settlement]),chooseone(cart) {cart.danx1uan !cart.danx1uan;for (var i 0; i this.carts.length; i) {if (this.carts[i].danx1uan false) {this.qx false;break;} else {this.qx true;}}},quanxuan() {console.log((this.$store.state.carts));this.qx !this.qx;if (this.qx) {this.$store.state.carts.forEach(cart {cart.danx1uan true;});} else {this.$store.state.carts.forEach(cart {cart.danx1uan false;});}},goPay() {this.$store.state.payGoods [];if (this.sumValue 0) {MessageBox(提示, 请选择至少一个商品!)} else {this.$router.push({path: pay,})};}},created() {for (var i 0; i this.carts.length; i) {if (this.carts[i].danx1uan false) {this.qx false;break;} else {this.qx true;}}}
};
/scriptstyle
.select {float: left;margin-top: 1.5rem;padding-left: 0.5rem;
}.select i {font-size: 0.53rem;
}.checkAll {width: 24%;line-height: 1.18rem;float: left;
}.checkAll i {font-size: 0.53rem;padding-left: .5rem;
}.cart {position: absolute;width: 100%;height: 100%;z-index: 999;top: 0;left: 0;background: #f4f4f4;
}.cartheader {position: fixed;width: 100%;box-shadow: 0 0 10px #cecece;height: 1.3rem;line-height: 1.3rem;font-size: 0.35rem;padding-left: 0.3rem;background: white;top: 0;font-size: 0.41rem;
}.cartheader i {display: block;float: left;height: 50px;font-size: 0.71rem;color: black;width: 0.9rem;
}.cartList {width: 100%;height: 4rem;background: white;margin-top: 0.04rem;
}.cartMain {margin-top: 1.3rem;margin-bottom: 1.24rem;
}.cartMain ul li {list-style: none;
}.cartImage img {width: 2.6rem;height: 2.8rem;
}.cartImage {float: left;padding: 0.5rem 0.3rem;
}.cartInformation {width: 7.7rem;font-size: 0.35rem;padding-left: 0.3rem;padding-top: 0.6rem;
}.cartPrice {color: red;margin-top: 0.2rem;font-size: 0.4rem;
}.cartNumber {float: left;margin-top: 0.3rem;
}.cartNumber .add,
.cartNumber .reduce {display: block;width: 0.75rem;height: 0.75rem;line-height: 0.75rem;border: 1px solid #dedede;float: left;color: #b2b2b2;text-align: center;font-size: 0.5rem;
}.cartNumber input {width: 0.96rem;height: 0.76rem;float: left;text-align: center;border: 1px solid #dedede;
}.cartNumber .add {border-right: none;
}.cartNumber .reduce {border-left: none;
}.cartFooter {position: fixed;width: 100%;height: 1.18rem;font-size: 0.35rem;background: white;bottom: 0;display: block;border-top: 1px solid #f4f4f4;
}.cartImg img {width: 4.4rem;height: 5.2rem;display: block;margin: auto;padding-top: 1.5rem;
}.cartImg a {display: block;text-align: center;margin: 0.8rem auto;width: 110px;height: 37px;line-height: 37px;border-radius: 4px;text-align: center;background: #e0524b;color: white;font-weight: 800;font-size: 0.5rem;
}.cartName {width: 9.3rem;font-size: 0.36rem;
}.cartName a {color: black;font-size: 0.57rem;float: right;
}.cartImg h1 {margin-top: 0.5rem;text-align: center;color: #959595;font-size: 0.6rem;
}._box {width: 63%;height: 100%;float: left;
}.Total {float: left;width: 35%;text-align: center;line-height: 1.18rem;font-size: 0.35rem;
}.Settlement {width: 34%;height: 80%;background: #f81200;float: right;margin-top: .1rem;border-radius: 40px;margin-right: 0.3rem;
}.Settlementtwo {width: 50%;height: 100%;background: #e3211e;float: right;
}.Settlement a,
.Settlementtwo a {color: white;text-align: center;line-height: .98rem;display: block;font-size: 0.35rem;
}
/style六、完整源码下载
点击【下载链接】 七、更多
文章推荐【修改文件修改日期为最新】 文章推荐【Vue项目运行步骤(详细图解)】
文章推荐【Web网页设计作业成品源码分享(持续更新)】
关注我获取更多源码~
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业各种设计应有尽有持续更新中..
如果我的文章对您有帮助请“点赞”“✍️评论”“收藏” 一键三连哦
