支付开发

package-lock.json

@@ -1133,9 +1133,9 @@
       "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
     },
     "@qg/cherry-ui": {
-      "version": "2.20.22",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.20.22.tgz",
-      "integrity": "sha512-uuhHwat5SUUMUkPM56TK89o49EyXExUjQSW5pdPr0vQ6QpJRUnT+TsOzIxEGyBKQOFHsAIyqWSP2L1CvPWiIHg==",
+      "version": "2.20.23",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.20.23.tgz",
+      "integrity": "sha512-wDS1ag1Jk8dbXVVH+dtg2PZfTYHMHOA88fojWQjZMtZC5+cNbrFtpK/DlITyKJrNvhEQWHQ7dm59Bh6oG4U3Tw==",
       "requires": {
         "@popperjs/core": "^2.5.4",
         "vue-lazyload": "^1.3.3",

package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@better-scroll/core": "^2.0.0-beta.6",
-    "@qg/cherry-ui": "^2.20.22",
+    "@qg/cherry-ui": "^2.20.23",
     "@qg/js-bridge": "^1.1.9",
     "@qg/qg-scroll": "^1.4.2",
-    "@qg/ui-request": "^0.0.7",
+    "@qg/ui-request": "0.0.7",
     "core-js": "^3.6.5",
     "js-cookie": "^2.2.1",
     "raven-js": "^3.27.2",

src/App.vue

@@ -46,6 +46,7 @@ export default {
 };
 </script>
 <style lang="less">
+@import './style/var.less';
 .app {
   user-select: none;
   height: 100%;
@@ -74,4 +75,24 @@ export default {
     }
   }
 }
+/*边框*/
+.b-b:after,
+.b-t:after {
+  position: absolute;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  height: 0;
+  content: '';
+  transform: scaleY(0.5);
+  border-bottom: 1px solid @border-color-base;
+}
+
+.b-b:after {
+  bottom: 0;
+}
+
+.b-t:after {
+  top: 0;
+}
 </style>

src/api/pay.api.js

+import request from '@/service/httpDecorator';
+import config from '@/config';
+const { talosApi } = config;
+
+const queryPayInfo = function(data) {
+  return request.post(`${talosApi}/open/checkout`, data);
+};
+const prepay = function(data) {
+  console.log('prepay-param', data);
+  return request.post(`${talosApi}/open/checkout/prepay`, data);
+};
+
+const pay = function(data) {
+  return request.post(`${talosApi}/open/checkout/pay`, data, {
+    needScDeviceId: true
+  });
+};
+
+const queryPayStatus = function(data) {
+  return request.post(`${talosApi}/open/checkout/pay_status/query`, data);
+};
+
+const sendSms = function(data) {
+  return request.post(`${talosApi}/open/checkout/send_sms`, data);
+};
+
+const desSalt = function() {
+  return request.get(`${talosApi}/vcc/account/salt`);
+};
+
+const h5AppyUrl = function() {
+  return request.get(`${talosApi}/vcc/xyqb_mall/app_url`);
+};
+
+const getCoupon = function(params) {
+  return request.post(`${talosApi}/open/checkout/pay_coupon_list`, params);
+};
+
+export { pay, prepay, sendSms, queryPayInfo, queryPayStatus, desSalt, h5AppyUrl, getCoupon };

src/config/env.config.js

@@ -14,13 +14,11 @@ let protocol = window.location.protocol;
 
 let payHost = protocol + '//mapi-qa.liangkebang.net/pay';
 let shenceHost = 'https://bn.xyqb.com/sa?project=default'; // 测试地址
+<<<<<<< HEAD
 let talosHost = 'http://yapi.quantgroups.com/mock/351'; // 电商分期测试环境服务地址
 // let talosHost = 'https://talos-vcc2.liangkebang.net'; // 电商分期测试环境服务地址
+=======
+let talosApi = 'http://yapi.quantgroups.com/mock/410'; // 电商分期测试环境服务地址
+>>>>>>> 支付开发
 let operatorHost = 'https://operator.liangkebang.com';
-export default {
-  talosHost,
-  operatorHost,
-  payHost,
-  test: true,
-  shenceHost
-};
+export default { talosApi, operatorHost, payHost, shenceHost, test: true };

src/pay/STATIC_DATA.js

+const creditPayStatusType = {
+  1: 'pwd',
+  2: 'sms'
+};
+const payTypeText = ['享花卡支付', '微信支付'];
+const status = ['未申请', '审核中', '审核失败', '已有额度未激活', '开户成功'];
+const payTypeE = [
+  'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
+  'PD_YXMMAEC_UserClickCashierSelectWechatPay'
+];
+const codeArr = ['4034', '4035', '4036'];
+// (4034, "密码错误"),
+// (4035, "密码重试超限，无法验证"),
+// (4036, "验证码错误");
+const payStatus = [3, 5]; // 展示支付文案
+const creditStatus = [1, 2]; //展示开通文案
+// (1, "VCC未申请"),
+// (2, "VCC审核中"),
+// (3, "VCC审核失败"),
+// (4, "VCC审核成功未开户（包含开户失败）"),
+// (5, "已开户"),;
+const ACCOUNT_NO_APPLY = 1;
+const ACCOUNT_APPLY_AUDITING = 2;
+const ACCOUNT_APPLY_AUDIT_FAIL = 3;
+const ACCOUNT_APPLY_FAIL = 4;
+const ACCOUNT_APPLY_SUCCESS = 5;
+// 1信用支付 2微信支付 3支付宝支付
+const CREDIT_PAY = 1;
+const WECHAT_PAY = 2;
+const ALIPAY_PAY = 3;
+const PAYMENT_CODE_PAY = 1; // 支付密码
+const SMS_VERIFICATION_CODE_PAY = 2; //短信验证码
+
+const PAY_SUCCESS = 3; // 支付成功
+
+export {
+  status,
+  codeArr,
+  payTypeE,
+  payStatus,
+  CREDIT_PAY,
+  WECHAT_PAY,
+  ALIPAY_PAY,
+  PAY_SUCCESS,
+  payTypeText,
+  creditStatus,
+  ACCOUNT_NO_APPLY,
+  PAYMENT_CODE_PAY,
+  ACCOUNT_APPLY_FAIL,
+  creditPayStatusType,
+  ACCOUNT_APPLY_SUCCESS,
+  ACCOUNT_APPLY_AUDITING,
+  ACCOUNT_APPLY_AUDIT_FAIL,
+  SMS_VERIFICATION_CODE_PAY
+};

src/pay/components/PayCard.vue

+<template>
+  <div class="pay-type-list">
+    <p class="type-title b-b">推荐支付方式</p>
+    <template v-if="single">
+      <payCardItem :pay-type="payType" :value="value" />
+    </template>
+    <template v-else>
+      <template v-for="(item, key) of value">
+        <payCardItem
+          v-if="item.show"
+          :key="key"
+          :pay-type="payType"
+          :value="item"
+          :disabled="disabled"
+          :coupon-info="couponInfo"
+          :show-coupon="showCoupon"
+          :risk-limit="riskLimit"
+          :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
+        />
+      </template>
+    </template>
+  </div>
+</template>
+<script>
+import payCardItem from './PayCardItem';
+export default {
+  name: 'PayCard',
+  components: {
+    payCardItem
+  },
+  provide() {
+    return {
+      payCard: this
+    };
+  },
+  props: {
+    value: Object,
+    payType: Number,
+    payText: String,
+    disabled: Boolean,
+    couponInfo: Object,
+    riskLimit: Boolean,
+    showCoupon: Boolean,
+    payCouponCouldBeUsed: Boolean,
+    single: { type: Boolean, default: false },
+    creditPay: { type: Boolean, default: false }
+  },
+  mounted() {
+    console.log(this.value, 'value');
+  },
+  methods: {
+    changePayType(payType) {
+      // 需要初始化全部的选中状态
+      for (let item in this.value) {
+        if (this.value[item].payType === payType) {
+          this.value[item].isCheck = true;
+          continue;
+        }
+        this.value[item].isCheck = false;
+      }
+      this.$emit('changePayType', payType);
+    }
+  }
+};
+</script>
+<style lang="less">
+.pay-type-list {
+  background-color: #fff;
+  border-radius: @border-radius-sm;
+  margin-top: @padding-sm;
+  .type-title {
+    height: 48px;
+    .text-16;
+    padding-left: @padding-md;
+    position: relative;
+    line-height: 48px;
+  }
+}
+</style>

src/pay/components/PayCardItem.vue

+<template>
+  <div class="payCardItem">
+    <div class="type-item b-t">
+      <div class="type-item-content">
+        <div class="type-item-content-info">
+          <cr-image :src="value.icon" class="icon" mode="aspectFit" width="39" height="39" />
+          <div class="con">
+            <div class="tit">
+              <p class="tit">{{ value.name }}</p>
+              <p v-if="value.tagName" class="tag">{{ value.tagName }}</p>
+            </div>
+            <p>{{ value.accountStatusDesc }}</p>
+          </div>
+        </div>
+        <div
+          v-if="showCoupon && value.payType === 1"
+          class="couponDes"
+          :class="{ disable: couponDisabled }"
+          @click.stop="openCouponModal"
+        >
+          {{ couponInfo.name || '未选择优惠券' }}
+          <cr-icon type="arrow" class="selectArrow" size="15px" />
+        </div>
+      </div>
+      <cr-checkbox
+        v-model="value.isCheck"
+        shape="round"
+        checked-color="#EC1500"
+        :disabled="disabled || value.disabled"
+        @click.native="changePayType(value)"
+      />
+    </div>
+    <p v-if="riskLimit && value.riskManagementDesc && !disabled" class="limitDes">
+      {{ value.riskManagementDesc }}
+    </p>
+  </div>
+</template>
+<script>
+// import { registeredEvents } from '@/utils/sa';
+const payTypeE = [
+  'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
+  'PD_YXMMAEC_UserClickCashierSelectWechatPay'
+];
+const payTypeMiniAppE = ['c_cashierselectxianghuacardpay', 'c_cashierselectwechatpay'];
+export default {
+  name: 'PayCardItem',
+  inject: ['payCard', 'pay'],
+  props: {
+    value: Object,
+    payType: Number,
+    disabled: Boolean,
+    couponInfo: Object,
+    showCoupon: Boolean,
+    riskLimit: Boolean,
+    couponDisabled: Boolean
+  },
+  methods: {
+    changePayType({ payType }) {
+      if (this.disabled || this.value.disabled) {
+        return;
+      }
+      // registeredEvents(payTypeE[val - 1], {
+      //   order_id: this.pay.orderNo
+      // });
+      this.payCard.changePayType(payType);
+    },
+    openCouponModal() {
+      if (this.couponDisabled) return;
+      this.pay.openCouponModal(this.pay.orderNo);
+    }
+  }
+};
+</script>
+<style lang="less">
+.payCardItem {
+  padding-bottom: 2px;
+}
+.couponDes {
+  margin-left: 50px;
+  display: inline-block;
+  color: @text-color-red;
+  .text-12;
+  border: @border-width-base solid @text-color-light;
+  border-radius: 3px;
+  padding: 0 0 0 3px;
+  &.disable {
+    color: @font-color-disabled;
+    border-color: @font-color-disabled;
+  }
+  text {
+    color: @text-color-red;
+    .text-12;
+    &.disable {
+      color: @font-color-disabled;
+    }
+  }
+}
+.limitDes {
+  color: #ed6a0c;
+  background: #fffbe8;
+  .text-12;
+  padding: 10px 8px;
+  margin: 8px;
+  border-radius: 3px;
+}
+.type-item {
+  // height: 134rpx;
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  &-content-info {
+    display: flex;
+    align-items: center;
+  }
+}
+.icon {
+  width: 39px;
+  height: 39px;
+  margin-right: @padding-sm;
+}
+.tit {
+  font-size: 15px;
+  color: @font-color-dark;
+  margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    height: 16px;
+    border: @border-width-base solid @text-color-light;
+    border-radius: 3px;
+    font-size: 11px;
+    color: @text-color-light;
+    margin-left: @padding-unit;
+    padding: 0 2px;
+  }
+}
+.con {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  .text-12;
+  color: @font-color-light;
+}
+.selectArrow {
+  vertical-align: text-top;
+}
+</style>

src/pay/components/SmsModal.vue

+<template>
+  <cr-overlay :show="value" @click="closeModal">
+    <div class="sms-modal">
+      <div class="sms">
+        <p class="sms-icon"><cr-icon type="cross" color="#999999" @click="closeModal" /></p>
+        <p class="sms-title">请输入短信验证码</p>
+        <p class="sms-des">为保证您账户安全，此笔交易需要短信验证</p>
+        <p class="sms-des phone">已发送至 {{ getPhone() }}17611682272</p>
+        <cr-authcode-field
+          span-size="20px"
+          type="number"
+          border-type="bottom"
+          :number="6"
+          height="40px"
+          span-color="#000"
+          input-color="#000"
+          input-size="20px"
+          class="sms-input"
+          :success="success"
+        />
+      </div>
+      <div slot="footer" class="sms-action">
+        <p v-if="errorInfo" class="sms-error">{{ errorInfo }}</p>
+        <p v-if="!send" class="sms-set" @click="sendSms()">获取验证码</p>
+        <p v-else class="sms-set grey">{{ time }}s后重新获取验证码</p>
+      </div>
+    </div>
+  </cr-overlay>
+</template>
+
+<script>
+// import { registeredEvents } from '@/utils/sa';
+import { sendSms as sendSmsApi } from '@/api/pay.api';
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    errorInfo: String
+  },
+  data() {
+    return {
+      send: false,
+      time: 60,
+      timer: null
+    };
+  },
+  computed: {},
+  watch: {
+    value: function(val) {
+      console.log(val);
+      if (val) {
+        this.sendSms(1);
+      }
+    },
+    errorInfo: function() {}
+  },
+  onShow() {},
+  onLoad() {},
+  onReady() {},
+  methods: {
+    closeModal() {
+      this.clearTimer();
+      this.$emit('close');
+    },
+    success(smsCode) {
+      this.$emit('submit', smsCode);
+    },
+    async sendSms(val) {
+      // 页面摧毁清掉定时器
+      if (this.send) return;
+      if (!val) {
+        // registeredEvents('PD_YXMMACP_UserClickResendCaptcha');
+      }
+      const [, error] = await sendSmsApi({ orderNo: this.orderNo, flowOrderNo: this.flowOrderNo });
+      if (!error) {
+        this.send = true;
+        this.timer = setInterval(() => {
+          --this.time;
+          if (!this.time) {
+            this.clearTimer();
+          }
+        }, 1000);
+      }
+    },
+    getPhone() {
+      // const phone = uni.getStorageSync('phone');
+      // const phoneS = phone.replace(/(\d{3})\d*(\d{4})/, '+86 $1 **** $2');
+      // return phoneS;
+    },
+    sendSa() {
+      // if (!this.numberArr.length && !this.isDel) {
+      //   registeredEvents('PD_YXMMACP_UserClickAgainVerificationCodeInputbox');
+      //   wx.reportAnalytics('c_againverificationcodeinputbox', {});
+      // }
+    },
+    clearTimer() {
+      clearInterval(this.timer);
+      this.send = false;
+      this.time = 60;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.sms-modal {
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 26%;
+  margin-left: -150px;
+  padding: 12px 12px 24px;
+  width: 300px;
+  border-radius: 16px;
+  background: #fff;
+}
+.sms {
+  &-icon {
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    text-align: right;
+  }
+  &-title {
+    text-align: center;
+    width: 100%;
+    font-size: 16px;
+  }
+  &-des {
+    padding: 10px 0 0 8px;
+    display: flex;
+    justify-content: flex-start;
+    font-size: 12px;
+    color: #999999;
+  }
+  &-input {
+    margin: auto;
+  }
+  .phone {
+    margin-top: 8px;
+    color: #323233;
+    font-size: 14px;
+  }
+  &-sms {
+    margin-top: 4px;
+    font-size: 30px;
+    color: #333333;
+    &:before {
+      content: '￥';
+      .text-12;
+    }
+  }
+  &-input {
+    margin: 20px 0;
+  }
+}
+.sms-action {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  p {
+    font-size: 14px;
+    color: #666666;
+  }
+  .sms-error {
+    flex: 1;
+    color: #ee0a24;
+  }
+  .sms-set {
+    flex: 1;
+    text-align: right;
+  }
+  .grey {
+    color: #999999;
+  }
+}
+</style>

src/pay/index.less

+.app {
+  // width: 100%;
+  padding: @padding-xs;
+}
+.price-box {
+  background-color: #fff;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .text-13;
+  color: #333333;
+  border-radius: @border-radius-sm;
+
+  .price{
+    .text-30;
+    color: @font-color-red;
+    margin-top: @padding-xs;
+    &:before{
+      content: '￥';
+      .text-14;
+      font-weight: bold;
+    }
+  }
+  .time{
+    display: flex;
+    align-items: center;
+    margin-top: @padding-unit;
+  }
+}
+.btn{
+  height:50px;
+  width: 100%;
+  position: fixed;
+  padding: 0 @padding-lg;
+  box-sizing: border-box;
+  bottom: 0;
+  left:0;
+  background-color:#fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  button{
+    flex:1;
+    color: @white;
+    font-size: @line-height-sm;
+    border-radius: @border-radius-lx;
+  }
+  button[disabled] {
+    color: rgba(255,255,255,.6);
+  }
+  &-primary {
+    @primary-bg();
+  }
+  &-default{
+    border: 1px solid @cherry-color-error;
+    color: @cherry-color-error !important;
+    margin-right: @padding-xs;
+    background-color: @white !important;
+  }
+
+}
\ No newline at end of file

src/pay/payResult.vue

+<template>
+  <div v-if="isSuccess" class="card">
+    <div class="info">
+      <cr-image
+        width="100px"
+        height="100px"
+        class="info__image"
+        src="https://img.lkbang.net/xcx/pay-success.png"
+      />
+      <div class="info__desc">
+        <p class="info__text">订单支付成功!</p>
+        <p class="info__text info__money">实付¥{{ money }}</p>
+        <p v-if="freeAmount > 0" class="info__text info__free">已优惠¥{{ freeAmount }}</p>
+      </div>
+    </div>
+    <p class="tips">
+      您可在“我的-我的订单”中查看详情
+    </p>
+    <div class="actions">
+      <cr-button class="actions__back" :plain="true" type="primary" @click="goHome"
+        >返回首页</cr-button
+      >
+      <cr-button shape="circle" type="primary" @click="goOrderDetail">查看订单</cr-button>
+    </div>
+  </div>
+  <div v-else class="card">
+    <div class="info">
+      <cr-image
+        width="100px"
+        height="100px"
+        class="info__image"
+        src="https://img.lkbang.net/xcx/pay-fail.png"
+      />
+      <p class="info__text">订单支付失败!</p>
+    </div>
+    <p class="tips">
+      {{ reason }}
+    </p>
+    <cr-button type="primary" shape="circle" class="info_button" @click="goPay">重新支付</cr-button>
+  </div>
+</template>
+<script>
+import { registeredEvents } from '@/service/sa.service';
+export default {
+  components: {},
+  data() {
+    return {
+      money: '00.00',
+      orderNo: null,
+      isSuccess: null,
+      freeAmount: null
+    };
+  },
+  created() {
+    const { amount, orderNo, freeAmount, reason } = this.$route.query;
+    const { success } = this.$route.meta;
+    console.log(this.$route.meta);
+    this.money = amount;
+    this.orderNo = orderNo;
+    this.reason = reason || '';
+    this.isSuccess = success || false;
+    this.freeAmount = freeAmount;
+  },
+  methods: {
+    goHome() {
+      // 去页面
+    },
+    goOrderDetail() {
+      registeredEvents('PD_YXMMAEC_UserClickCashierCheckOrderBtn', {
+        order_id: this.orderNo
+      });
+      // 去订单详情页面
+    },
+    goPay() {
+      registeredEvents('PD_YXMMAEC_UserClickCashierPaymentAgainBtn', {
+        order_id: this.orderNo
+      });
+      this.$router.push({ name: 'pay', query: { order: this.orderNo } });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.card {
+  margin: @padding-sm;
+  background-color: @white;
+  border-radius: @border-radius-sm;
+  padding: 28px @padding-sm @padding-sm @padding-sm;
+
+  .info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__image {
+      width: 100px;
+      height: 100px;
+    }
+
+    &__text {
+      .text-16;
+      margin-left: @padding-md;
+    }
+
+    &__desc {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__money {
+      margin-top: @padding-xs;
+    }
+    &__free {
+      .text-13;
+      margin-top: @padding-xs;
+      color: @font-color-light;
+    }
+  }
+
+  .tips {
+    .text-12;
+    text-align: center;
+    margin-top: @padding-lg;
+    color: @font-color-light;
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    margin-top: @padding-lg;
+
+    &__back {
+      color: @cherry-color-error;
+      border: 1px solid @cherry-color-error;
+    }
+
+    &__order {
+      @primary-bg();
+      margin-left: @padding-sm;
+    }
+
+    button {
+      flex: 1;
+      .text-17;
+    }
+  }
+  .info_button {
+    width: 100%;
+  }
+}
+</style>

src/router/routes.js

 export default [
   {
     path: '/',
-    redirect: '/error'
+    redirect: '/pay'
+  },
+  {
+    path: '/pay',
+    name: 'pay',
+    meta: {
+      title: '收银台'
+    },
+    component: () => import('../pay')
+  },
+  {
+    path: '/payResult',
+    name: 'payFail',
+    alias: ['/payFail'],
+    meta: {
+      title: '支付失败'
+    },
+    component: () => import('../pay/payResult')
+  },
+  {
+    path: '/payResult',
+    name: 'paySuccess',
+    alias: ['/paySuccess'], // 有问题🤨
+    meta: {
+      title: '支付成功',
+      success: true
+    },
+    component: () => import('../pay/payResult')
   },
   {
     path: '/vipLife',

src/service/cherryUI.service.js

@@ -27,7 +27,14 @@ import {
   Sticky,
   Tab,
   Tabs,
+<<<<<<< HEAD
   Empty
+=======
+  CountDown,
+  PwdField,
+  AuthcodeField,
+  CouponList
+>>>>>>> 支付开发
 } from '@qg/cherry-ui';
 import DialogFn from '@qg/cherry-ui/src/dialog/func';
 // import "@qg/cherry-ui/dist/cherry.css";
@@ -57,7 +64,14 @@ Vue.use(Loading);
 Vue.use(List);
 Vue.use(Tab);
 Vue.use(Tabs);
+<<<<<<< HEAD
 Vue.use(Empty);
+=======
+Vue.use(CountDown);
+Vue.use(PwdField);
+Vue.use(AuthcodeField);
+Vue.use(CouponList);
+>>>>>>> 支付开发
 
 // const _proto = Vue.prototype;
 // const proto = Object.create(_proto);

src/service/encrypt.js

+/*
+ * @Description: 数据加密，aes加密数据主体，rsa加密aes密钥，aes密钥前端自己存储
+ * @Date: 2020-12-08 11:08:28
+ * @LastEditors: gzw
+ * @LastEditTime: 2021-01-29 19:06:27
+ */
+// perf forge.js较大，后期需要替换为其他库，以减小体积
+// const forge = require('../utils/forge.min');
+const CryptoJS = require('./crypto.min');
+import { desSalt } from '@/api/pay.api';
+// import uuidv1 from 'uuid/v1';
+// import { parseTime } from './index';
+// import { APP_ID, PUBLIC_KEY, PRIVATE_KEY } from '@/config/encrypt.config';
+
+/**
+ * @description: 数据加密
+ * @param {String} data 数据源
+ * @return {String} 加密后的数据base64
+ */
+
+// export function encryption(data = '') {
+//   if (!data) return null;
+//   const key = generateRandomStr(16);
+//   const iv = key; // 后台约定iv与key一致
+//   const plaintext = typeof data === 'object' ? JSON.stringify(data) : data;
+//   const body = encryptDataByAes(plaintext, key, iv); // AES加密数据
+//   const encryptKey = encryptDataByPb(key); // RSA公钥加密AES密钥
+//   const signData = generateSign(plaintext);
+//   return {
+//     appId: APP_ID,
+//     body,
+//     encryptKey,
+//     ...signData
+//   };
+// }
+
+/**
+ * @description: 数据加密
+ * @message {String} message 数据源
+ * @return {String} 加密后的数据16进制
+ */
+export async function encryptByDESModeEBC(message) {
+  const [{ payPwdSalt }] = await desSalt();
+  var keyHex = CryptoJS.enc.Utf8.parse(payPwdSalt);
+  var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return encrypted.ciphertext.toString().toLocaleUpperCase();
+}
+
+/**
+ * @description: AES加密数据，默认CBC, Pki#cs7
+ * @param {String} txt 数据源
+ * @param {String} key 密钥，16位字符串
+ * @param {String} iv 初始化向量
+ * @return {String} 加密后的数据base64
+ */
+// function encryptDataByAes(txt, key, iv) {
+//   const cipherInstance = forge.cipher.createCipher('AES-CBC', key);
+//   cipherInstance.start({ iv });
+//   cipherInstance.update(forge.util.createBuffer(txt, 'utf8'));
+//   cipherInstance.finish();
+//   const ciphertext = cipherInstance.output.getBytes();
+//   return buffer2Base64(ciphertext);
+// }
+
+/**
+ * @description: 使用RSA公钥加密数据
+ * @param {String} txt 数据源
+ * @return {String} 加密后的数据base64
+ */
+// function encryptDataByPb(txt) {
+//   const publicKey = forge.pki.publicKeyFromPem(PUBLIC_KEY);
+//   const pbData = publicKey.encrypt(txt);
+//   return buffer2Base64(pbData);
+// }
+
+/**
+ * @description: RSA私钥+SHA1生成签名
+ *                签名组成结构nonce+appid+timestamp+body
+ * @param {String} txt 数据源
+ * @return {Object} 生成的sign数据，时间戳、Nonce
+ */
+// function generateSign(txt) {
+//   const timestamp = parseTime('');
+//   const nonce = generateNonce();
+//   const privateKey = forge.pki.privateKeyFromPem(PRIVATE_KEY);
+//   const md = forge.md.sha1.create();
+//   md.update(nonce + APP_ID + timestamp + txt, 'utf8');
+//   let sign = privateKey.sign(md);
+//   sign = buffer2Base64(sign);
+//   return {
+//     timestamp,
+//     nonce,
+//     sign
+//   };
+// }
+
+/**
+ * @description: buffer转base64
+ * @param {Buffer} buf buffer源数据
+ * @return {String} base64 字符串
+ */
+// function buffer2Base64(buf) {
+//   return forge.util.encode64(buf);
+// }
+
+/**
+ * @description: 生成nonce(uuid)
+ *                规则：以当前时间的uuid作为name，以随机生成的uuid作为namespace，生成最终的uuid
+ * @return {String} 生成的uuid
+ */
+// function generateNonce() {
+//   return uuidv1();
+// }
+
+/**
+ * @description: 生成随机字符串
+ * @param {Number} n 位数
+ * @return {String} 生成的字符串
+ */
+// function generateRandomStr(n) {
+//   const len = n || 32;
+//   const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789';
+//   const maxPos = chars.length;
+//   let pwd = '';
+//   for (let i = 0; i < len; i++) {
+//     pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+//   }
+//   return pwd;
+// }

src/service/utils.service.js

@@ -314,7 +314,12 @@ export function idNoFormat(value) {
 export function dateFormat(value) {
   return value.replace(/(\d{4})(\d{2})(\d{2})/, '$1.$2.$3');
 }
+<<<<<<< HEAD
 
 export function phoneFormat(value) {
   return value.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
+=======
+export function isObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+>>>>>>> 支付开发
 }

src/style/var.less

@@ -11,10 +11,26 @@
 @red-dark: #ee0a24;
 @orange: #faab0c;
 
+
+@text-color-red:#E81800;
+@text-color-light: #FF5A4B;
+
+
+@font-color-disabled: #C0C4CC;
+@font-color-dark: #333333;
+@font-color-light: #909399;
+@font-color-red: #F23E33;
+
+@cherry-color-error: #dd524d;
+
 @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%);
+}
 
 // Component Colors
 @text-color: @black;
@@ -35,6 +51,8 @@
 @border-radius-lx: 20px;
 @border-radius-max: 999px;
 
+@border-color-base: #E4E7ED;
+
 // Padding
 @padding-unit: 4px;
 @padding-xs: @padding-unit * 2;