美化了样式
This commit is contained in:
@ -1,4 +1,6 @@
|
||||
import { baseUrl, globalImgUrl } from "../../../request";
|
||||
const { notLogin } = require('../../../utils/util')
|
||||
|
||||
// pages/course/createCourseOrder/createCourseOrder.js
|
||||
Page({
|
||||
|
||||
@ -131,6 +133,8 @@ Page({
|
||||
this.setData({
|
||||
courseObj: res.data.data,
|
||||
})
|
||||
} else {
|
||||
notLogin(res.data.message)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,48 +1,53 @@
|
||||
<!-- pages/course/createCourseOrder/createCourseOrder.wxml -->
|
||||
<view class="flex-col page">
|
||||
<view class="flex-col content">
|
||||
<view class="flex-row items-center section">
|
||||
<view class="page">
|
||||
|
||||
<!-- 可滚动内容区：为固定底部预留内边距，避免遮挡 -->
|
||||
<scroll-view scroll-y class="content no-scrollbar">
|
||||
|
||||
<!-- 商品信息卡片 -->
|
||||
<view class="card product">
|
||||
<image
|
||||
class="shrink-0 image"
|
||||
class="cover"
|
||||
src="{{ globalImgUrl + courseObj.image }}"
|
||||
mode="aspectFill"
|
||||
lazy-load="true"
|
||||
/>
|
||||
<view class="flex-col flex-1 ml-11">
|
||||
<text class="self-start text">{{ courseObj.name }}</text>
|
||||
<view class="flex-row items-center self-stretch group mt-15">
|
||||
<text class="text_2">￥{{ courseObj.discountPrice }}</text>
|
||||
<view class="flex-col justify-start relative ml-1">
|
||||
<text class="text_3">￥{{ courseObj.originPrice }}</text>
|
||||
<view class="divider pos"></view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="title ellipsis-2">{{ courseObj.name }}</text>
|
||||
<view class="price-line">
|
||||
<text class="price-now">￥{{ courseObj.discountPrice }}</text>
|
||||
<text class="price-origin">￥{{ courseObj.originPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section_2 mt-14">
|
||||
<text class="font">商品价格</text>
|
||||
<text class="font text_4">￥{{ courseObj.discountPrice }}</text>
|
||||
|
||||
<!-- 商品价格行 -->
|
||||
<view class="card row">
|
||||
<text class="row-left">商品价格</text>
|
||||
<text class="row-right accent">￥{{ courseObj.discountPrice }}</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section_3 mt-14">
|
||||
<view class="flex-row items-center">
|
||||
<image
|
||||
class="shrink-0 image_2"
|
||||
src="./image/wxpay.png"
|
||||
/>
|
||||
<text class="font ml-12">微信支付</text>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="card pay">
|
||||
<view class="pay-left">
|
||||
<image class="pay-icon" src="./image/wxpay.png" mode="aspectFit" />
|
||||
<text class="pay-text">微信支付</text>
|
||||
</view>
|
||||
<radio-group class="image_3">
|
||||
<radio checked="true"></radio>
|
||||
<radio-group class="pay-right" bindchange="onPayMethodChange">
|
||||
<radio value="wxpay" checked></radio>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 固定在底部的区域 -->
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<!-- 固定底部结算栏 -->
|
||||
<view class="footer">
|
||||
<view class="flex-row justify-between items-center section_4">
|
||||
<text class="font text_5">应付￥{{ courseObj.discountPrice }}</text>
|
||||
<view class="flex-col justify-center items-center text-wrapper" bindtap="createOrder">
|
||||
<text class="font text_6">立即支付</text>
|
||||
</view>
|
||||
<view class="footer-inner">
|
||||
<text class="to-pay">应付 <text class="to-pay-amount">￥{{ courseObj.discountPrice }}</text></text>
|
||||
<view class="btn-pay" bindtap="createOrder">立即支付</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 遮罩 -->
|
||||
<view wx:if="{{isMaskVisible}}" class="page-mask"></view>
|
||||
</view>
|
||||
|
||||
@ -1,126 +1,205 @@
|
||||
.ml-11 {
|
||||
margin-left: 20.63rpx;
|
||||
}
|
||||
.mt-15 {
|
||||
margin-top: 28.13rpx;
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: 1.88rpx;
|
||||
}
|
||||
/* app.wxss 或 当前页面 .wxss */
|
||||
.page-mask {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 9999;
|
||||
}
|
||||
/* 页面与滚动容器 */
|
||||
.page {
|
||||
background-color: #f7f7f7;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.section {
|
||||
padding: 20.63rpx 22.5rpx 27.58rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 3.94rpx;
|
||||
}
|
||||
.image {
|
||||
border-radius: 9.38rpx;
|
||||
width: 208.13rpx;
|
||||
height: 133.13rpx;
|
||||
}
|
||||
.text {
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 35.63rpx;
|
||||
width: 429.38rpx;
|
||||
}
|
||||
.group {
|
||||
padding: 0 4.29rpx;
|
||||
}
|
||||
.text_2 {
|
||||
color: #f84947;
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 22.76rpx;
|
||||
}
|
||||
.text_3 {
|
||||
color: #8c8c8c;
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 19.93rpx;
|
||||
}
|
||||
.divider {
|
||||
background-color: #8c8c8c;
|
||||
width: 69.56rpx;
|
||||
height: 1.88rpx;
|
||||
}
|
||||
.pos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.section_2 {
|
||||
padding: 48.69rpx 29.21rpx 43.35rpx 44.96rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.font {
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 27.96rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_4 {
|
||||
line-height: 22.91rpx;
|
||||
}
|
||||
.section_3 {
|
||||
padding: 39.38rpx 46.88rpx 897.38rpx 48.75rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.image_2 {
|
||||
width: 52.5rpx;
|
||||
height: 52.5rpx;
|
||||
}
|
||||
.image_3 {
|
||||
width: 41.25rpx;
|
||||
height: 41.25rpx;
|
||||
}
|
||||
.section_4 {
|
||||
padding: 16.88rpx 24.38rpx 16.88rpx 31.09rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.text_5 {
|
||||
color: #000000;
|
||||
line-height: 28.05rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 14.07rpx 0 19.07rpx;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 75rpx;
|
||||
width: 268.13rpx;
|
||||
height: 71.25rpx;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
padding: 24rpx 24rpx 160rpx; /* bottom 预留给固定底部栏 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.text_6 {
|
||||
color: #ffffff;
|
||||
line-height: 28.11rpx;
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 通用卡片 */
|
||||
.card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.card + .card {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 商品信息卡片 */
|
||||
.product {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 260rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-width: 0; /* 使多行省略生效 */
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1f1f1f;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.ellipsis-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.price-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.price-now {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #ff5a1a; /* 与主题橙统一 */
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.price-origin {
|
||||
font-size: 26rpx;
|
||||
color: #9f9f9f;
|
||||
text-decoration: line-through; /* 用样式处理中划线 */
|
||||
}
|
||||
|
||||
/* 通用行（键值对） */
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.row-left {
|
||||
font-size: 30rpx;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.row-right {
|
||||
font-size: 30rpx;
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: #ff5a1a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 支付方式 */
|
||||
.pay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pay-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.pay-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.pay-text {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.pay-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 固定底部 */
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -6rpx 20rpx rgba(0,0,0,0.06);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
/* 兼容旧版 iOS */
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.to-pay {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.to-pay-amount {
|
||||
font-size: 36rpx;
|
||||
color: #ff5a1a;
|
||||
font-weight: 700;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
/* 支付按钮：使用 view，自定义橙色主题 */
|
||||
.btn-pay {
|
||||
min-width: 260rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(180deg, #ffa64a 0%, #ff8d1a 100%);
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 6rpx 14rpx rgba(255, 141, 26, 0.35);
|
||||
active-opacity: 0.85;
|
||||
}
|
||||
|
||||
/* 遮罩层 */
|
||||
.page-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* 旧样式中可能用到的零散类，若无依赖可移除 */
|
||||
.ml-11 { margin-left: 20rpx; }
|
||||
.mt-15 { margin-top: 28rpx; }
|
||||
.ml-1 { margin-left: 2rpx; }
|
||||
|
||||
Reference in New Issue
Block a user