会员个人中心页面初步完成

2026-06-04 14:18:53 +08:00
parent 1fa2fbd3f3
commit a0026b1da5
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,85 @@
+<template>
+    <view class="coupon-section">
+        <view class="coupon-section__inner">
+            <view class="coupon-section__header">
+                <view class="coupon-section__header-inner">
+                    <text class="coupon-section__title">优惠券 & 积分</text>
+                    <view
+                        class="coupon-section__link"
+                        hover-class="mi-tap--hover"
+                        :hover-stay-time="150"
+                        @tap="$emit('view-all')"
+                    >
+                        <text class="coupon-section__view-all">更多详情</text>
+                        <image
+                            class="coupon-section__link-arrow"
+                            src="/static/images/chevronright5.png"
+                            mode="aspectFit"
+                        />
+                    </view>
+                </view>
+            </view>
+            <view class="coupon-section__cards">
+                <view class="coupon-section__cards-inner">
+                    <view
+                        class="coupon-section__coupon"
+                        hover-class="mi-tap-card--hover"
+                        :hover-stay-time="150"
+                        @tap="$emit('use-coupon')"
+                    >
+                        <view class="coupon-section__coupon-inner">
+                            <text class="coupon-section__amount">{{ data.amount }}</text>
+                            <text class="coupon-section__desc">{{ data.couponDesc }}</text>
+                            <view class="coupon-section__coupon-status">
+                                <text class="coupon-section__status">{{ data.couponAction }}</text>
+                            </view>
+                        </view>
+                    </view>
+                    <view
+                        class="coupon-section__points"
+                        hover-class="mi-tap-card--hover"
+                        :hover-stay-time="150"
+                        @tap="$emit('redeem-points')"
+                    >
+                        <view class="coupon-section__points-inner">
+                            <text class="coupon-section__num">{{ data.points }}</text>
+                            <text class="coupon-section__points-label">{{ data.pointsLabel }}</text>
+                            <view class="coupon-section__points-action">
+                                <text class="coupon-section__text">{{ data.pointsAction }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    options: {
+        virtualHost: false,
+        styleIsolation: 'apply-shared'
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => ({
+                amount: '¥50',
+                couponDesc: '满500可用 · 1张',
+                couponAction: '去使用',
+                points: 1250,
+                pointsLabel: '我的积分',
+                pointsAction: '去兑换'
+            })
+        }
+    },
+    emits: ['view-all', 'use-coupon', 'redeem-points']
+}
+</script>
+
+<style>
+@import '@/common/style/memberInfo/member-info-component-reset.css';
+@import '@/common/style/memberInfo/member-info-coupon-points.css';
+@import '@/common/style/memberInfo/member-info-tap.css';
+</style>