jiazhipeng
3 months ago
33 changed files with 1417 additions and 157 deletions
@ -0,0 +1,313 @@ |
|||
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, |
|||
content: '' |
|||
}, |
|||
lifetimes: { |
|||
attached() { |
|||
this.setData({ |
|||
sommthlyIndex: 0 |
|||
}) |
|||
this.getList() |
|||
|
|||
// 组件初始化时，通知父组件重置价格为 0
|
|||
this.triggerEvent('updateTotalPrice', { |
|||
total: 0 |
|||
}); |
|||
} |
|||
}, |
|||
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: { |
|||
// 查看规格信息
|
|||
showSkuInfo(e) { |
|||
console.log(e) |
|||
this.setData({ |
|||
showItem: e.currentTarget.dataset.item, |
|||
showSkuPopup: true, |
|||
content: e.currentTarget.dataset.item.content |
|||
}) |
|||
console.log(this.data.showItem) |
|||
}, |
|||
closePopup() { |
|||
this.setData({ |
|||
showSkuPopup: false |
|||
}) |
|||
}, |
|||
// 是否有选中商品
|
|||
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.code == 1) { |
|||
// 更新对应商品的邮费
|
|||
const newList = [...smoothlyList] |
|||
const idx = newList.findIndex(i => i.sku_id === item.sku_id) |
|||
console.log(res.data.price) |
|||
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,80 @@ |
|||
<wxs src="/utils/filter.wxs" module="tool" /> |
|||
<view class="container" wx:if="{{smoothlyList.length > 0}}"> |
|||
<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" |
|||
catchtap="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" |
|||
catchtap="increaseSkuNum" data-item="{{item}}" mode="widthFix" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<address bind:setAddress="setAddress" showSelect="{{false}}" id="addressComp"></address> |
|||
|
|||
<view wx:if="{{showSkuPopup}}" class="sku-box"> |
|||
<view class="sku-popup" wx:if="{{showItem}}"> |
|||
<view class="sku-name"><span></span> 产品详情 <span bindtap="closePopup">X</span></view> |
|||
<view class="sku-content"> |
|||
<rich-text nodes="{{tool.formateRichText(content)}}"></rich-text> |
|||
<!-- tool.formateRichText(showItem.content) --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,254 @@ |
|||
.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; |
|||
} |
|||
|
|||
.sku-box { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
position: fixed; |
|||
z-index: 99; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.sku-popup { |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 60vh; |
|||
background-color: #fff; |
|||
padding: 20rpx; |
|||
box-sizing: border-box; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.sku-name { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 35rpx; |
|||
font-weight: bold; |
|||
height: 80rpx; |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.sku-name span { |
|||
font-weight: 400; |
|||
} |
|||
|
|||
.sku-content { |
|||
width: 100%; |
|||
height: 50vh; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.sz-xcx-fwb-img { |
|||
width: 100% !important; |
|||
height: auto !important; |
|||
display: block !important; |
|||
margin: 0 auto !important; |
|||
object-fit: contain !important; |
|||
max-width: 100% !important; |
|||
} |
|||
@ -1,6 +1,7 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"title":"/pages/component/TitleHeader", |
|||
"coupon":"/pages/order/components/coupon/index" |
|||
"coupon":"/pages/order/components/coupon/index", |
|||
"smoothly-order": "/pages/order/components/smoothlyOrder/index" |
|||
} |
|||
} |
|||
Loading…
Reference in new issue