在一个uni-Card下面，动态生成多个actions

Question

1.在一个uni-Card下面，动态生成多个actions。其中uni-Card也有多个动态生成。
2.要求将action的两个text分开，即前一个图标靠近第一个text，第二个text靠最右侧
以下代码供参考，求完善代码

    <template>
        <view class="container">
            <view v-for="(cardData, index) in cardsData" :key="index" class="card-container">
                    <uni-card :title="cardData.title" :extra="cardData.extra" :thumbnail="avatar" @click="onClick">               
                        <view slot="actions" class="card-actions">
                            <view v-for="(action, actionIndex) in cardData.actions" class="card-actions-item"  :key="actionIndex"  @click="actionsClick('S')">
                                <uni-icons :type="action.icon" size="18" color="#999"></uni-icons>
                                <text>{{action.actuator}}</text>
                                <text>{{action.val}}</text>
                            </view>    
                        </view> 
                    </uni-card>                
                </view>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {
                        avatar: '/static/actuator2.png',
                        cardsData: [
                        { 
                            title: 'ps' ,
                            subtitle:'12ml',
                            extra:'OFF(%0)',
                            rate:'89(0R/M)',                            
                            actions:[ // 动作项数组，可以根据实际情况调整数据格式和内容
                                        { icon: 'arrow-down', actuator: 'apple', val:'89(0R/M)', action: 'S' },                                       
                                    ]
                        }
                      ]
                };
            }
        }
    </script>

    <style lang="scss">
        .container {
            overflow: hidden;
        }

        .custom-cover {
            flex: 1;
            flex-direction: row;
            position: relative;
        }

        .cover-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background-color: rgba($color: #000000, $alpha: 0.4);
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-left: 15px;
            font-size: 14px;
            color: #fff;
        }

        .card-actions {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: 45px;
            border-top: 1px #eee solid;
        }

        .card-actions-item {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .card-actions-item-text {
            font-size: 12px;
            color: #666;
            margin-left: 5px;
        }

        .cover-image {
            flex: 1;
            height: 150px;
        }

        .no-border {
            border-width: 0;
        }
    </style>

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从您的问题中我理解您需要在一个 uni-Card 下动态生成多个 actions，并且需要让 actions 中的两个 text 分开显示，前一个图标靠近第一个 text，第二个 text 靠最右侧。根据您的代码和描述，我为您提供了以下的改进方案：

1. 在 actions 中使用 Flexbox 布局以更好地控制元素之间的间距和对齐。
2. 为了实现第一个图标靠近第一个 text，我们可以使用 Flexbox 的 margin 属性来调整间距。

下面是修改后的代码：

<template>
    <view class="container">
        <view v-for="(cardData, index) in cardsData" :key="index" class="card-container">
            <uni-card :title="cardData.title" :extra="cardData.extra" :thumbnail="avatar" @click="onClick">
                <view slot="actions" class="card-actions">
                    <view v-for="(action, actionIndex) in cardData.actions" class="action-item" :key="actionIndex" @click="actionsClick(action.action)">
                        <uni-icons :type="action.icon" size="18" color="#999"></uni-icons>
                        <view class="action-text-container">
                            <text class="first-text">{{action.actuator}}</text>
                            <text class="second-text" style="float: right;">{{action.val}}</text>
                        </view>
                    </view>  
                </view> 
            </uni-card>                
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                avatar: '/static/actuator2.png',
                cardsData: [
                    { 
                        title: 'ps',
                        actions: [ 
                            { icon: 'arrow-down', actuator: 'apple', val:'89(0R/M)', action: 'S' }                                       
                        ]
                    }
                    // 其他卡片数据...
                ]
            };
        }
    }
</script>

<style lang="scss">
    .container {
        // 其他样式...
    }

    .card-actions {
        display: flex;
        flex-direction: row;
        justify-content: space-between; // 调整对齐方式以适应动态生成的actions
        align-items: center;
        height: 45px; /* 或根据需要调整 */
        border-top: 1px #eee solid; /* 根据需要调整 */
        padding: 0 10px; /* 为内容添加一些间距 */
    }

    .action-item {
        display: flex;
        flex-direction: row; /* 使用Flexbox布局控制图标和文本的排列 */
        align-items: center; /* 让图标和文本垂直居中对齐 */
        margin-right: 10px; /* 为每个动作项添加右侧间距 */
    }

    .action-text-container { /* 新增样式，用于控制两个文本的布局 */
        display: flex; /* 使用Flexbox布局 */
        align-items: center; /* 让文本垂直居中对齐 */
        justify-content: space-between; /* 让第一个文本和图标靠左对齐，第二个文本靠右对齐 */
    }
    /* 针对文本样式进行调整 */
    .first-text { /* 第一个文本的样式 */ } 
    .second-text { /* 第二个文本的样式，使用float进行右对齐 */ } 
</style>

以上代码对您的组件进行了相应的调整和优化，使用 Flexbox 布局实现了动态生成的动作项的对齐和间距调整。您需要根据实际的数据结构和样式需求进一步微调样式。希望这可以帮助到您！