cb-biz-ui 1.1.4

package/README.md

@@ -0,0 +1,44 @@
+## 安装
+
+```bash
+# npm方式安装
+npm i cb-biz-ui
+```
+
+## 快速上手
+
+1. `main.js`引入uView库
+
+```js
+// main.js
+import CbBizUi from 'cb-biz-ui';
+Vue.use(CbBizUi);
+```
+
+2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
+
+```css
+/* App.vue */
+<style lang="scss">
+@import "cb-biz-ui/index.scss";
+</style>
+```
+
+3. `uni.scss`引入全局scss变量文件
+```css
+/* uni.scss */
+@import "cb-biz-ui/theme.scss";
+```
+
+4. `pages.json`配置easycom规则(按需引入)
+
+```js
+// pages.json
+{
+ "easycom": {
+  // npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
+  // npm安装方式
+  "^cb-(.*)": "cb-biz-ui/components/cb-$1/cb-$1.vue"
+ }
+}
+```

package/components/cb-address-list/cb-address-list.vue

@@ -0,0 +1,133 @@
+<template>
+  <view class="address">
+    <view v-for="(item, index) in addressList" :key="index" class="addressList">
+      <ui-slide-view
+        :buttons="buttons"
+        width="65rpx"
+        height="230rpx"
+        radius="16rpx"
+        padding="0rpx"
+        margin="0 0 0 29rpx"
+        minWidth="0rpx"
+        @click="handleClick(item.id)"
+      >
+        <view class="ui-list-cell" @click="select(item.id)">
+          <view class="top">
+            <view class="message">
+              <view v-if="item.isDefault == 1" class="default">默认</view>
+              <view class="notes">{{ item.addressTagName }}</view>
+            </view>
+            <view
+              :class="item.chosen ? 'chosen' : 'noChosen'"
+              @click="changeChosen(index)"
+            >
+              <ui-lazyload-img
+                backgroundColor="#ffffff00"
+                width="20rpx"
+                height="14rpx"
+                src="/static/images/chosen.png"
+                v-if="item.chosen"
+              />
+              <ui-lazyload-img
+                backgroundColor="#ffffff00"
+                width="20rpx"
+                height="14rpx"
+                src="/static/images/noChosen.png"
+                v-else
+              />
+            </view>
+          </view>
+          <view class="bottom">
+            <view class="con-l">
+              <view class="addressContent">{{
+                item.provinceName +
+                item.cityName +
+                item.districtName +
+                item.address
+              }}</view>
+              <view class="peopleMes">
+                <view>{{ item.name }}</view>
+                <view>{{ item.phone }}</view>
+              </view>
+            </view>
+            <view class="con-r" @tap.stop="toDetail(item)">
+              <ui-lazyload-img
+                backgroundColor="#ffffff00"
+                width="28rpx"
+                height="28rpx"
+                src="/static/images/change.png"
+              />
+            </view>
+          </view>
+        </view>
+      </ui-slide-view>
+    </view>
+    <view class="addAddress" @click="toDetail('')">
+      {{ addText }}
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+type addressListType = {
+  id: number;
+  isDefault: boolean;
+  chosen: 'chosen' | 'noChosen';
+  provinceName: string;
+  cityName: string;
+  address: string;
+  districtName: string;
+  name: string;
+  phone: string;
+  addressTagName: string;
+};
+type buttonsType = {
+  src: string;
+  width: string;
+  height: string;
+  background: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    addressList: addressListType[];
+    buttons: buttonsType[];
+    addText: string;
+  }>(),
+  {
+    addressList: [],
+    button: [
+      {
+        src: '/static/images/delete_icon.png',
+        width: '20rpx',
+        height: '24rpx',
+        background: 'rgb(255, 82, 79)'
+      }
+    ],
+    addText: '新增收货地址'
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'toDetail', item: addressListType): void;
+  (e: 'handleClick', id: number): void;
+  (e: 'select', id: number): void;
+}>();
+
+const changeChosen = (index: number) => {
+  props.addressList[index].chosen = !props.addressList[index].chosen;
+};
+const toDetail = (item) => {
+  emit('toDetail', item);
+};
+const handleClick = (id) => {
+  emit('handleClick', id);
+};
+const select = (id) => {
+  emit('select', id);
+};
+</script>
+
+<style lang="scss">
+@import '../../libs/css/address-list.scss';
+</style>

package/components/cb-cart-bar/cb-cart-bar.vue

@@ -0,0 +1,52 @@
+<template>
+  <view
+    class="cart-bar"
+    :style="{
+      position: fixed ? 'fixed' : 'relative',
+      top: top ? top + 'rpx' : '',
+      bottom: bottom ? bottom + 'rpx' : ''
+    }"
+  >
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    fixed: boolean;
+    top: number;
+    bottom: number;
+  }>(),
+  {
+    fixed: true,
+    top: null,
+    bottom: 0
+  }
+);
+</script>
+<style scoped lang="scss">
+.cart-bar {
+  width: 100%;
+  height: 100rpx;
+  background: rgba(255, 255, 255, 0.98);
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .cart-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    border-top: 1rpx solid #eaeef1;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+</style>

package/components/cb-cart-bar-button/cb-cart-bar-button.vue

@@ -0,0 +1,36 @@
+<template>
+  <view class="ui-flex-1 cart-bar-button" :style="{ width: width + 'rpx' }">
+    <ui-button
+      height="68rpx"
+      :size="26"
+      :type="type"
+      shape="circle"
+      @click="handleClick"
+      >{{ text }}</ui-button
+    >
+  </view>
+</template>
+<script setup lang="ts">
+interface IProps {
+  width?: number | string;
+  text: string;
+  type?: 'danger' | 'warning';
+}
+const props = withDefaults(defineProps<IProps>(), { width: 200 });
+const emit = defineEmits<{
+  (e: 'handleClick', data: IProps): void;
+}>();
+
+const handleClick = () => {
+  emit('handleClick', props);
+};
+</script>
+<style scoped lang="scss">
+.ui-flex-1 {
+  flex: 1;
+  padding: 6rpx;
+}
+.cart-bar-button {
+  width: 200rpx;
+}
+</style>

package/components/cb-cart-bar-icon/cb-cart-bar-icon.vue

@@ -0,0 +1,48 @@
+<template>
+  <view
+    class="cart-bar-item"
+    hover-class="ui-opcity"
+    :hover-stay-time="150"
+    @tap="handleClick"
+    :style="{
+      width: width + 'rpx'
+    }"
+  >
+    <view class="nut-badge"
+      ><ui-icon :name="icon" :size="22" color="#333"></ui-icon>
+      <view class="nut-badge__content"
+        ><ui-badge
+          v-if="badge"
+          type="red"
+          absolute
+          :scaleRatio="0.8"
+          right="10rpx"
+          top="-4rpx"
+          >{{ badge }}</ui-badge
+        ></view
+      >
+    </view>
+    <view class="cart-bar-text ui-scale-small">{{ text }}</view>
+  </view>
+</template>
+<script setup lang="ts">
+interface IProps {
+  text: string;
+  icon: string;
+  badge?: number;
+  width: number;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  width: 130
+});
+const emit = defineEmits<{
+  (e: 'handleClick', data: IProps): void;
+}>();
+
+const handleClick = () => {
+  emit('handleClick', props);
+};
+</script>
+<style scoped lang="scss">
+@import '../../libs//css/cart-bar-icon.scss';
+</style>

package/components/cb-category/cb-category.vue

@@ -0,0 +1,163 @@
+<template>
+  <view class="category-box">
+    <view class="left-box">
+      <vertical-nav
+        :value="navIndex"
+        @change="navChange"
+        :list="navList"
+        :height="height"
+    /></view>
+    <view class="right-box"
+      ><scroll-view
+        scroll-y
+        :style="{ height: height + 'px' }"
+        :show-scrollbar="false"
+        :enhanced="true"
+      >
+        <view class="tools">
+          <view class="tools_item" @click="inventoryTypeChange"
+            >销量
+            <sort-icon
+              :scale="0.8"
+              :type="inventoryType"
+              borderActivedColor="#FF524F"
+              borderColor="#6D7278"
+            />
+          </view>
+          <view class="tools_item" @click="priceTypeChange"
+            >价格
+            <sort-icon
+              :scale="0.8"
+              :type="priceType"
+              borderActivedColor="#FF524F"
+              borderColor="#6D7278"
+            />
+          </view>
+        </view>
+        <!-- <ui-loading text="加载中" type="row"></ui-loading> -->
+        <ui-loadmore :index="2" v-if="loading"></ui-loadmore>
+
+        <view class="goods-box" v-if="goodsList.length && !loading">
+          <view
+            class="item bottom-1px-border"
+            v-for="item in goodsList"
+            :key="item.shopSpuId"
+          >
+            <goods-card
+              :goods-count="countData[item.defaultShopSkuId]?.count"
+              @handleClick="goDetails"
+              @countChange="countChange"
+              :entity="item"
+          /></view>
+        </view>
+        <ui-no-data
+          :fixed="false"
+          :imgUrl="noDataUrl"
+          marginTop="50"
+          v-if="!goodsList.length && !loading"
+        >
+          <text class="tui-color__black">{{ noDataTip }}</text>
+        </ui-no-data>
+      </scroll-view></view
+    >
+  </view>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import verticalNav from '../cb-vertical-nav/cb-vertical-nav.vue';
+import GoodsCard from '../cb-goods-card/cb-goods-card.vue';
+import SortIcon from '../cb-sort-icon/cb-sort-icon.vue';
+import type {
+  GoodsDataType,
+  cartItemListType,
+  changeValueType
+} from '../interface/types';
+
+interface IProps {
+  navList: { name: string; value: any }[];
+  loading: boolean;
+  height: number;
+  nullData?: {
+    url: string;
+    text: string;
+  };
+  navIndex: number;
+  goodsList: GoodsDataType[];
+  cartItemList?: cartItemListType[];
+  inventoryType?: 'desc' | 'asc' | '';
+  priceType?: 'desc' | 'asc' | '';
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  navList: [],
+  height: 469,
+  goodsList: [],
+  nullData: { url: '', text: '' },
+  cartItemList: [],
+  loading: false
+});
+
+const countData = computed<{ [key: number]: any }>(() => {
+  const list = props.cartItemList || [];
+  const data: { [key: number]: any } = {};
+  list.forEach((v) => {
+    data[v.skuId] = {
+      id: v.id,
+      count: v.count,
+      skuId: v.skuId
+    };
+  });
+  return data;
+});
+
+const emit = defineEmits<{
+  (e: 'goDetails', goodsItem: any): void;
+  (e: 'countChange', val: changeValueType, goodsItem: GoodsDataType): void;
+  (e: 'navChange', navItem: any): void;
+  (
+    e: 'storeChange',
+    params: {
+      sortKey: 'spuSaleCnt' | 'price';
+      orderType: 'desc' | 'asc';
+    }
+  ): void;
+}>();
+
+const noDataUrl = computed(() => {
+  return props.nullData.url || '/static/images/img_noorder_3x.png';
+});
+const noDataTip = computed(() => {
+  return props.nullData.text || '暂无数据~';
+});
+
+const nventoryTypeChange = () => {};
+
+const priceTypeChange = () => {
+  const orderType = props.priceType === 'asc' ? 'desc' : 'asc';
+  emit('storeChange', {
+    sortKey: 'price',
+    orderType
+  });
+};
+const inventoryTypeChange = () => {
+  const orderType = props.inventoryType === 'asc' ? 'desc' : 'asc';
+  emit('storeChange', {
+    sortKey: 'spuSaleCnt',
+    orderType
+  });
+};
+
+const goDetails = (goodsItem: GoodsDataType) => {
+  emit('goDetails', goodsItem);
+};
+
+const countChange = (val: changeValueType, goodsItem: GoodsDataType) => {
+  emit('countChange', val, goodsItem);
+};
+const navChange = (navItem: { name: string; value: any }) => {
+  emit('navChange', navItem);
+};
+</script>
+<style scoped lang="scss">
+@import '../../libs/css/category.scss';
+</style>

package/components/cb-delivery-address/cb-delivery-address.vue

@@ -0,0 +1,48 @@
+<template>
+  <view class="delivery-address" @click="handleClick">
+    <view class="header">
+      <text class="text">{{ title }}</text>
+      <slot name="tools"></slot>
+    </view>
+    <view class="content">
+      <view class="user">
+        <view class="user-info">
+          <text>{{ data.receiverName }}</text>
+          <text>{{ data.receiverPhone }}</text>
+        </view>
+        <view class="address">
+          <text>收货地址：</text>
+          <text class="text">{{ data.address }}</text>
+        </view>
+      </view>
+      <view class="icon-box" v-if="arrow">
+        <ui-icon name="arrowright" :size="23" color="#B3BCCD"></ui-icon>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import type { storeDeliveryType } from '../interface/types';
+
+type IProps = {
+  title: string;
+  arrow?: boolean;
+  data: storeDeliveryType;
+};
+
+const props = withDefaults(defineProps<IProps>(), {
+  arrow: true,
+  title: '收货地址',
+  data: {}
+});
+const emit = defineEmits<{
+  (e: 'handleClick', data: storeDeliveryType): void;
+}>();
+
+const handleClick = () => {
+  emit('handleClick', props.data);
+};
+</script>
+<style scoped lang="scss">
+@import '../../libs/css/delivery-address.scss';
+</style>

package/components/cb-discount-coupon/cb-discount-coupon.vue

@@ -0,0 +1,124 @@
+<template>
+  <view class="discount-coupon red-card">
+    <view class="background">
+      <view class="coupon-title">
+        <text class="text">{{ discountData[data.discountType] }}</text>
+      </view>
+    </view>
+    <view class="content">
+      <view class="info">
+        <view class="money" v-if="data.discountType === 2">
+          <text class="type">¥</text>
+          <text class="value">{{ data.amountStr }}</text>
+        </view>
+        <view class="discount" v-else>
+          <text class="value">{{ ` ` }}{{ data.discountStr }}折</text>
+        </view>
+
+        <view class="rule">
+          <view class="text value"
+            >使用规则：{{ returnWhenOrderCancelStr }}</view
+          >
+          <view class="text value">用户范围：{{ userRuleInfoStr }}</view>
+        </view>
+      </view>
+      <view class="tip-box">
+        <text class="tip">满{{ data.thresholdStr }}可用</text>
+        <view
+          class="button"
+          :class="{ disabled: data.isReceived === 0 ? false : true }"
+          @click="receive"
+          v-if="!use"
+          >{{ data.isReceived === 0 ? '立即领取' : '已领取' }}</view
+        >
+        <view class="radio" v-else>
+          <ui-radio
+            color="#6ba5fd"
+            borderColor="transparent"
+            :value="data.id"
+            :disabled="+data.status !== 0"
+            :checked="checked"
+            @change="select"
+          ></ui-radio>
+        </view>
+      </view>
+      <view class="validity"
+        ><text>有效期:</text><text class="date">{{ receiveEndTime }}</text
+        ><text>过期</text></view
+      >
+    </view>
+
+    <view v-if="showStatus" class="watermark">
+      {{ statusText }}
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { fmtTime } from './utils';
+
+import type { dataTypes } from './interface';
+
+interface IProps {
+  /**优惠劵数据 */
+  data: dataTypes;
+  /**是否使用 */
+  use?: boolean;
+  /**是否已选 */
+  checked?: boolean;
+  /** 是否展示优惠劵状态 */
+  showStatus?: boolean;
+}
+
+type stringObject = { [key: number | string]: string };
+const discountData: {
+  [key: string]: string;
+} = {
+  '1': '抵扣劵',
+  '2': '满减劵',
+  '3': '折扣劵'
+};
+// 用户劵状态
+const statusTextData: stringObject = {
+  '-1': '未生效',
+  '0': '未使用',
+  '1': '已使用',
+  '2': '已过期'
+};
+
+const receiveEndTime = computed(() => {
+  return fmtTime('yyyy-MM-dd', new Date(props.data.receiveEndTime));
+});
+const returnWhenOrderCancelStr = computed(() => {
+  return props.data.useRule.returnWhenOrderCancel === 1
+    ? '退款时返还'
+    : '退款时不返还';
+});
+const userRuleInfoStr = computed(() => {
+  const arr = props.data.userRuleInfo.split('：');
+  return arr[arr.length - 1];
+});
+
+const statusText = computed(() => {
+  const status = props.data.status;
+  return statusTextData[status];
+});
+
+const props = defineProps<IProps>();
+const emit = defineEmits<{
+  (e: 'receive', data: dataTypes): void;
+  (e: 'select', data: dataTypes): void;
+}>();
+
+const receive = () => {
+  emit('receive', props.data);
+};
+const select = () => {
+  emit('select', props.data);
+};
+
+onMounted(() => {});
+</script>
+<style scoped lang="scss">
+@import '../../libs/css/discount-coupon.scss';
+</style>

package/components/cb-discount-coupon/interface.d.ts

@@ -0,0 +1,32 @@
+export interface dataTypes {
+  /** 折扣力度，打折券时候为 0-100，其他情况下为折扣金额 */
+  discount: number
+  /** 金额 */
+  amount: number
+  /** 金额 */
+  amountStr: string
+  /** 折扣力度 */
+  discountStr: string
+  /** 使用规则 */
+  userRuleInfo: string
+  /** 领取状态 0 未领取， 1 已领取 */
+  isReceived: number
+  /** 有效期 */
+  receiveEndTime: string
+  /** 折扣类型， 1 抵扣， 2 满减， 3 折扣 */
+  discountType: number
+  /** 门槛 单位分 */
+  threshold: number
+  /** 门槛 */
+  thresholdStr: string
+  /** 名称 */
+  name: string
+  /** //状态 用户券：-1 未生效，  0 未使用， 1 已使用， 2已过期， 店铺券： 0 未开始， 1 进行中， 2 已结束 */
+  status: '-1' | '0' | '1' | '2'
+  /** 优惠券id */
+  id: number
+  useRule: {
+    returnWhenOrderCancel: number // 退款时是否返还 0 不返还 1 返还
+  }
+}
+