本文共 8229 字，大约阅读时间需要 27 分钟。

一、购物车列表

1.总价钱和总数量和全选状态的获取

computed:{   			// 总数量			totalNum(){   				let totalNum = 0				this.cartLists.map(item=>{   					item.checked == 1 ? totalNum += item.num :""				})								return totalNum			},			// 总价钱			totalPrice(){   				let totalPrice=0				this.cartLists.map(item=>{   					item.checked == 1 ? totalPrice += (item.num*item.price) :""				})								return totalPrice			},			// 全选状态			allChecked(){   				let allChecked = false								// 全部选中  返回真  只要有一个不选中，返回假				allChecked = this.cartLists.every(item=>{   					return item.checked == 1				})								return allChecked			}		},

2.购物车信息修改

2.1数量添加

代码案例

// 加加    add(index){           this.cartLists[index].num++;        // 数据库的修改        this.cartEdit(index)    },

2.2数量减少

代码案例

// 减减    dec(index){           this.cartLists[index].num--;        if(this.cartLists[index].num<1){               this.cartLists[index].num = 1            return        }        // 数据库的修改        this.cartEdit(index)    },

2.3开关更改单个状态

功能分析

@change 事件     开关真假变化 触发事件 传index        修改data 数据        执行数据库修改

代码案例

// 单个数据的选中状态     changeChecked(index){           this.cartLists[index].checked = this.cartLists[index].checked == 0 ? 1 : 0        // 数据库的修改        this.cartEdit(index)    },

2.4全选更改所有状态

功能分析

@change 事件 	获取开关的状态 真假    	循环给每一个item 设置全选开关的状态

代码案例

// 全选状态 修改    changeAllChecked(e){           // console.log(e.detail.value);        this.cartLists.map((item,index)=>{               item.checked = e.detail.value ? 1 : 0            // 数据库的修改            this.cartEdit(index)        })    },

2.5执行修改

参数：

参数名	说明
id	购物车编号，必填项
num	数量
checked	状态
authorization	header头中需要添加token后台验证条件

接口：

// 13.购物车 修改    const _cartEdit = (header,data)=>{           let option={               url:"/api/cartedit",            header,            data        }        return http(option)    }

代码案例

// 数据库修改    async cartEdit(index){           // 1.条件        let {   id,num,checked} = this.cartLists[index]        // console.log(id,num,checked);        let header = {               authorization:uni.getStorageSync('userInfo').token        }        // 2.执行修改        let res = await this.$api._cartEdit(header,{   id,num,checked})        console.log(res);    },

2.购物车信息删除

接口

// 14.购物车 删除    const _cartDelete = (header,data)=>{           let option={               url:"/api/cartdelete",            header,            data        }        return http(option)    }

代码案例

// 数据库的删除    async cartDelete(index){           // 0.确认删除吗         // 1.条件        let {   id} = this.cartLists[index]        let header = {               authorization:uni.getStorageSync('userInfo').token        }        // 2.执行删除        let res = await this.$api._cartDelete(header,{   id})        console.log(res);        // 3.页面视图删除 ---data        this.cartLists.splice(index)    },

3.点击去结算跳转确认订单页面

代码：

toConfirmPage(){           if(this.totalNum < 1){               uni.showToast({                   title:"至少选中一件商品",                icon:"none"            })            return        }        uni.navigateTo({               url:"../confirm/confirm"        })    }

二、提交订单

1. 获取要购买的商品的信息

代码案例

methods: {       // 获取购物车商品信息    async cartList(){           // 1.找参数        let {   uid,token} = uni.getStorageSync('userInfo')        let data = {   uid}        let header = {   authorization:token}        // 2.执行查询        let res = await this.$api._cartList(header,data)        // console.log(res);        // ======= 筛选要结算的商品 选中状态 filter======        this.cartLists = res.data.list.filter(item=>{               return item.checked == 1        })        // ============== end =============        // console.log(this.cartLists);        // this.cartLists = res.data.list || []    }},    async onLoad(){           let isLogin = await checkToken(this)        if(isLogin){               this.cartList()            this.baseUrl = this.$config.baseUrl        }    }

2.总价钱和总件数（传参用）

代码案例

computed:{           // 总数量        totalNum(){               let totalNum = 0            this.cartLists.map(item=>{                   item.checked == 1 ? totalNum += item.num :""            })            return totalNum        },        // 总价钱        totalPrice(){               let totalPrice=0            this.cartLists.map(item=>{                   item.checked == 1 ? totalPrice += (item.num*item.price) :""            })            return totalPrice        }},

3.下单操作

1）订单添加和跳转订单管理页面

接口

// 15.订单 添加const _orderAdd = (header,data)=>{   	let option={   		url:"/api/orderadd",		header,		data	}	return http(option)}export default {   	_getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,	_getCateGoodPage,_getGoodsInfo,_getSms,_login,_checkToken,_cartAdd,_cartList,	_cartEdit,_cartDelete,_orderAdd}

参数： params

参数名	说明
uid	会员id
username	收货人姓名
userphone	收货人联系方式
address	收货人地址
countmoney	订单总支付金额
countnumber	订单商品数量
addtime	订单添加时间（时间戳）
idstr	购物车数据id字符串 例如：idstr = “1,2,3”
authorization	header头中需要添加token后台验证条件

uid username userphone address countmoney countnumer addtime -> 封装到params中 以json字符串的形式传递过去

代码案例：

//.....	async orderAdd(){           // 1.执行订单添加        // 1.找参数     		/*                 uid 会员id                username 收货人姓名                userphone 收货人联系方式                address 收货人地址                countmoney 订单总支付金额                countnumber 订单商品数量                addtime 订单添加时间（时间戳）                idstr 购物车数据id字符串 例如：idstr = "1,2,3"                authorizationheader头 中需要添加token后台验证条件*/        let {   uid,token} = uni.getStorageSync('userInfo')        let params = {               "uid":uid,            "username":this.information.name,            "userphone":this.information.phone,            "address":this.information.address,            "countmoney":this.totalPrice,            "countnumber":this.totalNum,            "addtime":new Date().getTime()        }        // 1）每一项要结算的商品  id  [22,23,24]         let idstr = this.cartLists.map(item=>{               return item.id        })        // console.log(idstr);        // [22,23,24]   ===>  "23,23,24"        idstr = idstr.join(",")        console.log(idstr);        let header ={   authorization:token}        let data={   params,idstr}        // 2.执行添加        let res = await this.$api._orderAdd(header,data)        console.log(res);        if(res.data.code == 200){               uni.showToast({                   title:res.data.msg            })            // 2.页面跳转            setTimeout(()=>{                   uni.redirectTo({                       url:"../order/order"                })            },1000)        }					}}async onShow(){       let isLogin = await checkToken(this)    if(isLogin){           this.cartList()        this.baseUrl = this.$config.baseUrl    }else{           uni.switchTab({               url:"../cart/cart"        })    }}

2）我的订单页面

接口：

// 16.订单查询 const _orderGet = (header,data)=>{   	let option={   		url:"/api/orders",		header,		data	}	return http(option)}export default {   	_getFirstCate,_getBanner,_getSeckill,_getIndexGoods,_search,_getCates,	_getCateGoodPage,_getGoodsInfo,_getSms,_login,_checkToken,_cartAdd,_cartList,	_cartEdit,_cartDelete,_orderAdd,_orderGet}

参数：

参数名	说明
uid	用户id,必填项
authorization	header头中需要添加token后台验证条件

代码：

export default {   		data() {   			return {   				orderList:[],				baseUrl:""			}		},		async onShow(){   			// 1.uid			let {   uid = null,token = null} = uni.getStorageSync('userInfo')						let header = {   authorization:token}			console.log(uid);			// 2.执行查询			let res = await this.$api._orderGet(header,{   uid})						console.log(res);			this.orderList = res.data.list						this.baseUrl = this.$config.baseUrl					},			methods: {   					},			}

三、多端运行

功能分析

1.h52.微信小程序	1.小程序开发工具的安装目录,设置--安全--服务端口	2.报错，修改appid	3.支付宝小程序	功能一致，样式上需要单独调整

四、多端发行

属于上线的环节

接口线上地址：	修改config文件	baseUrl = "https://uapi.xqb.ink"

1.H5发布

1.manifest 下配置基础路径 /h5/2.发行--网站--配置网站标题，域名-发行

2.微信小程序

1.去后台设置合法域名2.检查项目，代码大小3.上传，去体验版测试 真实appid4.点击审核，审核通过上线

3.app（android）

0.manifet 配置app的图标 ，可以选择自动生成多个图标适配	权限--不要通讯录权限（会打包失败）1.发行-云打包app2.ios不要勾选3.获取证书	Android平台打包发布apk应用，需要使用数字证书（.keystore文件）进行签名，用于表明开发者身份。	https://ask.dcloud.net.cn/article/35777		java环境     ---c:prgram-java-jdk-bin	-----keytool 所在目录下执行指令：        keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore	密码看不见 填写完 回车即可		填写一下别名，秘钥，选择证书文件	发行

转载地址：http://qase.baihongyu.com/