wxml:
<!-- 购物车 -->
<view wx:if="{{showPro}}">
<view style='padding-bottom: 100rpx;'>
<view wx:for="{{shopData}}" wx:key="shopData" class='pro'>
<view style='width: 60rpx;' class='xuanzhong' bindtap='danxuan' data-index="{{index}}">
<image src='/img/img/icon_select@2x.png' style='width: 36rpx; height: 36rpx;margin-top: 8rpx' wx:if="{{item.selected? true:false}}"></image>
<image src='/img/img/icon_nomal@2x.png' style='width: 36rpx; height: 36rpx;margin-top: 8rpx;' wx:if="{{item.selected? false:true}}"></image>
</view>
<view class='tutu'>
<image src='{{item.url}}' class='pro-image'></image>
</view>
<view class='wenzi'>
<view class='goodsname'>
<text class='te' style='font-weight: 600'>{{item.name}}</text>
<image src='/img/img/btn_del2@2x.png' style='width: 36rpx; height: 36rpx;' bindtap='deleteEve'></image>
</view>
<view class='zuixia'>
<view class='price1'>¥{{item.price}}</view>
<view class='add'>
<image src='/img/img/btn_sku_dis_sub@2x.png' class='num' style='margin-right: 4rpx;' wx:if="{{item.num == 1}}" bindtap='subtraction' data-erji="{{proind}}" data-index="{{index}}"></image>
<image src='/img/img/btn_sku_nml_sub@2x.png' class='num' style='margin-right: 4rpx;' wx:else data-index="{{index}}" bindtap='subtraction' data-erji="{{proind}}" data-index="{{index}}"></image>
<text style='display: block; width: 80rpx; height: 60rpx; background: #eee; text-align: center;font-size: 28rpx;line-height: 60rpx;color:#333'>{{item.num}}</text>
<image src='/img/img/btn_sku_add@2x.png' class='num' style='margin-left: 4rpx;' bindtap='add' data-erji="{{proind}}" data-index="{{index}}"></image>
</view>
</view>
</view>
</view>
<view style='clear:both'></view>
</view>
<!-- 底部 -->
<view class='bottom'>
<view>
<text style='font-size: 28rpx;margin-right: 20rpx;color:#333'>合计</text>
<text style='font-size: 36rpx; color: #F87039'>¥{{jiesuan}}</text>
</view>
<view style='width: 260rpx;height: 98rpx;'>
<view bindtap='topay' class='topay'>去结算</view>
</view>
</view>
</view>
<view wx:else style='width: 100%; background: #fff; height: 100%'>
<view class='img-s'>
<image src='/img/img/bg_default_cart@2x.png' style='width: 300rpx; height: 300rpx;'></image>
</view>
<view style='width: 100%;' class='ttx'>
<text style='font-size: 26rpx; color: #999;display: block;'>去添加点东西吧~</text>
</view>
<view class='button' bindtap='toMall'>
<button class='btn'>去商城逛逛</button>
</view>
</view>
wxss:
page {
width: 100%;
height: 100%;
background: #efefef;
}
/* 购物车商品 */
.pro {
width: 100%;
height: 200rpx;
padding-bottom: 40rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: flex-start;
background: #fff;
border-bottom: 1rpx solid #efefef;
}
.xuanzhong {
height: 200rpx;
margin-left: 30rpx;
line-height: 200rpx;
}
.tutu {
padding-top: 20rpx;
}
.pro-image {
width: 160rpx;
height: 160rpx;
}
.wenzi {
margin-left: 20rpx;
padding-top: 40rpx;
width: 460rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-right: 30rpx;
}
.goodsname {
width: 100%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.te {
font-size: 28rpx;
color: #333;
}
.num {
width: 60rpx;
height: 60rpx;
}
.add {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.zuixia {
width: 100%;
height: 50%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 60rpx;
}
.price1 {
color: #F87039;
font-size: 28rpx;
}
.bottom {
width: 100%;
height: 98rpx;
border-top: 1rpx solid #efefef;
background-color: #fff;
position: fixed;
bottom: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 30rpx;
box-sizing: border-box;
}
button::after {
border: none;
}
.topay {
background-color: #F87039;
color: #fff;
width: 260rpx;
height: 98rpx;
line-height: 98rpx;
font-size: 32rpx;
text-align: center;
}
.img-s {
width: 100%;
display: flex;
justify-content: center;
padding-top: 160rpx;
}
.ttx {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 60rpx;
}
.button {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 60rpx;
}
.button .btn {
background-color: #F87039;
width: 360rpx;
height: 80rpx;
color: #fff;
font-size: 32rpx;
line-height: 80rpx;
}
js:
import modals from '../../../class/base/modal.js'
import usual from '../../../class/base/usual.js'
Page({
data: {
shopData:[
{
name: '商品1',
url: '/img/img/sort1@2x.png',
selected: true,
num: 1,
price: '484'
},
{
name: '商品2',
url: '/img/img/sort1@2x.png',
selected: true,
num: 1,
price: '404'
},
{
name: '商品3',
url: '/img/img/sort1@2x.png',
selected: true,
num: 1,
price: '10.56'
},
{
name: '商品4',
url: '/img/img/sort1@2x.png',
selected: true,
num: 1,
price: '100'
},
{
name: '商品5',
url: '/img/img/sort1@2x.png',
selected: true,
num: 1,
price: '0.5'
}
],
showPro:true,
jiesuan: 0.00
},
//加减操作
add(e) {
var that = this
let index = e.currentTarget.dataset.index
console.log(index)
let shopData = that.data.shopData
shopData[index].num++
usual.sum(shopData)
let jiesuan = wx.getStorageSync('jiesuan', jiesuan)
that.setData({
jiesuan: jiesuan,
shopData: shopData
})
},
// 加减
subtraction(e) {
var that = this
let index = e.currentTarget.dataset.index
let shopData = that.data.shopData
console.log(index)
if (shopData[index].num > 1) {
shopData[index].num--
}else {
modals.hideLoading('不能再少了')
}
usual.sum(shopData)
let jiesuan = wx.getStorageSync('jiesuan', jiesuan)
that.setData({
jiesuan: jiesuan,
shopData: shopData
})
},
//单选
danxuan(e) {
var that = this
let index = e.currentTarget.dataset.index
console.log(index)
let shopData = that.data.shopData
shopData[index].selected = !shopData[index].selected
usual.sum(shopData)
let jiesuan = wx.getStorageSync('jiesuan', jiesuan)
that.setData({
jiesuan: jiesuan,
shopData: shopData
})
},
//去结算
topay() {
let url = "../pay/pay?jsonStr="
let str = JSON.stringify(this.data.shopData)
modals.navigate(url,str)
},
onLoad: function (options) {
let that = this
let shopData = that.data.shopData
usual.sum(shopData)
let jiesuan = wx.getStorageSync('jiesuan', jiesuan)
that.setData({
jiesuan: jiesuan
})
}
})
调用的方法:
const app = getApp()
export default class usual {
static sum(shopData) {
//计算总价
new Promise((res, rej) => {
var that = this
let jiesuan = 0
for (let i = 0; i < shopData.length; i++) {
if (shopData[i].selected) {
jiesuan += shopData[i].price * 1000 * shopData[i].num / 1000
}
}
console.log(jiesuan)
wx.setStorageSync('jiesuan', jiesuan)
})
}
static selectAll(shopData) {
return new Promise((res, rej) => {
//一进页面即全为选中状态
var that = this
for (let i = 0; i < shopData.length; i++) {
let datashop = shopData[i].pro
for (let i in datashop) {
datashop[i].selected = false
}
}
})
}
}