uni-app加入购物车、创建订单以及支付流程

uni-app加入购物车流程

在 uni-app 中实现加入购物车的流程可以分为以下步骤：

1. 点击“加入购物车”按钮：当用户点击商品详情页的“加入购物车”按钮时，首先需要判断用户是否已登录。如果用户未登录，引导用户进行登录或注册。

2. 获取商品信息：如果用户已登录，获取当前加入购物车商品的信息，包括商品的 ID、名称、价格等。

3. 添加购物车数据：将获取到的商品信息添加到购物车数据中。购物车数据可以是一个数组或对象，用来存储已选中的商品信息。

4. 更新购物车数据：点击添加或删除时，更新购物车列表，更新商品总数以及总价。

	function buttonClick(e) {
		console.log(Detail.value.skuId);
		if (e.index == 0) {
			addCart({
				"buyNumber": 1,
				"skuId": Detail.value.skuId,
				"is_tc": false,
				"tyingItems": []
			}).then(res => {
				if(res.data){
					uni.showToast({
						title:"加入购物车成功"
					})
				}
			})
		}
	}

uni-app创建订单流程

在 uni-app 中实现创建订单的流程可以分为以下步骤：

1. 填写订单信息：在页面上展示订单信息表单，包括用户的收货地址、联系方式等。

2. 校验订单信息：在用户填写完订单信息后，需要对订单信息进行校验，确保信息完整且符合要求。可以使用表单验证库或手动编写校验逻辑。

3. 提交订单：当用户点击提交订单按钮时，通过网络请求向服务器发送订单数据，并等待服务器返回订单创建成功的响应。

4. 处理订单创建结果：根据订单创建的结果，在前端页面上展示相应的提示信息，如订单创建成功提示、订单创建失败提示等。

5. 完善订单功能：根据业务需求，添加订单支付或者其他功能。

	const flowInfo = ref({});
	// 检测流程获取流程信息
	CheckFlow()
		.then(res => {
			flowInfo.value = res.data;
			console.log(flowInfo.value);
		})

	function createOrder() {
		PlaceOrder({
			// ...
			})
			.then(res => {
				uni.navigateTo({
				// 跳转支付页面
					url: "/pages/pay/pay?orderno=" + res.data
				})
			})
	}

uni-app支付流程

在 uni-app 中实现支付流程可以分为以下步骤：

1. 首先判断选择的支付类型，以支付宝支付为例，向后端请求支付宝支付接口

export const Alipay = (data)=>request.post("https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay",data)

2. 请求成功后将数据解构出来
3. 通过条件编译进行小程序端和app端分端编译，也就是分端编写uni.requestPayment这个api需要传递的数据
4. 通过uni.requestPayment这个api来调起支付宝支付界面
5. 整个支付过程完成

 const alipay = () => {
 		Alipay({
 			platform: 'app-plus',
 			provider: 'alipay',
 			totalFee: 1
 		}).then(res => {
 			uni.requestPayment({
 				orderInfo: res.orderInfo,
 				provider: 'alipay',
 				success(res) {
 					uni.showToast({
 						title: '支付成功'
 					})
 				},
 				fail() {
 					uni.showToast({
 						title: '支付失败',
 						icon: 'none'
 					})
 				}
 			})
 		})
 	}