pages文件夹
AddCartSuccess
<template>
<div class="cart-complete-wrap">
<div class="cart-complete">
<h3><i class="sui-icon icon-pc-right"></i>商品已成功加入购物车！</h3>
<div class="goods">
<div class="left-good">
<div class="left-pic">
<img :src="skuInfo.skuDefaultImg">
</div>
<div class="right-info">
<p class="title">{{skuInfo.skuName}}</p>
<p class="attr">{{skuInfo.skuDesc}} 数量：{{$route.query.skuNum}}</p>
</div>
</div>
<div class="right-gocart">
<router-link class="sui-btn btn-xlarge" :to="`/detail/${skuInfo.id}`">查看商品详情</router-link>
<router-link to="/shopcart">去购物车结算</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AddCartSuccess',
computed:{
skuInfo(){
return JSON.parse(sessionStorage.getItem("SKUINFO"));
}
}
}
</script>
<style lang="less" scoped>
.cart-complete-wrap {
background-color: #f4f4f4;
.cart-complete {
width: 1200px;
margin: 0 auto;
h3 {
font-weight: 400;
font-size: 16px;
color: #6aaf04;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
.icon-pc-right {
background-color: #fff;
border: 2px solid #6aaf04;
padding: 3px;
margin-right: 8px;
border-radius: 15px;
}
}
.goods {
overflow: hidden;
padding: 10px 0;
.left-good {
float: left;
.left-pic {
border: 1px solid #dfdfdf;
width: 60px;
float: left;
img {
width: 60px;
height: 60px;
}
}
.right-info {
color: #444;
float: left;
margin-left: 10px;
.title {
width: 100%;
line-height: 28px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.attr {
color: #aaa;
}
}
}
.right-gocart {
float: right;
a {
padding: 7px 36px;
font-size: 15px;
line-height: 22px;
color: #333;
background-color: #eee;
text-decoration: none;
box-sizing: border-box;
border: 1px solid #e1e1e1;
}
a:hover {
background-color: #f7f7f7;
border: 1px solid #eaeaea;
}
a:active {
background-color: #e1e1e1;
border: 1px solid #d5d5d5;
}
.btn-danger {
background-color: #e1251b;
color: #fff;
}
.btn-danger:hover {
background-color: #e1251b;
}
}
}
}
}
</style>
Center
index.vue
<template>
<div class="order-main">
<div class="container">
<div class="order-body">
<!--左侧列表-->
<div class="order-left">
<dl>
<dt><i>·</i> 订单中心</dt>
<dd>
<router-link to="/center/myorder">我的订单</router-link>
</dd>
<dd>
<router-link to="/center/grouporder">团购订单</router-link>
</dd>
<dd>本地生活订单 </dd>
<dd>我的预售</dd>
<dd>评价晒单</dd>
<dd>取消订单记录</dd>
</dl>
<dl>
<dt><i>·</i> 关注中心</dt>
<dd>关注的商品 </dd>
<dd>关注的店铺</dd>
<dd>关注的专辑 </dd>
<dd>关注的品牌</dd>
<dd>关注的活动 </dd>
<dd>浏览历史</dd>
</dl>
<dl>
<dt><i>·</i> 特色业务</dt>
<dd>我的营业厅 </dd>
<dd>京东通信 </dd>
<dd>定期送 </dd>
<dd>京东代下单</dd>
<dd>我的回收单 </dd>
<dd>节能补贴</dd>
<dd>医药服务 </dd>
<dd>流量加油站 </dd>
<dd>黄金托管</dd>
</dl>
<dl>
<dt><i>·</i> 客户服务</dt>
<dd>返修退换货 </dd>
<dd>价格保护 </dd>
<dd>意见建议 </dd>
<dd>购买咨询 </dd>
<dd>交易纠纷 </dd>
<dd>我的发票</dd>
</dl>
<dl>
<dt><i>·</i> 设置</dt>
<dd>个人信息 </dd>
<dd>收货地址 </dd>
</dl>
</div>
<!-- 右侧内容 路由组件出口的位置-->
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Center',
}
</script>
<style lang="less" scoped>
.order-main {
.container {
margin: 0 auto;
width: 1200px;
.order-body {
padding: 10px;
color: #333;
&:after {
content: "";
display: block;
clear: both;
}
.order-left {
float: left;
width: 16.67%;
dl {
line-height: 28px;
dt {
font-weight: 700;
padding: 5px;
i {
color: #77b72c;
}
}
dd {
margin: 0 0 6px;
border-bottom: 1px solid #ededed;
text-align: center;
}
}
}
}
}
}
</style>
myOrder
<template>
<div class="order-right">
<div class="order-content">
<div class="title">
<h3>我的订单</h3>
</div>
<div class="chosetype">
<table>
<thead>
<tr>
<th width="29%">商品</th>
<th width="31%">订单详情</th>
<th width="13%">收货人</th>
<th>金额</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
<div class="orders">
<table
class="order-item"
v-for="(record, index) in myOrder.records"
:key="record.id"
>
<thead>
<tr>
<th colspan="5">
<span class="ordertitle"
>{{ record.createTime }} 订单编号:{{ record.outTradeNo }}
<span class="pull-right delete"
><img src="../images/delete.png" /></span
></span>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(orderDetail, index) in record.orderDetailList"
:key="orderDetail.id"
>
<td width="60%">
<div class="typographic">
<img
:src="orderDetail.imgUrl"
style="width: 100px; height: 100px"
/>
<a href="#" class="block-text">{{ orderDetail.skuName }}</a>
<span>x{{ orderDetail.skuNum }}</span>
<a href="#" class="service">售后申请</a>
</div>
</td>
<td
:rowspan="record.orderDetailList.length"
v-if="index == 0"
width="8%"
class="center"
>
{{ record.consignee }}
</td>
<td
:rowspan="record.orderDetailList.length"
v-if="index == 0"
width="13%"
class="center"
>
<ul class="unstyled">
<li>总金额¥{{ orderDetail.totalAmount }}.00</li>
<li>在线支付</li>
</ul>
</td>
<td
:rowspan="record.orderDetailList.length"
v-if="index == 0"
width="8%"
class="center"
>
<a href="#" class="btn">已完成 </a>
</td>
<td
:rowspan="record.orderDetailList.length"
v-if="index == 0"
width="13%"
class="center"
>
<ul class="unstyled">
<li>
<a href="mycomment.html" target="_blank">评价|晒单</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div class="choose-order">
<!-- 分页器 -->
<Pagination
:pageNo="page"
:pageSize="limit"
:total="myOrder.total"
:continues="5"
@getPageNo="getPageNo"
/>
</div>
</div>
<!--猜你喜欢-->
<div class="like">
<h4 class="kt">猜你喜欢</h4>
<ul class="like-list">
<li class="likeItem">
<div class="p-img">
<img src="../images/itemlike01.png" />
</div>
<div class="attr">
<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
</div>
<div class="price">
<em>¥</em>
<i>3699.00</i>
</div>
<div class="commit">已有6人评价</div>
</li>
<li class="likeItem">
<div class="p-img">
<img src="../images/itemlike02.png" />
</div>
<div class="attr">Apple苹果iPhone 6s/6s Plus 16G 64G 128G</div>
<div class="price">
<em>¥</em>
<i>4388.00</i>
</div>
<div class="commit">已有700人评价</div>
</li>
<li class="likeItem">
<div class="p-img">
<img src="../images/itemlike03.png" />
</div>
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
<div class="price">
<em>¥</em>
<i>4088.00</i>
</div>
<div class="commit">已有700人评价</div>
</li>
<li class="likeItem">
<div class="p-img">
<img src="../images/itemlike04.png" />
</div>
<div class="attr">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</div>
<div class="price">
<em>¥</em>
<i>4088.00</i>
</div>
<div class="commit">已有700人评价</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "myOrder",
data() {
return {
page: 1,
limit: 3,
myOrder: {},
};
},
mounted() {
this.getData();
},
methods: {
async getData() {
let res = await this.$API.reqMyOrderList(this.page, this.limit);
if (res.code == 200) {
this.myOrder = res.data;
}
},
getPageNo(page){
this.page=page;
this.getData();
}
},
};
</script>
<style lang="less" scoped>
.order-right {
float: right;
width: 83.33%;
.order-content {
margin: 0 20px;
color: #666;
.title {
margin-bottom: 22px;
border: 1px solid #ddd;
h3 {
padding: 12px 10px;
font-size: 15px;
background-color: #f1f1f1;
}
}
.chosetype {
margin-bottom: 15px;
color: #666;
table {
border: 1px solid #e6e6e6;
border-collapse: separate;
border-radius: 2px;
width: 100%;
max-width: 100%;
border-spacing: 0;
th {
padding: 6px 8px;
color: #666;
font-weight: 700;
vertical-align: bottom;
background-color: #f4f4f4;
line-height: 18px;
border-bottom: 1px solid #e6e6e6;
font-size: 12px;
text-align: left;
}
}
}
.orders {
font-size: 12px;
a {
&:hover {
color: #4cb9fc;
}
}
table {
border: 1px solid #e6e6e6;
border-collapse: collapse;
border-radius: 2px;
width: 100%;
margin-bottom: 18px;
max-width: 100%;
th {
padding: 6px 8px;
line-height: 18px;
text-align: left;
vertical-align: bottom;
background-color: #f4f4f4;
font-size: 12px;
color: #666;
.pull-right {
float: right;
cursor: pointer;
img {
margin-right: 10px;
vertical-align: middle;
}
}
}
td {
font-size: 12px;
color: #666;
padding: 6px 8px;
line-height: 18px;
text-align: left;
vertical-align: middle;
border: 1px solid #e6e6e6;
&.center {
text-align: center;
}
.typographic {
img {
float: left;
margin-right: 10px;
}
a {
float: left;
min-width: 80px;
max-width: 250px;
color: #e1251b;
&.service {
color: #666;
}
}
span {
float: left;
min-width: 80px;
max-width: 250px;
text-align: center;
}
}
}
}
}
.choose-order {
.pagination {
margin: 38px 0;
ul {
font-size: 0;
display: inline-block;
li {
display: inline-block;
padding: 4px 9px;
font-size: 14px;
border: 1px solid #e0e9ee;
&.prev,
&.next {
background-color: #fafafa;
}
&.prev {
border-right-color: #28a3ef;
}
&.page {
border-color: #28a3ef;
border-left: 0;
&.actived {
background-color: #28a3ef;
a {
color: #fff;
}
}
}
}
}
div {
display: inline-block;
font-size: 14px;
color: #333;
}
}
}
}
.like {
border: 1px solid #ddd;
margin: 15px 20px;
.kt {
border-bottom: 1px solid #ddd;
background: #f1f1f1;
color: #666;
margin: 0;
padding: 12px;
font-size: 15px;
}
.like-list {
padding: 15px 11px;
overflow: hidden;
.likeItem {
width: 25%;
float: left;
.p-img {
text-align: left;
img {
width: 167px;
height: 123px;
}
}
.attr {
padding: 0 15px;
}
.price {
padding: 0 15px;
font-size: 16px;
color: #c81623;
margin-bottom: 20px;
}
.commit {
padding: 0 15px;
}
}
}
}
}
</style>
groupOrder
<template>
<div>我是团建</div>
</template>
<script>
export default {
name:"groupOrder",
}
</script>
<style>
</style>
Detail
index.vue
<template>
<div class="detail">
<!-- 商品分类导航 -->
<TypeNav />
<!-- 主要内容区域 -->
<section class="con">
<!-- 导航路径区域 -->
<div class="conPoin">
<span v-show="categoryView.category1Name">{{
categoryView.category1Name
}}</span>
<span v-show="categoryView.category2Name">{{
categoryView.category2Name
}}</span>
<span v-show="categoryView.category3Name">{{
categoryView.category3Name
}}</span>
</div>
<!-- 主要内容区域 -->
<div class="mainCon">
<!-- 左侧放大镜区域 -->
<div class="previewWrap">
<!--放大镜效果-->
<!-- 注意，这个skuImageList传的是一个计算属性 -->
<Zoom :skuImageList="skuImageList" />
<!-- 小图列表 -->
<ImageList :skuImageList="skuImageList" />
</div>
<!-- 右侧选择区域布局 -->
<div class="InfoWrap">
<div class="goodsDetail">
<h3 class="InfoName">{{ skuInfo.skuName }}</h3>
<p class="news">{{ skuInfo.skuDesc }}</p>
<div class="priceArea">
<div class="priceArea1">
<div class="title">
价 格
</div>
<div class="price">
<i>¥</i>
<em>{{ skuInfo.price }}</em>
<span>降价通知</span>
</div>
<div class="remark">
<i>累计评价</i>
<em>65545</em>
</div>
</div>
<div class="priceArea2">
<div class="title">
<i>促 销</i>
</div>
<div class="fixWidth">
<i class="red-bg">加价购</i>
<em class="t-gray"
>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em
>
</div>
</div>
</div>
<div class="support">
<div class="supportArea">
<div class="title">
支 持
</div>
<div class="fixWidth">
以旧换新，闲置手机回收 4G套餐超值抢 礼品购
</div>
</div>
<div class="supportArea">
<div class="title">配 送 至</div>
<div class="fixWidth">广东省 深圳市 宝安区</div>
</div>
</div>
</div>
<div class="choose">
<div class="chooseArea">
<div class="choosed"></div>
<dl v-for="(attrs, index) in spuSaleAttrList" :key="attrs.id">
<dt class="title">{{ attrs.saleAttrName }}</dt>
<dd
changepirce="0"
:class="{ active: attr.isChecked == 1 }"
v-for="(attr, index) in attrs.spuSaleAttrValueList"
:key="attr.id"
@click="changeActive(attr, attrs.spuSaleAttrValueList)"
>
{{ attr.saleAttrValueName }}
</dd>
</dl>
</div>
<div class="cartWrap">
<div class="controls">
<input
autocomplete="off"
class="itxt"
v-model="skuNum"
@change="changeSkuNum"
/>
<a href="javascript:" class="plus" @click="skuNum++">+</a>
<a
href="javascript:"
class="mins"
@click="skuNum > 1 ? skuNum-- : (skuNum = 1)"
>-</a
>
</div>
<div class="add">
<!-- 以前的路由跳转，从a路由跳转到b路由，这里再加入购物车，
进行路由跳转之前，发请求把购买的产品信息通过请求的方式通知服务器，服务器进行相应的存储 -->
<a @click="addorUpdate">加入购物车</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 内容详情页 -->
<section class="product-detail">
<aside class="aside">
<div class="tabWraped">
<h4 class="active">相关分类</h4>
<h4>推荐品牌</h4>
</div>
<div class="tabContent">
<div class="tab-pane active">
<ul class="partList">
<li>手机</li>
<li>手机壳</li>
<li>内存卡</li>
<li>Iphone配件</li>
<li>贴膜</li>
<li>手机耳机</li>
<li>移动电源</li>
<li>平板电脑</li>
</ul>
<ul class="goodsList">
<li>
<div class="list-wrap">
<div class="p-img">
<img src="./images/part01.png" />
</div>
<div class="attr">Apple苹果iPhone 6s (A1699)</div>
<div class="price">
<em>¥</em>
<i>6088.00</i>
</div>
<div class="operate">
<a href="javascript:void(0);" >加入购物车</a>
</div>
</div>
</li>
<li>
<div class="list-wrap">
<div class="p-img">
<img src="./images/part02.png" />
</div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>6088.00</i>
</strong>
</div>
<div class="operate">
<a href="javascript:void(0);">加入购物车</a>
</div>
</div>
</li>
<li>
<div class="list-wrap">
<div class="p-img">
<img src="./images/part03.png" />
</div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>6088.00</i>
</strong>
</div>
<div class="operate">
<a href="javascript:void(0);">加入购物车</a>
</div>
</div>
</li>
<li>
<div class="list-wrap">
<div class="p-img">
<img src="./images/part02.png" />
</div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>6088.00</i>
</strong>
</div>
<div class="operate">
<a href="javascript:void(0);">加入购物车</a>
</div>
</div>
</li>
<li>
<div class="list-wrap">
<div class="p-img">
<img src="./images/part03.png" />
</div>
<div class="attr">
<em>Apple苹果iPhone 6s (A1699)</em>
</div>
<div class="price">
<strong>
<em>¥</em>
<i>6088.00</i>
</strong>
</div>
<div class="operate">
<a href="javascript:void(0);">加入购物车</a>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane">
<p>推荐品牌</p>
</div>
</div>
</aside>
<div class="detail">
<div class="fitting">
<h4 class="kt">选择搭配</h4>
<div class="good-suits">
<div class="master">
<img src="./images/l-m01.png" />
<p>￥5299</p>
<i>+</i>
</div>
<ul class="suits">
<li class="suitsItem">
<img src="./images/dp01.png" />
<p>Feless费勒斯VR</p>
<label>
<input type="checkbox" value="39" />
<span>39</span>
</label>
</li>
<li class="suitsItem">
<img src="./images/dp02.png" />
<p>Feless费勒斯VR</p>
<label>
<input type="checkbox" value="50" />
<span>50</span>
</label>
</li>
<li class="suitsItem">
<img src="./images/dp03.png" />
<p>Feless费勒斯VR</p>
<label>
<input type="checkbox" value="59" />
<span>59</span>
</label>
</li>
<li class="suitsItem">
<img src="./images/dp04.png" />
<p>Feless费勒斯VR</p>
<label>
<input type="checkbox" value="99" />
<span>99</span>
</label>
</li>
</ul>
<div class="result">
<div class="num">已选购0件商品</div>
<div class="price-tit">套餐价</div>
<div class="price">￥5299</div>
<button class="addshopcar">加入购物车</button>
</div>
</div>
</div>
<div class="intro">
<ul class="tab-wraped">
<li class="active">
<a href="###"> 商品介绍 </a>
</li>
<li>
<a href="###"> 规格与包装 </a>
</li>
<li>
<a href="###"> 售后保障 </a>
</li>
<li>
<a href="###"> 商品评价 </a>
</li>
<li>
<a href="###"> 手机社区 </a>
</li>
</ul>
<div class="tab-content">
<div id="one" class="tab-pane active">
<ul class="goods-intro">
<li>分辨率：1920*1080(FHD)</li>
<li>后置摄像头：1200万像素</li>
<li>前置摄像头：500万像素</li>
<li>核 数：其他</li>
<li>频 率：以官网信息为准</li>
<li>品牌： Apple</li>
<li>商品名称：APPLEiPhone 6s Plus</li>
<li>商品编号：1861098</li>
<li>商品毛重：0.51kg</li>
<li>商品产地：中国大陆</li>
<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
<li>系统：苹果（IOS）</li>
<li>像素：1000-1600万</li>
<li>机身内存：64GB</li>
</ul>
<div class="intro-detail">
<img src="./images/intro01.png" />
<img src="./images/intro02.png" />
<img src="./images/intro03.png" />
</div>
</div>
<div id="two" class="tab-pane">
<p>规格与包装</p>
</div>
<div id="three" class="tab-pane">
<p>售后保障</p>
</div>
<div id="four" class="tab-pane">
<p>商品评价</p>
</div>
<div id="five" class="tab-pane">
<p>手机社区</p>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import ImageList from "./ImageList/ImageList.vue";
import Zoom from "./Zoom/Zoom";
export default {
name: "Detail",
data() {
return {
skuNum: 1,
};
},
components: {
ImageList,
Zoom,
},
mounted() {
this.$store.dispatch("GoodInfo", this.$route.params.id);
},
computed: {
...mapGetters(["categoryView", "skuInfo", "spuSaleAttrList"]),
skuImageList() {
return this.skuInfo.skuImageList || [];
},
},
methods: {
changeActive(attr, attrs) {
attrs.forEach((item) => {
item.isChecked = 0;
});
attr.isChecked = 1;
},
changeSkuNum(event) {
let value = event.target.value * 1;
if (isNaN(value) || value < 0) {
this.skuNum = 1;
} else {
this.skuNum = parseInt(value);
}
},
async addorUpdate() {
try {
let result=await this.$store.dispatch("addorUpdateShopCart", {
skuId: this.$route.params.id,
skuNum: this.skuNum,
});
this.$router.push({name:'addcartsuccess',query:{skuNum:this.skuNum}});
sessionStorage.setItem("SKUINFO",JSON.stringify(this.skuInfo))
} catch (error) {
alert(error.message);
}
},
},
};
</script>
<style lang="less" scoped>
.detail {
.con {
width: 1200px;
margin: 15px auto 0;
.conPoin {
padding: 9px 15px 9px 0;
& > span + span:before {
content: "/\00a0";
padding: 0 5px;
color: #ccc;
}
}
.mainCon {
overflow: hidden;
margin: 5px 0 15px;
.previewWrap {
float: left;
width: 400px;
position: relative;
}
.InfoWrap {
width: 700px;
float: right;
.InfoName {
font-size: 14px;
line-height: 21px;
margin-top: 15px;
}
.news {
color: #e12228;
margin-top: 15px;
}
.priceArea {
background: #fee9eb;
padding: 7px;
margin: 13px 0;
.priceArea1 {
overflow: hidden;
line-height: 28px;
margin-top: 10px;
.title {
float: left;
margin-right: 15px;
}
.price {
float: left;
color: #c81623;
i {
font-size: 16px;
}
em {
font-size: 24px;
font-weight: 700;
}
span {
font-size: 12px;
}
}
.remark {
float: right;
}
}
.priceArea2 {
overflow: hidden;
line-height: 28px;
margin-top: 10px;
.title {
margin-right: 15px;
float: left;
}
.fixWidth {
width: 520px;
float: left;
.red-bg {
background: #c81623;
color: #fff;
padding: 3px;
}
.t-gray {
color: #999;
}
}
}
}
.support {
border-bottom: 1px solid #ededed;
padding-bottom: 5px;
.supportArea {
overflow: hidden;
line-height: 28px;
margin-top: 10px;
.title {
margin-right: 15px;
float: left;
}
.fixWidth {
width: 520px;
float: left;
color: #999;
}
}
}
.choose {
.chooseArea {
overflow: hidden;
line-height: 28px;
margin-top: 10px;
dl {
overflow: hidden;
margin: 13px 0;
dt {
margin-right: 15px;
float: left;
}
dd {
float: left;
margin-right: 5px;
color: #666;
line-height: 24px;
padding: 2px 14px;
border-top: 1px solid #eee;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #eee;
&.active {
color: green;
border: 1px solid green;
}
}
}
}
.cartWrap {
.controls {
width: 48px;
position: relative;
float: left;
margin-right: 15px;
.itxt {
width: 38px;
height: 37px;
border: 1px solid #ddd;
color: #555;
float: left;
border-right: 0;
text-align: center;
}
.plus,
.mins {
width: 15px;
text-align: center;
height: 17px;
line-height: 17px;
background: #f1f1f1;
color: #666;
position: absolute;
right: -8px;
border: 1px solid #ccc;
}
.mins {
right: -8px;
top: 19px;
border-top: 0;
}
.plus {
right: -8px;
}
}
.add {
float: left;
a {
background-color: #e1251b;
padding: 0 25px;
font-size: 16px;
color: #fff;
height: 36px;
line-height: 36px;
display: block;
}
}
}
}
}
}
}
.product-detail {
width: 1200px;
margin: 30px auto 0;
overflow: hidden;
.aside {
width: 210px;
float: left;
border: 1px solid #ccc;
.tabWraped {
height: 40px;
h4 {
border-top: 3px solid #fff;
float: left;
line-height: 37px;
width: 105px;
text-align: center;
border-bottom: 1px solid #ccc;
&.active {
border-top: 3px solid #e1251b;
border-bottom: 0;
font-weight: normal;
}
}
}
.tabContent {
padding: 10px;
.tab-pane {
display: none;
&.active {
display: block;
}
&:nth-child(1) {
.partList {
overflow: hidden;
li {
width: 50%;
float: left;
border-bottom: 1px dashed #ededed;
line-height: 28px;
}
}
.goodsList {
& > li {
margin: 5px 0 15px;
border-bottom: 1px solid #ededed;
padding-bottom: 5px;
.list-wrap {
.p-img {
text-align: center;
img {
width: 152px;
}
}
.price {
font-size: 16px;
color: #c81623;
}
.operate {
text-align: center;
margin: 5px 0;
a {
background-color: transparent;
border: 1px solid #8c8c8c;
color: #8c8c8c;
display: inline-block;
padding: 2px 14px;
line-height: 18px;
}
}
}
}
}
}
}
}
}
.detail {
width: 980px;
float: right;
.fitting {
border: 1px solid #ddd;
margin-bottom: 15px;
.kt {
border-bottom: 1px solid #ddd;
background: #f1f1f1;
color: #333;
padding: 5px 0 5px 15px;
}
.good-suits {
height: 170px;
padding-top: 10px;
.master {
width: 127px;
height: 165px;
text-align: center;
position: relative;
float: left;
img {
width: 87px;
}
p {
color: #c81623;
font-size: 16px;
font-weight: 700;
}
i {
position: absolute;
top: 48px;
right: -25px;
font-size: 16px;
}
}
.suits {
width: 668px;
height: 165px;
float: left;
.suitsItem {
float: left;
width: 127px;
padding: 0 20px;
text-align: center;
img {
width: 120px;
height: 130px;
}
p {
font-size: 12px;
}
label {
display: block;
position: relative;
input {
vertical-align: middle;
}
span {
vertical-align: middle;
}
}
}
}
.result {
border-left: 1px solid #ddd;
width: 153px;
height: 165px;
padding-left: 20px;
float: left;
.num {
font-size: 14px;
margin-bottom: 10px;
margin-top: 10px;
}
.price-tit {
font-weight: bold;
margin-bottom: 10px;
}
.price {
color: #b1191a;
font-size: 16px;
margin-bottom: 10px;
}
.addshopcar {
background-color: #e1251b;
border: 1px solid #e1251b;
padding: 10px 25px;
font-size: 16px;
color: #fff;
display: inline-block;
box-sizing: border-box;
}
}
}
}
.intro {
.tab-wraped {
background: #ededed;
overflow: hidden;
li {
float: left;
& + li > a {
border-left: 1px solid #ddd;
}
&.active {
a {
background: #e1251b;
color: #fff;
}
}
a {
display: block;
height: 40px;
line-height: 40px;
padding: 0 11px;
text-align: center;
color: #666;
background: #fcfcfc;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
}
}
.tab-content {
.tab-pane {
display: none;
&.active {
display: block;
}
&:nth-child(1) {
.goods-intro {
padding-left: 10px;
li {
margin: 10px 0;
}
}
.intro-detail {
img {
width: 100%;
}
}
}
}
}
}
}
}
}
</style>
Zoom
<template>
<div class="spec-preview">
<img :src="imgObj.imgUrl" />
<div class="event" @mousemove="handler"></div>
<div class="big">
<img :src="imgObj.imgUrl" ref="bigImg" />
</div>
<!-- 绿色的遮罩层 -->
<div class="mask" ref="mask"></div>
</div>
</template>
<script>
export default {
name: "Zoom",
data() {
return {
currentIndex: 0,
};
},
props: ["skuImageList"],
mounted() {
this.$bus.$on("getIndex", (index) => {
this.currentIndex = index;
});
},
computed: {
imgObj() {
return this.skuImageList[this.currentIndex] || {};
},
},
methods: {
handler(event) {
let mask = this.$refs.mask;
let left = event.offsetX - mask.offsetWidth / 2;
let top = event.offsetY - mask.offsetHeight / 2;
if (left < 0) left = 0;
if (left > mask.offsetWidth) left = mask.offsetWidth;
if (top < 0) top = 0;
if (top > mask.offsetHeight) top = mask.offsetHeight;
mask.style.left = left + "px";
mask.style.top = top + "px";
let big = this.$refs.bigImg;
big.style.left = -2 * left + "px";
big.style.top = -2 * top + "px";
},
},
};
</script>
<style lang="less">
.spec-preview {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #ccc;
img {
width: 100%;
height: 100%;
}
.event {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 998;
}
.mask {
width: 50%;
height: 50%;
background-color: rgba(0, 255, 0, 0.3);
position: absolute;
left: 0;
top: 0;
display: none;
}
.big {
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: 100%;
border: 1px solid #aaa;
overflow: hidden;
z-index: 998;
display: none;
background: white;
img {
width: 200%;
max-width: 200%;
height: 200%;
position: absolute;
left: 0;
top: 0;
}
}
.event:hover ~ .mask,
.event:hover ~ .big {
display: block;
}
}
</style>
ImageList
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(slide, index) in skuImageList"
:key="slide.id" @click="changeCurrentIndex(index)"
>
<img :src="slide.imgUrl" :class="{active:currentIndex==index}"/>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</template>
<script>
import Swiper from "swiper";
export default {
name: "ImageList",
data(){
return{
currentIndex:0,
}
},
props: ["skuImageList"],
watch: {
skuImageList: {
handler(newValue, oldValue) {
this.$nextTick(() => {
var mySwiper = new Swiper(".swiper-container", {
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView : 3,
slidesPerGroup : 1,
});
});
},
},
},
methods:{
changeCurrentIndex(index){
this.currentIndex=index;
this.$bus.$emit("getIndex",index)
}
}
};
</script>
<style lang="less" scoped>
.swiper-container {
height: 56px;
width: 412px;
box-sizing: border-box;
padding: 0 12px;
.swiper-slide {
width: 56px;
height: 56px;
img {
width: 100%;
height: 100%;
border: 1px solid #ccc;
padding: 2px;
width: 50px;
height: 50px;
display: block;
&.active {
border: 2px solid #f60;
padding: 1px;
}
}
}
.swiper-button-next {
left: auto;
right: 0;
}
.swiper-button-prev {
left: 0;
right: auto;
}
.swiper-button-next,
.swiper-button-prev {
box-sizing: border-box;
width: 12px;
height: 56px;
background: rgb(235, 235, 235);
border: 1px solid rgb(204, 204, 204);
top: 0;
margin-top: 0;
&::after {
font-size: 12px;
}
}
}
</style>
Home
index.vue
<template>
<div>
<!-- 三级联动 全局组件，不需要引入了 -->
<TypeNav></TypeNav>
<ListContainer></ListContainer>
<Recommand></Recommand>
<Rank></Rank>
<Like></Like>
<Floor v-for="(carousel,index) in FloorList" :key="carousel.id" :list="carousel"/>
<Brand></Brand>
</div>
</template>
<script>
import ListContainer from "./ListContainer/index.vue";
import Recommand from "./Recommand/index.vue";
import Rank from "./Rank/index.vue";
import Like from "./Like/index.vue";
import Floor from "./Floor/index.vue";
import Brand from "./Brand/index.vue";
import { mapState } from"vuex";
export default {
name: "",
components: {
ListContainer,
Recommand,
Rank,
Like,
Floor,
Brand,
},
mounted(){
this.$store.dispatch("FloorList");
this.$store.dispatch("getUserInfo");
},
computed:{
...mapState({
FloorList:(state)=>{return state.home.FloorList}
})
},
};
</script>
<style>
</style>
brand
<template>
<!--商标-->
<div class="brand">
<div class="py-container">
<ul class="brand-list">
<li class="brand-item">
<img src="./images/brand_21.png" />
</li>
<li class="brand-item">
<img src="./images/brand_03.png" />
</li>
<li class="brand-item">
<img src="./images/brand_05.png" />
</li>
<li class="brand-item">
<img src="./images/brand_07.png" />
</li>
<li class="brand-item">
<img src="./images/brand_09.png" />
</li>
<li class="brand-item">
<img src="./images/brand_11.png" />
</li>
<li class="brand-item">
<img src="./images/brand_13.png" />
</li>
<li class="brand-item">
<img src="./images/brand_15.png" />
</li>
<li class="brand-item">
<img src="./images/brand_17.png" />
</li>
<li class="brand-item">
<img src="./images/brand_19.png" />
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name:"",
};
</script>
<style lang="less" scoped>
.brand {
margin: 10px 0;
.py-container {
width: 1200px;
margin: 0 auto;
.brand-list {
overflow: hidden;
padding: 15px 0;
background: #f7f7f7;
line-height: 18px;
.brand-item {
width: 120px;
float: left;
height: 37px;
img {
border-left: 1px dotted #ccc;
padding: 0 10px;
}
&:first-child {
img {
border-left: 0;
}
}
}
}
}
}
</style>
Floor
<template>
<!--楼层-->
<div class="floor">
<div class="py-container">
<div class="title clearfix">
<h3 class="fl">{{ list.name }}</h3>
<div class="fr">
<ul class="nav-tabs clearfix">
<li
class="active"
v-for="(name, index) in list.navList"
:key="index"
>
<a href="#tab1" data-toggle="tab">{{ name.text }}</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane">
<div class="floor-1">
<div class="blockgary">
<ul class="jd-list">
<li v-for="(keyword, index) in list.keywords" :key="index">
{{ keyword }}
</li>
</ul>
<img :src="list.imgUrl" />
</div>
<div class="floorBanner">
<!-- 轮播图的位置 -->
<Carousel :list="list.carouselList"/>
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img :src="list.recommendList[0]" />
</div>
<div class="floor-conver-pit">
<img :src="list.recommendList[1]" />
</div>
</div>
<div class="split center">
<img :src="list.bigImg" />
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img :src="list.recommendList[3]" />
</div>
<div class="floor-conver-pit">
<img :src="list.recommendList[4]" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
props:["list"],
};
</script>
<style lang="less" scoped>
.floor {
margin-top: 15px;
.py-container {
width: 1200px;
margin: 0 auto;
.title {
.fl {
float: left;
color: #c81623;
font-size: 20px;
line-height: 30px;
margin: 9px 0;
font-weight: 700;
}
.fr {
float: right;
.nav-tabs {
margin: 10px 0 0;
display: inline-block;
li {
float: left;
line-height: 18px;
a {
padding-top: 1px;
font-weight: 400;
background-color: #fff;
&::after {
content: "|";
padding: 0 10px;
}
}
&:nth-child(7) {
a {
&::after {
content: "";
}
}
}
&.active {
a {
color: #e1251b;
}
}
}
}
}
}
.tab-content {
border-top: 2px solid #c81623;
border-bottom: 1px solid #e4e4e4;
.tab-pane {
.floor-1 {
height: 360px;
display: flex;
.blockgary {
width: 210px;
height: 100%;
background: #f7f7f7;
.jd-list {
padding: 15px 0;
overflow: hidden;
li {
list-style-type: none;
float: left;
width: 40%;
margin: 0 10px;
border-bottom: 1px solid #e4e4e4;
text-align: center;
line-height: 26px;
}
}
img {
width: 100%;
}
}
.floorBanner {
width: 330px;
height: 100%;
}
.split {
width: 220px;
height: 100%;
position: relative;
.floor-x-line {
position: absolute;
background: #e4e4e4;
width: 220px;
height: 1px;
top: 180px;
}
.floor-conver-pit {
width: 100%;
height: 50%;
img {
width: 100%;
height: 100%;
transition: all 400ms;
&:hover {
opacity: 0.8;
}
}
}
}
.center {
border: 1px solid #e4e4e4;
}
}
}
}
}
}
</style>
Like
<template>
<!-- 猜你喜欢 -->
<div class="like">
<div class="py-container">
<div class="title">
<h3 class="fl">猜你喜欢</h3>
<a href="javascript:;" class="fr tip changeBnt">换一换</a>
</div>
<div class="bd">
<ul class="favourate">
<li>
<img src="./images/like_02.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_03.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_01.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_02.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_03.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/like_01.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.like {
margin-top: 15px;
.py-container {
width: 1200px;
margin: 0 auto;
.title {
overflow: hidden;
.fl {
float: left;
font-size: 20px;
line-height: 30px;
}
.fr {
float: right;
background-image: url(./images/icons.png);
width: 66px;
height: 25px;
background-position: 182px -104px;
line-height: 30px;
font-size: 12px;
font-weight: 400;
color: #666;
text-decoration: none;
}
}
.bd {
.favourate {
border: 1px solid #e4e4e4;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
display: flex;
li {
height: 250px;
margin: 0 -1px;
overflow: hidden;
background: #fff;
position: relative;
width: 16.667%;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
img {
width: 142px;
height: 142px;
transition: all 400ms;
&:hover {
opacity: 0.8;
transform: scale(1.1)
}
}
.like-text {
padding: 0;
width: 142px;
border-right: 1px solid #e4e4e4;
p {
margin: 5px 0;
}
h3 {
color: #df3033;
font-size: 20px;
line-height: 30px;
margin: 9px 0;
font-weight: 700;
}
}
}
}
}
}
}
</style>
ListContainer
<template>
<!--列表-->
<div class="list-container">
<div class="sortList clearfix">
<div class="center">
<!--banner轮播-->
<div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(carousel, index) in bannerList" :key="carousel.id">
<img :src="carousel.imgUrl" />
</div>
<!-- <div class="swiper-slide">
<img src="./images/banner2.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/banner3.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/banner4.jpg" />
</div> -->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
<div class="right">
<div class="news">
<h4>
<em class="fl">尚品汇快报</em>
<span class="fr tip">更多 ></span>
</h4>
<div class="clearix"></div>
<ul class="news-list unstyled">
<li><span class="bold">[特惠]</span>备战开学季 全民半价购数码</li>
<li><span class="bold">[公告]</span>备战开学季 全民半价购数码</li>
<li><span class="bold">[特惠]</span>备战开学季 全民半价购数码</li>
<li><span class="bold">[公告]</span>备战开学季 全民半价购数码</li>
<li><span class="bold">[特惠]</span>备战开学季 全民半价购数码</li>
</ul>
</div>
<ul class="lifeservices">
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">话费</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">机票</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">电影票</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">游戏</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">彩票</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">加油站</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">酒店</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">火车票</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">众筹</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">理财</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">礼品卡</span>
</li>
<li class="life-item">
<i class="list-item"></i>
<span class="service-intro">白条</span>
</li>
</ul>
<div class="ads">
<img src="./images/ad1.png" />
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import Swiper from "swiper";
export default {
name: "",
mounted() {
this.$store.dispatch("bannerList");
},
computed: {
...mapState({
bannerList: (state) => state.home.bannerList,
}),
},
watch: {
bannerList: {
handler(newValue, oldValue) {
this.$nextTick(()=>{
var mySwiper = new Swiper(".swiper-container", {
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
scrollbar: {
el: ".swiper-scrollbar",
},
});
})
},
},
},
};
</script>
<style lang="less" scoped>
.list-container {
width: 1200px;
margin: 0 auto;
.sortList {
height: 464px;
padding-left: 210px;
.center {
box-sizing: border-box;
width: 740px;
height: 100%;
padding: 5px;
float: left;
}
.right {
float: left;
width: 250px;
.news {
border: 1px solid #e4e4e4;
margin-top: 5px;
h4 {
border-bottom: 1px solid #e4e4e4;
padding: 5px 10px;
margin: 5px 5px 0;
line-height: 22px;
overflow: hidden;
font-size: 14px;
.fl {
float: left;
}
.fr {
float: right;
font-size: 12px;
font-weight: 400;
}
}
.news-list {
padding: 5px 15px;
line-height: 26px;
.bold {
font-weight: 700;
}
}
}
.lifeservices {
border-right: 1px solid #e4e4e4;
overflow: hidden;
display: flex;
flex-wrap: wrap;
.life-item {
border-left: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
margin-right: -1px;
height: 64px;
text-align: center;
position: relative;
cursor: pointer;
width: 25%;
.list-item {
background-image: url(~@/assets/icons.png);
width: 61px;
height: 40px;
display: block;
}
.service-intro {
line-height: 22px;
width: 60px;
display: block;
}
&:nth-child(1) {
.list-item {
background-position: 0px -5px;
}
}
&:nth-child(2) {
.list-item {
background-position: -62px -5px;
}
}
&:nth-child(3) {
.list-item {
background-position: -126px -5px;
}
}
&:nth-child(4) {
.list-item {
background-position: -190px -5px;
}
}
&:nth-child(5) {
.list-item {
background-position: 0px -76px;
}
}
&:nth-child(6) {
.list-item {
background-position: -62px -76px;
}
}
&:nth-child(7) {
.list-item {
background-position: -126px -76px;
}
}
&:nth-child(8) {
.list-item {
background-position: -190px -76px;
}
}
&:nth-child(9) {
.list-item {
background-position: 0px -146px;
}
}
&:nth-child(10) {
.list-item {
background-position: -62px -146px;
}
}
&:nth-child(11) {
.list-item {
background-position: -126px -146px;
}
}
&:nth-child(12) {
.list-item {
background-position: -190px -146px;
}
}
}
}
.ads {
margin-top: 5px;
img {
opacity: 0.8;
transition: all 400ms;
&:hover {
opacity: 1;
}
}
}
}
}
}
</style>
Rank
<template>
<!-- 商品排行 -->
<div class="rank">
<div class="tab">
<div class="tab-tit clearfix">
<a href="javascript:;" class="on">
<p class="img">
<i></i>
</p>
<p class="text">热卖排行</p>
</a>
<a href="javascript:;">
<p class="img">
<i></i>
</p>
<p class="text">特价排行</p>
</a>
<a href="javascript:;">
<p class="img">
<i></i>
</p>
<p class="text">新品排行</p>
</a>
</div>
</div>
<div class="content">
<ul>
<li>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#"
>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
移动联通电信4G手机</a
>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#"
>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
移动联通电信4G手机</a
>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#"
>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
移动联通电信4G手机</a
>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#"
>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
移动联通电信4G手机</a
>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.rank {
width: 1200px;
margin: 0 auto;
.tab {
margin: 0 auto;
overflow: hidden;
width: 312px;
.tab-tit {
text-align: center;
a {
display: block;
padding: 0 18px;
float: left;
text-decoration: none;
font-size: 16px;
color: #999;
p {
margin: 5px 0;
}
.img {
i {
width: 35px;
height: 35px;
display: block;
background: url(./images/bg0.png);
margin-left: 10px;
}
}
.text {
line-height: 28px;
}
}
.on {
color: #e60012;
.img {
i {
background-position: -35px 0;
}
}
}
}
}
.content {
overflow: hidden;
padding: 10px;
ul {
li {
overflow: hidden;
list-style: none;
line-height: 18px;
.img-item {
border: 1px solid #e1251b;
width: 269px;
float: left;
overflow: hidden;
margin: 0 12px 10px;
background: #fff;
.tab-pic {
width: 230px;
height: 210px;
overflow: hidden;
text-align: center;
margin: 5px auto 18px;
a {
img {
width: 200px;
height: 200px;
}
}
}
.tab-info {
background: #fafafa;
.info-title {
height: 50px;
line-height: 28px;
overflow: hidden;
margin: 0 auto;
padding-left: 10px;
a {
color: #333;
text-decoration: none;
}
}
.info-price {
font-size: 20px;
color: #e1251b;
height: 35px;
padding-left: 10px;
display: block;
line-height: 24px;
margin: 10px auto 0;
}
}
}
}
}
}
}
</style>
Recommand
<template>
<!--今日推荐-->
<div class="today-recommend">
<div class="py-container">
<ul class="recommend">
<li class="clock">
<div class="time">
<img src="./images/clock.png" />
<h3>今日推荐</h3>
</div>
</li>
<li class="banner">
<img src="./images/today01.png" />
</li>
<li class="banner">
<img src="./images/today02.png" />
</li>
<li class="banner">
<img src="./images/today03.png" />
</li>
<li class="banner">
<img src="./images/today04.png" />
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.today-recommend {
.py-container {
width: 1200px;
margin: 0 auto;
.recommend {
height: 165px;
background-color: #eaeaea;
margin: 10px 0;
display: flex;
.clock {
width: 16.67%;
background-color: #5c5251;
color: #fff;
font-size: 18px;
text-align: center;
.time {
padding: 30px 0;
}
h3 {
margin: 9px 0;
font-weight: 700;
font-size: 18px;
line-height: 30.06px;
}
}
.banner {
width: 20.83%;
img {
width: 100%;
height: 100%;
transition: all 400ms;
&:hover {
opacity: 0.8;
}
}
}
}
}
}
</style>
Login
<template>
<div class="login-container">
<!-- 登录 -->
<div class="login-wrap">
<div class="login">
<div class="loginform">
<ul class="tab clearFix">
<li>
<a href="##" style="border-right: 0">扫描登录</a>
</li>
<li>
<a href="##" class="current">账户登录</a>
</li>
</ul>
<div class="content">
<form action="##">
<div class="input-text clearFix">
<span></span>
<input
type="text"
placeholder="邮箱/用户名/手机号"
v-model="phone"
/>
</div>
<div class="input-text clearFix">
<span class="pwd"></span>
<input
type="text"
placeholder="请输入密码"
v-model="password"
/>
</div>
<div class="setting clearFix">
<label class="checkbox inline">
<input name="m1" type="checkbox" value="2" checked="" />
自动登录
</label>
<span class="forget">忘记密码？</span>
</div>
<button class="btn" @click.prevent="userLogin">
登 录
</button>
</form>
<div class="call clearFix">
<ul>
<li><img src="./images/qq.png" alt="" /></li>
<li><img src="./images/sina.png" alt="" /></li>
<li><img src="./images/ali.png" alt="" /></li>
<li><img src="./images/weixin.png" alt="" /></li>
</ul>
<router-link class="register" to="/register"
>立即注册</router-link
>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="copyright">
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>联系客服</li>
<li>商家入驻</li>
<li>营销中心</li>
<li>手机尚品汇</li>
<li>销售联盟</li>
<li>尚品汇社区</li>
</ul>
<div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
<div class="beian">京ICP备19006430号</div>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
phone: "",
password: "",
};
},
methods: {
async userLogin() {
let { phone, password } = this;
try {
if(phone && password){
await this.$store.dispatch("userLogin", { phone, password });
let toPath=this.$route.query.redirect||"/home";
this.$router.push(toPath);
}
} catch (error) {
alert("error.message")
}
},
},
};
</script>
<style lang="less" scoped>
.login-container {
.login-wrap {
height: 487px;
background-color: #e93854;
.login {
width: 1200px;
height: 487px;
margin: 0 auto;
background: url(./images/loginbg.png) no-repeat;
}
.loginform {
width: 420px;
height: 406px;
box-sizing: border-box;
background: #fff;
float: right;
top: 45px;
position: relative;
padding: 20px;
.tab {
li {
width: 50%;
float: left;
text-align: center;
a {
width: 100%;
display: block;
height: 50px;
line-height: 50px;
font-size: 20px;
font-weight: 700;
color: #333;
border: 1px solid #ddd;
box-sizing: border-box;
text-decoration: none;
}
.current {
border-bottom: none;
border-top-color: #28a3ef;
color: #e1251b;
}
}
}
.content {
width: 380px;
height: 316px;
box-sizing: border-box;
border: 1px solid #ddd;
border-top: none;
padding: 18px;
form {
margin: 15px 0 18px 0;
font-size: 12px;
line-height: 18px;
.input-text {
margin-bottom: 16px;
span {
float: left;
width: 37px;
height: 32px;
border: 1px solid #ccc;
background: url(../../assets/icons.png) no-repeat -10px -201px;
box-sizing: border-box;
border-radius: 2px 0 0 2px;
}
.pwd {
background-position: -72px -201px;
}
input {
width: 302px;
height: 32px;
box-sizing: border-box;
border: 1px solid #ccc;
border-left: none;
float: left;
padding-top: 6px;
padding-bottom: 6px;
font-size: 14px;
line-height: 22px;
padding-right: 8px;
padding-left: 8px;
border-radius: 0 2px 2px 0;
outline: none;
}
}
.setting {
label {
float: left;
}
.forget {
float: right;
}
}
.btn {
background-color: #e1251b;
padding: 6px;
border-radius: 0;
font-size: 16px;
font-family: 微软雅黑;
word-spacing: 4px;
border: 1px solid #e1251b;
color: #fff;
width: 100%;
height: 36px;
margin-top: 25px;
outline: none;
}
}
.call {
margin-top: 30px;
ul {
float: left;
li {
float: left;
margin-right: 5px;
}
}
.register {
float: right;
font-size: 15px;
line-height: 38px;
}
.register:hover {
color: #4cb9fc;
text-decoration: underline;
}
}
}
}
}
.copyright {
width: 1200px;
margin: 0 auto;
text-align: center;
line-height: 24px;
ul {
li {
display: inline-block;
border-right: 1px solid #e4e4e4;
padding: 0 20px;
margin: 15px 0;
}
}
}
}
</style>
Pay
<template>
<div class="pay-main">
<div class="pay-container">
<div class="checkout-tit">
<h4 class="tit-txt">
<span class="success-icon"></span>
<span class="success-info"
>订单提交成功，请您及时付款，以便尽快为您发货~~</span
>
</h4>
<div class="paymark">
<span class="fl"
>请您在提交订单<em class="orange time">4小时</em
>之内完成支付，超时订单会自动取消。订单号：<em>{{
orderId
}}</em></span
>
<span class="fr"
><em class="lead">应付金额：</em
><em class="orange money">￥{{ payInfo.totalFee }}</em></span
>
</div>
</div>
<div class="checkout-info">
<h4>重要说明：</h4>
<ol>
<li>
尚品汇商城支付平台目前支持<span class="zfb">支付宝</span>支付方式。
</li>
<li>其它支付渠道正在调试中，敬请期待。</li>
<li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
</ol>
<h4>
支付宝账户信息：（很重要，<span class="save">请保存！！！</span>
</h4>
<ul>
<li>支付帐号：11111111</li>
<li>密码：111111</li>
<li>支付密码：111111</li>
</ul>
</div>
<div class="checkout-steps">
<div class="step-tit">
<h5>支付平台</h5>
</div>
<div class="step-cont">
<ul class="payType">
<li><img src="./images/pay2.jpg" /></li>
<li><img src="./images/pay3.jpg" /></li>
</ul>
</div>
<div class="hr"></div>
<div class="payshipInfo">
<div class="step-tit">
<h5>支付网银</h5>
</div>
<div class="step-cont">
<ul class="payType">
<li><img src="./images/pay10.jpg" /></li>
<li><img src="./images/pay11.jpg" /></li>
<li><img src="./images/pay12.jpg" /></li>
<li><img src="./images/pay13.jpg" /></li>
<li><img src="./images/pay14.jpg" /></li>
<li><img src="./images/pay15.jpg" /></li>
<li><img src="./images/pay16.jpg" /></li>
<li><img src="./images/pay17.jpg" /></li>
<li><img src="./images/pay18.jpg" /></li>
<li><img src="./images/pay19.jpg" /></li>
<li><img src="./images/pay20.jpg" /></li>
<li><img src="./images/pay21.jpg" /></li>
<li><img src="./images/pay22.jpg" /></li>
</ul>
</div>
</div>
<div class="hr"></div>
<div class="submit">
<!-- <router-link class="btn" to="/paysuccess">立即支付</router-link> -->
<a class="btn" @click="open">立即支付</a>
</div>
<div class="otherpay">
<div class="step-tit">
<h5>其他支付方式</h5>
</div>
<div class="step-cont">
<span><a href="weixinpay.html" target="_blank">微信支付</a></span>
<span>中国银联</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import QRCode from "qrcode";
export default {
name: "Pay",
data() {
return {
payInfo: {},
timer: null,
code: "",
};
},
mounted() {
this.getPayInfo();
},
computed: {
orderId() {
return this.$route.query.orderId;
},
},
methods: {
async getPayInfo() {
let res = await this.$API.reqPayInfo(this.orderId);
if (res.code == 200) {
this.payInfo = res.data;
}
},
async open() {
let res = await QRCode.toDataURL(this.payInfo.codeUrl);
this.$alert(`<img src=${res} />`, "请用微信支付", {
dangerouslyUseHTMLString: true,
center: true,
showCancelButton: true,
cancelButtonText: "支付遇到问题",
confirmButtonText: "支付成功",
showClose: false,
beforeClose: (type, instance, done) => {
if (type == "cancel") {
alert("请联系管理员");
clearInterval(this.timer);
this.timer = null;
done();
} else {
clearInterval(this.timer);
this.timer = null;
done();
this.$router.push("/paysuccess");
}
},
});
if (!this.timer) {
this.timer = setInterval(async () => {
let res = await this.$API.reqPayStatus(this.orderId);
if (res.code == 200) {
clearInterval(this.timer);
this.timer = null;
this.code = res.code;
this.$msgbox.close();
this.$router.push("/paysuccess");
}
}, 1000);
}
},
},
};
</script>
<style lang="less" scoped>
.pay-main {
margin-bottom: 20px;
.pay-container {
margin: 0 auto;
width: 1200px;
a:hover {
color: #4cb9fc;
}
.orange {
color: #e1251b;
}
.money {
font-size: 18px;
}
.zfb {
color: #e1251b;
font-weight: 700;
}
.checkout-tit {
padding: 10px;
.tit-txt {
font-size: 14px;
line-height: 21px;
.success-icon {
width: 30px;
height: 30px;
display: inline-block;
background: url(./images/icon.png) no-repeat 0 0;
}
.success-info {
padding: 0 8px;
line-height: 30px;
vertical-align: top;
}
}
.paymark {
overflow: hidden;
line-height: 26px;
text-indent: 38px;
.fl {
float: left;
}
.fr {
float: right;
.lead {
margin-bottom: 18px;
font-size: 15px;
font-weight: 400;
line-height: 22.5px;
}
}
}
}
.checkout-info {
padding-left: 25px;
padding-bottom: 15px;
margin-bottom: 10px;
border: 2px solid #e1251b;
h4 {
margin: 9px 0;
font-size: 14px;
line-height: 21px;
color: #e1251b;
}
ol {
padding-left: 25px;
list-style-type: decimal;
line-height: 24px;
font-size: 14px;
}
ul {
padding-left: 25px;
list-style-type: disc;
line-height: 24px;
font-size: 14px;
}
}
.checkout-steps {
border: 1px solid #ddd;
padding: 25px;
.hr {
height: 1px;
background-color: #ddd;
}
.step-tit {
line-height: 36px;
margin: 15px 0;
}
.step-cont {
margin: 0 10px 12px 20px;
ul {
font-size: 0;
li {
margin: 2px;
display: inline-block;
padding: 5px 20px;
border: 1px solid #ddd;
cursor: pointer;
line-height: 18px;
}
}
}
}
.submit {
text-align: center;
.btn {
display: inline-block;
padding: 15px 45px;
margin: 15px 0 10px;
font: 18px "微软雅黑";
font-weight: 700;
border-radius: 0;
background-color: #e1251b;
border: 1px solid #e1251b;
color: #fff;
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
text-decoration: none;
}
}
}
}
</style>
PaySuccess
<template>
<div class="paysuccess">
<div class="success">
<h3>
<img src="./images/right.png" width="48" height="48">
恭喜您，支付成功啦！
</h3>
<div class="paydetail">
<p class="button">
<router-link class="btn-look" to="/center">查看订单</router-link>
<router-link class="btn-goshop" to="/">继续购物</router-link>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'PaySuccess',
beforeRouteEnter(to, from,next){
if(from.path=="/pay"){
next()
}else{
next(false)
}
},
beforeRouteLeave(to,from,next) {
next();
},
}
</script>
<style lang="less" scoped>
.paysuccess {
margin: 20px auto;
padding: 25px;
border: 1px solid rgb(211, 211, 211);
width: 1200px;
width: 1148px;
.success {
width: 500px;
margin: 0 auto;
h3 {
margin: 20px 0;
font-weight: 700;
font-size: 20px;
line-height: 30px;
img {
max-width: 100%;
vertical-align: middle;
border: 0;
margin-right: 14px;
}
}
.paydetail {
margin-left: 66px;
font-size: 15px;
.button {
margin: 30px 0;
line-height: 26px;
a {
display: inline-block;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
user-select: none;
font-size: 18px;
padding: 4px 20px;
line-height: 22px;
text-decoration: none;
&.btn-look {
margin-right: 13px;
color: #fff;
background-color: #e1251b;
border: 1px solid #e1251b;
}
&.btn-goshop {
color: #666;
background-color: #eee;
border: 1px solid #e1e1e1;
}
}
}
}
}
}
</style>
4144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
