cb-biz-ui 1.1.4

package/components/cb-form-select/cb-form-select.vue

@@ -0,0 +1,250 @@
+<template>
+  <view
+    class="form-select"
+    :style="{
+      padding: getPadding,
+      background: getBgColor
+    }"
+  >
+    <view class="form-select_center" @tap="popup">
+      <view class="content">
+        <view
+          class="label"
+          :style="{
+            width: labelCenter ? labelWidth + 'rpx' : ''
+          }"
+          >{{ label }}
+
+          <view
+            class="asterisk"
+            v-if="asterisk"
+            :style="{ color: '#EB0909', right: asteriskRight + 'rpx' }"
+            >*</view
+          >
+        </view>
+        <view class="placeholder" v-if="!getValue()">{{ placeholder }}</view>
+        <view class="form-value" v-else>{{ getValue() }}</view></view
+      >
+      <view
+        class="ui-cell__arrow"
+        :style="{ borderColor: getArrowColor, right: arrowRight + 'rpx' }"
+        v-if="arrow"
+      ></view>
+    </view>
+    <view
+      v-if="bottomBorder"
+      :style="{
+        background: getBorderColor,
+        left: left + 'rpx',
+        right: right + 'rpx'
+      }"
+      class="border-bottom"
+    ></view>
+    <ui-bottom-popup
+      :radius="false"
+      :zIndex="1002"
+      :maskZIndex="1001"
+      :show="popupShow"
+      @close="popup"
+    >
+      <view class="popup-box">
+        <view class="title">{{ placeholder }}</view>
+        <ui-radio-group @change="radioChange">
+          <ui-label v-for="item in copyList" :key="item.value">
+            <ui-list-cell>
+              <view class="radio-center">
+                <ui-radio
+                  :checked="item.checked"
+                  :value="item.value"
+                  color="#07C160"
+                  borderColor="#6D7278"
+                >
+                </ui-radio>
+                <text class="text" v-if="!item.itemValue">{{
+                  item.label
+                }}</text>
+                <view class="item-value" v-else>
+                  <ui-input
+                    :placeholder="item.itemValue.startPlaceholder"
+                    v-model="item.itemValue.start"
+                  ></ui-input>
+                  <text class="icon">-</text>
+                  <ui-input
+                    :placeholder="item.itemValue.endPlaceholder"
+                    v-model="item.itemValue.end"
+                  ></ui-input>
+                </view>
+              </view>
+            </ui-list-cell>
+          </ui-label>
+        </ui-radio-group>
+        <view class="tools">
+          <ui-form-button
+            width="200rpx"
+            height="70rpx"
+            color="#07C160"
+            background="rgba(0, 0, 0, 0.05)"
+            size="30"
+            borderWidth="0"
+            @click="close"
+            >取消</ui-form-button
+          >
+          <view style="width: 32rpx"></view>
+          <ui-form-button
+            width="200rpx"
+            height="70rpx"
+            color="#fff"
+            background="#07C160"
+            size="30"
+            borderWidth="0"
+            @click="confirm"
+            >完成</ui-form-button
+          >
+        </view>
+      </view>
+    </ui-bottom-popup>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { loopGetObjectValue } from '../../libs/utils';
+interface listType {
+  label: string;
+  value: string | number;
+  checked: boolean;
+  itemValue?: { start: string; end: string };
+}
+interface IProps {
+  label: string;
+  placeholder: string;
+  arrowColor?: string;
+  arrow?: boolean;
+  arrowRight?: number | string;
+  padding?: string;
+  background?: string;
+  asterisk?: boolean;
+  asteriskRight?: number;
+  labelCenter?: boolean;
+  labelWidth?: number | string;
+  bottomBorder?: boolean;
+  borderColor?: string;
+  left?: number | string;
+  right?: number | string;
+  list: listType[];
+  value?: string | number;
+  disabled?: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+  label: '',
+  placeholder: '请选择',
+  arrow: true,
+  arrowColor: '',
+  arrowRight: 30,
+  asterisk: false,
+  asteriskRight: 6,
+  labelCenter: false,
+  labelWidth: 160,
+  bottomBorder: true,
+  borderColor: '',
+  left: 30,
+  right: 0,
+  list: [],
+  disabled: false
+});
+const emit = defineEmits<{
+  (e: 'confirm', item: listType, list: listType[]): void;
+}>();
+
+const copyList = ref(JSON.parse(JSON.stringify(props.list || [])));
+const popupShow = ref(false);
+
+const getArrowColor = computed(() => {
+  return (
+    props.arrowColor ||
+    loopGetObjectValue(['uiListCell', 'arrowColor'], uni.$ui) ||
+    '#c0c0c0'
+  );
+});
+const getPadding = computed(() => {
+  return (
+    props.padding ||
+    loopGetObjectValue(['uiFormItem', 'padding'], uni.$ui) ||
+    '26rpx 30rpx'
+  );
+});
+const getBgColor = computed(() => {
+  return (
+    props.background ||
+    loopGetObjectValue(['uiFormItem', 'background'], uni.$ui) ||
+    '#fff'
+  );
+});
+const getBorderColor = computed(() => {
+  return (
+    props.borderColor ||
+    loopGetObjectValue(['uiFormItem', 'borderColor'], uni.$ui) ||
+    '#eaeef1'
+  );
+});
+
+const popup = () => {
+  if (props.disabled) return;
+  popupShow.value = !popupShow.value;
+};
+const close = () => {
+  popupShow.value = false;
+};
+
+const confirm = () => {
+  const item = copyList.value.find((v) => v.checked);
+  if (!item) {
+    uni.showToast({
+      title: '请选择',
+      icon: 'none'
+    });
+    return;
+  }
+  if (item.itemValue) {
+    if (!item.itemValue.start || !item.itemValue.end) {
+      uni.showToast({
+        title: '请输入完整内容',
+        icon: 'none'
+      });
+      return;
+    }
+  }
+  console.log(item);
+  emit('confirm', item, JSON.parse(JSON.stringify(copyList.value)));
+  close();
+};
+
+const radioChange = (e) => {
+  const { value } = e.detail;
+  copyList.value.forEach((v) => {
+    if (v.value === value) {
+      v.checked = true;
+    } else {
+      v.checked = false;
+    }
+  });
+};
+const getValue = () => {
+  if (props?.value?.itemValue) {
+    return props?.value?.itemValue?.start + '-' + props?.value?.itemValue?.end;
+  }
+  if (props?.value?.label) {
+    return props?.value?.label;
+  }
+  return '';
+};
+
+watch(
+  () => props.list,
+  (value, oldValue) => {
+    copyList.value = JSON.parse(JSON.stringify(value));
+  }
+);
+</script>
+<style scoped lang="scss">
+@import '../../libs/css/form-select.scss';
+</style>

package/components/cb-goods-card/cb-goods-card.vue

@@ -0,0 +1,251 @@
+<template>
+  <view class="goods-card bottom-border" @tap="itemTap">
+    <view class="goods-card_image">
+      <ui-lazyload-img
+        :width="imgWidth"
+        :height="imgHeight"
+        radius="8rpx"
+        :draggable="false"
+        :placeholder="imagePlaceholder"
+        backgroundColor="#f9f9f9"
+        :mode="imageMode"
+        :src="entity.image || ''"
+      ></ui-lazyload-img>
+      <!-- <view
+        :style="{
+          width: imgWidth,
+          height: imgHeight,
+        }"
+        v-if="errStatusText"
+        class="goods-status_error"
+        >{{ errStatusText }}</view
+      > -->
+    </view>
+    <view class="goods-card_info">
+      <view class="goods-card_info_title">
+        <ui-overflow-hidden size="24rpx">
+          <text class="text" :style="{ fontSize: textFontSize.title }">{{
+            entity.name
+          }}</text>
+        </ui-overflow-hidden>
+      </view>
+      <view class="goods-card_info_tag" v-if="entity.hasDiscount">
+        <ui-tag
+          type="danger"
+          padding="6rpx 10rpx"
+          :size="textFontSize.tag"
+          plain
+          ><view class="tag-box">
+            <image
+              class="icon icon_yh"
+              src="https://shop-cdn.cbyzx.com/shop23n05y18abcd/img/5131a04c08bf4c80b73291f82186ce46.png"
+            />
+
+            <text>{{ getDiscount(entity.discount) }}</text>
+          </view></ui-tag
+        >
+      </view>
+      <view class="goods-card_info_sales-volume">
+        <text
+          class="goods-card_info_sales-volume_text"
+          :style="{ fontSize: textFontSize.salesVolume }"
+          >销量{{ ` ` }}{{ entity.saleCnt || 0 }}
+        </text>
+      </view>
+      <view class="goods-card_info_price">
+        <text
+          class="goods-card_info_price_preferential-price"
+          :style="{ fontSize: textFontSize.preferentialPrice }"
+        >
+          ￥{{ price }}/{{ entity?.unitTitle || '件' }}
+        </text>
+        <text
+          class="goods-card_info_price_price"
+          v-if="entity.hasDiscount"
+          :style="{ fontSize: textFontSize.price }"
+        >
+          ￥{{ entity.marketPriceShow }}/{{ entity.unitTitle || '件' }}
+        </text>
+      </view>
+      <view class="goods-card_info_status" v-if="errStatusText">
+        <text class="goods-card_info_status_text">{{ errStatusText }}</text>
+      </view>
+      <view class="goods-card_info_add" v-else>
+        <view
+          @tap.stop="addClick"
+          v-if="!goodsCount"
+          class="goods-card_info_add_icon"
+        >
+          <ui-icon name="add" :size="19" color="red"></ui-icon>
+        </view>
+        <view v-else class="number-box" @tap.stop="() => {}">
+          <ui-numberbox
+            :value="goodsCount"
+            :min="0"
+            :max="
+              entity.unlimitedInventory
+                ? 99999
+                : entity.inventoryCapacity || 100
+            "
+            @change="change"
+            @triggerMax="triggerMax"
+            :border="true"
+            :width="65"
+            :iconSize="19"
+            :size="22"
+            :step="1"
+            :backgroundColor="textFontSize.numberBoxBg"
+            iconColor="#C7C7CC"
+          ></ui-numberbox>
+        </view>
+        <ui-cubic-bezier
+          v-if="bezier"
+          right="0"
+          bottom="0"
+          :windowWidth="state.windowWidth"
+          :windowHeight="state.windowHeight"
+          :position="{ right: 110, bottom: 15 }"
+          direction="down"
+          :index="0"
+          @click="addClick"
+        ></ui-cubic-bezier>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, computed } from 'vue';
+import type { GoodsDataType, changeValueType } from '../interface/types';
+
+interface IProps {
+  entity: GoodsDataType;
+  goodsCount: number;
+  imgWidth?: string;
+  imgHeight?: string;
+  bezier?: boolean;
+  goodMin?: number;
+  imagePlaceholder?: string;
+  imageMode?:
+    | 'scaleToFill'
+    | 'aspectFit'
+    | 'aspectFill'
+    | 'widthFix'
+    | 'top'
+    | 'bottom'
+    | 'center'
+    | 'left'
+    | 'right'
+    | 'top left'
+    | 'top right'
+    | 'bottom left'
+    | 'bottom right';
+  textFontSize?: {
+    title: string;
+    tag: string;
+    salesVolume: string;
+    preferentialPrice: string;
+    price: string;
+    numberBoxBg?: string;
+  };
+}
+const props = withDefaults(defineProps<IProps>(), {
+  imgWidth: '225rpx',
+  imgHeight: '225rpx',
+  goodMin: 0,
+  goodsCount: 0,
+  bezier: true,
+  imagePlaceholder:
+    'https://shop-cdn.cbyzx.com/shop23n05y18abcd/img/3544375090854cd099d72edb09dce492.png',
+  imageMode: 'aspectFill',
+  textFontSize: {
+    title: '24rpx',
+    tag: '18rpx',
+    salesVolume: '20rpx',
+    preferentialPrice: '24rpx',
+    price: '20rpx',
+    numberBoxBg: '#fff'
+  },
+  entity: {
+    goodSrc: '',
+    title: '',
+    preferentialPrice: 0,
+    status: 0,
+    unit: '份'
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'countChange', value: changeValueType, entity: GoodsDataType): void;
+  (e: 'handleClick', entity: GoodsDataType): void;
+}>();
+
+const price = computed(() => {
+  return props.entity.hasDiscount
+    ? props.entity.platformPriceShow
+    : props.entity.marketPriceShow;
+});
+const errStatusText = computed(() => {
+  if (props.entity.saleStatus === 20) {
+    return '已失效';
+  }
+  if (!props.entity.existInventory) {
+    return '无货';
+  }
+});
+
+const state = reactive({
+  windowWidth: 375,
+  windowHeight: 667
+});
+
+const getDiscount = (discount: number | string) => {
+  // if (discount === '' || discount === null || discount === undefined) return ''
+  // const value = Number(discount) * 10
+  return `${discount} 折`;
+};
+
+const change = (val: changeValueType) => {
+  // if (val.value > item.skuInfo.inventoryCapacity) {
+  //   uni.showToast({
+  //     title: '库存不足,最大库存为' + item.skuInfo.inventoryCapacity,
+  //     icon: 'none',
+  //   })
+  // }
+  emit('countChange', val, props.entity);
+};
+
+const triggerMax = () => {
+  uni.showModal({
+    title: '提示',
+    content: '库存不足,最大库存为' + props.entity.inventoryCapacity,
+    showCancel: false
+  });
+};
+
+const load = () => {
+  let sys = uni.getSystemInfoSync();
+  state.windowWidth = sys.windowWidth;
+  state.windowHeight = sys.windowHeight;
+};
+
+const itemTap = () => {
+  emit('handleClick', props.entity);
+};
+
+onMounted(() => {
+  load();
+});
+
+const addClick = () => {
+  change({
+    value: props.goodsCount + 1,
+    type: 'plus',
+    index: 0,
+    custom: {}
+  });
+};
+</script>
+<style scoped lang="scss">
+@import '../../libs/css/goods-card.scss';
+</style>