将进件更换为在店铺管理开始

src/views/shop/list/components/detailModal.vue

@@ -1,56 +1,52 @@
 <template>
-  <el-dialog v-model="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="店铺id">
-            <el-input v-model="form.storeId" placeholder="请输入店铺id"></el-input>
-          </el-form-item>
-          <el-form-item label="商户名称">
-            <el-input v-model="form.merchantName" placeholder="请输入支付系统商户名称"></el-input>
-          </el-form-item>
-          <el-form-item label="商户应用id">
-            <el-input v-model="form.appId" placeholder="请输入商户应用id"></el-input>
-          </el-form-item>
-          <el-form-item label="商户密钥">
-            <el-input
-              type="textarea"
-              v-model="form.appSecret"
-              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="微信appid">
-            <el-input
-              v-model="form.wechatSmallAppid"
-              placeholder="请输入微信小程序appid"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="支付宝appid">
-            <el-input
-              v-model="form.alipaySmallAppid"
-              placeholder="请输入支付宝小程序appid"
-            ></el-input>
-          </el-form-item>
-          <!-- <el-form-item label="支付宝商户号">
+  <!-- <el-dialog v-model="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="店铺id">
+        <el-input v-model="form.storeId" placeholder="请输入店铺id"></el-input>
+      </el-form-item>
+      <el-form-item label="商户名称">
+        <el-input v-model="form.merchantName" placeholder="请输入支付系统商户名称"></el-input>
+      </el-form-item>
+      <el-form-item label="商户应用id">
+        <el-input v-model="form.appId" placeholder="请输入商户应用id"></el-input>
+      </el-form-item>
+      <el-form-item label="商户密钥">
+        <el-input type="textarea" v-model="form.appSecret" 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="微信appid">
+        <el-input v-model="form.wechatSmallAppid" placeholder="请输入微信小程序appid"></el-input>
+      </el-form-item>
+      <el-form-item label="支付宝appid">
+        <el-input v-model="form.alipaySmallAppid" placeholder="请输入支付宝小程序appid"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitHandle" :loading="formLoading">
+          <span v-if="!formLoading">保存</span>
+          <span v-else>保存中...</span>
+        </el-button>
+      </el-form-item>
+      <!-- <el-form-item label="支付宝商户号">
                         <el-input v-model="form.alipayAppId" placeholder="请输入支付宝商户号"></el-input>
                     </el-form-item>
                     <el-form-item label="支付宝商户密钥">
                         <el-input v-model="form.alipayAppToken" placeholder="请输入支付宝商户密钥"></el-input>
                     </el-form-item> -->
 
-          <!-- <el-form-item label="状态">
+      <!-- <el-form-item label="状态">
             <el-radio-group v-model="form.status">
               <el-radio :value="1">启用</el-radio>
               <el-radio :value="-1">禁用</el-radio>
             </el-radio-group>
           </el-form-item> -->
-        </el-form>
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
+    </el-form>
+    <!-- </el-tab-pane> -->
+  </el-tabs>
+  <!-- <template #footer>
       <div class="dialog-footer">
         <el-button @click="close">取消</el-button>
         <el-button type="primary" @click="submitHandle" :loading="formLoading">
@@ -58,8 +54,8 @@
           <span v-else>保存中...</span>
         </el-button>
       </div>
-    </template>
-  </el-dialog>
+    </template> -->
+  <!-- </el-dialog> -->
 </template>
 
 <script>

src/views/shop/list/components/payStatusCard.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="row mt14">
+    <el-form label-width="150" label-position="left" v-loading="loading">
+      <template v-if="!form.shopId">
+        <el-form-item label-width="0">
+          <el-text>您还未申请进件</el-text>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button type="primary" @click="toApplyment">去申请</el-button>
+        </el-form-item>
+      </template>
+      <template v-else>
+        <el-form-item label="商户号">
+          <el-text>{{ form.merchantCode }}</el-text>
+        </el-form-item>
+        <el-form-item label="商户类型">
+          <el-text>{{ userTypeListFilter(form.userType).label }}</el-text>
+        </el-form-item>
+        <el-form-item label="支付宝进件状态">
+          <div class="column">
+            <el-text :type="statusListFilter(form.alipayStatus).type">
+              {{ statusListFilter(form.alipayStatus).label }}
+            </el-text>
+            <div class="center" v-if="form.alipayStatus == 'SIGN'">
+              <el-text>待签约</el-text>
+              <el-link type="primary" @click="singCodeDialogRef?.show(form.alipaySignUrl, 1)">查看签约码</el-link>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="微信进件状态">
+          <div class="column">
+            <el-text :type="statusListFilter(form.wechatStatus).type">
+              {{ statusListFilter(form.wechatStatus).label }}
+            </el-text>
+            <div class="center" v-if="form.wechatStatus == 'SIGN'">
+              <el-text>待签约</el-text>
+              <el-link type="primary" @click="singCodeDialogRef?.show(form.wechatSignUrl, 2)">查看签约码</el-link>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="最后提交时间">
+          <el-text>{{ form.updateTime }}</el-text>
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-text>{{ form.createTime }}</el-text>
+        </el-form-item>
+        <el-form-item>
+          <el-button link type="primary"
+            v-if="form.wechatStatus == 'INIT' || form.wechatStatus == 'AUDIT' || form.wechatStatus == 'SIGN' || form.alipayStatus == 'INIT' || form.alipayStatus == 'AUDIT' || form.alipayStatus == 'SIGN'"
+            @click="checkStatusHandle()">查询</el-button>
+          <el-button type="primary" @click="toDetail('check')">查看详情</el-button>
+          <el-button type="primary" @click="toDetail('editor')"
+            v-if="form.alipayStatus == 'REJECTED' || form.wechatStatus == 'REJECTED'">修改</el-button>
+        </el-form-item>
+      </template>
+    </el-form>
+    <singCodeDialog ref="singCodeDialogRef" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router';
+import { entryManagerDetail } from '@/api/common'
+import singCodeDialog from '@/views/applyments/components/singCodeDialog.vue';
+
+const singCodeDialogRef = ref(null)
+
+const route = useRoute()
+const router = useRouter()
+const userTypeList = ref([
+  {
+    value: '0',
+    label: '个体商户'
+  },
+  {
+    value: '1',
+    label: '企业商户'
+  },
+])
+function userTypeListFilter(userType) {
+  let obj = userTypeList.value.find(item => item.value == userType)
+  if (obj) {
+    return obj
+  } else {
+    return {
+      label: userType,
+      value: userType
+    }
+  }
+}
+const statusList = ref([
+  {
+    value: 'WAIT',
+    label: '待提交',
+    type: 'info'
+  },
+  {
+    value: 'INIT',
+    label: '待处理',
+    type: 'info'
+  },
+  {
+    value: 'AUDIT',
+    label: '待审核',
+    type: 'warning'
+  },
+  {
+    value: 'SIGN',
+    label: '待签约',
+    type: 'primary'
+  },
+  {
+    value: 'FINISH',
+    label: '已完成',
+    type: 'success'
+  },
+  {
+    value: 'REJECTED',
+    label: '失败',
+    type: 'danger'
+  },
+])
+function statusListFilter(status) {
+  let obj = statusList.value.find(item => item.value == status)
+  if (obj) {
+    return obj
+  } else {
+    return {
+      label: status,
+      value: status
+    }
+  }
+}
+const loading = ref(false)
+const form = ref({})
+
+// 查询状态
+async function checkStatusHandle() {
+  try {
+    loading.value = true
+    const businessLicenceInfo = form.value.businessLicenceInfo
+    await queryEntry({
+      shopId: form.value.shopId,
+      licenceNo: businessLicenceInfo.licenceNo
+    })
+    updateData()
+  } catch (error) {
+    loading.value = false
+    console.log(error);
+  }
+}
+
+// 去进件
+function toApplyment() {
+  router.push({ name: 'applyment_in', query: { shopId: route.query.shopId } });
+}
+
+// 跳转编辑页面
+function toDetail(type) {
+  const businessLicenceInfo = form.value.businessLicenceInfo
+  router.push({
+    name: 'applyment_in',
+    query: {
+      shopId: form.value.shopId,
+      licenceNo: businessLicenceInfo.licenceNo,
+      type: type
+    }
+  })
+}
+
+// 刷新进件数据
+async function updateData() {
+  try {
+    loading.value = true
+    const res = await entryManagerDetail({
+      shopId: route.query.shopId
+    })
+    form.value = (res && res.shopId) ? res : ''
+  } catch (error) {
+    console.log(error);
+  }
+  loading.value = false
+}
+
+onMounted(() => {
+  updateData()
+})
+</script>
+
+<style scoped lang="scss">
+.row {
+  &.mt14 {
+    margin-top: 14px;
+  }
+}
+
+.center {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/views/shop/list/index.vue

@@ -70,7 +70,8 @@
               <span v-if="scope.row.shopType == 'only'">单店</span>
               <span v-if="scope.row.shopType == 'chain'">连锁店</span>
               <span v-if="scope.row.shopType == 'join'">加盟店</span>
-              <div v-if="scope.row.shopType != 'only'&&scope.row.isHeadShop == 0">(主店：{{ scope.row.headShopName }})</div>
+              <div v-if="scope.row.shopType != 'only' && scope.row.isHeadShop == 0">(主店：{{ scope.row.headShopName }})
+              </div>
             </div>
           </template>
         </el-table-column>
@@ -132,7 +133,7 @@
         layout="total, sizes , prev, pager ,next, jumper " @current-change="paginationChange" />
     </div>
     <addShop ref="refAddShop" @success="getTableData" />
-    <detailModal ref="refDetailModal" />
+    <!-- <detailModal ref="refDetailModal" /> -->
     <!-- 激活码 -->
     <activateCode ref="refActivateCode" @success="getTableData" />
   </div>
@@ -145,6 +146,10 @@ import ShopApi from "@/api/account/shop";
 import { ElNotification, ElMessageBox } from "element-plus";
 import addShop from "./components/addShop.vue";
 import detailModal from "./components/detailModal.vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter()
+
 const refActivateCode = ref(null);
 function activateCodeShow(row) {
   refActivateCode.value.open(row);
@@ -186,12 +191,18 @@ function dropdownClick(e, row) {
   console.log(e);
   console.log(row);
   if (e == 0) {
-    refAddShop.value.show({mainId:row.id,shopType:row.shopType,isHeadShop:0},'addBranch');
+    refAddShop.value.show({ mainId: row.id, shopType: row.shopType, isHeadShop: 0 }, 'addBranch');
 
     return;
   }
   if (e.command == 1) {
-    refDetailModal.value.show(e.row);
+    // refDetailModal.value.show(e.row);
+    router.push({
+      name: 'pay_setting',
+      query: {
+        shopId: row.id
+      }
+    })
     return;
   }
   if (e == 5) {

src/views/shop/list/pay_setting.vue

@@ -0,0 +1,127 @@
+<!-- 支付配置页面 -->
+<template>
+  <div class="gyq_container">
+    <div class="header_wrap">
+      <div class="left_btn" @click="router.back()">
+        <el-icon size="22" color="#333">
+          <Back />
+        </el-icon>
+      </div>
+      <div class="info">
+        <div class="t">支付配置</div>
+        <div class="intro">管理您的支付渠道和进件信息</div>
+      </div>
+      <div class="center">
+        <el-text>当前模式：</el-text>
+        <el-radio-group :model-value="payModel" @change="handleRadioChange">
+          <el-radio :label="item.label" :value="item.value" v-for="item in tabList" :key="item.value"></el-radio>
+        </el-radio-group>
+      </div>
+    </div>
+    <div class="gyq_content row mt14">
+      <tabHeader v-model="tabActiveIndex" :list="tabList" />
+      <payStatusCard name="payStatusCard" key="payStatusCard" ref="payStatusCardRef" v-if="tabActiveIndex == 0" />
+      <detailModal name="detailModal" key="detailModal" ref="detailModalRef" v-if="tabActiveIndex == 1" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router';
+import detailModal from './components/detailModal.vue';
+import payStatusCard from './components/payStatusCard.vue';
+
+const route = useRoute()
+const router = useRouter()
+const payModel = ref(0)
+const tabActiveIndex = ref(0)
+const tabList = ref([
+  {
+    label: '支付进件',
+    value: 0
+  },
+  {
+    label: '聚合支付',
+    value: 1
+  }
+])
+
+// 二次确认支付模式
+async function handleRadioChange(value) {
+  await ElMessageBox.confirm('确定要选择该模式吗？', '注意').then(() => {
+    payModel.value = value
+  }).catch(() => { })
+}
+
+watch(() => tabActiveIndex.value, async (newValue, oldValue) => {
+  if (newValue == 1) {
+    await nextTick()
+    detailModalRef.value.show({ id: route.query.shopId })
+  }
+})
+
+const detailModalRef = ref(null)
+const payStatusCardRef = ref(null)
+
+</script>
+
+<style scoped lang="scss">
+.gyq_container {
+  padding: 14px;
+
+  .gyq_content {
+    padding: 14px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+
+.row {
+  &.mt14 {
+    margin-top: 14px;
+  }
+}
+
+.center {
+  display: flex;
+  align-items: center;
+}
+
+.header_wrap {
+  background-color: #fff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  padding-right: 14px;
+
+  .left_btn {
+    height: 73px;
+    padding: 14px 24px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .info {
+    flex: 1;
+    padding: 14px 14px 14px 0;
+
+    .t {
+      color: #333;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .intro {
+      font-size: 14px;
+      color: #999;
+    }
+  }
+
+  .form {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>