一、页面实现(三)
1、结算界面
1、效果图
2、功能实现
这里涉及到支付,需要企业账号,所以很多地方实现不了
有兴趣的可以参考 微信支付开发步骤
/**
* 1、 页面加载
* 从缓存中获取购物车数据,渲染到页面页面中
* 2、微信支付
* 1、那些人 那些账号 可以实现微信支付
* 1、企业账号
* 2、企业账号的小程序后天,必须给开发者添加白名单
* 1、一个appid 可以绑定多个开发者
* 2、这些开发者就可以公用这个appid和它的开发权限
* 3、支付按钮
* 1、先判断缓存中有没有token
* 2、没有 跳转到授权页面,获取权限
* 3、有token。。
* 4、创建订单 获取订单编号 order_number
* 5、已经完成支付
* 6、手动删除缓存中 已经被选中的商品
* 7、把数据重新返回去。
*/
一下三步是支付的重点:具体详情: 微信支付开发步骤
// 4、准备发送请求,获取订单编号
const {order_number} = await request({ulr:"/my/orders/create",data:goods});
// 5、发起 预支付接口
const {pay} = await request({usr:“my/orders/req_unifiedorder”,method:“post”,data:{order_number}});
// 6、发起微信支付
await requestPayment(pay);
// 点击支付,这里需要企业账号
async handleOrderPay(){
try {
// 1、判断缓冲中有没有token
const token = wx.getStorageSync("token");
// 2、 判断
if (!token) {
wx.navigateTo({
url: '/pages/auth/index'
});
return;
}
// 3、创建订单
// 3.1 准备 请求头参数,这里已经封装到了reqeust请求方法中
// const header= {Authorization:token};
// 3.2 准备 请求头参数
const order_price = this.data.totalPrice;
const consignee_addr = this.data.address;
const cart = this.data.cart;
let goods = [];
cart.forEach(v=>goods.push({
goods_id:v.goods_id,
goods_number:v.num,
goods_price:v.goods_price
}));
// 4、准备发送请求,获取订单编号
const {order_number} = await request({ulr:"/my/orders/create",data:goods});
// 5、发起 预支付接口
const {pay} = await request({usr:"my/orders/req_unifiedorder",method:"post",data:{order_number}});
// 6、发起微信支付
await requestPayment(pay);
// 7、查询后台,订单状态
const res = await request({url:"/my/orders/chkOrder",method:"post",data:{order_number}});
await showToast({title:"支付成功!"});
// 8、手动删除缓存中被选中已经支付的商品
let newCart = wx.getStorageSync("cart");
newCart = newCart.filter(v=>v.checked);
wx.setStorageSync("cart", newCart);
// 8、 支付成功,跳转到订单页面
wx.navigateTo({
url: '/pages/order/index'
});
} catch (error) {
await showToast({title:"支付失败!"});
console.log(res);
}
}
2、我的(个人中心)
1、效果图
2、功能实现
这个页面相对来说还是好实现的,前面我们已近做了那么多页面的效果,
1、主要样式集中使用:
position: relative; // 相对定位
poistion: absolute; // 绝对定位
display: flex; // 伸缩盒子,这个很有用
justify-content: space-between; // 两端分布,中间空白
align-items: center;
// 以下三个,结合绝对定位使用,就可以保证居中了
left: 50%;
transform: translateX(-50%);
top: -30rpx;
//
paddind: 10rpx;
color: var(--themeColor);
2、未登录状态
这里注意:
使用的是button按钮,里面
open-type属性:getuserInfo
type:属性
plain:镂空,背景透明,
bindgetuserinfo绑定事件:获取用户信息
只要注意这些就好了
3、订单查询
1、效果图
2、功能实现
/**
* 1、页面打开的时候 onShow
* 0 onShow 不同于onLoad 无法在形参上接收 options参数
* 判断缓冲中是否有token
* 如果没有,跳转授权页面
* 有、向下执行。
* 1 获取url上的参数
* 2 根据type 来决定哪个标题被激活选中
* 2 根据type 发送请求获取订单数据
*
* 3 渲染页面
* 2、点击不同的标题,发送不同的请求,获取数据,显渲染页面
*/
1、同样,标题栏使用自定义组件Tabs
2、这里有个特殊的地方需要讲解一下:
onShow():这个不能像onLoad(options)一样获取options参数,
但是我们可以通过小程序的页面栈,获取optoins参数。
// 1、 获取当前的小程序的页面栈-数组 长度最大是10页
let pages = getCurrentPages();
// 2、数组中 索引最大的页面就是当前页面
let currentPages = pages[pages.length-1];
const {type} = currentPages.options; // 这里是从options中解构出type
3、时间格式化
orders:res.data.message.orders.map(v=>({...v,create_time:new Date(v.create_time*1000).toLocaleString()})) // 时间格式化
4、反馈意见
1、效果图
2、功能实现
1、标题栏,依然使用的是自定义组件Tabs
2、反馈内容这里涉及到了上床图片的功能,使用了自定义组件UpImg
提交反馈意见
主要使用了一下函数:
**wx.showToast:**显示提示,页面穿透,防止操作。
wx.hideLoading():提示关闭。
**wx.uploadFile():**单图片上传。
handleFormSubmit(){
// 1、 获取文本域和图片的数组
let {textVal,chooseImgs} = this.data;
// 2、判断问题域是否合法
if(!textVal.trim()){
wx.showToast({
title: '输入不合法',
icon: 'none',
msak: true,
});
return;
}
wx.showLoading({
title: "正在上传",
mask: true
});
if(chooseImgs.length!=0){
chooseImgs.forEach((v,i)=>{
wx.uploadFile({
url: 'http://images.ac.cn/api/upload',
filePath: v,
name: "file",
formData: {},
success: (result) => {
let url = JSON.parse(result.data);
this.upLoadImgs.push(url);
if(i==chooseImgs.length-1){
this.setData({
textVal:"",
chooseImage:[]
})
wx.hideLoading();
wx.navigateBack({
delta: 1
});
}
},
});
})
}else{
wx.hideLoading();
wx.navigateBack({
delta: 1
});
}
}