stellar-ui-plus 1.20.20 → 1.20.21

package/components/ste-cub-box/ATTRIBUTES.md

@@ -0,0 +1,19 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `avatar` | 头像 | `String` | `` | - | - |
+| `nickname` | 昵称 | `String` | `` | - | - |
+| `showUserInfo` | 是否展示用户相关 | `Boolean` | `true` | - | - |
+| `list` | 数据列表（最多三个） | `Array` | `[]` | - | - |
+| `codeSrc` | 功能码图片 | `String` | `` | - | - |
+| `codeTitle` | 功能码标题 | `String` | `` | - | - |
+| `codeTitleColor` | 功能码标题颜色 | `String` | `主题色` | - | - |
+| `showCode` | 是否展示功能码相关 | `Boolean` | `true` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `userClick` | 用户区域点击 | - | - |
+| `dataClick` | 数据点击 | - | - |
+| `codeClick` | 功能码区域点击 | - | - |

package/components/ste-cub-box/README.md

@@ -0,0 +1,350 @@
+# UserInfo 用户信息
+
+提供用户信息展示。
+
+---$
+
+## 代码演示
+
+### 基本使用
+
+- 通过 `avatar`设置头像，默认为``
+- 通过 `nickname`设置昵称，默认为``
+- 通过 `desc`插槽设置用户描述，默认为``
+- 通过 `list`设置数据列表（最多三个），默认为`[]`
+- 通过 `codeSrc`设置功能码图片，默认为``
+- 通过 `codeTitle`设置功能码标题，默认为``
+- 通过 `codeTitleColor`设置功能码标题颜色，默认为`主题色`
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    let list1 = ref([
+        { title: '余额', value: '100' },
+        { title: '订餐数', value: '8' },
+    ]);
+
+    let list2 = ref([
+        { title: '数据1', value: '100' },
+        { title: '数据2', value: '8' },
+        { title: '数据3', value: '8' },
+    ]);
+    let list3 = ref([{ title: '数据1', value: '100' }]);
+</script>
+<template>
+    <view class="item-block">
+        <view>
+            <ste-user-info
+                avatar="https://image.whzb.com/chain/StellarUI/图片.jpg"
+                nickname="张三"
+                :list="list1"
+                codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png"
+                codeTitle="核销码"
+                codeTitleColor="#EC3E1A"
+            >
+                <template v-slot:desc>
+                    <view class="desc">
+                        <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                        <view class="title">中百食堂</view>
+                    </view>
+                </template>
+            </ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info
+                avatar="https://image.whzb.com/chain/StellarUI/图片.jpg"
+                nickname="张三"
+                :list="[]"
+                codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png"
+                codeTitle="核销码"
+                codeTitleColor="#EC3E1A"
+            >
+                <template v-slot:desc>
+                    <view class="desc">
+                        <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                        <view class="title">中百食堂</view>
+                    </view>
+                </template>
+            </ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info
+                avatar="https://image.whzb.com/chain/StellarUI/图片.jpg"
+                nickname="张三"
+                :list="list3"
+                codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png"
+                codeTitle="核销码"
+                codeTitleColor="#EC3E1A"
+            >
+                <template v-slot:desc>
+                    <view class="desc">
+                        <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                        <view class="title">中百食堂</view>
+                    </view>
+                </template>
+            </ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info
+                avatar="https://image.whzb.com/chain/StellarUI/图片.jpg"
+                nickname="张三"
+                :list="list2"
+                codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png"
+                codeTitle="核销码"
+                codeTitleColor="#EC3E1A"
+            >
+                <template v-slot:desc>
+                    <view class="desc">
+                        <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                        <view class="title">中百食堂</view>
+                    </view>
+                </template>
+            </ste-user-info>
+        </view>
+    </view>
+</template>
+<style>
+    .item-block {
+        > view {
+            margin: 0 36rpx 36rpx 0;
+        }
+    }
+    .desc {
+        display: flex;
+        align-items: center;
+        .title {
+            font-size: 24rpx;
+            color: #ec3e1a;
+            margin: 4rpx;
+            margin-right: 14rpx;
+        }
+    }
+</style>
+```
+
+### 用户信息隐藏
+
+- 通过 `showUserInfo`设置是否展示用户相关，默认为`true`
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    let list1 = ref([
+        { title: '余额', value: '100' },
+        { title: '订餐数', value: '8' },
+    ]);
+
+    let list2 = ref([
+        { title: '数据1', value: '100' },
+        { title: '数据2', value: '8' },
+        { title: '数据3', value: '8' },
+    ]);
+    let list3 = ref([{ title: '数据1', value: '100' }]);
+</script>
+<template>
+    <view class="item-block">
+        <view>
+            <ste-user-info :showUserInfo="false" :list="list1" codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png" codeTitle="核销码" codeTitleColor="#EC3E1A"></ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info :showUserInfo="false" :list="[]" codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png" codeTitle="核销码" codeTitleColor="#EC3E1A"></ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info :showUserInfo="false" :list="list3" codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png" codeTitle="核销码" codeTitleColor="#EC3E1A"></ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info :showUserInfo="false" :list="list2" codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png" codeTitle="核销码" codeTitleColor="#EC3E1A"></ste-user-info>
+        </view>
+    </view>
+</template>
+<style>
+    .item-block {
+        > view {
+            margin: 0 36rpx 36rpx 0;
+        }
+    }
+    .desc {
+        display: flex;
+        align-items: center;
+        .title {
+            font-size: 24rpx;
+            color: #ec3e1a;
+            margin: 4rpx;
+            margin-right: 14rpx;
+        }
+    }
+</style>
+```
+
+### 核销码隐藏
+
+- 通过 `showCode`设置核销码隐藏，默认为`true`
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    let list1 = ref([
+        { title: '余额', value: '100' },
+        { title: '订餐数', value: '8' },
+    ]);
+
+    let list2 = ref([
+        { title: '数据1', value: '100' },
+        { title: '数据2', value: '8' },
+        { title: '数据3', value: '8' },
+    ]);
+    let list3 = ref([{ title: '数据1', value: '100' }]);
+</script>
+<template>
+    <view class="item-block">
+        <view>
+            <ste-user-info avatar="https://image.whzb.com/chain/StellarUI/图片.jpg" nickname="张三" :list="list1" :showCode="false">
+                <template v-slot:desc>
+                    <view class="desc">
+                        <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                        <view class="title">中百食堂</view>
+                    </view>
+                </template>
+            </ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info avatar="https://image.whzb.com/chain/StellarUI/图片.jpg" nickname="张三" :list="[]" :showCode="false">
+                <template v-slot:desc>
+                    <view class="desc">
+                        <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                        <view class="title">中百食堂</view>
+                    </view>
+                </template>
+            </ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info avatar="https://image.whzb.com/chain/StellarUI/图片.jpg" nickname="张三" :list="list3" :showCode="false">
+                <template v-slot:desc>
+                    <view class="desc">
+                        <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                        <view class="title">中百食堂</view>
+                    </view>
+                </template>
+            </ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info avatar="https://image.whzb.com/chain/StellarUI/图片.jpg" nickname="张三" :list="list2" :showCode="false">
+                <template v-slot:desc>
+                    <view class="desc">
+                        <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                        <view class="title">中百食堂</view>
+                    </view>
+                </template>
+            </ste-user-info>
+        </view>
+    </view>
+</template>
+<style>
+    .item-block {
+        > view {
+            margin: 0 36rpx 36rpx 0;
+        }
+    }
+    .desc {
+        display: flex;
+        align-items: center;
+        .title {
+            font-size: 24rpx;
+            color: #ec3e1a;
+            margin: 4rpx;
+            margin-right: 14rpx;
+        }
+    }
+</style>
+```
+
+### 用户信息和核销码隐藏
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    let list1 = ref([
+        { title: '余额', value: '100' },
+        { title: '订餐数', value: '8' },
+    ]);
+
+    let list2 = ref([
+        { title: '数据1', value: '100' },
+        { title: '数据2', value: '8' },
+        { title: '数据3', value: '8' },
+    ]);
+    let list3 = ref([{ title: '数据1', value: '100' }]);
+</script>
+<template>
+    <view class="item-block">
+        <view>
+            <ste-user-info :showCode="false" :showUserInfo="false" :list="list1"></ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info :showCode="false" :showUserInfo="false" :list="[]"></ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info :showCode="false" :showUserInfo="false" :list="list3"></ste-user-info>
+        </view>
+    </view>
+    <view class="item-block">
+        <view>
+            <ste-user-info :showCode="false" :showUserInfo="false" :list="list2"></ste-user-info>
+        </view>
+    </view>
+</template>
+<style>
+    .item-block {
+        > view {
+            margin: 0 36rpx 36rpx 0;
+        }
+    }
+    .desc {
+        display: flex;
+        align-items: center;
+        .title {
+            font-size: 24rpx;
+            color: #ec3e1a;
+            margin: 4rpx;
+            margin-right: 14rpx;
+        }
+    }
+</style>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Slots
+
+| 插槽名 | 说明     | 插槽参数 | 支持版本 |
+| ------ | -------- | -------- | -------- |
+| `desc` | 用户描述 | -        | -        |
+
+---$
+{{qinpengfei}}

package/components/ste-cub-box/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "UserInfo 用户信息",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/人员信息.png"
+}

package/components/ste-cub-box/props.ts

@@ -0,0 +1,10 @@
+export default {
+    avatar: { type: String, default: '' },
+    nickname: { type: String, default: '' },
+    showUserInfo: { type: Boolean, default: true },
+    list: { type: Array, default: () => [] },
+    codeSrc: { type: String, default: '' },
+    codeTitle: { type: String, default: '' },
+    codeTitleColor: { type: String, default: '' },
+    showCode: { type: Boolean, default: true },
+};

package/components/ste-cub-box/ste-cub-box.vue

@@ -0,0 +1,244 @@
+<template>
+    <!-- 魔方组件 -->
+    <div class="page">
+        <div
+            class="cap-cube"
+            :class="{ 'c-box-angle-2': imageAngle == 2 }"
+            :style="{
+                width: capCubeStyle.width,
+                marginLeft: capCubeStyle.marginLeft,
+                marginBottom: capCubeStyle.marginBottom,
+                gridRowGap: capCubeStyle.gridRowGap,
+                gridColumnGap: capCubeStyle.gridColumnGap,
+                gridTemplateRows: capCubeStyle.gridTemplateRows,
+                gridTemplateColumns: capCubeStyle.gridTemplateColumns,
+            }"
+        >
+            <div
+                class="cap-cube__item"
+                v-for="(item, index) in showCubeListWrap"
+                :key="index"
+                :style="{
+                    gridColumnStart: item.columnStart,
+                    gridColumnEnd: item.columnEnd,
+                    gridRowStart: item.rowStart,
+                    gridRowEnd: item.rowEnd,
+                }"
+                @click="handleTap(index)"
+            >
+                <ste-image
+                    :mode="radioTC == 1 ? 'aspectFill' : radioTC == 2 ? 'aspectFit' : 'scaleToFill'"
+                    :class="{ 'c-box-angle-2': imageAngle == 2 }"
+                    class="cap-cube__table-image cap-cube__table-image--invisible"
+                    :src="item.img"
+                    v-if="item.img"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import utils from '@/common/utils';
+import useRouter from '@/common/useRouter.js';
+let router = useRouter();
+
+/**以0.5为单位进行四舍五入*/
+const toFixed = num => {
+    if (!num) return 0;
+    const n = Math.floor(num);
+    const f = num % 1;
+    if (f < 0.26) return n;
+    if (f < 0.76) return n + 0.5;
+    return n + 1;
+};
+
+export default {
+    props: {
+        decoration: {},
+    },
+    data() {
+        return {
+            borderWidth: 0,
+            layoutWidth: 0,
+            layoutHeight: 0,
+            showMethod: 0,
+            pageMargin: 0,
+            marginBottom: 0,
+            width: 0,
+            subEntry: [],
+            showCubeListWrap: [],
+            imageAngle: 1, //单选：1.直角 2.圆角
+            radioTC: 1, //单选：1填充 2留白
+            pageMarginStyle: {
+                width: 0,
+                row: 1, // 行数
+                column: 1, // 列数
+                itemWidth: 0,
+                itemHeight: 0,
+                widthDiff: 0, // 差值
+            },
+            // businessType: 0,
+        };
+    },
+    computed: {
+        capCubeStyle() {
+            const { width, row, column, itemWidth, itemHeight, widthDiff } = this.pageMarginStyle;
+
+            let gridTemplateRows = '',
+                gridTemplateColumns = '';
+            for (let i = 0; i < row; i++) {
+                gridTemplateRows += `${itemHeight}px `;
+            }
+            for (let i = 0; i < column; i++) {
+                let w = itemWidth;
+                // 如果差值不是0，则将差值分配到第一列和最后一列（最多七列，每列差值上限0.25，总差值不会超过1.75）
+                if (widthDiff) {
+                    if (i === 0) {
+                        // 将小数位分配给第一列
+                        w += widthDiff % 1;
+                    } else if (i === column - 1) {
+                        // 整数位分配给最后一列(因为可能有负数，不能使用Math.floor函数向下取证)
+                        w += parseInt(widthDiff);
+                    }
+                }
+                gridTemplateColumns += `${w}px `;
+            }
+
+            return {
+                width: `${width}px`,
+                marginLeft: `${this.pageMargin}px`,
+                marginBottom: `${this.marginBottom}px`,
+                gridRowGap: `${this.borderWidth}px`,
+                gridColumnGap: `${this.borderWidth}px`,
+                gridTemplateRows,
+                gridTemplateColumns,
+            };
+        },
+    },
+    created() {
+        // 因为做的是定位，使用rpx会失真，直接使用PX绝对值
+        let formdata = utils.deepClone(this.decoration);
+        this.getProperties(formdata);
+        this.drawCubeWrap();
+    },
+    // 组件周期函数--监听组件挂载完毕
+    mounted() {},
+    methods: {
+        getProperties(formdata) {
+            this.borderWidth = formdata.borderWidth;
+            this.layoutWidth = formdata.layoutWidth;
+            this.layoutHeight = formdata.layoutHeight;
+            this.showMethod = formdata.showMethod;
+            this.pageMargin = formdata.pageMargin;
+            this.marginBottom = formdata.marginBottom;
+            this.width = formdata.width;
+            this.subEntry = formdata.subEntry;
+            this.showCubeListWrap = formdata.showCubeListWrap;
+            this.pageMarginStyle = formdata.pageMarginStyle;
+            this.imageAngle = formdata.imageAngle;
+            this.radioTC = formdata.radioTC;
+            // this.businessType = formdata.businessType;
+        },
+        /**
+         * 动态计算图片规格
+         */
+        drawCubeWrap() {
+            const perviewLayoutWidth = utils.getWindowInfo().windowWidth;
+            const layoutWidth = this.layoutWidth;
+            const layoutHeight = this.layoutHeight;
+            // 应该展示的内容区域总宽度
+            const wrapWith = perviewLayoutWidth - this.pageMargin * 2;
+            // 单个块的宽度
+            const itemWidth = toFixed((wrapWith - this.borderWidth * (layoutWidth - 1)) / layoutWidth);
+            // 重新计算盒子实际总宽度
+            const _wrapWith = (itemWidth + this.borderWidth) * layoutWidth - this.borderWidth;
+            // 计算实际宽度和应该展示宽度之间的差值，求绝对值
+            const widthDiff = wrapWith - _wrapWith;
+            // 单个块的高度
+            const itemHeight = layoutHeight === 1 ? itemWidth : toFixed((perviewLayoutWidth - this.borderWidth * (layoutWidth - 1)) / layoutHeight);
+
+            const subEntry = this.subEntry;
+            const showCubeListWrap = [];
+            let maxHeight = 0,
+                row = 1;
+            if (subEntry.length) {
+                for (let i = 0; i < subEntry.length; i++) {
+                    const a = subEntry[i];
+                    const coverDiv = {
+                        columnStart: a.x + 1,
+                        columnEnd: a.x + a.width + 1,
+                        rowStart: a.y + 1,
+                        rowEnd: a.y + a.height + 1,
+                        img: a[`img`] ? a[`img`] : '',
+                    };
+                    if (maxHeight < coverDiv.top + coverDiv.height) {
+                        maxHeight = coverDiv.top + coverDiv.height;
+                    }
+                    if (row < a.y + a.height) {
+                        row = a.y + a.height;
+                    }
+                    showCubeListWrap.push(coverDiv);
+                }
+                this.showCubeListWrap = showCubeListWrap;
+                this.pageMarginStyle = {
+                    width: wrapWith,
+                    column: this.layoutWidth, // 列数
+                    row, // 行数
+                    itemWidth,
+                    itemHeight,
+                    widthDiff, // 差值
+                };
+            }
+        },
+        /**
+         * 跳转
+         */
+        handleTap(index) {
+            const currentSwiperItem = this.subEntry[index];
+            const itemLink = currentSwiperItem.link;
+            router.navtofun(itemLink);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+/*预览*/
+.rc-design-vue-preview {
+    .cap-cube-wrap {
+        width: 100%;
+        overflow: hidden;
+    }
+}
+
+.cap-cube {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+}
+
+.cap-cube__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 100% 100%;
+    overflow: hidden;
+}
+
+.cap-cube__table-image--invisible {
+    width: 100%;
+    height: 100%;
+}
+
+.iconshangpinxiangqing-baozhuang-2 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-size: 40px;
+    z-index: 999;
+    color: #fff;
+    transform: translate(-50%, -50%);
+}
+</style>