一、购物车列表
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.h5
2.微信小程序
1.小程序开发工具的安装目录,设置--安全--服务端口
2.报错,修改appid
3.支付宝小程序
功能一致,样式上需要单独调整
四、多端发行
属于上线的环节
接口线上地址:
修改config文件
baseUrl = "https://uapi.xqb.ink"
1.H5发布
1.manifest 下配置基础路径 /h5/
2.发行--网站--配置网站标题,域名-发行
2.微信小程序
1.去后台设置合法域名
2.检查项目,代码大小
3.上传,去体验版测试 真实appid
4.点击审核,审核通过上线
3.app(android)
0.manifet 配置app的图标 ,可以选择自动生成多个图标适配
权限--不要通讯录权限(会打包失败)
1.发行-云打包app
2.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
密码看不见 填写完 回车即可
填写一下别名,秘钥,选择证书文件
发行