zhangjing/xuan_wechat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

购物车

Browse Source
This commit is contained in:
唐明明
2023-09-22 09:46:47 +08:00
parent 7ab5dfb2d8
commit 677b0d040a
15 changed files with 686 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
pages/mall/details/details.js
View File

@@ -11,20 +11,21 @@ Page({
data: {
isFixedTop : 0,
barHeight : getApp().globalData.barHeight, // 状态栏高度
goodsId : '', // 商品id
goodsData : '', // 商品数据
mallContent : '', // 商品详情
skus : [], // 显示的规格-提交
goodsId : '', // 商品id
goodsData : '', // 商品数据
mallContent : '', // 商品详情
skus : [], // 显示的规格-提交
skuid : '',
specselect : '', // 确认购买的规格
selectSkusValues: '', // 默认选项
valueId : '', // 选中规格id
valueIndex : '', // 选中规格下标index
specselect : '', // 确认购买的规格
selectSkusValues: '', // 默认选项
valueId : '', // 选中规格id
valueIndex : '', // 选中规格下标index
specselectIndex : '',
qtyNumber : 1, // 产品数量
qtyNumber : 1, // 产品数量
goodsSize : false,
invite : '',
isParent : false, // 绑定邀请码
isParent : false, // 绑定邀请码
buyType : null // 购物方式
},
/**
@@ -34,7 +35,9 @@ Page({
this.setData({
goodsId: options.id,
})
getApp().globalData.invite = options.invite || ''
if(getApp().globalData.invite == '' && options.invite){
getApp().globalData.invite = options.invite
}
},
/**
@@ -85,8 +88,8 @@ Page({
mask : true
})
wx.request({
// url : 'https://api.xhtest.douhuofalv.com/api/mall/goods/' + this.data.goodsId,
url : 'https://api.xuanhuojk.com/api/mall/goods/' + this.data.goodsId,
url : 'https://api.xhtest.douhuofalv.com/api/mall/goods/' + this.data.goodsId,
// url : 'https://api.xuanhuojk.com/api/mall/goods/' + this.data.goodsId,
header : {
"Accept" : "application/json",
"channel" : "client",
@@ -120,21 +123,6 @@ Page({
})
}
})
// wx.$api.mall.goodsSee(this.data.goodsId).then(res => {
// this.setData({
// goodsData : res.data,
// mallContent : res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"'),
// skus : res.data.skus,
// skuid : res.data.skus[0].sku_id,
// selectSkusValues: res.data.skus[0],
// specselect : res.data.skus[0].unit.split('|'),
// invite : res.data.invite
// })
// }).catch(err =>{
// console.log(err)
// }).finally(() => {
// wx.hideLoading()
// })
},
/**
@@ -228,9 +216,10 @@ Page({
/**
* 规格弹出
*/
buyPop() {
buyPop(e) {
this.setData({
goodsSize: !this.data.goodsSize
goodsSize : !this.data.goodsSize,
buyType : e.currentTarget.dataset.type
})
},
@@ -239,52 +228,86 @@ Page({
*/
closeTap() {
this.setData({
goodsSize: false
goodsSize: false,
buyType : null
})
},
/**
* 确认购买
* 检查登录状态
*/
buyTap() {
// 获取登录状态
if(wx.getStorageSync("token") != ''){
let {
sku_id,
stock
} = this.data.selectSkusValues;
if (stock > 0) {
this.setData({
skuid : sku_id,
goodsSize : false
})
// 是否有推荐人
if(this.data.goodsData.has_parent) {
wx.navigateTo({
url: '/pages/mall/confirm/confirm?skuId=' + sku_id + '&qty=' + this.data.qtyNumber || 1
})
return
}
// 显示绑定手机号弹窗
this.setData({
isParent: true
})
} else {
uni.showToast({
title: '当前商品库存不足',
icon: 'none',
mask: true,
duration: 2000
})
let token = wx.getStorageSync("token") || null
if(token != null){
switch (this.data.buyType) {
case 'card':
this.orderCard()
break;
default:
this.orderBuy()
break;
}
}else{
// 去登录
wx.navigateTo({
url: "/pages/login/index"
})
}
},
/**
* 立即购买
*/
orderBuy(){
let { sku_id, stock } = this.data.selectSkusValues;
if (stock > 0) {
this.setData({
skuid : sku_id,
goodsSize : false
})
// 是否有推荐人
if(this.data.goodsData.has_parent) {
wx.navigateTo({
url: '/pages/mall/confirm/confirm?skuId=' + sku_id + '&qty=' + this.data.qtyNumber || 1
})
return
}
// 显示绑定手机号弹窗
this.setData({
isParent: true
})
} else {
uni.showToast({
title: '当前商品库存不足',
icon: 'none',
mask: true,
duration: 2000
})
}
},
/**
* 加入购物车
*/
orderCard(){
let { sku_id, stock } = this.data.selectSkusValues;
let qty = this.data.qtyNumber || 1
if (stock <= 0) {
uni.showToast({
title: '当前商品库存不足',
icon : 'none',
})
return
}
wx.showLoading({
title: '加载中...',
mask : true
})
wx.$api.bag.add({ sku_id, qty }).then(res => {
wx.showToast({
title: "已加入",
icon: "success"
})
this.closeTap()
})
},
/**
* 监听页面滑动事件

37
pages/mall/details/details.wxml
View File

@@ -53,23 +53,23 @@
<!-- 底部 -->
<view class="footer">
<view class="number">
<text></text><view class="number-price">￥{{goodsData.original_price}}</view>
</view>
<button class="btn-disabled" disabled="{{disabled}}" bindtap="buyPop">确认购买</button>
<button class="btn-disabled card" size="mini" disabled="{{disabled}}" bindtap="buyPop" data-type="card">加入购物车</button>
<button class="btn-disabled" size="mini" disabled="{{disabled}}" bindtap="buyPop" data-type="buy">立即购买</button>
</view>
<!-- 规格弹出 -->
<view class="goods-size-back {{goodsSize ? 'active':''}}" bindtap="closeTap"></view>
<view class="goods-size-content {{goodsSize ? 'active':''}}">
<image class="goods-size-close" bindtap="closeTap" src="/static/icons/close.png" mode="widthFix"></image>
<view class="goods-size-img">
<image src="{{selectSkusValues.cover}}" mode="aspectFill"></image>
</view>
<view class="goods-size-info">
<view class="goods-size-info-price nowrap">￥{{selectSkusValues.price}}</view>
<view class="goods-size-info-text nowrap" wx:if="{{selectSkusValues.stock > 0}}">剩余库存: {{selectSkusValues.stock}}</view>
<view class="goods-size-info-text nowrap" wx:else>当前商品库存不足</view>
<view class="goods-size-flex">
<image class="goods-size-cover" src="{{selectSkusValues.cover}}" mode="aspectFill"></image>
<view class="goods-size-remove" bind:tap="closeTap">
<image class="goods-size-close" src="/static/icons/close.png" mode="widthFix"></image>
</view>
<view class="goods-size-info">
<view class="goods-size-price nowrap"><text>￥</text>{{selectSkusValues.price}}</view>
<view class="goods-size-text nowrap">剩余库存: {{selectSkusValues.stock}}</view>
</view>
</view>
<view class="goods-size-tag" wx:for="{{goodsData.specs}}" wx:key="specs" data-specid="{{item.spec_id}}" wx:for-index="idx">
<view class="goods-size-title">{{item.name}}</view>
@@ -88,12 +88,13 @@
<view class="goods-number-btn">+</view>
</view>
</view>
<view class="goods-size-btn" wx:if="{{selectSkusValues.stock == 0}}">
<view class="active">抱歉，商品库存不足了 ~</view>
</view>
<view class="goods-size-btn" wx:else>
<button bindtap="buyTap" size="default" disabled="{{selectSkusValues.stock == 0 || qtyNumber == 0}}">立即购买</button>
<view class="goods-size-btn">
<button
bindtap="buyTap"
size="default"
disabled="{{selectSkusValues.stock == 0 || qtyNumber == 0}}">
{{ selectSkusValues.stock == 0 || qtyNumber == 0 ? '库存不足' : '确定'}}
</button>
</view>
</view>

149
pages/mall/details/details.wxss
View File

@@ -48,7 +48,6 @@ page {
height: 100%;
}
/* 产品 */
/* 产品详情 */
.goodsCont {
padding: 30rpx;
@@ -206,82 +205,51 @@ button.goodsInfo-share[size="mini"] {
/* 底部 */
.footer {
width: 100%;
height: 60px;
background-color: #ffffff;
border-top-right-radius: 40rpx;
border-top-left-radius: 40rpx;
position: fixed;
left: 0;
bottom: 0;
padding: 30rpx 20rpx 50rpx;
z-index: 9;
box-sizing: border-box;
display: flex;
}
.number {
flex: 1;
line-height: 60px;
color: #da2b54;
display: flex;
padding: 0 30rpx;
box-sizing: border-box;
}
.number text {
font-size: 28rpx;
padding-top: 10rpx;
}
.number-price {
padding: 0 5rpx;
font-size: 46rpx;
}
.number-vip {
margin-left: 20rpx;
font-size: 26rpx;
color: #8d97a1;
padding-top: 6rpx;
box-sizing: border-box;
}
.btn-disabled {
color: #FFFFFF;
line-height: 60px;
text-align: center;
border: none;
border-radius:0;
background-color: #da2b54;
padding: 0;
margin: 0;
}
button[disabled]{
padding: 0;
padding: 0;
height: 100rpx;
line-height: 60px;
color: white !important;
opacity: .8;
background-color: transparent !important;
}
button.btn-disabled[size="mini"]{ line-height: 90rpx; border-radius: 45rpx; background: #da2b54; color: white; font-size: 30rpx; width: calc(50% - 20rpx); }
button.btn-disabled.card[size="mini"]{ background: orange; }
/* 规格弹出 */
.goods-size-back { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); z-index: 9; display: none; }
.goods-size-back.active { display: block; }
.goods-size-content { position: fixed; bottom: -100%; left: 0; width: 100%; background: white; z-index: 100; transition: all 0.2s; border-radius: 40rpx 40rpx 0 0;}
.goods-size-content.active { bottom: 0; }
/* 规格 */
.goods-size-back {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 9;
display: none;
}
.goods-size-flex{ display: flex; justify-content: space-between; align-items: flex-end; padding: 30rpx; position: relative; }
.goods-size-cover{ background: #f7f8f9; width: 188rpx; height: 188rpx; border-radius: 20rpx; }
.goods-size-info{ width: calc(100% - 188rpx); padding-left: 30rpx; }
.goods-size-price{ font-size: 44rpx; font-weight: bold; color: #da2b54; line-height: 60rpx; }
.goods-size-price text{ font-size: 80%; }
.goods-size-text{ font-size: 28rpx; color: gray; line-height: 50rpx; }
.goods-size-back.active {
display: block;
}
.goods-size-remove{ position: absolute; right: 30rpx; top: 30rpx; padding: 10rpx; }
.goods-size-close{ width: 38rpx; height: 38rpx; vertical-align: top; }
.goods-size-tag { padding: 0 30rpx 30rpx; }
.goods-size-tag-text { background: #f5f6fa; color: #999; line-height: 50rpx; margin: 20rpx 20rpx 0 0; padding: 0 15rpx; display: inline-block; font-size: 24rpx; border-radius: 10rpx; }
.goods-size-tag-text.active { color: #fff; background: #da2b54; }
.goods-size-title{ font-weight: bold; line-height: 50rpx; font-size: 30rpx; }
.goods-size-number { color: #747788; display: flex; align-items: center; justify-content: space-between; padding: 30rpx; }
.goods-number { display: flex; height: 48rpx; border-radius: 10rpx; }
.goods-number-btn { background-color: #f7f8f9; width: 48rpx; height: 48rpx; line-height: 44rpx; text-align: center; border-radius: 24rpx; font-size: 30rpx; font-weight: bold; }
.goods-number-input { width: 80rpx; text-align: center; height: 48rpx; }
.goods-size-btn{ padding: 30rpx 30rpx 50rpx; }
.goods-size-btn button[size="default"]{ background: #da2b54; color: white; line-height: 90rpx; padding: 0; border-radius: 45rpx; width: 100%; margin: 0; }
/*
.goods-size-content {
position: fixed;
@@ -300,9 +268,7 @@ button[disabled]{
top: 30rpx;
}
.goods-size-content.active {
bottom: 0;
}
.goods-size-img {
position: absolute;
@@ -353,56 +319,7 @@ button[disabled]{
font-size: 26rpx;
}
.goods-size-tag {
padding: 0 20rpx 20rpx 20rpx;
}
.goods-size-tag-text {
background: #f5f6fa;
color: #999;
margin: 20rpx 10rpx 0 10rpx;
line-height: 50rpx;
padding: 0 15rpx;
display: inline-block;
font-size: 24rpx;
border-radius: 10rpx;
}
.goods-size-tag-text.active {
color: #fff;
background: #da2b54;
}
.goods-size-number {
padding: 10rpx 30rpx 80rpx 30rpx;
line-height: 60rpx;
color: #747788;
}
.goods-number {
display: flex;
float: right;
margin-top: 25rpx;
height: 48rpx;
border: 2rpx solid #d7d7d7;
border-radius: 10rpx;
}
.goods-number-btn {
background-color: transparent;
width: 48rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
}
.goods-number-input {
width: 80rpx;
text-align: center;
height: 48rpx;
border-left: 2rpx solid #d7d7d7;
border-right: 2rpx solid #d7d7d7;
}
.goods-size-btn button[size="default"] {
text-align: center;
@@ -418,7 +335,7 @@ button[disabled]{
.goods-size-btn view.active {
background: #b8b8b8;
}
} */
/* 邀请码弹出 */