cb-biz-ui 1.1.4

package/libs/css/order-goods.scss

@@ -0,0 +1,63 @@
+.order-goods {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 0;
+  line-height: 1;
+  .image {
+    .goods_image {
+      // width: 116rpx;
+      // height: 116rpx;
+    }
+  }
+  .goods-info {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+    font-size: 28rpx;
+    color: #333;
+    padding: 5rpx 0;
+    box-sizing: border-box;
+    flex: 1;
+    margin-left: 20rpx;
+    .name {
+      font-weight: 600;
+      line-height: 1.2;
+    }
+    .specifications {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 5rpx;
+      .num {
+        font-size: 24rpx;
+        color: #666666;
+      }
+      .price {
+        .platformPrice {
+          font-weight: 600;
+          width: 100%;
+          color: #ff524f;
+          font-size: 26rpx;
+          font-weight: 600;
+          letter-spacing: 1px;
+          text-align: right;
+        }
+        .only-marketPrice{
+          color: #333;
+          font-weight: 600;
+          font-size: 24rpx;
+        }
+        .marketPrice {
+          margin-top: 12rpx;
+          color: rgb(153, 153, 153);
+          font-size: 24rpx;
+          font-weight: 400;
+          letter-spacing: 1px;
+          text-align: right;
+          text-decoration-line: line-through;
+        }
+      }
+    }
+  }
+}

package/libs/css/order-info.scss

@@ -0,0 +1,89 @@
+.order-info {
+  line-height: 1;
+  background: #fff;
+  margin: 35rpx 0;
+  border-radius: 4rpx;
+  .header {
+    padding: 30rpx 36rpx;
+    font-size: 32rpx;
+    color: #333;
+    font-weight: 600;
+    border-bottom: 1px solid #eaeaea;
+  }
+  .order-info_content {
+    padding: 0 20rpx;
+  }
+
+  .price-list {
+    border-top: 1rpx solid #eaeaea;
+    font-size: 22rpx;
+    color: #666666;
+    padding-top: 15rpx;
+    .item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .label {
+        display: flex;
+        align-items: center;
+        .icon {
+          width: 26rpx;
+          height: 26rpx;
+          margin-right: 7rpx;
+        }
+      }
+      .value {
+        font-weight: 600;
+      }
+    }
+    .active-class {
+      &:active {
+        opacity: 0.8;
+      }
+    }
+    .delivery {
+      margin-bottom: 20rpx;
+      .value {
+        color: #323232;
+      }
+    }
+    .goods-price {
+      margin-bottom: 25rpx;
+      .value {
+        color: #ff524f;
+      }
+    }
+    .discount-coupon {
+      .value {
+        display: flex;
+        align-items: center;
+        margin-right: -5rpx;
+      }
+    }
+  }
+  .count-price {
+    border-top: 1rpx solid #eaeaea;
+    font-size: 22rpx;
+    color: #666666;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 20rpx 0;
+    .item {
+      margin-left: 25rpx;
+      .name {
+        margin-right: 15rpx;
+      }
+      .value {
+        font-weight: 600;
+        color: #323232;
+      }
+    }
+    .discount-coupon {
+      .value {
+        color: #ff524f;
+      }
+    }
+  }
+}

package/libs/css/order-remark.scss

@@ -0,0 +1,68 @@
+.order-remark {
+  padding-top: 30rpx;
+  .order-remark_header {
+    padding: 0 30rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30rpx;
+    color: #333333;
+    font-weight: bold;
+    margin-bottom: 30rpx;
+    text-align: center;
+    position: relative;
+    .close {
+      position: absolute;
+      right: 40rpx;
+      &:active{
+        opacity: .8;
+      }
+    }
+  }
+  .content {
+    padding: 0 30rpx;
+  }
+  .tag-content {
+    margin-top: 20rpx;
+    padding: 0 30rpx;
+    .tip {
+      font-size: 26rpx;
+      color: #6d7278;
+      font-weight: 600;
+      margin-bottom: 20rpx;
+    }
+    .tag-box {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      .tag-item {
+        margin-left: 10rpx;
+        margin-bottom: 10rpx;
+        background: rgb(233, 233, 233);
+        border-radius: 14px;
+        font-size: 12px;
+        padding: 5px 10px;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        cursor: pointer;
+        display: inline-block;
+        max-width: 100%;
+        &:active {
+          background: rgb(242, 20, 12);
+          color: #fff;
+        }
+      }
+    }
+  }
+  .submit {
+    width: 100%;
+    margin-top: 30rpx;
+    box-sizing: border-box;
+    padding: 30rpx 0;
+    background: rgb(255, 255, 255);
+    box-shadow: 0 -4rpx 12rpx #0000000d;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/libs/css/shipping-coupon.scss

@@ -0,0 +1,151 @@
+.shipping-coupon {
+  line-height: 1;
+  display: flex;
+  width: 328rpx;
+  position: relative;
+
+  .background {
+    width: 100%;
+    height: 205rpx;
+    border-radius: 30rpx;
+
+    .coupon-title {
+      border-radius: 10rpx;
+      height: 91rpx;
+      margin: 0 39rpx;
+      text-align: center;
+      box-sizing: border-box;
+      padding-top: 22rpx;
+      margin-top: -25rpx;
+
+      .text {
+        font-size: 25rx;
+        font-weight: 600;
+        text-align: center;
+      }
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    height: 155rpx;
+    box-sizing: border-box;
+    padding: 13rpx 8rpx 9rpx 17rpx;
+    position: absolute;
+    top: 50rpx;
+    border-radius: 0rpx 0rpx 30rpx 30rpx;
+
+    .content-box {
+      width: 100%;
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        height: 100%;
+        padding-top: 8rpx;
+        box-sizing: border-box;
+        flex: 1;
+        color: #fff;
+        font-size: 40rpx;
+        font-weight: 600;
+      }
+
+      .right {
+        display: flex;
+        align-items: center;
+        width: 120rpx;
+        height: 100%;
+        font-size: 20rpx;
+        font-weight: 600;
+
+        .button {
+          width: 120rpx;
+          height: 47rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 22rpx;
+          border-radius: 23.5rpx;
+        }
+      }
+    }
+
+    .validity {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      font-size: 14rpx;
+
+      .date {
+        margin: 0 8rpx;
+      }
+    }
+  }
+}
+
+.red-card {
+  .background {
+    background: linear-gradient(135deg, rgb(81, 178, 252) 0%, rgb(28, 127, 249) 100%);
+
+    .coupon-title {
+      background: linear-gradient(135deg, rgb(231, 253, 255) 0%, rgb(227, 242, 255) 100%);
+
+      .text {
+        color: #333333;
+      }
+    }
+  }
+
+  .content {
+    background: linear-gradient(135deg, rgb(116, 213, 254), rgb(20, 119, 249) 100%);
+    box-shadow: 0px -2px 15px rgba(71, 169, 251, 0.5);
+
+    .content-box {
+      .left {
+        .money {
+          .type {
+            color: #fff;
+          }
+
+          .value {
+            color: #fff;
+          }
+        }
+
+        .rule {
+          color: #fff5db;
+        }
+      }
+
+      .right {
+        .button {
+          color: #197cf9;
+          background: linear-gradient(128.74deg,
+              rgb(255, 255, 255) 5.848%,
+              rgb(195, 233, 255) 94.497%);
+          box-shadow: 0px 2px 8px rgb(0, 107, 239);
+
+          &:active {
+            opacity: 0.8;
+            // box-shadow: 0px 0px 0px rgb(255, 46, 53);
+          }
+        }
+
+        .disabled {
+          background: rgb(178, 185, 192);
+          box-shadow: 0px 2px 8px rgb(0, 107, 239);
+          color: #ffffff;
+        }
+      }
+    }
+
+    .validity {
+      color: #fff5db;
+    }
+  }
+}

package/libs/css/shopping-cart.scss

@@ -0,0 +1,50 @@
+.shopping-cart {
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  background-color: #fff;
+  .goods-card_box {
+    flex: 1;
+  }
+  .bottom-1px-border {
+    position: relative;
+    padding-bottom: 30rpx;
+    padding-top: 29rpx;
+    &:after {
+      content: ' ';
+      position: absolute;
+      transform-origin: center;
+      box-sizing: border-box;
+      pointer-events: none;
+      top: -50%;
+      left: -50%;
+      right: -50%;
+      bottom: -50%;
+      border: 0 solid #eaeaea;
+      transform: scale(0.5);
+      border-bottom-width: 1px;
+    }
+  }
+  .ui-mtop {
+    // margin-top: 24rpx;
+  }
+  .ui-cart-cell {
+    width: 100%;
+    border-radius: 12rpx;
+    // padding: 28rpx 0;
+    overflow: hidden;
+  }
+
+  .ui-goods-item {
+    display: flex;
+    padding: 0 29rpx;
+    box-sizing: border-box;
+  }
+
+  .ui-checkbox {
+    min-width: 50rpx;
+    display: flex;
+    align-items: center;
+  }
+
+}

package/libs/css/sort-icon.scss

@@ -0,0 +1,34 @@
+.sort-icon {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-left: 8rpx;
+  .icon {
+    width: 100%;
+    .up {
+      width: 0px;
+      height: 0px;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 5px solid #dcdcdc;
+      font-size: 0px;
+      line-height: 0px;
+      margin-bottom: 5rpx;
+    }
+    .down {
+      width: 0px;
+      height: 0px;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 5px solid #dcdcdc;
+      font-size: 0px;
+      line-height: 0px;
+    }
+    .up-actived {
+      border-bottom-color: rgb(58, 138, 251);
+    }
+    .down-actived {
+      border-top-color: rgb(58, 138, 251);
+    }
+  }
+}

package/libs/css/store-location.scss

@@ -0,0 +1,66 @@
+.store-location {
+  background: #fff;
+  // margin: 0 38rpx;
+  border-radius: 4rpx;
+  overflow: hidden;
+  line-height: 1;
+  .header {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    // border-bottom: 1rpx solid #eaeaea;
+    padding: 25rpx 36rpx;
+  }
+  .content {
+    display: flex;
+    align-items: center;
+    padding: 25rpx 36rpx;
+    padding-top: 0rpx;
+    padding-right: 79rpx;
+    color: #333;
+    font-size: 28rpx;
+    .logo {
+      .img {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 50%;
+        margin-right: 20rpx;
+      }
+    }
+    .store-info {
+      // margin-left: 45rpx;
+      .store-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15rpx;
+        .title {
+          font-size: 36rpx;
+          font-weight: 600;
+          color: #333;
+          margin-right: 19rpx;
+        }
+        .tag{
+          width: 98rpx;
+          flex-shrink: 0;
+        }
+        .tel {
+          width: 24rpx;
+          height: 24rpx;
+          margin-left: 23rpx;
+        }
+      }
+      .address-box {
+        width: 100%;
+        margin-bottom: 10rpx;
+      }
+      .address {
+        line-height: 1.3;
+      }
+      .address,
+      .time {
+        font-size: 24rpx;
+        color: #666666;
+      }
+    }
+  }
+}

package/libs/css/theme.json

@@ -0,0 +1,10 @@
+{
+  "light": {
+    "navBgColor": "#f8f8f8",
+    "navTxtStyle": "black"
+  },
+  "dark": {
+    "navBgColor": "#292929",
+    "navTxtStyle": "white"
+  }
+}

package/libs/css/unit-select.scss

@@ -0,0 +1,62 @@
+.unit-select {
+  line-height: 1;
+  height: 100%;
+  width: 100%;
+  .header {
+    width: 100%;
+    height: 90rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border-bottom: 1px solid #e5e5e5;
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #333;
+    .icon {
+      position: absolute;
+      left: 25rpx;
+    }
+  }
+  .content {
+    display: flex;
+    height: 100%;
+    font-size: 28rpx;
+    color: rgb(51, 51, 51);
+    .parent {
+      width: 220rpx;
+      height: 100%;
+      overflow-y: scroll;
+      border-right: 1rpx solid #e5e5e5;
+      .item {
+        width: 100%;
+        height: 100rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgb(241, 241, 241);
+      }
+      .actived {
+        background: #fff;
+        color: rgb(66, 107, 199);
+      }
+    }
+    .child {
+      height: 100%;
+      overflow-y: scroll;
+      flex: 1;
+      .item {
+        width: 100%;
+        height: 100rpx;
+        padding: 0 25rpx;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .actived {
+        color: rgb(66, 107, 199);
+      }
+    }
+  }
+}

package/libs/css/vertical-nav.scss

@@ -0,0 +1,27 @@
+.cate-gory {
+  width: 100%;
+}
+
+.cate-gory-item {
+  width: 100%;
+  height: 110rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  font-weight: 400;
+}
+
+.active {
+  position: relative;
+}
+
+.active::before {
+  content: '';
+  position: absolute;
+  border-left: 3rpx solid #ff524f;
+  height: 110rpx;
+  left: 0;
+}
+

package/libs/utils/deep-clone.js

@@ -0,0 +1,36 @@
+// 判断arr是否为一个数组，返回一个bool值
+function isArray(arr) {
+  return Object.prototype.toString.call(arr) === '[object Array]';
+}
+
+// 深度克隆
+function deepClone(obj, cache = new WeakMap()) {
+  if (obj === null || typeof obj !== 'object') return obj;
+  if (cache.has(obj)) return cache.get(obj);
+  let clone;
+  if (obj instanceof Date) {
+    clone = new Date(obj.getTime());
+  } else if (obj instanceof RegExp) {
+    clone = new RegExp(obj);
+  } else if (obj instanceof Map) {
+    clone = new Map(
+      Array.from(obj, ([key, value]) => [key, deepClone(value, cache)])
+    );
+  } else if (obj instanceof Set) {
+    clone = new Set(Array.from(obj, (value) => deepClone(value, cache)));
+  } else if (Array.isArray(obj)) {
+    clone = obj.map((value) => deepClone(value, cache));
+  } else if (Object.prototype.toString.call(obj) === '[object Object]') {
+    clone = Object.create(Object.getPrototypeOf(obj));
+    cache.set(obj, clone);
+    for (const [key, value] of Object.entries(obj)) {
+      clone[key] = deepClone(value, cache);
+    }
+  } else {
+    clone = Object.assign({}, obj);
+  }
+  cache.set(obj, clone);
+  return clone;
+}
+
+export default deepClone;

package/libs/utils/deep-merge.js

@@ -0,0 +1,37 @@
+import deepClone from './deep-clone';
+
+// JS对象深度合并
+function deepMerge(target = {}, source = {}) {
+  target = deepClone(target);
+  if (
+    typeof target !== 'object' ||
+    target === null ||
+    typeof source !== 'object' ||
+    source === null
+  )
+    return target;
+  const merged = Array.isArray(target)
+    ? target.slice()
+    : Object.assign({}, target);
+  for (const prop in source) {
+    if (!source.hasOwnProperty(prop)) continue;
+    const sourceValue = source[prop];
+    const targetValue = merged[prop];
+    if (sourceValue instanceof Date) {
+      merged[prop] = new Date(sourceValue);
+    } else if (sourceValue instanceof RegExp) {
+      merged[prop] = new RegExp(sourceValue);
+    } else if (sourceValue instanceof Map) {
+      merged[prop] = new Map(sourceValue);
+    } else if (sourceValue instanceof Set) {
+      merged[prop] = new Set(sourceValue);
+    } else if (typeof sourceValue === 'object' && sourceValue !== null) {
+      merged[prop] = deepMerge(targetValue, sourceValue);
+    } else {
+      merged[prop] = sourceValue;
+    }
+  }
+  return merged;
+}
+
+export default deepMerge;