Skip to content

7
7-Eleven
Commit a4e68e84 by 高淑倩
Options

add: 购物车_组件

parent e7481759
Showing with 491 additions and 64 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({
}
this.init()
},
init() {
wx.showLoading({
title: '加载中'
......@@ -87,9 +88,13 @@ wxService.page({
}
})
},
minusNumChange(e) {
this.minusNum(e.detail)
},
minusNum: function (e) { // 减少数量
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)
if (proNum > 1) {
proNum--
......@@ -100,45 +105,68 @@ wxService.page({
})
return false
}
cartList[e.currentTarget.dataset.index].count = proNum
// cartList[e.currentTarget.dataset.index].count = proNum
cartList[e].count = proNum
this.setData({
cartList: cartList
}, function () {
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 proNum = cartList[e.currentTarget.dataset.index].count
// var proNum = cartList[e.currentTarget.dataset.index].count
var proNum = cartList[e].count
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({
cartList: cartList
}, function () {
this.setTotalFee()
this.editOk(cartList[e.currentTarget.dataset.index]) //调用完成
this.editOk(cartList[e]) //调用完成
})
},
blurNum: function (e) {
var newNum = e.detail.value
blurNumChange(e) {
this.blurNum(e.detail)
},
blurNum (e) {
var newNum = e.value
// var newNum = e.detail.value
var cartList = this.data.cartList
if (newNum === '') {
newNum = 1
}
cartList[e.currentTarget.dataset.index].count = newNum
cartList[e.index].count = newNum
this.setData({
cartList: cartList
}, function () {
this.setTotalFee()
this.editOk(cartList[e.currentTarget.dataset.index]) //调用完成
this.editOk(cartList[e.index]) //调用完成
})
},
inputNumChange(e) {
this.inputNum(e.detail)
},
inputNum: function (e) { // 输入数量
var newNum = e.detail.value
// var newNum = e.detail.value
var newNum = e.value
if (newNum) {
const { cartList } = this.data
if (newNum === '0') {
......@@ -146,12 +174,12 @@ wxService.page({
} else {
newNum = parseInt(newNum)
}
cartList[e.currentTarget.dataset.index].count = newNum
cartList[e.index].count = newNum
this.setData({
cartList: cartList
}, function () {
this.setTotalFee()
this.editOk(cartList[e.currentTarget.dataset.index]) //调用完成
this.editOk(cartList[e.index]) //调用完成
})
}
},
......@@ -253,9 +281,13 @@ wxService.page({
}
})
},
checkProChange(e) {
this.checkPro(e.detail)
},
checkPro: function (e) { // 选中商品
var cartList = this.data.cartList
var index = e.currentTarget.dataset.index
// var index = e.currentTarget.dataset.index
var index = e
var checkAll = false
if (cartList[index].checked) {
......@@ -307,10 +339,12 @@ wxService.page({
})
}
},
delItemChange(e) {
this.deletePro(e.detail)
},
//删除商品
deletePro(e) {
const {index, skuid} = e.currentTarget.dataset
const {index, skuid} = e
var self = this
wx.showModal({
title: '提示',
......
src/pages/cart/cart.json
{
"navigationBarTitleText": "购物车",
"usingComponents": {}
"usingComponents": {
"scroll-del": "/component/scrollDel/scrollDel"
}
}
\ No newline at end of file
src/pages/cart/cart.wxml
<!--pages/cart/cart.wxml-->
<view class="page-cart" style="padding-bottom:{{currentHeight + 88}}px">
<view class="open-card">
<view class="vip-desc">
<image class="plus-img" src="/assets/imgs/7_1_0/plus-icon.png" mode="widthFix"></image>
<text class="vip-info">VIP尊享N大权益，本单立减</text>
<text class="vip-price">￥145</text>
</view>
<view class="open-btn">
<text>去开卡</text>
<image class="arrow-right" mode="widthFix" src="/assets/imgs/7_1_0/small-arrow-right.png" ></image>
</view>
</view>
<view class="open-card">
<view class="vip-desc">
<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-price">￥145</text>
</view>
<view class="open-btn">
<text>去开卡</text>
<image class="arrow-right" mode="widthFix" src="/assets/imgs/7_1_0/small-arrow-right.png" />
</view>
</view>
<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-content" wx:if="{{cartList.length}}">
<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="select-radio" data-index="{{index}}">
......@@ -37,41 +48,42 @@
</view>
<view class="delete" data-index="{{index}}" data-skuId="{{item.skuId}}" bindtap="deletePro">删除</view>
</view>
</view>
</view>-->
<!-- 失效宝贝 -->
<view class="overdue-pro" wx:if="{{outGoods.length}}">
<view class="clear-btn">清除失效商品</view>
<view class="overdue-list clearflex">
<view class="overdue-status">失效</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 overdue-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
<view class="pro-sku">规格</view>
<view class="pro-price">
<view class="price overdue-price">￥256</view>
</view>
</view>
</view>
</view>
</view>
<!-- 失效宝贝 -->
<view class="overdue-pro" wx:if="{{outGoods.length}}">
<view class="clear-btn">清除失效商品</view>
<view class="overdue-list clearflex">
<view class="overdue-status">失效</view>
<view class="pro-info">
<image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix" />
<view class="pro-right-info">
<view class="pro-name overdue-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
<view class="pro-sku">规格</view>
<view class="pro-price">
<view class="price overdue-price">￥256</view>
</view>
</view>
</view>
</view>
</view>
<view class="empty" wx-if="{{cartList !== null && cartList.length == 0}}">亲，您的购物车还空空的哟～</view>
<view class="empty" wx-if="{{cartList !== null && cartList.length == 0}}">亲，您的购物车还空空的哟～</view>
<!-- 底部 -->
<view class="cart-bottom" style="bottom:{{currentHeight}}px">
<view class="total">
<view class="select-radio all-radio" bindtap="checkAll">
<icon type="{{checkAll ? 'success' : 'circle'}}" color="{{checkedColor}}" size="16" ></icon>
<text class="all" >全选</text>
</view>
<view class="total-amount">
<text class="total-label">合计：</text>
<text class="total-price">￥{{shopCartTotalFee}}</text>
</view>
</view>
<view class="theme-color buy-btn" bindtap="goBuy">立即购买</view>
</view>
<!-- 底部 -->
<view class="cart-bottom" style="bottom:{{currentHeight}}px">
<view class="total">
<view class="select-radio all-radio" bindtap="checkAll">
<icon type="{{checkAll ? 'success' : 'circle'}}" color="{{checkedColor}}" size="16" />
<text class="all" >全选</text>
</view>
<view class="total-amount">
<text class="total-label">合计：</text>
<text class="total-price">￥{{shopCartTotalFee}}</text>
</view>
</view>
<view class="theme-color buy-btn" bindtap="goBuy">立即购买</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