对接商家详情

src/api/shop.js

@@ -334,4 +334,28 @@ export function tbShopInfoPost(data, method = 'post') {
   })
 }
 
+/**
+ * 详情（配置三方支付）
+ * @returns
+ */
+export function tbMerchantThirdApply(shopId) {
+  return request({
+    url: `/api/tbMerchantThirdApply/${shopId}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 修改第三方配置
+ * @returns
+ */
+export function tbMerchantThirdApplyPut(data) {
+  return request({
+    url: `/api/tbMerchantThirdApply`,
+    method: 'put',
+    data
+  })
+}
+
+
 

src/views/shop/components/detailModal.vue

@@ -0,0 +1,107 @@
+<template>
+    <el-dialog :visible.sync="dialogVisible" :show-close="false" @close="reset">
+        <el-tabs v-model="activeName">
+            <el-tab-pane label="聚合支付" name="pay">
+                <el-form ref="form" :model="form" label-width="120px" label-position="left">
+                    <el-form-item label="商户号">
+                        <el-input v-model="form.appId" placeholder="请输入商户号"></el-input>
+                    </el-form-item>
+                    <el-form-item label="商户密钥">
+                        <el-input type="textarea" v-model="form.appToken" placeholder="请输入商户密钥"></el-input>
+                    </el-form-item>
+                    <el-form-item label="支付密码">
+                        <el-input v-model="form.payPassword" placeholder="请输入支付密码"></el-input>
+                    </el-form-item>
+                    <el-form-item label="状态">
+                        <el-radio-group v-model="form.status">
+                            <el-radio :label="1">启用</el-radio>
+                            <el-radio :label="-1">禁用</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-form>
+            </el-tab-pane>
+        </el-tabs>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="close">取消</el-button>
+            <el-button type="primary" @click="submitHandle" :loading="formLoading">
+                <span v-if="!formLoading">保存</span>
+                <span v-else>保存中...</span>
+            </el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import { tbMerchantThirdApply, tbMerchantThirdApplyPut } from '@/api/shop'
+export default ({
+    data() {
+        return {
+            dialogVisible: false,
+            activeName: 'pay',
+            formLoading: false,
+            form: {
+                appToken: '',
+                id: '',
+                payPassword: '',
+                status: 1,
+                appId: ''
+            }
+        }
+    },
+    methods: {
+        // 保存
+        async submitHandle() {
+            this.formLoading = true
+            try {
+                await tbMerchantThirdApplyPut(this.form)
+                this.$emit('success')
+                this.formLoading = false
+                this.$notify({
+                    title: '成功',
+                    message: `提交成功`,
+                    type: 'success'
+                });
+                this.close()
+            } catch (error) {
+                this.formLoading = false
+                console.log(error)
+            }
+        },
+        close() {
+            this.dialogVisible = false
+        },
+        reset() {
+            this.form.appToken = ''
+            this.form.id = ''
+            this.form.payPassword = ''
+            this.form.status = 1
+            this.form.appId = ''
+        },
+        // 详情（配置三方支付）
+        async getDetail(id) {
+            try {
+                const res = await tbMerchantThirdApply(id)
+                this.form.appToken = res.appToken
+                this.form.payPassword = res.payPassword
+                this.form.status = res.status
+                this.form.appId = res.appId
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        show(obj) {
+            this.dialogVisible = true
+            if (obj && obj.id) {
+                this.form.id = obj.merchantId
+                this.getDetail(obj.merchantId)
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+::v-deep(.el-dialog__header) {
+    padding: 0;
+}
+</style>

src/views/shop/list/index.vue

@@ -69,14 +69,14 @@
         <el-table-column label="操作" width="150">
           <template v-slot="scope">
             <el-button type="text" icon="el-icon-edit" @click="$refs.addShop.show(scope.row)">编辑</el-button>
-            <el-dropdown>
+            <el-dropdown @command="dropdownClick">
               <el-button type="text">更多<i class="el-icon-arrow-down"></i></el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>详情</el-dropdown-item>
-                <el-dropdown-item>续费记录</el-dropdown-item>
-                <el-dropdown-item>前往店铺</el-dropdown-item>
-                <el-dropdown-item>重置密码</el-dropdown-item>
-                <el-dropdown-item divided>删除</el-dropdown-item>
+                <el-dropdown-item :command="{ row: scope.row, command: 1 }">详情</el-dropdown-item>
+                <el-dropdown-item :command="2">续费记录</el-dropdown-item>
+                <el-dropdown-item :command="3">前往店铺</el-dropdown-item>
+                <el-dropdown-item :command="4">重置密码</el-dropdown-item>
+                <el-dropdown-item divided :command="5">删除</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </template>
@@ -88,15 +88,17 @@
         @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
     <addShop ref="addShop" @success="getTableData" />
+    <detailModal ref="detailModal" />
   </div>
 </template>
 
 <script>
 import dayjs from 'dayjs'
 import { tbShopInfo } from '@/api/shop.js'
-import addShop from '../components/addShop.vue'
+import addShop from '../components/addShop'
+import detailModal from '../components/detailModal'
 export default {
-  components: { addShop },
+  components: { addShop, detailModal },
   data() {
     return {
       dayjs,
@@ -128,6 +130,15 @@ export default {
     this.getTableData()
   },
   methods: {
+    dropdownClick(e) {
+      switch (e.command) {
+        case 1:
+          this.$refs.detailModal.show(e.row)
+          break;
+        default:
+          break;
+      }
+    },
     // 重置查询
     resetHandle() {
       this.query.name = ''