stellar-ui-plus 1.20.15 → 1.20.17

package/components/ste-goods-info/ATTRIBUTES.md

@@ -2,7 +2,9 @@
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `data` | 商品数据 | `{ image: string; title: string; tag?: string; barCode: string; code: string; price: string / number; originalPrice?: string / number }` | `{}` | - | - |
+| `background` | 组件背景色 | `string` | `#fff` | - | - |
 | `imageSize` | 图片大小 | `string / number` | `160` | - | - |
+| `imageRadius` | 图片圆角 | `string / number` | `4` | - | - |
 | `hidePrice` | 隐藏价格 | `boolean` | `false` | - | - |
 | `priceSize` | 价格文本大小 | `string / number` | `28` | - | - |
 | `priceColor` | 价格文本颜色 | `string` | `#ea4335` | - | - |
@@ -16,6 +18,7 @@
 | `number` | 数量 | `number` | `1` | - | - |
 | `stepper` | 是否显示步进器 | `boolean` | `false` | - | - |
 | `readonlyStepper` | 步进器只读 | `boolean` | `false` | - | - |
+| `readonlyStepperInput` | 步进器输入框只读 | `boolean` | `false` | - | - |
 | `disabledStepper` | 禁用步进器 | `boolean` | `false` | - | - |
 | `disableInput` | 禁用步进器输入框 | `boolean` | `false` | - | - |
 | `disablePlus` | 禁用步进器加号 | `boolean` | `false` | - | - |
@@ -35,3 +38,4 @@
 | `plus` | 点击加号前置钩子函数 | `value`：改变后的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
 | `minus` | 点击减号前置钩子函数 | `value`：改变后的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
 | `click-suggest` | 点击建议模块触发 | `type`：点击的区域：'method' / 'back' / 'item' / 'right'<br/>`item`：type为item时，点击的item对象 | - |
+| `click-stepper-input` | 点击步进器输入框触发 | - | - |

package/components/ste-goods-info/props.ts

@@ -26,11 +26,21 @@ export default {
         type: Object as PropType<GoodsInfoType>,
         default: () => ({}),
     },
+    /** 组件背景色 */
+    background: {
+        type: String,
+        default: () => '#fff',
+    },
     /** image大小 */
     imageSize: {
         type: [Number, String],
         default: () => 160,
     },
+    /** 图片圆角 */
+    imageRadius: {
+        type: [String, Number],
+        default: () => 4,
+    },
     /** 是否隐藏价格 */
     hidePrice: {
         type: Boolean,

package/components/ste-goods-info/ste-goods-info.easycom.json

@@ -10,12 +10,24 @@
             "type": "{ image: string; title: string; tag?: string; barCode: string; code: string; price: string | number; originalPrice?: string | number }",
             "default": "{}"
         },
+        {
+            "name": "background",
+            "description": "组件背景色",
+            "type": "string",
+            "default": "#fff"
+        },
         {
             "name": "imageSize",
             "description": "图片大小",
             "type": "string | number",
             "default": "160"
         },
+        {
+            "name": "imageRadius",
+            "description": "图片圆角",
+            "type": "string | number",
+            "default": "4"
+        },
         {
             "name": "hidePrice",
             "description": "隐藏价格",

package/components/ste-goods-info/ste-goods-info.vue

@@ -58,6 +58,7 @@ watch(
 
 const rootStyle = computed(() => {
     let style: Record<string, string> = {
+        background: props.background,
         // 图片大小，默认插槽存在的情况下160rpx，否则为110rpx
         '--image-size': utils.formatPx(props.imageSize, 'str'),
     };
@@ -161,7 +162,7 @@ const clickInput = () => emits('click-stepper-input');
             </view>
             <view class="ste-goods-info-view">
                 <view class="ste-goods-info-image">
-                    <setImage :src="data.image" :width="imageSize" :height="imageSize" @click="onClick('image')" />
+                    <setImage :radius="imageRadius" :src="data.image" :width="imageSize" :height="imageSize" @click="onClick('image')" />
                 </view>
                 <view class="ste-goods-info-content">
                     <view class="ste-goods-info-header">
@@ -264,7 +265,6 @@ const clickInput = () => emits('click-stepper-input');
 .ste-goods-info-root {
     width: 100%;
     position: relative;
-    background-color: #fff;
     border-radius: 12rpx;
     .ste-goods-info-details {
         width: 100%;

package/components/ste-number-keyboard/ATTRIBUTES.md

@@ -15,6 +15,7 @@
 | `keyBg` | 按键背景颜色 | `string` | `#fff` | - | - |
 | `background` | 背景颜色 | `string` | `#f9f9f9` | - | - |
 | `textSize` | 按键文字大小 | `number / string` | `48` | - | - |
+| `backspaceSize` | 回退按钮图标大小 | `number / string` | `48` | - | - |
 | `confirmBg` | 确定按钮背景颜色 | `string` | `#0090FF` | - | - |
 | `confirmColor` | 确定按钮文字颜色 | `string` | `#ffffff` | - | - |
 | `undefined` | - | `undefined` | - | - | - |

package/components/ste-number-keyboard/KeyboardVue.vue

@@ -17,6 +17,7 @@ const props = defineProps({
     keyBg: { type: String },
     background: { type: String },
     textSize: { type: [Number, String] },
+    backspaceSize: { type: [Number, String] },
     rightKeys: { type: Boolean },
 });
 
@@ -105,7 +106,7 @@ console.log(rows.value);
                         @click="onChange(num)"
                     >
                         <view v-if="['backspace', 'clear'].indexOf(num) !== -1">
-                            <ste-icon v-if="num === 'backspace'" code="&#xe6a7;" :color="textColor" :size="textSize" />
+                            <ste-icon v-if="num === 'backspace'" code="&#xe6a7;" :color="textColor" :size="backspaceSize" />
                             <text v-else-if="num === 'clear'">清除</text>
                         </view>
                         <view v-else>
@@ -117,7 +118,7 @@ console.log(rows.value);
         </view>
         <view class="number-keyboard-right" v-if="rightKeys">
             <view class="number-keyboard-item" @click="onChange('backspace')">
-                <ste-icon code="&#xe6a7;" :color="textColor" :size="textSize" />
+                <ste-icon code="&#xe6a7;" :color="textColor" :size="backspaceSize" />
             </view>
             <view class="number-keyboard-item clear" v-if="showClear" @click="onChange('clear')">清除</view>
             <view class="number-keyboard-item confirm" :class="{ disabled }" @click="onChange('confirm')">

package/components/ste-number-keyboard/props.ts

@@ -34,6 +34,7 @@ export default {
     showClear: { type: Boolean, default: () => true },
     textColor: { type: String, default: () => '#000' },
     textSize: { type: [Number, String], default: () => 48 },
+    backspaceSize: { type: [Number, String], default: () => 48 },
     confirmBg: { type: String, default: () => '' },
     confirmColor: { type: String, default: () => '#fff' },
     // 按键背景颜色

package/components/ste-number-keyboard/ste-number-keyboard.easycom.json

@@ -96,6 +96,12 @@
             "type": "number | string",
             "default": 48
         },
+        {
+            "name": "backspaceSize",
+            "description": "回退按钮图标大小",
+            "type": "number | string",
+            "default": 48
+        },
         {
             "name": "confirmBg",
             "description": "确定按钮背景颜色",

package/components/ste-number-keyboard/ste-number-keyboard.vue

@@ -45,6 +45,7 @@ const { cmpNumbers, cmpRootStyle, dataShow, onClose, onChange, onOpen } = useDat
                         :showClear="showClear"
                         :textColor="textColor"
                         :textSize="textSize"
+                        :backspaceSize="backspaceSize"
                         :rightKeys="rightKeys"
                         :keyBg="keyBg"
                         :background="background"
@@ -61,6 +62,7 @@ const { cmpNumbers, cmpRootStyle, dataShow, onClose, onChange, onOpen } = useDat
                 :showClear="showClear"
                 :textColor="textColor"
                 :textSize="textSize"
+                :backspaceSize="backspaceSize"
                 :rightKeys="rightKeys"
                 :keyBg="keyBg"
                 :background="background"

package/components/ste-stepper/ATTRIBUTES.md

@@ -14,6 +14,7 @@
 | `disablePlus` | 是否禁用增加按钮 | `boolean` | `false` | - | - |
 | `disableMinus` | 是否禁用减少按钮 | `boolean` | `false` | - | - |
 | `disableInput` | 是否禁用输入框 | `boolean` | `false` | - | - |
+| `readonlyInput` | 输入框只读 | `boolean` | `false` | - | - |
 | `background` | 徽标：背景 | `string` | `#ee0a24` | - | - |
 | `showDot` | 徽标：是否展示为小红点 | `boolean` | `false` | - | - |
 | `offsetX` | 徽标：根据徽标位置,设置x轴偏移量 | `number / string` | `auto` | - | - |

package/components/ste-user-info/ATTRIBUTES.md

@@ -7,6 +7,7 @@
 | `list` | 数据列表（最多三个） | `Array` | `[]` | - | - |
 | `codeSrc` | 功能码图片 | `String` | `` | - | - |
 | `codeTitle` | 功能码标题 | `String` | `` | - | - |
+| `codeTitleColor` | 功能码标题颜色 | `String` | `主题色` | - | - |
 | `showCode` | 是否展示功能码相关 | `Boolean` | `true` | - | - |
 
 

package/components/ste-user-info/README.md

@@ -1,50 +1,173 @@
-# DateUser 人员信息以及日期
+# UserInfo 用户信息
 
-提供日期和用户信息展示。
+提供用户信息展示。
 
 ---$
 
-### 域名配置
+## 代码演示
 
-如需使用日期时间类型，需在小程序后台配置域名`https://zboa.whzb.com`合法，才可使用
+### 基本使用
 
-## 代码演示
+- 通过 `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>
+```
 
-- 通过 `type`设置组件类型，默认为`date`,取服务器上当天时间
+### 用户信息隐藏
+
+- 通过 `showUserInfo`设置是否展示用户相关，默认为`true`
 
 ```html
 <template>
-    <ste-date-user></ste-date-user>
+    <ste-user-info :showUserInfo="false" :list="list1" codeSrc="https://image.whzb.com/chain/StellarUI/image/code1.png" codeTitle="核销码" codeTitleColor="#EC3E1A"></ste-user-info>
 </template>
 ```
 
-### 返回按钮配置
+### 核销码隐藏
 
-- 通过 `type`设置组件类型，值为`user`
-- 通过 `avatar` 属性来设置头像，默认``
-- 通过 `desc` 插槽来设置用户描述，默认``
+- 通过 `showCode`设置核销码隐藏，默认为`true`
 
 ```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    let list2 = ref([
+        { title: '数据1', value: '100' },
+        { title: '数据2', value: '8' },
+        { title: '数据3', value: '8' },
+    ]);
+</script>
 <template>
-    <ste-date-user type="user" avatar="https://image.whzb.com/chain/StellarUI/图片.jpg" nickname="张三">
+    <ste-user-info avatar="https://image.whzb.com/chain/StellarUI/图片.jpg" nickname="张三" :list="list2" :showCode="false">
         <template v-slot:desc>
             <view class="desc">
-                <view class="title">店长</view>
-                <ste-icon code="&#xe6c7;" color="#0275FF" size="15"></ste-icon>
+                <ste-icon code="&#xe670;" color="#EC3E1A" size="26"></ste-icon>
+                <view class="title">中百食堂</view>
             </view>
         </template>
-    </ste-date-user>
+    </ste-user-info>
 </template>
-
 <style>
     .desc {
         display: flex;
         align-items: center;
         .title {
             font-size: 24rpx;
-            color: #0275ff;
+            color: #ec3e1a;
             margin: 4rpx;
             margin-right: 14rpx;
         }

package/components/ste-user-info/props.ts

@@ -5,5 +5,6 @@ export default {
     list: { type: Array, default: () => [] },
     codeSrc: { type: String, default: '' },
     codeTitle: { type: String, default: '' },
+    codeTitleColor: { type: String, default: '' },
     showCode: { type: Boolean, default: true },
 };

package/components/ste-user-info/ste-user-info.easycom.json

@@ -40,6 +40,12 @@
             "type": "String",
             "default": ""
         },
+        {
+            "name": "codeTitleColor",
+            "description": "功能码标题颜色",
+            "type": "String",
+            "default": "主题色"
+        },
         {
             "name": "showCode",
             "description": "是否展示功能码相关",

package/components/ste-user-info/ste-user-info.vue

@@ -1,18 +1,66 @@
 <script setup lang="ts">
-import { ref, defineComponent, onMounted } from 'vue';
-
+import { ref, defineComponent, computed, type CSSProperties } from 'vue';
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 import propsData from './props';
 defineComponent({
     name: 'ste-user-info',
 });
 
 const props = defineProps(propsData);
+
+const cmpRootStyle = computed(() => {
+    let style: CSSProperties = {};
+    // 用户信息区域
+    if (props.showUserInfo && props.showCode) {
+        style.padding = '0 24rpx 0 18rpx';
+    }
+    return style;
+});
+
+const cmpDataStyle = computed(() => {
+    let style: CSSProperties = {};
+    if (props.showUserInfo && props.showCode) {
+        if (props.list.length == 1) {
+            style['justify-content'] = 'center';
+            style.margin = '0 0 0 54rpx';
+        }
+        if (props.list.length == 2) {
+            style['justify-content'] = 'space-between';
+            style.margin = '0 0 0 54rpx';
+        }
+        if (props.list.length == 3) {
+            style['justify-content'] = 'space-between';
+            style.margin = '0 0 0 24rpx';
+        }
+    }
+    return style;
+});
+
+const cmpLineStyle = computed(() => {
+    let style: CSSProperties = {};
+    if (props.showUserInfo && props.showCode) {
+        if (props.list.length == 0 || props.list.length == 1 || props.list.length == 2) {
+            style.margin = '0 40rpx 0 44rpx';
+        }
+        if (props.list.length == 3) {
+            style.margin = '0 22rpx 0 28rpx';
+        }
+    }
+    return style;
+});
+
+const cmpCodeStyle = computed(() => {
+    let style: CSSProperties = {};
+    style.color = props.codeTitleColor ? props.codeTitleColor : getColor().steThemeColor;
+    return style;
+});
 </script>
 
 <template>
     <view class="ste-user-info-root">
-        <view class="box">
-            <view class="user-box">
+        <view class="box" :style="[cmpRootStyle]">
+            <view class="user-box" v-if="showUserInfo">
                 <view class="left">
                     <ste-image :width="80" :height="80" :src="avatar"></ste-image>
                 </view>
@@ -23,14 +71,21 @@ const props = defineProps(propsData);
                     </view>
                 </view>
             </view>
-            <view class="data-box">
+            <view class="data-box" :style="[cmpDataStyle]">
                 <view class="item" v-for="(item, index) in list" :key="index">
                     <view class="value">{{ item.value }}</view>
                     <view class="title">{{ item.title }}</view>
                 </view>
             </view>
-            <view class="line"></view>
-            <view class="code-box"></view>
+            <view class="line" v-if="showUserInfo && showCode" :style="[cmpLineStyle]"></view>
+            <view class="code-box" v-if="showCode">
+                <view class="top">
+                    <ste-image :src="codeSrc" :height="60" :width="60"></ste-image>
+                </view>
+                <view class="bottom" :style="[cmpCodeStyle]">
+                    {{ codeTitle }}
+                </view>
+            </view>
         </view>
     </view>
 </template>
@@ -44,6 +99,7 @@ const props = defineProps(propsData);
         border-radius: 12rpx;
         display: flex;
         align-items: center;
+        justify-content: space-around;
 
         .user-box {
             display: flex;
@@ -75,7 +131,6 @@ const props = defineProps(propsData);
 
         .data-box {
             display: flex;
-            justify-content: space-evenly;
             flex: 1;
             .item {
                 .title {
@@ -96,6 +151,34 @@ const props = defineProps(propsData);
                 }
             }
         }
+        .line {
+            width: 0rpx;
+            height: 50rpx;
+            border-left: 4rpx solid #f1f1f1;
+        }
+
+        .code-box {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .top {
+                text-align: center;
+                width: 60rpx;
+                height: 60rpx;
+                background: #dddddd;
+                border-radius: 12rpx;
+            }
+
+            .bottom {
+                margin-top: 8rpx;
+                height: 34rpx;
+                line-height: 34rpx;
+                font-size: 24rpx;
+                color: #ec3e1a;
+                text-align: center;
+            }
+        }
     }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.20.15",
+    "version": "1.20.17",
     "description": "",
     "author": "",
     "license": "MIT",

package/utils/System.ts

@@ -71,7 +71,7 @@ export default class System {
             // #ifdef MP-WEIXIN
             let windowInfo = wx.getWindowInfo();
             windowInfo.safeAreaInsets = {
-                bottom: windowInfo.screenHeight - windowInfo.safeArea.bottom,
+                bottom: (windowInfo?.screenHeight ?? 812) - (windowInfo?.safeArea?.bottom ?? 778),
             };
             return windowInfo;
             // #endif