mall商城系统
1.介绍
该系统是基于SSM,uniapp框架的一个移动端(小程序,app,h5)商城项目。
2.负责的模块
商品分类,列表,详情
购物车,支付
3.重点代码:
前端
1.请求的封装:
const baseUrl = 'http://localhost:8080/mall/'
//同时发送异步代码的次数
let ajaxTimes = 0;
export const myRequest = (options)=>{
ajaxTimes++;
//显示加载中效果
// uni.showLoading({
// title:"加载中",
// mask:true
// });
return new Promise((resolve,reject)=>{
uni.request({
url:baseUrl+options.url,
method:options.method || 'GET',
data:options.data || {},
success: (res) => {
resolve(res.data.message)
},
fail: (err) => {
uni.showToast({
title:'请求接口失败'
})
reject(err)
},
complete: () => {
ajaxTimes--;
//关闭加载图标
if(ajaxTimes==0){
uni.hideLoading();
}
}
})
})
}
export const myshowModel = (options)=>{
return new Promise((resolve,reject)=>{
uni.showModal({
title: '提示',
content: options.content,
success: (res)=> {
resolve(res);
},
fail: (err) => {
reject(err)
}
});
})
}
2.购物车逻辑
<template>
<view>
<!-- 购物车内容 -->
<view class="cart_content">
<!-- <view class="cart_title">
购物车
</view> -->
<view class="cart_main">
<!-- 当cart长度不为0时,显示商品信息 -->
<block v-if="cart.length!=0">
<view class="cart_item" v-for="(item,index) in cart" :key="index">
<!-- 复选框 -->
<view class="cart_chk_wrap">
<checkbox-group @change="handleItemChange(item.goods_id)">
<label>
<checkbox :checked="item.checked"></checkbox>
</label>
</checkbox-group>
</view>
<!-- 商品图片 -->
<navigator :url="'../goods_detail/goods_detail?goods_id='+item.goods_id" class="cart_img_wrap">
<image :src="item.goods_small_logo" mode="widthFix"></image>
</navigator>
<!-- 商品信息 -->
<view class="cart_info_wrap">
<navigator :url="'../goods_detail/goods_detail?goods_id='+item.goods_id">
<view class="goods_name">
{
{item.goods_name}}
</view>
</navigator>
<view class="goods_price_wrap">
<view class="goods_price">
¥{
{item.goods_price}}
</view>
<view class="cart_num_tool">
<view class="num_edit" :data-id="item.goods_id" :data-operation="-1" @click="handleItemNumEdit">-</view>
<view class="goods_num">
{
{item.num}}
</view>
<view class="num_edit" :data-id="item.goods_id" :data-operation="1" @click="handleItemNumEdit">+</view>
</view>
</view>
</view>
</view>
</bl