微信小程序制作简单的商品列表页，实现价格求和
<view class="contain">
<form bindsubmit="submit">
<view>
<text id="top">商品</text>
<checkbox-group name="skills">
<label wx:for="{
{skill}}" wx:key="value">
<checkbox value="{
{item.value}}" checked="{
{item.checked}}">
<!-- {
{item.name}} -->
<image id="img" src="../image/{
{item.name}}.jpg"></image>
<view><text>{
{item.text}}</text></view>
</checkbox>
</label>
</checkbox-group>
</view>
<button form-type="submit">提交</button>
<text id="sum">合计:{
{result}}</text>
</form>
</view>
/* pages/index/index.wxss */
.contain{
margin: 15px auto;
}
#top{
/* margin:0 auto; */
margin-left: 20px;
}
#img{
/* float: left; */
width: 120px;
height: 120px;
}
label{
height: 150px;
position: relative;
display: block;
margin-left: 20px;
}
label view{
position: absolute;
display: inline;
padding-right: 20px;
padding-top: 50px;
}
#sum{
margin-left: 20px;
}
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
skill: [
{
name:01,value:600,checked:false,text:宇智波佐助
价格: 600.00},
{
name:02,value:300,checked:false,text:宇智波鼬
价格: 300.00},
{
name:03,value:500,checked:false,text:旗木卡卡西
价格: 500.00},
{
name:04,value:700,checked:false,text:路飞、红发香克斯
价格: 700.00},
{
name:07,value:350,checked:true,text:索隆
价格: 350.00},
{
name:08,value:799,checked:true,text:路飞
价格: 799.00},
],
result:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
submit:function(e){
var that=this
wx.request({
method:POST,
url: http://127.0.0.1:3000,
data:e.detail.value,
success:function (res){
const a=res.data.skills
// console.log(a)
//求和计算
const reducer=(accumlator,currentValue)=>parseInt(accumlator)+parseInt(currentValue)
console.log(a.reduce(reducer))
const sum=a.reduce(reducer)
that.setData({
result:sum})
}
})
},
})
{
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"商品列表",
"navigationBarTextStyle":"black",
"usingComponents": {
}
}
服务器端代码实现
const express=require(express)
const bodyParser =require(body-parser)
const app=express()
app.use(bodyParser.json())
//处理post请求
app.post(/,(req,res) => {
console.log(req.body)
res.json(req.body)
})
app.listen(3000,()=>{
console.log(server running at http://127.0.0.1:3000)
})
效果展示
