购物车列表、提交订单、多端运行、多端发行

最新推荐文章于 2022-06-12 20:48:51 发布

琴～～

最新推荐文章于 2022-06-12 20:48:51 发布

阅读量716

点赞数

分类专栏：笔记文章标签： uni-app

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/116377215

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、购物车列表

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
	密码看不见 填写完 回车即可
	
	填写一下别名，秘钥，选择证书文件
	发行