Browse Source

购物车修改

master
chenkainan 4 years ago
parent
commit
800e343dd0
  1. 2
      app.js
  2. 2
      app.wxss
  3. 1
      pages/index/index.js
  4. 1
      pages/info/museumInfo/index.wxss
  5. 1
      pages/info/postProductInfo/index.js
  6. 2
      pages/info/postProductInfo/index.wxml
  7. 167
      pages/info/sceneProductInfo/index.js
  8. 59
      pages/info/sceneProductInfo/index.wxml
  9. 265
      pages/info/sceneProductInfo/index.wxss
  10. 7
      pages/user/cartlist/list.js
  11. 2
      pages/user/cartlist/list.wxml

2
app.js

@ -22,7 +22,7 @@ App({
unique_key: "wechatxcx"
}).then(res => {
let data = JSON.parse(res.data);
data.isTest = data.isTest29?true:false;
data.isTest = data.isTest30?true:false;
this.globalData.configJson = data
})

2
app.wxss

@ -31,7 +31,7 @@ page{
position: relative;
z-index: 1;
width: 80%;
max-height: 100%;
max-height: 1000rpx;
background: white;
border-radius: 12rpx;
overflow-y: auto;

1
pages/index/index.js

@ -248,6 +248,7 @@ Page({
util.gotoDetail(item)
},
gotoPath: function (e) {
console.log(e)
if (e.currentTarget.dataset.event) {
this.pagePoint({ event: e.currentTarget.dataset.event }, 1)
}

1
pages/info/museumInfo/index.wxss

@ -70,6 +70,7 @@
display: flex;
align-items: center;
justify-content: space-around;
z-index: 3;
}
.fixed-btn .btn {

1
pages/info/postProductInfo/index.js

@ -45,6 +45,7 @@ Page({
})
// 获取购物车按钮的位置
wx.createSelectorQuery().select('#cart').boundingClientRect(function (res) {
console.log(res)
that.setData({
cartTop: res.top
})

2
pages/info/postProductInfo/index.wxml

@ -3,7 +3,7 @@
<title title="产品详情"></title>
<view class="iconfont icon-fenxiang" bindtap="share"></view>
<image wx:for="{{info.sku}}" style="{{aniSkuIndex==index?('top:'+cartTop+'px;'):('top:'+top+'px;'+cartImgInfo)}}"
class="headimg{{aniSkuIndex==index?' active':''}}" src="{{item.headimg}}" mode="aspectFill"></image>
class="headimg{{aniSkuIndex==index?' active':''}}" src="{{info.headimg}}" mode="aspectFill"></image>
<swiper class="swiper" indicator-dots="{{true}}" wx:if="{{info}}" autoplay="{{autoPlay}}" interval="{{2000}}"
duration="{{300}}">
<block wx:if="{{info.videourl}}" wx:key="*this">

167
pages/info/sceneProductInfo/index.js

@ -24,6 +24,14 @@ Page({
showShareFlag: false,
showAllowance: false,
allowance_data:null,
//购物车数量
producNum: 1,
skuIndex: 0,
aniSkuIndex: -1,
cartCount: 0,
cartImgInfo: null,
cartTop: 0,
top: 0
},
/**
@ -155,7 +163,6 @@ Page({
scene_id: id
}).then(res => {
if (res.code == 1) {
console.log(isLike)
wx.showToast({
title: '操作成功',
})
@ -197,24 +204,83 @@ Page({
})
},
order: function (e) {
if (e.currentTarget.dataset.disable == 1) return;
util.pagePoint({
event: 'scene_order',
param: {
type: this.data.info.type,
id: this.data.info.id
}
}, 1)
wx.setStorageSync('login_from', 'scene_order_login')
wx.setStorageSync('order_from', 'scene_order_submit')
app.globalData.couponInfo = null;
app.globalData.retailId = this.data.retailId;
// let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product;
app.globalData.product = e.currentTarget.dataset;
wx.navigateTo({
url: '/pages/order/scene/index',
})
console.log(this.data.info,this.data.skuFlag)
if (e.currentTarget.dataset.disable == 1) return;
util.pagePoint({
event: 'scene_order',
param: {
type: this.data.info.type,
id: this.data.info.id
}
}, 1)
wx.setStorageSync('login_from', 'scene_order_login')
wx.setStorageSync('order_from', 'scene_order_submit')
app.globalData.couponInfo = null;
app.globalData.retailId = this.data.retailId;
// let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product;
app.globalData.product = e.currentTarget.dataset;
wx.navigateTo({
url: '/pages/order/scene/index',
})
},
// order: function (e) {
// console.log(this.data.info,this.data.skuFlag)
// if (this.data.skuFlag == 'order'){
// if (e.currentTarget.dataset.disable == 1) return;
// util.pagePoint({
// event: 'scene_order',
// param: {
// type: this.data.info.type,
// id: this.data.info.id
// }
// }, 1)
// wx.setStorageSync('login_from', 'scene_order_login')
// wx.setStorageSync('order_from', 'scene_order_submit')
// app.globalData.couponInfo = null;
// app.globalData.retailId = this.data.retailId;
// // let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product;
// app.globalData.product = e.currentTarget.dataset;
// wx.navigateTo({
// url: '/pages/order/scene/index',
// })
// }else {
// commonApi.user_post("cart/add_sku", {
// sku_id: this.data.info.product[0].sku[this.data.skuIndex].id,
// num: this.data.producNum
// }).then(res => {
// if (res.code == 1) {
// commonApi.user_post('cart/get_list', {}).then(res => {
// this.setData({
// cartCount: res.data.length
// })
// })
// // 加动效
// console.log(this.data.skuIndex)
// this.setData({
// skuFlag: null,
// aniSkuIndex: this.data.skuIndex,
// cartImgInfo: null
// })
// setTimeout(() => {
// this.setData({
// aniSkuIndex: -1
// })
// wx.showModal({
// title: "提示",
// content: "去购物车结算?",
// success: function (res) {
// if (res.confirm) {
// wx.navigateTo({
// url: '/pages/user/cartlist/list',
// })
// }
// }
// })
// }, 650)
// }
// })
// }
// },
pagePoint: function (e) {
util.pagePoint({
event: e.currentTarget.dataset.event,
@ -480,6 +546,65 @@ Page({
ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
}
},
//加入购物车
showCart: function () {
console.log(this.data)
if (this.data.info.product[0].sku.length == 0) {
wx.showToast({
title: '该产品未设置规格,不能加购',
icon: 'none'
})
return;
}
this.setData({
skuFlag: "cart"
})
let that = this
wx.createSelectorQuery().select('#skuImg').boundingClientRect(function (res) {
console.log(res)
that.setData({
cartImgInfo: 'top:' + res.top + 'px;left:' + res.left + 'px;'
})
}).exec()
},
hideSku: function () {
this.setData({
skuFlag: null,
cartImgInfo: null
})
},
//加减数量
minus: function () {
if (this.data.producNum == 1) return;
this.setData({
producNum: this.data.producNum - 1
})
},
add: function () {
this.setData({
producNum: this.data.producNum + 1
})
},
//立即预定
showOrder: function () {
if (this.data.info.product[0].sku.length == 0) {
wx.showToast({
title: '该产品未设置规格,不能购买',
icon: 'none'
})
return;
}
this.setData({
skuFlag: 'order'
})
},
selectSku: function (e) {
let index = e.currentTarget.dataset.index;
this.setData({
skuIndex: index
})
},
/**
* 生命周期函数--监听页面初次渲染完成
@ -539,6 +664,12 @@ Page({
}
})
}
commonApi.user_post('cart/get_list', {}).then(res => {
console.log(res,res.data)
this.setData({
cartCount: res.data.length
})
})
}
else {
setTimeout(() => {

59
pages/info/sceneProductInfo/index.wxml

@ -1,7 +1,10 @@
<!--pages/info/sceneProductInfo/index.wxml-->
<wxs src="../../../utils/filter.wxs" module="tool" />
<title title="产品详情"></title>
<view class="iconfont icon-fenxiang" bindtap="share"></view>
<view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}" bindtap="like"></view>
<!-- <view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}" bindtap="like"></view> -->
<image wx:for="{{info.product}}" style="{{aniSkuIndex==index?('top:689px;'):('top:'+top+'px;'+cartImgInfo)}}"
class="headimg{{aniSkuIndex==index?' active':''}}" src="{{item.headimg}}" mode="aspectFill"></image>
<!-- <view class="audio-box" bindtap="audioGuide">
<view>语音导览</view>
<image src="https://static.ticket.sz-trip.com/xcxImages/info/play-btn.png" mode="widthFix"></image>
@ -60,6 +63,60 @@
</view>
</view>
</view>
<view class="fixed-bottom">
<navigator url="/pages/user/service/index" catchtap="pagePoint" data-event='product_customservice' class="kefu-box">
<view class="iconfont icon-kefu"></view>
<view>客服</view>
</navigator>
<view bindtap="like" class="kefu-box" style="margin-left:70rpx">
<view class="iconfont {{isLike==1?'icon-shoucang':'icon-xin'}}"></view>
<view>收藏</view>
</view>
<view style="flex:1"></view>
<view class="btns">
<view class="btn" bindtap="showCart">加入购物车</view>
<view class="btn" bindtap="showOrder" wx:if="{{info && info.flag==1}}">立即预订</view>
<view class="btn disable" wx:elif="{{info}}">该商品已下架</view>
</view>
</view>
<!-- 购物车悬浮框 -->
<navigator url="/pages/user/cartlist/list" catchtap="pagePoint" data-event='product_cart_click' class="cart-box"
id="cart">
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/cart.png" mode="widthFix"></image>
<view class="cart-num">{{cartCount}}</view>
</navigator>
<view class="mask" wx:if="{{skuFlag}}">
<view class="mask-bg" bindtap="hideSku"></view>
<view class="mask-content">
<view class="iconfont icon-close" bindtap="hideSku"></view>
<view class="sku-info-box">
<image id="skuImg" src="{{info.headimg}}" mode="aspectFill"></image>
<view class="sku-info">
<view class="sku-price">{{info.product[0].sku[skuIndex].price/100}}
<view class="allowance" wx:if="{{allowance_data}}">
补贴价:¥{{ (1 - allowance_data.discount_rate / 100) * info.sku[skuIndex].price / 100 }}</view>
</view>
<view class="sku-name">已选择:{{info.product[0].sku[skuIndex].sku_name}}</view>
</view>
</view>
<view class="sku-names">
<view bindtap="selectSku" data-index="{{index}}" class="sku-name-item textOver{{index==skuIndex?' active':''}}"
wx:for="{{info.product[0].sku}}">{{item.sku_name}}</view>
</view>
<view class="number-box">
<text>数量</text>
<view class="iconfont icon-sami-select" bindtap="minus"></view>
<view class="number">{{producNum}}</view>
<view class="iconfont icon-add-select" bindtap="add"></view>
</view>
<view style="height:138rpx"></view>
<view class="btn-box">
<view class="mask-btn" bindtap="order" data-sku="{{sku}}" data-product="{{item}}" wx:if="{{info && info.flag==1}}" data-disable="{{item.flag==0 || sku.flag=='off'?1:0}}" data-disable="{{item.flag==0 || sku.flag=='off'?1:0}}">{{skuFlag=='cart'?'确认':'立即购买'}}
</view>
<view class="mask-btn disable" wx:else>该商品已下架</view>
</view>
</view>
</view>
<!-- <view class="empty-box">
<view>这里空空如也,快去向大家提问吧!</view>
<view class="empty-btn">去提问</view>

265
pages/info/sceneProductInfo/index.wxss

@ -333,7 +333,7 @@ page {
font-size: 28rpx;
}
.icon-xin,
/* .icon-xin,
.icon-shoucang {
position: absolute;
right: 100rpx;
@ -346,7 +346,7 @@ page {
color: #fff;
font-size: 36rpx;
z-index: 1;
}
} */
.icon-shoucang {
color: #D62828;
@ -382,7 +382,6 @@ page {
margin-left: 10rpx;
}
.mask-content {
position: absolute;
left: 0;
@ -536,4 +535,264 @@ page {
.mask-allowance .mask-content .rule-title {
text-align: center;
margin-bottom: 20rpx;
}
.fixed-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 140rpx;
background: white;
display: flex;
align-items: center;
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
padding: 0 40rpx;
color: #666666;
font-size: 23rpx;
justify-content: space-between;
text-align: center;
}
.fixed-bottom .iconfont {
font-size: 34rpx;
line-height: 40rpx;
}
.btns {
color: #fff;
font-size: 32rpx;
font-weight: 500;
border-radius: 39rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.btns .btn {
width: 216rpx;
line-height: 78rpx;
background: #D62828;
}
.btns .btn:nth-child(1) {
margin-right: 3rpx;
border-radius: 39rpx 0 0 39rpx;
}
.btns .btn:nth-child(2) {
border-radius: 0 39rpx 39rpx 0;
}
.btns .btn.disable {
background: #ccc;
}
.mask-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
.mask-content .icon-close {
position: absolute;
right: 40rpx;
top: 40rpx;
}
.sku-info-box {
margin: 50rpx 40rpx;
display: flex;
justify-content: space-between;
}
.sku-info-box image {
width: 218rpx;
height: 180rpx;
border-radius: 13rpx;
display: block;
margin-right: 40rpx;
flex-shrink: 0;
}
.sku-info {
flex: 1;
}
.sku-price {
font-size: 40rpx;
font-weight: 500;
color: #D62828;
margin: 20rpx 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.sku-price::before {
content: "¥";
font-weight: 400;
font-size: 27rpx;
vertical-align: baseline;
}
.sku-price view {
font-size: 24rpx;
color: #FFFFFF;
background-color: #D62828;
border-radius: 22rpx;
line-height: 44rpx;
margin-left: 7rpx;
padding: 0 20rpx;
}
.sku-name {
font-size: 27rpx;
color: #666666;
}
.sku-names {
display: flex;
font-size: 29rpx;
color: #333;
margin: 0 40rpx;
text-align: center;
flex-wrap: wrap;
margin-bottom: 20rpx;
}
.sku-name-item {
background: #EFEFEF;
border: 1rpx solid #EFEFEF;
width: 318rpx;
line-height: 77rpx;
border-radius: 14rpx;
margin-bottom: 25rpx;
margin-right: 10rpx;
}
.sku-name-item:nth-child(2n) {
margin-right: 0;
}
.sku-name-item.active {
color: #0B898E;
border-color: #0B898E;
background: rgba(11, 137, 142, 0.1);
}
.number-box {
display: flex;
align-items: center;
border-top: 1rpx solid #ccc;
justify-content: space-between;
margin: 0 40rpx;
padding: 40rpx 0;
}
.number-box text {
flex: 1;
font-size: 29rpx;
color: #333;
}
.number-box view {
border: 1rpx solid #666;
border-radius: 7rpx;
text-align: center;
width: 67rpx;
line-height: 67rpx;
font-size: 33rpx;
color: #000;
}
.number-box view.disable {
border-color: #ccc;
color: #999;
}
.number-box view.number {
width: 94rpx;
margin: 0 15rpx;
}
.btn-box {
height: 138rpx;
background: #FFFFFF;
box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.mask-btn {
width: 670rpx;
line-height: 78rpx;
background: #D62828;
border-radius: 39rpx;
color: #fff;
text-align: center;
font-size: 33rpx;
font-weight: 500;
}
.mask-btn.disable {
background: #ccc;
}
/* 购物车 */
.cart-box {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 80rpx;
height: 80rpx;
background: #FFFFFF;
box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2);
border-radius: 50%;
right: 20rpx;
bottom: 166rpx;
}
.cart-box image {
display: block;
width: 49rpx;
}
.cart-num {
width: 26rpx;
border: 1rpx solid;
border-radius: 50%;
line-height: 26rpx;
text-align: center;
font-size: 23rpx;
color: #D20000;
position: absolute;
right: -2rpx;
top: -5rpx;
}
.headimg {
position: fixed;
z-index: 3;
left: -218rpx;
width: 218rpx;
height: 180rpx;
top: 0;
}
.headimg.active {
transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1), width .6s ease, height .6s ease;
width: 80rpx;
height: 80rpx;
left: 650rpx;
border-radius: 50%;
}

7
pages/user/cartlist/list.js

@ -25,9 +25,14 @@ Page({
onLoad: function (options) {
this.getList();
},
gotoDetail:function(e){
console.log(e)
let item = e.currentTarget.dataset.item.product;
util.gotoDetail(item,1);
},
getList:function(){
commonApi.user_post("cart/get_list",{
// type: '1'
}).then(res=>{
this.setData({
list:res.data

2
pages/user/cartlist/list.wxml

@ -5,7 +5,7 @@
<view wx:for="{{list}}" class="goods-item {{item.isTouchMove ? 'touch-move-active' : ''}}" bindtouchstart='touchStart' bindtouchmove='touchmove' data-index="{{index}}">
<view class="item{{(item.product.flag!=1 || item.sku.flag!='on')?' disable':''}}">
<view class="iconfont{{item.checked?' icon-gou':' icon-quan'}}" bindtap="select" data-index="{{index}}"></view>
<image src="{{item.sku.headimg}}" mode="aspectFill"></image>
<image src="{{item.sku.headimg}}" mode="aspectFill" bindtap="gotoDetail" data-item="{{item}}"></image>
<view class="item-info textOver">
<view class="title textOver">{{item.product.title}}</view>
<view class="sku-title textOver">

Loading…
Cancel
Save