商店详情-购物车
This commit is contained in:
Kiyan
parent
10cba91c32
commit
904083e258
@ -65,6 +65,9 @@ button[type="primary"][plain] {
|
||||
color: #ff5801;
|
||||
border-color: #ff5801;
|
||||
}
|
||||
button[type="primary"][disabled] {
|
||||
background-color: #ffa97c;
|
||||
}
|
||||
|
||||
.button-hover[type=primary], .button-hover.weui-btn_primary {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
BIN
app/images/cart-empty@2x.png
Normal file
BIN
app/images/cart-empty@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
app/images/cart-full@2x.png
Normal file
BIN
app/images/cart-full@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
app/images/decrease@2x.png
Normal file
BIN
app/images/decrease@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
app/images/delete@2x.png
Normal file
BIN
app/images/delete@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
app/images/increase@2x.png
Normal file
BIN
app/images/increase@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@ -1,6 +1,14 @@
|
||||
// pages/shop/show.js
|
||||
|
||||
var sliderWidth = 96;
|
||||
var initOrder = {
|
||||
totalNum: 0,
|
||||
totalPrice: 0,
|
||||
totalGoodsPrice: 0,
|
||||
totalPackingFee: 0,
|
||||
goodsNums: {},
|
||||
goods: []
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
@ -10,14 +18,9 @@ Page({
|
||||
sliderLeft: 0,
|
||||
|
||||
activeMenuIndex: 0,
|
||||
showCart: false,
|
||||
|
||||
order: {
|
||||
totalPrice: 0,
|
||||
totalNum: 0,
|
||||
totalPackingFee: 0,
|
||||
goodsNums: {},
|
||||
goods: []
|
||||
},
|
||||
order: initOrder,
|
||||
|
||||
info: {
|
||||
"seller_id": "2",
|
||||
@ -103,7 +106,7 @@ Page({
|
||||
"pic_hd2": null,
|
||||
"detail": "鸡翅饭 xx",
|
||||
"price": "20.00",
|
||||
"packing_fee": "0.00",
|
||||
"packing_fee": "2.00",
|
||||
"sales": "41",
|
||||
"praise": "0",
|
||||
"stock": "59",
|
||||
@ -314,58 +317,56 @@ Page({
|
||||
})
|
||||
},
|
||||
|
||||
addGoodsNum(order, goodsId, subId, num = 1) {
|
||||
addGoodsNum(order, item) {
|
||||
var {goods, goodsNums} = order
|
||||
var item;
|
||||
if (subId) {
|
||||
item = goods.find(item => {
|
||||
return item['goods_id'] == goodsId && item['subId'] == subId
|
||||
var {goods_id, sub_id, num} = item
|
||||
var itemIndex;
|
||||
if (sub_id) {
|
||||
itemIndex = goods.findIndex(item => {
|
||||
return item['goods_id'] == goods_id && item['sub_id'] == sub_id
|
||||
})
|
||||
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
|
||||
itemIndex = goods.findIndex(item => {
|
||||
return item['goods_id'] == goods_id
|
||||
})
|
||||
if (item) {
|
||||
item['num'] += num
|
||||
} else {
|
||||
goods.push({
|
||||
'goods_id': goodsId,
|
||||
'num': num
|
||||
})
|
||||
}
|
||||
}
|
||||
if (goodsNums[goodsId]) {
|
||||
goodsNums[goodsId] += num
|
||||
if (itemIndex >= 0) {
|
||||
goods[itemIndex]['num'] += num
|
||||
} else {
|
||||
goodsNums[goodsId] = num
|
||||
goods.push(item)
|
||||
}
|
||||
if (goodsNums[goods_id]) {
|
||||
goodsNums[goods_id] += num
|
||||
} else {
|
||||
goodsNums[goods_id] = num
|
||||
}
|
||||
|
||||
},
|
||||
removeGoodsNum(order, goodsId, subId, num = 1) {
|
||||
removeGoodsNum(order, item) {
|
||||
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) {
|
||||
|
||||
}
|
||||
}
|
||||
var {goods_id, sub_id, num} = item
|
||||
var itemIndex;
|
||||
if (sub_id) {
|
||||
itemIndex = goods.findIndex(item => {
|
||||
return item['goods_id'] == goods_id && item['sub_id'] == sub_id
|
||||
})
|
||||
} else {
|
||||
|
||||
itemIndex = goods.findIndex(item => {
|
||||
return item['goods_id'] == goods_id
|
||||
})
|
||||
}
|
||||
if (goodsNums[goodsId] > 1) {
|
||||
goodsNums[goodsId] -= num
|
||||
if (itemIndex >= 0) {
|
||||
item = goods[itemIndex]
|
||||
if (item.num > 1) {
|
||||
item.num -= num
|
||||
} else {
|
||||
goods.splice(itemIndex, 1)
|
||||
}
|
||||
}
|
||||
if (goodsNums[goods_id] > 1) {
|
||||
goodsNums[goods_id] -= num
|
||||
} else {
|
||||
delete goodsNums[goodsId]
|
||||
delete goodsNums[goods_id]
|
||||
}
|
||||
},
|
||||
|
||||
@ -373,16 +374,23 @@ Page({
|
||||
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;
|
||||
var {goods_id, goods_name} = goods
|
||||
if (subIndex >= 0) {
|
||||
goods = goods.sub_goods[subIndex];
|
||||
sub_id = goods['sub_id']
|
||||
var {sub_id, sub_name} = goods
|
||||
}
|
||||
order.totalNum += 1;
|
||||
order.totalPrice += +goods.price;
|
||||
order.totalGoodsPrice += +goods.price;
|
||||
order.totalPackingFee += +goods.packing_fee;
|
||||
this.addGoodsNum(order, goods_id, sub_id)
|
||||
order.totalPrice = order.totalGoodsPrice + order.totalPackingFee;
|
||||
this.addGoodsNum(order, {
|
||||
goods_id, goods_name,
|
||||
sub_id, sub_name,
|
||||
price: goods.price,
|
||||
packing_fee: goods.packing_fee,
|
||||
menuIndex, goodsIndex, subIndex,
|
||||
num: 1
|
||||
})
|
||||
this.setData({
|
||||
order
|
||||
})
|
||||
@ -398,11 +406,39 @@ Page({
|
||||
sub_id = goods['sub_id']
|
||||
}
|
||||
order.totalNum -= 1;
|
||||
order.totalPrice -= +goods.price;
|
||||
order.totalGoodsPrice -= +goods.price;
|
||||
order.totalPackingFee -= +goods.packing_fee;
|
||||
this.removeGoodsNum(order, goods_id, sub_id)
|
||||
order.totalPrice = order.totalGoodsPrice + order.totalPackingFee;
|
||||
this.removeGoodsNum(order, {
|
||||
goods_id, sub_id,
|
||||
num: 1
|
||||
})
|
||||
this.setData({
|
||||
order
|
||||
})
|
||||
if (order.totalNum == 0) {
|
||||
this.hideCart()
|
||||
}
|
||||
},
|
||||
clearCart(e) {
|
||||
this.setData({
|
||||
order: initOrder,
|
||||
showCart: false
|
||||
})
|
||||
},
|
||||
hideCart(e) {
|
||||
this.setData({
|
||||
showCart: false
|
||||
})
|
||||
},
|
||||
toggleCart(e) {
|
||||
var {showCart, order: {totalNum}} = this.data
|
||||
|
||||
if (totalNum <= 0) {
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
showCart: !showCart
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -1,4 +1,7 @@
|
||||
<import src="templates/goods-actions.wxml"/>
|
||||
<import src="templates/goods-actions.wxml" />
|
||||
<import src="templates/cart-box.wxml" />
|
||||
<import src="templates/sub-goods.wxml" />
|
||||
|
||||
<!--pages/shop/show.wxml-->
|
||||
<view class="shop-show">
|
||||
<view class="shop-info weui-panel weui-panel_access">
|
||||
@ -33,7 +36,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-content">
|
||||
<view class=" weui-tab">
|
||||
<view class=" weui-tab weui-tab_shop">
|
||||
<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">
|
||||
@ -43,36 +46,58 @@
|
||||
<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 class="weui-tab__content menu-tab" hidden="{{activeIndex != 0}}">
|
||||
<view class="menu-content weui-flex">
|
||||
<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>
|
||||
<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 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="{{menuIndex: activeMenuIndex, goodsIndex: index, num: order['goodsNums'][item.goods_id]}}" wx:else />
|
||||
</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 class="menu-cart weui-flex">
|
||||
<view bindtap="toggleCart" class="weui-flex__item menu-cart__content weui-flex">
|
||||
<view wx:if="{{!showCart}}" class="menu-cart__badge-wrap">
|
||||
<image class="menu-cart__icon" src="{{order.totalNum > 0 ? '/images/cart-full@2x.png': '/images/cart-empty@2x.png'}}"></image>
|
||||
<view wx:if="{{order.totalNum > 0}}" class="weui-badge menu-cart__badge">{{order.totalNum}}</view>
|
||||
</view>
|
||||
<view class="weui-flex__item menu-cart__price-wrap">
|
||||
<view class="menu-cart__price" wx:if="{{order.totalPrice > 0}}">¥{{order.totalPrice}}</view>
|
||||
<view class="text-small grey-color">另需配送费{{info.delivery_fee}}元</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="weui-btn menu-cart__btn" type="primary" disabled="{{order.totalPrice < info.min_price ? true: false}}">
|
||||
<block wx:if="{{order.totalPrice > 0 }}">
|
||||
<text wx:if="{{order.totalPrice > info.min_price}}">选好了</text>
|
||||
<text wx:else>还差{{info.min_price - order.totalPrice}}元起送</text>
|
||||
</block>
|
||||
<text wx:else>{{info.min_price}}元起送</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template wx:if="{{showCart}}" is="cart-box" data="{{...order}}" />
|
||||
<template is="sub-goods" />
|
||||
@ -1,6 +1,7 @@
|
||||
/* pages/shop/show.wxss */
|
||||
|
||||
@import './templates/goods-actions.wxss';
|
||||
@import './templates/cart-box.wxss';
|
||||
@import './templates/sub-goods.wxss';
|
||||
|
||||
.shop-show {
|
||||
display: flex;
|
||||
@ -65,19 +66,32 @@
|
||||
}
|
||||
|
||||
.shop-content {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.weui-tab_shop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* menu-tab */
|
||||
|
||||
.menu-tab {
|
||||
position: relative;
|
||||
padding-bottom: 50px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
width: 80px;
|
||||
font-size: 13px;
|
||||
@ -114,11 +128,13 @@
|
||||
margin-left: 8px;
|
||||
padding: 8px 8px 8px 0;
|
||||
}
|
||||
|
||||
.goods-item:not(:last-child) {
|
||||
border-bottom: 1rpx solid #e8e8e8;
|
||||
}
|
||||
|
||||
.goods-item__name {
|
||||
font-weight: 400;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.goods-item__pic {
|
||||
@ -128,22 +144,73 @@
|
||||
}
|
||||
|
||||
.goods-item__actions {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
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%;
|
||||
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;
|
||||
}
|
||||
|
||||
.menu-cart {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
.menu-cart__content {
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-cart__badge-wrap {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.menu-cart__badge {
|
||||
position: absolute;
|
||||
top: -.4em;
|
||||
right: -.4em;
|
||||
}
|
||||
|
||||
.menu-cart__icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.menu-cart__price-wrap {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.menu-cart__btn[type=primary] {
|
||||
margin: 0;
|
||||
height: 50px;
|
||||
min-width: 100px;
|
||||
font-size: 16px;
|
||||
line-height: 50px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.menu-cart__btn::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.menu-cart__price {
|
||||
color: #ff5801;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
36
app/pages/shop/templates/cart-box.wxml
Normal file
36
app/pages/shop/templates/cart-box.wxml
Normal file
@ -0,0 +1,36 @@
|
||||
<import src="goods-actions"/>
|
||||
|
||||
<template name="cart-box">
|
||||
<view class="cart-box">
|
||||
<view class="cart-box__overlay" bindtap="hideCart"></view>
|
||||
<view class="cart-box__content">
|
||||
<view class="cart-box__icon">
|
||||
<image src="/images/cart-full@2x.png" class="cart-box__icon-img"></image>
|
||||
<view wx:if="{{totalNum > 0}}" class="weui-badge cart-box__icon-badge">{{totalNum}}</view>
|
||||
</view>
|
||||
<view class="cart-box__hd weui-flex">
|
||||
<view class="weui-flex__item">
|
||||
餐盒费{{totalPackingFee}}元
|
||||
</view>
|
||||
<view class=" cart-box__btn-clear" bindtap="clearCart">
|
||||
<image class="cart-box__btn-clear-img" src="/images/delete@2x.png"></image>清空购物车
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart-box__bd">
|
||||
<view wx:for="{{goods}}" wx:key="index" class="cart-box__item">
|
||||
<view class="cart-box__item-name">
|
||||
{{item.goods_name}}
|
||||
<view wx:if="{{item.sub_name}}" class="text-small grey-color">+{{item.sub_name}}</view>
|
||||
</view>
|
||||
<view class="cart-box__item-price">
|
||||
¥{{item.price}}
|
||||
<view wx:if="{{item.packing_fee > 0}}" class="text-small grey-color">餐盒费{{item.packing_fee}}元</view>
|
||||
</view>
|
||||
<view class="cart-box__item-btns">
|
||||
<template is="goods-actions" data="{{...item}}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
91
app/pages/shop/templates/cart-box.wxss
Normal file
91
app/pages/shop/templates/cart-box.wxss
Normal file
@ -0,0 +1,91 @@
|
||||
.cart-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 50px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.cart-box__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.cart-box__content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.cart-box__hd {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
background-color: #F4F4F4;
|
||||
}
|
||||
|
||||
.cart-box__hd::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 26px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: #F4F4F4;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.cart-box__list {
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cart-box__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1rpx solid #e8e8e8;
|
||||
}
|
||||
|
||||
.cart-box__item-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cart-box__item-price {
|
||||
padding: 0 10px;
|
||||
color: #ff5801;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
.cart-box__btn-clear {
|
||||
color: #999;
|
||||
}
|
||||
.cart-box__btn-clear-img {
|
||||
margin: -4px 5px 0 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cart-box__icon {
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
left: 8px;
|
||||
}
|
||||
.cart-box__icon-img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.cart-box__icon-badge {
|
||||
position: absolute;
|
||||
top: -.4em;
|
||||
right: -.4em;
|
||||
}
|
||||
@ -1,9 +1,14 @@
|
||||
<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 data-menu-index="{{menuIndex}}" data-goods-index="{{goodsIndex}}" data-sub-index="{{subIndex}}" bindtap="decrease" class="goods-action-btn goods-action-btn_decrease">
|
||||
<image src="/images/decrease@2x.png" class="goods-action-btn__img"></image>
|
||||
</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 data-menu-index="{{menuIndex}}" data-goods-index="{{goodsIndex}}" data-sub-index="{{subIndex}}" bindtap="increase" class="goods-action-btn goods-action-btn_increase">
|
||||
<image src="/images/increase@2x.png" class="goods-action-btn__img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -1,22 +1,11 @@
|
||||
.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%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.goods-action-btn_decrease {
|
||||
border: 1rpx solid #e8e8e8;
|
||||
}
|
||||
|
||||
.goods-action-btn_increase {
|
||||
background-color: #ff5801;
|
||||
color: #fff;
|
||||
.goods-action-btn__img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goods-action-num {
|
||||
|
||||
23
app/pages/shop/templates/sub-goods.wxml
Normal file
23
app/pages/shop/templates/sub-goods.wxml
Normal file
@ -0,0 +1,23 @@
|
||||
<import src="goods-actions"/>
|
||||
|
||||
<template name="sub-goods">
|
||||
<view class="sub-goods">
|
||||
<view class="sub-goods__overlay"></view>
|
||||
<view class="sub-goods__content">
|
||||
<view class="sub-goods__hd">
|
||||
test
|
||||
</view>
|
||||
<view class="sub-goods__bd">
|
||||
<view >规格: </view>
|
||||
<view class="sub-goods__list">
|
||||
<view class="sub-goods__item sub-goods__item_active">
|
||||
750ml
|
||||
</view>
|
||||
<view class="sub-goods__item">
|
||||
255ml
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
41
app/pages/shop/templates/sub-goods.wxss
Normal file
41
app/pages/shop/templates/sub-goods.wxss
Normal file
@ -0,0 +1,41 @@
|
||||
.sub-goods {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.sub-goods__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sub-goods__content {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 30%;
|
||||
width: 300px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.sub-goods__hd {
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-goods__bd {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sub-goods__item {
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user