fe / yoho-miniapp-eshop · Commits

Go to a project

Authored by yyq
Commit 3cb02db293950853665cedf2b6169d790cce33b3 1 parent a02142a2

save

Inline Side-by-side
Showing 15 changed files with 516 additions and 2 deletions
Component({
properties: {
goods: {
type: Object,
value: {},
observer: '_goodsChange'
},
type: {
type: String,
value: ''
}
},
methods: {
_goodsChange(goods) {
if (!goods) {
return;
}
if (this.data.type === 'bundle') {
goods.min_buy_number = 1;
goods.buy_number = goods.pool_buy_number;
goods.storage_number = goods.pool_storage_number;
} else {
goods.colorSize = `颜色:${goods.factory_goods_name} 尺码:${goods.size_name}`;
}
if (goods.buy_number - goods.min_buy_number <= 0) {
goods.cutBtnHide = true;
}
if (goods.buy_number - goods.storage_number >= 0) {
goods.plusBtnHide = true;
}
this.setData({goods});
},
itemTapped() {
this.triggerEvent('itemTapped', this.data.item);
}
}
});
... ...
{
"component": true
}
... ...
<view class="goods-edit-wrap">
<view class="num-edit">
<view class="cut-btn opt-btn {{goods.cutBtnHide ? 'disable' : ''}}"></view>
<view class="buy-num">
<text>{{goods.buy_number}}</text>
</view>
<view class="plus-btn opt-btn {{goods.plusBtnHide ? 'disable' : ''}}"></view>
</view>
<view class="color-size" wx:if="{{goods.colorSize}}">
<text class="color-size-text">{{goods.colorSize}}</text>
<text class="iconfont icon-bottom"></text>
</view>
</view>
... ...
@import "../../../iconfont.wxss";
.goods-edit-wrap {
width: 320rpx;
border: 1rpx solid #e0e0e0;
border-radius: 6rpx;
overflow: hidden;
}
.goods-edit-wrap .num-edit {
width: 100%;
height: 70rpx;
line-height: 70rpx;
display: flex;
flex-direction: row;
}
.num-edit > view {
display: flex;
flex-direction: row;
}
.num-edit .buy-num {
width: 180rpx;
text-align: center;
border-left: 1rpx solid #e0e0e0;
border-right: 1rpx solid #e0e0e0;
}
.num-edit .buy-num > text {
width: 100%;
}
.num-edit .opt-btn {
width: 70rpx;
position: relative;
}
.num-edit .opt-btn:before {
content: "";
width: 22rpx;
border-top: 5rpx solid #666;
position: absolute;
top: 50%;
left: 50%;
margin-top: -2rpx;
margin-left: -10rpx;
}
.num-edit .plus-btn:after {
content: "";
height: 22rpx;
border-left: 5rpx solid #666;
position: absolute;
top: 50%;
left: 50%;
margin-top: -9rpx;
margin-left: -1rpx;
}
.num-edit .disable {
opacity: 0.5;
}
.goods-edit-wrap .color-size {
width: 100%;
height: 70rpx;
line-height: 70rpx;
border-top: 1rpx solid #e0e0e0;
position: relative;
}
.color-size .color-size-text {
width: 90%;
padding: 0 10rpx;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
display: block;
}
.color-size .iconfont {
font-size: 32rpx;
position: absolute;
right: 10rpx;
top: 0;
}
... ...
const tagTypeList = ['price_gift', 'gift', 'ticket', 'advance'];
Component({
properties: {
item: {
type: Object,
value: {},
observer: '_itemChange'
},
index: {
type: Number,
value: 0
},
isEditing: {
type: Boolean,
value: false
},
isInvalid: {
type: Boolean,
value: false
}
},
methods: {
_itemChange(item) {
if (item) {
item.mark_price = item.sales_price;
switch (item.goods_type) {
case 'price_gift':
item.sales_price = +item.last_price;
if (item.storage_number > 1) {
item.storage_number = 1;
}
break;
case 'gift':
item.sales_price = 0;
if (item.storage_number > 1) {
item.storage_number = 1;
}
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;
}
if (tagTypeList.indexOf(item.goods_type) < 0 && item.buy_number > item.storage_number) {
item.goods_type = 'lowStorage';
}
item.isVipPrice = item.vip_discount_money > 0;
this.setData({item});
}
},
itemTapped() {
this.triggerEvent('itemTapped', this.data.item);
}
}
});
... ...
{
"component": true,
"usingComponents": {
"cart-edit": "/components/cart/edit/edit"
}
}
... ...
<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 && !isInvalid}}">
<text class="iconfont icon-duihao-fill" wx:if="{{item.selected === 'Y'}}"></text>
<text class="iconfont icon-round" wx:else></text>
</block>
<view class="invalid-tag" wx:if="{{isInvalid}}">失效</view>
</view>
<image class="thumb" src="{{helper.image(item.goods_images || item.goods_image, 76, 100)}}">
<block wx:if="{{!isInvalid}}">
<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.goods_type === 'lowStorage'}}">
<text>库存不足</text>
</view>
</block>
</image>
<view class="info">
<view class="info-wrap">
<view class="name">{{item.product_name}}</view>
<block wx:if="{{!isInvalid}}">
<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 class="info-edit" wx:if="{{isEditing}}">
<view class="edit-block">
<cart-edit goods="{{item}}"></cart-edit>
<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>
</view>
</block>
</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: 90rpx;
text-align: center;
display: flex;
flex-direction: row;
position: relative;
}
.goods-item .choose-btn .iconfont {
font-size: 40rpx;
}
.goods-item .choose-btn .invalid-tag {
font-size: 20rpx;
line-height: 1;
color: #fff;
background-color: #666;
padding: 4rpx 10rpx;
border-radius: 13rpx;
position: absolute;
top: 50%;
left: 50%;
margin-left: -24rpx;
margin-top: -12rpx;
}
.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: 400rpx;
padding-left: 20rpx;
position: relative;
}
.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;
}
.goods-item .info-edit {
width: 100%;
height: 200rpx;
line-height: 200rpx;
position: absolute;
top: 0;
background-color: #fff;
}
.goods-item .info-edit .edit-block {
display: inline-block;
vertical-align: middle;
}
.goods-item .info-edit .price {
line-height: 1;
margin-top: 20rpx;
}
... ...
... ... @@ -64,13 +64,19 @@
<text>全选</text>
</view>
<view class="settlement-block">
<view class="delete-btn footer-option-btn" bindtap="delChoosedAction" wx:if="{{isEditing}}">
<text>删除</text>
</view>
<block wx:else>
<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 class="payment-btn" bindtap="paymentAction" style="{{shoppingCartData.selected_goods_count > 0 ? '' : 'background-color: #b0b0b0'}}">
<view class="payment-btn footer-option-btn" bindtap="paymentAction" style="{{shoppingCartData.selected_goods_count > 0 ? '' : 'background-color: #b0b0b0'}}">
<text>结算</text>
</view>
</block>
</view>
</view>
</view>
... ...
... ... @@ -158,7 +158,7 @@ page {
line-height: 1.3;
}
.footer-fixed .settlement-block .payment-btn {
.footer-fixed .settlement-block .footer-option-btn {
font-size: 30rpx;
width: 160rpx;
height: 90rpx;
... ...
<template name="cartGiftList">
<block wx:if="{{giftList}}">
<view class="gift-wrap">
<view class="gift-cell" wx:for="{{giftList}}" wx:key="unique">
<text class="iconfont" wx:if="{{item.isGift}}"></text>
<text class="iconfont" wx:else></text>
<text class="giftOrPriceTitle">{{item.title}}</text>
<view class="right-option">
<text class="{{item.showArrow ? '' : 'disable-text'}}">{{item.statusString}}</text>
<text class="iconfont icon-right" wx:if="{{item.showArrow}}"></text>
</view>
</view>
<view class="split-line"></view>
</view>
</block>
</template>
... ...
<template name="cartGoodsList">
<block wx:if="{{goodsList.length}}">
<block wx:for="{{goodsList}}" wx:key="unique">
<cart-item item="{{item}}" index="{{index}}" isEditing="{{isEditing}}" isInvalid="{{isInvalid}}"></cart-item>
</block>
</block>
</template>
... ...
<import src="./goods-list.wxml"/>
<template name="cartInvalidList">
<view class="invalid-wrap" wx:if="{{invalidGoodsList}}">
<template is="cartGoodsList" data="{{goodsList: invalidGoodsList, isInvalid: true}}"/>
<view class="clean-invalid-wrap">
<text class="clean-invalid-btn" bindtap="cleanInvalidAction">清空无效商品</text>
</view>
<view class="split-line"></view>
</view>
</template>
... ...
.clean-invalid-wrap {
padding: 20rpx 0;
border-top: 1px solid #f0f0f0;
text-align: center;
}
.clean-invalid-wrap .clean-invalid-btn {
line-height: 1;
padding: 14rpx 24rpx;
font-size: 28rpx;
border: 1px solid #b0b0b0;
border-radius: 6rpx;
display: inline-block;
}
... ...