feat: init

package.json

@@ -13,7 +13,7 @@
     "@qg/cherry-ui": "^2.23.5",
     "@qg/js-bridge": "^1.1.9",
     "@qg/qg-scroll": "^1.4.2",
-    "@qg/ui-request": "^0.0.5",
+    "@qg/ui-request": "^0.0.20",
     "core-js": "^3.6.5",
     "js-cookie": "^2.2.1",
     "raven-js": "^3.27.2",

src/api/demo.auth.js

-import config from '@/config';
-import { saDeviceId } from '@/service/sa.service';
-import http from '@/service/httpDecorator';
-const { talosHost } = config;
-
-export default {
-  // 猜你喜欢-（商品详情页）
-  recommendLike: async function() {
-    // return http.get(talosHost + '/vcc/xyqb/recommend/like');
-    return http.get(`${talosHost}/vcc/xyqb/recommend/goods-list`, {
-      customHeader: {
-        scDeviceId: await saDeviceId()
-      }
-    });
-  }
-};

src/api/groupBuy.js

+import config from '@/config';
+import http from '@/service/httpDecorator';
+const { talosHost } = config;
+
+export default {
+  // 查询商品sku详情
+  detailInfo: params => {
+    return http.get(`${talosHost}/api/kdsp/sku-info/detail/query`, { params });
+  },
+  // 详情图片
+  getDetailPic: url => {
+    return http.get(url, { strategy: 'default', hideLoading: 1, skip: 1, hideToast: 1 });
+  },
+  // 商品详情地址列表
+  addrList(data) {
+    return http.get(`${talosHost}/api/kdsp/addr/receiver/list`, data, {
+      hideLoading: true
+    });
+  }
+};

src/config/env.config.js

-/*
- * @Description:
- * @Date: 2021-03-31 19:59:17
- * @LastEditors: gzw
- * @LastEditTime: 2021-03-31 19:59:17
- */
 /*
  * @Description:
  * @Date: 2021-03-31 19:59:12
  * @LastEditors: gzw
- * @LastEditTime: 2021-03-31 19:59:13
+ * @LastEditTime: 2021-08-03 16:53:39
  */
-let protocol = window.location.protocol;
-
-let payHost = protocol + '//mapi-qa.liangkebang.net/pay';
-let shenceHost = 'https://bn.xyqb.com/sa?project=default'; // 测试地址
-let talosHost = 'https://talos-vcc2.liangkebang.net'; // 电商分期测试环境服务地址
-let operatorHost = 'https://operator.liangkebang.com';
+const protocol = window.location.protocol;
+const qiniuHost = protocol + '//kdspstatic.q-gp.com/';
+const shenceHost = 'https://bn.xyqb.com/sa?project=default'; // 测试地址
+const talosHost = 'https://talos-tob.liangkebang.net';
+const faceHost = 'https://auth-tob.liangkebang.net';
+const kdspHost = 'https://kdsp-api-tob.liangkebang.net';
+const VCC_CHANNEL = '';
+const TERMINAL = 'H5';
+const VERSION = '7.9.00';
+// const talosHost = protocol + '//talos.xyqb.com';
 export default {
+  faceHost,
   talosHost,
-  operatorHost,
-  payHost,
   test: true,
-  shenceHost
+  shenceHost,
+  qiniuHost,
+  VCC_CHANNEL,
+  TERMINAL,
+  VERSION,
+  kdspHost
 };

src/config/index.js

-import production from './production.config';
+import production from './prod.config';
 import env from './env.config';
 
 export default process.env.NODE_ENV === 'production' ? production : env;

src/config/production.config.js → src/config/prod.config.js

 const protocol = window.location.protocol;
 const talosHost = protocol + '//talos.xyqb.com';
-const operatorHost = protocol + '//auth.quantgroup.cn';
-// const payHost = protocol + '//mapi.q-gp.com/pay';
-const payHost = protocol + '//payapi.xyqb.com';
+const qiniuHost = protocol + '//kdspstatic.q-gp.com/';
 const shenceHost = 'https://bn.xyqb.com/sa?project=production';
+const faceHost = 'https://auth.quantgroup.cn';
+const VCC_CHANNEL = '';
+const TERMINAL = 'H5';
+const VERSION = '7.9.00';
+const kdspHost = 'https://kdsp-api.q-gp.com';
 export default {
   // apiHost,
+  faceHost,
   test: false,
   shenceHost,
   talosHost,
-  payHost,
-  operatorHost
+  VCC_CHANNEL,
+  TERMINAL,
+  VERSION,
+  qiniuHost,
+  kdspHost
 };

src/filters/img2Thumb.filter.js

+/*
+ * @Description: 根据商品来源匹配
+ * @Date: 2021-04-26 17:47:15
+ * @LastEditors: gzw
+ * @LastEditTime: 2021-07-19 15:12:34
+ */
+// const aliRule =
+//   '?x-oss-process=image/resize,l_180,s_180,m_mfit/quality,q_70/interlace,1';
+
+const rules = [
+  {
+    name: 'qiniu',
+    reg: 'kdspstatic',
+    rule: [
+      '?imageMogr2/thumbnail/220x220/quality/75/interlace/1', // png 需要改尺寸
+      '?imageMogr2/thumbnail/360x360/quality/75/interlace/1'
+    ]
+  },
+  {
+    name: 'jd',
+    reg: '360buyimg',
+    rule: ['!q75.dpg', '!q75.dpg'],
+    resize: [
+      { from: 'jfs', to: 's220x220_jfs' },
+      { from: 'jfs', to: 's360x360_jfs' }
+    ]
+  },
+  {
+    name: 'tencent',
+    reg: 'img.lkbang',
+    rule: [
+      '?imageMogr2/thumbnail/220x220/quality/75/interlace/1',
+      '?imageMogr2/thumbnail/360x360/quality/75/interlace/1'
+    ]
+  }
+];
+
+export default function Img2Thumb(url, level = 0) {
+  if (!url) return '';
+  url = url.replace('http://', 'https://');
+  if (url.indexOf('imageMogr2') > -1 || url.indexOf('.dpg') > -1) return url;
+  let rule = '';
+  for (let idx = 0; idx < rules.length; idx++) {
+    const item = rules[idx];
+    if (url.indexOf(item.reg) > -1) {
+      rule = item;
+      break;
+    }
+  }
+  if (!rule) return url;
+  if (rule.resize) url = url.replace(rule.resize[level].from, rule.resize[level].to);
+  return url + rule.rule[level];
+}

src/main.js

@@ -11,6 +11,7 @@ import Bridge from '@qg/js-bridge';
 import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
 import { release } from '../.sentryclirc';
+import lazyload from '@qg/cherry-ui/src/lazyload/index';
 if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') {
   Raven.config('//21779c2dcb594299bdc803c5560cfecd@sentry.q-gp.com/60', {
     release,
@@ -22,7 +23,7 @@ if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production')
 Vue.prototype.util = new Bridge();
 
 saService.init(router);
-
+Vue.use(lazyload);
 Vue.config.productionTip = false;
 
 new Vue({

src/router/groupBuy.js

+module.exports = [
+  {
+    path: '/groupBuy/skuInfo',
+    name: 'groupBuySkuInfo',
+    component: () => import('../views/goodsDetail/index.vue'),
+    meta: { title: '组团0元购' }
+  }
+];

src/router/routes.js

+const groupBuy = require('./groupBuy');
 export default [
   {
     path: '/',
     redirect: '/error'
   },
-  {
-    path: '/demo',
-    alias: ['/demo-page'],
-    name: 'demo-page',
-    back: false,
-    meta: {
-      title: 'DEMO',
-      has: {
-        header: true,
-        footer: true
-      }
-    },
-    component: () => import('../views/demo')
-  },
+  ...groupBuy,
   {
     path: '/error',
     name: 'error',

src/service/cherryUI.service.js

@@ -7,6 +7,8 @@ import {
   Icon,
   Cell,
   CellGroup,
+  Radio,
+  RadioGroup,
   Row,
   Col,
   Dialog,
@@ -24,7 +26,36 @@ import {
   Form,
   Sticky,
   Tab,
-  Tabs
+  Tabs,
+  Empty,
+  Swipe,
+  SwipeItem,
+  Tabbar,
+  TabbarItem,
+  BackTop,
+  Stepper,
+  AddressEdit,
+  SubmitBar,
+  CouponList,
+  Switch,
+  AddressList,
+  Collapse,
+  CollapseItem,
+  Uploader,
+  IndexList,
+  IndexListItem,
+  Tag,
+  ActionSheet,
+  Steps,
+  Step,
+  Notify,
+  CountDown,
+  PwdField,
+  AuthcodeField,
+  Skeleton,
+  Card,
+  Progress,
+  GoodsAction
 } from '@qg/cherry-ui';
 import DialogFn from '@qg/cherry-ui/src/dialog/func';
 // import "@qg/cherry-ui/dist/cherry.css";
@@ -33,6 +64,8 @@ Vue.use(Button);
 Vue.use(Image);
 Vue.use(Cell);
 Vue.use(CellGroup);
+Vue.use(Radio);
+Vue.use(RadioGroup);
 Vue.use(Row);
 Vue.use(Col);
 Vue.use(Popup);
@@ -46,12 +79,40 @@ Vue.use(Form);
 Vue.use(Icon);
 Vue.use(Sticky);
 Vue.use(Overlay);
-Vue.use(Form);
 Vue.use(CardList);
 Vue.use(Loading);
 Vue.use(List);
 Vue.use(Tab);
 Vue.use(Tabs);
+Vue.use(Empty);
+Vue.use(Swipe);
+Vue.use(SwipeItem);
+Vue.use(Tabbar);
+Vue.use(TabbarItem);
+Vue.use(Stepper);
+Vue.use(BackTop);
+Vue.use(AddressEdit);
+Vue.use(SubmitBar);
+Vue.use(CouponList);
+Vue.use(Switch);
+Vue.use(AddressList);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Uploader);
+Vue.use(IndexList);
+Vue.use(IndexListItem);
+Vue.use(Tag);
+Vue.use(ActionSheet);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Notify);
+Vue.use(CountDown);
+Vue.use(PwdField);
+Vue.use(AuthcodeField);
+Vue.use(Skeleton);
+Vue.use(Card);
+Vue.use(Progress);
+Vue.use(GoodsAction);
 
 // const _proto = Vue.prototype;
 // const proto = Object.create(_proto);

src/service/httpDecorator.js

 import HttpRequest from '@qg/ui-request';
 import { Toast } from '@qg/cherry-ui';
 import store from '@/store';
+import { appVersion } from '@/service/validation.service';
+
 const http = new HttpRequest(
   {},
-  {},
+  {
+    headers: {
+      'x-user-terminal': 'H5',
+      version: appVersion || '7900'
+    }
+  },
   function(msg) {
     Toast(msg);
   },
   function(loadingState) {
     store.dispatch('change_loading', loadingState);
   }
-);
-
+).getInstance();
 export default http;

src/style/index.less

@@ -2,7 +2,7 @@
 @import 'var.less';
 @import 'mixins.less';
 @import 'iconfont.less';
-
+@import 'icon.less';
 html,
 body,
 #app {
@@ -18,6 +18,13 @@ body {
   font-family: @font-family;
   background-color: @background-color;
 }
+button{
+  border:0;
+}
+.tel {
+  color: #5371E0;
+  font-size: 12px;
+}
 .page {
   background-size: contain;
   background-color: @background-color;
@@ -88,6 +95,12 @@ strong {
     min-height: calc(100% - @nav-bar-height);
   }
 }
+.has-tab-bar {
+  .app {
+    height: calc(100% - @tab-bar-height);
+    min-height: calc(100% - @tab-bar-height);
+  }
+}
 .cr-dialog--confirm, .cr-dialog--confirm:active {
   color: @red;
 }
@@ -102,3 +115,15 @@ strong {
     border-bottom: 0.026667rem solid #f2f3f5;
     transform: scaleY(0.5);
 }
+
+.ellipsis{
+  overflow:hidden;
+	text-overflow:ellipsis;
+	white-space:nowrap
+}
+.cr-dialog--header {
+  padding: @padding-xl;
+  &--isolated {
+    padding-bottom: 0;
+  }
+}
\ No newline at end of file

src/style/mixins.less

@@ -7,3 +7,44 @@
   margin-bottom: constant(safe-area-inset-bottom);
   margin-bottom: env(safe-area-inset-bottom);
 }
+
+
+.countdown-mixin(@txtColor, @bgColor, @colonColor, @txtSize, @txtWeight) {
+  .cr-count-down {
+    font-size: 10px;
+    span {
+      box-sizing: border-box;
+      display: inline-block;
+      text-align: center;
+      height: @txtSize;
+      line-height: @txtSize+1;
+      font-weight: @txtWeight;
+    }
+  }
+  .block {
+    background-color: @bgColor;
+    color: @txtColor;
+    border-radius: 3.2px;
+    width: @txtSize;
+  }
+  .colon {
+    color: @colonColor;
+    width: 12px;
+    margin: 0 2px;
+  }
+}
+.through-line-mixin(@color) {
+  position: relative;
+  &:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -5%;
+    margin: auto;
+    width: 110%;
+    height: 1px;
+    background-color: @color;
+  }
+}
\ No newline at end of file

src/style/theme.less

 // 覆盖cherry-ui样式
 @import "./var.less";
-@button-border-width: 0;
+@button-border-width: 1px;
 @button-default-height: 37px;
 @button-default-line-height: 37px;
 @button-default-font-size: 16px;
+@button-default-color: @gray-4;
+@button-default-border-color: @gray-4;
 @button-primary-color: @white;
 @button-primary-background-color: @gradient-red;
 @button-danger-background-color: @red;
 @button-danger-border-color: @red;
 @button-large-height: 48px;
 @button-large-line-height: 48px;
-
+@image-placeholder-text-color: @gray-4;
 @field-error-message-color: @red-dark;
 @field-error-message-font-size: 12px;
 @field-error-placeholder-color: @red-dark;
-
+@index-list-bar-font-size: 11px;
 @checkbox-icon-border: @border-width-base solid @gray-2;
 @checkbox-label-color: @text-color;
 @checkbox-checked-color: @white;
@@ -30,16 +32,19 @@
 @cell-icon-size: 16px;
 @field-label-width: 75px;
 
-@dialog-width: 290px;
-@dialog-font-size: 14px;
 @dialog-border-radius: @border-radius-lg;
-@dialog-message-font-size: 16px;
-@dialog-has-title-message-text-color: @text-color;
-@dialog-confirm-button-text-color: @red;
+@dialog-has-title-message-text-color: @text-grey;
 
 @navbar-default-height: @nav-bar-height;
 @picker-toolbar-padding: @padding-unit - 2 @padding-md;
 @picker-font-size: 14px;
 
-@loading-color: @white;
-@loading-text-color: @white;
\ No newline at end of file
+@empty-description-color: @gray-4;
+
+@tabs-nav-background-color: @background-color;
+
+@list-text-color: @gray-4;
+
+@index-list-title-color: @gray-5;
+
+@back-top-txt-color: @gray-5;
\ No newline at end of file

src/style/var.less

+// page Colors
+@page-color-base: #F7F8FA;
+
 // Color Palette
 @black: #333333;
 @white: #fff;
@@ -6,16 +9,27 @@
 @gray-3: #c8c9cc;
 @gray-4: #999999;
 @gray-5: #666666;
+@gray-6: #f8f8f8;
+@gray-7: #D8D8D8;
 @red: #ec1500;
 @red-light: #ec3333;
 @red-dark: #ee0a24;
 @orange: #faab0c;
+@red-btn:#FF5D00;
 
 @grey-border: #f2f3f5;
 // Gradient Colors
 @gradient-red: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
 @gradient-pink: linear-gradient(180deg, #fff7f0 0%, #ffe4dc 100%);
+@primary-bg: {
+  background-image: linear-gradient(269deg, #FF4B00 12%, #FF7705 86%);
+  background-image: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
+}
+
+@cherry-color-error: #dd524d;
 
+@text-color-red:#E81800;
+@text-color-light: #FF5A4B;
 // Component Colors
 @text-color: @black;
 @text-grey: @gray-4;
@@ -37,16 +51,23 @@
 
 // Padding
 @padding-unit: 4px;
+@padding-x: @padding-unit + 2;
 @padding-xs: @padding-unit * 2;
 @padding-sm: @padding-unit * 3;
 @padding-md: @padding-unit * 4;
 @padding-lg: @padding-unit * 5;
 @padding-xl: @padding-unit * 8;
+@padding-sd: @padding-xs + 4;
+
+@font-color-disabled: #C0C4CC;
+@font-color-dark: #333333;
+@font-color-light: #909399;
+@font-color-red: #F23E33;
 
 // Font
-@font-size-list: 10,11, 12, 13, 14, 16, 17, 18, 20, 26, 28, 30, 52;
+@font-size-list: 10,11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 52, 40;
 
-.generate-text(12);
+.generate-text(15);
 .generate-text(@n, @i: 1) when (@i =< @n) {
   @font: extract(@font-size-list, @i);
   .text-@{font} {
@@ -71,3 +92,40 @@
 
 // 页面顶部header高度
 @nav-bar-height: 48px;
+
+@tab-bar-height: 50px;
+
+/* 页面左右间距 */
+@page-row-spacing: 15px;
+
+/* 行为相关颜色 */
+@color-primary:#fa436a;
+
+// 灰色
+// 主要操作按钮背景色
+@background-primary: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
+@background-coupon: linear-gradient(270deg, #F76B1C 0%, #FFC049 100%);
+
+/*文字颜色*/
+@font-color-dark: #333333;
+@font-color-base: #606266;
+@font-color-light: #909399;
+@font-color-disabled: #C0C4CC;
+@font-color-spec: #4399fc;
+@font-color-search: #EC1500;
+@font-color-red: #F23E33;
+// @font-color-red: #EC3333;
+@font-color-red: #F23E33;
+
+// 边框
+@border-sm: 2rpx;
+@border-md: 4rpx;
+@border-gray: #999;
+@border-red: #EC1500;
+
+/* 边框颜色 */
+@border-color-dark: #DCDFE6;
+@border-color-base: #E4E7ED;
+@border-color-light: #EBEEF5;
+@border-color-search: #EC1500;
+

src/views/demo/index.less

-@import '../../style/var.less';
-
-.page {
-  padding: @page-padding-lg @page-padding-lg 0;
-  height: calc(100% - @page-padding-lg);
-}
-
-.banner {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  background-image: @gradient-red;
-  background-repeat: no-repeat;
-  margin: -1 * @page-padding-lg -1 * @page-padding-lg 48px -1 * @page-padding-lg;
-  padding: @padding-md @padding-lg 0;
-
-  
-}
-.card {
-  &__icon {
-    height: 200px;
-    width: 200px;
-    margin: 0 auto;
-    display: block;
-  }
-
-  &__info {
-    padding: 20px 0;
-    color: #fff;
-    font-size: 28px;
-    text-align: center;
-  }
-}

src/views/demo/index.vue

-<template>
-  <div class="page">
-    <div class="banner">
-      <div class="card">
-        <p class="card__info">{{ list.length }}</p>
-      </div>
-    </div>
-    <svg-icon icon-class="ufo" class="card__icon" />
-  </div>
-</template>
-<script>
-import demoApi from '@/api/demo.auth';
-export default {
-  data() {
-    return {
-      list: []
-    };
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    async getList() {
-      const res = await demoApi.recommendLike();
-      this.list = res;
-    }
-  }
-};
-</script>
-<style lang="less" src="./index.less" scoped></style>

src/views/goodsDetail/components/detailInfo.vue

+<template>
+  <div class="goods-detail">
+    <div class="goods-detail-info">
+      <div class="Gd-info-title">产品信息</div>
+      <div v-for="(item, index) in skuDetailList" :key="index" class="Gd-info-content">
+        <span>{{ item.attsName }}</span>
+        <span>{{ item.attsValue }}</span>
+      </div>
+      <!-- todo 产品信息不全，需要处理 -->
+      <!-- <div v-if="skuDetailList.length" class="Gd-info-all" @click="goInfo">
+        <span>查看全部</span>
+        <span class="iconfont icon-arrow" />
+      </div> -->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    skuDetailList: {
+      type: Array,
+      default: () => []
+    },
+    skuDetailAtts: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    goInfo() {
+      this.$router.push({
+        name: 'info',
+        params: { data: this.skuDetailAtts }
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.goods-detail {
+  background: @white;
+  padding: 0 @padding-sm - 2;
+  margin-bottom: @padding-sm - 4;
+  &-imgs {
+    width: 100%;
+  }
+  &-info {
+    .Gd-info-title {
+      padding: @padding-sm + 4 0 @padding-unit;
+      .text-18();
+      color: @black;
+      font-weight: bold;
+    }
+    .Gd-info-content {
+      display: flex;
+      padding: @padding-unit + 4 0 @padding-sm;
+      span {
+        .text-12();
+        &:first-child {
+          width: 62px;
+          margin-right: @padding-xl - 4;
+          color: @gray-4;
+        }
+        &:last-child {
+          flex: 1;
+          color: @gray-5;
+        }
+      }
+    }
+    .Gd-info-all {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: @padding-unit + 4 0 @padding-sm;
+      width: 100%;
+      .text-12();
+      color: @gray-5;
+      span {
+        &:first-child {
+          margin-right: @padding-x;
+        }
+        &:last-child {
+          .text-12();
+          color: @gray-4;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/goodsDetail/components/goodsCell.vue

+<template>
+  <div class="cell">
+    <div class="cell-left">
+      <span class="cell-left-title">{{ title }}</span>
+      <div class="cell-left-content" :class="{ wrap: wrap }">
+        <slot>{{ content }}</slot>
+      </div>
+    </div>
+    <span v-if="!noArrows" class="cell-right iconfont icon-arrow" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'GoodsCell',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    wrap: {
+      type: Boolean,
+      default: false
+    },
+    noArrows: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.cell {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 35px;
+  background: #fff;
+  &-left {
+    display: flex;
+    .text-13();
+    &-title {
+      color: @gray-4;
+    }
+    &-content {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      color: @black;
+      margin-left: 10px;
+      // max-width: 550px;
+      &.wrap {
+        flex-wrap: wrap;
+      }
+    }
+  }
+  &-right {
+    color: @gray-3;
+    .text-12();
+  }
+}
+</style>