@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/components/snake-goods-list/types.ts

@@ -0,0 +1,55 @@
+/** GoodsList 数据项。 */
+export interface GoodsListItem extends Record<string, any> {
+    /** 数据唯一标识。 */
+    id?: string | number;
+    /** 图片地址。 */
+    image?: string;
+    /** 数据项名称或唯一标识。 */
+    name?: string;
+    /** 商品名称。 */
+    goodsName?: string;
+    /** 商品价格。 */
+    price?: string | number;
+    /** 商品折扣价格。 */
+    discountPrice?: string | number;
+    /** 商品数量或库存。 */
+    amount?: number;
+    /** 当前状态。 */
+    status?: string | number;
+    /** 商品关联的活动信息。 */
+    activityInfo?: Record<string, any>;
+}
+
+/** GoodsList 组件的公开属性。 */
+export interface GoodsListProps<Item extends GoodsListItem = GoodsListItem> {
+    /** 商品数据列表。 */
+    goodsList?: Item[];
+    /** 背景颜色。 */
+    bgColor?: string;
+    /** 商品列表展示类型。 */
+    listType?: string;
+    /** 列表与页面边缘的间距。 */
+    pageMargin?: number;
+    /** 商品卡片之间的间距。 */
+    imageMargin?: number;
+    /** 商品卡片布局类型。 */
+    commodityType?: number;
+    /** 是否显示拍卖参与人数。 */
+    attendanceShow?: boolean;
+    /** 组件使用的可替换资源地址。 */
+    assets?: Record<string, string>;
+    /** 商品排列方式。 */
+    layout?: 'grid' | 'swipe';
+    /** 商品卡片圆角，单位 rpx。 */
+    cardRadius?: number;
+    /** 是否显示营销标签。 */
+    showTag?: boolean;
+}
+
+/** GoodsList 组件的事件契约。 */
+export type GoodsListEmits<Item extends GoodsListItem = GoodsListItem> = {
+    /** item-click 事件携带的参数。 */
+    'item-click': [item: Item, index: number];
+    /** handlerOffer 事件携带的参数。 */
+    handlerOffer: [item: Item, index: number];
+};

package/components/snake-graphic-navigation/snake-graphic-navigation.vue

@@ -0,0 +1,198 @@
+<template>
+    <view v-if="imageList.length" class="graphicnavigation">
+        <!-- 鍥哄畾鍒楄〃 -->
+        <block v-if="datas.imgStyle === 0">
+            <view class="defaultNavigation" :style="{ backgroundColor: datas.backgroundColor, flexWrap: 'wrap' }">
+                <view
+                    class="navigationList__item"
+                    v-for="(item, index) in imageList"
+                    :key="index"
+                    :style="{ padding: ` 0 ${datas.imgMargin}rpx`, width: 100 / imageList.length + '%' }"
+                    @click="handleClick(item, index)"
+                >
+                    <image
+                        class="image-warp"
+                        :src="item.src"
+                        :style="{ borderRadius: pxToRpx(datas.borderRadius) }"
+                        mode="widthFix"
+                        v-if="datas.navigationType === 0"
+                    ></image>
+                    <text class="text" :style="[textStyle]" v-if="item.text">{{ item.text }}</text>
+                </view>
+            </view>
+        </block>
+        <!-- 妯悜婊戝姩鍒楄〃 -->
+        <block v-if="datas.imgStyle === 1">
+            <view
+                class="scrollList-box"
+                :style="{
+                    backgroundColor: datas.backgroundColor
+                }"
+            >
+                <!-- <snake-scroll-list
+          :indicatorWidth="50"
+          :indicatorBarWidth="25"
+          :indicator="datas.showSlider && datas.imageList.length > datas.showSize"
+          indicatorColor="var(--snake-color-border, #cccccc)"
+          indicatorActiveColor="var(--snake-color-text, #606266)">
+          <view class="scroll-list">
+            <view class="scroll-list__line" v-for="(scrollItem, scrollIndex) in scrollList" :key="scrollIndex">
+              <view
+                class="scroll-list__line__item"
+                v-for="(item, index) in scrollItem.data"
+                :key="index"
+                :class="[index === item.length - 1 && 'scroll-list__line__item--no-margin-right']"
+                :style="{
+                  minWidth: 100 / datas.showSize + '%',
+                }">
+                <image class="scroll-list__line__item__image" :src="item.src" mode="widthFix"></image>
+                <text class="scroll-list__line__item__text">{{ item.text }}</text>
+              </view>
+            </view>
+          </view>
+        </snake-scroll-list> -->
+            </view>
+        </block>
+    </view>
+</template>
+
+<script>
+/**
+ * @component GraphicNavigation
+ * @description 使用图片与文字组成入口导航，并根据小程序审核状态过滤特定入口。
+ */
+
+import { pxToRpx } from '../../libs/function/unit';
+
+export default {
+    name: 'snake-graphic-navigation',
+    options: { virtualHost: true, styleIsolation: 'shared' },
+    props: { datas: Object },
+    emits: ['click'],
+    data() {
+        return {};
+    },
+    methods: {
+        pxToRpx,
+        handleClick(item, index) {
+            this.$emit('click', { item, index });
+            if (item.url) uni.$snake.navTo(item.url);
+        }
+    },
+    computed: {
+        imageList() {
+            return this.datas?.imageList || [];
+        },
+        // 鏂囧瓧鏍峰紡
+        textStyle() {
+            const style = {};
+            style.color = this.datas.textColor;
+            style.fontSize = pxToRpx(this.datas.textSize);
+            style.lineHeight = `${this.datas.textHeight}px`;
+            return style;
+        },
+        // 妯悜婊戝姩鍒楄〃
+        scrollList() {
+            // 鎷疯礉鍘熸暟缁?闃叉splice鏂规硶褰卞搷浜嗗師鏁扮粍
+            const copyList = [...this.datas.imageList];
+            const list = [];
+            if (this.datas.imageList.length <= 5) {
+                list.push({ data: this.datas.imageList });
+            } else {
+                // 鏁扮粍闀垮害澶т簬绛変簬20骞崇瓑鍒?浠斤紝鍚﹀垯鍒嗘垚涓や唤
+                const row = 2;
+                // if (this.datas.imageList.length >= 20) {
+                // 	row = 3
+                // }
+                const middleIndex = Math.ceil(this.datas.imageList.length / row);
+                list.push({ data: copyList.splice(0, middleIndex) });
+                list.push({ data: copyList.splice(-middleIndex) });
+                // if (row == 3) {
+                // 	list.push({ data: copyList })
+                // }
+            }
+            return list;
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.graphicnavigation {
+    width: 100%;
+
+    .defaultNavigation {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+    }
+
+    .navigationList__item {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .image-warp {
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+        }
+
+        .text {
+            box-sizing: border-box;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 12px;
+            text-align: center;
+            white-space: nowrap;
+        }
+    }
+}
+
+// 妯悜婊戝姩鍒楄〃
+.scrollList-box {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.scroll-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &__line {
+        display: flex;
+        margin-top: 10px;
+
+        &__item {
+            text-align: center;
+            // display: flex;
+            // align-items: center;
+            // flex-direction: column;
+            // margin-right: 15px;
+
+            &__image {
+                width: 61px;
+                height: 48px;
+            }
+
+            &__text {
+                // text-align: center;
+                display: flex;
+                justify-content: center;
+                font-size: 12px;
+                // margin-top: 5px;
+                color: var(--snake-color-text-secondary, #666666);
+            }
+
+            &--no-margin-right {
+                margin-right: 0;
+            }
+        }
+    }
+}
+</style>

package/components/snake-graphic-navigation/types.ts

@@ -0,0 +1,43 @@
+/** GraphicNavigation 数据项。 */
+export interface GraphicNavigationItem {
+    /** 资源地址。 */
+    src?: string;
+    /** 展示文本。 */
+    text?: string;
+    /** 点击后跳转地址。 */
+    url?: string;
+}
+
+/** GraphicNavigation 配置数据。 */
+export interface GraphicNavigationData {
+    /** img style 配置。 */
+    imgStyle?: 0 | 1;
+    /** image list 配置。 */
+    imageList?: GraphicNavigationItem[];
+    /** background color 配置。 */
+    backgroundColor?: string;
+    /** img margin 配置。 */
+    imgMargin?: number;
+    /** 圆角尺寸。 */
+    borderRadius?: number;
+    /** navigation type 配置。 */
+    navigationType?: number;
+    /** 文字颜色。 */
+    textColor?: string;
+    /** text size 配置。 */
+    textSize?: number;
+    /** text height 配置。 */
+    textHeight?: number;
+}
+
+/** GraphicNavigation 组件的公开属性。 */
+export interface GraphicNavigationProps {
+    /** CMS 装修组件配置数据。 */
+    datas?: GraphicNavigationData;
+}
+
+/** GraphicNavigation 点击入口时发出的事件。 */
+export interface GraphicNavigationEmits {
+    /** 被点击的入口及其下标。 */
+    click: [payload: { item: GraphicNavigationItem; index: number }];
+}

package/components/snake-icon/icon-names.ts

@@ -0,0 +1,222 @@
+/** 内置字体图标名称，与 iconfont.css 中的 sicon-* 规则保持一致。 */
+export const iconNames = [
+    'wifi-off',
+    'wifi',
+    'woman',
+    'zh',
+    'zhifubao',
+    'zhifubao-circle-fill',
+    'zhihu-circle-fill',
+    'zhihu',
+    'zhuanfa',
+    'account',
+    'arrow-down-fill',
+    'arrow-down',
+    'account-fill',
+    'arrow-downward',
+    'apple-fill',
+    'android-fill',
+    'android-circle-fill',
+    'arrow-left',
+    'arrow-leftward',
+    'arrow-left-double',
+    'arrow-right',
+    'arrow-rightward',
+    'arrow-up',
+    'arrow-right-double',
+    'arrow-upward',
+    'arrow-up-fill',
+    'bag-fill',
+    'attach',
+    'backspace',
+    'bag',
+    'baidu',
+    'bell',
+    'baidu-circle-fill',
+    'bell-fill',
+    'bookmark',
+    'bookmark-fill',
+    'calendar',
+    'calendar-fill',
+    'camera',
+    'car',
+    'camera-fill',
+    'car-fill',
+    'chat',
+    'checkbox-mark',
+    'chat-fill',
+    'checkmark',
+    'clock-fill',
+    'chrome-circle-fill',
+    'checkmark-circle-fill',
+    'clock',
+    'checkmark-circle',
+    'close',
+    'close-circle',
+    'column-line',
+    'coupon',
+    'close-circle-fill',
+    'coupon-fill',
+    'cut',
+    'edit-pen',
+    'download',
+    'edit-pen-fill',
+    'email-fill',
+    'email',
+    'empty-address',
+    'empty-car',
+    'empty-data',
+    'empty-favor',
+    'empty-coupon',
+    'empty-history',
+    'empty-message',
+    'empty-list',
+    'empty-news',
+    'empty-order',
+    'empty-page',
+    'empty-permission',
+    'empty-wifi',
+    'empty-search',
+    'en',
+    'error',
+    'error-circle',
+    'error-circle-fill',
+    'eye-off',
+    'eye-fill',
+    'eye',
+    'facebook',
+    'eye-off-outline',
+    'file-text-fill',
+    'facebook-circle-fill',
+    'file-text',
+    'fingerprint',
+    'gift',
+    'google',
+    'github-circle-fill',
+    'gift-fill',
+    'heart-fill',
+    'google-circle-fill',
+    'heart',
+    'grid',
+    'grid-fill',
+    'home-fill',
+    'home',
+    'hourglass',
+    'hourglass-half-fill',
+    'ie',
+    'info',
+    'IE-circle-fill',
+    'integral',
+    'info-circle-fill',
+    'info-circle',
+    'integral-fill',
+    'level',
+    'list',
+    'kefu-ermai',
+    'lock',
+    'list-dot',
+    'lock-fill',
+    'lock-open',
+    'man',
+    'man-add',
+    'lock-opened-fill',
+    'man-add-fill',
+    'map',
+    'man-delete',
+    'map-fill',
+    'md-person-add',
+    'mic',
+    'md-person-fill',
+    'minus',
+    'mic-off',
+    'minus-circle',
+    'minus-circle-fill',
+    'minus-people-fill',
+    'moments',
+    'minus-square-fill',
+    'moments-circel-fill',
+    'more-dot-fill',
+    'more-circle-fill',
+    'more-circle',
+    'nav-back',
+    'nav-back-arrow',
+    'pause',
+    'order',
+    'pause-circle',
+    'phone',
+    'pause-circle-fill',
+    'person-delete-fill',
+    'phone-fill',
+    'photo-fill',
+    'photo',
+    'play-left',
+    'play-right',
+    'play-circle-fill',
+    'play-circle',
+    'play-right-fill',
+    'plus',
+    'plus-circle',
+    'plus-circle-fill',
+    'plus-people-fill',
+    'qq-circle-fill',
+    'pushpin-fill',
+    'pushpin',
+    'question-circle-fill',
+    'question',
+    'rewind-left-fill',
+    'qq-fill',
+    'qzone',
+    'qzone-circle-fill',
+    'red-packet',
+    'rewind-right-fill',
+    'rmb',
+    'rewind-right',
+    'search',
+    'server-fill',
+    'setting-fill',
+    'setting',
+    'shopping-cart',
+    'shopping-cart-fill',
+    'share-fill',
+    'share',
+    'thumb-up',
+    'thumb-up-fill',
+    'trash',
+    'volume-fill',
+    'trash-fill',
+    'volume',
+    'twitter-circle-fill',
+    'volume-off-fill',
+    'warning',
+    'volume-up',
+    'warning-fill',
+    'weibo',
+    'weixin-fill',
+    'weixin-circle-fill',
+    'weibo-circle-fill',
+    'plus-square-fill',
+    'rmb-circle-fill',
+    'rmb-circle',
+    'reload',
+    'rewind-left',
+    'red-packet-fill',
+    'scan',
+    'server-man',
+    'skip-back-left',
+    'skip-forward-right',
+    'star',
+    'taobao-circle-fill',
+    'taobao',
+    'thumb-down-fill',
+    'thumb-down',
+    'twitter',
+    'volume-off',
+    'volume-up-fill',
+    'play-left-fill',
+    'question-circle',
+    'tags-fill',
+    'tags',
+    'star-fill'
+] as const;
+
+export type IconName = (typeof iconNames)[number];