shopping客户端
程序员文章站
2024-03-17 08:35:28
...
xml
<view class="box" style="{{bdcolor}}" wx:for="{{data}}" wx:for-item="arritem" wx:for-index="arrindex" data-key1="{{arrindex}}" bind:tap="commodityDetails" data-detailData="{{arrindex}}" wx:key="goodlist">
<view class="tx" >
<block>
<image src="{{arritem.image}}" class="img-1" />
</block>
</view>
<view class="box1">
<text class="text1">{{arritem.name}}</text>
<text class="text2">¥:{{arritem.price}}</text>
</view>
<view class="mybutton" catch:tap="buy" hover-class="hover" data-index="{{arrindex}}">购买</view>
</view>
<view class="bottombox">
<image src="/images/gouwuchekong.png" style="width:50rpx;height:55rpx;" mode="aspectFill"></image>
<view style="font-size:28rpx">{{buyid}} 件商品</view>
<view style="font-size:28rpx;color:#FFA500">¥ {{money}}</view>
<view class="mybutton1" catch:tap="clear" hover-class="hover1">清空</view>
<view class="mybutton2" catch:tap="result" hover-class="hover2">结算</view>
</view>
wxss
page{
box-sizing: border-box;
padding-bottom: 100rpx;
}
.box{
width: 100%;
margin: 0 auto;
border-bottom:2rpx solid #D3D3D3;
display: flex;
flex-direction: row;
padding: 25rpx 25rpx;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
}
.box1{
width: 380rpx;
overflow: hidden;
position: relative;
}
.box1 .time{
color: #B0B0B0;
position: absolute;
right: 0rpx;
line-height: 60rpx;
font-size: 26rpx;
}
.box .tx{
position: relative;
width: 100rpx;
height: 100rpx;
border-radius: 5%;
background-color: #DADFDE;
margin-right: 20rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
.box:nth-of-type(2n){
background-color: rgba(237,237,237, .6);
}
.box .tx .img-1{
width: 100%;
height: 100%;
}
.box .tx image{
width: 30rpx;
height: 30rpx;
border-radius: 5%;
}
.box .tx .tx-dot{
width: 35rpx;
height: 35rpx;
border-radius: 50%;
background-color: #ff0000;
position: absolute;
right: -10rpx;
top: -10rpx;
text-align: center;
color: white;
font-size: 18rpx;
display: flex;
justify-content: center;
align-items: center;
}
.box .tx .tx-dot .tx-dot-99{
font-size: 15rpx;
}
.box .text1{
display: block;
color: black;
font-weight: bold;
font-size: 26rpx;
line-height: 60rpx;
width: 300rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.box .text2{
display: block;
color: #FFA500;
font-size: 35rpx;
width: 300rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.searchbox{
width: 600rpx;
display: flex;
border: 2rpx solid #C0C0C0;
border-radius: 10px;
align-items: center;
margin: 30rpx auto;
}
.searchbox input{
width: 600rpx;
height: 60rpx;
padding: 0 15rpx;
font-size: 28rpx;
}
.bottombox{
background-color: #fff;
width: 100vw;
height: 120rpx;
box-sizing: border-box;
padding: 10rpx;
border-top: 2rpx solid #B0B0B0;
position: fixed;
bottom: 0rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.mybutton1{
width: 120rpx;
height: 70rpx;
border: 2rpx solid #DCDCDC;
background-color: #F5F5F5;
font-size: 28rpx;
border-radius: 12rpx;
text-align: center;
line-height: 70rpx;
}
.mybutton2{
width: 120rpx;
height: 80rpx;
background-color: red;
color: white;
font-size: 28rpx;
border-radius: 16rpx;
text-align: center;
line-height: 80rpx;
}
json
{
“enablePullDownRefresh”:true,
“onReachBottomDistance”:20
}
js
var current = 1
var count
Page({
// 商品详情
commodityDetails: function (e) {
var detailIndex = e.currentTarget.dataset.detaildata
var detailData = JSON.stringify(this.data.data[detailIndex])
wx.navigateTo({
url: '/pages/detail/detail?detailData=' + detailData,
})
},
// 购买
buy: function (e) {
console.log(getApp().globalData.userInfo.userId)
var that = this
// 获取当前列表下标,对应服务器数据列表下标
var index = e.currentTarget.dataset.index
// 点击一次,请求服务器添加一次对应的商品
wx.request({
url: getApp().globalData.host + 'cart/add',
method: 'POST',
data: {
userId: getApp().globalData.userInfo.userId,
goodsId: that.data.data[index].goodsId
},
success: (res) => {
getApp().globalData.flag = true
wx.showToast({
title: '已添加到购物车',
icon: 'none',
})
// 请求购物车信息
wx.request({
url: getApp().globalData.host + 'cart/getAll',
method: 'POST',
data: {
userId: getApp().globalData.userInfo.userId
},
success: (res) => {
// 获取成功,渲染页面数据
that.setData({
buyid: res.data.data.total_num,
money: res.data.data.total_money
})
}
})
}
})
},
// 清空
clear: function () {
// 清空购物车数据
wx.request({
url: getApp().globalData.host + 'cart/delete',
method: 'POST',
data: {
userId: getApp().globalData.userInfo.userId
},
success: (res) => {
getApp().globalData.flag = false
getApp().globalData.goodsList = null
// 成功清空后,清空页面数据
wx.showToast({
title: '已清空',
icon: 'success'
})
this.setData({
buyid: 0,
money: "0.00"
})
}
})
},
// 结算
result: function () {
// 判断购物车是否为空
if (getApp().globalData.flag) {
// 请求当前购物车信息
wx.request({
url: getApp().globalData.host + 'cart/getAll',
method: 'POST',
data: {
userId: getApp().globalData.userInfo.userId
},
success: (res) => {
//获取goods——list准备请求结算页信息
getApp().globalData.goodsList = res.data.data.goods_list
wx.navigateTo({
url: '/pages/shoppingResult/shoppingResult',
})
}
})
} else {
wx.showToast({
title: '请选择商品',
icon: 'none'
})
}
},
// 上拉加载下拉刷新
initialData: function () {
current = 1
wx.showLoading({
title: 'loging'
})
wx.request({
url: getApp().globalData.host + 'goods/getGoodsByPage',
data: {
page: 1,
pageSize: 8 * current
},
method: 'POST',
success: (res) => {
wx.hideLoading()
wx.stopPullDownRefresh()
var data = res.data.data
var reg = RegExp(/^u/)
for (const key in data) {
if (reg.exec(data[key].image)) {
var item = data[key]
item.image = this.data.imgurl + item.image
data.splice(key, 1, item)
}
}
this.setData({
data: data
})
}
})
},
loadData: function () {
current++;
wx.request({
url: getApp().globalData.host + 'goods/getGoodsByPage',
data: {
page: 1,
pageSize: 8 * current
},
method: 'POST',
success: (res) => {
if (res.data.data.length == count) {
wx.showToast({
title: '已加载全部数据',
icon: 'none'
})
} else {
count = res.data.data.length
var data = res.data.data
var reg = RegExp(/^u/)
for (const key in data) {
if (reg.exec(data[key].image)) {
var item = data[key]
item.image = this.data.imgurl + item.image
data.splice(key, 1, item)
}
}
this.setData({
data: data
})
}
}
})
},
data: {
imgurl: "http://116.62.201.243:8080/wxxcx/"
},
onLoad: function (options) {
this.initialData()
},
onPullDownRefresh: function () {
this.initialData()
wx.showToast({
title: '刷新成功',
})
},
onReachBottom: function () {
this.loadData()
},
onReady: function () {
},
onShow: function () {
wx.request({
url: getApp().globalData.host + 'cart/getAll',
method: 'POST',
data: {
userId: getApp().globalData.userInfo.userId
},
success: (res) => {
if (res.data.data.total_money == 0) {
this.setData({
buyid: "0",
money: "0.00"
})
} else {
// 有商品的时候才能结算
this.setData({
buyid: res.data.data.total_num,
money: res.data.data.total_money
})
getApp().globalData.flag = true
}
},
fail:res=>{
console.log(res)
}
})
},
onHide: function () {
},
onUnload: function () {
},
onShareAppMessage: function () {
}
})
推荐阅读
-
shopping客户端
-
sso 单点登陆 客户端 登录 博客分类: web sso单点登陆客户端登录
-
Socket请求XML客户端程序 博客分类: J2SE Javaxmlsocketiothread
-
AD域通过组策略将客户端自动注册到Zabbix
-
将Eureka客户端部署到Docker,并注册到Eureka注册中心
-
4. 使用Ribbon实现客户端负载均衡,接上一篇:将服务注册到nacos中
-
深入折腾 Weex,知乎日报客户端开发
-
将视频平台Kaltura集成到CMS客户端
-
Websphere MQ Java/JMS 客户端的 SSL/AMS 配置 MQJMSIBMSSLJava
-
微信扫二维码下载客户端被挡 博客分类: javascript 扫码下载二维码微信浏览器打开