Skip to content

7
7-Eleven
Commit a4e68e84 by 高淑倩
Options

add: 购物车_组件

parent e7481759
Showing with 452 additions and 25 deletions
src/component/scrollDel/scrollDel.js 0 → 100644
// component/scrollDel/scrollDel.js
var app = getApp()
const wxService = require('../../utils/wxService')
const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo
Component({
/**
* 组件的属性列表
*/
properties: {
cartList: {
type: Array,
value: []
}
},
attached () {
},
/**
* 组件的初始数据
*/
data: {
delBtnWidth: 132,
cartList: [{ content: "1", right: 0 }, { content: "2", right: 0 }],
isScroll:true,
windowHeight: 0,
checkedColor: 'rgb(203, 60, 60)',
},
ready() {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight
});
}
});
},
/**
* 组件的方法列表
*/
methods: {
checkPro(e) {
// index
var index = e.currentTarget.dataset.index
wxService.nextTick(() => {
this.triggerEvent('checkProChange', index)
})
},
minusNum(e){
// index
var index = e.currentTarget.dataset.index
wxService.nextTick(() => {
this.triggerEvent('minusNumChange', index)
})
},
addNum(e){
// index
var index = e.currentTarget.dataset.index
wxService.nextTick(() => {
this.triggerEvent('addNumChange', index)
})
},
blurNum(e){
// value index
var index = e.currentTarget.dataset.index
var value = e.detail.value
let params = {
index,value
}
wxService.nextTick(() => {
this.triggerEvent('blurNumChange', params)
})
},
inputNum(e){
// value index
var index = e.currentTarget.dataset.index
var value = e.detail.value
let params = {
index,value
}
wxService.nextTick(() => {
this.triggerEvent('inputNumChange', params)
})
},
delItem(e){
// skuId index
var params = e.currentTarget.dataset
wxService.nextTick(() => {
this.triggerEvent('delItemChange', params)
})
},
drawStart: function (e) {
var touch = e.touches[0]
for(var index in this.data.cartList) {
var item = this.data.cartList[index]
item.right = 0
}
this.setData({
cartList: this.data.cartList,
startX: touch.clientX,
})
},
drawMove: function (e) {
var touch = e.touches[0]
var item = this.data.cartList[e.currentTarget.dataset.index]
var disX = this.data.startX - touch.clientX
if (disX >= 20) {
if (disX > this.data.delBtnWidth) {
disX = this.data.delBtnWidth
}
item.right = disX
this.setData({
isScroll: false,
cartList: this.data.cartList
})
} else {
item.right = 0
this.setData({
isScroll: true,
cartList: this.data.cartList
})
}
},
drawEnd: function (e) {
var item = this.data.cartList[e.currentTarget.dataset.index]
if (item.right >= this.data.delBtnWidth/2) {
item.right = this.data.delBtnWidth
this.setData({
isScroll: true,
cartList: this.data.cartList,
})
} else {
item.right = 0
this.setData({
isScroll: true,
cartList: this.data.cartList,
})
}
}
}
})
src/component/scrollDel/scrollDel.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
src/component/scrollDel/scrollDel.wxml 0 → 100644
<!--component/scrollDel/scrollDel.wxml-->
<scroll-view scroll-y="{{isScroll}}" style='height:{{windowHeight}}px'>
<block class="cart-item" wx:key="item" wx:for="{{cartList}}">
<view data-index='{{index}}' class="order-item cart-list" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{item.right}}rpx">
<view data-index="{{index}}">
<icon size="16" type="{{item.checked ? 'success' : 'circle'}}" color="{{checkedColor}}" data-index="{{index}}" catchtap="checkPro"></icon>
</view>
<view class="pro-info">
<image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix"></image>
<view class="pro-right-info">
<view class="pro-name">{{item.productName}}</view>
<view class="pro-sku">{{item.skuSpec}}</view>
<view class="pro-price">
<view class="price">￥{{item.price}}</view>
<view class="pro-num-edit">
<button class="redus-num" data-index="{{index}}" catchtap="minusNum">-</button>
<input class="pro-num-edit-input" type="number" data-index="{{index}}" catchtap bindblur="blurNum" bindinput="inputNum" value="{{item.count}}"></input>
<button class="add-num" data-index="{{index}}" catchtap="addNum">+</button>
</view>
</view>
</view>
</view>
<view class="remove" data-index="{{index}}" data-skuId="{{item.skuId}}" bindtap="delItem">删除 </view>
</view>
</block>
</scroll-view>
\ No newline at end of file
src/component/scrollDel/scrollDel.wxss 0 → 100644
/* component/scrollDel/scrollDel.wxss */
@import './../../base/base.wxss';
.order-item {
width: 100%;
display: flex;
position: relative;
}
.remove{
width: 132rpx;
height: 100%;
background-color: rgba(149, 149, 149, 1);
color: white;
position: absolute;
top: 0;
right: -132rpx;
display: flex;
justify-content: center;
align-items: center;
}
.cart-item{
display: flex;
overflow: hidden;
}
.cart-item:last-child .pro-info{
border-bottom: none;
}
.cart-content {
background-color: #ffffff;
}
.cart-list,.overdue-list{
width: 692rpx;
display: flex;
padding: 30rpx 32rpx 0 30rpx;
align-items: center;
flex-shrink: 0;
}
.pro-info{
margin-left: 24rpx;
flex: 1;
display: flex;
border-bottom: 1rpx solid rgba(151,151,151,0.3);
padding-bottom: 32rpx;
align-items: center;
}
.cart-item:last-child .pro-info{
border-bottom: none;
}
.overdue-list:last-child .pro-info{
border-bottom: none;
}
.pro-img{
width: 180rpx;
height: 180rpx;
}
.pro-right-info{
flex: 1;
margin-left: 26rpx;
}.pro-name{
font-size: 25rpx;
width: 425rpx;
color: #333333;
}
.pro-sku{
color: #aaaaaa;
font-size: 22rpx;
margin-top: 10rpx;
}
.pro-price{
display: flex;
justify-content: space-between;
margin-top: 16rpx;
}
.pro-num-edit{
display: flex;
width:107rpx;
}
.pro-num-edit button {
padding: 4rpx;
width: 80rpx;
height: 40rpx;
line-height: 40rpx;
color: #868686;
font-size: 28rpx;
background-color: #ffffff;
}
.pro-num-edit button::after {
border-radius: 0;
border: 0;
}
.pro-num-edit-input {
line-height: 40rpx;
height: 40rpx ;
text-align: center;
color: #666660;
font-size: 28rpx;
}
.pro-price .price{
font-size: 32rpx;
color: #cb3c3c;
font-weight: 600;
}
.clear-btn{
width: 136rpx;
height: 38rpx;
line-height: 38rpx;
color: #989696;
font-size: 18rpx;
border-radius: 21rpx;
border: 1px solid #cccccc;
text-align: center;
float: right;
margin-top:16rpx;
margin-right: 30rpx;
}
.clear-btn:active{
opacity: 0.5;
}
.clearflex{
clear: both;
}
.overdue-status{
font-size: 16rpx;
color: #ffffff;
width: 44rpx;
height: 26rpx;
line-height: 26rpx;
text-align: center;
border-radius: 3rpx;
background-color: rgba(187, 187, 187, 1);
}
.cart-bottom{
position: fixed;
left: 0;
/* bottom: 124rpx; */
display: flex;
align-items: center;
}
.buy-btn{
width: 214rpx;
height: 88rpx;
text-align: center;
line-height: 88rpx;
color: #ffffff;
font-size: 25rpx;
flex: 1;
}
.total{
width: 468rpx;
height: 88rpx;
display: flex;
border-top: 1px solid rgba(151, 151, 151, 0.3);
text-align: right;
padding-right: 39rpx;
background-color: #ffffff;
padding-left: 30rpx;
align-items: center;
}
.total-label{
font-size: 26rpx;
color: #808080;
}
.total-price{
color: #cb3c3c;
font-size: 32rpx;
}
.total-amount{
flex: 1;
}
.all-radio{
display: flex;
align-items: center;
}
.all{
margin-left: 24rpx;
font-size: 26rpx;
color: #333333;
}
.pro-price .overdue-price{
color: #808080;
}
.overdue-name{
color: #787878;
}
.cart-item{
display: flex;
overflow: hidden;
}
.empty{
color: #808080;
text-align: center;
width: 100%;
margin-top: 458rpx;
}
\ No newline at end of file
src/pages/cart/cart.js
...@@ -45,6 +45,7 @@ wxService.page({ ...@@ -45,6 +45,7 @@ wxService.page({
} }
this.init() this.init()
}, },
init() { init() {
wx.showLoading({ wx.showLoading({
title: '加载中' title: '加载中'
...@@ -87,9 +88,13 @@ wxService.page({ ...@@ -87,9 +88,13 @@ wxService.page({
} }
}) })
}, },
minusNumChange(e) {
this.minusNum(e.detail)
},
minusNum: function (e) { // 减少数量 minusNum: function (e) { // 减少数量
let cartList = this.data.cartList let cartList = this.data.cartList
let proNum = cartList[e.currentTarget.dataset.index].count // let proNum = cartList[e.currentTarget.dataset.index].count
let proNum = cartList[e].count
console.log('减少数量', proNum) console.log('减少数量', proNum)
if (proNum > 1) { if (proNum > 1) {
proNum-- proNum--
...@@ -100,45 +105,68 @@ wxService.page({ ...@@ -100,45 +105,68 @@ wxService.page({
}) })
return false return false
} }
cartList[e.currentTarget.dataset.index].count = proNum // cartList[e.currentTarget.dataset.index].count = proNum
cartList[e].count = proNum
this.setData({ this.setData({
cartList: cartList cartList: cartList
}, function () { }, function () {
this.setTotalFee() this.setTotalFee()
this.editOk(cartList[e.currentTarget.dataset.index]) //调用完成 this.editOk(cartList[e]) //调用完成
}) })
}, },
addNum: function (e) { // 增加数量 addNumChange(e) {
this.addNum(e.detail)
},
addNum (e) { // 增加数量
var cartList = this.data.cartList var cartList = this.data.cartList
var proNum = cartList[e.currentTarget.dataset.index].count // var proNum = cartList[e.currentTarget.dataset.index].count
var proNum = cartList[e].count
console.log('增加数量',proNum) console.log('增加数量',proNum)
// 判断库存
if (proNum < 100) {
proNum++
} else {
wx.showToast({
title: '不能超过库存',
icon: 'none'
})
return false
}
cartList[e.currentTarget.dataset.index].count = proNum cartList[e].count = proNum
this.setData({ this.setData({
cartList: cartList cartList: cartList
}, function () { }, function () {
this.setTotalFee() this.setTotalFee()
this.editOk(cartList[e.currentTarget.dataset.index]) //调用完成 this.editOk(cartList[e]) //调用完成
}) })
}, },
blurNum: function (e) { blurNumChange(e) {
var newNum = e.detail.value this.blurNum(e.detail)
},
blurNum (e) {
var newNum = e.value
// var newNum = e.detail.value
var cartList = this.data.cartList var cartList = this.data.cartList
if (newNum === '') { if (newNum === '') {
newNum = 1 newNum = 1
} }
cartList[e.currentTarget.dataset.index].count = newNum cartList[e.index].count = newNum
this.setData({ this.setData({
cartList: cartList cartList: cartList
}, function () { }, function () {
this.setTotalFee() this.setTotalFee()
this.editOk(cartList[e.currentTarget.dataset.index]) //调用完成 this.editOk(cartList[e.index]) //调用完成
}) })
}, },
inputNumChange(e) {
this.inputNum(e.detail)
},
inputNum: function (e) { // 输入数量 inputNum: function (e) { // 输入数量
var newNum = e.detail.value // var newNum = e.detail.value
var newNum = e.value
if (newNum) { if (newNum) {
const { cartList } = this.data const { cartList } = this.data
if (newNum === '0') { if (newNum === '0') {
...@@ -146,12 +174,12 @@ wxService.page({ ...@@ -146,12 +174,12 @@ wxService.page({
} else { } else {
newNum = parseInt(newNum) newNum = parseInt(newNum)
} }
cartList[e.currentTarget.dataset.index].count = newNum cartList[e.index].count = newNum
this.setData({ this.setData({
cartList: cartList cartList: cartList
}, function () { }, function () {
this.setTotalFee() this.setTotalFee()
this.editOk(cartList[e.currentTarget.dataset.index]) //调用完成 this.editOk(cartList[e.index]) //调用完成
}) })
} }
}, },
...@@ -253,9 +281,13 @@ wxService.page({ ...@@ -253,9 +281,13 @@ wxService.page({
} }
}) })
}, },
checkProChange(e) {
this.checkPro(e.detail)
},
checkPro: function (e) { // 选中商品 checkPro: function (e) { // 选中商品
var cartList = this.data.cartList var cartList = this.data.cartList
var index = e.currentTarget.dataset.index // var index = e.currentTarget.dataset.index
var index = e
var checkAll = false var checkAll = false
if (cartList[index].checked) { if (cartList[index].checked) {
...@@ -307,10 +339,12 @@ wxService.page({ ...@@ -307,10 +339,12 @@ wxService.page({
}) })
} }
}, },
delItemChange(e) {
this.deletePro(e.detail)
},
//删除商品 //删除商品
deletePro(e) { deletePro(e) {
const {index, skuid} = e.currentTarget.dataset const {index, skuid} = e
var self = this var self = this
wx.showModal({ wx.showModal({
title: '提示', title: '提示',
......
src/pages/cart/cart.json
{ {
"navigationBarTitleText": "购物车", "navigationBarTitleText": "购物车",
"usingComponents": {} "usingComponents": {
"scroll-del": "/component/scrollDel/scrollDel"
}
} }
\ No newline at end of file
src/pages/cart/cart.wxml
...@@ -2,18 +2,29 @@ ...@@ -2,18 +2,29 @@
<view class="page-cart" style="padding-bottom:{{currentHeight + 88}}px"> <view class="page-cart" style="padding-bottom:{{currentHeight + 88}}px">
<view class="open-card"> <view class="open-card">
<view class="vip-desc"> <view class="vip-desc">
<image class="plus-img" src="/assets/imgs/7_1_0/plus-icon.png" mode="widthFix"></image> <image class="plus-img" src="/assets/imgs/7_1_0/plus-icon.png" mode="widthFix" />
<text class="vip-info">VIP尊享N大权益，本单立减</text> <text class="vip-info">VIP尊享N大权益，本单立减</text>
<text class="vip-price">￥145</text> <text class="vip-price">￥145</text>
</view> </view>
<view class="open-btn"> <view class="open-btn">
<text>去开卡</text> <text>去开卡</text>
<image class="arrow-right" mode="widthFix" src="/assets/imgs/7_1_0/small-arrow-right.png" ></image> <image class="arrow-right" mode="widthFix" src="/assets/imgs/7_1_0/small-arrow-right.png" />
</view> </view>
</view> </view>
<!-- 购物车列表 -->
<view class="cart-content" wx:if="{{cartList.length}}"> <view class="cart-content" wx:if="{{cartList.length}}">
<scroll-del
cartList="{{cartList}}"
bind:checkProChange="checkProChange"
bind:addNumChange="addNumChange"
bind:minusNumChange="minusNumChange"
bind:blurNumChange="blurNumChange"
bind:inputNumChange="inputNumChange"
bind:delItemChange="delItemChange"
/>
</view>
<!-- 购物车列表 -->
<!-- <view class="cart-content" wx:if="{{cartList.length}}">
<view class="cart-item" wx:for="{{cartList}}" wx:key="{{index}}"> <view class="cart-item" wx:for="{{cartList}}" wx:key="{{index}}">
<view class="cart-list" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.shows}}" data-index="{{index}}"> <view class="cart-list" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.shows}}" data-index="{{index}}">
<view class="select-radio" data-index="{{index}}"> <view class="select-radio" data-index="{{index}}">
...@@ -37,7 +48,7 @@ ...@@ -37,7 +48,7 @@
</view> </view>
<view class="delete" data-index="{{index}}" data-skuId="{{item.skuId}}" bindtap="deletePro">删除</view> <view class="delete" data-index="{{index}}" data-skuId="{{item.skuId}}" bindtap="deletePro">删除</view>
</view> </view>
</view> </view>-->
<!-- 失效宝贝 --> <!-- 失效宝贝 -->
<view class="overdue-pro" wx:if="{{outGoods.length}}"> <view class="overdue-pro" wx:if="{{outGoods.length}}">
...@@ -45,7 +56,7 @@ ...@@ -45,7 +56,7 @@
<view class="overdue-list clearflex"> <view class="overdue-list clearflex">
<view class="overdue-status">失效</view> <view class="overdue-status">失效</view>
<view class="pro-info"> <view class="pro-info">
<image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix"></image> <image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix" />
<view class="pro-right-info"> <view class="pro-right-info">
<view class="pro-name overdue-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view> <view class="pro-name overdue-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
<view class="pro-sku">规格</view> <view class="pro-sku">规格</view>
...@@ -63,7 +74,7 @@ ...@@ -63,7 +74,7 @@
<view class="cart-bottom" style="bottom:{{currentHeight}}px"> <view class="cart-bottom" style="bottom:{{currentHeight}}px">
<view class="total"> <view class="total">
<view class="select-radio all-radio" bindtap="checkAll"> <view class="select-radio all-radio" bindtap="checkAll">
<icon type="{{checkAll ? 'success' : 'circle'}}" color="{{checkedColor}}" size="16" ></icon> <icon type="{{checkAll ? 'success' : 'circle'}}" color="{{checkedColor}}" size="16" />
<text class="all" >全选</text> <text class="all" >全选</text>
</view> </view>
<view class="total-amount"> <view class="total-amount">
...@@ -75,3 +86,4 @@ ...@@ -75,3 +86,4 @@
</view> </view>
</view> </view>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment