Browse Source

refactor(components): 重构优惠券组件样式和结构

- 更新 CouponCard 组件样式,优化主题颜色和布局
- 调整 CouponList 组件样式,使用原生样式替代自定义样式
- 修改 orderConfirm 页面中的地址栏样式
- 更新 QuantitySelector 组件样式,统一数量选择器样式
- 删除 Questions 组件代码
master
科技小王子 2 weeks ago
parent
commit
6f76be4da4
  1. 329
      src/components/CouponCard.scss
  2. 49
      src/components/CouponCard.tsx
  3. 21
      src/components/CouponList.tsx
  4. 3
      src/components/QuantitySelector.scss
  5. 8
      src/components/QuantitySelector.tsx
  6. 42
      src/components/Questions.tsx
  7. 2
      src/shop/orderConfirm/index.scss
  8. 63
      src/shop/orderConfirm/index.tsx
  9. 2
      src/utils/payment.ts

329
src/components/CouponCard.scss

@ -6,193 +6,173 @@
margin-bottom: 12px; margin-bottom: 12px;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: #fff; background: #fff;
&--disabled {
&.disabled {
opacity: 0.6; opacity: 0.6;
} }
// 主题颜色
&--red {
.coupon-card__left {
background: linear-gradient(135deg, #ff6b6b, #ff5252);
}
.coupon-card__btn--receive,
.coupon-card__btn--use {
background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: #fff;
}
}
&--orange {
.coupon-card__left {
background: linear-gradient(135deg, #ffa726, #ff9800);
}
.coupon-card__btn--receive,
.coupon-card__btn--use {
background: linear-gradient(135deg, #ffa726, #ff9800);
color: #fff;
}
}
&--blue {
.coupon-card__left {
background: linear-gradient(135deg, #42a5f5, #2196f3);
}
.coupon-card__btn--receive,
.coupon-card__btn--use {
background: linear-gradient(135deg, #42a5f5, #2196f3);
color: #fff;
}
}
&--purple {
.coupon-card__left {
background: linear-gradient(135deg, #ab47bc, #9c27b0);
}
.coupon-card__btn--receive,
.coupon-card__btn--use {
background: linear-gradient(135deg, #ab47bc, #9c27b0);
color: #fff;
}
}
&--green {
.coupon-card__left {
background: linear-gradient(135deg, #66bb6a, #4caf50);
}
.coupon-card__btn--receive,
.coupon-card__btn--use {
background: linear-gradient(135deg, #66bb6a, #4caf50);
color: #fff;
}
}
// 左侧金额区域
&__left {
flex: 0 0 100px;
.coupon-left {
flex-shrink: 0;
width: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
position: relative; position: relative;
}
&__amount {
display: flex;
align-items: baseline;
margin-bottom: 4px;
}
&.theme-red {
background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}
&__currency {
font-size: 14px;
font-weight: 500;
margin-right: 1px;
}
&.theme-orange {
background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}
&__value {
font-size: 28px;
font-weight: bold;
line-height: 1;
}
&.theme-blue {
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}
&__condition {
font-size: 11px;
opacity: 0.9;
margin-top: 2px;
}
&.theme-purple {
background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}
// 分割线区域
&__divider {
flex: 0 0 2px;
position: relative;
background: #f0f0f0;
}
&.theme-green {
background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}
&__divider-line {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 4px,
#ddd 4px,
#ddd 8px
);
.amount-wrapper {
display: flex;
align-items: baseline;
margin-bottom: 4px;
.currency {
font-size: 14px;
font-weight: 500;
margin-right: 2px;
}
.amount {
font-size: 30px;
font-weight: bold;
line-height: 1;
}
}
.condition {
font-size: 12px;
opacity: 0.9;
margin-top: 2px;
}
} }
&__circle {
position: absolute;
width: 16px;
height: 16px;
.coupon-divider {
flex-shrink: 0;
width: 2px;
position: relative;
background: #f5f5f5; background: #f5f5f5;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
&--top {
.divider-line {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 4px,
#ddd 4px,
#ddd 8px
);
}
.divider-circle-top {
position: absolute;
width: 16px;
height: 16px;
background: #f5f5f5;
border-radius: 50%;
top: -8px; top: -8px;
left: -7px;
} }
&--bottom {
.divider-circle-bottom {
position: absolute;
width: 16px;
height: 16px;
background: #f5f5f5;
border-radius: 50%;
bottom: -8px; bottom: -8px;
left: -7px;
} }
} }
// 右侧信息区域
&__right {
.coupon-right {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: 12px; padding: 12px;
}
&__info {
flex: 1;
}
.coupon-info {
flex: 1;
&__title {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
&__validity {
font-size: 11px;
color: #999;
}
.coupon-title {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin-bottom: 4px;
}
&__action {
display: flex;
justify-content: flex-end;
align-items: center;
}
&__btn {
min-width: 50px;
height: 24px;
border-radius: 12px;
font-size: 11px;
border: none;
&--receive,
&--use {
color: #fff;
.coupon-validity {
font-size: 12px;
color: #6b7280;
}
} }
}
&__status {
font-size: 12px;
color: #999;
padding: 4px 8px;
.coupon-actions {
display: flex;
justify-content: flex-end;
align-items: center;
.coupon-btn {
min-width: 48px;
height: 24px;
border-radius: 12px;
font-size: 12px;
border: none;
color: #fff;
&.theme-red {
background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}
&.theme-orange {
background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}
&.theme-blue {
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}
&.theme-purple {
background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}
&.theme-green {
background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}
}
.status-text {
font-size: 12px;
color: #6b7280;
padding: 4px 8px;
}
}
} }
// 状态遮罩
&__mask {
.status-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -202,52 +182,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1;
}
&__mask-text {
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 4px 12px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
}
}
// 优惠券列表容器
.coupon-list {
padding: 16px;
&__title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 16px;
}
z-index: 10;
&__empty {
text-align: center;
padding: 40px 20px;
color: #999;
font-size: 14px;
}
}
// 优惠券横向滚动容器
.coupon-scroll {
display: flex;
padding: 16px;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
.coupon-card {
flex: 0 0 240px;
margin-bottom: 0;
.status-badge {
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 4px 12px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
}
} }
} }

49
src/components/CouponCard.tsx

@ -44,7 +44,12 @@ const CouponCard: React.FC<CouponCardProps> = ({
onUse, onUse,
theme = 'red' theme = 'red'
}) => { }) => {
// 获取主题颜色类名
const getThemeClass = () => {
return `theme-${theme}`
}
// 格式化优惠券金额显示 // 格式化优惠券金额显示
// @ts-ignore
const formatAmount = () => { const formatAmount = () => {
switch (type) { switch (type) {
case 1: // 满减券 case 1: // 满减券
@ -96,42 +101,44 @@ const CouponCard: React.FC<CouponCardProps> = ({
return '' return ''
} }
const themeClass = getThemeClass()
return ( return (
<View className={`coupon-card coupon-card--${theme} ${status !== 0 ? 'coupon-card--disabled' : ''}`}>
<View className={`coupon-card ${status !== 0 ? 'disabled' : ''}`}>
{/* 左侧金额区域 */} {/* 左侧金额区域 */}
<View className="coupon-card__left">
<View className="coupon-card__amount">
<Text className="coupon-card__currency">¥</Text>
<Text className="coupon-card__value">{amount}</Text>
<View className={`coupon-left ${themeClass}`}>
<View className="amount-wrapper">
<Text className="currency">¥</Text>
<Text className="amount">{amount}</Text>
</View> </View>
<View className="coupon-card__condition">
<View className="condition">
{getConditionText()} {getConditionText()}
</View> </View>
</View> </View>
{/* 中间分割线 */} {/* 中间分割线 */}
<View className="coupon-card__divider">
<View className="coupon-card__divider-line"></View>
<View className="coupon-card__circle coupon-card__circle--top"></View>
<View className="coupon-card__circle coupon-card__circle--bottom"></View>
<View className="coupon-divider">
<View className="divider-line"></View>
<View className="divider-circle-top"></View>
<View className="divider-circle-bottom"></View>
</View> </View>
{/* 右侧信息区域 */} {/* 右侧信息区域 */}
<View className="coupon-card__right">
<View className="coupon-card__info">
<View className="coupon-card__title">
<View className="coupon-right">
<View className="coupon-info">
<View className="coupon-title">
{title || (type === 1 ? '满减券' : type === 2 ? '折扣券' : '免费券')} {title || (type === 1 ? '满减券' : type === 2 ? '折扣券' : '免费券')}
</View> </View>
<View className="coupon-card__validity">
<View className="coupon-validity">
{getValidityText()} {getValidityText()}
</View> </View>
</View> </View>
{/* 按钮区域 */} {/* 按钮区域 */}
<View className="coupon-card__action">
<View className="coupon-actions">
{showReceiveBtn && status === 0 && ( {showReceiveBtn && status === 0 && (
<Button <Button
className="coupon-card__btn coupon-card__btn--receive"
className={`coupon-btn ${themeClass}`}
size="small" size="small"
onClick={onReceive} onClick={onReceive}
> >
@ -140,7 +147,7 @@ const CouponCard: React.FC<CouponCardProps> = ({
)} )}
{showUseBtn && status === 0 && ( {showUseBtn && status === 0 && (
<Button <Button
className="coupon-card__btn coupon-card__btn--use"
className={`coupon-btn ${themeClass}`}
size="small" size="small"
onClick={onUse} onClick={onUse}
> >
@ -148,7 +155,7 @@ const CouponCard: React.FC<CouponCardProps> = ({
</Button> </Button>
)} )}
{status !== 0 && ( {status !== 0 && (
<View className="coupon-card__status">
<View className="status-text">
{getStatusText()} {getStatusText()}
</View> </View>
)} )}
@ -157,8 +164,10 @@ const CouponCard: React.FC<CouponCardProps> = ({
{/* 状态遮罩 */} {/* 状态遮罩 */}
{status !== 0 && ( {status !== 0 && (
<View className="coupon-card__mask">
<Text className="coupon-card__mask-text">{getStatusText()}</Text>
<View className="status-overlay">
<Text className="status-badge">
{getStatusText()}
</Text>
</View> </View>
)} )}
</View> </View>

21
src/components/CouponList.tsx

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import { View, ScrollView } from '@tarojs/components' import { View, ScrollView } from '@tarojs/components'
import CouponCard, { CouponCardProps } from './CouponCard' import CouponCard, { CouponCardProps } from './CouponCard'
import './CouponCard.scss'
export interface CouponListProps { export interface CouponListProps {
/** 优惠券列表数据 */ /** 优惠券列表数据 */
@ -33,14 +32,14 @@ const CouponList: React.FC<CouponListProps> = ({
// 垂直布局 // 垂直布局
if (layout === 'vertical') { if (layout === 'vertical') {
return ( return (
<View className="coupon-list">
<View className="p-4">
{title && ( {title && (
<View className="coupon-list__title">{title}</View>
<View className="text-lg font-semibold text-gray-800 mb-4">{title}</View>
)} )}
{coupons.length === 0 ? ( {coupons.length === 0 ? (
showEmpty && ( showEmpty && (
<View className="coupon-list__empty">
<View className="text-center py-10 px-5 text-gray-500 text-sm">
{emptyText} {emptyText}
</View> </View>
) )
@ -62,26 +61,30 @@ const CouponList: React.FC<CouponListProps> = ({
return ( return (
<View> <View>
{title && ( {title && (
<View className="coupon-list__title" style={{ paddingLeft: '16px' }}>
<View className="text-lg font-semibold text-gray-800 mb-4 pl-4">
{title} {title}
</View> </View>
)} )}
{coupons.length === 0 ? ( {coupons.length === 0 ? (
showEmpty && ( showEmpty && (
<View className="coupon-list__empty">
<View className="text-center py-10 px-5 text-gray-500 text-sm">
{emptyText} {emptyText}
</View> </View>
) )
) : ( ) : (
<ScrollView <ScrollView
scrollX scrollX
className="coupon-scroll"
className="flex p-4 gap-2 overflow-x-auto"
showScrollbar={false} showScrollbar={false}
style={{
WebkitOverflowScrolling: 'touch'
}}
> >
{coupons.map((coupon, index) => ( {coupons.map((coupon, index) => (
<View <View
key={index} key={index}
className="flex-shrink-0 w-60 mb-0"
onClick={() => handleCouponClick(coupon, index)} onClick={() => handleCouponClick(coupon, index)}
> >
<CouponCard {...coupon} /> <CouponCard {...coupon} />

3
src/components/QuantitySelector.scss

@ -21,7 +21,7 @@
background: #f8f8f8; background: #f8f8f8;
color: #666; color: #666;
transition: all 0.2s ease; transition: all 0.2s ease;
&:active { &:active {
background: #e5e5e5; background: #e5e5e5;
} }
@ -54,7 +54,6 @@
} }
&__stock-text { &__stock-text {
font-size: 12px;
color: #999; color: #999;
} }

8
src/components/QuantitySelector.tsx

@ -59,11 +59,11 @@ const QuantitySelector: React.FC<QuantitySelectorProps> = ({
> >
<Minus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} /> <Minus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
</Button> </Button>
<View className="quantity-selector__input"> <View className="quantity-selector__input">
<Text className="quantity-selector__value">{value}</Text> <Text className="quantity-selector__value">{value}</Text>
</View> </View>
<Button <Button
className={`quantity-selector__btn quantity-selector__btn--plus ${!canIncrease ? 'quantity-selector__btn--disabled' : ''}`} className={`quantity-selector__btn quantity-selector__btn--plus ${!canIncrease ? 'quantity-selector__btn--disabled' : ''}`}
size="small" size="small"
@ -73,10 +73,10 @@ const QuantitySelector: React.FC<QuantitySelectorProps> = ({
<Plus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} /> <Plus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
</Button> </Button>
</View> </View>
{showStock && stock !== undefined && ( {showStock && stock !== undefined && (
<View className="quantity-selector__stock"> <View className="quantity-selector__stock">
<Text className="quantity-selector__stock-text">
<Text className="text-sm">
{stock} {stock}
</Text> </Text>
</View> </View>

42
src/components/Questions.tsx

@ -1,42 +0,0 @@
import {useEffect, useState} from "react";
import {pageHjmQuestions} from "@/api/hjm/hjmQuestions";
import {HjmQuestions} from "@/api/hjm/hjmQuestions/model";
/**
*
* @constructor
*/
const Questions = () => {
const [list, setList] = useState<HjmQuestions[]>([])
const reload = () => {
pageHjmQuestions({}).then(res => {
if (res?.list) {
setList(res?.list)
}
})
}
useEffect(() => {
reload()
}, [])
return (
<div className={'px-3 mb-10'}>
<div className={'flex flex-col justify-between items-center bg-white rounded-lg p-4'}>
<div className={'bg-white w-full'}>
{
list.map((item, index) => {
return (
<div key={index} className={'flex justify-between items-center py-2'}>
<div className={'text-sm'}>{item.question}</div>
</div>
)
})
}
</div>
</div>
</div>
)
}
export default Questions

2
src/shop/orderConfirm/index.scss

@ -41,7 +41,7 @@
} }
.address-bottom-line{ .address-bottom-line{
width: 100%; width: 100%;
border-radius: 24rpx 24rpx 0 0;
border-radius: 12rpx 12rpx 0 0;
background: #fff; background: #fff;
padding: 26rpx 49rpx 0 34rpx; padding: 26rpx 49rpx 0 34rpx;
position: relative; position: relative;

63
src/shop/orderConfirm/index.tsx

@ -8,7 +8,6 @@ import {
Space, Space,
ActionSheet, ActionSheet,
Popup, Popup,
Toast,
InputNumber, InputNumber,
ConfigProvider ConfigProvider
} from '@nutui/nutui-react-taro' } from '@nutui/nutui-react-taro'
@ -143,19 +142,28 @@ const OrderConfirm = () => {
// 检查是否满足使用条件 // 检查是否满足使用条件
if (coupon.minAmount && total < coupon.minAmount) { if (coupon.minAmount && total < coupon.minAmount) {
Toast.show(`需满${coupon.minAmount}元才能使用此优惠券`)
Taro.showToast({
title: `需满${coupon.minAmount}元才能使用此优惠券`,
icon: 'none'
})
return return
} }
setSelectedCoupon(coupon) setSelectedCoupon(coupon)
setCouponVisible(false) setCouponVisible(false)
Toast.show('优惠券选择成功')
Taro.showToast({
title: '优惠券选择成功',
icon: 'success'
})
} }
// 取消选择优惠券 // 取消选择优惠券
const handleCouponCancel = () => { const handleCouponCancel = () => {
setSelectedCoupon(null) setSelectedCoupon(null)
Toast.show('已取消使用优惠券')
Taro.showToast({
title: '已取消使用优惠券',
icon: 'success'
})
} }
/** /**
@ -167,18 +175,27 @@ const OrderConfirm = () => {
// 基础校验 // 基础校验
if (!address) { if (!address) {
Toast.show('请选择收货地址')
Taro.showToast({
title: '请选择收货地址',
icon: 'error'
})
return; return;
} }
if (!payment) { if (!payment) {
Toast.show('请选择支付方式')
Taro.showToast({
title: '请选择支付方式',
icon: 'error'
})
return; return;
} }
// 库存校验 // 库存校验
if (goods.stock !== undefined && quantity > goods.stock) { if (goods.stock !== undefined && quantity > goods.stock) {
Toast.show('商品库存不足')
Taro.showToast({
title: '商品库存不足',
icon: 'error'
})
return; return;
} }
@ -191,8 +208,7 @@ const OrderConfirm = () => {
comments: goods.name, comments: goods.name,
deliveryType: 0, deliveryType: 0,
buyerRemarks: orderRemark, buyerRemarks: orderRemark,
couponId: selectedCoupon ? selectedCoupon.amount : undefined,
couponDiscount: getCouponDiscount()
couponId: selectedCoupon ? selectedCoupon.amount : undefined
} }
); );
@ -202,10 +218,16 @@ const OrderConfirm = () => {
// 执行支付 // 执行支付
await PaymentHandler.pay(orderData, paymentType); await PaymentHandler.pay(orderData, paymentType);
Toast.show('支付成功')
Taro.showToast({
title: '支付成功',
icon: 'success'
})
} catch (error) { } catch (error) {
console.error('支付失败:', error) console.error('支付失败:', error)
Toast.show('支付失败,请重试')
Taro.showToast({
title: '支付失败,请重试',
icon: 'error'
})
} finally { } finally {
setPayLoading(false) setPayLoading(false)
} }
@ -217,17 +239,16 @@ const OrderConfirm = () => {
setLoading(true) setLoading(true)
setError('') setError('')
// 并行加载商品信息和其他数据
const promises = []
// 分别加载数据,避免类型推断问题
let goodsRes: ShopGoods | null = null
if (goodsId) { if (goodsId) {
promises.push(getShopGoods(Number(goodsId)))
goodsRes = await getShopGoods(Number(goodsId))
} }
promises.push(listShopUserAddress({isDefault: true}))
promises.push(selectPayment({}))
const [goodsRes, addressRes, paymentRes] = await Promise.all(promises)
const [addressRes, paymentRes] = await Promise.all([
listShopUserAddress({isDefault: true}),
selectPayment({})
])
// 设置商品信息 // 设置商品信息
if (goodsRes) { if (goodsRes) {
@ -424,7 +445,7 @@ const OrderConfirm = () => {
> >
<View className="coupon-popup"> <View className="coupon-popup">
<View className="coupon-popup__header"> <View className="coupon-popup__header">
<Text className="coupon-popup__title"></Text>
<Text className="text-sm"></Text>
<Button <Button
size="small" size="small"
fill="none" fill="none"
@ -460,7 +481,7 @@ const OrderConfirm = () => {
coupons={availableCoupons.filter(coupon => { coupons={availableCoupons.filter(coupon => {
const total = getGoodsTotal() const total = getGoodsTotal()
return coupon.minAmount && total < coupon.minAmount return coupon.minAmount && total < coupon.minAmount
}).map(coupon => ({...coupon, status: 2}))}
}).map(coupon => ({...coupon, status: 2 as const}))}
layout="vertical" layout="vertical"
showEmpty={false} showEmpty={false}
/> />

2
src/utils/payment.ts

@ -184,7 +184,7 @@ export function buildSingleGoodsOrder(
], ],
addressId, addressId,
payType: PaymentType.WECHAT, // 默认微信支付,会被PaymentHandler覆盖 payType: PaymentType.WECHAT, // 默认微信支付,会被PaymentHandler覆盖
comments: options?.comments || '',
comments: options?.buyerRemarks || options?.comments || '',
deliveryType: options?.deliveryType || 0, deliveryType: options?.deliveryType || 0,
couponId: options?.couponId, couponId: options?.couponId,
selfTakeMerchantId: options?.selfTakeMerchantId selfTakeMerchantId: options?.selfTakeMerchantId

Loading…
Cancel
Save