oneos-v5/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clone 开源的 Shopping

Browse Source
This commit is contained in:
sin
2019-03-04 15:28:16 +08:00
parent 78945c61a7
commit c9d71726fa
83 changed files with 9774 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
mobile-web/src/page/product/detail.vue Normal file
View File

@@ -0,0 +1,326 @@
<template>
<div class="goods">
<headerNav title="商品详情"/>
<van-swipe class="goods-swipe" :autoplay="3000">
<van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
<img :src="thumb" >
</van-swipe-item>
</van-swipe>
<van-cell-group>
<van-cell>
<span class="goods-price">{{ formatPrice(goods.price) }}</span>
<span class="goods-market-price">{{ formatPrice(goods.market_price) }}</span>
<div class="goods-title">{{ goods.title }}</div>
<div class="goods-subtit">{{goods.subtitle}}</div>
</van-cell>
<van-cell @click="onClickShowTag" class="goods-tag" >
<template slot="title" style="font-size:10px;">
<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>
<span >挪威品牌</span>
<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />
<span >跨境商品</span>
<van-icon name="passed" color="red" />
<span >次日达</span>
<van-icon name="passed" color="red" />
<span >自提</span>
<van-icon name="passed" color="red" />
<span >闪电退款</span>
<van-icon name="passed" color="red" />
<span >前海保税仓</span>
<van-icon name="passed" color="red" />
<span >七天无理由退货（拆封后不支持）</span>
</template>
</van-cell>
</van-cell-group>
<van-cell-group class="goods-cell-group">
<van-cell is-link @click="showPromotion" >
<template slot="title">
<span style="margin-right: 10px;">领券</span>
<van-tag type="danger" mark style="margin-right: 5px;">满180减30</van-tag>
<van-tag type="danger" mark style="margin-right: 5px;">满300减100</van-tag>
</template>
</van-cell>
<van-cell is-link @click="showPromotion" >
<template slot="title">
<span style="margin-right: 10px;">促销</span>
<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>
<van-tag type="danger" style="margin-right: 5px;">满减</van-tag>
<van-tag type="danger" style="margin-right: 5px;">限购</van-tag>
</template>
</van-cell>
</van-cell-group>
<van-cell-group class="goods-cell-group">
<van-cell is-link @click="showSku" >
<template slot="title">
<span style="margin-right: 10px;">已选</span>
<span >10件装</span>
</template>
</van-cell>
</van-cell-group>
<div class="goods-info">
<p class="goods-info-title" >图文详情</p>
<div v-html="goods.info"></div>
</div>
<van-goods-action>
<van-goods-action-mini-btn icon="like-o" @click="sorry">
收藏
</van-goods-action-mini-btn>
<van-goods-action-mini-btn icon="cart" @click="onClickCart">
购物车
</van-goods-action-mini-btn>
<van-goods-action-big-btn @click="showSku">
加入购物车
</van-goods-action-big-btn>
<van-goods-action-big-btn primary @click="showSku">
立即购买
</van-goods-action-big-btn>
</van-goods-action>
<van-actionsheet v-model="show" title="促销" style="font-size:14px;">
<van-cell is-link @click="sorry" >
<template slot="title">
<van-tag type="danger">多买优惠</van-tag>
<span> 满2件，总价打9折</span>
</template>
</van-cell>
<van-cell is-link @click="sorry" >
<template slot="title">
<van-tag type="danger">满减</van-tag>
<span> 满100元减50元</span>
</template>
</van-cell>
<van-cell is-link @click="sorry" >
<template slot="title">
<van-tag type="danger">限购</van-tag>
<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>
</template>
</van-cell>
</van-actionsheet>
<van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;">
<van-cell>
<template slot="title">
<van-icon name="passed" color="red" style="margin-right: 10px;" />
<span >次日达</span>
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单，次日送达</div>
</template>
</van-cell>
<van-cell>
<template slot="title">
<van-icon name="passed" color="red" style="margin-right: 10px;" />
<span >自提</span>
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务，包括自提点、自助提货柜、移动自提车等服务</div>
</template>
</van-cell>
<van-cell>
<template slot="title">
<van-icon name="passed" color="red" style="margin-right: 10px;" />
<span >闪电退款</span>
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的，提供先退款后退货服务。</div>
</template>
</van-cell>
<van-cell>
<template slot="title">
<van-icon name="passed" color="red" style="margin-right: 10px;" />
<span >七天无理由退货（拆封后不支持）</span>
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货（拆封后不支持）</div>
</template>
</van-cell>
<van-cell>
<template slot="title">
<van-icon name="passed" color="red" style="margin-right: 10px;" />
<span >前海保税仓</span>
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>
</template>
</van-cell>
</van-actionsheet>
<van-sku
v-model="showBase"
:sku="skuData.sku"
:goods="skuData.goods_info"
:goods-id="skuData.goods_id"
:hide-stock="skuData.sku.hide_stock"
:quota="skuData.quota"
:quota-used="skuData.quota_used"
reset-stepper-on-hide
reset-selected-sku-on-hide
disable-stepper-input
:close-on-click-overlay="closeOnClickOverlay"
:message-config="messageConfig"
:custom-sku-validator="customSkuValidator"
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
/>
</div>
</template>
<script>
import skuData from '../../data/sku';
export default {
components: {
},
data() {
this.skuData = skuData;
return {
show:false,
showTag:false,
goods: {
title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
price: 2680,
market_price:9999,
express: '免运费',
remain: 19,
thumb: [
'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
],
info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
},
showBase: false,
showCustom: false,
showStepper: false,
closeOnClickOverlay: true,
initialSku: {
s1: '30349',
s2: '1193'
},
customSkuValidator: (component) => {
return '请选择xxx';
},
customStepperConfig: {
quotaText: '单次限购100件',
stockFormatter: (stock) => `剩余${stock}间`,
handleOverLimit: (data) => {
const { action, limitType, quota } = data;
if (action === 'minus') {
this.$toast('至少选择一件商品');
} else if (action === 'plus') {
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
this.$toast(`限购${quota}件`);
} else {
this.$toast('库存不够了~~');
}
}
}
},
messageConfig: {
uploadImg: (file, img) => {
return new Promise(resolve => {
setTimeout(() => resolve(img), 1000);
});
},
uploadMaxSize: 3
}
};
},
methods: {
formatPrice(data) {
return '¥' + (data / 100).toFixed(2);
},
onClickCart() {
this.$router.push('/cart');
},
sorry() {
Toast('暂无后续逻辑~');
},
showPromotion() {
this.show=true;
},
showSku(){
this.showBase=true;
},
onClickShowTag(){
this.showTag=true;
},
onBuyClicked(data) {
this.$toast(JSON.stringify(data));
},
onAddCartClicked(data) {
this.$toast(JSON.stringify(data));
},
}
};
</script>
<style lang="less">
.goods {
padding-bottom: 50px;
&-swipe {
img {
width: 7.5rem;
height: 7.5rem;
display: block;
}
}
&-tag{
font-size: 12px;
border-top: 1px solid #e5e5e5;
span{
margin-right: 10px;
}
i{
color: red;
margin-right: 3px;
}
img{
width: 12px;
margin-right: 3px;
margin-top: 6px;
}
}
&-title {
line-height: 18px;
padding-top: 10px;
margin-bottom: 6px;
font-size: 14px;
color: #333;
font-weight: 700;
border-top: 1px solid #f0f0f0;
}
&-subtit{
font-size: 13px;
color: #333;
line-height: 21px;
}
&-price {
color: #f44;font-size: 20px;
}
&-market-price {
text-decoration: line-through;
margin-left: 8px;
font-size: 13px;
color: #999;
}
&-cell-group {
margin: 15px 0;
.van-cell__value {
color: #999;
}
}
&-info-title{
height: 44px;line-height: 44px;text-align: center;font-size: 14px;font-weight: 700;margin: 10px;border-top: 1px solid #e5e5e5;
}
&-info p{
margin: 0;
padding: 0;
margin-block-end: 0;
margin-block-start: 0;
display: grid;
}
&-info img{
width: 100%;
}
}
</style>

404
mobile-web/src/page/product/list.vue Normal file
View File

@@ -0,0 +1,404 @@
<template>
<div class="product-list">
<searchtop/>
<div class="filterbar">
<ul :class="filtersort?'show':''">
<li :class="filterindex==0?'selected':''" v-on:click="onFilterBar(0)"><span>{{filterindex==11?'价格最低':(filterindex==12?'价格最高':'综合')}}</span><van-icon name="arrow" class="down" /></li>
<li :class="filterindex==1?'selected':''" v-on:click="onFilterBar(1)"><span>销量</span></li>
<li :class="filterindex==2?'selected':''" v-on:click="onFilterBar(2)"><span>上新</span></li>
<li :class="filterindex==3?'selected':''" v-on:click="onFilterBar(3)"><span>筛选</span></li>
</ul>
<div :class="'item_options '+(filtersort?'show':'')">
<ul>
<li :class="filterindex==10?'selected':''" v-on:click="onFilterBar(10)">综合</li>
<li :class="filterindex==11?'selected':''" v-on:click="onFilterBar(11)">价格最低</li>
<li :class="filterindex==12?'selected':''" v-on:click="onFilterBar(12)">价格最高</li>
</ul>
</div>
<van-popup v-model="filtershow" position="right" class="filterlayer" >
<div class="filterInner" style="overflow-y: scroll;max-height: 100%;">
<ul>
<li>
<van-cell title="清洁类型" is-link arrow-direction="down" />
</li>
<div style="clear: both;"></div>
<div class="tags_selection">
<div class="option">
<a href="javascript:void 0;">牙龈护理111</a>
</div>
<div class="option ">
<a href="javascript:void 0;">抛光</a>
</div>
<div class="option ">
<a href="javascript:void 0;">清洁</a>
</div>
<div class="option ">
<a href="javascript:void 0;">正畸专用</a>
</div>
<div class="option ">
<a href="javascript:void 0;">敏感</a>
</div>
<div class="option ">
<a href="javascript:void 0;">亮白</a>
</div>
<div style="clear: both;"></div>
</div>
</ul>
<ul>
<li>
<van-cell title="清洁类型" is-link arrow-direction="down" />
</li>
<div style="clear: both;"></div>
<div class="tags_selection">
<div class="option">
<a href="javascript:void 0;">牙龈护理111</a>
</div>
<div class="option ">
<a href="javascript:void 0;">抛光</a>
</div>
<div class="option ">
<a href="javascript:void 0;">清洁</a>
</div>
<div class="option ">
<a href="javascript:void 0;">正畸专用</a>
</div>
<div class="option ">
<a href="javascript:void 0;">敏感</a>
</div>
<div class="option ">
<a href="javascript:void 0;">亮白</a>
</div>
<div style="clear: both;"></div>
</div>
</ul>
<ul>
<li>
<van-cell title="清洁类型" is-link arrow-direction="down" />
</li>
<div style="clear: both;"></div>
<div class="tags_selection">
<div class="option">
<a href="javascript:void 0;">牙龈护理111</a>
</div>
<div class="option ">
<a href="javascript:void 0;">抛光</a>
</div>
<div class="option ">
<a href="javascript:void 0;">清洁</a>
</div>
<div class="option ">
<a href="javascript:void 0;">正畸专用</a>
</div>
<div class="option ">
<a href="javascript:void 0;">敏感</a>
</div>
<div class="option ">
<a href="javascript:void 0;">亮白</a>
</div>
<div style="clear: both;"></div>
</div>
</ul>
<ul>
<li>
<van-cell title="清洁类型" is-link arrow-direction="down" />
</li>
<div style="clear: both;"></div>
<div class="tags_selection">
<div class="option">
<a href="javascript:void 0;">牙龈护理111</a>
</div>
<div class="option ">
<a href="javascript:void 0;">抛光</a>
</div>
<div class="option ">
<a href="javascript:void 0;">清洁</a>
</div>
<div class="option ">
<a href="javascript:void 0;">正畸专用</a>
</div>
<div class="option ">
<a href="javascript:void 0;">敏感</a>
</div>
<div class="option ">
<a href="javascript:void 0;">亮白</a>
</div>
<div style="clear: both;"></div>
</div>
</ul>
<ul>
<li>
<van-cell title="清洁类型" is-link arrow-direction="down" />
</li>
<div style="clear: both;"></div>
<div class="tags_selection">
<div class="option">
<a href="javascript:void 0;">牙龈护理111</a>
</div>
<div class="option ">
<a href="javascript:void 0;">抛光</a>
</div>
<div class="option ">
<a href="javascript:void 0;">清洁</a>
</div>
<div class="option ">
<a href="javascript:void 0;">正畸专用</a>
</div>
<div class="option ">
<a href="javascript:void 0;">敏感</a>
</div>
<div class="option ">
<a href="javascript:void 0;">亮白</a>
</div>
<div style="clear: both;"></div>
</div>
</ul>
<div style="clear: both;"></div>
<van-button size="large" style="height: 40px;margin-bottom: 15px;line-height: 40px;">清楚选项</van-button>
<div style="height:50px;"></div>
</div>
<div class="filterlayer_bottom_buttons">
<span class="filterlayer_bottom_button cancel">取消</span>
<span class="filterlayer_bottom_button confirm">确认</span>
</div>
</van-popup>
</div>
<div v-for="(product,i) in products" :key="i">
<product-card :product='product' @click="showProduct(product)" />
</div>
</div>
</template>
<script>
import searchtop from "../../components/search/searchtop";
export default {
components: {
searchtop
},
data() {
return {
value: "",
filterindex: 0,
filtersort: false,
filtershow: false,
products:[
{
id:1,
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'13.00',
},
{
id:1,
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499.00',
tags:['满199减100','2件起购'],
},
{
id:1,
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499.00',
tags:['新品'],
imageTag:'仅剩1件',
},
{
id:1,
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499.00',
tags:['赠'],
imageTag:'预约',
},
{
id:1,
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'15.00',
},
{
id:1,
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'125.50',
},
]
};
},
methods: {
onFilterBar(value) {
if (value == 0) {
this.filtersort = !this.filtersort;
} else if (value == 3) {
this.filtershow = !this.filtershow;
} else {
this.filtersort = false;
this.filterindex = value;
}
},
showProduct(product){
this.$router.push('/product/'+product.id);
}
}
};
</script>
<style lang="less">
.product-list{
.additional .price{
position: absolute;
bottom: 6px;
height: 34px;
}
}
.filterbar {
font-size: 14px;
position: relative;
ul {
width: 100%;
height: 40px;
}
li {
color: #999;
width: 25%;
float: left;
text-align: center;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #eee;
i {
font-size: 12px;
margin-left: 2px;
}
.down {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
.selected {
color: #e93b3d;
}
.show {
.down {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
.item_options {
width: 100%;
position: absolute;
top: 41px;
background: #fff;
display: none;
z-index: 1;
li {
width: 100%;
text-align: left;
padding-left: 10px;
}
}
.item_options.show {
display: block;
}
.filterlayer {
width: 85%;
height: 100%;
background-color: #f7f7f7;
&_bottom {
&_buttons {
display: -webkit-box;
display: -webkit-flex;
display: flex;
z-index: 10;
position: absolute;
bottom: 0;
left: 0;
right: 0;
.cancel {
color: #333;
background-color: #fff;
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.07);
}
.confirm {
color: #fff;
background-color: #e93b3d;
}
}
&_button {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
font-size: 16px;
height: 49px;
line-height: 49px;
text-align: center;
}
}
ul {
height: auto;
background: #fff;
margin-bottom: 15px;
}
li {
width: 100%;
text-align: left;
height: auto;
line-height: initial;
.van-cell{
font-size: 16px;
}
.big {
height: 25px;
max-width: 250px;
overflow: hidden;
font-size: 16px;
color: #333;
text-overflow: ellipsis;
margin-left: 10px;
}
}
.filterInner{
overflow-y: scroll;
max-height: 100%;
.van-button{
height: 40px;
margin-bottom: 15px;
line-height: 40px;
}
}
.tags_selection {
font-size: 14px;
text-align: center;
background-color: #fff;
position: relative;
margin: 0;
padding: 10px 0 0 10px;
.option {
box-sizing: border-box;
float: left;
width: 33.33%;
padding-right: 10px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
a {
position: relative;
display: block;
padding: 0 5px;
color: #666;
background-color: #f7f7f7;
border-radius: 4px;
overflow: hidden;
text-overflow: ellipsis;
height: 30px;
}
}
}
}
}
</style>