github/ipaotui-mall
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shop detail

Browse Source
This commit is contained in:
Kiyan 2017-04-25 17:14:17 +08:00
parent 438b95a78e
commit 10cba91c32
6 changed files with 605 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/app.wxss
View File

@ -3,6 +3,7 @@
page {
font-size: 16px;
line-height: 1.5;
background-color: #f8f8f8;
}
@ -13,6 +14,13 @@ page {
.grey-color {
color: #999 !important;
}
.text-large {
font-size: 1.2em;
}
.text-small {
font-size: 0.8em;
}
.trangle::after {
content: "";
@ -72,3 +80,11 @@ button[type="primary"][plain] {
margin-top: 15px;
padding: 0 15px;
}
.weui-navbar__item.weui-bar__item_on {
color: #ff5801;
}
.weui-navbar__slider {
background-color: #ff5801;
}

351
app/pages/shop/show.js
View File

@ -1,6 +1,24 @@
// pages/shop/show.js
var sliderWidth = 96;
Page({
data: {
tabs: ["商品", "评价"],
activeIndex: 0,
sliderOffset: 0,
sliderLeft: 0,
activeMenuIndex: 0,
order: {
totalPrice: 0,
totalNum: 0,
totalPackingFee: 0,
goodsNums: {},
goods: []
},
info: {
"seller_id": "2",
"seller_name": "鲜极道",
@ -37,10 +55,228 @@ Page({
"info": "在线支付满15元减5元,满20元减8元"
}
],
"menus": [
{
"menu_id": "10",
"menu_name": "热销排行",
"seller_id": "2",
"sort": "0",
"is_use": "1",
"goods": "29,32,31,30,46",
"goods2": [
{
"goods_id": "29",
"goods_name": "鸡腿饭",
"seller_id": "2",
"pic_url": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/1461034075146103407535640.jpg",
"pic_hd1": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd1_1461034075146103407535640.jpg",
"pic_hd2": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd2_1461034075146103407535640.jpg",
"detail": "鸡腿饭 xx",
"price": "22.00",
"packing_fee": "2.00",
"sales": "46",
"praise": "0",
"stock": "76",
"sub_goods": [
{
"sub_id": "50",
"sub_name": "大",
"price": "22.98",
"packing_fee": "2.00",
"stock": "74"
},
{
"sub_id": "51",
"sub_name": "小",
"price": "22.00",
"packing_fee": "2.00",
"stock": "76"
}
]
},
{
"goods_id": "32",
"goods_name": "鸡翅饭",
"seller_id": "2",
"pic_url": null,
"pic_hd1": null,
"pic_hd2": null,
"detail": "鸡翅饭 xx",
"price": "20.00",
"packing_fee": "0.00",
"sales": "41",
"praise": "0",
"stock": "59",
"sub_goods": []
},
{
"goods_id": "31",
"goods_name": "招牌饭",
"seller_id": "2",
"pic_url": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/1461033463146103346359875.jpg",
"pic_hd1": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd1_1461033463146103346359875.jpg",
"pic_hd2": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd2_1461033463146103346359875.jpg",
"detail": "招牌饭 xx",
"price": "20.00",
"packing_fee": "0.00",
"sales": "14",
"praise": "0",
"stock": "86",
"sub_goods": []
},
{
"goods_id": "30",
"goods_name": "排骨饭",
"seller_id": "2",
"pic_url": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/1461034058146103405829482.jpg",
"pic_hd1": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd1_1461034058146103405829482.jpg",
"pic_hd2": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd2_1461034058146103405829482.jpg",
"detail": "排骨饭 xx",
"price": "20.00",
"packing_fee": "0.00",
"sales": "10",
"praise": "0",
"stock": "0",
"sub_goods": []
},
{
"goods_id": "46",
"goods_name": "香肠2",
"seller_id": "2",
"pic_url": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/1466411009146641100940750.jpg",
"pic_hd1": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd1_1466411009146641100940750.jpg",
"pic_hd2": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd2_1466411009146641100940750.jpg",
"detail": "",
"price": "2.00",
"packing_fee": "0.00",
"sales": "13",
"praise": "0",
"stock": "187",
"sub_goods": []
}
]
},
{
"menu_id": "11",
"menu_name": "便当",
"seller_id": "2",
"sort": "0",
"is_use": "1",
"goods": "29,33,32,31,30,46",
"goods2": [
{
"goods_id": "29",
"goods_name": "鸡腿饭",
"seller_id": "2",
"pic_url": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/1461034075146103407535640.jpg",
"pic_hd1": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd1_1461034075146103407535640.jpg",
"pic_hd2": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd2_1461034075146103407535640.jpg",
"detail": "鸡腿饭 xx",
"price": "22.00",
"packing_fee": "2.00",
"sales": "46",
"praise": "0",
"stock": "76",
"sub_goods": [
{
"sub_id": "50",
"sub_name": "大",
"price": "22.98",
"packing_fee": "2.00",
"stock": "74"
},
{
"sub_id": "51",
"sub_name": "小",
"price": "22.00",
"packing_fee": "2.00",
"stock": "76"
}
]
},
{
"goods_id": "33",
"goods_name": "香肠饭",
"seller_id": "2",
"pic_url": null,
"pic_hd1": null,
"pic_hd2": null,
"detail": "香肠饭 xx",
"price": "20.00",
"packing_fee": "0.00",
"sales": "0",
"praise": "0",
"stock": "100",
"sub_goods": []
},
{
"goods_id": "32",
"goods_name": "鸡翅饭",
"seller_id": "2",
"pic_url": null,
"pic_hd1": null,
"pic_hd2": null,
"detail": "鸡翅饭 xx",
"price": "20.00",
"packing_fee": "0.00",
"sales": "41",
"praise": "0",
"stock": "59",
"sub_goods": []
},
{
"goods_id": "31",
"goods_name": "招牌饭",
"seller_id": "2",
"pic_url": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/1461033463146103346359875.jpg",
"pic_hd1": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd1_1461033463146103346359875.jpg",
"pic_hd2": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd2_1461033463146103346359875.jpg",
"detail": "招牌饭 xx",
"price": "20.00",
"packing_fee": "0.00",
"sales": "14",
"praise": "0",
"stock": "86",
"sub_goods": []
},
{
"goods_id": "30",
"goods_name": "排骨饭",
"seller_id": "2",
"pic_url": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/1461034058146103405829482.jpg",
"pic_hd1": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd1_1461034058146103405829482.jpg",
"pic_hd2": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd2_1461034058146103405829482.jpg",
"detail": "排骨饭 xx",
"price": "20.00",
"packing_fee": "0.00",
"sales": "10",
"praise": "0",
"stock": "0",
"sub_goods": []
},
{
"goods_id": "46",
"goods_name": "香肠2",
"seller_id": "2",
"pic_url": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/1466411009146641100940750.jpg",
"pic_hd1": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd1_1466411009146641100940750.jpg",
"pic_hd2": "http://mtest.ipaotui.com/Uploadfile/Img/seller_goods/hd2_1466411009146641100940750.jpg",
"detail": "",
"price": "2.00",
"packing_fee": "0.00",
"sales": "13",
"praise": "0",
"stock": "187",
"sub_goods": []
}
]
},
]
}
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
this.initTab()
},
onReady: function () {
// 页面渲染完成
@ -53,5 +289,120 @@ Page({
},
onUnload: function () {
// 页面关闭
},
initTab: function () {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
});
}
});
},
tabClick: function (e) {
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: e.currentTarget.id
});
},
menuClick: function (e) {
this.setData({
activeMenuIndex: e.currentTarget.id
})
},
addGoodsNum(order, goodsId, subId, num = 1) {
var {goods, goodsNums} = order
var item;
if (subId) {
item = goods.find(item => {
return item['goods_id'] == goodsId && item['subId'] == subId
})
if (item) {
item['num'] += num
} else {
goods.push({
'goods_id': goodsId,
'sub_id': subId,
'num': num
})
}
} else {
item = goods.find(item => {
return item['goods_id'] == goodsId
})
if (item) {
item['num'] += num
} else {
goods.push({
'goods_id': goodsId,
'num': num
})
}
}
if (goodsNums[goodsId]) {
goodsNums[goodsId] += num
} else {
goodsNums[goodsId] = num
}
},
removeGoodsNum(order, goodsId, subId, num = 1) {
var {goods, goodsNums} = order
if (subId) {
for(let i=0, len=goods.length; i<len;i++) {
let item = goods[i]
if(item['goods_id'] == goodsId && item['sub_id'] == subId) {
}
}
} else {
}
if (goodsNums[goodsId] > 1) {
goodsNums[goodsId] -= num
} else {
delete goodsNums[goodsId]
}
},
increase(e) {
var {order, info: {menus}} = this.data;
var {menuIndex, goodsIndex, subIndex} = e.currentTarget.dataset;
var goods = menus[menuIndex].goods2[goodsIndex];
var goods_id = goods['goods_id']
var sub_id;
if (subIndex >= 0) {
goods = goods.sub_goods[subIndex];
sub_id = goods['sub_id']
}
order.totalNum += 1;
order.totalPrice += +goods.price;
order.totalPackingFee += +goods.packing_fee;
this.addGoodsNum(order, goods_id, sub_id)
this.setData({
order
})
},
decrease(e) {
var {order, info: {menus}} = this.data;
var {menuIndex, goodsIndex, subIndex} = e.currentTarget.dataset;
var goods = menus[menuIndex].goods2[goodsIndex];
var goods_id = goods['goods_id']
var sub_id;
if (subIndex >= 0) {
goods = goods.sub_goods[subIndex];
sub_id = goods['sub_id']
}
order.totalNum -= 1;
order.totalPrice -= +goods.price;
order.totalPackingFee -= +goods.packing_fee;
this.removeGoodsNum(order, goods_id, sub_id)
this.setData({
order
})
}
})

86
app/pages/shop/show.wxml
View File

@ -1,22 +1,78 @@
<import src="templates/goods-actions.wxml"/>
<!--pages/shop/show.wxml-->
<view class="shop-info weui-panel weui-panel_access">
<view class="weui-panel__bd">
<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="shop-info_active">
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
<image class="weui-media-box__thumb shop-info__pic" src="{{info.pic_url}}" />
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg weui-cell__ft_in-access">
<view class="weui-media-box__title">{{info.seller_name}}</view>
<view class="weui-media-box__desc shop-info__desc">
{{info.min_price}}元起送 | {{info.delivery_fee}}元配送费 | {{info.reach_time}}分钟到达
<view class="shop-show">
<view class="shop-info weui-panel weui-panel_access">
<view class="weui-panel__bd">
<navigator url="" hover-class="" class="weui-media-box weui-media-box_appmsg">
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
<image class="weui-media-box__thumb shop-info__pic" src="{{info.pic_url}}" />
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg weui-cell__ft_in-access">
<view class="weui-media-box__title">{{info.seller_name}}</view>
<view class="weui-media-box__desc shop-info__desc">
<view>
{{info.min_price}}元起送 | {{info.delivery_fee}}元配送费 | {{info.reach_time}}分钟到达
</view>
<view wx:if="{{info.notice}}">
公告: {{info.notice}}
</view>
</view>
</view>
</navigator>
<view wx:if="{{info.promotion && info.promotion.length > 0}}" class="promotion">
<swiper class="promotion-swiper" vertical="true" autoplay="true" interval="5000">
<swiper-item wx:key="index" wx:for="{{info.promotion}}" class="promotion-item">
<image class="promotion-item__icon" src="{{item.pic_url}}"></image>
<text>{{item.info}}</text>
</swiper-item>
</swiper>
<view class="promotion-total">
{{info.promotion.length}}个活动
</view>
</view>
</navigator>
<view wx:if="{{info.promotion && info.promotion.length > 0}}" class="promotion">
<view wx:for="{{info.promotion}}" wx:key="index" class="promotion-item">
</view>
</view>
<view class="shop-content">
<view class=" weui-tab">
<view class="weui-navbar">
<block wx:for="{{tabs}}" wx:key="*this">
<view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
<view class="weui-navbar__title">{{item}}</view>
</view>
</block>
<view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
</view>
<view class="weui-tab__panel">
<view class="weui-tab__content menu-tab weui-flex" hidden="{{activeIndex != 0}}">
<view class="menu-list">
<view bindtap="menuClick" id="{{index}}" class="menu-item {{index == activeMenuIndex ? 'menu-item_active' : ''}} " wx:for="{{info.menus}}" wx:key="menu_id">
{{item.menu_name}}
</view>
</view>
<view wx:if="{{info.menus && info.menus[activeMenuIndex]}}" class="goods-list weui-flex__item">
<view class="goods-list__label">
{{info.menus[activeMenuIndex].menu_name}}
</view>
<view wx:for="{{info.menus[activeMenuIndex].goods2}}" wx:key="goods_id" class="goods-item weui-flex">
<image class="goods-item__pic" src="{{item.pic_url}}"></image>
<view class="weui-flex__item">
<view class="goods-item__name">{{item.goods_name}}</view>
<view class="goods-item__desc text-small grey-color">月售{{item.sales}}份</view>
<view class="goods-item__price primary-color text-large">¥{{item.price}}</view>
<view class="goods-item__actions">
<view wx:if="{{item.sub_goods && item.sub_goods.length > 0}}" class="goods-item__sub-goods">
选规格
<view wx:if="{{order['goodsNum'][item.goods_id] > 0}}" class="weui-badge goods-item__sub-goods-badge">{{order['goodsNum'][item.goods_id]}}</view>
</view>
<template is="goods-actions" data="{{menu_index: activeMenuIndex, goods_index: index, num: order['goodsNums'][item.goods_id]}}" wx:else />
</view>
</view>
</view>
</view>
</view>
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>
</view>
</view>
</view>
</view>

144
app/pages/shop/show.wxss
View File

@ -1,25 +1,149 @@
/* pages/shop/show.wxss */
@import './templates/goods-actions.wxss';
.shop-show {
display: flex;
flex-direction: column;
height: 100vh;
}
.shop-info {
color: #fff;
background-color: #ff5801;
color: #fff;
background-color: #ff5801;
}
.shop-info::before {
border: none;
border: none;
}
.shop-info__desc {
color: #fff;
color: #fff;
}
.shop-info__pic {
margin-right: 10px;
height: 60px;
width: 60px;
border: 5rpx solid #fff;
border-radius: 50%;
margin-right: 10px;
height: 60px;
width: 60px;
border: 5rpx solid #fff;
border-radius: 50%;
}
.weui-cell__ft_in-access::after {
border-color: #fff;
border-color: #fff;
}
.promotion {
position: relative;
padding: 10px 15px;
font-size: 12px;
}
.promotion-swiper {
height: 20px;
}
.promotion-item {
padding-right: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.promotion-total {
position: absolute;
top: 50%;
right: 15px;
margin-top: -10px;
}
.promotion-item__icon {
margin-right: 5px;
height: 18px;
width: 18px;
vertical-align: middle;
}
.shop-content {
flex: 1;
height: 0;
background-color: #fff;
}
/* menu-tab */
.menu-tab {
padding-bottom: 50px;
box-sizing: border-box;
height: 100%;
}
.menu-list {
width: 80px;
font-size: 13px;
background-color: #fafafa;
text-align: center;
overflow-y: auto;
}
.menu-item {
padding: 10px;
border-bottom: 1rpx dashed #e8e8e8;
}
.menu-item_active {
background-color: #fff;
border-color: #fff;
border-left: 5rpx solid #ff5801;
}
/* goods-list */
.goods-list {
overflow-y: auto;
}
.goods-list__label {
padding: 3px 8px;
font-size: 13px;
background-color: #fafafa;
}
.goods-item {
position: relative;
margin-left: 8px;
padding: 8px 8px 8px 0;
}
.goods-item:not(:last-child) {
border-bottom: 1rpx solid #e8e8e8;
}
.goods-item__name {
font-weight: 400;
}
.goods-item__pic {
margin-right: 8px;
width: 65px;
height: 65px;
}
.goods-item__actions {
position: absolute;
bottom: 8px;
right: 8px;
}
.goods-item__sub-goods {
position: relative;
padding: 3px 8px;
font-size: 12px;
color: #fff;
background-color: #ff5801;
border-radius: 8px / 50%;
}
.goods-item__sub-goods-badge {
position: absolute;
top: -0.5em;
right: -0.5em;
}

9
app/pages/shop/templates/goods-actions.wxml Normal file
View File

@ -0,0 +1,9 @@
<template name="goods-actions">
<view class="goods-actions weui-flex">
<block wx:if="{{num > 0}}">
<view data-menu-index="{{menu_index}}" data-goods-index="{{goods_index}}" data-sub-index="{{sub_index}}" bindtap="decease" class="goods-action-btn goods-action-btn_decrease">-</view>
<view class="goods-action-num">{{num}}</view>
</block>
<view data-menu-index="{{menu_index}}" data-goods-index="{{goods_index}}" data-sub-index="{{sub_index}}" bindtap="increase" class="goods-action-btn goods-action-btn_increase">+</view>
</view>
</template>

24
app/pages/shop/templates/goods-actions.wxss Normal file
View File

@ -0,0 +1,24 @@
.goods-action-btn {
width: 25px;
height: 25px;
text-align: center;
color: #ff5801;
font-size: 1.2em;
line-height: 25px;
font-weight: 400;
box-sizing: border-box;
border-radius: 50%;
}
.goods-action-btn_decrease {
border: 1rpx solid #e8e8e8;
}
.goods-action-btn_increase {
background-color: #ff5801;
color: #fff;
}
.goods-action-num {
margin: 0 10px;
}