微信小程序超市购物页面

Posted 2020-11-19 一毛买下世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序超市购物页面相关的知识，希望对你有一定的参考价值。

日常记录

附上文档地址有兴趣可以指点指点纯属学习

https://files.cnblogs.com/files/NISUN/restaurant.zip

日常学习

index.wxml

</view>

<swiper-item wx:for-items="{{imgUrls}}">

</swiper-item>

</swiper>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

<text>零食大礼包</text>

</view>

<text>九阳豆浆机</text>

</view>

<text>全系投影仪</text>

</view>

index.js

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

imgUrls: [

\'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg\',

\'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg\',

\'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg\'

//是否显示指示点

indicatorDots: true,

//是否自动播放

autoplay: true,

//自动切换时间间隔 ms

interval: 5000,

//滑动动画时长 ms

duration: 1000,

defaultSize: \'default\',

primarySize: \'default\',

warnSize: \'default\',

disabled: false,

plain: false,

loading: false

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: \'../logs/logs\'

})

listenSwiper: function (e) {

//打印信息

console.log(e)

onLoad: function (options) {

// 页面初始化 options为页面跳转所带来的参数

onReady: function () {

// 页面渲染完成

onShow: function () {

// 页面显示

onHide: function () {

// 页面隐藏

onUnload: function () {

// 页面关闭

}

})

index.wxss

/**index.wxss**/

.viewbox{

padding: 5px;

margin: 10px;

">#fff;

color: #888888;

}

.search-icon{

width: 40rpx;

height: 40rpx;

}

.search-input{

padding-left: 8px;

}

.search{

align-items: center;

display: flex;

flex-direction: row;

height: 50rpx;

}

.swiper_image{

width: 100%;

height: 100%;

}

.itmes{

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: space-around;

}

.logo_item{

width:150rpx;

height: 150rpx;

display: flex;

flex-direction: column;

align-items: center;

}

.logo_item_icon{

width: 100rpx;

height: 100rpx;

}

.logo_item text{

font-size: 27rpx;

}

.active_logo{

width: 100%;

height: 300rpx;

}

.active_items{

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

.viewbox_active{

width: 42%;

padding: 20rpx;

margin: 10rpx;

">#fff;

color: #888888;

align-items: center;

}

.active_p{

width: 320rpx;

height: 320rpx;

}

.price{

height: 50rpx;

display: flex;

flex-direction: row;

align-content: center;

font-size: 30rpx;

line-height: 25px;

color: red;

padding-top:5px;

}

.price button{

font-size: 23rpx;

color: white;

">red;

margin-right: 0px;

}

classify.wxml

</view>

<view style=\'width:197rpx;\'>￥{{item.price * item.num}}</view>

<view>

</view>

<view>

</view>

</view>

<scroll-view scroll-y="true" style="height:1000rpx;width:270rpx;">

<view id="{{item.id}}" class="left_menu"bindtap="changes_menu" wx:else >{{item.title}}</view>

</view>

</scroll-view>

<scroll-view scroll-y="true" style="height:1000rpx;">

</view>

<view class="right_menu_title">{{item.title}}</view>

<view class="right_menu_price" >￥{{item.price}}</view>

</view>

</scroll-view>

</view>

<view class="small_number">{{food_number}}</view>

</view>

<view class="tobar_center">$ {{food_price_sum}}</view>

</view>

classify.js

// pages/classify/classify.js

var temp_number=null;

var app= getApp();

Page({

/**

* 页面的初始数据

data: {

//动画效果

animationData:{},

//是否显示底部自定义弹框

showModalStatus:false,

//物品的数量(用于显示上面的小数字)

food_number: app.globalData.food_number,

//物品的总价

food_price_sum: app.globalData.food_price_sum,

//购物车

shopping_car: app.globalData.shopping_car,

//商品菜单

menu_list:[

{id:"0",title:"零食",statue:"true"}

, { id: "1", title: "烟酒", statue: "false" }

, { id: "2",title: "化妆品", statue: "false" }

, { id: "3",title: "生活用品", statue: "false" }

, { id: "4",title: "鲜果", statue: "false" }

, { id: "5",title: "蔬菜", statue: "false" }

, { id: "6",title: "其他", statue: "false" }],

//商品

food_list: [{ id: "0", food:[{

index:0,

title:"麻辣条",

price:15,

icon_url:"https://img.alicdn.com/imgextra/i3/725677994/TB2vlyknb5YBuNjSspoXXbeNFXa_!!725677994.jpg_430x430q90.jpg"

}, {

index: 1,

title: "卫龙",

price: 15,

icon_url: "https://img.alicdn.com/imgextra/i3/725677994/TB2vlyknb5YBuNjSspoXXbeNFXa_!!725677994.jpg_430x430q90.jpg"

}, {

index: 2,

title: "麻辣条",

price: 15,

icon_url: "https://img.alicdn.com/imgextra/i3/725677994/TB2vlyknb5YBuNjSspoXXbeNFXa_!!725677994.jpg_430x430q90.jpg"

}]

}, {

id: "1", food: [{

index: 0,

title: "麻辣条",

price: 15,

icon_url: "https://img.alicdn.com/imgextra/i3/725677994/TB2vlyknb5YBuNjSspoXXbeNFXa_!!725677994.jpg_430x430q90.jpg"

}, {

index: 1,

title: "麻辣条",

price: 15,

icon_url: "https://img.alicdn.com/imgextra/i3/725677994/TB2vlyknb5YBuNjSspoXXbeNFXa_!!725677994.jpg_430x430q90.jpg"

}, {

index: 2,

title: "麻辣条",

price: 15,

icon_url: "https://img.alicdn.com/imgextra/i3/725677994/TB2vlyknb5YBuNjSspoXXbeNFXa_!!725677994.jpg_430x430q90.jpg"

}, {

index: 3,

title: "麻辣条",

price: 15,

icon_url: "https://img.alicdn.com/imgextra/i3/725677994/TB2vlyknb5YBuNjSspoXXbeNFXa_!!725677994.jpg_430x430q90.jpg"

}]

}],

page:0

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

/**

* 生命周期函数--监听页面初次渲染完成

onReady: function () {

/**

* 生命周期函数--监听页面显示

onShow: function () {

/**

* 生命周期函数--监听页面隐藏

onHide: function () {

/**

* 生命周期函数--监听页面卸载

onUnload: function () {

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh: function () {

/**

* 页面上拉触底事件的处理函数

onReachBottom: function () {

/**

* 用户点击右上角分享

onShareAppMessage: function () {

changes_menu:function(e){

let goPage = e.currentTarget.id;

var that = this;

var st = that.data.menu_list[goPage].statue

var up = "menu_list[" + goPage + "].statue";//先用一个变量，把(info[0].gMoney)用字符串拼接起来

if (st==\'false\'){

if (temp_number!=null){

var tm = "menu_list[" + temp_number + "].statue"

that.setData({

[tm]: "false",

[up]: "true",

page: goPage

})

}else{

var tt = "menu_list[" + 0 + "].statue"

that.setData({

[tt]: "false",

[up]: "true",

page: goPage

})

}

temp_number = goPage;

//添加商品到购物车

add_shop_car:function(e){

//单个商品数量

let itemNum = 1;

this.setData({

//所有商品的总数量

food_number: parseInt(this.data.food_number)+1,

//求出商品的总和直接复制给data

food_price_sum:this.data.food_price_sum + parseInt(e.currentTarget.dataset.price)

})

// 商品名是否相同判断，不重复添加同名商品

if (this.data.shopping_car.length > 0) {

let isHave = this.data.shopping_car.findIndex(item => item.name == e.target.dataset.name);

if (isHave != -1) {

var num_temp = "shopping_car[" + isHave + "].num";

var num_temp_value = parseInt(this.data.shopping_car[isHave].num) + 1;

var price_temp = "shopping_car[" + isHave + "].price";

this.setData({

[num_temp]: num_temp_value,

[price_temp]: parseInt(e.currentTarget.dataset.price),

})

} else {

this.data.shopping_car.push({

//商品名称

name: e.currentTarget.dataset.name,

//商品总价格

price: parseInt(e.currentTarget.dataset.price) * itemNum ,

//商品数量

num: itemNum,

})

this.setData({

shopping_car: this.data.shopping_car,

})

}

} else {

this.data.shopping_car.push({

//商品名称

name: e.currentTarget.dataset.name,

//商品价格

price: parseInt(e.currentTarget.dataset.price) * itemNum,

//商品数量

num: itemNum,

})

this.setData({

shopping_car: this.data.shopping_car,

})

}

this.frunsh_data();

shopping_cart:function(){

this.setData({

showModalStatus: true

})

},//显示对话框

showModal: function () {

// 显示遮罩层

var animation = wx.createAnimation({

duration: 2000,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).step()

this.setData({

animationData: animation.export(),

showModalStatus: true

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export()

})

}.bind(this), 200)

//隐藏对话框

hideModal: function () {

// 隐藏遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).step()

this.setData({

animationData: animation.export(),

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export(),

showModalStatus: false

})

}.bind(this), 200)

shopping_add:function(e){

if (this.data.shopping_car.length > 0) {

let isHave = this.data.shopping_car.findIndex(item => item.name == e.target.dataset.name);

if (isHave != -1) {

var num_temp = "shopping_car[" + isHave + "].num";

var num_temp_value = parseInt(e.target.dataset.num) + 1;

var price_temp = "shopping_car[" + isHave + "].price";

var price_temp_value = parseInt(e.target.dataset.price)

this.setData({

[num_temp]: num_temp_value,

[price_temp]: price_temp_value,

food_number: parseInt(this.data.food_number) + 1,

food_price_sum: this.data.food_price_sum + parseInt(e.target.dataset.price)

})

}

this.frunsh_data();

shopping_subtract:function(e){

var that = this;

let isHave = this.data.shopping_car.findIndex(item => item.name == e.target.dataset.name);

let num_temp = "shopping_car[" + isHave + "].num";

let num_temp_value = parseInt(e.target.dataset.num) - 1;

let price_temp = "shopping_car[" + isHave + "].price";

let price_temp_value = parseInt(e.target.dataset.price)

if (this.data.shopping_car.length > 0) {

if (isHave != -1) {

this.setData({

[num_temp]: num_temp_value,

[price_temp]: price_temp_value,

food_number: parseInt(this.data.food_number) - 1,

food_price_sum: this.data.food_price_sum - parseInt(e.target.dataset.price)

})

}

if (num_temp_value == 0) {

shopping_car: this.data.shopping_car.splice(isHave, 1)

}

if (parseInt(this.data.food_number) <= 0){

this.setData({

showModalStatus:false,

food_price_sum: 0,

})

}

this.frunsh_data();

switch_shopping_car: function (e) {

this.frunsh_data();

wx.switchTab({

url: \'../shoppingCar/shoppingCar\',

})

console.log(app.globalData.shopping_car)

frunsh_data:function(){

// 菜单对象

app.globalData.shopping_car = this.data.shopping_car;

//物品的总价

app.globalData.food_price_sum = this.data.food_price_sum;

//物品的数量

app.globalData.food_number = this.data.food_number;

wx.setStorageSync(\'shopping_car\', this.data.shopping_car);

wx.setStorageSync(\'food_price_sum\', this.data.food_price_sum );

wx.setStorageSync(\'food_number\', this.data.food_number);

}

})

classify.wxss

/* pages/classify/classify.wxss */

.viewbox{

height: 50rpx;

padding: 5px;

margin: 10px;

">#fff;

color: #888888;

}

page{

height: 95%;

}

.search-icon{

width: 40rpx;

height: 40rpx;

}

.search-input{

padding-left: 8px;

}

.search{

align-items: center;

display: flex;

flex-direction: row;

height: 50rpx;

}

.bottom_menu{

display: flex;

flex-direction: row;

}

.left_menu{

height: 100rpx;

width:200rpx;

color:#999999;

line-height: 100rpx;

text-align: center;

}

.right_menu{

">#ffffff;

height: 284rpx;

width:550rpx;

color:#999999;

line-height: 100rpx;

text-align: center;

display: flex;

}

.right_menu_image{

height: 200rpx;

width:200rpx;

}

.right_menu_infomation{

height: 200rpx;

width:283rpx;

}

.right_image{

height: 300rpx;

width:300rpx;

}

.right_menu_title{

margin-top: 40rpx;

width: 300rpx;

height: 60rpx;

text-align: right;

}

.right_menu_price{

color: #e02d3f;

font-size: 60rpx;

font-weight: 600;

width: 300rpx;

height: 60rpx;

margin-bottom: 40rpx;

text-align: right;

}

.right_menu_add{

float:right;

width:24px;

height:24px;

line-height:22px;

font-size:16px;

text-align:center;

color:#e02d3f;

border:1px solid #d6d3d3;

border-radius:37px;

}

.torbar_bottom{

color: white;

height: 50px;

width: 100%;

position: fixed;

bottom: 0px;

line-height:50px;

z-index: 8;

}

.tobar_left{

height:100%;

width:26%;

float: left;

">#e02d3f;

}

.tobar_center{

height:100%;

width:41%;

font-size:55rpx;

float: left;

">#e02d3f;

padding-left:25rpx

}

.tobar_right{

padding-left: 5px;

height:100%;

width:28%;

float: right;

">#e02d3f;

font-size:40rpx;

}

.tobar_left_image{

height: 100%;

width: 150rpx;

float:left;

padding-left:41rpx;

}

.small_number{

float:right;

width:40rpx;

height:40rpx;

line-height:40rpx;

font-size:29rpx;

text-align:center;

color:#ffffff;

border-radius:37px;

position: relative;

top: -41px;

background: #ff7b0f;

}

/*使屏幕变暗 */

.commodity_screen {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.2;

overflow: hidden;

z-index: 6;

color: #fff;

}

/*对话框 */

.commodity_attr_box {

width: 100%;

overflow: hidden;

position: fixed;

bottom: 100rpx;

left: 0;

z-index: 7;

background: #fff;

}

.shopping_title{

height:84rpx;

">#d6d3d3;

color:#ffffff;

font-size:42rpx;

line-height:84rpx;

padding-left:20rpx;

}

.shopping_info{

height:100rpx;

line-height:100rpx;

padding:20rpx;

display:flex;

flex-direction:row;

border-bottom:1px solid black;

}

.shopping_info_title{

width: 60%;

}

.shopping_info_number{

width: 38%;

display: flex;

}

.shopping_button{

text-align:center;

color:#e02d3f;

border:1px solid #d6d3d3;

border-radius:29px;

width:19px;

margin-bottom:26rpx;

margin-top:26rpx;

line-height:40rpx;

}

shoppingCar.wxml

<view class="order_children_sum">￥{{item.price*item.num}}</view>

</view>

<view class="sum_text">合计金额￥{{food_price_sum}}</view>

</view>

待支付￥{{food_price_sum}}

</view>

</view>

shoppingCar.js

// pages/shoppingCar/shoppingCar.js

var app = getApp();

Page({

/**

* 页面的初始数据

data: {

shopping_car:[],

//物品的总价

food_price_sum: 0,

//物品的数量

food_number: 0

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

/**

* 生命周期函数--监听页面初次渲染完成

onReady: function () {

/**

* 生命周期函数--监听页面显示

onShow: function () {

var that = this;

this.setData({

shopping_car: app.globalData.shopping_car,

//物品的总价

food_price_sum: app.globalData.food_price_sum,

//物品的数量

food_number: app.globalData.food_number

})

/**

* 生命周期函数--监听页面隐藏

onHide: function () {

/**

* 生命周期函数--监听页面卸载

onUnload: function () {

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh: function () {

/**

* 页面上拉触底事件的处理函数

onReachBottom: function () {

/**

* 用户点击右上角分享

onShareAppMessage: function () {

}

})

shoppingCar.wxss

/* pages/shoppingCar/shoppingCar.wxss */

.page{

height: 100%;

}

.order_text{

">#ffffff;

margin-bottom: 20rpx;

margin-top: 20rpx;

}

.order{

height: 80%;

width:100%;

color:#999999;

line-height: 100rpx;

text-align: left;

}

.order_infomation{

display: flex;

">#ffffff;

padding-left: 10rpx;

height: 10%;

}

.order_children_name{

width: 70%;

}

.order_children_num{

width: 15%;

}

.order_children_sum{

width: 15%;

text-align: center;

}

.sum_text{

text-align: right;

padding-right: 28rpx;

">#fff;

}

.torbar_bottom{

color: white;

height: 50px;

width: 100%;

position: fixed;

bottom: 0px;

line-height:50px;

z-index: 8;

}

.tobar_left{

height:100%;

width:72%;

float: left;

font-size:40rpx;

">#000;

}

.tobar_right{

height:100%;

width:28%;

float: right;

">#e02d3f;

font-size:40rpx;

text-align: center;

}

.tobar_price{

padding-left: 60rpx;

}

app.js

//app.js

App({

onLaunch: function () {

// 展示本地存储能力

var logs = wx.getStorageSync(\'logs\') || []

this.globalData.shopping_car = wx.getStorageSync("shopping_car") || [];

this.globalData.food_number = wx.getStorageSync("food_number") || 0;

this.globalData.food_price_sum = wx.getStorageSync("food_price_sum") || 0;

logs.unshift(Date.now())

wx.setStorageSync(\'logs\', logs)

// 登录

wx.login({

success: res => {

// 发送 res.code 到后台换取 openId, sessionKey, unionId

}

})

// 获取用户信息

wx.getSetting({

success: res => {

if (res.authSetting[\'scope.userInfo\']) {

// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框

wx.getUserInfo({

success: res => {

// 可以将 res 发送给后台解码出 unionId

this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

if (this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

}

})

}

})

globalData: {

//用户信息

userInfo: null,

//购物车

shopping_car: [],

//物品的总价

food_price_sum: 0,

//物品的数量

food_number: 0,

//合计

food_price_sum: 0,

}

})

app.wxss

/**app.wxss**/

page{

height: 100%;

">#fbf9fe;

font-size: 32rpx;

}

project.cofig.json

{

"description": "项目配置文件。",

"setting": {

"urlCheck": true,

"es6": true,

"postcss": true,

"minified": true,

"newFeature": true

"compileType": "miniprogram",

"libVersion": "1.9.94",

"appid": "wx348b3d9e0bdb365f",

"projectname": "restaurant",

"isGameTourist": false,

"condition": {

"search": {

"current": -1,

"list": []

"conversation": {

"current": -1,

"list": []

"game": {

"currentL": -1,

"list": []

"miniprogram": {

"current": -1,

"list": []

}

以上是关于微信小程序超市购物页面的主要内容，如果未能解决你的问题，请参考以下文章

开题报告微信小程序购物选题背景怎么写

微信小程序转载：微信小程序之购物车功能

小程序项目实战—购物商城微信小程序

基于微信小程序的网上购物系统的设计与实现.pdf

微信小程序实现购物车结算

微信小程序 超市购物页面

微信小程序超市购物页面