@uxda/appkit 1.2.80 → 3.2.20

package/src/payment/components/TradeView.vue

@@ -1,50 +1,42 @@
 <template>
   <view class="view recharge-view2">
     <view class="flex-grow">
-      <rights-picker :items="amounts"
-        :selected="state.selected"
-        @change="onAmountSelect" />
+      <rights-picker :items="amounts" :selected="state.selected" @change="onAmountSelect" />
       <div class="bean-buy" v-if="amounts[state.selected]">
         <div class="left">
           <div class="title">使用云豆支付</div>
-          <div class="amount" v-if="!selectBean">余额 {{balance}}</div>
-          <div class="amount" v-else>扣减后余额 {{(balance - amounts[state.selected].paymentAmount).toFixed(1)}}</div>
+          <div class="amount" v-if="!selectBean">余额 {{ formatAmount(balance || 0) }}</div>
+          <div class="amount" v-else>扣减后余额 {{ formatAmount(balance - amounts[state.selected].paymentAmount) }}</div>
         </div>
         <div class="right" v-if="balance >= amounts[state.selected].paymentAmount" @click="selectBean = !selectBean">
-          <div class="amount">-{{ amounts[state.selected].paymentAmount }}</div>
-          <img class="icon" :src="selectBean ? 'https://cdn.ddjf.com/static/images/appkit/select.svg' : 'https://cdn.ddjf.com/static/images/appkit/not-select.svg'" />
+          <div class="amount">-{{ formatAmount(amounts[state.selected].paymentAmount || 0) }}</div>
+          <img class="icon"
+            :src="selectBean ? 'https://cdn.ddjf.com/static/images/appkit/select.svg' : 'https://cdn.ddjf.com/static/images/appkit/not-select.svg'" />
         </div>
-      </div>  
+      </div>
     </view>
     <view class="amount-footer">
       <view class="agreement" v-if="!selectBean">
-        <nut-checkbox v-model="state.agreed">我已阅读并同意<a class="link inline" @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
+        <nut-checkbox v-model="state.agreed">我已阅读并同意<a class="link inline"
+            @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
       </view>
       <div class="buy-amount">
         <div class="left">
           待支付：
           <span class="amount">
-            <i>￥</i>{{ currentAmount }}
+            <i>￥</i>{{ formatAmount(currentAmount) }}
           </span>
         </div>
-        <nut-button block
-        shape="square"
-        :loading="state.buttonLoading"
-        @click="onPayClick"
-        class="recharge-button">购买</nut-button>
+        <nut-button block shape="square" :loading="state.buttonLoading" @click="onPayClick"
+          class="recharge-button">购买</nut-button>
       </div>
-      
     </view>
-    <app-drawer
-      v-model="state.agreementOpen"
-      title="充值协议">
-      <user-agreement />
-    </app-drawer>
-    <nut-dialog title="确认购买" custom-class="trade-dialog" v-model:visible="showDialog" @cancel="showDialog = !showDialog" @ok="beanPay" >
+    <nut-dialog title="确认购买" custom-class="trade-dialog" v-model:visible="showDialog" @cancel="showDialog = !showDialog"
+      @ok="beanPay">
       <template v-if="amounts[state.selected]">
-        <div class="item">云豆扣减：{{ amounts[state.selected].paymentAmount }}</div>
-        <div class="item">权益增加：{{ amounts[state.selected].priceRightNum }}笔</div>
-        <div class="item">扣减后云豆余额：{{ (balance - amounts[state.selected].paymentAmount).toFixed(1) }}</div>
+        <div class="item">云豆扣减：{{ formatAmount(amounts[state.selected].paymentAmount || 0) }}</div>
+        <div class="item">权益增加：{{ formatAmount(amounts[state.selected].priceRightNum || 0) }}笔</div>
+        <div class="item">扣减后云豆余额：{{ formatAmount(balance - amounts[state.selected].paymentAmount) }}</div>
       </template>
     </nut-dialog>
   </view>
@@ -53,11 +45,10 @@
 <script lang="ts" setup>
 import { computed, onMounted, reactive, ref } from 'vue'
 import RightsPicker, { Amount } from './RightsPicker.vue'
-import UserAgreement from './UserAgreement.vue'
-import { AppDrawer } from '../../shared'
 import { endpoints, useHttp } from '../api'
 import { requestPaymentByBean } from '../services'
 import Taro from '@tarojs/taro'
+import { useAmount } from '../../shared/composables/useAmount'
 
 // 充值用户界面
 // 配置了必须的属性后
@@ -79,15 +70,17 @@ export interface RechargeViewProps {
 }
 
 const props = defineProps<RechargeViewProps>()
+const { formatAmount } = useAmount()
 
 const emit = defineEmits<{
-  (event: 'complete', value: {result: boolean, type: string}): void
+  (event: 'complete', value: { result: boolean, type: string }): void,
+  (event: 'agree'): void,
 }>()
 
 const state = reactive({
   agreed: false,
   selected: 0,
-  agreementOpen: false,
+  // agreementOpen: false,
   buttonLoading: false,
 })
 
@@ -96,8 +89,11 @@ const balance = ref<number>(0)
 const amounts = ref<Amount[]>([])
 const selectBean = ref<boolean>(false)
 
-const onAgreementLinkClick = ($event) => {
-  state.agreementOpen = true
+const onAgreementLinkClick = (e) => {
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  emit('agree')
+  // state.agreementOpen = true
 }
 
 const onAmountSelect = (selected: number) => {
@@ -105,7 +101,7 @@ const onAmountSelect = (selected: number) => {
   selectBean.value = false
 }
 
-const currentAmount = computed(()=>{
+const currentAmount = computed(() => {
   return amounts.value[state.selected] && !selectBean.value ? amounts.value[state.selected].paymentAmount : 0
 })
 
@@ -119,13 +115,13 @@ onMounted(() => {
 
 // 云豆支付
 const showDialog = ref<boolean>(false)
-async function beanPay(){
+async function beanPay() {
   const $http = useHttp()
-  $http.post( `/payment/paymentCaseConfig/purchase/${amounts.value[state.selected].id}`).then((response: any) => {
+  $http.post(`/payment/paymentCaseConfig/purchase/${amounts.value[state.selected].id}`).then((response: any) => {
     if (response) {
       showDialog.value = false
-      emit('complete', {result: response, type: 'bean'})
-    }else {
+      emit('complete', { result: response, type: 'bean' })
+    } else {
       Taro.showToast({
         title: response.message,
         icon: 'none',
@@ -137,11 +133,11 @@ async function beanPay(){
 
 const onPayClick = () => {
   // 用云豆支付
-  if(selectBean.value){
+  if (selectBean.value) {
     showDialog.value = true
-    return 
+    return
   }
-  
+
   // 微信支付
   if (!selectBean.value && !state.agreed) {
     Taro.showToast({
@@ -152,7 +148,7 @@ const onPayClick = () => {
   }
   state.buttonLoading = true
   wx.login({
-    success ({code}: {code: string}) {
+    success({ code }: { code: string }) {
       requestPaymentByBean({
         caseConfigId: amounts.value[state.selected].id,
         amount: amounts.value[state.selected].paymentAmount,
@@ -162,7 +158,7 @@ const onPayClick = () => {
       }).then(result => {
         state.buttonLoading = false
         if (result) {
-          emit('complete', {result: true, type: 'wePay'})
+          emit('complete', { result: true, type: 'wePay' })
         }
       })
     }
@@ -175,10 +171,13 @@ const onPayClick = () => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  --nut-primary-color: #017fff;
+
   .flex-grow {
     flex-grow: 1;
   }
-  .bean-buy{
+
+  .bean-buy {
     margin: 0 15px;
     padding: 10px;
     background: #FFFBF3;
@@ -186,16 +185,18 @@ const onPayClick = () => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .left{
-      .title{
-        color:#FD6701;
+
+    .left {
+      .title {
+        color: #FD6701;
         font-size: 14px;
         font-weight: 600;
-        line-height: 20px; 
+        line-height: 20px;
         margin-bottom: 6px;
       }
-      .amount{
-        color:#353535;
+
+      .amount {
+        color: #353535;
         font-size: 13px;
         line-height: 16px;
         background-image: url('https://cdn.ddjf.com/static/images/appkit/yundou.png');
@@ -204,16 +205,19 @@ const onPayClick = () => {
         padding-left: 24px;
       }
     }
-    .right{
+
+    .right {
       display: flex;
       align-items: center;
-      .amount{
-        color:#353535;
+
+      .amount {
+        color: #353535;
         font-size: 15px;
         line-height: 20px;
         margin-right: 10px;
       }
-      .icon{
+
+      .icon {
         display: block;
         width: 16px;
         height: 16px;
@@ -221,9 +225,11 @@ const onPayClick = () => {
       }
     }
   }
+
   .amount-footer {
     padding: 10px 0;
     padding-bottom: 20px;
+
     .agreement {
       font-size: 12px;
       display: flex;
@@ -231,27 +237,33 @@ const onPayClick = () => {
       align-items: cebter;
       height: 40px;
     }
-    .buy-amount{
+
+    .buy-amount {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0 10px;
       border-radius: 0px;
-      box-shadow: 0px -5px 14px -5px rgba(0, 0, 0, 0.1); /* 上边框阴影 */
-      .left{
+      box-shadow: 0px -5px 14px -5px rgba(0, 0, 0, 0.1);
+
+      /* 上边框阴影 */
+      .left {
         width: 70%;
-        color:#353535;
+        color: #353535;
         font-size: 13px;
-        .amount{
-          color:#FD6701;
+
+        .amount {
+          color: #FD6701;
           font-size: 20px;
           font-weight: 600;
-          i{
+
+          i {
             font-size: 14px;
             font-style: normal;
           }
         }
       }
+
       .recharge-button {
         background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
         color: #353535;
@@ -261,36 +273,43 @@ const onPayClick = () => {
         flex: 1;
       }
     }
+
     .nut-checkbox {
       line-height: 40px;
     }
+
     .nut-checkbox__label {
       margin-left: 8px;
       flex: flex;
       font-size: 12px;
     }
+
     .link {
       display: inline;
       color: #FD6701;
     }
   }
 }
-.trade-dialog{
-  .nut-dialog__header{
+
+.trade-dialog {
+  .nut-dialog__header {
     font-size: 16px;
     color: #262626
   }
-  .item{
+
+  .item {
     font-size: 14px;
-    color:#666666;
+    color: #666666;
     line-height: 21px;
   }
-  .nut-dialog__footer-cancel{
+
+  .nut-dialog__footer-cancel {
     color: #353535 !important;
     border-color: #CCCCCC !important;
   }
+
   .nut-dialog__footer-ok {
-    border:none;
+    border: none;
     color: #353535;
     background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
   }

package/src/payment/components/UserAgreement.vue

@@ -6,13 +6,23 @@
     <p>欢迎您使用大道云平台云豆充值服务！</p>
     <p>&nbsp;</p>
     <p>【提示条款】</p>
-    <p>欢迎您与大道云平台服务提供者签署《大道云平台云豆充值服务协议》（以下简称“本协议”）并使用大道云平台云豆值服务！您理解和同意本协议系根据《用户注册协议》等协议制定，本协议为前述协议不可分割的一部分，本协议未规定的，适用《用户注册协议》等协议中的相关约定。</p>
+    <p>
+      欢迎您与大道云平台服务提供者签署《大道云平台云豆充值服务协议》（以下简称“本协议”）并使用大道云平台云豆值服务！您理解和同意本协议系根据《用户注册协议》等协议制定，本协议为前述协议不可分割的一部分，本协议未规定的，适用《用户注册协议》等协议中的相关约定。
+    </p>
     <p>&nbsp;</p>
     <p>【审慎阅读】</p>
-    <p><span class="bold">在使用本服务前，请您务必审慎阅读、充分理解各条款内容，特别是免除或限制责任的相应条款，以及开通或使用某项服务的单独协议，您使用此服务即表示您接受本协议。限制或免除责任条款可能以加粗形式提示您注意。</span></p>
+    <p>
+      <span class="bold"
+        >在使用本服务前，请您务必审慎阅读、充分理解各条款内容，特别是免除或限制责任的相应条款，以及开通或使用某项服务的单独协议，您使用此服务即表示您接受本协议。限制或免除责任条款可能以加粗形式提示您注意。</span
+      >
+    </p>
     <p>&nbsp;</p>
     <p>【特别提示】</p>
-    <p><span class="bold">充值用户确认，自己为年满18周岁且具有完全民事行为能力的成年人，除非您已阅读并接受本协议所有条款，否则您无权使用大道云平台充值服务（以下简称“本服务”）。您对本服务的任何购买、登录、查看等使用行为即视为您已阅读并同意本协议的约束。</span></p>
+    <p>
+      <span class="bold"
+        >充值用户确认，自己为年满18周岁且具有完全民事行为能力的成年人，除非您已阅读并接受本协议所有条款，否则您无权使用大道云平台充值服务（以下简称“本服务”）。您对本服务的任何购买、登录、查看等使用行为即视为您已阅读并同意本协议的约束。</span
+      >
+    </p>
     <p>&nbsp;</p>
     <p><span class="bold">一、协议的范围</span></p>
     <p>&nbsp;</p>
@@ -20,41 +30,99 @@
     <p>本协议是您与大道云平台之间关于您使用本服务所订立的协议。</p>
     <p>&nbsp;</p>
     <p>1.2【服务内容】</p>
-    <p>本协议项下的服务是指大道云平台向用户提供的云豆充值服务（以下简称“本服务”）。本协议内容同时包括大道云平台可能不断发布的关于本服务的相关协议、业务规则等内容。上述内容一经正式发布，即为本协议不可分割的组成部分，您同样应当遵守。</p>
+    <p>
+      本协议项下的服务是指大道云平台向用户提供的云豆充值服务（以下简称“本服务”）。本协议内容同时包括大道云平台可能不断发布的关于本服务的相关协议、业务规则等内容。上述内容一经正式发布，即为本协议不可分割的组成部分，您同样应当遵守。
+    </p>
     <p>&nbsp;</p>
     <p><span class="bold">二、名词定义</span></p>
     <p>&nbsp;</p>
     <p><span class="bold">2.1【云豆】</span></p>
-    <p><span class="bold">2.1.1 云豆系大道云平台为用户提供的数字化商品，用于大道云平台上的产品权益使用抵扣。</span></p>
+    <p>
+      <span class="bold"
+        >2.1.1 云豆系大道云平台为用户提供的数字化商品，用于大道云平台上的产品权益使用抵扣。</span
+      >
+    </p>
     <p>&nbsp;</p>
-    <p><span class="bold">2.1.2 云豆属于在线交付的数字化商品，云豆的购买费用系数字化商品价格，而不具有预付款性质或者定金、储值等性质，云豆购买成功后不可转让或者逆向兑换为人民币或其他货币。</span></p>
-    <p><span class="bold">2.1.3 云豆仅限于用户自己账号在大道云平台使用，不得以盈利等非个人使用目的使用云豆，或通过赠与、出借、转让、销售、抵押、许可他人使用等方式获取或处置云豆。</span></p>
-    <p><span class="bold">2.1.4 人民币和云豆兑换的比例为1:1（即1元人民币=1云豆），云豆在任何情况下都不具有法定货币的流转及支付功能，不得反向兑换为人民币或其他法定货币、实物和其他虚拟货币，请您根据实际需求购买相应数量的云豆。</span></p>
+    <p>
+      <span class="bold"
+        >2.1.2
+        云豆属于在线交付的数字化商品，云豆的购买费用系数字化商品价格，而不具有预付款性质或者定金、储值等性质，云豆购买成功后不可转让或者逆向兑换为人民币或其他货币。</span
+      >
+    </p>
+    <p>
+      <span class="bold"
+        >2.1.3
+        云豆仅限于用户自己账号在大道云平台使用，不得以盈利等非个人使用目的使用云豆，或通过赠与、出借、转让、销售、抵押、许可他人使用等方式获取或处置云豆。</span
+      >
+    </p>
+    <p>
+      <span class="bold"
+        >2.1.4
+        人民币和云豆兑换的比例为1:1（即1元人民币=1云豆），云豆在任何情况下都不具有法定货币的流转及支付功能，不得反向兑换为人民币或其他法定货币、实物和其他虚拟货币，请您根据实际需求购买相应数量的云豆。</span
+      >
+    </p>
     <p>2.2【大道云平台】</p>
-    <p>指由<span class="bold">大道云平台所拥有、控制、经营的大道云微信小程序、蜂鸟汇云微信小程序、蜂鸟居间系统、蜂鸟周转系统。</span></p>
+    <p>
+      指由<span class="bold"
+        >大道云平台所拥有、控制、经营的大道云微信小程序、蜂鸟汇云微信小程序、蜂鸟居间系统、蜂鸟周转系统。</span
+      >
+    </p>
     <p>&nbsp;</p>
     <p><span class="bold">三、权利义务</span></p>
     <p>&nbsp;</p>
-    <p>3.1.1 您承诺具备使用本服务所必需的民事能力和合法资格，有权且有能力同意本协议及相关协议的全部内容。</p>
-    <p>3.1.2 <span class="bold">您应妥善保管大道云平台账号的用户名及其密码，并对该账号下的一切操作行为负责。如您的大道云账号存在异常情形，您可以联系客服挂失或冻结您的账户。此时，大道云平台需要您提供大道云账号的注册信息以完成身份核验。您理解并确认，由于技术局限，大道云平台无法保证身份核验的准确性和真实性。</span></p>
-    <p>3.1.3 您承诺不得通过非大道云平台指定途径或任何违反相关法规、违反本协议、不正当手段等购买云豆。</p>
-    <p>3.1.4 大道云平台可能会根据本服务的整体规划，对本服务的收费标准、方式等进行修改和变更，前述修改、变更，大道云平台将在相应服务页面进行通知或公告。如果您不同意上述修改、变更，则应停止使用本服务。否则，您的任何购买、登录、查看等使用行为，即视为您同意上述修改、变更。</p>
-    <p>3.1.5 大道云平台在目前技术水平下，最大程度地保障本功能的正常运行，以维护你的利益。大道云平台对本服务不作任何明示或暗示的保证，包括但不限于对本服务的可适用性、持续性等。</p>
+    <p>
+      3.1.1
+      您承诺具备使用本服务所必需的民事能力和合法资格，有权且有能力同意本协议及相关协议的全部内容。
+    </p>
+    <p>
+      3.1.2
+      <span class="bold"
+        >您应妥善保管大道云平台账号的用户名及其密码，并对该账号下的一切操作行为负责。如您的大道云账号存在异常情形，您可以联系客服挂失或冻结您的账户。此时，大道云平台需要您提供大道云账号的注册信息以完成身份核验。您理解并确认，由于技术局限，大道云平台无法保证身份核验的准确性和真实性。</span
+      >
+    </p>
+    <p>
+      3.1.3 您承诺不得通过非大道云平台指定途径或任何违反相关法规、违反本协议、不正当手段等购买云豆。
+    </p>
+    <p>
+      3.1.4
+      大道云平台可能会根据本服务的整体规划，对本服务的收费标准、方式等进行修改和变更，前述修改、变更，大道云平台将在相应服务页面进行通知或公告。如果您不同意上述修改、变更，则应停止使用本服务。否则，您的任何购买、登录、查看等使用行为，即视为您同意上述修改、变更。
+    </p>
+    <p>
+      3.1.5
+      大道云平台在目前技术水平下，最大程度地保障本功能的正常运行，以维护你的利益。大道云平台对本服务不作任何明示或暗示的保证，包括但不限于对本服务的可适用性、持续性等。
+    </p>
     <p>&nbsp;</p>
     <p><span class="bold">四、云豆使用规则及特别约定</span></p>
     <p>&nbsp;</p>
     <p>
-      <span class="bold">4.1 大道云平台向您提供购买、管理云豆有关的网络增值服务，包括但不限于云豆的购买、账户管理页面、交易明细查询服务（以下称“云豆服务”）。云豆服务的具体内容请以相关页面的信息为准。您同意以大道云平台留存的交易记录作为云豆购买的唯一有效依据，如您对大道云平台留存的交易记录有异议，您应立即向大道云平台提出，大道云平台经核对后发现确有错误的，将予以改正。</span>
+      <span class="bold"
+        >4.1
+        大道云平台向您提供购买、管理云豆有关的网络增值服务，包括但不限于云豆的购买、账户管理页面、交易明细查询服务（以下称“云豆服务”）。云豆服务的具体内容请以相关页面的信息为准。您同意以大道云平台留存的交易记录作为云豆购买的唯一有效依据，如您对大道云平台留存的交易记录有异议，您应立即向大道云平台提出，大道云平台经核对后发现确有错误的，将予以改正。</span
+      >
     </p>
-    <p><span class="bold">4.2. 您应该通过大道云平台官方指定的包括但不限于支付宝、财付通等方式依约支付一定费用后购买云豆。</span></p>
     <p>
-      <span class="bold">4.3 您必须为绑定的支付渠道账户开户人/持有人，可合法、有效使用该账户且未侵犯任何第三方权益，否则因此造成支付账户实际所有人损失的，应由您单独负责解决由此产生的纠纷并承担全部法律责任。</span>
+      <span class="bold"
+        >4.2.
+        您应该通过大道云平台官方指定的包括但不限于支付宝、财付通等方式依约支付一定费用后购买云豆。</span
+      >
     </p>
     <p>
-      <span class="bold">4.4 您应在购买云豆时仔细确认账号、支付账户、购买数量、购买费用等交易信息准确无误，如因您自身原因（包括但不限于账号错误、支付账户错误、操作不当、账号/支付账户存在异常情况等）导致的任何损失应由您自行承担。</span>
+      <span class="bold"
+        >4.3
+        您必须为绑定的支付渠道账户开户人/持有人，可合法、有效使用该账户且未侵犯任何第三方权益，否则因此造成支付账户实际所有人损失的，应由您单独负责解决由此产生的纠纷并承担全部法律责任。</span
+      >
     </p>
     <p>
-      <span class="bold">4.5 大道云平台有权决定云豆如何被使用（包括兑换虚拟商品等于大道云平台上使用的产品或服务）。</span>
+      <span class="bold"
+        >4.4
+        您应在购买云豆时仔细确认账号、支付账户、购买数量、购买费用等交易信息准确无误，如因您自身原因（包括但不限于账号错误、支付账户错误、操作不当、账号/支付账户存在异常情况等）导致的任何损失应由您自行承担。</span
+      >
+    </p>
+    <p>
+      <span class="bold"
+        >4.5
+        大道云平台有权决定云豆如何被使用（包括兑换虚拟商品等于大道云平台上使用的产品或服务）。</span
+      >
     </p>
     <p>&nbsp;</p>
     <p><span class="bold">五、行为规范</span></p>
@@ -65,38 +133,55 @@
     <p>5.1.2 其他未经大道云平台书面许可的行为。</p>
     <p>5.2【行为责任】</p>
     <p>
-        <span class="bold">您充分了解并同意，您用以参与本服务的大道云账号由您独立维护、使用并独立承担全部责任，大道云平台不会、也不可能参与该账号的使用等任何活动。您应对本服务中的内容自行加以判断，并承担因使用内容而引起的所有风险，包括因对内容的正确性、完整性或实用性的依赖而产生的风险。大道云平台无法且不会对因前述风险而导致的任何损失或损害承担任何责任。</span>
+      <span class="bold"
+        >您充分了解并同意，您用以参与本服务的大道云账号由您独立维护、使用并独立承担全部责任，大道云平台不会、也不可能参与该账号的使用等任何活动。您应对本服务中的内容自行加以判断，并承担因使用内容而引起的所有风险，包括因对内容的正确性、完整性或实用性的依赖而产生的风险。大道云平台无法且不会对因前述风险而导致的任何损失或损害承担任何责任。</span
+      >
     </p>
     <p>&nbsp;</p>
     <p>
-       <span class="bold">六、服务的变更、中止或终止</span>
+      <span class="bold">六、服务的变更、中止或终止</span>
     </p>
     <p>&nbsp;</p>
-    <p>您充分了解并同意，由于互联网服务的特殊性，大道云平台可以在不提前通知您的情况之下，根据本服务的整体规划，单方有权对本服务内容进行变更、中止或终止。</p>
+    <p>
+      您充分了解并同意，由于互联网服务的特殊性，大道云平台可以在不提前通知您的情况之下，根据本服务的整体规划，单方有权对本服务内容进行变更、中止或终止。
+    </p>
     <p>&nbsp;</p>
     <p><span class="bold">七、违约责任</span></p>
     <p>&nbsp;</p>
     <p>
-      <span class="bold">7.1 如果大道云平台发现或收到他人举报您有违反本协议任何行为的，大道云平台有权进行独立判断并采取技术手段予以删除、屏蔽或断开相关的信息。同时，大道云平台有权视您的行为性质，对您采取包括但不限于暂停或终止部分或全部本服务、中止或终止您对账号的使用、追究法律责任等措施，而由此给您带来的损失（包括但不限于通信中断、相关数据清空、服务费用作为违约金而归大道云平台所有等），由您自行承担，造成大道云平台损失的，您也应予以赔偿。若大道云平台依前述约定对您采取暂停或终止部分或全部本服务的，大道云平台无需向您退还任何费用，剩余的服务费用，作为违约金而归大道云平台所有。</span>
+      <span class="bold"
+        >7.1
+        如果大道云平台发现或收到他人举报您有违反本协议任何行为的，大道云平台有权进行独立判断并采取技术手段予以删除、屏蔽或断开相关的信息。同时，大道云平台有权视您的行为性质，对您采取包括但不限于暂停或终止部分或全部本服务、中止或终止您对账号的使用、追究法律责任等措施，而由此给您带来的损失（包括但不限于通信中断、相关数据清空、服务费用作为违约金而归大道云平台所有等），由您自行承担，造成大道云平台损失的，您也应予以赔偿。若大道云平台依前述约定对您采取暂停或终止部分或全部本服务的，大道云平台无需向您退还任何费用，剩余的服务费用，作为违约金而归大道云平台所有。</span
+      >
     </p>
     <p>&nbsp;</p>
     <p>7.2【对第三方损害的处理】</p>
-    <p>您有违反本协议任何行为，导致任何第三方损害的，您应当独立承担责任；大道云平台因此遭受损失的，您也应当一并赔偿。</p>
+    <p>
+      您有违反本协议任何行为，导致任何第三方损害的，您应当独立承担责任；大道云平台因此遭受损失的，您也应当一并赔偿。
+    </p>
     <p>&nbsp;</p>
     <p>
       <span class="bold">7.3【单方提前终止服务】</span>
     </p>
     <p>
-      <span class="bold">您充分了解并同意，您在选择使用本服务后，若您在无任何法定或约定理由的情况之下，单方要求提前终止本服务的，大道云平台无需向您退还任何费用，剩余的服务费用，作为违约金而归大道云平台所有。</span>
+      <span class="bold"
+        >您充分了解并同意，您在选择使用本服务后，若您在无任何法定或约定理由的情况之下，单方要求提前终止本服务的，大道云平台无需向您退还任何费用，剩余的服务费用，作为违约金而归大道云平台所有。</span
+      >
     </p>
     <p>&nbsp;</p>
     <p><span class="bold">八、免责条款</span></p>
     <p>&nbsp;</p>
     <p>
-        <span class="bold">8.1 您理解并同意：在使用本服务的过程中，可能会因不可抗力而使本服务发生中断，并因此而引发损害。不可抗力是指不能预见、不能克服并不能避免且对一方或双方造成重大影响的客观事件，包括但不限于自然灾害如洪水、地震、风暴、疫情等以及社会事件如战争、动乱、政府行为等。出现上述情况时，大道云平台将努力在第一时间与相关单位配合，及时进行修复，若由此给您造成损失的，您同意放弃追究大道云平台的责任。</span>
+      <span class="bold"
+        >8.1
+        您理解并同意：在使用本服务的过程中，可能会因不可抗力而使本服务发生中断，并因此而引发损害。不可抗力是指不能预见、不能克服并不能避免且对一方或双方造成重大影响的客观事件，包括但不限于自然灾害如洪水、地震、风暴、疫情等以及社会事件如战争、动乱、政府行为等。出现上述情况时，大道云平台将努力在第一时间与相关单位配合，及时进行修复，若由此给您造成损失的，您同意放弃追究大道云平台的责任。</span
+      >
     </p>
     <p>
-      <span class="bold">8.2 您理解并同意：若由于以下情形导致的功能中断或受阻，大道云平台并不承担任何法律责任：</span>
+      <span class="bold"
+        >8.2
+        您理解并同意：若由于以下情形导致的功能中断或受阻，大道云平台并不承担任何法律责任：</span
+      >
     </p>
     <p><span class="bold">8.2.1 受到计算机病毒、木马或其他恶意程序、黑客攻击的破坏；</span></p>
     <p><span class="bold">8.2.2 您操作不当；</span></p>
@@ -105,14 +190,20 @@
     <p>九、其他</p>
     <p>&nbsp;</p>
     <p>9.1【协议的生效与变更】</p>
-    <p>您使用本服务即视为您已阅读并同意受本协议的约束。大道云平台有权在必要时修改本协议条款。您可以在相关页面中查阅最新的协议条款。本协议条款变更后，如果您继续使用本服务，即视为您已接受修改后的协议。如果您不接受修改后的协议，应当停止使用本服务。</p>
+    <p>
+      您使用本服务即视为您已阅读并同意受本协议的约束。大道云平台有权在必要时修改本协议条款。您可以在相关页面中查阅最新的协议条款。本协议条款变更后，如果您继续使用本服务，即视为您已接受修改后的协议。如果您不接受修改后的协议，应当停止使用本服务。
+    </p>
     <p>9.2【协议签订地】</p>
     <p>本协议签订地为中华人民共和国深圳市南山区。</p>
     <p>9.3【适用法律】</p>
-    <p>本协议的成立、生效、履行、解释及纠纷解决，适用中华人民共和国大陆地区法律（不包括冲突法）。</p>
+    <p>
+      本协议的成立、生效、履行、解释及纠纷解决，适用中华人民共和国大陆地区法律（不包括冲突法）。
+    </p>
     <p><span class="bold">9.4【争议解决】</span></p>
     <p>
-      <span class="bold">若您和大道云平台之间发生任何纠纷或争议，首先应友好协商解决；协商不成的，各方共同约定，凡因本协议引起的或与本协议有关的任何争议，均提交湛江仲裁委员会依其规则和国家法律法规从速仲裁。</span>
+      <span class="bold"
+        >若您和大道云平台之间发生任何纠纷或争议，首先应友好协商解决；协商不成的，各方共同约定，凡因本协议引起的或与本协议有关的任何争议，均提交湛江仲裁委员会依其规则和国家法律法规从速仲裁。</span
+      >
     </p>
     <p>9.5【条款标题】</p>
     <p>本协议所有条款的标题仅为阅读方便，本身并无实际涵义，不能作为本协议涵义解释的依据。</p>
@@ -123,8 +214,10 @@
   </view>
 </template>
 
-<style lang="scss">.agreement-doc {
+<style lang="scss">
+.agreement-doc {
   padding: 1em;
+  font-size: 12px;
   .bold {
     font-weight: bold;
   }
@@ -134,9 +227,8 @@
     margin-top: 1em;
   }
 
-  font-size: 12px;
-
   p {
     margin: 0;
   }
-}</style>
+}
+</style>