Skip to content

严立 / mini-shimao

Go to a project
Commit 136d73c5 by wjw
Options

wjw--能量补给站修改

parent f4f30ae5
Inline Side-by-side
Showing with 463 additions and 10 deletions
pages/commodity/snacks/snacks.js
Page({
data: {
currentIndex: 0,
scrollTop: 0,
rightTitle: '优惠套餐',
showPopup: false,
showAddSucc: false,
leftMenuList: [
{
id: 0,
tab: '优惠套餐'
},
{
id: 1,
tab: '时令美食'
},
{
id: 2,
tab: '当地食材'
},
{
id: 3,
tab: '沙拉'
},
{
id: 4,
tab: '小食'
},
{
id: 5,
tab: '汤品'
},
{
id: 6,
tab: '主菜'
},
{
id: 7,
tab: '主食'
},
{
id: 8,
tab: '甜品'
},
{
id: 9,
tab: '饮品'
}
],
cart: [
{
goods_id: 0,
goods_name: '雪碧迷你瓶装300ml',
goods_text: '可口可乐公司推出的柠檬味汽水，新装出道，即刻酷爽',
goods_now_price: 49.00,
goods_old_price: 42.00,
goods_now_text: '业主价',
goods_num: 1,
checked: true,
img: '/assets/item01.png'
},
{
goods_id: 1,
goods_name: '可口可乐300ml',
goods_text: '可口可乐公司推出的柠檬味汽水，新装出道，即刻酷爽',
goods_now_price: 52.00,
goods_old_price: 49.00,
goods_now_text: '活动价',
goods_num: 1,
checked: true,
img: '/assets/item01.png'
},
{
goods_id: 2,
goods_name: '葡萄汁饮料238ml',
goods_now_price: 30.00,
goods_num: 2,
checked: true,
img: '/assets/item01.png'
},
{
goods_id: 3,
goods_name: '牛奶苏打碳酸250ml',
goods_text: '可口可乐公司推出的柠檬味汽水，新装出道，即刻酷爽',
goods_now_price: 78,
goods_num: 12,
checked: false,
img: '/assets/item01.png'
}
],
popupObj: {
goods_now_text: '业主价'
}
},
onLoad: function (options) {
handleItemTap(e) {
let index = e.currentTarget.dataset.index
let rightTitle = this.data.leftMenuList[index].tab
this.setData({
currentIndex: index,
rightTitle,
scrollTop: 0
})
},
})
\ No newline at end of file
handleAddCartPopup() {
let showPopup = true
this.setData({
showPopup
})
},
handleClosePopup() {
let showPopup = false
this.setData({
showPopup,
})
},
handleAddCart() {
let showPopup = false
let showAddSucc = true
this.setData({
showPopup,
showAddSucc
})
},
goToCart() {
wx.navigateTo({
url: '/pages/cart/index',
})
}
})
\ No newline at end of file
pages/commodity/snacks/snacks.json
{
"usingComponents": {}
"usingComponents": {
"Blank": "../../components/Blank/Blank"
},
"navigationBarTitleText": "原味书食"
}
\ No newline at end of file
pages/commodity/snacks/snacks.wxml
<!--pages/home/home/home.wxml-->
<text>pages/home/home/home.wxml</text>
<view class="cates">
<view class="cates_container">
<!-- 左边菜单 -->
<scroll-view scroll-y class="left_menu">
<view
class="menu_item {{currentIndex === index ? 'active' : ''}}"
wx:for="{{leftMenuList}}"
wx:key="id"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.tab}}
</view>
</scroll-view>
<!-- 右边内容 -->
<scroll-view scroll-top="{{scrollTop}}" scroll-y class="right_content">
<view class="right_content_title">{{rightTitle}}</view>
<view class="item row" wx:for="{{cart}}" wx:key="id" bindtap="handleAddCartPopup">
<view class="item_img">
<image src="{{item.img}}" mode="widthFix"/>
</view>
<view class="item_info">
<view class="item_info_title">{{item.goods_name}}</view>
<view class="item_info_text_wrap">
<view wx:if="{{item.goods_text}}">{{item.goods_text}}</view>
<view wx:else class="item_info_content"></view>
</view>
<view class="item_info_now_price row align-c">
<view>
<text class="price_symbol">￥</text>
<text class="price">{{item.goods_now_price}}</text>
</view>
<view
class="item_now_price_text {{item.goods_now_text === '业主价' ? 'vipPrice' : ''}}"
wx:if="{{item.goods_now_text}}"
>
{{item.goods_now_text}}
</view>
<view class="goods_add_btn_wrap row con-e" bindtap="handleAddCartPopup">
<l-button l-class="l-btn-circle" height="44" width="44" bg-color="#86C5E1" bind="handleAddCartPopup">
<image mode="widthFix" src="../../assets/icon_add2.png"></image>
</l-button>
</view>
</view>
<view class="item_info_old_price" wx:if="{{item.goods_old_price}}"><text>￥</text>{{item.goods_old_price}}</view>
</view>
</view>
<!-- 购物车按钮 -->
<view class="cart_btn row con-c align-c" bindtap="goToCart">
<view class="cart_num row con-c align-c">{{cart.length}}</view>
<view class="cart_img_wrap">
<image src="../../assets/icon_cart.png" mode="widthFix"></image>
</view>
</view>
<navigator url="/pages/orderDetail/index">订单详情</navigator>
</scroll-view>
<!-- 购物车弹窗 -->
<l-popup show="{{showPopup}}" content-align="center" locked="{{true}}">
<view class="popup_wrap">
<view class="popup_img_wrapper">
<image mode="widthFix" src="../../assets/popup.png"></image>
</view>
<view class="popup_info_wrapper">
<view class="popuo_info_title">咖喱蔬菜大虾</view>
<view class="popup_info_text">新鲜可口的大虾，搭配咖喱与蔬菜，口感舒适，这个夏天，有你就够了</view>
</view>
<view class="popup_footer_wrapper">
<view class="popup_price_row row align-c">
<view class="popup_price_now">￥<text style="font-size: 38rpx">78.00</text></view>
<view class="popup_price_discount row con-c align-c {{popupObj.goods_now_text === '业主价' ? 'vipPrice' : ''}}">{{popupObj.goods_now_text}}</view>
<view class="popup_price_old">¥68.00</view>
</view>
<view class="popup_footer_btn row con-c align-c" bindtap="handleAddCart">加入购物车</view>
</view>
</view>
<view class="popup_close_btn row con-c align-c" bindtap="handleClosePopup">
<view class="popup_close">
<image mode="widthFix" src="../../assets/icon_close.png"></image>
</view>
</view>
</l-popup>
<!-- 添加成功 -->
<l-toast show="{{true}}" duration="100000" l-class="toast_bg" icon="success" icon-color="#fff" title="添加购物车成功" />
</view>
</view>
<Blank></Blank>
pages/commodity/snacks/snacks.wxss
/* pages/home/home/home.wxss */
\ No newline at end of file
Page {
height: 100%;
}
.cates {
height: 100%;
}
.cates_container {
height: 100vh;
display: flex;
}
.left_menu {
width: 160rpx;
background: #F2F3F5;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.menu_item {
height: 136rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #656E7B;
}
.menu_item.active {
color: #5CB5DD;
background: #fff;
border-left: 8rpx solid #86C5E1;
}
.right_content {
position: relative;
flex: 1;
padding: 0 32rpx 0 28rpx;
}
.right_content_title {
height: 100rpx;
padding: 32rpx 0;
font-size: 26rpx;
color: #959DA9;
}
.cart_btn {
position: fixed;
right: 48rpx;
bottom: 160rpx;
width: 104rpx;
height: 104rpx;
border-radius: 50%;
background-color: #86C5E1;
}
.cart_num {
position: absolute;
top: 0;
right: 0;
height: 32rpx;
padding: 0 10rpx;
font-size: 22rpx;
border: 1px solid #86C5E1;
border-radius: 17rpx;
color: #86C5E1;
background-color: #fff;
}
.cart_img_wrap {
width: 48rpx;
height: 48rpx;
}
.item {
width: 100%;
height: 250rpx;
box-sizing: border-box;
}
.item_img {
width: 160rpx;
height: 160rpx;
}
.item_info {
flex: 1;
margin-left: 28rpx;
}
.item_info_title {
font-size: 30rpx;
color: #15191F;
}
.item_info_text_wrap {
width: 100%;
padding: 16rpx 0 24rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #959DA9;
}
.item_info_content {
height: 40rpx;
}
.item_info_now_price {
font-size: 30rpx;
color: #15191F;
}
.price_symbol {
font-size: 22rpx;
}
.item_now_price_text {
width: 78rpx;
height: 32rpx;
margin-left: 4px;
font-size: 18rpx;
color: #EF4E4E;
line-height: 32rpx;
text-align: center;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
}
.vipPrice {
color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
}
.goods_add_btn_wrap {
flex: 1;
}
.l-btn-circle {
border-radius: 50% !important;
font-size: 24rpx;
}
.item_info_old_price {
margin-top: 4rpx;
font-size: 22rpx;
color: #959DA9;
text-decoration:line-through
}
.popup_wrap {
position: relative;
width: 606rpx;
background-color: #fff;
border-radius: 4rpx;
}
.popup_img_wrap {
width: 606rpx;
height: 382rpx;
}
.popup_info_wrapper {
padding: 48rpx 40rpx;
}
.popuo_info_title {
font-size: 34rpx;
color: #15191F;
}
.popup_info_text {
margin-top: 24rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #959DA9;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.popup_footer_wrapper {
margin: 0 40rpx;
padding: 40rpx 0;
border-top: 1px solid #E2E7EF;
}
.popup_price_row {
padding: 10rpx 0;
}
.popup_price_now {
color: #15191F;
}
.popup_price_discount {
width: 90rpx;
height: 36rpx;
margin-left: 10px;
font-size: 22rpx;
color: #EF4E4E;
background: rgba(213, 107, 82, .12);
border-radius: 4rpx;
}
.vipPrice {
color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx;
opacity: 1;
}
.popup_price_old {
margin-left: 20rpx;
font-size: 26rpx;
color: #959DA9;
text-decoration:line-through
}
.popup_footer_btn {
width: 526rpx;
height: 80rpx;
margin-top: 30rpx;
font-size: 30rpx;
color: #fff;
background-color: #86C5E1;
border-radius: 4rpx;
}
.popup_close_btn {
width: 80rpx;
height: 80rpx;
margin: 48rpx auto 0;
background: rgba(254, 252, 249, 0.5);
border-radius: 50%;
}
.popup_close {
width: 40rpx;
height: 40rpx;
}
.toast_bg {
min-width: 262rpx !important;
min-height: 262prx !important;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment