hookehuyr

style(CheckoutPage): 优化表单标签样式和文案一致性

将表单中的必填项标签的星号改为红色,并统一将“购物车”文案改为“课程”以提高一致性
1 <template> 1 <template>
2 - <AppLayout :title="orderComplete ? '支付成功' : '结账'" :show-back-button="!orderComplete" :hide-bottom-nav="true" @back-click="router.back()"> 2 + <AppLayout :title="orderComplete ? '支付成功' : '结账'" :hide-bottom-nav="true" @back-click="router.back()">
3 <div v-if="cartItems.length === 0 && !orderComplete" class="h-screen flex flex-col items-center justify-center px-4"> 3 <div v-if="cartItems.length === 0 && !orderComplete" class="h-screen flex flex-col items-center justify-center px-4">
4 <FrostedGlass class="p-6 rounded-xl text-center"> 4 <FrostedGlass class="p-6 rounded-xl text-center">
5 <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 5 <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
102 102
103 <div class="space-y-3"> 103 <div class="space-y-3">
104 <div> 104 <div>
105 - <label class="block text-sm text-gray-600 mb-1">姓名 *</label> 105 + <label class="block text-sm text-gray-600 mb-1">姓名 <span class="text-red-500">*</span></label>
106 <input 106 <input
107 v-model="formData.name" 107 v-model="formData.name"
108 type="text" 108 type="text"
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
113 </div> 113 </div>
114 114
115 <div> 115 <div>
116 - <label class="block text-sm text-gray-600 mb-1">手机号码 *</label> 116 + <label class="block text-sm text-gray-600 mb-1">手机号码 <span class="text-red-500">*</span></label>
117 <input 117 <input
118 v-model="formData.phone" 118 v-model="formData.phone"
119 type="tel" 119 type="tel"
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
134 </div> 134 </div>
135 135
136 <div> 136 <div>
137 - <label class="block text-sm text-gray-600 mb-1">联系地址 *</label> 137 + <label class="block text-sm text-gray-600 mb-1">联系地址 <span class="text-red-500">*</span></label>
138 <input 138 <input
139 v-model="formData.address" 139 v-model="formData.address"
140 type="text" 140 type="text"
...@@ -222,7 +222,7 @@ ...@@ -222,7 +222,7 @@
222 }" 222 }"
223 class="text-sm text-red-500" 223 class="text-sm text-red-500"
224 > 224 >
225 - 清空购物车 225 + 清空课程
226 </button> 226 </button>
227 </div> 227 </div>
228 <button 228 <button
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
247 <ConfirmDialog 247 <ConfirmDialog
248 v-model:show="showConfirmDialog" 248 v-model:show="showConfirmDialog"
249 title="确认删除" 249 title="确认删除"
250 - :message="itemToDelete ? `确定要删除 ${itemToDelete.title || '此商品'} 吗?` : '确定要清空购物车吗?'" 250 + :message="itemToDelete ? `确定要删除 ${itemToDelete.title || '此商品'} 吗?` : '确定要清空课程吗?'"
251 @confirm="() => { 251 @confirm="() => {
252 if (itemToDelete) { 252 if (itemToDelete) {
253 if (cartItems.length === 1) { 253 if (cartItems.length === 1) {
......