商家列表增加微信支付和支付宝支付的设置

admin-update/src/sass/shop/list.vue

@@ -1,244 +1,324 @@
 <template>
-	<div class="app-list-content">
-		<cl-crud class="liu-crud-wrap" @load="onLoad">
-			<!-- 粉丝 -->
-			<template #table-column-totalFans="{scope}">
-				<span>{{ scope.row.merchantAsset.totalFans }}</span>
-			</template>
+    <div class="app-list-content">
+        <cl-crud class="liu-crud-wrap" @load="onLoad">
+            <!-- 粉丝 -->
+            <template #table-column-totalFans="{scope}">
+                <span>{{ scope.row.merchantAsset.totalFans }}</span>
+            </template>
 
-			<!-- 客户 -->
-			<template #table-column-totalUser="{scope}">
-				<span>{{ scope.row.merchantAsset.totalUser }}</span>
-			</template>
+            <!-- 客户 -->
+            <template #table-column-totalUser="{scope}">
+                <span>{{ scope.row.merchantAsset.totalUser }}</span>
+            </template>
 
-			<!-- 访问量 -->
-			<template #table-column-totalVisit="{scope}">
-				<span>{{ scope.row.merchantAsset.totalVisit }}</span>
-			</template>
+            <!-- 访问量 -->
+            <template #table-column-totalVisit="{scope}">
+                <span>{{ scope.row.merchantAsset.totalVisit }}</span>
+            </template>
 
-			<!-- 微信支付 -->
-			<template #table-column-wxPayInit="{scope}">
-				<el-button
-					v-if="scope.row.extend.wxPayInit == '0'"
-					type="text"
-					@click="wxPayConfigFn()"
-					>配置</el-button
-				>
-				<i v-else class="iconfont icondagou"></i>
-			</template>
+            <!-- 微信支付 -->
+            <template #table-column-wxPayInit="{scope}">
+                <el-button v-if="scope.row.extend.wxPayInit == '0'" type="text" @click="payOption(1,scope.row)">配置
+                </el-button>
+                <i v-else class="iconfont icondagou"></i>
+            </template>
+            <!-- 支付宝支付 -->
+            <template #table-column-aliPayInit="{scope}">
+                <el-button v-if="scope.row.extend.aliPayInit== '0'" type="text" @click="payOption(2,scope.row)">配置
+                </el-button>
+                <i v-else class="iconfont icondagou"></i>
+            </template>
 
-			<!-- 支付宝支付 -->
-			<template #table-column-aliPayInit="{scope}">
-				<el-button v-if="scope.row.extend.aliPayInit == '0'" type="text">配置</el-button>
-				<i v-else class="iconfont icondagou"></i>
-			</template>
+            <!-- 公众号 -->
+            <template #table-column-wxAppId="{scope}">
+                <span v-if="scope.row.wxAppId">{{ scope.row.wxAppId }}</span>
+                <el-button
+                        type="text"
+                        v-else
+                        @click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}`)"
+                >待绑定
+                </el-button
+                >
+            </template>
 
-			<!-- 公众号 -->
-			<template #table-column-wxAppId="{scope}">
-				<span v-if="scope.row.wxAppId">{{ scope.row.wxAppId }}</span>
-				<el-button
-					type="text"
-					v-else
-					@click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}`)"
-					>待绑定</el-button
-				>
-			</template>
+            <!-- 小程序 -->
+            <template #table-column-miniAppId="{scope}">
+                <span v-if="scope.row.miniAppId">{{ scope.row.miniAppId }}</span>
+                <el-button
+                        type="text"
+                        v-else
+                        @click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}&authType=2`)"
+                >待绑定
+                </el-button
+                >
+            </template>
 
-			<!-- 小程序 -->
-			<template #table-column-miniAppId="{scope}">
-				<span v-if="scope.row.miniAppId">{{ scope.row.miniAppId }}</span>
-				<el-button
-					type="text"
-					v-else
-					@click="bindJump(`/wx-open/begin-auth?id=${scope.row.id}&authType=2`)"
-					>待绑定</el-button
-				>
-			</template>
-
-			<!-- 平台帐号激活 -->
-			<template #slot-activation="{scope}">
-				<el-button
-					type="primary"
-					size="mini"
-					@click="bindJump(`/merchant/add-platform-merchant`)"
-					>平台帐号激活</el-button
-				>
-			</template>
-		</cl-crud>
-		<!-- 微信支付 -->
-		<el-dialog
-			title="微信支付设置"
-			:visible.sync="wxPayDialog"
-			:close-on-click-modal="false"
-			width="500px"
-		>
-			<div class="ad-modal-content">
-				<el-form
-					:model="form"
-					:rules="rule"
-					ref="form"
-					label-width="100px"
-					class="demo-form"
-				>
-					<el-form-item label="商户ID" prop="status">
-						<el-input
-							v-model="form.version"
-							placeholder="请输入商户ID"
-							size="small"
-						></el-input>
-					</el-form-item>
-					<el-form-item label="密钥" prop="remark">
-						<el-input type="textarea" v-model="form.remark"></el-input>
-					</el-form-item>
-				</el-form>
-			</div>
-			<div slot="footer" class="dialog-footer">
-				<el-button size="small" @click="resetForm">取 消</el-button>
-				<el-button type="primary" size="small" @click="wxPayConfirm">确认</el-button>
-			</div>
-		</el-dialog>
-		<!-- 支付宝支付 -->
-	</div>
+            <!-- 平台帐号激活 -->
+            <template #slot-activation="{scope}">
+                <el-button
+                        type="primary"
+                        size="mini"
+                        @click="bindJump(`/merchant/add-platform-merchant`)"
+                >平台帐号激活
+                </el-button
+                >
+            </template>
+        </cl-crud>
+        <!-- 微信支付 -->
+        <el-dialog
+                :title="dialogTitle"
+                :visible.sync="wxPayDialog"
+                :close-on-click-modal="false"
+                width="500px"
+        >
+            <div class="ad-modal-content">
+                <el-form
+                        v-if="plamPayType===1"
+                        :model="form"
+                        :rules="rule"
+                        ref="form"
+                        label-width="100px"
+                        class="demo-form"
+                >
+                    <el-form-item label="商户ID" prop="status">
+                        <el-input
+                                v-model="form.wxPayMerchantId"
+                                disabled
+                                placeholder="请输入商户ID"
+                                size="small"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="密钥" prop="remark">
+                        <el-input type="textarea" v-model="form.wxPayKey" disabled></el-input>
+                    </el-form-item>
+                </el-form>
+                <el-form
+                        v-if="plamPayType===2"
+                        :model="form"
+                        :rules="rule"
+                        ref="form"
+                        label-width="100px"
+                        class="demo-form"
+                >
+                    <el-form-item label="商户ID" prop="status">
+                        <el-input
+                                v-model="form.alipayPId"
+                                disabled
+                                placeholder="请输入商户ID"
+                                size="small"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="商户私钥" prop="remark">
+                        <el-input type="textarea" v-model="form.alipayKey" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="支付宝公钥" prop="remark">
+                        <el-input type="textarea" v-model="form.alipayPublicKey" disabled></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button size="small" @click="resetForm('form')">取 消</el-button>
+                <el-button type="primary" size="small" @click="setPayConfirm">确认</el-button>
+            </div>
+        </el-dialog>
+        <!-- 支付宝支付 -->
+    </div>
 </template>
 
 <script>
-import { getFirstHost } from '@/cool/utils';
-export default {
-	data() {
-		return {
-			// cl-crud
-			app: null,
-			wxPayDialog: false,
-            form:{}
-		};
-	},
-	mounted() {},
-	methods: {
-		wxPayConfigFn() {},
-		// 绑定跳转
-		bindJump(url) {
-			let host = `http://api.w.${getFirstHost()}.com`;
-			window.open(host + url);
-		},
-		// crud
-		onLoad({ ctx, app }) {
-			this.app = app;
-			let applyHost = () => {
-				return this.$service.sassShop.merchantList();
-			};
-			ctx.service({
-				page: applyHost
-			})
-				.set('table', {
-					columns: [
-						{
-							prop: 'id',
-							label: 'ID',
-							align: 'center'
-						},
-						{
-							prop: 'merchantName',
-							label: '名称',
-							align: 'center'
-						},
-						{
-							prop: 'totalFans',
-							label: '粉丝',
-							align: 'center'
-						},
-						{
-							prop: 'totalUser',
-							label: '客户',
-							align: 'center'
-						},
-						{
-							prop: 'totalIncome',
-							label: '收入',
-							align: 'center',
-							emptyText: '无'
-						},
-						{
-							prop: 'totalVisit',
-							label: '访问量',
-							align: 'center'
-						},
-						{
-							prop: 'wxPayInit',
-							label: '微信支付',
-							align: 'center'
-						},
-						{
-							prop: 'aliPayInit',
-							label: '支付宝支付',
-							align: 'center'
-						},
-						{
-							prop: 'adminName',
-							label: '店长',
-							align: 'center'
-						},
-						{
-							prop: 'openAppId',
-							label: '平台',
-							align: 'center',
-							'min-width': '150px'
-						},
-						{
-							prop: 'wxAppId',
-							label: '公众号',
-							align: 'center',
-							'min-width': '150px'
-						},
-						{
-							prop: 'miniAppId',
-							label: '小程序',
-							align: 'center',
-							'min-width': '150px'
-						},
-						{
-							prop: 'miniVersion',
-							label: '小程序版本',
-							align: 'center'
-						},
-						{
-							prop: 'setName',
-							label: '套餐',
-							align: 'center'
-						},
-						{
-							prop: 'status',
-							label: '状态',
-							align: 'center'
-						}
-					],
-					// 操作列
-					op: {
-						visible: false, // 是否显示
-						// 同 element-ui Table-column Attributes
-						props: {
-							width: 150,
-							align: 'center',
-							fixed: 'right',
-							label: '操作'
-						},
-						// 布局，请移步 `layout`
-						layout: []
-					}
-				})
-				.set('layout', [
-					// ['slot-tabs'],
-					['flex1', 'refresh-btn', 'slot-activation'],
-					['data-table'],
-					['flex1', 'pagination']
-				])
-				.done();
-			app.refresh();
-		}
-	}
-};
+    import {getFirstHost} from '@/cool/utils';
+
+    export default {
+        data() {
+            return {
+                // cl-crud
+                app: null,
+                wxPayDialog: false,
+                dialogTitle: '',
+                plamPayType: 1,
+                form: {},
+                rule: {}
+            };
+        },
+        mounted() {
+        },
+        methods: {
+            wxPayConfigFn() {
+            },
+            // 绑定跳转
+            bindJump(url) {
+                let host = `http://api.w.${getFirstHost()}.com`;
+                window.open(host + url);
+            },
+            // crud
+            onLoad({ctx, app}) {
+                this.app = app;
+                let applyHost = () => {
+                    return this.$service.sassShop.merchantList();
+                };
+                ctx.service({
+                    page: applyHost
+                })
+                    .set('table', {
+                        columns: [
+                            {
+                                prop: 'id',
+                                label: 'ID',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'merchantName',
+                                label: '名称',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'totalFans',
+                                label: '粉丝',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'totalUser',
+                                label: '客户',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'totalIncome',
+                                label: '收入',
+                                align: 'center',
+                                emptyText: '无'
+                            },
+                            {
+                                prop: 'totalVisit',
+                                label: '访问量',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'wxPayInit',
+                                label: '微信支付',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'aliPayInit',
+                                label: '支付宝支付',
+                                align: 'center',
+                                'min-width': '100px'
+                            },
+                            {
+                                prop: 'adminName',
+                                label: '店长',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'openAppId',
+                                label: '平台',
+                                align: 'center',
+                                'min-width': '150px'
+                            },
+                            {
+                                prop: 'wxAppId',
+                                label: '公众号',
+                                align: 'center',
+                                'min-width': '150px'
+                            },
+                            {
+                                prop: 'miniAppId',
+                                label: '小程序',
+                                align: 'center',
+                                'min-width': '150px'
+                            },
+                            {
+                                prop: 'miniVersion',
+                                label: '小程序版本',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'setName',
+                                label: '套餐',
+                                align: 'center'
+                            },
+                            {
+                                prop: 'status',
+                                label: '状态',
+                                align: 'center'
+                            }
+                        ],
+                        // 操作列
+                        op: {
+                            visible: false, // 是否显示
+                            // 同 element-ui Table-column Attributes
+                            props: {
+                                width: 150,
+                                align: 'center',
+                                fixed: 'right',
+                                label: '操作'
+                            },
+                            // 布局，请移步 `layout`
+                            layout: []
+                        }
+                    })
+                    .set('layout', [
+                        // ['slot-tabs'],
+                        ['flex1', 'refresh-btn', 'slot-activation'],
+                        ['data-table'],
+                        ['flex1', 'pagination']
+                    ])
+                    .done();
+                app.refresh();
+            },
+
+            payOption(type, data) {
+                this.plamPayType = type
+                console.log(type)
+                this.$service.sassShop.merchantExtend({id: data.id}).then(res => {
+                    this.form = {...res}
+                    this.wxPayDialog = true
+                    switch (type) {
+                        case 1: //微信
+                            this.dialogTitle = '微信支付设置'
+                            break;
+                        case 2://支付宝
+                            this.dialogTitle = '支付宝支付设置'
+                            break;
+                    }
+                })
+            },
+            setPayConfirm() {
+                let plamPayType = this.plamPayType
+                switch (plamPayType) {
+                    case 1: //微信
+                        var data = {
+                            merchantId: this.form.merchantId,
+                            wxPayMerchantId: this.form.wxPayMerchantId,
+                            wxPayKey: this.form.wxPayKey
+                        }
+                        this.$service.sassShop.setWxPay(data).then(res => {
+                            this.resetForm()
+                            this.$message("成功")
+                        });
+                        break;
+                    case 2://支付宝
+                        var data = {
+                            merchantId: this.form.merchantId,
+                            alipayPId: this.form.alipayPId,
+                            alipayKey: this.form.alipayKey,
+                            alipayPublicKey: this.form.alipayPublicKey
+                        }
+                        this.$service.sassShop.setAlipa(data);
+                        break;
+
+                }
+
+            },
+            resetForm(formName) {
+                let formNamed = formName || 'form'
+                this.$refs[formNamed].resetFields();
+                this.wxPayDialog = false
+            }
+        }
+    };
 </script>
 <style lang="scss">
-.icondagou {
-	color: #1aad19;
-}
+    .icondagou {
+        color: #1aad19;
+    }
 </style>

admin-update/src/service/sass/shop/index.js

@@ -1,62 +1,88 @@
-import { BaseService, Service } from '@/cool';
+import {BaseService, Service} from '@/cool';
 
 export class ShopService extends BaseService {
-	// 商家列表 s
-	merchantList(data) {
-		return this.request({
-			url: '/merchant/list',
-			params: data
-		});
-	}
-
-	// 商家申请记录 s
-	applyList(data) {
-		return this.request({
-			url: '/apply/list',
-			params: data
-		});
-	}
-
-	// 商家申请审核 s
-	applyCheck(data) {
-		return this.request({
-			url: '/apply/check',
-			method: 'POST',
-			data: data
-		});
-	}
-
-	// 门店列表 b
-	shopList(data) {
-		return this.request({
-			url: '/shop/list',
-			params: data
-		});
-	}
-
-	// 购买列表 b
-	buyList(data) {
-		return this.request({
-			url: '/renew/list',
-			params: data
-		});
-	}
-
-	// 小程序升级记录 s
-	upgradeList(data) {
-		return this.request({
-			url: '/mini-upgrade/list',
-			params: data
-		});
-	}
-
-	// 小程序更新版本 s
-	upgradeUpdate(data) {
-		return this.request({
-			url: '/mini-upgrade/update',
-			params: data
-		});
-	}
+    // 商家列表 s
+    merchantList(data) {
+        return this.request({
+            url: '/merchant/list',
+            params: data
+        });
+    }
+
+    // 商家申请记录 s
+    applyList(data) {
+        return this.request({
+            url: '/apply/list',
+            params: data
+        });
+    }
+
+    // 商家申请审核 s
+    applyCheck(data) {
+        return this.request({
+            url: '/apply/check',
+            method: 'POST',
+            data: data
+        });
+    }
+
+    // 门店列表 b
+    shopList(data) {
+        return this.request({
+            url: '/shop/list',
+            params: data
+        });
+    }
+
+    // 购买列表 b
+    buyList(data) {
+        return this.request({
+            url: '/renew/list',
+            params: data
+        });
+    }
+
+    // 小程序升级记录 s
+    upgradeList(data) {
+        return this.request({
+            url: '/mini-upgrade/list',
+            params: data
+        });
+    }
+
+    // 小程序更新版本 s
+    upgradeUpdate(data) {
+        return this.request({
+            url: '/mini-upgrade/update',
+            params: data
+        });
+    }
+
+    //商家拓展信息 s
+    merchantExtend(data) {
+        return this.request({
+            url: '/merchant-extend/detail',
+            params: data
+        });
+    }
+
+    // 微信支付设置 s
+    setWxPay(data) {
+        return this.request({
+            url: '/merchant-extend/set-wx-pay',
+            data,
+            method: 'POST',
+        });
+    }
+
+    // 支付宝支付设置 s
+    setAlipa(data) {
+        return this.request({
+            url: '/merchant-extend/set-alipay',
+            data,
+            method: 'POST',
+        });
+    }
 }
 
 export default new ShopService();