fe / yoho-miniapp-eshop · Commits

Go to a project

Authored by yyq
Commit a02142a24c867007795082c755a3efde076e09c9 1 parent af4177d8

cart

Inline Side-by-side
Showing 12 changed files with 251 additions and 272 deletions
Component({
properties: {
item: {
type: Object,
value: {},
observer: '_itemChange'
},
index: {
type: Number,
value: 0
}
},
methods: {
_itemChange(item) {
if (item) {
item.mark_price = item.sales_price;
switch (item.goods_type) {
case 'price_gift':
item.sales_price = +item.last_price;
break;
case 'gift':
item.sales_price = 0;
break;
default:
if (item.last_vip_price < item.sales_price) {
item.sales_price = item.last_vip_price;
}
break;
}
if (item.mark_price <= item.sales_price) {
delete item.mark_price;
}
item.isVipPrice = item.vip_discount_money > 0;
this.setData({item});
}
},
itemTapped() {
this.triggerEvent('itemTapped', this.data.item);
}
}
});
<wxs src="../../../wxs/helper.wxs" module="helper" />
<view class="goods-item" bindtap="itemTapped">
<view class="choose-btn">
<block wx:if="{{item.goods_type !== 'gift' && !item.batch_no && !item.bundle_activity_id}}">
<text class="iconfont icon-duihao-fill" wx:if="{{item.selected === 'Y'}}"></text>
<text class="iconfont icon-round" wx:else></text>
</block>
</view>
<image class="thumb" src="{{helper.image(item.goods_images || item.goods_image, 76, 100)}}">
<view class="goods-type price-gift-tag" wx:if="{{item.goods_type === 'price_gift'}}">
<text>加价购</text>
</view>
<view class="goods-type gift-tag" wx:if="{{item.goods_type === 'gift'}}">
<text>赠品</text>
</view>
<view class="goods-type virtual-tag" wx:if="{{item.goods_type === 'ticket'}}">
<text>虚拟商品</text>
</view>
<view class="goods-type advance-tag" wx:if="{{item.goods_type === 'advance'}}">
<text>预售</text>
</view>
<view class="goods-type low-storage-tag" wx:if="{{item.buy_number > item.storage_number}}">
<text>库存不足</text>
</view>
</image>
<view class="info">
<view class="info-wrap">
<view class="name">{{item.product_name}}</view>
<view class="color-size">颜色:{{item.factory_goods_name}} 尺码:{{item.size_name}}</view>
<view class="price">
<text class="sale-price">¥ {{helper.round(item.sales_price)}}</text>
<text wx:if="{{item.mark_price}}" class="mark-price">¥ {{helper.round(item.mark_price)}}</text>
<text class="vip-price-tig" wx:if="{{item.isVipPrice}}">VIP</text>
</view>
<view class="price-down" wx:if="{{item.price_down > 0}}">
<text>已降¥{{item.price_down}}</text>
</view>
</view>
</view>
<view class="buy-num">
<text>x {{item.buy_number}}</text>
</view>
</view>
@import "../../../iconfont.wxss";
.goods-item {
width: 100%;
height: 200rpx;
line-height: 200rpx;
padding: 20rpx 0;
font-size: 26rpx;
display: flex;
flex-direction: row;
position: relative;
}
.goods-item:before {
content: '';
height: 1rpx;
position: absolute;
left: 100rpx;
right: 0;
top: -1rpx;
background-color: #f0f0f0;
}
.goods-item.top-none:before {
display: none;
}
.goods-item .red {
color: #d0021b;
}
.goods-item .choose-btn {
width: 100rpx;
text-align: center;
display: flex;
flex-direction: row;
}
.goods-item .choose-btn .iconfont {
margin: auto;
}
.goods-item .thumb {
width: 150rpx;
height: 200rpx;
background-color: #f3f3f3;
display: flex;
flex-direction: row;
position: relative;
}
.goods-item .thumb .goods-type {
width: 100%;
height: 30rpx;
line-height: 30rpx;
font-size: 20rpx;
background-color: #444;
color: #fff;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
}
.goods-item .thumb .price-gift-tag {
background-color: #fc1261;
}
.goods-item .thumb .gift-tag {
background-color: #85c45c;
}
.goods-item .thumb .low-storage-tag {
background-color: #b0b0b0;
}
.goods-item .thumb .virtual-tag {
background-color: #c80813;
}
.goods-item .info {
line-height: 1.5;
display: flex;
flex-direction: row;
}
.goods-item .info-wrap {
width: 380rpx;
padding-left: 20rpx;
}
.goods-item .info-wrap .name {
line-height: 1.4;
direction: flex;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 20rpx;
}
.goods-item .info-wrap .color-size {
padding: 10rpx 0;
line-height: 1.3;
color: #b0b0b0;
font-size: 24rpx;
}
.goods-item .info-wrap .sale-price {
color: #d0021b;
margin-right: 10rpx;
}
.goods-item .info-wrap .mark-price {
color: #b0b0b0;
margin-right: 10rpx;
text-decoration: line-through;
}
.goods-item .info-wrap .vip-price-tig {
height: 28rpx;
line-height: 28rpx;
padding: 0 14rpx;
border-radius: 16rpx;
font-size: 22rpx;
color: #fff;
background-color: #d0021b;
}
.goods-item .buy-num {
padding-top: 20rpx;
line-height: 1.4;
color: #b0b0b0;
position: absolute;
right: 30rpx;
}
... ... @@ -197,6 +197,10 @@ const formatOrdinaryCartData = (data) => {
ordinaryCart.isValidGoodsSelectAll = allGoodsSelect.val();
ordinaryCart.shoppingCartData = data.shopping_cart_data;
if (data.promotion_info && data.promotion_info.length) {
ordinaryCart.promotionInfo = data.promotion_info;
}
console.log(ordinaryCart);
return {
isEmptyCart,
... ...
{
"navigationBarTitleText": "购物车",
"usingComponents": {
"cart-item": "/components/product/cart-item/cart-item"
"cart-item": "/components/cart/item/item",
"cart-edit": "/components/cart/edit/edit"
}
}
... ...
<wxs src="../../wxs/helper.wxs" module="helper" />
<import src="./template/cart/goods-pool.wxml"/>
<import src="./template/cart/goods-list.wxml"/>
<import src="./template/cart/gift-list.wxml"/>
<import src="./template/cart/invalid-list.wxml"/>
<block wx:if="{{isEmptyCart}}">
<view class="empty-cart">
<image src='../../static/images/empty_cart.png' class='empty-img'></image>
<text class='empty-desc'>购物车空空如也\n去挑选中意的商品</text>
<view class='shopping-btn' bindtap='goShopping'>去逛逛</view>
</view>
<view class="empty-cart">
<image src='../../static/images/empty_cart.png' class='empty-img'></image>
<text class='empty-desc'>购物车空空如也\n去挑选中意的商品</text>
<view class='shopping-btn' bindtap='goShopping'>去逛逛</view>
</view>
</block>
<block wx:else>
<scroll-view scroll-y style="height: 100%;">
<view class="tips-wrap">
<view class="hold-text">
<text>{{priceDownTips || shippingCostTips}}</text>
<scroll-view scroll-y style="height: 100%;">
<view class="tips-wrap" wx:if="{{priceDownTips || shippingCostTips}}">
<view class="hold-text">
<text>{{priceDownTips || shippingCostTips}}</text>
</view>
<view wx:if="{{shippingCostTips || priceDownTips}}" class="fixed-top-tips">
<view wx:if="{{priceDownTips}}" class="price-down-tips">
<text>{{priceDownTips}}</text>
<text class="iconfont icon-top" bindtap='tapPriceDownTipsAction'></text>
</view>
<view wx:else class="shipping-cost-tips">{{shippingCostTips}}</view>
<view class="edit-cart-btn" bindtap="editCartAction">{{isEditing ? '完成' : '编辑商品'}}</view>
</view>
</view>
<!-- 商品池 -->
<template is="cartGoodsPool" data="{{goodsPoolList, isEditing}}"/>
<!-- 商品列表 -->
<view wx:if="{{goodsList}}">
<template is="cartGoodsList" data="{{goodsList, isEditing}}"/>
<view class="split-line"></view>
</view>
<!-- 加价购&赠品 -->
<template is="cartGiftList" data="{{giftList: gGiftAndPriceGiftList}}"/>
<!-- 无效商品 -->
<template is="cartInvalidList" data="{{invalidGoodsList}}"/>
<!-- 已参与活动 -->
<view class="used-promotion" wx:if="{{promotionInfo}}">
<view class="promotion-title">已参与活动</view>
<block wx:for="{{promotionInfo}}" wx:key="unique">
<view class="promotion-item">• {{item.promotion_title}}</view>
</block>
</view>
<!-- 总计价格 -->
<block wx:if="{{shoppingCartData}}">
<view class="total-cost">{{shoppingCartData.promotion_formula}}</view>
<view class="split-line"></view>
<view class="footer-wrap">
<view class="footer-fixed">
<view class="select-all-btn">
<text class="iconfont icon-duihao-fill" wx:if="{{isSelectAll}}"></text>
<text class="iconfont icon-round" wx:else></text>
<text>全选</text>
</view>
<view class="settlement-block">
<view class="footer-total-cost">
<text class="cost">总计¥{{helper.round(shoppingCartData.last_order_amount)}}({{shoppingCartData.selected_goods_count}})件</text>
<text class="no-freight">不含运费</text>
</view>
<view wx:if="{{shippingCostTips || priceDownTips}}" class="fixed-top-tips">
<view wx:if="{{priceDownTips}}" class="price-down-tips">
<text>{{priceDownTips}}</text>
<text class="iconfont icon-top" bindtap='tapPriceDownTipsAction'></text>
</view>
<view wx:else class="shipping-cost-tips">{{shippingCostTips}}</view>
<view class="edit-cart-btn" bindtap="editCartAction">{{isEditing ? '完成' : '编辑商品'}}</view>
<view class="payment-btn" bindtap="paymentAction" style="{{shoppingCartData.selected_goods_count > 0 ? '' : 'background-color: #b0b0b0'}}">
<text>结算</text>
</view>
</view>
</view>
</view>
</block>
<template is="cartGoodsPool" data="{{goodsPoolList}}"/>
</scroll-view>
</scroll-view>
</block>
... ...
@import "./template/cart/goods-pool.wxss";
@import "./template/cart/gift-list.wxss";
@import "./template/cart/invalid-list.wxss";
page {
height: 100%;
... ... @@ -70,7 +72,6 @@ page {
top: 50%;
right: 30rpx;
margin-top: -30rpx;
font-family: PingFang-SC-Regular;
color: #d0021b;
}
... ... @@ -79,3 +80,94 @@ page {
height: 20rpx;
background-color: #eee;
}
.used-promotion {
padding: 10rpx 30rpx;
border-bottom: 1rpx solid #f0f0f0;
font-size: 26rpx;
line-height: 1.4;
}
.used-promotion .promotion-title {
font-size: 30rpx;
line-height: 2;
}
.total-cost {
padding: 20rpx 30rpx;
font-size: 26rpx;
}
.footer-wrap {
height: 130rpx;
background-color: #eee;
}
.footer-wrap .footer-fixed {
width: 100%;
height: 130rpx;
padding: 20rpx 0;
background-color: #fff;
border-top: 1rpx solid #f0f0f0;
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
}
.footer-fixed .select-all-btn {
width: 90rpx;
font-size: 22rpx;
text-align: center;
}
.footer-fixed .select-all-btn > text {
display: block;
}
.footer-fixed .select-all-btn .iconfont {
font-size: 40rpx;
line-height: 1.5;
}
.footer-fixed .settlement-block {
position: absolute;
top: 20rpx;
right: 30rpx;
}
.footer-fixed .settlement-block text {
display: block;
}
.footer-fixed .settlement-block .footer-total-cost {
padding-right: 174rpx;
text-align: right;
}
.footer-fixed .footer-total-cost .cost {
font-size: 34rpx;
color: #ce0a24;
margin-top: 6rpx;
}
.footer-fixed .footer-total-cost .no-freight {
font-size: 22rpx;
color: #b0b0b0;
line-height: 1.3;
}
.footer-fixed .settlement-block .payment-btn {
font-size: 30rpx;
width: 160rpx;
height: 90rpx;
line-height: 90rpx;
color: #fff;
background-color: #ce0a24;
text-align: center;
position: absolute;
top: 0;
right: 0;
border-radius: 10rpx;
}
... ...
<import src="./goods-list.wxml"/>
<import src="./promotion-list.wxml"/>
<template name="cartGoodsPool">
<div class="goods-pool-list">
<block wx:for="{{goodsPoolList}}" wx:key="unique">
<template is="cartPromotionList" data="{{promotion_list: item.promotion_list, isPromotionExpanded: item.isPromotionExpanded}}"/>
<template is="cartPromotionList" data="{{promotionList: item.promotion_list, isPromotionExpanded: item.isPromotionExpanded}}"/>
<block wx:if="{{item.sub_pool}}">
<block wx:for="{{item.sub_pool}}" wx:for-item="sItem" wx:for-index="sIndex" wx:key="unique">
<template is="cartPromotionList" data="{{promotion_list: sItem.promotion_list, isPromotionExpanded: item.isPromotionExpanded, isSub: true}}"/>
<template is="cartPromotionList" data="{{promotionList: sItem.promotion_list, isPromotionExpanded: item.isPromotionExpanded, isSub: true}}"/>
<view class="list-warp">
<block wx:for="{{sItem.goods_list}}" wx:for-item="spgItem" wx:for-index="spgIndex" wx:key="unique">
<cart-item item="{{spgItem}}" index="{{spgIndex}}"></cart-item>
</block>
</view>
<template is="cartGoodsList" data="{{goodsList: sItem.goods_list, isEditing}}"/>
</view>
</block>
</block>
<!-- TODO 套餐 -->
<view class="bundle-goods" wx:if="{{item.pool_type === 3 && item.pool_batch_no}}">
<view class='bundle-title'>
<view class="choose-btn">
<text class="iconfont icon-duihao-fill" wx:if="{{item.selected === 'Y'}}"></text>
<text class="iconfont icon-round" wx:else></text>
</view>
<view class="bundle-tag">优惠套装</view>
<view class="bundle-name">{{item.pool_title}}</view>
<view class='bundle-buy-num' wx:if="{{!isEditing}}">x {{item.pool_buy_number}}</view>
</view>
<view class="edit-wrap" wx:if="{{isEditing}}">
<view class="bundle-edit-title">优惠数量</view>
<view class="bundle-edit-num">
<cart-edit goods="{{item}}" type="{{'bundle'}}"></cart-edit>
</view>
<view class='bundle-buy-num'>x {{item.pool_buy_number}}</view>
</view>
</view>
<block wx:if="{{item.goods_list.length}}">
<block wx:for="{{item.goods_list}}" wx:for-item="sgItem" wx:for-index="sgIndex" wx:key="unique">
<cart-item item="{{sgItem}}" index="{{sgIndex}}"></cart-item>
</block>
</block>
<template is="cartGoodsList" data="{{goodsList: item.goods_list, isEditing}}"/>
<view class="split-line"></view>
</block>
... ...
... ... @@ -8,3 +8,56 @@
border-bottom: 1rpx solid #f0f0f0;
}
.goods-pool-list .bundle-title {
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #f0f0f0;
font-size: 0;
}
.goods-pool-list .bundle-title > view {
display: inline-block;
font-size: 24rpx;
}
.goods-pool-list .bundle-title .choose-btn {
width: 90rpx;
text-align: center;
}
.goods-pool-list .bundle-title .bundle-tag {
line-height: 1;
padding: 5rpx 7rpx;
border-radius: 4rpx;
background-color: #d0021b;
color: #fff;
margin-right: 10rpx;
}
.goods-pool-list .bundle-goods .bundle-buy-num {
position: absolute;
right: 30rpx;
font-size: 26rpx;
color: #b0b0b0;
}
.goods-pool-list .edit-wrap {
padding: 16rpx 90rpx;
padding-right: 0;
border-bottom: 1rpx solid #f0f0f0;
font-size: 0;
margin-top: -4rpx;
background-color: #fff;
}
.goods-pool-list .edit-wrap > view {
display: inline-block;
font-size: 26rpx;
line-height: 80rpx;
vertical-align: middle;
}
.goods-pool-list .edit-wrap .bundle-edit-title {
width: 170rpx;
}
... ...
<template name="cartPromotionList">
<view class="promotion-wrap {{isSub ? 'sub-promotion-wrap' : ''}}" wx:if="{{promotion_list}}">
<view class="promotion-wrap {{isSub ? 'sub-promotion-wrap' : ''}}" wx:if="{{promotionList}}">
<view class="inner-wrap">
<block wx:for="{{promotion_list}}" wx:key="unique">
<block wx:for="{{promotionList}}" wx:key="unique">
<view class="promotion-item" data-promotion="{{item}}" bindtap="navToPromotionPage">
<view class="right-option">
<text class="promotion-status {{item.soldOut ? 'soldOut' : ''}}">{{item.statuString}}</text>
... ... @@ -15,7 +15,7 @@
</view>
</block>
</view>
<block wx:if="{{promotion_list.length > 1}}">
<block wx:if="{{promotionList.length > 1}}">
<view class="show-more-promotion" bindtap="flexOrUnflexPromotion">
<text class="iconfont {{isPromotionExpanded ? 'icon-top' : 'icon-bottom'}}"></text>
</view>
... ...
... ... @@ -8,7 +8,7 @@
}
.sub-promotion-wrap {
margin-left: 100rpx;
margin-left: 90rpx;
padding-left: 0;
}
... ...