关于小程序中的购物车，以uniapp为例

关于小程序中的购物车

抗疫这段时间，停工不停学，在逆战中求生存！总结下关于购物车的一些小知识吧！（代码以uniapp为例）

购物车的逻辑

• 进入到购物车页面，我们首先需要在onShow钩子函数中去获取一下登录状态
  • 已登录，则显示页面
  • 未登录，跳转至登录页面
• 登录之后，发送请求，来获取账号的购物车信息
  • 有数据则渲染数据
  • 无数据，显示另一个页面
• 单选和全选，以及计算数量和总价
• 数量的增加和减少
• 单条商品的删除

数据请求的封装

数据请求是使用非常多的函数，所以一般来说，会在utils文件中封装好，以便使用

const baseUrl = "http://xxx.xxx.xxx"   

export function request (options) {
   
	const {
    url, method, data, headers } = options
	uni.showLoading({
   
	    title: '加载中'
	});
	return new Promise ((resolve, reject) =>{
   
		uni.request({
   
			url : baseUrl + url,
			data: data || {
   },
			method:  method || 'GET',
			headers: headers || {
   },
			timeout: 6000,  //请求超时时间设置
			success: (res) => {
   
				resolve (res)
			},
			fail: (err) => {
   
				reject (err)
			},
			complete: (res) =>{
   
				 uni.hideLoading();
			}
		})
	})
}

判断登录状态

onShow () {
    // 不使用 onLoad 以及 mounted 是因为页面被缓存，数据更新不及时
      try{
   
        let userid = uni.getStorageSync('userid')    // 获取到用户的userid
        let token = uni.getStorageSync('token')
        if (userid && token) {
      
          request({
   
            url: '/cart',
            data: {
   
              userid, token
            }
          }).then(res => {
   
            if (res.data.code === '10019') {
   
              toast({
   title:'请先登录'})
              uni.navigateTo({
   
                url: '/pages/login/login'
              })