chenkainan
3 months ago
21 changed files with 958 additions and 124 deletions
@ -0,0 +1,291 @@ |
|||||
|
import commonApi from "../../../../utils/https/common" |
||||
|
let app = getApp() |
||||
|
Component({ |
||||
|
properties: { |
||||
|
productId: { |
||||
|
type: [String, Number], |
||||
|
value: '' |
||||
|
}, |
||||
|
postId: { |
||||
|
type: [String, Number], |
||||
|
value: '' |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
value: '' |
||||
|
} |
||||
|
}, |
||||
|
data: { |
||||
|
addressList: [], |
||||
|
addressIndex: -1, |
||||
|
address: null, |
||||
|
smoothlyList: [], |
||||
|
sommthlyIndex: 0, |
||||
|
showAddressPopup: false, |
||||
|
showItem: null, |
||||
|
showSkuPopup: false |
||||
|
}, |
||||
|
lifetimes: { |
||||
|
attached() { |
||||
|
this.setData({ |
||||
|
sommthlyIndex: 0 |
||||
|
}) |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
observers: { |
||||
|
'type': function(newVal, oldVal) { |
||||
|
// 当从邮寄切换到自提时
|
||||
|
if (oldVal === 'post' && newVal !== 'post') { |
||||
|
// 重置所有商品邮费
|
||||
|
const smoothlyList = this.data.smoothlyList.map(item => ({ |
||||
|
...item, |
||||
|
postMoney: 0 |
||||
|
})) |
||||
|
this.setData({ |
||||
|
smoothlyList, |
||||
|
addressIndex: -1 |
||||
|
}) |
||||
|
// 重新计算总价
|
||||
|
this.calculateTotalPrice() |
||||
|
} else if (newVal === 'post') { |
||||
|
// 切换到邮寄时重新计算邮费
|
||||
|
this.showPostMoney() |
||||
|
} |
||||
|
}, |
||||
|
'postId': function(newVal, oldVal) { |
||||
|
// 只有当当前是邮寄类型时，才重新计算邮费
|
||||
|
if (this.data.type === 'post' && newVal !== oldVal) { |
||||
|
this.showPostMoney() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
onload() { |
||||
|
this.couponCom = this.selectAllComponents("#coupon")[0]; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 是否有选中商品
|
||||
|
hasSelectedGoods() { |
||||
|
return this.data.smoothlyList.some(item => (item.buyNum || 0) > 0); |
||||
|
}, |
||||
|
// 规格id
|
||||
|
emitSkuIds() { |
||||
|
let skuIds = [] |
||||
|
this.data.smoothlyList.forEach(item => { |
||||
|
if (item.buyNum > 0) { |
||||
|
skuIds.push(item.sku_id) |
||||
|
} |
||||
|
}); |
||||
|
return skuIds; |
||||
|
}, |
||||
|
// 下单参数
|
||||
|
emitOrder() { |
||||
|
let orderList = [] |
||||
|
this.data.smoothlyList.forEach(item => { |
||||
|
if (item.buyNum > 0) { |
||||
|
orderList.push({ |
||||
|
type: item.type, |
||||
|
product_id: item.id, |
||||
|
sku_id: item.sku_id, |
||||
|
post: this.data.type == 'post' ? this.data.postId : (this.data.address ? |
||||
|
this.data |
||||
|
.address.id : ''), |
||||
|
product_num: item.buyNum, |
||||
|
use_type: 0, |
||||
|
is_batch_shipment: 0, |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
return orderList |
||||
|
}, |
||||
|
switchSmoothlyList() { |
||||
|
const { |
||||
|
smoothlyList, |
||||
|
sommthlyIndex |
||||
|
} = this.data |
||||
|
// 重置当前商品数量
|
||||
|
smoothlyList[sommthlyIndex].buyNum = 0 |
||||
|
|
||||
|
// 更新索引
|
||||
|
const newIndex = sommthlyIndex < smoothlyList.length - 1 ? sommthlyIndex + 1 : 0 |
||||
|
this.setData({ |
||||
|
smoothlyList, |
||||
|
sommthlyIndex: newIndex |
||||
|
}) |
||||
|
|
||||
|
this.showPostMoney().then(() => { |
||||
|
this.calculateTotalPrice() |
||||
|
}) |
||||
|
}, |
||||
|
setNullCoupons() { |
||||
|
if (app.globalData.couponInfo != null) { |
||||
|
wx.showToast({ |
||||
|
title: '订单价格发生变化，请重新选择优惠券', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
|
||||
|
this.triggerEvent('callOtherComp', { |
||||
|
methodName: 'setNullCoupon', // 要调用的子组件B的方法名
|
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
setAddress(e) { |
||||
|
console.log(e.detail); |
||||
|
this.setData({ |
||||
|
address: e.detail |
||||
|
}) |
||||
|
this.showPostMoney().then(() => { |
||||
|
this.calculateTotalPrice() |
||||
|
}) |
||||
|
}, |
||||
|
showAddress() { |
||||
|
const childComp = this.selectComponent('#addressComp'); |
||||
|
if (!childComp) { |
||||
|
wx.showToast({ |
||||
|
title: '组件未加载完成', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
childComp.showLinkman() |
||||
|
}, |
||||
|
showImg(img) { |
||||
|
if (!img) { |
||||
|
return img |
||||
|
} |
||||
|
if (img.indexOf('https://') != -1 || img.indexOf('http://') != -1) { |
||||
|
return img; |
||||
|
} else { |
||||
|
// return "https://test.api.cloud.sz-trip.com"+img
|
||||
|
return "https://static.ticket.sz-trip.com" + img; |
||||
|
} |
||||
|
}, |
||||
|
getList() { |
||||
|
commonApi.user_post('product/get_convenient_purchase', { |
||||
|
page: 1, |
||||
|
limit: 100, |
||||
|
product_id: this.data.productId |
||||
|
}).then(res => { |
||||
|
if (res.data) { |
||||
|
const smoothlyList = res.data.map(i => ({ |
||||
|
...i, |
||||
|
headimg: this.showImg(i.headimg), |
||||
|
buyNum: 0, |
||||
|
postMoney: 0 |
||||
|
})); |
||||
|
this.setData({ |
||||
|
smoothlyList |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
showPostMoney() { |
||||
|
const { |
||||
|
type, |
||||
|
postId, |
||||
|
addressList, |
||||
|
addressIndex, |
||||
|
smoothlyList |
||||
|
} = this.data |
||||
|
|
||||
|
if (type == 'post') { |
||||
|
if (!postId) return Promise.resolve() |
||||
|
} else { |
||||
|
if (!this.data.address) return Promise.resolve() |
||||
|
} |
||||
|
|
||||
|
const promises = smoothlyList.map(item => { |
||||
|
if (item.buyNum > 0) { |
||||
|
return commonApi.user_post("order/get_post_price", { |
||||
|
sku_id: item.sku_id, |
||||
|
num: item.buyNum, |
||||
|
consignee_id: type == 'post' ? postId : (this.data.address ? this.data |
||||
|
.address.id : '') |
||||
|
}).then(res => { |
||||
|
if (res) { |
||||
|
// 更新对应商品的邮费
|
||||
|
const newList = [...smoothlyList] |
||||
|
const idx = newList.findIndex(i => i.sku_id === item.sku_id) |
||||
|
if (idx > -1) { |
||||
|
newList[idx].postMoney = res.data.price |
||||
|
this.setData({ |
||||
|
smoothlyList: newList |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
return Promise.resolve() |
||||
|
}) |
||||
|
|
||||
|
return Promise.all(promises) |
||||
|
}, |
||||
|
decreaseSkuNum(e) { |
||||
|
const item = e.currentTarget.dataset.item |
||||
|
const { |
||||
|
smoothlyList |
||||
|
} = this.data |
||||
|
|
||||
|
if (item.buyNum > 0) { |
||||
|
// 找到对应商品并更新数量
|
||||
|
const newList = smoothlyList.map(i => { |
||||
|
if (i.sku_id === item.sku_id) { |
||||
|
return { |
||||
|
...i, |
||||
|
buyNum: i.buyNum - 1 |
||||
|
} |
||||
|
} |
||||
|
return i |
||||
|
}) |
||||
|
|
||||
|
this.setData({ |
||||
|
smoothlyList: newList |
||||
|
}) |
||||
|
this.setNullCoupons() |
||||
|
this.showPostMoney().then(() => { |
||||
|
this.calculateTotalPrice() |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
increaseSkuNum(e) { |
||||
|
const item = e.currentTarget.dataset.item |
||||
|
const { |
||||
|
smoothlyList |
||||
|
} = this.data |
||||
|
|
||||
|
// 找到对应商品并更新数量
|
||||
|
const newList = smoothlyList.map(i => { |
||||
|
if (i.sku_id === item.sku_id) { |
||||
|
return { |
||||
|
...i, |
||||
|
buyNum: i.buyNum + 1 |
||||
|
} |
||||
|
} |
||||
|
return i |
||||
|
}) |
||||
|
|
||||
|
this.setData({ |
||||
|
smoothlyList: newList |
||||
|
}) |
||||
|
|
||||
|
this.showPostMoney().then(() => { |
||||
|
this.calculateTotalPrice() |
||||
|
}) |
||||
|
}, |
||||
|
// 计算总价
|
||||
|
calculateTotalPrice() { |
||||
|
let total = 0; |
||||
|
this.data.smoothlyList.forEach(item => { |
||||
|
if (item.buyNum > 0) { |
||||
|
const itemPrice = parseFloat(item.price) * item.buyNum; |
||||
|
total += itemPrice + item.postMoney; |
||||
|
} |
||||
|
}); |
||||
|
this.triggerEvent('updateTotalPrice', { |
||||
|
total |
||||
|
}); |
||||
|
return total; |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"component": true, |
||||
|
"usingComponents": { |
||||
|
"address":"../../components/address/index" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
<view class="container"> |
||||
|
<view class="box"> |
||||
|
<view class="top-title flex-between"> |
||||
|
顺手带一件 |
||||
|
<view bindtap="switchSmoothlyList" class="refresh-btn"> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/smoothlyOrder/refresh.png" mode="widthFix"></image> |
||||
|
换一换 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 邮寄不显示收货地址 --> |
||||
|
<view wx:if="{{type !== 'post'}}"> |
||||
|
<view class="address-box flex-between" wx:if="{{!address}}" bindtap="showAddress"> |
||||
|
<view style="display: flex;align-items: center;"> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/smoothlyOrder/location.png" |
||||
|
class="location" mode="widthFix"></image> |
||||
|
收货地址 点击填写收货地址 |
||||
|
</view> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/smoothlyOrder/rightIcon.png" |
||||
|
class="rightIcon" mode="widthFix"></image> |
||||
|
</view> |
||||
|
<view class="address-boxs flex-between" bindtap="showAddress" wx:else> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/smoothlyOrder/location.png" |
||||
|
class="location" mode="widthFix"></image> |
||||
|
<view class="content"> |
||||
|
<view class="left">收货地址</view> |
||||
|
<view class="right"> |
||||
|
<view class="top"> |
||||
|
{{address.name}}<text>{{address.tel}}</text> |
||||
|
</view> |
||||
|
<view class="bottom text-overflowRows"> |
||||
|
{{address.address}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/smoothlyOrder/rightIcon.png" |
||||
|
class="rightIcon" mode="widthFix"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="product-item" wx:for="{{smoothlyList}}" wx:key="index" |
||||
|
bindtap="showSkuInfo" data-item="{{item}}" wx:if="{{sommthlyIndex == index}}"> |
||||
|
<image src="{{item.headimg}}" class="product-img" mode="aspectFill"></image> |
||||
|
<view class="product-content"> |
||||
|
<view class="title-boxs flex-between"> |
||||
|
<view class="title">{{item.title}}</view> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/smoothlyOrder/right.png" mode="widthFix"></image> |
||||
|
</view> |
||||
|
<view class="subtitle" wx:if="{{item.sku_name}}">{{item.sku_name}}</view> |
||||
|
<view class="flex-between"> |
||||
|
<view class="price">{{item.price / 100}}<text |
||||
|
wx:if="{{item.postMoney > 0}}">(另需运费￥{{item.postMoney / 100}})</text></view> |
||||
|
<view class="product-btn flex-between"> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/combinedLine/del.png" |
||||
|
bindtap="decreaseSkuNum" data-item="{{item}}" wx:if="{{item.buyNum > 0}}" mode="widthFix" /> |
||||
|
<view wx:else></view> |
||||
|
<view style="width: 100%;text-align: center;" wx:if="{{item.buyNum > 0}}">{{item.buyNum}} |
||||
|
</view> |
||||
|
<view wx:else></view> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/combinedLine/add.png" |
||||
|
bindtap="increaseSkuNum" data-item="{{item}}" mode="widthFix" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<address bind:setAddress="setAddress" showSelect="{{false}}" id="addressComp"></address> |
||||
|
|
||||
|
<!-- <van-popup show="{{showSkuPopup}}" position="bottom" round closeable style="width: 100%;height: 80%;" bind:close="onSkuPopupClose"> |
||||
|
<view class="sku-popup" wx:if="{{showItem}}"> |
||||
|
<view class="sku-name">产品详情</view> |
||||
|
<view class="sku-content" bindtap="onSkuContentTap"> |
||||
|
<rich-text nodes="{{formateRichText(showItem.content)}}"></rich-text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</van-popup> --> |
||||
|
</view> |
||||
@ -0,0 +1,201 @@ |
|||||
|
.flex-between { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
width: 750rpx; |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
width: 700rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 9.33rpx; |
||||
|
padding: 0 21.33rpx 46.67rpx; |
||||
|
margin: 0 auto; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.top-title { |
||||
|
height: 110rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 30.67rpx; |
||||
|
color: #000000; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.refresh-btn { |
||||
|
font-weight: bold; |
||||
|
font-size: 28rpx; |
||||
|
color: #0B898E; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.refresh-btn image { |
||||
|
width: 32rpx; |
||||
|
margin-right: 13.33rpx; |
||||
|
} |
||||
|
|
||||
|
.address-box { |
||||
|
width: 655.33rpx; |
||||
|
height: 80rpx; |
||||
|
background: rgba(11, 137, 142, .06); |
||||
|
border-radius: 13.33rpx; |
||||
|
padding: 0 21.33rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 26.67rpx; |
||||
|
color: #0B898E; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.address-box .location { |
||||
|
width: 42.67rpx; |
||||
|
margin-right: 26.67rpx; |
||||
|
} |
||||
|
|
||||
|
.address-box .rightIcon { |
||||
|
width: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.address-boxs { |
||||
|
width: 655.33rpx; |
||||
|
height: 133.33rpx; |
||||
|
background: #F7F7F7; |
||||
|
border-radius: 13.33rpx; |
||||
|
padding: 13.33rpx 21.33rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.address-boxs .location { |
||||
|
width: 42.67rpx; |
||||
|
margin-right: 26.67rpx; |
||||
|
} |
||||
|
|
||||
|
.address-boxs .content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-right: 33.33rpx; |
||||
|
} |
||||
|
|
||||
|
.address-boxs .content .left { |
||||
|
font-weight: 500; |
||||
|
font-size: 26.67rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.address-boxs .content .right { |
||||
|
width: 333.33rpx; |
||||
|
margin-left: 16.67rpx; |
||||
|
} |
||||
|
|
||||
|
.address-boxs .content .right .top { |
||||
|
font-weight: 400; |
||||
|
font-size: 30.67rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.address-boxs .content .right .top text { |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
margin-left: 33.33rpx; |
||||
|
} |
||||
|
|
||||
|
.address-boxs .content .right .bottom { |
||||
|
margin-top: 6.67rpx |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.address-boxs .rightIcon { |
||||
|
width: 33.33rpx; |
||||
|
} |
||||
|
|
||||
|
.product-item { |
||||
|
height: 153.33rpx; |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
margin-top: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-img { |
||||
|
width: 153.33rpx; |
||||
|
height: 153.33rpx; |
||||
|
border-radius: 13.33rpx; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content { |
||||
|
flex: 1; |
||||
|
height: 153.33rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .title-boxs { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .title-boxs .title { |
||||
|
width: 445.33rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .title-boxs image { |
||||
|
width: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .price { |
||||
|
font-weight: 500; |
||||
|
font-size: 33.33rpx; |
||||
|
color: #E30000; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .price::before { |
||||
|
content: '￥'; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .price text { |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #E30000; |
||||
|
margin-left: 6.67rpx; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .product-btn { |
||||
|
width: 160rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 28rpx; |
||||
|
color: #111111; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.product-item .product-content .product-btn image { |
||||
|
width: 46.67rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
Loading…
Reference in new issue