一.前言

项目演示地址：可私聊作者获取（演示地址不定时变化）

接上一遍博客：《衣服、商品、商城网站模板首页，仿U袋网，vue+elementui简洁实现》

注意：

上一遍博客里面的源码下载并不是当前博客介绍的最新源码，由于其他原因，当前最新demo源码并没有提供下载，需要最新源码或需要增加其他页面的，私聊作者即可（会及时回复）或通过博客后面微信名片添加作者。

在此基础上增加了和完善一些页面：

商品分类筛选页面
登录、注册、找回密码共用页面
U袋学堂（视频专区，视频播放）
企业账号（企业简述页面，简单例子）
诚信合约（简单例子）
实时下架（简单例子）

二.主页面，分离了菜单（达到共用）

分离在top（顶部共用）：

<template><div style="font-size: 14px;"><div style="display: flex;height: 40px;padding: 0 400px;background-color: #f5f5f5;"><div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;">嗨，欢迎来到<span style="color: #b31e22;">XXX</span></div><div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">网店代销</div><div class="top-title" style="padding-right: 20px;line-height: 40px;color: #666;margin-left: 20px;">帮助中心</div><div style="flex: 1;display: flex;"><div style="flex: 1;"></div><div style="width: 300px;display: flex;"><el-button type="text" style="color: #666;" class="top-title" @click="toLogin">登录</el-button><el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="toLogin">注册</el-button><el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">我的U袋</el-button><el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">我的订单</el-button><el-button type="text" style="color: #666;margin-right: 10px;" class="top-title">积分平台</el-button></div></div></div><div style="margin: 0 400px;height: 100px;line-height: 100px;"><div style="display: flex;"><div style="width: 200px;height: 100px;"><img src="../../../public/img/logo.jpg" style="cursor: pointer;width: 200px;height: 100px;"></div><div style="flex: 1;text-align: center;padding: 0 50px;"><el-input placeholder="Ta们都在搜XXX" v-model="input" style="width: 100%;margin-top: 30px;"><el-button slot="append" icon="el-icon-search"></el-button></el-input></div><div style="width: 200px;text-align: center;"><el-button type="warning" icon="el-icon-shopping-cart-2">购物车 0 件</el-button></div></div></div><div style="height: 40px;line-height: 40px;background-color: #333;display: flex;"><div :class="'menu-index '+(menuIndex===1?'menu-active':'')" @click="selMenu(1)" style="margin-left: 400px;color: #FFFFFF;"><div><i class="el-icon-menu" style="margin-right: 10px;"></i>全部分类</div></div><div :class="'menu-index '+(menuIndex===2?'menu-active':'')" @click="selMenu(2)">首页</div><div :class="'menu-index '+(menuIndex===3?'menu-active':'')" @click="selMenu(3)">企业简介</div><div :class="'menu-index '+(menuIndex===4?'menu-active':'')" @click="selMenu(4)">新手上路</div><div :class="'menu-index '+(menuIndex===5?'menu-active':'')" @click="selMenu(5)">U袋学堂</div><div :class="'menu-index '+(menuIndex===6?'menu-active':'')" @click="selMenu(6)">企业账号</div><div :class="'menu-index '+(menuIndex===7?'menu-active':'')" @click="selMenu(7)">诚信合约</div><div :class="'menu-index '+(menuIndex===8?'menu-active':'')" @click="selMenu(8)">实时下架</div></div></div>
</template><script>export default {data() {return {input:'',menuIndex: 1};},mounted() {},methods: {selMenu(index){if(this.menuIndex === index){return;}this.menuIndex = index;if(index === 2){this.$router.push({path: '/home/index'});}else if(index === 5){this.$router.push({path: '/video/index'});}else if(index === 6){this.$router.push({path: '/enterprise/index'});}else if(index === 7){this.$router.push({path: '/contract/index'});}else if(index === 8){this.$router.push({path: '/shelf/index'});}},toLogin(){this.$router.push({path: '/login'});}}};
</script><style>.top-title:hover{cursor: pointer;color: #b31e22!important;}.el-input-group__append, .el-input-group__prepend{background-color: #b31e22!important;color: #ffffff!important;}.menu-index{text-align: center;width: 100px;color: #FFFFFF;cursor: pointer;}.menu-index:hover{background-color: #666;}.menu-active{background-color: #b31e22!important;}
</style>

主布局：

<template><div id="body" style="width: 100%;height: 100%;overflow: auto;"><top></top><router-view></router-view><foot></foot></div>
</template><script>import top from "../top/index.vue";import foot from "../foot/index";export default {components: {top,foot},name: "index",data() {return {};},mounted() {},methods: {}};
</script><style>#body{background-size: 100% 100%;background-repeat: no-repeat;}
</style>

三.商品分类筛选页面

模拟动态数据：

export default {name: "index",data() {return {tags: [{ name: '颜色：灰色', type: 'info' },{ name: '尺寸：XXXL', type: 'info' }],types1: ['全部','上装','下装','裙装','内衣'],typeIndex1: 0,types2: ['全部','红色','粉红','蓝色','白色'],typeIndex2: 0,types3: ['全部','L','M','S','X','XL','XXL','XXXL'],typeIndex3: 0,types4: ['全部','0-20','20-40','40-80','80-100','100-150','150以上'],typeIndex4: 0,types5: ['销量↑','评价↓','价格'],typeIndex5: 0,startPrice:'',endPrice: '',products: [{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},{productName:'锦瑟 原创传统日常汉服男绣花交领衣裳cp情侣装春夏款',price: 18.0,saleNum: 666,hot: 888,commentNum: 1666,img:'http://shop.jlkjgf.cn/images/temp/M-001.jpg'},]};},mounted() {},methods: {handleClose(tag) {this.tags.splice(this.tags.indexOf(tag), 1);},selType1(index){this.typeIndex1 = index;},selType2(index){this.typeIndex2 = index;},selType3(index){this.typeIndex3 = index;},selType4(index){this.typeIndex4 = index;},selType5(index){this.typeIndex5 = index;}}}

四.U袋学堂-视频专区

视频数据，视频播放方法：

export default {name: "index",data() {return {videos: [{title: 'U袋学堂第一课',des:'免费学习',img: 'http://shop.jlkjgf.cn/images/temp/S-001-1_s.jpg',videoPath:'http://shop.jlkjgf.cn/images/temp/videos/video_1.mp4'},{title: 'U袋学堂第一课',des:'免费学习',img: 'http://shop.jlkjgf.cn/images/temp/S-001-1_s.jpg',videoPath:'http://shop.jlkjgf.cn/images/temp/videos/video_1.mp4'},{title: 'U袋学堂第一课',des:'免费学习',img: 'http://shop.jlkjgf.cn/images/temp/S-001-1_s.jpg',videoPath:'http://shop.jlkjgf.cn/images/temp/videos/video_1.mp4'},{title: 'U袋学堂第一课',des:'免费学习',img: 'http://shop.jlkjgf.cn/images/temp/S-001-1_s.jpg',videoPath:'http://shop.jlkjgf.cn/images/temp/videos/video_1.mp4'},{title: 'U袋学堂第一课',des:'免费学习',img: 'http://shop.jlkjgf.cn/images/temp/S-001-1_s.jpg',videoPath:'http://shop.jlkjgf.cn/images/temp/videos/video_1.mp4'},{title: 'U袋学堂第一课',des:'免费学习',img: 'http://shop.jlkjgf.cn/images/temp/S-001-1_s.jpg',videoPath:'http://shop.jlkjgf.cn/images/temp/videos/video_1.mp4'},{title: 'U袋学堂第一课',des:'免费学习',img: 'http://shop.jlkjgf.cn/images/temp/S-001-1_s.jpg',videoPath:'http://shop.jlkjgf.cn/images/temp/videos/video_1.mp4'},{title: 'U袋学堂第一课',des:'免费学习',img: 'http://shop.jlkjgf.cn/images/temp/S-001-1_s.jpg',videoPath:'http://shop.jlkjgf.cn/images/temp/videos/video_1.mp4'},],playBox: false,video: null,isPlay: 0,//默认0未自动播放  1播放  2暂停eleVideo: null,autoPlay: false,//自动播放};},mounted() {},methods: {autoPlayFun(){this.autoPlay = !this.autoPlay;},playModal(item){this.video = item;this.playBox = true;if(!this.eleVideo){let that = this;setTimeout(function(){that.eleVideo = that.$refs.player;that.eleVideo.addEventListener('waiting', function () { //加载console.log("加载中");});that.eleVideo.addEventListener('play', function () { //播放开始执行的函数console.log("开始播放");that.isPlay = 1;console.log(that.isPlay);});that.eleVideo.addEventListener('playing', function () { //播放中console.log("播放中");that.isPlay = 1;console.log(that.isPlay);});that.eleVideo.addEventListener('pause', function () { //暂停开始执行的函数console.log("暂停播放");that.isPlay = 2;console.log(that.isPlay);});if(that.autoPlay){that.playFun();//加载马上自动播放，有些浏览器已经不支持自动播放，可以先设置浏览器允许自动播放}},300);}else if(this.autoPlay){this.playFun();//加载马上自动播放，有些浏览器已经不支持自动播放，可以先设置浏览器允许自动播放}},playFun() {if (!this.$refs.player) {alert('播放资源不存在!');return;}if (this.isPlay === 1) { //暂停this.isPlay = 2;this.$refs.player.pause();} else if (this.isPlay === 0 || this.isPlay === 2) { //播放this.$refs.player.play();}},beforeClose(){this.isPlay = 2;this.$refs.player.pause();this.playBox = false;}}}

五.登录、注册、找回密码

<div style="display: flex;width: 100%;height: 100%;overflow: hidden;"><div class="name"><span @click="homePage" style="cursor: pointer;">欢迎使用U袋网平台</span></div><div class="login-modal"><div class="title">{{modalType === 'login'?'登录':(modalType==='forget'?'找回密码':'注册')}}</div><el-form class="login-form":rules="loginRules"ref="loginForm":model="loginForm"label-width="0"><el-form-item prop="phone"><el-inputplaceholder="请输入手机号"prefix-icon="el-icon-mobile-phone"v-model="loginForm.phone"></el-input></el-form-item><el-form-item v-show="modalType !== 'login'" prop="validCode"><el-input placeholder="请输入验证码" v-model="loginForm.validCode"><el-button slot="append" @click="handleLogin">发送短信验证码</el-button></el-input></el-form-item><el-form-item prop="password"><el-input:type="passwordType"placeholder="请输入密码"prefix-icon="el-icon-lock"v-model="loginForm.password"></el-input></el-form-item><el-form-item><el-row><el-col :span="12"><el-checkbox v-model="loginForm.rememberPwd">30天内免登录</el-checkbox></el-col><el-col :span="12" v-if="modalType !== 'forget'"><div style="color: #df1f20;float: right;cursor: pointer;" @click="changeModalType('forget')">忘记密码?</div></el-col></el-row></el-form-item><el-form-item><el-button type="primary"style="width: 100%;"@click.native.prevent="handleLogin"class="login-submit">{{modalType === 'login'?'登录':(modalType==='forget'?'重置密码':'注册')}}</el-button></el-form-item><div v-if="modalType === 'login'" style="text-align: center;font-size: 14px;">没有账号？<span style="cursor: pointer;color: #df1f20;" @click="changeModalType('register')">免费注册</span></div><div v-if="modalType !== 'login'" style="text-align: center;font-size: 14px;">已有账号？<span style="cursor: pointer;color: #df1f20;" @click="changeModalType('login')">返回登录</span></div></el-form></div></div>

六.其他简单页面

衣服、商品、商城网站模板首页，仿U袋网，vue+elementui简洁实现（二）相关推荐

衣服、商品、商城网站模板首页，仿U袋网，vue+elementui简洁实现
1.本案例灵感来源于网络项目演示地址:可私聊作者获取(演示地址不定时变化) 仿照来源:网络案例以下源码是第一版源码,最新源码请私聊作者获取,或通过博客后面微信名片添加作者源码https://do ...
仿京东商城html5模版,html5仿京东手机WAP商城网站模板
[实例简介] html5仿京东手机商城网站模板_wap京东手机购物网站模板下载 [实例截图] [核心代码] 9fc4db22-b015-4b00-8188-53007c5acbf6 ├── cart ...
【web素材】07—仿京东，小米，锤子，华为等20+套商城网站模板
素材整理 | 杨小爱在之前,我跟大家分享过很多web素材的学习资源,我做这个栏目的目的,就是希望我们可以通过看别人的项目代码,然后去比较自己的代码,这些素材资源,也是我自己在做项目的时候,收集整理积 ...
div+css静态网页设计电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板文章目录 HTML5期末大作业:电商购物网站设计- ...
HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板常见网页设计作业题材有个人. 美食. 公司. 学 ...
网页成品——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML5期末大作业：手表商城网站设计——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
ecshop红色风格婚纱摄影婚庆公司商城网站模板 GBK+UTF8版本网盘下载
ecshop红色风格婚纱摄影婚庆公司商城网站模板 GBK+UTF8版本文件:590m.com/f/25127180-486122316-56ab8c (访问密码:551685) 以下内容无关: -- ...
仿蘑菇街，京东，苏宁易购，海尔商城等33套大气购物商城网站模板，附源码免费下载地址...
来源 | web前端开发在很早之前,跟大家分享过很多有关于网站模板的素材资源,有企业网站,也有购物商城,还有后台管理模板,以及大数据页面模板等等. 今天我们再跟大家分享32套商城网站源码,有的是比较 ...

衣服、商品、商城网站模板首页，仿U袋网，vue+elementui简洁实现（二）