Skip to content

严立 / mini-shimao

Go to a project
Commit 667f630d by wjw
Options

ww-购物车添加动画

parent b63396c8
Inline Side-by-side
Showing with 204 additions and 164 deletions
pages/commodity/snacks/snacks.js
...@@ -5,6 +5,7 @@ Page({ ...@@ -5,6 +5,7 @@ Page({
rightTitle: '优惠套餐', rightTitle: '优惠套餐',
showPopup: false, showPopup: false,
showAddSucc: false, showAddSucc: false,
hideAnimation: true,
leftMenuList: [ leftMenuList: [
{ {
id: 0, id: 0,
...@@ -103,6 +104,12 @@ Page({ ...@@ -103,6 +104,12 @@ Page({
goods_now_text: '业主价' goods_now_text: '业主价'
} }
}, },
onLoad() {
this.animationDown = wx.createAnimation({
duration: 400,
timingFunction: 'ease'
})
},
handleItemTap(e) { handleItemTap(e) {
let index = e.currentTarget.dataset.index let index = e.currentTarget.dataset.index
let rightTitle = this.data.leftMenuList[index].tab let rightTitle = this.data.leftMenuList[index].tab
...@@ -125,12 +132,28 @@ Page({ ...@@ -125,12 +132,28 @@ Page({
}) })
}, },
handleAddCart() { handleAddCart() {
let showPopup = false let showPopup = false
let showAddSucc = true let showAddSucc = true
this.setData({ let hideAnimation = false
showPopup, this.animationDown.translateY(180).step()
showAddSucc this.setData({
}) showPopup,
showAddSucc,
hideAnimation,
})
setTimeout(() => {
this.setData({
animationDown: this.animationDown.export()
})
})
setTimeout(() => {
this.animationDown.translateY(0).step()
let hideAnimation = true
this.setData({
hideAnimation,
animationDown: this.animationDown.export()
})
}, 400)
}, },
goToCart() { goToCart() {
wx.navigateTo({ wx.navigateTo({
......
pages/commodity/snacks/snacks.wxml
...@@ -46,39 +46,41 @@ ...@@ -46,39 +46,41 @@
</view> </view>
</view> </view>
<!-- 购物车按钮 --> <!-- 购物车按钮 -->
<view class="cart-btn row con-c align-c" bindtap="goToCart"> <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-num row con-c align-c">{{cart.length}}</view>
<view class="cart-img-wrap"> <view class="cart-img-wrap">
<image src="../../../image/cart.png" mode="widthFix"></image> <image src="../../../image/cart.png" mode="widthFix"></image>
</view>
</view> </view>
</view>
</scroll-view>
<!-- 购物车弹窗 --> <!-- 购物车弹窗 -->
<l-popup show="{{showPopup}}" content-align="center" locked="{{true}}"> <l-popup show="{{showPopup}}" content-align="center" locked="{{true}}">
<view class="popup-wrap"> <view class="popup-wrap">
<view class="popup-img-wrapper"> <view class="popup-img-wrapper">
<image mode="widthFix" src="./image/popup.png"></image> <image mode="widthFix" src="./image/popup.png"></image>
</view> </view>
<view class="popup-info-wrapper"> <view class="popup-info-wrapper">
<view class="popuo-info-title">咖喱蔬菜大虾</view> <view class="popuo-info-title">咖喱蔬菜大虾</view>
<view class="popup-info-text">新鲜可口的大虾，搭配咖喱与蔬菜，口感舒适，这个夏天，有你就够了</view> <view class="popup-info-text">新鲜可口的大虾，搭配咖喱与蔬菜，口感舒适，这个夏天，有你就够了</view>
</view> </view>
<view class="popup-footer-wrapper"> <view class="popup-footer-wrapper">
<view class="popup-price-row row align-c"> <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-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-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 class="popup-price-old">¥68.00</view>
</view> </view>
<view class="popup-footer-btn row con-c align-c" bindtap="handleAddCart">加入购物车</view> <view class="popup-footer-btn row con-c align-c" bindtap="handleAddCart">加入购物车</view>
</view> </view>
</view> </view>
<view class="popup-close-btn row con-c align-c" bindtap="handleClosePopup"> <view class="popup-close-btn row con-c align-c" bindtap="handleClosePopup">
<view class="popup-close"> <view class="popup-close">
<image mode="widthFix" src="../../../image/icon_close.png"></image> <image mode="widthFix" src="../../../image/icon_close.png"></image>
</view> </view>
</view> </view>
</l-popup> </l-popup>
<!-- 添加成功 --> <!-- 添加成功 -->
<l-toast show="{{showAddSucc}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" /> <l-toast show="{{showAddSucc}}" l-image-class="toast-image" l-class="toast-bg" image="/image/success.png" title="添加购物车成功" />
<!-- 加入购物车动画 -->
<view class="redPoint {{hideAnimation ? 'animation-hide' : ''}}" animation="{{animationDown}}"></view>
</scroll-view>
</view> </view>
</view> </view>
\ No newline at end of file
pages/commodity/snacks/snacks.wxss
Page { Page {
height: 100%; height: 100%;
} }
.cates { .cates {
height: 100%; height: 100%;
} }
.cates-container { .cates-container {
height: 100vh; height: 100vh;
display: flex; display: flex;
} }
.left-menu { .left-menu {
width: 160rpx; width: 160rpx;
background: #F2F3F5; background: #F2F3F5;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
color: transparent; color: transparent;
} }
.menu-item { .menu-item {
height: 136rpx; height: 136rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 26rpx; font-size: 26rpx;
color: #656E7B; color: #656E7B;
} }
.menu-item.active { .menu-item.active {
color: #5CB5DD; color: #5CB5DD;
font-weight: 600; font-weight: 600;
background: #fff; background: #fff;
border-left: 8rpx solid #86C5E1; border-left: 8rpx solid #86C5E1;
} }
.right-content { .right-content {
position: relative; position: relative;
flex: 1; flex: 1;
padding: 0 32rpx 0 28rpx; padding: 0 32rpx 0 28rpx;
} }
.right-content-title { .right-content-title {
height: 100rpx; height: 100rpx;
padding: 32rpx 0; padding: 32rpx 0;
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959DA9;
} }
.cart-btn { .cart-btn {
position: fixed; position: fixed;
right: 48rpx; right: 48rpx;
bottom: 160rpx; bottom: 160rpx;
width: 104rpx; width: 104rpx;
height: 104rpx; height: 104rpx;
border-radius: 50%; border-radius: 50%;
background-color: #86C5E1; background-color: #86C5E1;
} }
.cart-num { .cart-num {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
height: 32rpx; height: 32rpx;
padding: 0 12rpx; padding: 0 12rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
border: 1px solid #86C5E1; border: 1px solid #86C5E1;
border-radius: 17rpx; border-radius: 17rpx;
color: #86C5E1; color: #86C5E1;
background-color: #fff; background-color: #fff;
} }
.cart-img-wrap { .cart-img-wrap {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
}
.redPoint {
position: fixed;
right: 80rpx;
bottom: 560rpx;
width: 15px;
height: 15px;
background-color: #E66060;
border-radius: 50%;
}
.animation-hide {
display: none;
} }
.item { .item {
width: 100%; width: 100%;
height: 250rpx; height: 250rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.item-img { .item-img {
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
} }
.item-info { .item-info {
flex: 1; flex: 1;
margin-left: 28rpx; margin-left: 28rpx;
} }
.item-info-title { .item-info-title {
font-size: 30rpx; font-size: 30rpx;
color: #15191F; color: #15191F;
font-weight: 600; font-weight: 600;
} }
.item-info-text-wrap { .item-info-text-wrap {
width: 100%; width: 100%;
padding: 16rpx 0 24rpx; padding: 16rpx 0 24rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
color: #959DA9; color: #959DA9;
} }
.item-info-content { .item-info-content {
height: 40rpx; height: 40rpx;
} }
.item-info-now-price { .item-info-now-price {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #15191F; color: #15191F;
} }
.price-symbol { .price-symbol {
font-size: 22rpx; font-size: 22rpx;
} }
.item-now-price-text { .item-now-price-text {
width: 78rpx; width: 78rpx;
height: 32rpx; height: 32rpx;
margin-left: 4px; margin-left: 4px;
font-size: 20rpx; font-size: 20rpx;
font-weight: 500; font-weight: 500;
color: #EF4E4E; color: #EF4E4E;
line-height: 32rpx; line-height: 32rpx;
text-align: center; text-align: center;
background: rgba(213, 107, 82, .12); background: rgba(213, 107, 82, .12);
border-radius: 4rpx; border-radius: 4rpx;
} }
.vipPrice { .vipPrice {
color: #E8D0AF; color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx; border-radius: 4rpx;
opacity: 1; opacity: 1;
} }
.goods-add-btn-wrap { .goods-add-btn-wrap {
flex: 1; flex: 1;
} }
.l-btn-circle { .l-btn-circle {
border-radius: 50% !important; border-radius: 50% !important;
font-size: 24rpx; font-size: 24rpx;
} }
.item-info-old-price { .item-info-old-price {
margin-top: 4rpx; margin-top: 4rpx;
font-size: 22rpx; font-size: 22rpx;
color: #C2C7CF; color: #C2C7CF;
text-decoration:line-through text-decoration:line-through
} }
.popup-wrap { .popup-wrap {
position: relative; position: relative;
width: 606rpx; width: 606rpx;
background-color: #fff; background-color: #fff;
border-radius: 4rpx; border-radius: 4rpx;
} }
.popup-img-wrap { .popup-img-wrap {
width: 606rpx; width: 606rpx;
height: 382rpx; height: 382rpx;
} }
.popup-info-wrapper { .popup-info-wrapper {
padding: 48rpx 40rpx; padding: 48rpx 40rpx;
} }
.popuo-info-title { .popuo-info-title {
font-size: 34rpx; font-size: 34rpx;
color: #15191F; color: #15191F;
} }
.popup-info-text { .popup-info-text {
margin-top: 24rpx; margin-top: 24rpx;
font-size: 22rpx; font-size: 22rpx;
line-height: 32rpx; line-height: 32rpx;
color: #959DA9; color: #959DA9;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
} }
.popup-footer-wrapper { .popup-footer-wrapper {
margin: 0 40rpx; margin: 0 40rpx;
padding: 40rpx 0; padding: 40rpx 0;
border-top: 1px solid #E2E7EF; border-top: 1px solid #E2E7EF;
} }
.popup-price-row { .popup-price-row {
padding: 10rpx 0; padding: 10rpx 0;
} }
.popup-price-now { .popup-price-now {
color: #15191F; color: #15191F;
} }
.popup-price-discount { .popup-price-discount {
width: 90rpx; width: 90rpx;
height: 36rpx; height: 36rpx;
margin-left: 10px; margin-left: 10px;
font-size: 22rpx; font-size: 22rpx;
color: #EF4E4E; color: #EF4E4E;
background: rgba(213, 107, 82, .12); background: rgba(213, 107, 82, .12);
border-radius: 4rpx; border-radius: 4rpx;
} }
.vipPrice { .vipPrice {
color: #E8D0AF; color: #E8D0AF;
background: linear-gradient(180deg, #3F4357 0%, #252532 100%); background: linear-gradient(180deg, #3F4357 0%, #252532 100%);
border-radius: 4rpx; border-radius: 4rpx;
opacity: 1; opacity: 1;
} }
.popup-price-old { .popup-price-old {
margin-left: 20rpx; margin-left: 20rpx;
font-size: 26rpx; font-size: 26rpx;
color: #959DA9; color: #959DA9;
text-decoration:line-through text-decoration:line-through
} }
.popup-footer-btn { .popup-footer-btn {
width: 526rpx; width: 526rpx;
height: 80rpx; height: 80rpx;
margin-top: 30rpx; margin-top: 30rpx;
font-size: 30rpx; font-size: 30rpx;
color: #fff; color: #fff;
background-color: #86C5E1; background-color: #86C5E1;
border-radius: 4rpx; border-radius: 4rpx;
} }
.popup-close-btn { .popup-close-btn {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
margin: 48rpx auto 0; margin: 48rpx auto 0;
background: rgba(254, 252, 249, 0.5); background: rgba(254, 252, 249, 0.5);
border-radius: 50%; border-radius: 50%;
} }
.popup-close { .popup-close {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
.toast-bg { .toast-bg {
min-width: 262rpx !important; min-width: 262rpx !important;
min-height: 262prx !important; min-height: 262prx !important;
} }
.toast-image { .toast-image {
} }
image { image {
width: 100%; width: 100%;
height: 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