shop detail
This commit is contained in:
Kiyan
parent
438b95a78e
commit
10cba91c32
16
app/app.wxss
16
app/app.wxss
@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
page {
|
page {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -13,6 +14,13 @@ page {
|
|||||||
.grey-color {
|
.grey-color {
|
||||||
color: #999 !important;
|
color: #999 !important;
|
||||||
}
|
}
|
||||||
|
.text-large {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-small {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
.trangle::after {
|
.trangle::after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -72,3 +80,11 @@ button[type="primary"][plain] {
|
|||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.weui-navbar__item.weui-bar__item_on {
|
||||||
|
color: #ff5801;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weui-navbar__slider {
|
||||||
|
background-color: #ff5801;
|
||||||
|
}
|
||||||
@ -1,6 +1,24 @@
|
|||||||
// pages/shop/show.js
|
// pages/shop/show.js
|
||||||
|
|
||||||
|
var sliderWidth = 96;
|
||||||
|
|
||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
|
tabs: ["商品", "评价"],
|
||||||
|
activeIndex: 0,
|
||||||
|
sliderOffset: 0,
|
||||||
|
sliderLeft: 0,
|
||||||
|
|
||||||
|
activeMenuIndex: 0,
|
||||||
|
|
||||||
|
order: {
|
||||||
|
totalPrice: 0,
|
||||||
|
totalNum: 0,
|
||||||
|
totalPackingFee: 0,
|
||||||
|
goodsNums: {},
|
||||||
|
goods: []
|
||||||
|
},
|
||||||
|
|
||||||
info: {
|
info: {
|
||||||
"seller_id": "2",
|
"seller_id": "2",
|
||||||
"seller_name": "鲜极道",
|
"seller_name": "鲜极道",
|
||||||
@ -37,10 +55,228 @@ Page({
|
|||||||
"info": "在线支付满15元减5元,满20元减8元"
|
"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) {
|
onLoad: function (options) {
|
||||||
// 页面初始化 options为页面跳转所带来的参数
|
// 页面初始化 options为页面跳转所带来的参数
|
||||||
|
this.initTab()
|
||||||
},
|
},
|
||||||
onReady: function () {
|
onReady: function () {
|
||||||
// 页面渲染完成
|
// 页面渲染完成
|
||||||
@ -53,5 +289,120 @@ Page({
|
|||||||
},
|
},
|
||||||
onUnload: function () {
|
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
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -1,22 +1,78 @@
|
|||||||
|
<import src="templates/goods-actions.wxml"/>
|
||||||
<!--pages/shop/show.wxml-->
|
<!--pages/shop/show.wxml-->
|
||||||
<view class="shop-info weui-panel weui-panel_access">
|
<view class="shop-show">
|
||||||
<view class="weui-panel__bd">
|
<view class="shop-info weui-panel weui-panel_access">
|
||||||
<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="shop-info_active">
|
<view class="weui-panel__bd">
|
||||||
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
|
<navigator url="" hover-class="" class="weui-media-box weui-media-box_appmsg">
|
||||||
<image class="weui-media-box__thumb shop-info__pic" src="{{info.pic_url}}" />
|
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
|
||||||
</view>
|
<image class="weui-media-box__thumb shop-info__pic" src="{{info.pic_url}}" />
|
||||||
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg weui-cell__ft_in-access">
|
</view>
|
||||||
<view class="weui-media-box__title">{{info.seller_name}}</view>
|
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg weui-cell__ft_in-access">
|
||||||
<view class="weui-media-box__desc shop-info__desc">
|
<view class="weui-media-box__title">{{info.seller_name}}</view>
|
||||||
{{info.min_price}}元起送 | {{info.delivery_fee}}元配送费 | {{info.reach_time}}分钟到达
|
<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>
|
||||||
</view>
|
</view>
|
||||||
</navigator>
|
</view>
|
||||||
<view wx:if="{{info.promotion && info.promotion.length > 0}}" class="promotion">
|
</view>
|
||||||
<view wx:for="{{info.promotion}}" wx:key="index" class="promotion-item">
|
<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>
|
||||||
|
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -1,25 +1,149 @@
|
|||||||
/* pages/shop/show.wxss */
|
/* pages/shop/show.wxss */
|
||||||
|
|
||||||
|
@import './templates/goods-actions.wxss';
|
||||||
|
|
||||||
|
.shop-show {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.shop-info {
|
.shop-info {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #ff5801;
|
background-color: #ff5801;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-info::before {
|
.shop-info::before {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-info__desc {
|
.shop-info__desc {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-info__pic {
|
.shop-info__pic {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
border: 5rpx solid #fff;
|
border: 5rpx solid #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-cell__ft_in-access::after {
|
.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
9
app/pages/shop/templates/goods-actions.wxml
Normal 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
24
app/pages/shop/templates/goods-actions.wxss
Normal 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;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user