feat(pay): 支付相关功能调整

package.json

@@ -17,7 +17,6 @@
     "@qg/ui-request": "^0.0.20",
     "@qg/ui-track-web": "0.0.3",
     "core-js": "^3.6.5",
-    "crypto-js": "^3.1.9-1",
     "intersection-observer": "^0.12.0",
     "js-cookie": "^2.2.1",
     "qiniu-js": "^3.3.1",

src/api/pay.api.js

@@ -3,58 +3,10 @@ import config from '@/config';
 import { saDeviceId } from '@/service/sa.service';
 const { talosHost } = config;
 
-const queryPayInfo = function(data) {
-  return request.post(`${talosHost}/open/checkout`, data);
-};
-const prepay = async function(data) {
-  const scDeviceId = await saDeviceId();
-  return request.post(`${talosHost}/open/checkout/prepay`, data, {
-    customHeader: {
-      scDeviceId
-    },
-    hideToast: true
-  });
-};
-
-const pay = async function(data) {
-  const scDeviceId = await saDeviceId();
-  return request.post(`${talosHost}/open/checkout/pay`, data, {
-    customHeader: {
-      scDeviceId
-    },
-    hideToast: true
-  });
-};
-
 const queryPayStatus = function(data) {
   return request.post(`${talosHost}/open/checkout/pay_status/query`, data);
 };
 
-const sendSms = function(data) {
-  return request.post(`${talosHost}/open/checkout/send_sms`, data);
-};
-
-const desSalt = function() {
-  return request.get(`${talosHost}/vcc/account/salt`);
-};
-
-const h5AppyUrl = function() {
-  return request.get(`${talosHost}/vcc/xyqb_mall/app_url`);
-};
-
-const getCoupon = async function(params) {
-  const scDeviceId = await saDeviceId();
-  return request.post(`${talosHost}/open/checkout/pay_coupon_list`, params, {
-    customHeader: {
-      scDeviceId
-    }
-  });
-};
-
-const ocrFaceId = function(params) {
-  return request.post(`${talosHost}/open/checkout/ocr_faceId`, params);
-};
-
 const getGoodsList = async function(data) {
   const scDeviceId = await saDeviceId();
   return request.get(`${talosHost}/vcc/xyqb/recommend/goods-list`, {
@@ -66,21 +18,6 @@ const getGoodsList = async function(data) {
   });
 };
 
-// KA流程节点
-const kaGetNextUrl = function() {
-  return request.get(`${talosHost}/api/kdsp/ka/process/get-next-url`);
-};
-
-const reissueContract = function(params) {
-  return request.post(`${talosHost}/open/checkout/payReissueContract`, params);
-};
-
-export default {
-  // 商品详情页面
-  desSalt() {
-    return request.get(`${talosHost}/vcc/account/salt`);
-  }
-};
 const getCouponList = function(params) {
   return request.get(`${talosHost}/api/kdsp/appconfig/pay-succ-page/guide-stream`, { params });
 };
@@ -89,18 +26,8 @@ const getPhoneNumber = function() {
   return request.get(`${talosHost}/api/kdsp/user/phone`);
 };
 export {
-  pay,
-  prepay,
-  sendSms,
-  desSalt,
-  h5AppyUrl,
-  getCoupon,
-  ocrFaceId,
-  queryPayInfo,
   getGoodsList,
-  kaGetNextUrl,
   getCouponList,
   queryPayStatus,
-  reissueContract,
   getPhoneNumber
 };

src/mixins/toPay.mixins.js

+import cfg from '@/config/index';
+import localStorage from '@/service/localStorage.service';
+
+export default {
+  methods: {
+    toPay(orderNo) {
+      const redirectUrl = window.location.origin;
+      // this.$router.push({ name: 'pay', query: { orderNo: data.orderNo } });
+      window.location.replace(
+        `${cfg.phobosHost}?orderNo=${orderNo}&vccToken=${localStorage.get(
+          'vccToken'
+        )}&vccChannel=${localStorage.get('vccChannel')}&hideOrder=true&redirectUrl=${redirectUrl}`
+      );
+    }
+  }
+};

src/router/groupBuy.js

@@ -35,14 +35,6 @@ module.exports = [
     },
     component: () => import('../views/order/createOrder')
   },
-  {
-    path: '/pay',
-    name: 'pay',
-    meta: {
-      title: '收银台'
-    },
-    component: () => import('../views/pay')
-  },
   {
     path: '/payFail',
     name: 'payFail',

src/service/encrypt.js

@@ -2,14 +2,12 @@
  * @Description: 数据加密，aes加密数据主体，rsa加密aes密钥，aes密钥前端自己存储
  * @Date: 2020-12-08 11:08:28
  * @LastEditors: gzw
- * @LastEditTime: 2021-07-07 17:44:22
+ * @LastEditTime: 2021-10-25 17:57:06
  */
 import { cipher as AES, util as UTIL, pki as PKI, md as SHA1 } from 'node-forge';
 import uuidv1 from 'uuid/v1';
 import { parseTime } from './utils.service';
 import { APP_ID, PUBLIC_KEY, PRIVATE_KEY } from '@/config/encrypt.config';
-import CryptoJS from 'crypto-js';
-import pay from '@/api/pay.api';
 
 /**
  * @description: 数据加密
@@ -33,22 +31,6 @@ export function encryption(data = '') {
   };
 }
 
-/**
- * @description: 数据加密
- * @message {String} message 数据源
- * @return {String} 加密后的数据16进制
- */
-export async function encryptByDESModeEBC(message) {
-  console.log(message);
-  const [{ payPwdSalt }] = await pay.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 数据源

src/views/order/createOrder.vue

@@ -78,6 +78,7 @@ import bottomNav from '@/components/bottomNav';
 // import stepper from '@/components/sample';
 import localStorage from '@/service/localStorage.service';
 import historyRecordMixins from '@/mixins/historyRecord.mixins';
+import toPayMixins from '@/mixins/toPay.mixins';
 import FeeInfo from './components/feeInfo.vue';
 import { HAS_DISCOUNT } from '@/constants/order';
 import { isApp, isWxMp } from '@/service/validation.service';
@@ -91,7 +92,7 @@ export default {
     // stepper,
     FeeInfo
   },
-  mixins: [historyRecordMixins],
+  mixins: [historyRecordMixins, toPayMixins],
   data() {
     return {
       nativeBridge: null,
@@ -240,7 +241,7 @@ export default {
           // const wx = require('weixin-js-sdk');
           // wx.miniProgram.redirectTo();
         } else if (isApp) {
-          this.$router.replace({ path: `/pay?orderNo=${data.orderNo}` });
+          this.toPay(data.orderNo);
           return;
         } else {
           return; // todo 处理纯h5情况

src/views/orderList/components/List.vue

@@ -72,6 +72,7 @@ const EVENT_CLICK = 'option-click';
 import countDown from '@/components/countDown';
 import { isWxMp, isApp } from '@/service/validation.service';
 import { saTrackEvent } from '@/service/sa.service';
+import toPayMixins from '@/mixins/toPay.mixins';
 import localStorage from '@/service/localStorage.service';
 import MpBridge from '@/service/mp';
 import Bridge from '@qg/js-bridge';
@@ -81,6 +82,7 @@ export default {
     countDown,
     ListItem
   },
+  mixins: [toPayMixins],
   props: {
     list: {
       type: Array,
@@ -191,7 +193,7 @@ export default {
           newUrl: `/pages/pay/index?orderNo=${skuInfo.orderNo}`
         });
       } else if (isApp) {
-        this.$router.push({ path: `/pay?orderNo=${skuInfo.orderNo}` });
+        this.toPay(skuInfo.orderNo);
       } else {
         // todo 处理纯h5情况
         this.$dialog({

src/views/pay/components/Contract.vue

-<template>
-  <div class="contract">
-    <cr-checkbox
-      v-model="isCheck"
-      shape="round"
-      class="contract-checkbox"
-      btn-size="mini"
-      @change="change"
-    />
-    <p class="contract-list">
-      勾选同意
-      <span
-        v-for="contract in contractList"
-        :key="contract.contractName"
-        @click="goview(contract.contractVisitUrl)"
-      >
-        《{{ contract.contractName }}》</span
-      >
-    </p>
-  </div>
-</template>
-<script>
-export default {
-  name: 'Contract',
-  props: {
-    contractList: Array,
-    value: Boolean
-  },
-  data() {
-    return {
-      isCheck: this.value
-    };
-  },
-  methods: {
-    goview(url) {
-      window.location.href = url;
-    },
-    change(e) {
-      this.$emit('input', e);
-    }
-  }
-};
-</script>
-<style lang="less">
-.contract {
-  width: 100%;
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  color: @gray-5;
-  .text-10;
-  &-list {
-    color: @gray-5;
-    span {
-      color: @red;
-    }
-  }
-}
-</style>

src/views/pay/components/PayCard.vue

-<template>
-  <div class="pay-type-list">
-    <p class="type-title">{{ value.title }}</p>
-    <payGroupItem
-      v-if="value.isGroupPay"
-      v-model="payList"
-      :pay-type="payType"
-      :disabled="disabled"
-      :coupon-info="couponInfo"
-      :show-coupon="showCoupon"
-      :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
-    />
-    <template v-else>
-      <template v-for="(item, key) of payList">
-        <payCardItem
-          v-if="item.show"
-          :key="key"
-          :pay-type="payType"
-          :value="item"
-          :disabled="disabled"
-          :coupon-info="couponInfo"
-          :show-coupon="showCoupon"
-          :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
-        />
-      </template>
-    </template>
-  </div>
-</template>
-<script>
-import payCardItem from './PayCardItem';
-import payGroupItem from './PayGroupCard.vue';
-export default {
-  name: 'PayCard',
-  components: {
-    payCardItem,
-    payGroupItem
-  },
-  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 }
-  },
-  data() {
-    return {
-      payList: this?.value?.payList || {}
-    };
-  },
-  mounted() {},
-  methods: {}
-};
-</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;
-    font-weight: bold;
-    padding-left: @padding-md;
-    position: relative;
-    line-height: 48px;
-  }
-}
-</style>

src/views/pay/components/PayCardItem.vue

-<template>
-  <div class="payCardItem">
-    <div
-      :class="['type-item', { 'b-t': !isGroupPay || value.payType === 1 }]"
-      @click="changePayType(value)"
-    >
-      <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="content-info-con">
-            <div class="content-info-tit">
-              <div class="content-info-tit-wrap">
-                <p class="content-info-tit">{{ value.name }}</p>
-                <p v-if="value.tagName" class="content-info-tit_tag">{{ value.tagName }}</p>
-              </div>
-              <p v-if="isGroupPay && value.payAmt" class="content-info-amount">
-                {{ value.payAmt }}
-              </p>
-            </div>
-            <p>{{ value.accountStatusDesc }}</p>
-          </div>
-        </div>
-        <div v-if="showCoupon && value.payType === 1" class="coupon">
-          <p class="couponDes" :class="{ disable: couponDisabled }" @click.stop="openCouponModal">
-            <span v-if="couponInfo.pickupId">
-              {{ `满${couponInfo.limitAmountNew}减${couponInfo.faceValueNew}元` }}
-            </span>
-            <span v-else>
-              未选择优惠券
-            </span>
-            <cr-icon type="arrow" class="selectArrow" size="15px" />
-          </p>
-        </div>
-        <p v-if="value.riskLimitDesc" class="limitDes">
-          {{ value.riskLimitDesc }}
-        </p>
-      </div>
-      <cr-checkbox
-        v-if="!isGroupPay"
-        v-model="value.isCheck"
-        shape="round"
-        class="type-item-checkbox"
-        checked-color="#EC1500"
-        :disabled="disabled || value.disabled"
-        @click.native="changePayType(value)"
-      />
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'PayCardItem',
-  inject: ['payCard', 'pay'],
-  props: {
-    value: Object,
-    payType: Number,
-    disabled: Boolean,
-    couponInfo: Object,
-    riskLimit: Boolean,
-    showCoupon: Boolean,
-    isGroupPay: Boolean,
-    couponDisabled: Boolean
-  },
-  methods: {
-    changePayType({ payType, mergePayPretreatmentInfo }) {
-      if (this.disabled || this.value.disabled || this.isGroupPay) {
-        return;
-      }
-      this.$emit('click');
-      this.pay.changePayType(payType, mergePayPretreatmentInfo);
-    },
-    openCouponModal() {
-      if (this.couponDisabled) {
-        this.$toast('优惠券不可更改');
-        return;
-      }
-      this.pay.openCouponModal(this.pay.orderNo);
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.payCardItem {
-  width: 100%;
-  padding-bottom: 2px;
-}
-.coupon {
-  margin-top: 4px;
-  height: 20px;
-  padding-left: 51px;
-  display: flex;
-}
-.couponDes {
-  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-11;
-  padding: 4px 8px;
-  margin: 8px 8px 8px 4px;
-  border-radius: 3px;
-}
-.type-item {
-  width: 100%;
-  padding: 12px 8px 12px 12px;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  &-content {
-    width: 100%;
-  }
-  &-content-info {
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
-  &-checkbox {
-    width: 18px;
-  }
-}
-.icon {
-  width: 39px;
-  height: 39px;
-  margin-right: @padding-sm;
-}
-.content-info-tit {
-  font-size: 15px;
-  color: @font-color-dark;
-  margin-bottom: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  &-wrap {
-    display: flex;
-  }
-  &_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;
-  }
-}
-.content-info-con {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  .text-12;
-  color: @font-color-light;
-}
-.content-info-amount {
-  width: 100px;
-  text-align: left;
-  word-break: break-all;
-  &::before {
-    content: '¥';
-  }
-  .text-15;
-  color: @black;
-}
-.selectArrow {
-  vertical-align: text-top;
-  margin-left: -2px;
-}
-</style>

src/views/pay/components/PayGroupCard.vue

-<template>
-  <div>
-    <div @click="changePayType(thirdPayInfo)">
-      <div class="groupCard">
-        <PayCardItem
-          :is-group-pay="true"
-          :value="creditPayInfo"
-          :coupon-info="couponInfo"
-          :show-coupon="showCoupon"
-          :risk-limit="riskLimit"
-          :coupon-disabled="couponDisabled"
-        />
-      </div>
-      <div class="dashed">
-        <p class="dashed-line" />
-        <cr-image
-          src="@/assets/images/pay/addicon.png"
-          width="24px"
-          height="24px"
-          class="dashed-icon"
-        />
-        <cr-checkbox
-          v-model="thirdPayInfo.isCheck"
-          shape="round"
-          checked-color="#EC1500"
-          :disabled="disabled || thirdPayInfo.disabled"
-          class="dashed-checkbox"
-          @click.native="changePayType(thirdPayInfo)"
-        />
-      </div>
-      <div class="groupCard">
-        <PayCardItem :is-group-pay="true" :value="thirdPayInfo" />
-      </div>
-    </div>
-    <p class="group-more b-t" @click="openMore">更多支付组合<cr-icon type="arrow" size="15px" /></p>
-    <cr-popup v-model="morePopup" round position="bottom" :style="{ height: '30%' }" closeable>
-      <p class="more-title">更换支付组合</p>
-      <PayCardItem
-        v-for="item in thirdPayList"
-        :key="item.payType"
-        :value="item"
-        :coupon-info="couponInfo"
-        :show-coupon="showCoupon"
-        :risk-limit="riskLimit"
-        @click="morePopup = false"
-      />
-    </cr-popup>
-  </div>
-</template>
-<script>
-import PayCardItem from './PayCardItem.vue';
-export default {
-  name: 'PayGroupCard',
-  inject: ['payCard', 'pay'],
-  components: {
-    PayCardItem
-  },
-  props: {
-    value: Object,
-    payType: Number,
-    disabled: Boolean,
-    couponInfo: Object,
-    showCoupon: Boolean,
-    riskLimit: Boolean,
-    couponDisabled: Boolean
-  },
-  data() {
-    return {
-      morePopup: false,
-      thirdPayList: [],
-      creditPayInfo: this.value.creditPayInfo || {}
-    };
-  },
-  computed: {
-    thirdPayInfo: function() {
-      let temp = {};
-      for (const key in this.value) {
-        if (this.value[key].isRecommend || this.value[key].isCheck) {
-          const mergePayPretreatmentInfo = this.value[key]?.mergePayPretreatmentInfo || {};
-          temp = {
-            ...this.value[key],
-            payAmt: mergePayPretreatmentInfo?.otherPayAmt
-          };
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.creditPayInfo.payAmt = mergePayPretreatmentInfo.creditPayAmt;
-        }
-      }
-      return temp;
-    }
-  },
-  mounted() {
-    for (const key in this.value) {
-      if (this.value[key].isGroupPay) {
-        this.thirdPayList.push(this.value[key]);
-      }
-    }
-  },
-  methods: {
-    changePayType({ payType, mergePayPretreatmentInfo }) {
-      if (this.disabled || this.creditPayInfo.disabled) {
-        return;
-      }
-      this.pay.changePayType(payType, mergePayPretreatmentInfo);
-    },
-    openMore() {
-      this.morePopup = true;
-    }
-  }
-};
-</script>
-<style lang="less">
-.groupCard {
-  width: 100%;
-}
-.group-more {
-  .text-13;
-  width: 335px;
-  height: 36px;
-  margin: auto;
-  display: flex;
-  color: #ec1500;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-}
-.cr-popup--close-top-right {
-  z-index: 2;
-}
-.dashed {
-  width: 100%;
-  padding: 0 12px;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  &-line {
-    width: 310px;
-    border-bottom: 1px dashed #dcdcdc;
-  }
-  &-checkbox {
-    width: 18px;
-  }
-  &-icon {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-.more-title {
-  .text-16;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 48px;
-  color: @black;
-  position: relative;
-}
-</style>

src/views/pay/components/SmsModal.vue

-<template>
-  <cr-overlay :show="value">
-    <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="phone">已发送至 {{ phoneNumber }}</p>
-        <cr-authcode-field
-          span-size="24px"
-          type="number"
-          border-type="bottom"
-          :number="6"
-          height="40px"
-          span-color="#666"
-          input-color="#666"
-          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 { sendSms as sendSmsApi, getPhoneNumber } from '@/api/pay.api';
-export default {
-  props: {
-    value: {
-      type: Boolean,
-      default: true
-    },
-    orderNo: String,
-    flowOrderNo: String,
-    errorInfo: String
-  },
-  data() {
-    return {
-      send: false,
-      time: 60,
-      timer: null,
-      phoneNumber: ''
-    };
-  },
-  computed: {},
-  watch: {
-    value: function(val) {
-      if (val) {
-        this.sendSms(1);
-      }
-    },
-    errorInfo: function() {}
-  },
-  created() {
-    this.getPhone();
-  },
-  methods: {
-    closeModal() {
-      this.clearTimer();
-      this.$emit('close');
-    },
-    success(smsCode) {
-      this.$emit('submit', smsCode);
-    },
-    async sendSms() {
-      // 页面摧毁清掉定时器
-      if (this.send) return;
-      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);
-      }
-    },
-    async getPhone() {
-      const [phoneNumber] = await getPhoneNumber();
-      this.phoneNumber = phoneNumber;
-    },
-    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 18px 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;
-    font-weight: bold;
-  }
-  &-des {
-    padding: 18px 0 0 8px;
-    display: flex;
-    justify-content: flex-start;
-    font-size: 12px;
-    color: #999999;
-  }
-  &-input {
-    margin: auto;
-  }
-  .phone {
-    padding-left: 8px;
-    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/views/pay/index.less

-@import url('../../style/mixins');
-.pay {
-  padding: @padding-xs;
-}
-.price-box {
-  background-color: @white;
-  height: 120px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  .text-13;
-  color: @black;
-  border-radius: @border-radius-sm;
-
-  .price{
-    .text-30;
-    color: @font-color-red;
-    font-weight: bold;
-    margin-top: @padding-xs;
-    &:before{
-      content: '￥';
-      .text-14;
-      font-weight: bold;
-    }
-  }
-  .time{
-    display: flex;
-    align-items: center;
-    margin-top: @padding-unit;
-  }
-}
-.payBtn{
-  width: 100%;
-  position: fixed;
-  padding-left: @padding-lg;
-  padding-right: @padding-lg;
-  padding-top: 10px;
-  box-sizing: border-box;
-  z-index: 99;
-  bottom: 0;
-  left:0;
-  background-color:@white;
-  padding-bottom: calc(10px + constant(safe-area-inset-bottom));
-  padding-bottom: calc(10px + env(safe-area-inset-bottom));
-  button{
-    .text-16;
-    width: 100%;
-    color: @white;
-    font-size: @line-height-sm;
-    border-radius: @border-radius-lx;
-    span{
-      font-weight: bold;
-    }
-  }
-  button[disabled] {
-    color: rgba(255,255,255,.6);
-  }
-  &-primary {
-    @primary-bg();
-  }
-}
-.btn{
-  width: 100%;
-  position: fixed;
-  padding-left: @padding-lg;
-  padding-right: @padding-lg;
-  padding-top: 10px;
-  padding-bottom: calc(10px + constant(safe-area-inset-bottom));
-  padding-bottom: calc(10px + env(safe-area-inset-bottom));
-  box-sizing: border-box;
-  bottom: 0;
-  left:0;
-  background-color:@white;
-  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;
-  }
-
-}
-.placeholder{
-  width: 100%;
-  height: 100px;
-}
\ No newline at end of file