微信小程序 分类-随右侧滚动
先上效果图
商品采用SKU规格商品,通过自定义popup组件,实现个性化效果
如果发现少发了某块,可以私信或者评论喔
编辑
编辑
编辑
编辑
wxml:
<wxs module="img" src="../../../wxs/files.wxs"></wxs>
<view class="container">
<view class="container2-header" style="height: {{navBarHeight}}px; {{background?'background:'+background:''}}">
<view class="container2-header-top">
<view class="container2-header-back">
<image src="/static/images/other/fanhui.png" bindtap="goBack"/>
<input placeholder="Search fir gifts"/>
<image class="search-icon" src="/static/images/other/sousuo.png"/>
<image class="message" src="/static/images/other/message.png"/>
</view>
</view>
</view>
<view class="container-header" style="padding-top: {{navBarHeight}}px; height: {{infoHeight}}px;">
<view class="font-cl" style="flex: 1; text-align: left;">Hi, {{userInfo.nickname}}</view>
<image src="/static/images/other/integral.png"/>
<text>{{userInfo.intergal}}</text>
</view>
<view style="display: flex;">
<scroll-view class='left-scroll' style="height:{{cHeight}}px;" scroll-y bindscroll="scrollLeft" scroll-top="{{activeScrollTop}}" enable-back-to-top scroll-with-animation>
<block wx:for="{{products}}" wx:key="index">
<view class='left-son {{activeId === index ? "active" : "normal"}} {{activeId + 1 === index ? "right-top-radius" : ""}} {{activeId === index + 1 ? "right-bottom-radius":""}}' bindtap='clickLeft' id="{{index}}">
<image src="{{img.getFile(item.picPath)}}"/>
<text>{{item.title}}</text>
</view>
</block>
</scroll-view>
<!-- 右容器 -->
<scroll-view class='right-scroll' style="height:{{cHeight}}px;" scroll-y bindscroll="scrollRight" scroll-into-view="{{toView}}" enable-back-to-top scroll-with-animation>
<block wx:for="{{products}}" wx:key="index">
<view class='right-son' id="{{'index'+index}}">
<text class="son-title">{{item.title}}</text>
<view class="product-item" wx:for="{{item.giftExchangeEntityList}}" wx:for-item="product" wx:for-index="innerIndex" wx:key="innerIndex" style="{{product.isNew === 0?'background-image: url(https://dashanbook.oss-cn-shenzhen.aliyuncs.com/app/images/2024/11/04/6f44957e42b34c8f91fbc8adeffb25ac.jpg)':''}}">
<image class="tip" src="https://dashanbook.oss-cn-shenzhen.aliyuncs.com/app/images/2024/11/04/82c948e461114e1dba6f819c2937dc5d.png" wx:if="{{product.isNew === 0}}"/>
<van-image width="100" height="100" src="{{img.getFile(product.picPath)}}" />
<view class="products-layout">
<view class="products-layout-item" bind:tap="clickGoods" data-goods="{{product}}">
<view>{{product.content}}</view>
<view class="item-content">
<view class="item-price">
<image src="/static/images/other/integral.png"/>
<text class="current-price font-cl">{{product.discountIntegral?product.discountIntegral:product.integral}}</text>
<text class="origin-price" wx:if="{{product.discountIntegral}}">{{product.integral}}</text>
</view>
<image src="/static/images/other/add.png" style="width: 58rpx; height: 58rpx;"/>
</view>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
<view class="fixed-bottom" wx:if="{{!addCartFlag}}">
<image src="/static/images/other/cart.png" bind:tap="showCartProduct"/>
<block wx:if="{{!canBuyFlag}}">
<view class="bottom-content">未选购礼品</view>
</block>
<block wx:else>
<view class="integral font-cl"><image src="/static/images/other/integral.png"/>{{discountPrice}}<text class="total-num">{{cartList.length}}</text></view>
<view class="discount">
<text class="origin-price">{{totalPrice}}</text>
<view class="discount-price">已优惠{{totalPrice - discountPrice}}</view>
</view>
</block>
<view class="bottom-btn {{canBuyFlag?'buy-btn':''}}" bind:tap="calculate">去结算</view>
</view>
</view>
<van-popup show="{{ addCartFlag }}" bind:close="onClosePopup" round position="bottom" custom-style="height: 50%; overflow-y: auto; z-index: 2000">
<view class="header-line"></view>
<view class="header-layout">
<image class="goods-img" src="{{img.getFile(selectGoods?(selectGoods.picPath?selectGoods.picPath:addGoodsInfo.picPath):addGoodsInfo.picPath)}}"/>
<view class="goods-content">
<text class="two-overellipsis">{{addGoodsInfo.content}}</text>
<text class="goods-storage">库存:{{selectGoods?selectGoods.stock:addGoodsInfo.giftCount}}</text>
</view>
</view>
<view class="cart-layout" wx:if="{{skuList != null && skuList.length > 0}}" style="height: 280rpx; overflow-y: auto;">
<view class="sku-item" wx:for="{{skuList}}" wx:key="index">
<view class="sku-title-son">{{item.lable}}</view>
<view style="flex: 1;">
<text class="label {{item.selected===value?'selected':''}}" wx:for="{{item.values}}" wx:for-item="value" wx:for-index="innerIndex" wx:key="innerIndex" bind:tap="clickSkuLabel" data-skuInfo="{{item}}" data-selectValue="{{value}}" data-index="{{index}}">{{value}}</text>
</view>
</view>
</view>
<view class="cart-layout" style="display: flex; margin-top: 20rpx; align-items: center;">
<text>积分:</text>
<view class="cart-num">
<text class="num-count">{{selectGoods?selectGoods.integral : (addGoodsInfo.discountIntegral?addGoodsInfo.discountIntegral : addGoodsInfo.integral)}}</text>
</view>
</view>
<view class="cart-layout" style="display: flex; margin-top: 20rpx; align-items: center;">
<text>购买数量:</text>
<view class="cart-num">
<text class="num-btn" bind:tap="reduceNum">-</text>
<text class="num-count">{{buyNum}}</text>
<text class="num-btn add" bind:tap="addNum">+</text>
</view>
</view>
<view class="goods-btn">
<text bind:tap="addCart">加入购物车</text>
<text class="buy" bind:tap="goExchange">立即兑换</text>
</view>
</van-popup>
<van-popup show="{{ showCartProduct }}" bind:close="onClosePopup" round position="bottom" custom-style="height: 40%; overflow-y: auto;">
<view class="header-line"></view>
<view class="header-layout"><view class="bold">商品详情</view><view bind:tap="clearCart"><image src="/static/images/other/shanchu.png"/><text class="cart-clear">清空购物车</text></view></view>
<view class="cart-layout" style="margin-bottom: 50rpx;">
<view class="cart-item" wx:for="{{cartList}}" wx:key="index">
<image class="cart-pic" src="{{img.getFile(item.spicPath?item.spicPath:item.picPath)}}"/>
<view class="cart-content">
<view class="two-overellipsis">{{item.content}}</view>
<view class="standard two-overellipsis" wx:if="{{item.spData}}">规格: {{item.spData}}</view>
<view class="flex-start">
<image src="/static/images/other/integral.png"/>
<text>{{item.sintegral?item.sintegral : (item.discountIntegral?item.discountIntegral : item.integral)}}</text>
</view>
</view>
<view class="cart-num">
<text class="num-btn" bind:tap="updateCartNum" data-cartInfo="{{item}}" data-index="{{index}}" data-num="-1">-</text>
<text class="num-count">{{item.buyNum}}</text>
<text class="num-btn add" bind:tap="updateCartNum" data-cartInfo="{{item}}" data-index="{{index}}" data-num="1">+</text>
</view>
</view>
</view>
</van-popup>
</view>
wxss:
page {
height: calc(100vh - 200rpx);
overflow: auto;
}
.container {
height: calc(100vh - 0rpx);
overflow: hidden;
display: flex;
flex-direction: column;
}
.container-header {
height: 172rpx;
border-radius: 10rpx;
padding: 0 8%;
text-align: center;
display: flex;
align-items: center;
}
.container-header image {
width: 50rpx;
height: 50rpx;
margin-right: 10rpx;
}
.left-scroll{
/* rgb(248,249,250); */
background-color: #ffffff;
width: 168rpx;
/* float: left; */
}
.left-son{
width: 100%;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
box-sizing: border-box;
}
.left-son image {
width: 60rpx;
height: 60rpx;
margin-bottom: 20rpx;
}
.left-son.active{
background: #fff;
/* border-left:10rpx outset rgb(81, 127, 226); */
}
.left-son text {
color: #D00001;
}
.normal {
background: #f3f3f3;
}
.right-bottom-radius {
/* border-bottom-right-radius: 30rpx; */
}
.right-top-radius {
border-top-right-radius: 30rpx;
}
.right-scroll{
float: right;
width: calc(100% - 180rpx - 20rpx);
margin-left: 20rpx;
}
.right-son{
}
.product-item {
display: flex;padding: 15rpx 30rpx;margin-bottom: 10rpx;
background: linear-gradient(to right, #FFFFFF, #FFF8E8);
border-radius: 30rpx;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.new {
background: linear-gradient(to right, #FFFFFF, #FFF8E8);
}
.son-title {
font-size: 24rpx;
color: #CBCBCB;
}
.tip {
position: absolute;
left: -1rpx;
top: -18rpx;
width: 120rpx;
height: 120rpx;
z-index: 100;
}
.container2-header {
height: auto;
background: white;
position: fixed;
width: 100%;
z-index: 100;
}
.container2-header-top {
font-size: 34rpx;
position: relative;
height: 100%;
}
.container2-header-back {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
height: 80rpx;
transform: translate(0, -10%);
}
.container2-header-back text {
position: relative;
letter-spacing: 2rpx;
font-size: 36rpx;
color: #000000;
}
.container2-header-back image{
width: 50rpx;
height: 50rpx;
}
.title-primary {
font-family: "cl";
position: absolute !important;
bottom: 0;
left: 50%;
transform: translate(-50%, -10%)
}
input {
width: 308rpx; height: 80%; border-radius: 2rem; background: #F2F2F2;margin-right: 20rpx;
padding: 0 20rpx; padding-left: 80rpx; color: #bcbcbc; font-size: 26rpx;
}
.search-icon {
position: absolute;
left: 70rpx;
width: 40rpx !important;
height: 40rpx !important;
}
.products-layout {
width: 100%;margin:10rpx 10rpx;height: 90px;
}
.products-layout-item {
display: flex;flex-direction: column;justify-content: space-between;height: 100%;
}
.item-content {
display: flex;align-items: center;
}
.item-content image {
width: 45rpx;
height: 45rpx;
}
.item-price {
display: flex;align-items: center;flex: 1;
}
.origin-price {
text-decoration: line-through;
color: #3A3A3A;
font-size: 24rpx;
}
.current-price {
position: relative;
top: 6rpx;
font-size: 38rpx;
margin-right: 20rpx;
margin-left: 5rpx;
color: #FFAF00;
}
.fixed-bottom {
position: fixed;
display: flex;
bottom: 30rpx;
width: 90%;
height: 80rpx;
margin: 0 auto;
border-radius: 2rem;
left: 5%;
align-items: center;
background: #3A3A3A;
z-index: 2001;
}
.fixed-bottom image {
width: 120rpx;
height: 120rpx;
position: relative;
left: -5rpx;
}
.bottom-content {
flex: 1;
height: 80rpx;
display: flex;
align-items: center;
color: #F2F2F2;
}
.bottom-btn {
background: gray;
height: 80rpx;
width: 220rpx;
border-radius: 2rem;
line-height: 80rpx;
text-align: center;
color: #F2F2F2;
position: relative;
right: -5rpx;
}
.buy-btn {
background: #FFCE3C;
color: black;
}
.buy-btn:active {
background: pink;
}
.integral {
display: flex;
align-items: center;
font-size: 38rpx;
color: white;
position: relative;
width: 150rpx;
}
.integral image {
width: 30rpx;
height: 30rpx;
position: relative;
top: -3rpx;
}
.integral .total-num {
background: #FF738E;
position: absolute;
top: -35rpx;
width: 50rpx;
height: 50rpx;
left: -45rpx;
border-radius: 50%;
font-size: 30rpx;
text-align: center;
overflow: hidden;
font-family: 'Times New Roman', Times, serif;
line-height: 50rpx;
}
.discount {
flex: 1;
/* padding-left: 50rpx; */
}
.discount text {
display: block;
}
.origin-price {
font-size: 22rpx;
color: white;
}
.discount-price {
font-size: 20rpx;
color: #FFCE3C;
}
.header-line {
background: #FEEDAA;
height: 38rpx;
position: sticky;
top: 0;
width: 100%;
z-index: 10;
}
.header-layout {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50rpx;
margin: 30rpx 0;
}
.header-layout image {
width: 38rpx;
height: 38rpx;
position: relative;
top: 8rpx;
}
.cart-clear {
font-size: 24rpx;
color: #CBCBCB;
margin-left: 10rpx;
}
.cart-layout {
width: 90%;
margin: 0 auto;
margin-bottom: 20rpx;
}
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #eeeeee;
padding: 20rpx 10rpx;
}
.cart-pic {
width: 140rpx;
height: 140rpx;
}
.cart-content {
flex: 1;
padding: 0 20rpx;
font-size: 26rpx;
}
.cart-content image {
width: 45rpx;
height: 45rpx;
}
.cart-num {
display: flex;
align-items: center;
justify-self: center;
}
.num-count {
width: 80rpx;
text-align: center;
}
.num-btn {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
box-sizing: border-box;
border: 1px solid black;
text-align: center;
}
.add {
background: #FFCE3C;
}
.num-btn:active, .add:active {
background: #cbcbcb;
}
.standard {
font-size: 22rpx;
color: #CBCBCB;
margin-bottom: 20rpx;
}
.goods-img {
width: 200rpx !important;
height: 200rpx !important;
border-radius: 20rpx;
}
.goods-content {
flex: 1;
padding-left: 20rpx;
}
.goods-storage {
color: #bcbcbc;
font-size: 26rpx;
}
.goods-btn {
width: 100%;
display: flex;
position: absolute;
bottom: 0;
}
.goods-btn text {
text-align: center;
height: 80rpx;
background: #FEEDAA;
line-height: 80rpx;
flex: 1;
animation: all .5s;
}
.goods-btn .buy {
background: lightcoral;
}
.goods-btn text:active {
background: #bcbcbc;
}
.sku-item {
width: 90%;
height: auto;
display: flex;
align-items: baseline;
}
.sku-item .title{
font-size: 30rpx;
margin-right: 20rpx;
width: 128rpx;
}
.sku-item .label {
display: inline-block;
padding: 10rpx 20rpx;
background: #ebebeb;
margin-right: 20rpx;
border-radius: 10rpx;
margin-bottom: 20rpx;
font-size: 26rpx;
}
.selected {
background: #FEEDAA !important;
}
.sku-title-son {
margin-right: 20rpx;
}
json:
{
"usingComponents": {
"head-back": "/components/head-back/head-back"
},
"navigationStyle": "custom"
}
js
可以用 下边注释的
// // 假设你有这些SKU的JSON字符串
// let sku1 = '{"颜色": "红色", "尺寸": "11"}';
// let sku2 = '{"颜色": "蓝色", "尺寸": "11"}';
// let sku3 = '{"颜色": "红色", "尺寸": "12"}';
// let sku4 = '{"颜色": "蓝色", "尺寸": "12"}';// // 将JSON字符串解析为JavaScript对象
// let parsedSkus = [
// JSON.parse(sku1),
// JSON.parse(sku2),
// JSON.parse(sku3),
// JSON.parse(sku4)
// ];
作为sku数据
const util = require('../../../utils/util.js');
const api = require('../../../config/api.js');
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
navBarHeight: app.globalData.navBarHeight,
userInfo: null,
cHeight: '0', //屏幕高度
infoHeight: 40,
products: [], //左边楼层
activeId: 0, //左边楼层ID
activeScrollTop: '0', //左侧scroll-view滚动的高度
toView: 'index0', //跳到右边的楼层ID
productNum: 1,
canBuyFlag: true,
showCartProduct: false,
addCartFlag: false,
addGoodsInfo: {},
selectGoods: null,
buyNum: 1,
skuList: [],
cartList: [],
totalPrice: 0,
discountPrice: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.getSystemInfo({
success: res => {
this.setData({
cHeight: (res.windowHeight - this.data.infoHeight - 15 - 40) * 0.9 //-50:搜索栏的heigth 0.9:Tabbar的heigth
})
}
})
},
getMyIntegral() {
let _that = this;
util.request(api.getUserIntegral + '/' + _that.data.userInfo.id).then(res => {
_that.data.userInfo.intergal = res.data;
_that.setData({
userInfo: _that.data.userInfo
})
wx.setStorageSync('userInfo', JSON.stringify(_that.data.userInfo));
app.globalData.userInfo = JSON.parse(wx.getStorageSync('userInfo'));
})
},
onShow: function () {
this.setData({
userInfo: app.globalData.userInfo,
})
if (!app.globalData.hasLogin) {
wx.showToast({
title: '请先登录',
icon: 'none'
})
setTimeout(() => {
util.goLogin();
}, 500)
return;
}
// this.loadIntegralGoodsPage();
this.loadGoodsTree();
this.getCartList();
this.getMyIntegral();
},
getCartList() {
let _that = this;
wx.showLoading({
title: '加载中...',
mask:true
})
util.requestAction(api.getCartList).then(res => {
wx.hideLoading();
if (res.code === 200) {
let data = res.data;
_that.setData({
cartList: data
})
_that.calculatePrice();
}
}).catch(() => {
wx.hideLoading();
})
},
clickLeft: function (e) { //左侧点击
let i = e.currentTarget.id
this.setData({
activeId: i,
toView: 'index' + i
})
},
scrollLeft: function (e) {
this.setData({
activeScrollTop: e.detail.scrollTop,
})
},
scrollRight: function (e) { //右侧滚动
let {
itemArr,
activeId,
} = this.data;
this.data.itemArr.forEach((item, id) => { //对比offsetTop和height获得左侧id
// item.offsetTop 总体的高度
if (e.detail.scrollTop >= (item.offsetTop)-160 && e.detail.scrollTop <= (item.offsetTop + item.height)-160) {
this.setData({
activeId: id
})
}
})
this.setData({
activeScrollTop: activeId * 75 //左侧高
})
},
loadGoodsTree() {
let _that = this;
wx.showLoading({
title: '加载中...',
mask:true
})
util.requestAction(api.getIntegralGoodsTree).then(res => {
wx.hideLoading();
if (res.code === 200) {
// console.log(res)
_that.setData({
products: res.data
})
_that.calculateProduct();
}
}).catch(() => {
wx.hideLoading();
})
},
loadIntegralGoodsPage() {
let _that = this;
wx.showLoading({
title: '加载中...',
mask:true
})
_that.setData({
loading: true,
})
var data = {
pageNum: _that.data.productNum,
uid: _that.data.userInfo?_that.data.userInfo.id:0
}
util.requestAction(api.getIntegralGoodsPage, data).then(res => {
wx.hideLoading();
if (res.code === 200) {
var dataList = _that.data.products;
var data = res.data;
_that.setData({
products: dataList.concat(data.records),
productTotal: data.pages,
loading: false,
})
_that.calculateProduct();
}
}).catch(() => {
wx.hideLoading();
})
},
calculateProduct() {
let itemArr = []; //纪录每个scroll-into-view的值
this.data.products.forEach((item, index) => {
wx.createSelectorQuery().select(`#index${index}`).boundingClientRect(rect => {
let c = {}
c.offsetTop = rect.top
c.height = rect.height
itemArr.push(c)
}).exec()
})
this.setData({
itemArr
})
},
onScrollToLower() {
let _that = this;
if (_that.data.productNum >= _that.data.productTotal) return;
_that.setData({
productNum: _that.data.productNum + 1
});
_that.loadIntegralGoodsPage();
},
goBack() {
wx.navigateBack();
},
showCartProduct() {
this.setData({
showCartProduct: true
})
},
onClosePopup() {
this.setData({
showCartProduct: false,
addCartFlag: false,
})
},
clickGoods(e) {
let goods = e.currentTarget.dataset.goods;
// console.log(goods)
let skuList = goods.giftSkuEntityList;
let skuJson = [];
if (skuList !== null && skuList.length > 0) {
for(let i = 0; i < skuList.length; i++) {
let json = JSON.parse(skuList[i].spData);
skuJson.push(json);
}
}
// // 假设你有这些SKU的JSON字符串
// let sku1 = '{"颜色": "红色", "尺寸": "11"}';
// let sku2 = '{"颜色": "蓝色", "尺寸": "11"}';
// let sku3 = '{"颜色": "红色", "尺寸": "12"}';
// let sku4 = '{"颜色": "蓝色", "尺寸": "12"}';
// // 将JSON字符串解析为JavaScript对象
// let parsedSkus = [
// JSON.parse(sku1),
// JSON.parse(sku2),
// JSON.parse(sku3),
// JSON.parse(sku4)
// ];
// 创建一个Map来存储每个属性名下独特的值
let uniqueValuesByProperty = new Map();
// 遍历解析后的SKU对象
skuJson.forEach(sku => {
// 遍历SKU对象的每个属性
for (let key in sku) {
if (sku.hasOwnProperty(key)) { // 确保属性是对象自身的,而不是从原型链上继承的
// 如果这个属性名还不存在于Map中,就初始化一个空Set
if (!uniqueValuesByProperty.has(key)) {
uniqueValuesByProperty.set(key, new Set());
}
// 将属性值添加到对应属性名的Set中
uniqueValuesByProperty.get(key).add(sku[key]);
}
}
});
let skuListTemp = [];
// 输出结果
uniqueValuesByProperty.forEach((values, property) => {
let skuInfo = {
lable: property,
values: Array.from(values),
selected: ''
};
skuListTemp.push(skuInfo);
});
this.setData({
buyNum: 1,
selectGoods: null,
addGoodsInfo: goods,
skuList: skuListTemp,
addCartFlag: true
})
},
clickSkuLabel(e) {
let skuInfo = e.currentTarget.dataset.skuinfo;
let selectValue = e.currentTarget.dataset.selectvalue;
let index = Number(e.currentTarget.dataset.index);
for (let i = 0; i < skuInfo.values.length; i++) {
if (skuInfo.values[i] === selectValue) {
skuInfo.selected = selectValue;
break;
}
}
this.setData({
['skuList[' + index + ']']: skuInfo,
})
/**
* 检查是否选择所有标签
*/
let flag = true;
let selectLabelList = [];
let currentSkuList = this.data.skuList;
for (let i = 0; i < this.data.skuList.length; i++) {
if (currentSkuList[i].selected === null || currentSkuList[i].selected === '') {
flag = false;
break;
}
let labelData = {
[currentSkuList[i].lable] : currentSkuList[i].selected
}
selectLabelList.push(labelData);
}
let mergedSku = selectLabelList.reduce((acc, obj) => {
// 将当前对象的属性添加到累加器对象中
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
acc[key] = obj[key];
}
}
return acc;
}, {}); // 第二个参数是一个空对象,作为reduce的初始值
// console.log(selectLabelList);
let selectStr = JSON.stringify(mergedSku, null, 0);
if (flag) {
let giftSkuEntityList = this.data.addGoodsInfo.giftSkuEntityList;
for (let i = 0; i < giftSkuEntityList.length; i++) {
if (selectStr.replace(' ','') === JSON.stringify(JSON.parse(giftSkuEntityList[i].spData.replace(' ','')), null, 0)) {
// console.log('选择了:', giftSkuEntityList[i]);
this.setData({
selectGoods: giftSkuEntityList[i],
buyNum: (this.data.buyNum > giftSkuEntityList[i].stock) ? giftSkuEntityList[i].stock : this.data.buyNum
})
break;
}
}
}
},
reduceNum() {
let num = this.data.buyNum;
if (num < 1) {
return;
}
this.setData({
buyNum: this.data.buyNum - 1
})
},
addNum() {
let num = this.data.buyNum;
if (this.data.selectGoods) {
if (num >= this.data.selectGoods.stock) {
return;
}
} else {
if (num >= this.data.addGoodsInfo.giftCount) {
return;
}
}
this.setData({
buyNum: this.data.buyNum + 1
})
},
addCart() {
let selectGoods = this.data.selectGoods;
if ((this.data.skuList !== null && this.data.skuList.length > 0) && selectGoods === null) {
wx.showToast({
title: '请先选择规格',
icon: 'none'
})
return;
}
wx.showLoading({
title: '正在操作,请稍后',
})
let data = {
eid: -1,
skuId: null,
buyNum: this.data.buyNum,
}
/**
* 多规格礼品选择
*/
if (selectGoods !== null) {
// console.log(selectGoods);
data.skuId = selectGoods.id;
data.eid = selectGoods.eid;
} else {
// console.log(this.data.addGoodsInfo);
// console.log(this.data.addGoodsInfo);
data.eid = this.data.addGoodsInfo.id;
}
this.updateCart(data);
},
updateCart(data, index = -1, cartInfo) {
let _that = this;
util.requestAction(api.addOrUpdateCart, data, "POST").then(res => {
wx.hideLoading();
if (res.code === 200) {
if (index === -1) {
_that.onClosePopup();
_that.getCartList();
} else {
_that.setData({
['cartList[' + index + ']']: cartInfo,
})
_that.calculatePrice();
}
}
}).catch(() => {
wx.hideLoading();
wx.showToast({
title: '出错了,请稍后重试',
})
})
},
updateCartNum(e) {
let cartInfo = e.currentTarget.dataset.cartinfo;
let index = Number(e.currentTarget.dataset.index);
let num = Number(e.currentTarget.dataset.num);
let data = {
eid: cartInfo.eid,
skuId: cartInfo.skuId,
buyNum: num,
}
cartInfo.buyNum = cartInfo.buyNum + num;
this.updateCart(data, index, cartInfo);
},
goExchange() {
let selectGoods = this.data.selectGoods;
if ((this.data.skuList !== null && this.data.skuList.length > 0) && selectGoods === null) {
wx.showToast({
title: '请先选择规格',
icon: 'none'
})
return;
}
wx.showLoading({
title: '正在兑换,请稍后',
})
/**
* 多规格礼品选择
*/
let data = {
eid: -1,
skuId: null,
buyNum: this.data.buyNum,
type: 0
}
if (selectGoods !== null) {
data.eid = selectGoods.eid;
data.skuId = selectGoods.id;
} else {
data.eid = this.data.addGoodsInfo.id;
}
let _that = this;
util.requestAction(api.buyGoods, data, "POST").then(res => {
wx.hideLoading();
if (res.code === 200) {
wx.showToast({
title: '积分兑换成功',
})
_that.onClosePopup();
_that.getMyIntegral();
}
}).catch(() => {
wx.hideLoading();
wx.showToast({
title: '出错了,请稍后重试',
})
})
},
calculate() {
let _that = this;
let data = {
type: 1
}
wx.showLoading({
title: '正在兑换,请稍后',
})
util.requestAction(api.buyGoods, data, "POST").then(res => {
wx.hideLoading();
_that.setData({
cartList: [],
discountPrice: 0,
totalPrice: 0
})
if (res.code === 200) {
wx.showToast({
title: '积分兑换成功',
})
_that.onClosePopup();
_that.getMyIntegral();
}
}).catch(() => {
wx.hideLoading();
wx.showToast({
title: '出错了,请稍后重试',
})
})
},
clearCart() {
let _that = this;
wx.showLoading({
title: '正在操作,请稍后',
})
util.requestAction(api.clearCart, {}, "POST").then(res => {
wx.hideLoading();
if (res.code === 200) {
_that.onClosePopup();
_that.getCartList();
wx.showToast({
title: '操作成功',
icon: 'none'
})
}
}).catch(() => {
wx.hideLoading();
wx.showToast({
title: '出错了,请稍后重试',
})
})
},
calculatePrice() {
let data = this.data.cartList;
let totalPrice = 0;
let discountPrice = 0;
for (let i = 0; i < data.length; i++) {
totalPrice += data[i].integral * data[i].buyNum;
discountPrice += data[i].discountIntegral ? data[i].discountIntegral * data[i].buyNum : data[i].integral * data[i].buyNum;
}
this.setData({
totalPrice: totalPrice,
discountPrice: discountPrice
})
}
})
欢迎评论留言
博主承接毕设设计-自定义UI-价格美丽
微信:daytimeornight
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步