Authored by yyq

save

const config = {
domains: {
// test3
api: 'http://api-test3.dev.yohocorp.com',
// api: 'http://api-test3.dev.yohocorp.com',
// test1
// api: 'http://api-test1.dev.yohocorp.com',
// gray
// api: 'http://apigray.yoho.cn',
api: 'http://apigray.yoho.cn',
// production
// api: 'https://api.yoho.cn',
... ...
Component({
properties: {
item: {
type: Object,
value: {},
observer: '_itemChange'
},
index: {
type: Number,
value: 0
}
},
methods: {
_itemChange(item) {
console.log(this);
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;
}
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.bLackStorage}}">
<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>
</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: 350rpx;
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;
}
.goods-item .buy-num {
padding-top: 20rpx;
line-height: 1.4;
color: #b0b0b0;
position: absolute;
right: 30rpx;
}
... ...
function AllGoodsSelect() {
let isSelectAll = true;
this.check = function(list) {
(list || []).map(item => {
if (!item.bLackStorage && item.goods_type !== 'gift' && item.selected !== 'Y') {
isSelectAll = false;
}
});
};
this.val = function() {
return isSelectAll;
};
return this;
}
function _processPromotion(promotionList, isSub) {
if (!promotionList || !promotionList.length) {
return false;
}
promotionList.map(promotion => {
let statuString = '';
switch (+promotion.status) {
case 0:
statuString = '去凑单';
break;
case 10:
if (promotion.promotion_type == 'Gift') { //Cashreduce, Degressdiscount, Cheapestfree, Discount,Gift,Needpaygift,SpecifiedAmount
statuString = '领赠品';
} else if (promotion.promotion_type == 'Needpaygift') {
statuString = '去换购';
}
break;
case 20:
statuString = '已抢光';
promotion.soldOut = true;
break;
case 30:
statuString = '更换';
break;
default:
break;
}
promotion.statuString = statuString;
if (isSub) {
let typeString = '';
switch (promotion.promotion_type) {
case 'Gift':
typeString = '赠品';
break;
case 'Needpaygift':
typeString = '加价购';
break;
case 'Cashreduce':
typeString = '满减';
break;
default:
typeString = '折扣';
break;
}
promotion.typeString = typeString;
}
});
return promotionList;
}
function _processGiftList(list, isGift) {
let result = {
isGift,
title: isGift ? '赠品' : '全场加价购',
statusString: '已抢光'
};
if (!list || !list.length) {
return false;
}
let statusCount10 = 0;//已满足
let statusCount20 = 0;//已售罄
let promotionArr = [];
list.map(item => {
switch (+item.status) {
case 10:
statusCount10++;
promotionArr.push(item.promotion_id);
break;
case 20:
statusCount20++;
break;
default:
break;
}
});
if (statusCount10 === 0 && statusCount20 !== list.length) {
return false;
}
result.promotion_ids = promotionArr.join(',');
if (promotionArr.length > 0) {
result.statusString = isGift ? '领赠品' : '去换购';
result.showArrow = true;
}
return result;
}
/**
* 购物车数据
* @param params
* @returns {*}
*/
const formatOrdinaryCartData = (data) => {
data = data || {};
data = data.ordinary_cart_data || {};
let ordinaryCart = {};
let isEmptyCart = true;
// 免邮提示
if (data.shipping_cost_prompt) {
ordinaryCart.shippingCostTips = data.shipping_cost_prompt.shipping_cost_tips || '';
}
// 降价提示
if (data.price_down_prompt) {
ordinaryCart.priceDownTips = data.price_down_prompt.price_down_tips || '';
}
const allGoodsSelect = new AllGoodsSelect();
// 商品池
let goodsPoolList = data.goods_pool_list;
if (goodsPoolList && goodsPoolList.length) {
goodsPoolList.map(item => {
if (item.pool_batch_no && item.pool_id) {
//套餐商品参数转换
item.int_pool_buy_number = parseInt(item.pool_buy_number, 10);
item.int_pool_storage_number = parseInt(item.pool_storage_number, 10);
}
item.isPromotionExpanded = false;
item.goods_list && allGoodsSelect.check(item.goods_list);
item.promotion_list = _processPromotion(item.promotion_list);
if (item.sub_pool && item.sub_pool.length) {
item.sub_pool.map(spItem => {
spItem.promotion_list = _processPromotion(spItem.promotion_list, true);
spItem.goods_list && allGoodsSelect.check(spItem.goods_list);
})
}
});
isEmptyCart = false;
ordinaryCart.goodsPoolList = goodsPoolList;
}
// 商品列表
let goodsList = data.goods_list;
if (goodsList && goodsList.length) {
isEmptyCart = false;
allGoodsSelect.check(item.goods_list);
ordinaryCart.goodsList = goodsList;
}
// 加价购&赠品
let gGiftAndPriceGiftList = [];
let giftItem = _processGiftList(data.g_gift_list, true);
let priceGiftItem = _processGiftList(data.g_price_gift_list);
giftItem && gGiftAndPriceGiftList.push(giftItem);
priceGiftItem && gGiftAndPriceGiftList.push(priceGiftItem);
if (gGiftAndPriceGiftList.length) {
ordinaryCart.gGiftAndPriceGiftList = gGiftAndPriceGiftList;
}
//失效商品
ordinaryCart.invalidGoodsList = [...(data.off_shelves_goods_list || []), ...(data.sold_out_goods_list || [])];
if (ordinaryCart.invalidGoodsList.length) {
isEmptyCart = false;
}
ordinaryCart.isValidGoodsSelectAll = allGoodsSelect.val();
ordinaryCart.shoppingCartData = data.shopping_cart_data;
console.log(ordinaryCart);
return {
isEmptyCart,
...ordinaryCart
};
}
export default {
formatOrdinaryCartData
};
... ...
import cartModel from '../../models/cart/cart';
import cartHandle from '../../models/cart/cart-handle';
const app = getApp();
const router = global.router;
Page({
data: {
isEditing: false
},
onLoad() {
... ... @@ -20,14 +22,14 @@ Page({
cartModel.getCartData({uid: app.getUid()})
.then(res => {
if (res.code === 200 && res.data) {
this._resolveCartData(res.data);
this.setData(cartHandle.formatOrdinaryCartData(res.data));
} else {
return Promise.reject();
}
})
.catch(() => {});
},
_resolveCartData() {
editCartAction() {
this.setData({isEditing: !this.data.isEditing});
}
});
... ...
{
"navigationBarTitleText": "购物车"
"navigationBarTitleText": "购物车",
"usingComponents": {
"cart-item": "/components/product/cart-item/cart-item"
}
}
... ...
<block wx:if="{{false}}">
我是购物车内容
</block>
<block wx:else>
<view class='empty-cart'>
<import src="./template/cart/goods-pool.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>
</block>
<block wx:else>
<scroll-view scroll-y style="height: 100%;">
<view class="tips-wrap">
<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}}"/>
</scroll-view>
</block>
... ...
@import "./template/cart/goods-pool.wxss";
page {
height: 100%;
color: #444;
}
.empty-cart .empty-img {
display: block;
... ... @@ -26,3 +32,50 @@
border-radius: 4rpx;
background-color: #444;
}
.tips-wrap {
width: 100%;
font-size: 24rpx;
}
.tips-wrap .hold-text,
.tips-wrap .fixed-top-tips {
padding: 16rpx 30rpx;
line-height: 1.5;
background-color: #f0f0f0;
box-sizing: border-box;
}
.tips-wrap .fixed-top-tips {
width: 100%;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
z-index: 10;
}
.tips-wrap .hold-text,
.tips-wrap .price-down-tips,
.tips-wrap .shipping-cost-tips {
display: inline-block;
max-width: 70%;
vertical-align: middle;
}
.tips-wrap .edit-cart-btn {
height: 60rpx;
line-height: 60rpx;
position: absolute;
top: 50%;
right: 30rpx;
margin-top: -30rpx;
font-family: PingFang-SC-Regular;
color: #d0021b;
}
.split-line {
width: 100%;
height: 20rpx;
background-color: #eee;
}
... ...
<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}}"/>
<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}}"/>
<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>
</block>
</block>
<!-- TODO 套餐 -->
<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>
<view class="split-line"></view>
</block>
</div>
</template>
... ...
@import "./promotion-list.wxss";
.goods-pool-list {
font-size: 24rpx;
}
.goods-pool-list .list-warp {
border-bottom: 1rpx solid #f0f0f0;
}
... ...
<template name="cartPromotionList">
<view class="promotion-wrap {{isSub ? 'sub-promotion-wrap' : ''}}" wx:if="{{promotion_list}}">
<view class="inner-wrap">
<block wx:for="{{promotion_list}}" 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>
<text class="iconfont icon-right"></text>
</view>
<view class="left-text">
<view class="promotion-type" wx:if="{{isSub && item.typeString}}">{{item.typeString}}</view>
<text class="iconfont icon-warn-fill" wx:if="{{!isSub}}"></text>
<text class="promotion-desc">{{item.promotion_desc}}</text>
</view>
</view>
</block>
</view>
<block wx:if="{{promotion_list.length > 1}}">
<view class="show-more-promotion" bindtap="flexOrUnflexPromotion">
<text class="iconfont {{isPromotionExpanded ? 'icon-top' : 'icon-bottom'}}"></text>
</view>
</block>
</view>
</template>
... ...
.promotion-wrap {
border-bottom: 1rpx solid #f0f0f0;
border-top:1rpx solid #f0f0f0;
padding: 20rpx 30rpx;
margin-top:-1rpx;
position: relative;
box-sizing: border-box;
}
.sub-promotion-wrap {
margin-left: 100rpx;
padding-left: 0;
}
.promotion-wrap .inner-wrap {
max-height: 40rpx;
overflow: hidden;
}
.promotion-wrap .promotion-item {
height: 40rpx;
line-height: 40rpx;
position: relative;
}
.promotion-item .left-text {
font-size: 26rpx;
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.promotion-item .promotion-type {
display: inline-block;
line-height: 26rpx;
font-size: 18rpx;
color: #ff575c;
border: 1px solid #ff575c;
border-radius: 6rpx;
padding: 0 16rpx;
position: relative;
top: -2rpx;
}
.promotion-item .promotion-desc {
margin-left: 10rpx;
}
.promotion-item .right-option {
float: right;
}
.promotion-item .promotion-status {
color: #ff575c;
}
.promotion-item .soldOut {
color: #eee;
}
.promotion-wrap .show-more-promotion {
width: 100rpx;
color: #ccc;
position: absolute;
bottom: -6rpx;
left: 50%;
margin-left: -50rpx;
}
.promotion-wrap .show-more-promotion .iconfont {
font-size: 30rpx;
}
... ...
... ... @@ -10,7 +10,7 @@
"compileType": "miniprogram",
"libVersion": "1.9.1",
"appid": "wx66ecf50a505afefa",
"projectname": "%E7%BA%A2%E4%BA%BA%E5%B0%8F%E5%BA%97",
"projectname": "%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%94%B5%E5%95%86",
"condition": {
"search": {
"current": -1,
... ... @@ -29,7 +29,7 @@
"list": []
},
"miniprogram": {
"current": -1,
"current": 14,
"list": [
{
"id": 1,
... ... @@ -114,6 +114,12 @@
"name": "商品详情页",
"pathName": "pages/product/detail/detail",
"query": "fromPage=home&fromParam=&productSkn=51829280"
},
{
"id": -1,
"name": "购物车",
"pathName": "pages/cart/cart",
"query": ""
}
]
}
... ...