You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
720 lines
14 KiB
720 lines
14 KiB
<template> |
|
<view> |
|
<view v-for="(item,index) in list" :key="item.id" class="goods-section"> |
|
<view style="border-bottom: solid 1rpx #D7D7D7;" class="g-header b-b"> |
|
<radio style="transform:scale(0.7)" @click="parentRadioChange(index)" color="#F83D3D" |
|
:checked="item.selectArray.length==item.shoppingDetailVoList.length" /> |
|
<view class="textov"> {{item.siteName}}</view> |
|
</view> |
|
<uni-swipe-action> |
|
<uni-swipe-action-item @click="actionClick($event,child)" |
|
v-for=" (child,childIndex) in item.shoppingDetailVoList" :key="childIndex" |
|
:right-options="actionOptions" :threshold="0"> |
|
<view class="g-item flex ac"> |
|
<radio style="transform:scale(0.7)" color="#F83D3D" |
|
:checked="isChecked(index +'&'+ child.id,item)" :value="index +'&'+ child.id" |
|
@click="radioChange({detail:index +'&'+ child.id,parent:item})" /> |
|
<image mode="aspectFit" :src="child.url"> |
|
</image> |
|
<view class="right"> |
|
<view class="title textov">{{child.productName}}</view> |
|
<view class="spec"> 规格：{{child.attributeJson|specifications}}</view> |
|
<view class="price-box flex jw"> |
|
<text style="color: #F83D3D;" |
|
class="price">{{Number(child.integral||0).toFixed(2)}}积分</text> |
|
<!-- <text class="number"> </text> --> |
|
<view @click="updateShopping(index,childIndex)"> |
|
<uni-number-box :min="1" v-model="child.number" /> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</uni-swipe-action-item> |
|
</uni-swipe-action> |
|
</view> |
|
<uni-load-more :status="loadingType"></uni-load-more> |
|
<!-- 底部 --> |
|
<view class="footer"> |
|
<view class="price-content"> |
|
<text>实付积分</text> |
|
<text class="price-tip">￥</text> |
|
<text class="price">{{summation}}</text> |
|
</view> |
|
<text class="submit" @click="submit">提交订单</text> |
|
</view> |
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import productApi from '@/api/product.js' |
|
export default { |
|
data() { |
|
return { |
|
location: uni.getStorageSync('location'), |
|
loadingType: 'more', //加载更多状态 |
|
stationSelectArray: [], |
|
list: [], |
|
page: { |
|
"pageSize": 3, |
|
"currentPage": 1, |
|
"params": {}, |
|
"columns": [] |
|
}, |
|
actionOptions: [{ |
|
text: '删除', |
|
style: { |
|
backgroundColor: '#F83D3D' |
|
} |
|
}], |
|
maskState: 0, //优惠券面板显示状态 |
|
desc: '', //备注 |
|
payType: 1, //1微信 2支付宝 |
|
couponList: [{ |
|
title: '新用户专享优惠券', |
|
price: 5, |
|
}, |
|
{ |
|
title: '庆五一发一波优惠券', |
|
price: 10, |
|
}, |
|
{ |
|
title: '优惠券优惠券优惠券优惠券', |
|
price: 15, |
|
} |
|
], |
|
addressData: { |
|
name: '许小星', |
|
mobile: '13853989563', |
|
addressName: '金九大道', |
|
address: '山东省济南市历城区', |
|
area: '149号', |
|
default: false, |
|
} |
|
} |
|
}, |
|
filters: { |
|
specifications(e) { |
|
let data = JSON.parse(e); |
|
let strArr = Object.values(data); |
|
return strArr.length ? strArr.join(' ') : '暂无规格' |
|
} |
|
}, |
|
computed: { |
|
summation() { |
|
console.log("多级") |
|
let summation = this.list.map(item => { |
|
return item.selectArray.map(a => { |
|
return item.shoppingDetailVoList.filter(shopping => shopping.id == a.split("&")[1]) |
|
.map(b => Number(b.number) * Number(b.integral)); |
|
}) |
|
}).flat(Infinity); |
|
return summation.length ? summation.reduce((a, b, c) => Number(a) + Number(b)) : 0.00 |
|
} |
|
}, |
|
onPullDownRefresh() { |
|
this.search() |
|
}, |
|
//加载更多 |
|
onReachBottom() { |
|
this.page.currentPage += 1 |
|
this.getList(); |
|
}, |
|
onLoad(option) {}, |
|
created() {}, |
|
onShow() { |
|
this.search() |
|
}, |
|
methods: { |
|
search() { |
|
this.page.currentPage = 1; |
|
this.loadingType = 'more'; |
|
this.getList(); |
|
}, |
|
deleteShopping(id) { |
|
productApi.deleteShopping({ |
|
id |
|
}).then(res => { |
|
|
|
}).finally(() => { |
|
this.search() |
|
}) |
|
}, |
|
actionClick(e, child) { |
|
let that = this |
|
switch (e.content.text) { |
|
case "删除": |
|
uni.showModal({ |
|
title: '提示', |
|
content: '确认删除该商品么', |
|
success: function(res) { |
|
if (res.confirm) { |
|
that.deleteShopping(child.id) |
|
} else if (res.cancel) { |
|
console.log('用户点击取消'); |
|
} |
|
} |
|
}); |
|
|
|
break; |
|
default: |
|
break; |
|
} |
|
}, |
|
async updateShopping(index, childIndex) { |
|
let { |
|
id, |
|
stockId, |
|
number |
|
} = this.list[index].shoppingDetailVoList[childIndex]; |
|
await productApi.updateShopping({ |
|
id, |
|
stockId, |
|
number |
|
}).then(res => { |
|
if (res.code == 20000) { |
|
// this.getList() |
|
} else { |
|
this.list[index].shoppingDetailVoList[childIndex].number = this.list[index] |
|
.shoppingDetailVoList[childIndex].staticNumber |
|
} |
|
}); |
|
}, |
|
parentRadioChange(index) { |
|
if (this.list[index].selectArray.length == this.list[index].shoppingDetailVoList.length) { |
|
this.list[index].selectArray = [] |
|
} else { |
|
this.list[index].selectArray = this.list[index].shoppingDetailVoList.map(child => index + '&' + child |
|
.id); |
|
} |
|
}, |
|
isChecked(e, item) { |
|
return item.selectArray.includes(e) |
|
}, |
|
radioChange({ |
|
detail, |
|
parent |
|
}) { |
|
let parentIndex = detail.split('&')[0]; |
|
if (this.list[parentIndex].selectArray.includes(detail)) { |
|
this.list[parentIndex].selectArray = this.list[parentIndex].selectArray.filter(item => item != detail); |
|
} else { |
|
this.list[parentIndex].selectArray.push(detail); |
|
}; |
|
}, |
|
async getList() { |
|
if (this.loadingType === 'nomore') { |
|
return; |
|
}; |
|
let filerFn = (list) => { |
|
return list.map(item => { |
|
item.shoppingDetailVoList.forEach(a => a['staticNumber'] = a.number); |
|
return { |
|
...item, |
|
selectArray: [] |
|
} |
|
}); |
|
|
|
} |
|
await productApi.shoppingByPage(this.page).then(res => { |
|
if (res.code == 20000) { |
|
this.list = this.page.currentPage != 1 ? this.list = this.list.concat(filerFn(res.data |
|
.list)) : filerFn(res.data.list); |
|
this.loadingType = res.data.list.length < this.page.pageSize ? 'nomore' : 'more'; |
|
} |
|
}); |
|
uni.stopPullDownRefresh() |
|
}, |
|
//显示优惠券面板 |
|
toggleMask(type) { |
|
let timer = type === 'show' ? 10 : 300; |
|
let state = type === 'show' ? 1 : 0; |
|
this.maskState = 2; |
|
setTimeout(() => { |
|
this.maskState = state; |
|
}, timer) |
|
}, |
|
numberChange(data) { |
|
this.number = data.number; |
|
}, |
|
changePayType(type) { |
|
this.payType = type; |
|
}, |
|
submit() { |
|
|
|
let myShoppingList = this.list.map((item, index) => { |
|
return item.selectArray.length ? { |
|
...item, |
|
shoppingDetailVoList: item.shoppingDetailVoList.filter(shopping => item.selectArray |
|
.includes(index + '&' + shopping.id)) |
|
} : undefined |
|
}).filter(item => item); |
|
if(!myShoppingList.length){ |
|
uni.showToast({ |
|
title:'请选择', |
|
icon:'none' |
|
}) |
|
return |
|
} |
|
uni.navigateTo({ |
|
url: `/Product/pages/placeOrder?data=${encodeURIComponent(JSON.stringify({ |
|
myShoppingList, |
|
"latitude": this.location.latitude|| "23.25", // 纬度 |
|
"longitude": this.location.longitude||"24.35", // 经度 |
|
}))}&pageType=1` |
|
}) |
|
|
|
}, |
|
stopPrevent() {} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.uni-data-checklist .checklist-group .checklist-box { |
|
margin-right: 0 !important; |
|
} |
|
|
|
page { |
|
background: $page-color-base; |
|
padding-bottom: 200upx; |
|
} |
|
|
|
.address-section { |
|
padding: 30upx 0; |
|
background: #fff; |
|
position: relative; |
|
|
|
.order-content { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.icon-shouhuodizhi { |
|
flex-shrink: 0; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
width: 90upx; |
|
color: #888; |
|
font-size: 44upx; |
|
} |
|
|
|
.cen { |
|
display: flex; |
|
flex-direction: column; |
|
flex: 1; |
|
font-size: 28upx; |
|
color: $font-color-dark; |
|
} |
|
|
|
.name { |
|
font-size: 34upx; |
|
margin-right: 24upx; |
|
} |
|
|
|
.address { |
|
margin-top: 16upx; |
|
margin-right: 20upx; |
|
color: $font-color-light; |
|
} |
|
|
|
.icon-you { |
|
font-size: 32upx; |
|
color: $font-color-light; |
|
margin-right: 30upx; |
|
} |
|
|
|
.a-bg { |
|
position: absolute; |
|
left: 0; |
|
bottom: 0; |
|
display: block; |
|
width: 100%; |
|
height: 5upx; |
|
} |
|
} |
|
|
|
.goods-section { |
|
margin-top: 16upx; |
|
background: #fff; |
|
padding-bottom: 1px; |
|
|
|
.g-header { |
|
display: flex; |
|
align-items: center; |
|
height: 84upx; |
|
padding: 0 30upx; |
|
position: relative; |
|
font-size: 32rpx; |
|
color: #000000 !important; |
|
font-weight: 700; |
|
} |
|
|
|
.logo { |
|
display: block; |
|
width: 50upx; |
|
height: 50upx; |
|
border-radius: 100px; |
|
} |
|
|
|
.name { |
|
font-size: 30upx; |
|
color: $font-color-base; |
|
} |
|
|
|
.g-item { |
|
display: flex; |
|
margin: 20upx 30upx; |
|
|
|
image { |
|
flex-shrink: 0; |
|
display: block; |
|
width: 140upx; |
|
height: 140upx; |
|
border-radius: 4upx; |
|
} |
|
|
|
.right { |
|
flex: 1; |
|
padding-left: 24upx; |
|
overflow: hidden; |
|
} |
|
|
|
.title { |
|
font-size: 30upx; |
|
color: $font-color-dark; |
|
} |
|
|
|
.spec { |
|
font-size: 26upx; |
|
color: $font-color-light; |
|
} |
|
|
|
.price-box { |
|
display: flex; |
|
align-items: center; |
|
font-size: 32upx; |
|
color: $font-color-dark; |
|
padding-top: 10upx; |
|
|
|
.price { |
|
margin-bottom: 4upx; |
|
} |
|
|
|
.number { |
|
font-size: 26upx; |
|
color: $font-color-base; |
|
margin-left: 20upx; |
|
} |
|
} |
|
|
|
.step-box { |
|
position: relative; |
|
} |
|
} |
|
} |
|
|
|
.yt-list { |
|
margin-top: 16upx; |
|
background: #fff; |
|
} |
|
|
|
.yt-list-cell { |
|
display: flex; |
|
align-items: center; |
|
padding: 10upx 30upx 10upx 40upx; |
|
line-height: 70upx; |
|
position: relative; |
|
|
|
&.cell-hover { |
|
background: #fafafa; |
|
} |
|
|
|
&.b-b:after { |
|
left: 30upx; |
|
} |
|
|
|
.cell-icon { |
|
height: 32upx; |
|
width: 32upx; |
|
font-size: 22upx; |
|
color: #fff; |
|
text-align: center; |
|
line-height: 32upx; |
|
background: #f85e52; |
|
border-radius: 4upx; |
|
margin-right: 12upx; |
|
|
|
&.hb { |
|
background: #ffaa0e; |
|
} |
|
|
|
&.lpk { |
|
background: #3ab54a; |
|
} |
|
|
|
} |
|
|
|
.cell-more { |
|
align-self: center; |
|
font-size: 24upx; |
|
color: $font-color-light; |
|
margin-left: 8upx; |
|
margin-right: -10upx; |
|
} |
|
|
|
.cell-tit { |
|
flex: 1; |
|
font-size: 26upx; |
|
color: $font-color-light; |
|
margin-right: 10upx; |
|
} |
|
|
|
.cell-tip { |
|
font-size: 26upx; |
|
color: $font-color-dark; |
|
|
|
&.disabled { |
|
color: $font-color-light; |
|
} |
|
|
|
&.active { |
|
color: $base-color; |
|
} |
|
|
|
&.red { |
|
color: $base-color; |
|
} |
|
} |
|
|
|
&.desc-cell { |
|
.cell-tit { |
|
max-width: 90upx; |
|
} |
|
} |
|
|
|
.desc { |
|
flex: 1; |
|
font-size: $font-base; |
|
color: $font-color-dark; |
|
} |
|
} |
|
|
|
/* 支付列表 */ |
|
.pay-list { |
|
padding-left: 40upx; |
|
margin-top: 16upx; |
|
background: #fff; |
|
|
|
.pay-item { |
|
display: flex; |
|
align-items: center; |
|
padding-right: 20upx; |
|
line-height: 1; |
|
height: 110upx; |
|
position: relative; |
|
} |
|
|
|
.icon-weixinzhifu { |
|
width: 80upx; |
|
font-size: 40upx; |
|
color: #6BCC03; |
|
} |
|
|
|
.icon-alipay { |
|
width: 80upx; |
|
font-size: 40upx; |
|
color: #06B4FD; |
|
} |
|
|
|
.icon-xuanzhong2 { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
width: 60upx; |
|
height: 60upx; |
|
font-size: 40upx; |
|
color: $base-color; |
|
} |
|
|
|
.tit { |
|
font-size: 32upx; |
|
color: $font-color-dark; |
|
flex: 1; |
|
} |
|
} |
|
|
|
.footer { |
|
position: fixed; |
|
left: 0; |
|
bottom: 0; |
|
z-index: 995; |
|
display: flex; |
|
align-items: center; |
|
width: 100%; |
|
// height: 90upx; |
|
justify-content: space-between; |
|
font-size: 30upx; |
|
background-color: #fff; |
|
z-index: 998; |
|
color: $font-color-base; |
|
box-shadow: 0 -1px 5px rgba(0, 0, 0, .1); |
|
|
|
.price-content { |
|
padding-left: 30upx; |
|
} |
|
|
|
.price-tip { |
|
color: $base-color; |
|
margin-left: 8upx; |
|
} |
|
|
|
.price { |
|
font-size: 36upx; |
|
color: $base-color; |
|
} |
|
|
|
.submit { |
|
// display: flex; |
|
// align-items: center; |
|
// justify-content: center; |
|
// width: 280upx; |
|
// height: 100%; |
|
color: #fff; |
|
font-size: 32upx; |
|
// background-color: $base-color; |
|
background: linear-gradient(90deg, #F83D3D 0%, #FD7878 100%); |
|
opacity: 1; |
|
border-radius: 50rpx; |
|
padding: 20rpx 50rpx; |
|
margin: 20rpx; |
|
} |
|
} |
|
|
|
/* 优惠券面板 */ |
|
.mask { |
|
display: flex; |
|
align-items: flex-end; |
|
position: fixed; |
|
left: 0; |
|
top: var(--window-top); |
|
bottom: 0; |
|
width: 100%; |
|
background: rgba(0, 0, 0, 0); |
|
z-index: 9995; |
|
transition: .3s; |
|
|
|
.mask-content { |
|
width: 100%; |
|
min-height: 30vh; |
|
max-height: 70vh; |
|
background: #f3f3f3; |
|
transform: translateY(100%); |
|
transition: .3s; |
|
overflow-y: scroll; |
|
} |
|
|
|
&.none { |
|
display: none; |
|
} |
|
|
|
&.show { |
|
background: rgba(0, 0, 0, .4); |
|
|
|
.mask-content { |
|
transform: translateY(0); |
|
} |
|
} |
|
} |
|
|
|
/* 优惠券列表 */ |
|
.coupon-item { |
|
display: flex; |
|
flex-direction: column; |
|
margin: 20upx 24upx; |
|
background: #fff; |
|
|
|
.con { |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
height: 120upx; |
|
padding: 0 30upx; |
|
|
|
&:after { |
|
position: absolute; |
|
left: 0; |
|
bottom: 0; |
|
content: ''; |
|
width: 100%; |
|
height: 0; |
|
border-bottom: 1px dashed #f3f3f3; |
|
transform: scaleY(50%); |
|
} |
|
} |
|
|
|
.left { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
flex: 1; |
|
overflow: hidden; |
|
height: 100upx; |
|
} |
|
|
|
.title { |
|
font-size: 32upx; |
|
color: $font-color-dark; |
|
margin-bottom: 10upx; |
|
} |
|
|
|
.time { |
|
font-size: 24upx; |
|
color: $font-color-light; |
|
} |
|
|
|
.right { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 26upx; |
|
color: $font-color-base; |
|
height: 100upx; |
|
} |
|
|
|
.price { |
|
font-size: 44upx; |
|
color: $base-color; |
|
|
|
&:before { |
|
content: '￥'; |
|
font-size: 34upx; |
|
} |
|
} |
|
|
|
.tips { |
|
font-size: 24upx; |
|
color: $font-color-light; |
|
line-height: 60upx; |
|
padding-left: 30upx; |
|
} |
|
|
|
.circle { |
|
position: absolute; |
|
left: -6upx; |
|
bottom: -10upx; |
|
z-index: 10; |
|
width: 20upx; |
|
height: 20upx; |
|
background: #f3f3f3; |
|
border-radius: 100px; |
|
|
|
&.r { |
|
left: auto; |
|
right: -6upx; |
|
} |
|
} |
|
} |
|
</style> |