49 lines
1.9 KiB
Vue
49 lines
1.9 KiB
Vue
<template>
|
|
<view class="quick-actions">
|
|
<view class="quick-actions__inner">
|
|
<view class="quick-actions__grid">
|
|
<view class="quick-actions__grid-inner">
|
|
<view
|
|
v-for="item in actions"
|
|
:key="item.key"
|
|
class="quick-actions__item"
|
|
hover-class="mi-tap--hover"
|
|
:hover-stay-time="150"
|
|
@tap="$emit('action', item.key)"
|
|
>
|
|
<view class="quick-actions__item-inner">
|
|
<view class="quick-actions__icon-wrap">
|
|
<view class="quick-actions__icon-wrap-inner">
|
|
<image
|
|
class="quick-actions__icon-img"
|
|
:src="item.icon"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text :class="item.textClass">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
defineEmits(['action'])
|
|
|
|
const actions = ref([
|
|
{ key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__title', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
|
|
{ key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' }
|
|
])
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/style/memberInfo/member-info-component-reset.css';
|
|
@import '@/common/style/memberInfo/member-info-quick-actions.css';
|
|
@import '@/common/style/memberInfo/member-info-tap.css';
|
|
</style>
|