upload UI source codeHEADmain

3 files changed, 232 insertions, 0 deletions

diff --git a/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/config.vue b/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/config.vue
new file mode 100644
index 0000000..e7b50d4
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/config.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
+    <el-form-item label="appID" prop="appId">
+      <el-input v-model="form.appId" style="width: 40%" />
+      <span style="color: #C0C0C0;margin-left: 10px;">应用APPID,收款账号既是APPID对应支付宝账号</span>
+    </el-form-item>
+    <el-form-item label="商家账号" prop="sysServiceProviderId">
+      <el-input v-model="form.sysServiceProviderId" style="width: 40%;" />
+      <span style="color: #C0C0C0;margin-left: 10px;">商家账号</span>
+    </el-form-item>
+    <el-form-item label="商户私钥" prop="privateKey">
+      <el-input v-model="form.privateKey" type="password" style="width: 40%;" />
+      <span style="color: #C0C0C0;margin-left: 10px;">商户私钥，你的PKCS8格式RSA2私钥</span>
+    </el-form-item>
+    <el-form-item label="支付宝公钥" prop="publicKey">
+      <el-input v-model="form.publicKey" type="password" style="width: 40%;" />
+      <span style="color: #C0C0C0;margin-left: 10px;">支付宝公钥</span>
+    </el-form-item>
+    <el-form-item label="回调地址" prop="returnUrl">
+      <el-input v-model="form.returnUrl" style="width: 40%;" />
+      <span style="color: #C0C0C0;margin-left: 10px;">订单完成后返回的地址</span>
+    </el-form-item>
+    <el-form-item label="异步通知" prop="notifyUrl">
+      <el-input v-model="form.notifyUrl" style="width: 40%;" />
+      <span style="color: #C0C0C0;margin-left: 10px;">支付结果异步通知地址</span>
+    </el-form-item>
+    <el-form-item label="">
+      <el-button :loading="loading" size="medium" type="primary" @click="doSubmit">保存配置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { get, update } from '@/api/tools/alipay'
+export default {
+  name: 'Config',
+  data() {
+    return {
+      loading: false,
+      form: { appId: '', sysServiceProviderId: '', privateKey: '', publicKey: '', returnUrl: '', notifyUrl: '' },
+      rules: {
+        appId: [
+          { required: true, message: '请输入appID', trigger: 'blur' }
+        ],
+        sysServiceProviderId: [
+          { required: true, message: '请输入商家账号', trigger: 'blur' }
+        ],
+        privateKey: [
+          { required: true, message: '商户私钥不能为空', trigger: 'blur' }
+        ],
+        publicKey: [
+          { required: true, message: '支付宝公钥不能为空', trigger: 'blur' }
+        ],
+        returnUrl: [
+          { required: true, message: '回调地址不能为空', trigger: 'blur' }
+        ],
+        notifyUrl: [
+          { required: true, message: '回调地址不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      get().then(res => {
+        this.form = res
+      })
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          update(this.form).then(res => {
+            this.$notify({
+              title: '修改成功',
+              type: 'success',
+              duration: 2500
+            })
+            this.loading = false
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/index.vue b/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/index.vue
new file mode 100644
index 0000000..5234929
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-tabs v-model="activeName" style="padding-left: 5px;">
+    <el-tab-pane label="参数配置" name="first">
+      <Config />
+    </el-tab-pane>
+    <el-tab-pane label="支付测试" name="second">
+      <ToPay />
+    </el-tab-pane>
+    <el-tab-pane label="使用说明" name="third">
+      <div>
+        <blockquote class="my-blockquote">注意</blockquote>
+        <pre class="my-code">
+测试所用参数都是沙箱环境，仅供测试使用，申请地址：<a style="color: #00a0e9" href="https://openhome.alipay.com/platform/appDaily.htm?tab=info" target="_blank">支付宝开发平台</a>
+如需付款测试，请使用
+账号：[email protected]
+密码与支付密码：111111</pre>
+        <blockquote class="my-blockquote"> 支付设置</blockquote>
+        <pre class="my-code">
+// 支付提供两个接口，
+// PC端与手机端，并且在前端使用代码识别
+if (/(Android)/i.test(navigator.userAgent)){     // 判断是否为Android手机
+    url = "/aliPay/toPayAsWeb"
+}else if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){  // 判断是否为苹果手机
+    url = "/aliPay/toPayAsWeb"
+} else {
+    url = "/aliPay/toPayAsPC"
+}</pre>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import Config from './config'
+import ToPay from './toPay'
+export default {
+  name: 'AliPay',
+  components: { Config, ToPay },
+  data() {
+    return {
+      activeName: 'second'
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/toPay.vue b/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/toPay.vue
new file mode 100644
index 0000000..595cf08
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/tools/aliPay/toPay.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="90px">
+      <el-form-item label="商品名称" prop="subject">
+        <el-input v-model="form.subject" style="width: 35%" />
+      </el-form-item>
+      <el-form-item label="商品价格" prop="totalAmount">
+        <el-input v-model="form.totalAmount" style="width: 35%" />
+        <span style="color: #C0C0C0;margin-left: 10px;">测试允许区间(0,5000]</span>
+      </el-form-item>
+      <el-form-item label="商品描述" prop="body">
+        <el-input v-model="form.body" style="width: 35%" rows="8" type="textarea" />
+      </el-form-item>
+      <el-form-item label="">
+        <el-button :loading="loading" size="medium" type="primary" @click="doSubmit">去支付</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { toAliPay } from '@/api/tools/alipay'
+export default {
+  data() {
+    return {
+      url: '',
+      // 新窗口的引用
+      newWin: null,
+      loading: false, form: { subject: '', totalAmount: '', body: '' },
+      rules: {
+        subject: [
+          { required: true, message: '商品名称不能为空', trigger: 'blur' }
+        ],
+        totalAmount: [
+          { required: true, message: '商品价格不能为空', trigger: 'blur' }
+        ],
+        body: [
+          { required: true, message: '商品描述不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    url(newVal, oldVal) {
+      if (newVal && this.newWin) {
+        this.newWin.sessionStorage.clear()
+        this.newWin.location.href = newVal
+        // 重定向后把url和newWin重置
+        this.url = ''
+        this.newWin = null
+      }
+    }
+  },
+  methods: {
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          // 先打开一个空的新窗口，再请求
+          this.newWin = window.open()
+          let url = ''
+          if (/(Android)/i.test(navigator.userAgent)) { // 判断是否为Android手机
+            url = 'aliPay/toPayAsWeb'
+          } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断是否为苹果手机
+            url = 'aliPay/toPayAsWeb'
+          } else {
+            url = 'aliPay/toPayAsPC'
+          }
+          toAliPay(url, this.form).then(res => {
+            this.loading = false
+            this.url = res
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>