【学习打卡】第8天 Java支付全家桶 企业级各类支付手段一站式解决方案(4-1 )
2022/8/14 4:22:49
本文主要是介绍【学习打卡】第8天 Java支付全家桶 企业级各类支付手段一站式解决方案(4-1 ),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:Java支付全家桶 企业级各类支付手段一站式解决方案
课程章节:4-1 创建小程序订单页面
主讲老师:神思者
课程内容:
今天学习的内容包括:
创建小程序订单页面、UNI-APP 配置开发页面、UNI-APP页面的跳转、订单页面的设计(flex布局)、如何解决按钮和文字不对齐的问题、改变按钮颜色。
课程收获:
1、UNI-APP 配置开发页面,创建 index、cat 和 order 页面,并配置到 page.json 文件处,关键配置代码示例如下:
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path":"pages/login/login" } ,{ "path" : "pages/index/index", "style" : {} } ,{ "path" : "pages/cart/cart", "style" : {} } ,{ "path" : "pages/order/order", "style" : {} } ], "tabBar":{ "color":"#707070", "selectedColor":"#1296DB", "list":[ { "pagePath":"pages/index/index", "text":"首页", "iconPath":"static/icon_index_1.png", "selectedIconPath":"static/icon_index_2.png" }, { "pagePath":"pages/cart/cart", "text":"购物车", "iconPath":"static/icon_cart_1.png", "selectedIconPath":"static/icon_cart_2.png" }, { "pagePath":"pages/order/order", "text":"订单", "iconPath":"static/icon_order_1.png", "selectedIconPath":"static/icon_order_2.png" } ] },
2、UNI-APP页面的跳转,登录成功后,可以通过uni.switchTab方法触发UNI-APP页面的跳转,其中url放置的就是需要跳转的目标,关键代码示例如下:
uni.switchTab({ url: "../index/index" })
3、订单页面的设计,先编写标签骨架(template标签内),在逐步调整写样式(style标签内),需要掌握 flex 布局,关键代码示例如下:
<template> <view class="page"> <view class="order" v-for="one in list" :key="one"> <view class="line-1"> <text>订单号:{{one.code}}</text> <text>{{one.status}}</text> </view> <view class="line-2"> <text>假设这里是商品简要信息</text> </view> <view class="line-3"> <text>金额:{{one.amount}}元</text> <button class="pay-btn" type="primary" v-if="one.status=='未付款'" @tap="pay(one.id)">付款</button> </view> </view> </view> </template> <style> .page { padding: 10px; } .order { padding: 10px; border-bottom: solid 1px #e0e0e0; font-size: 16px; } .line-1 { display: flex; justify-content: space-between; padding-bottom: 5px; } .line-2 { padding-bottom: 5px; } .line-3 { display: flex; justify-content: space-between; align-items: baseline; } .pay-btn { margin: 0; font-size: 14px; min-width: 80px; line-height: 35px; height: 35px; border: none; } </style>
4、解决按钮和文字不对齐的问题,原因:按钮和文件的高度不一致造成了按钮和文字不对齐的问题。
解决办法:改为按水平居中的中轴线对其的方式,调整 flex 布局,添加 align-items: baseline; 即可。关键代码示例如下:
.line-3 { display: flex; justify-content: space-between; align-items: baseline; }
5、改变按钮颜色,最直接的改变 type 的属性即可,关键代码示例如下:
<button class="pay-btn" type="primary" v-if="one.status=='未付款'" @tap="pay(one.id)">付款</button>
今天看课程视频写手记的第8天,希望自己能坚持下去,为自己加油!
这篇关于【学习打卡】第8天 Java支付全家桶 企业级各类支付手段一站式解决方案(4-1 )的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署
- 2024-04-14RAG应用开发实战02-相似性检索的关键 - Embedding
- 2024-04-14出海软件草根逆袭打法是什么?
- 2024-04-13鸿蒙原生应用再新丁!企查查 碧蓝航线 入局鸿蒙
- 2024-04-11RAG应用开发实战(01)-RAG应用框架和解析器
- 2024-04-10DevOps已死?2024年的DevOps将如何发展
- 2024-04-10码农必看:常见源代码混淆技术详解
- 2024-04-07以一当十丨TiDB 在东吴证券秀财 APP 的应用实践
- 2024-04-07月活超 1.1 亿,用户超 4 亿,你也在用的「知乎」是如何在超大规模 TiDB 集群上玩转多云多活的?来听听知乎代晓磊的答案!