完善H5的页面

src/components/Pay.vue

@@ -0,0 +1,98 @@
+<template>
+    <view class="pay-radio">
+        <wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44" @change="Pay.handleChangePay">
+            <block v-for="(item, index) in PayList" :key="index">
+                <wd-radio :value="item.value">
+                    <view
+                        class="flex justify-between items-center"
+                        v-if="!(hidePlatformBalance && item.type === PayCategory.PlatformBalance) && !(hideStoreBalance && item.type === PayCategory.StoreBalance) && !(hideWechat && item.type === PayCategory.WeChatPay)"
+                    >
+                        <view class="flex items-center">
+                            <wd-img width="50rpx" height="50rpx" :src="`${OSS}${item.icon}`"></wd-img>
+                            <view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
+                        </view>
+                    </view>
+                    <view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type !== PayCategory.WeChatPay">可用202.22</view>
+                </wd-radio>
+            </block>
+        </wd-radio-group>
+    </view>
+</template>
+
+<script lang="ts" setup name="RechargeBtn">
+	/**
+	 * Pay 支付组件
+	 * @description 用于展示支付
+     */
+
+    import { PayList as OriginPayList, PayCategory, PayValue } from '@/utils/pay'
+
+	const OSS = inject('OSS')
+    const pay = ref<number>() // 支付方式
+
+    const props = defineProps({
+        // 是否隐藏平台余额支付
+        hidePlatformBalance: {
+            type: Boolean,
+            default: false
+        },
+
+        // 是否隐藏门店余额支付
+        hideStoreBalance: {
+            type: Boolean,
+            default: false
+        },
+
+        // 是否隐藏微信支付
+        hideWechat: {
+            type: Boolean,
+            default: false
+        }
+    })
+
+    // 定义emit事件
+    const emit = defineEmits(['pay'])
+    const Pay = {
+        // 支付方式改变
+        handleChangePay(e: {value: number}) {
+            emit('pay', e.value)
+        }
+    }
+
+    const PayList = computed(() => {
+        return OriginPayList.filter(item => {
+            if (props.hidePlatformBalance && item.type === PayCategory.PlatformBalance) return false
+            if (props.hideStoreBalance && item.type === PayCategory.StoreBalance) return false
+            if (props.hideWechat && item.type === PayCategory.WeChatPay) return false
+            return true
+        })
+    })
+
+    watch(PayList, (list) => {
+        if (list.length > 0) {
+            pay.value = list[0].value
+        } else {
+            pay.value = undefined
+        }
+        }, { immediate: true })
+        
+</script>
+
+<script lang="ts">
+    export default {}
+</script>
+
+<style lang="scss">
+    .pay-radio {
+        :deep() {
+            .wd-radio {
+                position: relative;
+                margin-bottom: 40rpx;
+            }
+            
+            .wd-radio:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+</style>

src/components/PriceFormat.vue

@@ -2,7 +2,7 @@
 	<text :style="{color, 'font-weight': weight}" :class="(lineThrough ? 'line-through' : '') + ' price-format'">
 		<text v-if="showSubscript" :style="{'font-size': subscriptSize + 'rpx', 'margin-right': '2rpx'}">¥</text>
 		<text :style="{'font-size': firstSize + 'rpx', 'margin-right': '1rpx'}">{{priceSlice.first}}</text>
-		<text v-if="priceSlice.second" :style="{'font-size': secondSize + 'rpx'}">.{{priceSlice.second}}</text>
+		<text v-if="priceSlice.second && showDecimal" :style="{'font-size': secondSize + 'rpx'}">.{{priceSlice.second}}</text>
 	</text>
 </template>
 
@@ -31,6 +31,10 @@
             type: [String, Number],
             default: 24
         },
+        showDecimal: {
+            type: Boolean,
+            default: true
+        },
         color: {
             type: String,
             default: '#E54444'

src/components/TeaSpecialistLevel.vue

@@ -0,0 +1,54 @@
+<template>
+    <view class="w-168rpx h-40rpx relative mr-44rpx">
+        <view class="absolute left-0 top-0 h-36rpx flex items-start">
+            <!-- 金牌茶艺师 -->
+            <wd-img :src="levelMap[level].icon" width="36rpx" height="36rpx"></wd-img> 
+        </view>
+        <view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">{{ levelMap[level].text }}</view>
+    </view>
+</template>
+
+<script lang="ts" setup name="TeaSpecialistLevel">
+	/**
+	 * TeaSpecialistLevel 茶艺师等级
+	 * @description 用于展示茶艺师等级
+     */
+
+	const OSS = inject('OSS')
+
+
+	defineProps({
+        level: {
+            type: String,
+            default: ''
+        }
+    })
+
+    // 茶艺师等级对应的icon和文字
+    const levelMap = {
+        gold: {
+            icon: `${OSS}icon/icon_gold_medal.png`,
+            text: '金牌茶艺师'
+        },
+        senior: {
+            icon: `${OSS}icon/icon_senior_medal.png`,
+            text: '高级茶艺师'
+        },
+        intermediate: {
+            icon: `${OSS}icon/icon_intermediate_medal.png`,
+            text: '中级茶艺师'
+        },
+        junior: {
+            icon: `${OSS}icon/icon_junior_medal.png`,
+            text: '初级茶艺师'
+        },
+        enthusiast: {
+            icon: `${OSS}icon/icon_enthusiast_medal.png`,
+            text: '茶艺爱好者'
+        }
+    }
+</script>
+
+<script lang="ts">
+    export default {}
+</script>