<style lang="less">
.shopcar-item-container {
width: 100%;
// padding-right: 42rpx;
box-sizing: border-box;
.border-line {
height: 2rpx;
z-index: 9;
width: calc(~'100vw - 132rpx');
background: #eeeeee;
position: absolute;
bottom: 0;
left: 90rpx;
}
.del-btn {
// width: 132rpx;
height: 162rpx;
position: absolute;
right: 0rpx;
top: 42rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
line-height: 162rpx;
letter-spacing: 3.2rpx;
.collect {
width: 144rpx;
height: 162rpx;
background: #ffba59;
.wrap {
flex-wrap: wrap;
height: 80rpx;
width: 70rpx;
line-height: 40rpx;
}
}
.del {
width: 144rpx;
height: 100%;
background: #ff5b21;
}
}
.order-item-product {
background: #fff;
position: relative;
z-index: 5;
padding-right: 42rpx;
padding-bottom: 42rpx;
margin-top: 42rpx;
transition: left 0.5s;
.img-container {
border-radius: 18rpx;
height: 162rpx;
width: 162rpx;
margin-right: 24rpx;
overflow: hidden;
}
.product-img {
height: 100%;
width: 100%;
}
.product-name {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
overflow: hidden;
font-size: 28rpx;
line-height: 40rpx;
letter-spacing: 3.2rpx;
color: #353535;
}
.attr-name {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
line-height: 30rpx;
overflow: hidden;
font-family: PingFangSC-Regular;
font-size: 22rpx;
color: #bbbbbb;
margin-top: 12rpx;
letter-spacing: 1rpx;
}
.offshelves {
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #b2b2b2;
letter-spacing: 2rpx;
}
.act-name {
position: absolute;
bottom: 42rpx;
left: 0;
padding: 0 12rpx;
height: 30rpx;
background: #ff5b21;
border-radius: 4rpx;
line-height: 30rpx;
text-align: center;
font-family: PingFangTC-Regular;
font-size: 16rpx;
color: #ffffff;
letter-spacing: 1rpx;
}
.product-bottom {
justify-content: space-between;
}
.price-container {
justify-content: space-between;
align-items: flex-end;
}
.product-price {
font-size: 24rpx;
color: #ff5b21;
letter-spacing: 1.6rpx;
}
.product-real-price {
font-size: 24rpx;
color: #bbbbbb;
letter-spacing: 1rpx;
margin-left: 12rpx;
text-decoration: line-through;
text-decoration-line: line-through;
}
.product-num {
height: 48rpx;
width: 166rpx;
box-sizing: border-box;
font-size: 28rpx;
color: #353535;
.add-icon {
box-sizing: border-box;
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #ff8080 no-repeat center;
background-image: linear-gradient(to top, #353535, #353535),
linear-gradient(to top, #353535, #353535);
background-size: 15rpx 3rpx, 3rpx 15rpx;
}
.reduce-icon {
box-sizing: border-box;
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #bbb no-repeat center;
background-image: linear-gradient(to top, #fff, #fff),
linear-gradient(to top, #fff, #fff);
background-size: 14rpx 3rpx, 3rpx 3rpx;
}
}
}
.total-price {
width: calc(~'100% - 144rpx');
margin-left: 102rpx;
padding-top: 36rpx;
border-top: 1rpx solid rgb(234, 234, 234);
color: rgb(136, 136, 136);
font-size: 28rpx;
padding-left: 6rpx;
box-sizing: border-box;
.price {
font-size: 30rpx;
color: #ff5b21;
}
}
.select {
width: 90rpx;
height: 162rpx;
box-sizing: border-box;
align-items: center;
}
.brand-container {
width: calc(~'100% - 84rpx');
align-items: center;
font-size: 28rpx;
color: rgb(136, 136, 136);
padding: 36rpx 0;
margin-left: 42rpx;
margin-bottom: 36rpx;
box-sizing: border-box;
border-bottom: 1rpx solid rgb(238, 238, 238);
}
}
// 选中框
.s-icon {
height: 42rpx;
width: 42rpx;
border-radius: 16rpx;
overflow: hidden;
box-sizing: border-box;
}
.unselect-icon {
border: 2rpx solid rgb(136, 136, 136);
}
.select-icon {
background: #ff8080;
background-size: 100%;
}
.all-unselect {
border: 2rpx solid #000;
}
.Invalid {
border-radius: 4px;
background: #bbbbbb;
letter-spacing: 2.6rpx;
font-size: 22rpx;
color: #fff;
margin-left: 18rpx;
text-align: center;
line-height: 36rpx;
height: 36rpx;
width: 60rpx;
}
//底部浮行
.float-btn {
z-index: 10;
height: 120rpx;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background: #fff;
border: 1rpx solid rgb(231, 231, 231);
.float-left {
font-size: 28rpx;
padding: 0 30rpx 0 42rpx;
flex: 2;
color: #000;
.price-container {
align-items: flex-end;
}
.shop-price {
font-size: 34rpx;
letter-spacing: 1rpx;
color: #ff5b21;
position: relative;
top: 4rpx;
}
}
.submit-btn {
font-size: 34rpx;
width: 200rpx;
color: #000;
background: #ff8080;
}
}
.invalid-list {
width: calc(~'100% - 84rpx');
padding-bottom: 36rpx;
margin-top: 73rpx;
font-size: 28rpx;
letter-spacing: 1rpx;
color: rgb(136, 136, 136);
box-sizing: border-box;
border-bottom: 1rpx solid rgb(238, 238, 238);
margin-bottom: 2rpx;
.clear {
color: rgb(53, 53, 53);
}
}
.empty {
width: 100%;
box-sizing: border-box;
height: 773rpx;
justify-content: flex-end;
align-items: center;
.empty-img {
width: 380rpx;
height: 380rpx;
}
.empty-tip {
font-size: 28rpx;
letter-spacing: 3.23rpx;
line-height: 45rpx;
color: #b2b2b2;
text-align: center;
}
.btn {
width: 250rpx;
height: 80rpx;
background: #ff8080;
line-height: 80rpx;
text-align: center;
font-size: 34rpx;
color: rgba(0, 0, 0, 0.87);
letter-spacing: 3px;
}
}
.opacity {
opacity: 0.3;
}
.noPostage {
font-size: 22rpx;
color: #b2b2b2;
letter-spacing: 0;
}
</style>
<template>
<view class="container" style='padding-bottom: 120rpx'>
<view class="shopcar-item-container" wx:if="{{!loading}}">
<!-- <view style="height:48rpx;width:100%" wx:if="{{shopList.length}}"></view> -->
<!-- 购物车商品选择 -->
<view wx:for="{{shopList}}" wx:for-item="item" wx:key="{{index}}" class="flex-h" style="position:relative">
<view class="order-item-product flex-h"
style="width:100%;left:{{item.left?item.left:0}};padding-bottom:{{index==(shopList.length-1)?'0':null}}" @touchstart="touchStart" @touchend="touchEnd"
data-proindex="{{index}}"
>
<!-- 选择状态 -->
<view class="select flex-h flex-cc" @tap="select" id="{{index}}" data-specid="{{item.specId}}">
<view class="{{item.isSelect?'select-icon':'unselect-icon'}} s-icon flex-v flex-cc">
<image wx:if='{{item.isSelect}}' src='https://haimei-bucket.oss-cn-beijing.aliyuncs.com/choose.png' style='height:48rpx;width:48rpx'></image>
</view>
</view>
<!-- 购物车商品 -->
<view class="flex-h flex-1" @tap="navToProduct" id="{{item.productId}}" data-type="{{(index+1)%2}}">
<view class="img-container flex-h flex-cc {{item.index%2===0?'pro-even-bk':'pro-odd-bk'}}">
<image class='product-img' src="{{item.productImg}}" @load='countImage' @error='countImage'/>
</view>
<view class='flex-v flex-1' style="justify-content: space-between;position: relative">
<view class="product-name">{{item.productName}}</view>
<!-- 属性及活动 -->
<view class='flex-1 flex-v product-bottom'>
<view class='attr-name'>{{item.specAttrDesc}}</view>
<view class='act-name' wx:if='{{item.actName}}'><text>{{item.actName}}</text></view>
<view class="flex-h price-container">
<view class='flex-h'>
<text class="product-price number-font">¥{{item.currentPrice/100}}</text>
<text class="product-real-price number-font" wx:if='{{item.hasDiscount}}' hidden='{{item.price==item.currentPrice}}'>¥{{item.price/100}}</text>
</view>
<view class="product-num number-font flex-h flex-bc" catchtap>
<view class="reduce-icon {{item.productNum == 1?'opacity':''}}" @tap.stop="editShopcar" id="{{index}}" data-add="{{false}}" data-id="{{item.specId}}"></view>
<view style="color:rgb(53,53,53)">{{item.productNum}}</view>
<view class="add-icon {{item.productNum >= 99?'opacity':''}}" @tap.stop="editShopcar" id="{{index}}" data-add="{{true}}" data-id="{{item.specId}}"></view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="del-btn flex-h flex-cc" data-proindex="{{index}}" data-storeindex=" {{idx}}" style="">
<view class='collect flex-h flex-cc'>
<view class="flex-v flex-cc wrap" @tap.stop="collect" id="{{index}}" data-id="{{item.specId}}" data-proid="{{item.productId}}">移入收藏</view>
</view>
<view class='del' @tap.stop="del" id="{{index}}" data-id="{{item.specId}}">删除</view>
</view>
<view class='border-line' wx:if='{{index != (shopList.length-1)}}'></view>
</view>
</view>
<!-- 失效商品列表 -->
<view class="flex-bc flex-h invalid-list" wx:if="{{showInv&&invList.length&&!loading}}">
<!-- <view class="unselect-icon icon"></view> -->
<view>失效商品</view>
<view class="clear" @tap="clear">清除失效商品</view>
</view>
<view class="shopcar-item-container" wx:if="{{showInv&&invList.length&&!loading}}">
<!-- 失效商品 -->
<view wx:for="{{invList}}" wx:for-item="item" wx:key="index" class="flex-h" style="position:relative" @tap="clickInv">
<view class="order-item-product flex-h"
style="width:100%;left:{{item.left?item.left:0}};padding-bottom:{{index==(invList.length-1)?'0':null}}" @touchstart="touchStart" @touchend="touchEnd"
data-proindex="{{index}}" data-isinv = "{{true}}"
>
<!-- 选择状态 -->
<view class="select flex-h">
<view class="Invalid">失效</view>
</view>
<!-- 购物车商品 -->
<view class="flex-h flex-1">
<view class="img-container flex-h flex-cc {{item.index%2===0?'pro-even-bk':'pro-odd-bk'}}">
<image class='product-img' src="{{item.productImg}}" @load='countImage' @error='countImage'/>
</view>
<view class='flex-v flex-1' style="justify-content: space-between">
<view class="product-name" style='color: #B2B2B2'>{{item.productName}}</view>
<view class='flex-1 flex-v'>
<view class='attr-name' style='color: #B2B2B2'>{{item.specAttrDesc}}</view>
</view>
<view class="flex-h price-container">
<view class='offshelves' style='color: #B2B2B2'>商品已售罄</view>
<view class="product-num number-font flex-h flex-bc opacity" wx:if='{{false}}'>
<view class="reduce-icon"></view>
<view style="color:rgb(53,53,53)">{{item.productNum}}</view>
<view class="add-icon"></view>
</view>
</view>
</view>
</view>
</view>
<view class="del-btn flex-h flex-cc" data-proindex="{{index}}" data-storeindex=" {{idx}}" style="">
<view class='collect flex-h flex-cc'>
<view class="flex-v flex-cc wrap" @tap.stop="collect" id="{{index}}" data-isinv="{{true}}" data-id="{{item.specId}}" data-proid="{{item.productId}}">移入收藏</view>
</view>
<view class='del' @tap.stop="del" id="{{index}}" data-id="{{item.specId}}" data-isinv="{{true}}">删除</view>
</view>
<view class='border-line' wx:if='{{index != (invList.length-1)}}'></view>
</view>
</view>
<view class="empty flex-v" wx:if="{{!shopList.length&&!invList.length&&!loading&&showYouLike}}">
<view>
<image src="../asserts/img/empty_cart.png" class="empty-img"/>
<view class="empty-tip" style="margin-top: 48rpx;">空空的购物车也会孤单呢</view>
<view class="empty-tip" style='margin-bottom:48rpx;'>快去给她添加宝贝吧</view>
</view>
<view class='btn' @tap="toIndex">
去逛逛
</view>
</view>
<!-- 占位块 -->
<view style="height:156rpx;width:100%;position:fixed;bottom:0;left:0" wx:if="{{shopList.length}}"></view>
<view class="float-btn flex-h" wx:if="{{shopList.length&&!loading}}">
<view class="flex-h float-left flex-bc">
<view class="flex-h flex-cc" @tap="selectAll">
<view class="{{isAllSelect?'select-icon':'unselect-icon'}} s-icon flex-v flex-cc" style="margin-right:24rpx">
<image wx:if='{{isAllSelect}}' src='https://haimei-bucket.oss-cn-beijing.aliyuncs.com/choose.png' style='height:42rpx;width:42rpx'></image>
</view>
<view>已选({{selectCounts}})</view>
</view>
<view class='flex-v price-container'>
<text class="shop-price">¥{{totalPrice/100}}</text>
<view class="noPostage">不含邮费</view>
</view>
</view>
<view class="flex-h flex-cc submit-btn" @tap="submit">结算</view>
</view>
<toast />
<yourLike wx:if="{{showYouLike}}"/>
</view>
</template>
<script>
import wepy from 'wepy'
import toast from '../components/toast'
import testMixin from '../mixins/test'
import yourLike from '../components/your-like'
import {
getShopCartList,
editShopcar,
delShopcar,
addCollect,
getInvalidList,
clearInvalid
} from '../service/api.js'
import { checkUpdateApplet } from '../utils/util.js'
export default class OrderDetail extends wepy.page {
config = {
navigationBarTitleText: '',
enablePullDownRefresh: true
// onReachBottomDistance: 800
}
components = {
toast: toast,
yourLike: yourLike
}
mixins = [testMixin]
onLoad(opt) {
this.startTime = new Date().getTime()
this._getShopCartList(() => {
this._getInvalidList()
this.showYouLike = true
})
}
onShow() {
if (this.backToThis) {
this.onPullDownRefresh()
this.backToThis = false
}
checkUpdateApplet()
}
onReady() {
this.readyTime = new Date().getTime()
}
onHide() {
this.backToThis = true
}
onShareAppMessage(res) {
return {
title: ''
}
}
onPullDownRefresh() {
this.shopList = []
this.page = 1
this.over = false
this.loading = true
this.showInv = false
this.showYouLike = false
this._getShopCartList(() => {
this._getInvalidList()
wx.stopPullDownRefresh()
this.showYouLike = true
})
}
/**
* 获取购物车列表
*/
_getShopCartList(fn) {
clearTimeout(this.timer)
if (this.over) {
return
}
getShopCartList(this.page++)
.then(res => {
if (res.length < 10) {
this.showInv = true
this.isOdd = res.length % 2
}
if (res.length === 0) {
this.over = true
} else {
res.map((el, index) => {
el.index = index
})
this.shopList = this.shopList.concat(res)
let numOfSelected = 0
this.shopList.map(el => {
numOfSelected = el.isSelect ? numOfSelected + 1 : null
})
if (numOfSelected === this.shopList.length) {
this.isAllSelect = true
} else {
this.isAllSelect = false
}
}
fn && fn()
this.loading = false
this.$apply()
console.log(
'shopping-car-page=>getShopCartList=>购物车列表',
this.shopList
)
})
.catch(err => {
console.warn('shopping-car-page=>getShopCartList=>购物车失败', err)
})
}
/**
* 获取失效列表
*/
_getInvalidList() {
getInvalidList(1, 999).then(res => {
res.map((el, index) => {
el.index = this.isOdd === true ? index : index + 1
})
this.invList = res
console.log('shopping-car-page=>getInvalidList=>失效列表', this.invList)
this.$apply()
})
}
data = {
hideBtn: false,
item: {},
isOrderDetail: true,
isShopcar: true,
shopList: [],
invList: [],
isAllSelect: false,
showInv: false,
page: 1,
over: false,
loading: true,
timer: null,
isOdd: 0,
backToThis: false,
showYouLike: false,
imageCount: 0
}
computed = {
totalPrice() {
let _price = 0
this.shopList.map(el => {
if (el.isSelect === true) {
_price += el.currentPrice * el.productNum
}
})
return _price
},
selectId() {
let ids = []
this.shopList.map(el => {
if (el.isSelect === 1) {
ids.push(el.specId)
}
})
return ids.join(',')
},
selectCounts() {
let counts = 0
this.shopList.map(el => {
if (el.isSelect === 1) {
counts += el.productNum
}
})
return counts
}
}
methods = {
countImage() {
this.imageCount++
// if (
// this.imageCount ===
// this.shopList.length - 1 + this.invList.length - 1
// ) {
// this.finalTime = new Date().getTime()
// pageRecord({
// path: 'pages/shoppingcar-page',
// readyTime: this.readyTime - this.startTime,
// loadTime: this.finalTime - this.startTime
// }).then(res => {
// console.log('shopping-car-page=>pageRecord=>发送load时间成功')
// })
// console.log(
// 'shopping-car-page=>countImage=>load->ready',
// this.readyTime - this.startTime
// )
// console.log(
// 'shopping-car-page=>countImage=>load->final',
// this.finalTime - this.startTime
// )
// }
},
touchStart(e) {
this._start = e.touches[0].clientX
},
touchEnd(e) {
this._end = e.changedTouches[0].clientX
var proIndex = e.currentTarget.dataset.proindex
if (e.currentTarget.dataset.isinv) {
if (this._start - this._end >= 50) {
this.invList.map((el, index) => {
if (index === proIndex) {
el.left = '-288rpx'
} else {
el.left = '0'
}
})
} else if (this._end - this._start >= 50) {
this.invList[proIndex].left = '0'
}
this.shopList.map(el => {
el.left = '0'
})
} else {
if (this._start - this._end >= 50) {
this.shopList.map((el, index) => {
if (index === proIndex) {
el.left = '-288rpx'
} else {
el.left = '0'
}
})
} else if (this._end - this._start >= 50) {
this.shopList[proIndex].left = '0'
}
this.invList.map(el => {
el.left = '0'
})
}
},
navToProduct(e) {
if (this.$parent.globalData.preventMoreTap(e)) {
return
}
wx.navigateTo({
url: `/pages/product-detail-page?productId=${e.currentTarget.id}&type=${
e.currentTarget.dataset.type
}`
})
},
select(e) {
console.log('shoppingcar-page', e.currentTarget.dataset.specid)
console.log('shoppingcar-page', e.currentTarget.dataset)
let _selected = this.shopList[e.currentTarget.id]
console.log('===>', !_selected.isSelect)
// shopCartSelect(e.currentTarget.dataset.specid).then(res => {
_selected.isSelect = !_selected.isSelect
let numOfSelected = 0
this.shopList.map(el => {
numOfSelected = el.isSelect ? numOfSelected + 1 : null
})
if (numOfSelected === this.shopList.length) {
this.isAllSelect = 1
} else {
this.isAllSelect = 0
}
this.$apply()
console.log('shopping-car-page=>select=>选中状态')
// })
},
selectAll() {
// shopCartSelectAll(!this.isAllSelect ? 1 : 0).then(res => {
this.isAllSelect = !this.isAllSelect ? true : false
this.shopList.map(el => {
el.isSelect = this.isAllSelect
})
this.$apply()
// })
},
editShopcar(e) {
let num = this.shopList[e.currentTarget.id].productNum
console.log('当前购物车商品数量====》', num)
if (num === 1 && !e.currentTarget.dataset.add) {
return
}
e.currentTarget.dataset.add ? num++ : num--
e.currentTarget.dataset.add
? this.$parent.globalData.shopCarNum++
: this.$parent.globalData.shopCarNum--
editShopcar(e.currentTarget.dataset.id, num).then(res => {
if (res === null) {
this.shopList[e.currentTarget.id].productNum = num
}
if (res.data.code === 1) {
this.$invoke('toast', 'showToast', {
title: res.data.message,
time: 500
})
}
this.$apply()
})
console.log(
'shopping-car-page=>editShopcar=>this.$parent.globalData.shopCarNum',
this.$parent.globalData.shopCarNum
)
},
del(e) {
const isInv = e.currentTarget.dataset.isinv
delShopcar(e.currentTarget.dataset.id).then(res => {
this.$invoke('toast', 'showToast', {
title: '删除成功',
time: 500
})
if (isInv) {
this.invList.splice(e.currentTarget.id, 1)
} else {
this.$parent.globalData.shopCarNum -= this.shopList[
e.currentTarget.id
].productNum
this.shopList.splice(e.currentTarget.id, 1)
}
this.$apply()
})
},
clear(e) {
let _this = this
wx.showModal({
title: '清除失效商品?',
// content: '',
confirmText: '确认',
confirmColor: '#ff8080',
success: function(res) {
if (res.confirm) {
console.log('shopping-car-page=>clear=>用户点击确定')
clearInvalid().then(res => {
_this.invList = []
_this.$invoke('toast', 'showToast', {
title: '清除成功',
time: 500
})
_this.$apply()
})
} else if (res.cancel) {
console.log('shopping-car-page=>clear=>用户点击取消')
}
}
})
},
collect(e) {
const isInv = e.currentTarget.dataset.isinv
addCollect({
associateId: e.currentTarget.dataset.proid,
associateType: 1
}).then(res => {
// this.collNum(e.currentTarget.dataset.proid)
delShopcar(e.currentTarget.dataset.id).then(res => {
if (isInv) {
this.invList.splice(e.currentTarget.id, 1)
} else {
this.$parent.globalData.shopCarNum -= this.shopList[
e.currentTarget.id
].productNum
this.shopList.splice(e.currentTarget.id, 1)
}
this.$apply()
})
this.$invoke('toast', 'showToast', {
title: '已收藏',
time: 500
})
})
},
submit(e) {
console.log('shoppingcar-page-submit', this.selectId)
console.log('shoppingcar-page-submit', e)
if (!this.totalPrice) {
this.$invoke('toast', 'showToast', {
title: '请选择商品',
time: 500
})
return
}
// 防重复
if (this.$parent.globalData.preventMoreTap(e)) {
return
}
wx.navigateTo({
url: `/pages/confirm-order-page?methods=2&specId=${this.selectId}&totalNum=${this.selectCounts}&type=car`
})
},
toIndex(e) {
if (this.$parent.globalData.preventMoreTap(e)) {
return
}
wx.reLaunch({
url: '/pages/home-page-new'
})
},
clickInv() {
this.$invoke('toast', 'showToast', {
title: '此商品已失效',
time: 500
})
}
}
collNum(productId) {
console.log('shopping-car-page=>collNum=>productId', productId)
let list = []
if (this.$parent.$pages['/pages/home-page-new']) {
list = this.$parent.$pages['/pages/home-page-new'].newProductMoreGoodsData
list.map(el => {
if (el.floorType === 'recommend') {
el.products.map(item => {
if (item.productId === productId) {
if (item.isCollect === 0) {
item.collectNum++
item.isCollect = 1
}
}
})
}
})
} else {
list = this.$parent.$pages['pages/home-page-new'].newProductMoreGoodsData
list.map(el => {
if (el.floorType === 'recommend') {
el.products.map(item => {
if (item.productId === productId) {
if (item.isCollect === 0) {
item.collectNum++
item.isCollect = 1
}
}
})
}
})
}
}
events = {}
}
</script>