Authored by baoss

新增促销选择及运费计算 review by bevishuang

Component({
properties: {
show: {
type: Boolean,
value: false,
observer: '_show'
},
promotions: {
type: Array,
value: [],
},
selectedCode: {
type: Number,
value: 0,
},
isStore: {
type:Boolean,
value: false
}
},
data: {
chosenIdx: '',
},
methods: {
confirm: function () {
let item = this.data.promotions[this.data.chosenIdx];
let code = item && item.promotionId || '';
let amount = item && item.cutAmount || '';
this.triggerEvent('confirmselect', { code, amount})
},
cancel: function () {
this.triggerEvent('cancel')
},
check: function (e) {
let idx = e.currentTarget.dataset.idx;
this.data.promotions.forEach((item, index) => {
if (index !== idx && item.isChosen) {
this.setData({
[`promotions[${index}].isChosen`]: false,
[`promotions[${idx}].selected`]: 'N'
});
}
if (index === idx) {
this.setData({
[`promotions[${idx}].isChosen`]: true,
[`promotions[${idx}].selected`]: 'Y'
});
}
});
this.data.chosenIdx = idx;
},
uncheck: function (e) {
let idx = e.currentTarget.dataset.idx;
this.setData({
[`promotions[${idx}].isChosen`]: false,
[`promotions[${idx}].selected`]: 'N'
});
this.data.chosenIdx = '';
},
_show: function (show) {
if (show) {
if (this.data.selectedCode) {
this.data.promotions.forEach((item, index) => {
if (this.data.selectedCode === item.promotionId) {
this.setData({
[`promotions[${index}].isChosen`]: true
});
this.data.chosenIdx = index;
} else {
this.setData({
[`promotions[${index}].isChosen`]: false
});
}
});
} else {
this.data.promotions.forEach((item, index) => {
this.setData({
[`promotions[${index}].isChosen`]: false
});
});
this.data.chosenIdx = '';
}
}
console.log(this.data.promotions)
}
}
});
... ...
{
"component": true,
"usingComponents": {
}
}
... ...
<view class="promotion-use-select" wx:if="{{show}}">
<view class="mask"></view>
<view class="content">
<view class="header">选择活动
<image class="close" bindtap="cancel" src="../../assets/images/close-gray.png"></image></view>
<view class="empty" catchtouchmove="true" wx:if="{{!promotions.length}}">
没有可使用的活动哦
</view>
<block wx:else>
<scroll-view class="promotion-scroll" scroll-y>
<block wx:for="{{promotions}}" wx:key="{{item.promotionId}}">
<view class="promotion-item">
<text class="name">{{item.promotionName}}</text>
<text class="period">{{item.startTime}}-{{item.endTime}}</text>
<block wx:if="{{item.isChosen}}">
<image bindtap="uncheck" class="checked" data-idx="{{index}}"
src="../../assets/images/checked.png"></image>
</block>
<block wx:else>
<view bindtap="check" class="check" data-idx="{{index}}"></view>
</block>
</view>
</block>
</scroll-view>
</block>
<view class="confirm" bindtap="confirm">确定</view>
</view>
</view>
... ...
.promotion-use-select .mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.4;
z-index: 999;
background: #000000;
}
.promotion-use-select .content {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 960rpx;
z-index: 1000;
background-color: #F5F5F5;
}
.promotion-use-select .promotion-scroll {
overflow-y: scroll;
height: 720rpx;
padding-bottom: 120rpx;
text-align: center;
font-size: 0;
}
.promotion-use-select .empty {
padding-top: 316rpx;
text-align: center;
font-size: 28px;
color: #CCCCCC;
letter-spacing: 0;
height: 720rpx;
background-color: #ffffff;
}
.promotion-use-select .header {
position: relative;
height: 120rpx;
background-color: #ffffff;
padding-left: 40rpx;
line-height: 120rpx;
font-size: 32px;
color: #000000;
letter-spacing: 0;
font-weight: 500;
}
.promotion-use-select .header .close {
width: 40rpx;
height: 40rpx;
float: right;
margin-top: 40rpx;
margin-right: 40rpx;
}
.promotion-use-select .promotion-item {
display: inline-block;
position: relative;
width: 720rpx;
padding: 30rpx 40rpx;
box-sizing: border-box;
background-color: #fff;
}
.promotion-use-select .promotion-item:first-child {
margin-top: 10rpx;
}
.promotion-use-select .promotion-item:last-child {
margin-bottom: 10rpx;
}
.promotion-use-select .promotion-item .name {
display: block;
font-size: 24px;
color: #222222;
letter-spacing: 0;
line-height: 30rpx;
word-break: break-all;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
}
.promotion-use-select .promotion-item .name .prefix {
font-size: 24px;
color: #002B47;
letter-spacing: 0;
font-weight: 500;
margin-right: 10px;
}
.promotion-use-select .promotion-item .period {
display: block;
font-size: 22px;
color: #999999;
letter-spacing: 0;
margin-top: 26rpx;
text-align: left;
}
.promotion-use-select .promotion-item .check {
position: absolute;
top: 50%;
right: 50rpx;
width: 48rpx;
height: 48rpx;
margin-top: -24rpx;
border: 2rpx solid #cccccc;
border-radius: 48rpx;
box-sizing: border-box;
}
.promotion-use-select .promotion-item .check.disabled {
background-color: #f3f3f3;
}
.promotion-use-select .promotion-item .checked {
position: absolute;
top: 50%;
right: 50rpx;
width: 48rpx;
height: 48rpx;
margin-top: -24rpx;
}
.promotion-use-select .confirm {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 120rpx;
font-size: 32px;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
line-height: 120rpx;
background: #002B47;
}
... ...
Component({
properties: {
amount: {
type: String,
value: ''
type: Number,
value: 0
},
coupons: {
type: Array,
... ...
Component({
properties: {
amount: {
type: Number,
value: 0
},
promotions: {
type: Array,
value: []
},
selectedCode: {
type: Number,
value: 0,
observer: '_selectObserver'
},
isSelect: {
type: Boolean,
value: false
}
},
data: {
selectNum: 0
},
methods: {
_selectObserver: function(val) {
let promotionsNum = val ? 1 : 0
this.setData({selectNum: promotionsNum})
},
select: function(){
this.triggerEvent('select',{})
}
}
});
... ...
<view class="promotion-cell" bindtap="select">
促销
<text wx:if="{{!isSelect}}" class="promotion-tip">{{promotions.length}}个可用 {{selectNum === 0 ? '' : ',已推荐'+selectNum+'个'}}</text>
<text wx:else class="promotion-tip">{{selectNum === 0 ? '' : '已选'+selectNum+'个'}}</text>
<view class="choose">
<block wx:if="{{amount}}">
<text class="value chosen">-¥{{amount}}</text>
</block>
<block wx:else>
<text class="value">未参与</text>
</block>
<image class="right"
src="../../../../static/images/arrow-right-2.png"></image>
</view>
</view>
... ...
.promotion-cell {
height: 120rpx;
font-size: 32px;
color: #000000;
letter-spacing: 0.8rpx;
line-height: 119rpx;
border-bottom: 2rpx solid #eeeeee;
}
.choose {
position: relative;
float: right;
padding-right: 40rpx;
font-size: 28px;
color: #999999;
letter-spacing: 0;
}
.choose .value.chosen {
color: #D0021B;
}
.choose .right {
position: absolute;
top: 34rpx;
right: 0;
height: 48rpx;
width: 48rpx;
}
.promotion-tip {
color: #999;
font-size: 28rpx;
}
\ No newline at end of file
... ...
... ... @@ -31,9 +31,13 @@ Page({
skup: '',
coupons: [],
selectCouponCode: '',
selectCouponAmount: '',
selectCouponAmount: 0,
selectingCoupon: false,
isManualSelect: false,
selectPromotionCode: 0,
selectPromotionAmount: 0,
selectingPromotion: false,
isManualSelectPro: false,
promotionid: '',
user_activity_id: '' // 有值代表砍价
},
... ... @@ -60,10 +64,10 @@ Page({
//选中优惠卷后,切到后台,再切回前台页面,不在请求数据
if (!this.data.selectCouponCode) {
await this.fetchData(this.data.isStore);
if (!this.data.isStore && !this.data.hasAddress) {
await this.fetchAddress()
}
await this.fetchData(this.data.isStore);
}
},
... ... @@ -73,10 +77,41 @@ Page({
selectingCoupon: true
});
},
async confirmSelectCoupon({detail}) {
showSelectPromotion: function () {
this.setData({
selectingPromotion: true
});
},
async confirmSelectPromotion({detail}) {
let code = detail.code;
let amount = detail.amount || 0;
let promotionsList = this.data.promotionList;
if (promotionsList) {
promotionsList.forEach((item, index) => {
if (code ===item.promotionId) {
item.isChosen = true;
item.selected = 'Y'
}
});
}
this.setData({
promotionsList,
selectingPromotion: false,
selectPromotionCode: code,
selectPromotionAmount: amount,
isManualSelectPro: true,
// 重置优惠券
selectCouponAmount: 0,
selectCouponCode: '',
isManualSelect: false
});
this.orderCompute({
promotion_id: code
})
},
confirmSelectCoupon({detail}) {
let code = detail.code;
let amount = detail.amount || '';
let amount = detail.amount || 0;
let couponsList = this.data.couponList;
if (couponsList){
couponsList.forEach((item, index) => {
... ... @@ -92,16 +127,20 @@ Page({
selectCouponAmount: amount,
selectCouponCode: code,
selectingCoupon: false,
isManualSelect: true
isManualSelect: true,
// 重置促销
selectPromotionCode: 0,
selectPromotionAmount: 0,
isManualSelectPro: false
});
this.orderCompute({code})
},
async orderCompute({
code = '',
promotion_id = ''
}) {
// 区分线上线下
let info;
//如果选择了非运费券,促销不选择
let promotion_id = '';
if (this.data && this.data.promotionTips && this.data.promotionTips.promotionIds) {
promotion_id = this.data.promotionTips.promotionIds;
}
try {
if (this.data.isStore) {
info = await api.orderOfflineCompute({
... ... @@ -111,10 +150,12 @@ Page({
app_version: '1'
}, () => wx.hideLoading());
} else {
let addressId = this.data.hasAddress && this.data.address && this.data.address.address_id
const params = {
skup: this.data.skup,
coupon_code: code,
promotionid: promotion_id
promotionId: promotion_id,
addressId
};
if (this.data.user_activity_id) {
... ... @@ -126,20 +167,23 @@ Page({
info = await api.orderCompute(params, () => wx.hideLoading());
}
} catch(e) {}
} catch (e) {}
this.setData({
amount: info.amount,
promotionFormulaList: info.promotionFormulaList
});
},
cancelSelectCoupon: function () {
this.setData({
selectingCoupon: false
});
},
cancelSelectPromotion: function () {
this.setData({
selectingPromotion: false
});
},
async fetchData(isStore) {
wx.showLoading({
title: '',
... ... @@ -168,6 +212,8 @@ Page({
})
data.promotionFormulaList.splice(index,1)
} else {
let addressId = this.data.hasAddress && this.data.address && this.data.address.address_id
params.addressId = addressId
try {
data = await api.createPaymentInfo(params, () => wx.hideLoading())
} catch (e) {
... ... @@ -184,15 +230,12 @@ Page({
// await api.orderSelectCoupon(this.data.skup, () => wx.hideLoading()).then(data => {
// this.setData(coupons)
// });
let that = this;
if (data && data.couponList && data.couponList.length > 0){
let coupons = [];
let activityCoupons = [];
let expressCoupons = [];
let couponsAmount = 0;
data.couponList.forEach((item, index) => {
let selected = item.selected;
let couponsType = item.coupon_type;
if (selected === 'Y'){
item.isChosen = true;
couponsAmount += parseFloat(item.coupon_value_str);
... ... @@ -200,18 +243,28 @@ Page({
}else {
item.isChosen = false;
}
if(couponsType === 100) {
activityCoupons.push(item)
} else if(couponsType === 110) {
expressCoupons.push(item)
}
});
data.activityCoupons = activityCoupons;
data.expressCoupons = expressCoupons;
data.selectCouponAmount = couponsAmount;
data.selectCouponCode = coupons.join(',');
}
if (data && data.promotionList && data.promotionList.length > 0) {
let promotions = 0;
let promotionsAmount = 0;
data.promotionList.forEach((item, index) => {
let selected = item.selected;
if (selected === 'Y') {
item.isChosen = true;
promotionsAmount = parseFloat(item.cutAmount);
promotions = item.promotionId;
} else {
item.isChosen = false;
}
});
data.selectPromotionAmount = promotionsAmount;
data.selectPromotionCode = promotions;
}
if (data.good && data.good.goodImg) {
data.good.goodImg = getImgUrl(data.good.goodImg, 270, 270)
}
... ... @@ -257,11 +310,8 @@ Page({
if (!this.data.agreeProtocol) return;
let data;
try {
let promotionId = '';
if (this.data && this.data.promotionTips && this.data.promotionTips.promotionIds){
promotionId = this.data.promotionTips.promotionIds;
}
let promotionId = this.data.selectPromotionCode || '';
let couponCode = this.data.selectCouponCode || '';
if (this.data.isStore) {
this.check = this.selectComponent("#check");
let checkRes = await this.check.init();
... ... @@ -269,15 +319,12 @@ Page({
let param = checkRes.data;
param.skup = this.data.skup;
param.api_version = '1';
param.coupon_code = this.data.selectCouponCode || '';
param.coupon_code = couponCode;
param.promotionId = promotionId;
// wx.showLoading({
// title: '',
// })
data = await api.storeBuyerSubmit(param, () => {
wx.hideLoading()
})
} else {
if (!this.data.hasAddress) {
wx.showToast({
... ... @@ -288,11 +335,8 @@ Page({
let addressId = this.data.hasAddress && this.data.address && this.data.address.address_id
let skup = this.data.skup
let channelNo = '';
let couponCode = this.data.selectCouponCode || '';
let channelNo = '';
let extra = null;
if (this.data.user_activity_id) {
extra = {
user_activity_id: this.data.user_activity_id,
... ... @@ -300,9 +344,6 @@ Page({
};
}
// wx.showLoading({
// title: '',
// })
data = await api.buyerSubmit({ skup, channelNo, addressId, couponCode, promotionId, extra}, () => wx.hideLoading());
}
if (data && data.orderCode) {
... ...
... ... @@ -7,8 +7,10 @@
"priceCell": "./components/priceCell",
"payDeliveryCell": "./components/payDeliveryCell",
"couponCell": "./components/couponCell",
"promotionCell": "./components/promotionCell",
"storeAddress":"./components/storeAddress",
"checkstore":"../../../components/checkstore/checkstore",
"couponSelect":"../../../components/order/coupon-select"
"couponSelect":"../../../components/order/coupon-select",
"promotionSelect": "../../../components/order/promotion-select"
}
}
... ...
... ... @@ -6,9 +6,10 @@
wx:else></storeAddress>
<productCell productInfo="{{good}}" isStore="{{isStore === 1}}"></productCell>
<!-- // 砍价没有优惠券 -->
<!-- // 砍价没有优惠券和促销 -->
<couponCell wx:if="{{!user_activity_id}}" bindselect="showSelectCoupon" coupons = "{{couponList}}" selected-code="{{selectCouponCode}}" isSelect="{{isManualSelect}}" amount="{{selectCouponAmount}}"></couponCell>
<promotionCell wx:if="{{!user_activity_id}}" bindselect="showSelectPromotion" promotions="{{promotionList}}" selected-code="{{selectPromotionCode}}" isSelect="{{isManualSelectPro}}" amount="{{selectPromotionAmount}}"></promotionCell>
<priceCell promotionFormulaList="{{promotionFormulaList}}" damagesDesc="{{damagesDesc}}" isStore="{{isStore === 1}}"></priceCell>
<payDeliveryCell paymentWay="{{paymentWay}}" deliveryWay="{{deliveryWay}}"></payDeliveryCell>
</scroll-view>
... ... @@ -40,4 +41,6 @@
</view>
<couponSelect bindconfirmselect="confirmSelectCoupon" show="{{selectingCoupon}}" selected-code="{{selectCouponCode}}" isStore="{{isStore === 1}}"
bindcancel="cancelSelectCoupon" coupons="{{couponList}}"></couponSelect>
<promotionSelect bindconfirmselect="confirmSelectPromotion" show="{{selectingPromotion}}" selected-code="{{selectPromotionCode}}" isStore="{{isStore === 1}}" bindcancel="cancelSelectPromotion" promotions="{{promotionList}}"></promotionSelect>
<checkstore id="check" storeId="{{storeId}}" productId="{{product_id}}"></checkstore>
... ...
... ... @@ -128,8 +128,7 @@ Page({
});
if (data.statusDetail && data.statusDetail.leftTime) {
let leftTime = data.statusDetail.leftTime;
debugger
let leftTime = data.statusDetail.leftTime;
// let leftTime = 30;
let timer = that.data.timer;
if (leftTime > 0) {
... ...
... ... @@ -54,7 +54,13 @@
<text class='order-detail-sum-grey-txt'>-¥{{data.priceInfo.shippingCouponCutPrice}}</text>
</view>
</block>
<view class='order-detail-count-view' wx:if="{{data.priceInfo.cutPromotionPrice}}">
<block wx:if="{{data.priceInfo.cutPromotionPrice != '0.00' && data.priceInfo.cutPromotionPrice != '0'}}">
<text class='order-detail-sum-grey-txt'>促销</text>
<text class='order-detail-sum-grey-txt'>-¥{{data.priceInfo.cutPromotionPrice}}</text>
</block>
</view>
<view class='order-detail-count-view' wx:if="{{data.priceInfo.couponCutPrice}}">
<block wx:if="{{data.priceInfo.couponCutPrice != '0.00' && data.priceInfo.couponCutPrice != '0'}}">
<text class='order-detail-sum-grey-txt'>优惠券:</text>
... ...