Skip to content

7
7-Eleven
Commit 8a428031 by 赵雅纹
Options

Merge branch 'feature-zyw-sc' into 'dev_7.1.0' 

购物车

See merge request !47
parents 14a4df3e 39c8387d
Showing with 503 additions and 41 deletions
src/pages/cart/cart.js
// pages/cart/cart.js
Page({
const wxService = require('../../utils/wxService')
wxService.page({
/**
* 页面的初始数据
*/
data: {
product:{
quantity:1
},
isAllSelect:false,
currentHeight:52,
startX:'',
delBtnWidth: 66,//删除按钮宽度单位（rpx）
cartList:[
{
imgUrl:'',
name:'1111',
sku:'1',
price:'￥456',
shows:'',
},
{
imgUrl: '',
name: '222',
sku: '2',
price: '￥222',
shows:''
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
......@@ -32,40 +49,123 @@ Page({
selected: 2
})
}
wxService.getSystemInfo().then(res => {
const { statusBarHeight } = res
const { currentHeight, currentMarginTop, currentPaddingTop } = this.data
this.setData({
currentHeight: currentHeight + statusBarHeight,
})
})
console.log(this.data.currentHeight)
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
//选择商品
selectPro(e){
var index = e.currentTarget.dataset.index;
this.data.cartList[index].isSelect = !this.data.cartList[index].isSelect;
this.setData({
cartList: this.data.cartList
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//全选
allSelect(){
this.setData({
isAllSelect: !this.data.isAllSelect
})
if (this.data.isAllSelect){
this.setData({
cartList: this.data.cartList.map((item) =>{
item.isSelect = true
return item
})
})
}else{
this.setData({
cartList: this.data.cartList.map((item) => {
item.isSelect = false
return item
})
})
}
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//删除商品
deletePro(){
wx.showModal({
title: '提示',
content: '确认删除该商品',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// 开始滑动事件
touchS: function (e) {
console.log('e',e)
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.touches[0].clientX
});
}
},
touchM: function (e) {
console.log('333',e)
if (e.touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.data.startX - moveX;
var delBtnWidth = this.data.delBtnWidth;
var txtStyle = "";
if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变
txtStyle = "margin-left:0px";
} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
txtStyle = "margin-left:-" + disX + "px";
if (disX >= delBtnWidth) {
//控制手指移动距离最大值为删除按钮的宽度
txtStyle = "margin-left:-" + delBtnWidth + "px";
}
}
var index = e.currentTarget.dataset.index;
var cartList = this.data.cartList;
cartList[index].shows = txtStyle;
console.log("1", cartList[index].shows);
//更新列表的状态
this.setData({
cartList: cartList
});
}
},
// 滑动中事件
touchE: function (e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束，手指移动的距离
var disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle = "";
txtStyle = disX > delBtnWidth / 2 ? "margin-left:-" + delBtnWidth + "px" : "margin-left:0px";
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
var cartList = this.data.cartList;
cartList[index].shows = txtStyle;
console.log("1", cartList[index].shows);
//更新列表的状态
this.setData({
cartList: cartList
});
} else {
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
src/pages/cart/cart.json
{
"navigationBarTitleText": "购物车",
"usingComponents": {}
}
\ No newline at end of file
src/pages/cart/cart.wxml
<!--pages/cart/cart.wxml-->
<text>pages/cart/cart.wxml</text>
<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="cart-content">
<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" catchtap="selectPro" data-index="{{index}}">
<view class="{{item.isSelect ? 'theme-color' : ''}} circle-radio" >
<image wx:if="{{item.isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
</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.name}}</view>
<view class="pro-sku">{{item.sku}}</view>
<view class="pro-price">
<view class="price">{{item.price}}</view>
<view class="pro-num-edit">
<button class="redus-num" data-index="{{j}}" catchtap="minusNum">-</button>
<input class="pro-num-edit-input" type="number" data-index="{{j}}" catchtap bindblur="blurNum" bindinput="inputNum" value="{{product.quantity}}"></input>
<button class="add-num" data-index="{{j}}" catchtap="addNum">+</button>
</view>
</view>
</view>
</view>
</view>
<view class="delete" bindtap="deletePro">删除</view>
</view>
<!-- <view class="cart-item" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{shows}}" >
<view class="cart-list" >
<view class="select-radio">
<view class="{{isSelect ? 'theme-color' : ''}} circle-radio" >
<image wx:if="{{isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
</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">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
<view class="pro-sku">规格</view>
<view class="pro-price">
<view class="price">￥256</view>
<view class="pro-num-edit">
<button class="redus-num" data-index="{{j}}" catchtap="minusNum">-</button>
<input class="pro-num-edit-input" type="number" data-index="{{j}}" catchtap bindblur="blurNum" bindinput="inputNum" value="{{product.quantity}}"></input>
<button class="add-num" data-index="{{j}}" catchtap="addNum">+</button>
</view>
</view>
</view>
</view>
</view>
<view class="delete">删除</view>
</view> -->
</view>
<!-- 失效宝贝 -->
<view class="overdue-pro">
<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 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="empty">亲，您的购物车还空空的哟～</view>
<!-- 底部 -->
<view class="cart-bottom" style="bottom:{{currentHeight}}px">
<view class="total">
<view class="select-radio all-radio" bindtap="allSelect">
<view class="{{isAllSelect ? 'theme-color' : ''}} circle-radio " >
<image wx:if="{{isAllSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
<text class="all" >全选</text>
</view>
<view class="total-amount">
<text class="total-label">合计：</text>
<text class="total-price">￥306</text>
</view>
</view>
<view class="theme-color buy-btn">立即购买</view>
</view>
</view>
src/pages/cart/cart.wxss
/* pages/cart/cart.wxss */
\ No newline at end of file
/* pages/cart/cart.wxss */
page{
background-color: #f9f9f9;
overflow-x: hidden;
}
.open-card{
padding: 15rpx 20rpx 15rpx 30rpx;
background-color: rgba(244, 241, 238, 1);
}
.plus-img{
width: 36rpx;
}
.vip-desc{
display: inline-block;
}
.vip-info{
font-size: 23rpx;
color: #333333;
margin-left: 23rpx;
}
.vip-price{
font-size: 23rpx;
color: #cb3c3c;
}
.open-btn{
width: 107rpx;
height: 38rpx;
border-radius: 21rpx;
background-color: rgba(192, 154, 116, 1);
box-shadow: 0px 2px 7px 0px rgba(192, 154, 116, 0.27);
font-size: 18rpx;
color: #ffffff;
text-align: center;
line-height: 38rpx;
float: right;
}
.arrow-right{
width: 9rpx;
height: 9rpx;
}
.circle-radio{
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 1rpx solid rgba(0, 0, 0, 0.2);
line-height: 26rpx;
text-align: center;
}
.tick-success{
width: 18rpx;
}
.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-img{
width: 180rpx;
height: 180rpx;
}
.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-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;
}
.delete{
width: 132rpx;
height: 258rpx;
background-color: rgba(149, 149, 149, 1);
color: #ffffff;
font-size: 25rpx;
text-align: center;
line-height: 244rpx;
}
.cart-item{
display: flex;
overflow: hidden;
}
.empty{
color: #808080;
text-align: center;
width: 100%;
margin-top: 458rpx;
}
\ No newline at end of file
src/project.config.json
......@@ -150,6 +150,13 @@
"id": -1,
"name": "确认订单",
"pathName": "pages/confirmOrder/confirmOrder",
"query": "",
"scene": null
},
{
"id": -1,
"name": "购物车",
"pathName": "pages/cart/cart",
"scene": null
}
]
......
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