添加协议显示

src/views/productService/api.js

@@ -27,3 +27,9 @@ export const tenantInfoRePay = (data) => request2({
   url: '/api-web/tenantInfo/renew/' + data.id + '?val=' + data.val,
   method: 'get',
 })
+
+// 获取协议
+export const getContract = (data) => request2({
+  url: `/api-web/tenantInfo/getContract/${data.id}`,
+  method: 'get',
+})

src/views/productService/model/serviceModel.vue

@@ -13,43 +13,50 @@
           <el-option label="微信支付" value="wx_pub"></el-option>
         </el-select>
       </el-form-item>
-    </el-form>
-    <el-table
-      style="width: 100%"
-      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
-      :data="tableList"
-    >
-      <el-table-column align="center" prop="platformServeName" label="产品名称">
-      </el-table-column>
-      <el-table-column align="center" label="学员上限">
-        <template slot-scope="scope">
-          {{ scope.row.studentUpLimit | numberFormat }}人
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="付费模式">
-        <template slot-scope="scope">
-          {{ scope.row.expiryUnit | memberEnumType }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="num" label="数量">
-      </el-table-column>
-      <el-table-column
-        align="center"
-        label="原价（元）"
-      >
-        <template slot-scope="scope">
-          {{ scope.row.rechargeAmount | hasMoneyFormat }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        align="center"
-        label="支付价格（元）"
+      <el-table
+        style="width: 100%; margin-bottom: 15px;"
+        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+        :data="tableList"
       >
-        <template slot-scope="scope">
-          <span style="color: red;">{{ scope.row.value | hasMoneyFormat }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table-column align="center" prop="platformServeName" label="产品名称">
+        </el-table-column>
+        <el-table-column align="center" label="学员上限">
+          <template slot-scope="scope">
+            {{ scope.row.studentUpLimit | numberFormat }}人
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="付费模式">
+          <template slot-scope="scope">
+            {{ scope.row.expiryUnit | memberEnumType }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="num" label="数量">
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="原价（元）"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.rechargeAmount | hasMoneyFormat }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="支付价格（元）"
+        >
+          <template slot-scope="scope">
+            <span style="color: red;">{{ scope.row.value | hasMoneyFormat }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-form-item prop="checked" :rules="[{required: true, message: '请阅读并同意协议', trigger: 'change'}]">
+        <el-checkbox v-model="payForm.checked" @change="onCheckChange">
+        </el-checkbox>
+          <span style="color: #606266; padding-left: 5px;cursor: pointer;" @click="onCheckBox">我已阅读并同意</span>
+          <span @click.stop="onLookContract" style="color: #01C1B5;cursor: pointer;">《产品及服务协议》</span>
+      </el-form-item>
+    </el-form>
 
     <span slot="footer" class="dialog-footer">
       <el-button @click="$listeners.close();">取 消</el-button>
@@ -57,6 +64,20 @@
     </span>
 
     <el-dialog
+      title="查看协议"
+      :visible.sync="lookVisible"
+      width="415px"
+      append-to-body
+    >
+      <previewProtocol
+        @close="lookVisible = false"
+        :look="true"
+        :fileContent="fileContent"
+        v-if="lookVisible"
+      />
+    </el-dialog>
+
+    <el-dialog
       title="支付二维码"
       :visible.sync="payMentVisible"
       :before-close="onClose"
@@ -72,16 +93,20 @@
 // import { recharge } from '../api'
 import { vaildStudentUrl } from '@/utils/validate'
 import payment from '@/views/productService/model/payment'
-import { tenantInfoRePay } from '../api'
+import previewProtocol from "@/views/tenantSetting/model/previewProtocol";
+import { tenantInfoRePay, getContract } from '../api'
 import { getTenantId } from '@/utils/auth'
 export default {
   props: ["value", "tenantInfo"],
-  components: { payment },
+  components: { payment, previewProtocol },
   data() {
     return {
       payForm: {
         payType: null,
+        checked: null,
       },
+      fileContent: null,
+      lookVisible: false,
       pay_channel: null, //支付渠道
       selectStudentMoney: 0, // 选中学生金额
       payMentVisible: false,
@@ -102,6 +127,18 @@ export default {
     }
   },
   methods: {
+    onCheckChange() {
+      if(!this.payForm.checked) {
+        this.payForm.checked = null
+      }
+    },
+    onCheckBox() {
+      if(this.payForm.checked) {
+        this.payForm.checked = null
+      } else {
+        this.payForm.checked = true
+      }
+    },
     onMemberPay() {
       this.$refs.payForm.validate(async (_) => {
         if(_) {
@@ -129,6 +166,17 @@ export default {
     onClose(done) {
       this.onPaymentClose(false, done)
     },
+    async onLookContract() {
+      // 如果有协议则不需要重新请求
+      if(!this.fileContent) {
+        try {
+          const tenantId = this.$helpers.tenantId
+          const res = await getContract({ id: tenantId })
+          this.fileContent = res.data
+        } catch(e) {}
+      }
+      this.lookVisible = true
+    },
     onPaymentClose(hideTip = false, callBack) {
       if(hideTip) {
         this.payMentVisible = false

src/views/tenantSetting/model/addProtocol.vue

@@ -80,7 +80,6 @@
 import { tenantContractTemplateAdd } from '../api'
 import previewProtocol from "@/views/tenantSetting/model/previewProtocol";
 import mammoth from "mammoth";
-import { headHtml, footerHtml } from './protocolTemplate'
 export default {
   components: { previewProtocol },
   data() {
@@ -123,7 +122,7 @@ export default {
       let newHTML = html.replace(//g, '')
       .replace('<h1>', '<h2 style="font-size: 16px;font-weight: bold; padding-top: 15px;">')
       this.form.contractTemplateContent = newHTML
-      this.fileContent = headHtml() + newHTML + footerHtml()
+      this.fileContent = newHTML
     },
     readFileInputEventAsArrayBuffer(file) {
       let reader = new FileReader();

src/views/tenantSetting/model/previewProtocol.vue

@@ -44,6 +44,9 @@ export default {
 .scroll {
   overflow: auto;
   max-height: 400px;
+  /deep/.container {
+    padding: 0;
+  }
 }
 .dialog-footer {
   display: block;

src/views/tenantSetting/tenantInfoProtocol.vue

@@ -104,7 +104,6 @@
   </div>
 </template>
 <script>
-import { headHtml, footerHtml } from './model/protocolTemplate'
 import pagination from "@/components/Pagination/index";
 import previewProtocol from "@/views/tenantSetting/model/previewProtocol";
 import { tenantContractTemplateList, updateStatus } from "./api";
@@ -165,7 +164,7 @@ export default {
     },
     async openService(row, type) {
       if(type == 'look') {
-        this.fileContent = headHtml() + row.contractTemplateContent + footerHtml()
+        this.fileContent = row.contractTemplateContent
         this.lookVisible = true
       } else if(type == 'open') {
         try {