Compare commits

...

29 Commits

Author SHA1 Message Date
pengda 870e3170f4 Merge remote-tracking branch 'origin/zq-realTimeTem' into zq-realTimeTem 1 week ago
pengda 1b23cb359f 服务设置 独立域名设置 1 week ago
pengda 7113ce5e25 服务设置 域名设置组件 1 week ago
pengda 063f530fd9 服务设置 域名设置组件 1 week ago
pengda a34f403dc7 服务设置 域名设置组件 1 week ago
pengda f93a73cd98 服务设置 提示框修复 2 weeks ago
pengda 3540e18e1f 服务设置 颜色默认值bug修复 2 weeks ago
pengda 738a41c5eb 服务设置 传引用bug修复 2 weeks ago
zq 8382e758a8 修改自定义下拉框报错问题 2 weeks ago
pengda 1c60230103 服务设置 独立域名 2 weeks ago
pengda 6c4acd8a31 服务设置 展示设置 2 weeks ago
pengda a284467666 服务设置 颜色设置 2 weeks ago
rainbro a351570ff0 移动端设置 2 weeks ago
zhangqi 9438d62975 Merge pull request '修改事件穿透问题' (#86) from zq-0707-history into master 2 weeks ago
zq 7548786839 修改事件穿透问题 2 weeks ago
rainbro fc66efedc2 移动端设置 2 weeks ago
zhangqi 60b7facab6 Merge pull request '菜单展示动画效果优化' (#85) from zq-0707-history into master 2 weeks ago
zq 1f959b1778 菜单展示动画效果优化 2 weeks ago
zhangqi 8586d4a12c Merge pull request '修改多个下拉框共存时,下拉面板不自动关闭问题' (#84) from zq-0707-history into master 2 weeks ago
zq 8a344b663f 修改多个下拉框共存时,下拉面板不自动关闭问题 2 weeks ago
zhangqi c0b9bc9972 Merge pull request 'guipRadio 组件优化' (#83) from zq-0707-history into master 2 weeks ago
zq 2d5a0f9eda guipRadio 组件优化 2 weeks ago
rainbro 86c33217ae Merge branch 'master' of http://gitea.intra.yunpaper.com/zhangqi/kuailelunwen_new_houtai 2 weeks ago
rainbro 40d4cc2e89 个性化设置 站点类型配置 2 weeks ago
zhangqi 4afcc36bd7 Merge pull request '复制提示修改' (#82) from zq-0707-history into master 2 weeks ago
zq 743057e2c9 复制提示修改 2 weeks ago
zhangqi 09d5f81bcf Merge pull request '粘贴板判断' (#81) from zq-realTimeTem into master 2 weeks ago
zhangqi 3868c8a67b Merge pull request 'zq-realTimeTem' (#80) from zq-realTimeTem into master 2 weeks ago
zhangqi 41ce2ea3f5 Merge pull request 'zq-realTimeTem' (#79) from zq-realTimeTem into master 2 weeks ago
  1. 1
      src/assets/download.svg
  2. 1
      src/assets/form_copy.svg
  3. 1
      src/assets/msg.svg
  4. 1
      src/assets/question_red.svg
  5. 17
      src/components/CustomDropdown.vue
  6. 34
      src/components/GuipRadio.vue
  7. 8
      src/components/SliderMenu.vue
  8. 12
      src/router/index.js
  9. 4
      src/store/index.js
  10. 3
      src/utils/eventBus.js
  11. 71
      src/views/agent/payCertSetting.vue
  12. 841
      src/views/agent/siteMobileSetting.vue
  13. 31
      src/views/agent/sitePersonalization.vue

1
src/assets/download.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.0 KiB

1
src/assets/form_copy.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

1
src/assets/msg.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_219_99490"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_219_99490)"><g><path d="M2.8125,14.5372C2.8125,14.5372,4.8166899999999995,12.9375,4.8166899999999995,12.9375C4.8166899999999995,12.9375,14.0631,12.9375,14.0631,12.9375C14.3795,12.9259,14.6432,12.8145,14.8539,12.6034C15.0647,12.3922,15.176,12.12862,15.1881,11.8125C15.1881,11.8125,15.1881,4.5,15.1881,4.5C15.1765,4.1835,15.0651,3.91987,14.8539,3.70913C14.6428,3.49838,14.3792,3.387,14.0631,3.375C14.0631,3.375,3.93806,3.375,3.93806,3.375C3.62157,3.3866199999999997,3.35793,3.498,3.14719,3.70913C2.93644,3.9202500000000002,2.82507,4.18387,2.81306,4.5C2.81306,4.5,2.81306,14.5372,2.81306,14.5372C2.81306,14.5372,2.8125,14.5372,2.8125,14.5372C2.8125,14.5372,2.8125,14.5372,2.8125,14.5372ZM5.20312,14.0625C5.20312,14.0625,2.601562,16.137,2.601562,16.137C2.414062,16.2776,2.21775,16.298099999999998,2.012625,16.1983C1.8075,16.0985,1.699125,15.9315,1.6875,15.6971C1.6875,15.6971,1.6875,4.5,1.6875,4.5C1.699125,3.867,1.9188749999999999,3.3367500000000003,2.34675,2.90925C2.77462,2.48175,3.30488,2.262,3.9375,2.25C3.9375,2.25,14.0625,2.25,14.0625,2.25C14.6955,2.261625,15.2257,2.481375,15.6532,2.90925C16.0807,3.33712,16.3005,3.86738,16.3125,4.5C16.3125,4.5,16.3125,11.8125,16.3125,11.8125C16.3009,12.4455,16.0811,12.9757,15.6532,13.4032C15.2254,13.8307,14.6951,14.0505,14.0625,14.0625C14.0625,14.0625,5.20312,14.0625,5.20312,14.0625C5.20312,14.0625,5.20312,14.0625,5.20312,14.0625ZM6.1875,9C6.1875,9,11.8125,9,11.8125,9C12.1875,9,12.375,9.1875,12.375,9.5625C12.375,9.9375,12.1875,10.125,11.8125,10.125C11.8125,10.125,6.1875,10.125,6.1875,10.125C5.8125,10.125,5.625,9.9375,5.625,9.5625C5.625,9.1875,5.8125,9,6.1875,9C6.1875,9,6.1875,9,6.1875,9ZM6.1875,5.625C6.1875,5.625,11.8125,5.625,11.8125,5.625C12.1875,5.625,12.375,5.8125,12.375,6.1875C12.375,6.5625,12.1875,6.75,11.8125,6.75C11.8125,6.75,6.1875,6.75,6.1875,6.75C5.8125,6.75,5.625,6.5625,5.625,6.1875C5.625,5.8125,5.8125,5.625,6.1875,5.625C6.1875,5.625,6.1875,5.625,6.1875,5.625Z" fill="#409EFF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

1
src/assets/question_red.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g style="opacity:0.699999988079071;"><g><path d="M7.99997,1C4.13397,1,1,4.13402,1,8.000029999999999C1,11.8661,4.13397,15.0001,7.99997,15.0001C11.866,15.0001,15,11.8661,15,8.000060000000001C15,4.13405,11.8661,1,7.99997,1ZM8.679310000000001,12.0393C8.679310000000001,12.2326,8.522649999999999,12.3894,8.32932,12.3894L7.27931,12.3894C7.08606,12.3894,6.92934,12.2326,6.92934,12.0393L6.92934,10.98936C6.92934,10.79601,7.08606,10.63931,7.27931,10.63931L8.32932,10.63931C8.522639999999999,10.63931,8.679310000000001,10.79599,8.679310000000001,10.98936L8.679310000000001,12.0393ZM10.41428,7.22158C10.2736,7.42218,9.95427,7.67778,9.5545,7.98942L9.11148,8.29514C8.89631,8.46204,8.70548,8.65635,8.63491,8.878820000000001C8.61079,8.95462,8.59272,9.07919,8.58056,9.21373C8.57443,9.28143,8.51387,9.41954,8.372309999999999,9.41954L7.2329,9.41954C7.0477,9.41954,7.01462,9.27448,7.01771,9.20352C7.03821,8.73845,7.08083,8.325569999999999,7.27031,8.103290000000001Q7.65395,7.65348,8.52686,7.0936C8.65976,6.99331,8.76736,6.88429,8.84873,6.76547C8.99666,6.5615,9.11939,6.33749,9.11939,6.09263C9.11939,5.8112,9.03711,5.55467,8.87201,5.32247C8.70748,5.09118,8.4061,4.97531,7.96939,4.97531C7.53948,4.97531,7.23474,5.118,7.05511,5.40325C6.9224,5.614,6.83885,5.80778,6.80426,6.01862C6.79195,6.09324,6.7441,6.25041,6.5846,6.25041L5.47332,6.25041C5.2367,6.25041,5.1846,6.09707,5.19143,6.02315C5.27709,5.09158,5.64113,4.45509,6.28481,4.046390000000001C6.7225,3.765,7.26099,3.62379,7.89974,3.62379C8.73906,3.62379,9.43578,3.82387,9.99123,4.224600000000001C10.5457,4.62477,10.82373,5.21775,10.82373,6.004C10.82378,6.48549,10.65479,6.89152,10.41428,7.22158L10.41428,7.22158Z" fill="#FF4D4F" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

17
src/components/CustomDropdown.vue

@ -44,6 +44,7 @@
</template>
<script>
import { EventBus } from '@/utils/eventBus'
export default {
props: {
width: {
@ -54,7 +55,7 @@ export default {
type: Array,
default: () => [],
validator: (value) => {
return Array.isArray(value) && value.every(item =>
return Array.isArray(value) && value.every(item =>
item && typeof item === 'object'
)
}
@ -91,7 +92,7 @@ export default {
immediate: true,
handler(newVal) {
if (this.options && this.options.length && newVal !== undefined && newVal !== null) {
this.selectedItem = this.options.find((item) =>
this.selectedItem = this.options.find((item) =>
item && item[this.valueKey] === newVal
) || null;
}
@ -101,7 +102,7 @@ export default {
immediate: true,
handler(newVal) {
if (newVal && newVal.length && this.value !== undefined && this.value !== null) {
this.selectedItem = newVal.find((item) =>
this.selectedItem = newVal.find((item) =>
item && item[this.valueKey] === this.value
) || null;
} else {
@ -110,6 +111,14 @@ export default {
}
}
},
created() {
//
EventBus.$on('close-all-dropdowns', this.closeDropdown)
},
beforeDestroy() {
//
EventBus.$off('close-all-dropdowns', this.closeDropdown)
},
methods: {
closeDropdown() {
this.isOpen = false;
@ -120,6 +129,8 @@ export default {
console.warn('Dropdown options are empty');
return;
}
//
EventBus.$emit('close-all-dropdowns')
this.isOpen = !this.isOpen;
},
selectItem(item) {

34
src/components/GuipRadio.vue

@ -26,8 +26,18 @@ export default {
// :
// 1. : [{ label: '', value: '', disabled: false }]
// 2. : { key1: 'value1', key2: 'value2' }
// 3.null
// 4.
options: {
type: [Array, Object],
// type: [Array, Object],
default: () => null,
validator: (value) => {
// null
return value == null ||
value === '' ||
Array.isArray(value) ||
(typeof value === 'object' && value !== null)
},
required: true,
},
// 使 v-model
@ -73,16 +83,26 @@ export default {
computed: {
//
normalizedOptions() {
//
// nullundefined
if (this.options == null || !this.options) {
return [];
}
//
if (Array.isArray(this.options)) {
return this.options;
} else if (typeof this.options === 'object' && this.options !== null) {
//
return Object.keys(this.options).map(key => ({
return this.options.length ? this.options : [];
}
//
if (typeof this.options === 'object') {
const keys = Object.keys(this.options);
return keys.length ? keys.map(key => ({
key,
value: this.options[key]
}));
})) : [];
}
//
return [];
}
},

8
src/components/SliderMenu.vue

@ -1,5 +1,5 @@
<template>
<transition name="menu-collapse">
<transition :name="customize ? '' : 'menu-collapse'">
<el-menu v-if="!customize" class="el-menu-vertical-demo custom-menu" @open="handleOpen"
:default-active="currentMenuItem?.index"
@close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
@ -136,7 +136,7 @@ export default {
<style lang="scss" scoped>
.menu-collapse-leave-active,
.menu-collapse-enter-active {
transition: all 0.7s;
transition: all 0.5s;
}
.menu-collapse-enter,
@ -164,7 +164,7 @@ export default {
.title_text {
margin-left: 4px;
font-size: 12px;
font-size: 14px;
font-weight: bold;
display: block;
@ -187,7 +187,7 @@ export default {
.el-menu-item {
padding: 0 22px;
font-size: 12px;
font-size: 14px;
}
.menu-top {

12
src/router/index.js

@ -125,6 +125,18 @@ const routes = [{
}
},
{
path: '/agent/siteMobileSetting',
name: '移动端设置',
component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteMobileSetting.vue'),
meta: {
title: '站点设置',
breadcrumbParent: '站点列表' // 手动指定父级
// 如果想隐藏中间层级
// breadcrumbParent: '首页', // 跳过医生信息
// hideInBreadcrumb: true // 可选:隐藏当前项
}
},
{
path: '/agent/siteSemSetting',
name: '营销推广',
component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteSemSetting.vue'),

4
src/store/index.js

@ -195,7 +195,7 @@ export default new Vuex.Store({
},
{
name: '移动端设置',
path: '/siteSetting/siteH5',
path: '/agent/siteMobileSetting',
img: 'site/siteh5.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
@ -281,7 +281,7 @@ export default new Vuex.Store({
},
{
name: '移动端设置',
path: '/agent/siteH5',
path: '/agent/siteMobileSetting',
img: 'site/siteh5.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [

3
src/utils/eventBus.js

@ -0,0 +1,3 @@
// 在项目中创建 eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

71
src/views/agent/payCertSetting.vue

@ -1,7 +1,7 @@
<template>
<div class="main-content12">
<!-- page content -->
<div class="site-setting-wrap min-flex-right">
<div class="site-setting-wrap min-flex-right site-personal-wrap">
<div class="siteMessage flex-common mt12" id="siteMessage1">
<h3 class="mb12">管理证书</h3>
<div class="beforeNotice">
@ -48,16 +48,14 @@
<el-form>
<div class="flex-wrap">
<div class="flex-left">
<div class="setting">
<div class="flex justify-content-space-between">
<h4 class="flex">功能开关</h4>
<!-- :active-value="1" :inactive-value="0"关闭 加冒号表示数字格式 -->
<!-- active-value="1" inactive-value="0"关闭 不加冒号表示字符串 -->
<!-- 传入的modelvalue 为数字 0 或者 1 -->
<GuipSwitch :modelValue="payinfo.is_auto_refund" :active-value="1" :inactive-value="0" @change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭"></GuipSwitch>
<div class="left-pay-list mb24">
<div class="left-pay-item ">
<div class="flex-between">
<span>功能开关</span>
<GuipSwitch :modelValue="payinfo.is_auto_refund" :active-value="1" :inactive-value="0" activeText="开启" inactiveText="关闭" @change="updatePayAutoRefund(payinfo)"></GuipSwitch>
</div>
<p>开启后遇到退单的情况平台尽量在联系您并同意的情况下操作退款</p>
</div>
<p class="ml-23 flex gray">开启后遇到退单的情况平台尽量在联系您并同意的情况下操作退款</p>
</div>
</div>
</div>
@ -912,4 +910,57 @@ lable {
}
}
}
.site-personal-wrap {
width: 100%;
.siteMessage {
border-radius: 4px;
transition: all .5s;
border: 1px solid transparent;
}
// .siteMessage5_desc {
// border-radius: 4px;
// /* middle/middle_blue_1 */
// background: #F2F7FF;
// /* middle/middle_blue_3 */
// border: 1px solid #BFDAFF;
// padding: 8px 13px;
// margin-bottom: 32px;
// img {
// margin-right: 8px;
// }
// }
.left-pay-list {
width: 100%;
border-radius: 4px;
opacity: 1;
.left-pay-item {
padding: 24px;
color: #23242B;
background: #FAFAFA;
margin-top: 12px;
p {
text-align: left;
margin-top: 9px;
/* caption/caption_regular */
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
color: #626573;
}
.el-form-item {
margin-bottom: 0;
}
}
}
}
</style>

841
src/views/agent/siteMobileSetting.vue

@ -0,0 +1,841 @@
<template>
<div class="main-content12">
<!-- page header -->
<div class="pageheader flex">
<span class="pagetitle">移动端设置</span>
</div>
<!-- page content -->
<div class="site-personal-wrap">
<div class="siteMessage flex-common mt12" id="siteMessage9">
<h3 class="flex">微信H5 <span class="flex ml-8" @click="showWhatIsH5=true"><img class="ml-8" src="@/assets/site/form_qua_ic.svg" alt=""><span class="ml-8">什么是微信H5</span></span></h3>
<el-drawer title="什么是微信H5" size="20%" :visible.sync="showWhatIsH5" direction="rtl" :append-to-body="true">
<div class="desc mx-24">
<p class="flex desc-title"><img class="mr-16" src="@/assets/msg.svg" alt="">说明</p>
<p class="flex desc-cont">微信H5版是平台基于微信相关功能开发的</p>
<p class="flex desc-cont">微信H5等适合手机端提交的系统</p>
<p class="flex desc-title"><img class="mr-16" src="@/assets/msg.svg" alt="">优点</p>
<p class="flex desc-cont">1.微信H5开通后用户可从手机微信端提交检测服务手机端支持微信支付检测卡支付</p>
<p class="flex desc-cont">2.检测进度通知用户提交检测后扫描你的公众号二维码在检测完成后系统通过微信告知用户</p>
<p class="flex desc-cont">3.微信优惠券微信服务号自带的优惠券开通后可在平台生成微信优惠券发给用户</p>
<p class="flex desc-cont">4.营销活动开启微信H5版完成公众号授权后可以通过创建营销活动向用户发放检测卡</p>
<p class="flex desc-cont">5.代收款用户代收款用户可以开通微信H5检测进度通知微信优惠券功能</p>
<p class="flex desc-title"><img class="mr-16" src="@/assets/msg.svg" alt="">如何开通</p>
<p class="flex desc-cont">前往快乐论文帮助中心查看相关指引</p>
<p class="flex desc-cont"><a href="https://thoughts.teambition.com/sharespace/5eda16fd4cc9cb001aadc28e/folders/5ee20f9e7a72f1001a388e9d" class="flex" target="_blank"><img style="margin-right: 5px;"
src="@/assets/site/form_linkActive.svg" alt="">快乐论文帮助中心</a></p>
<p class="flex desc-title"><img class="mr-16" src="@/assets/msg.svg" alt="">常见问题</p>
<p class="flex desc-cont">微信H5版手机端支付失败请参考</p>
<p class="flex desc-cont"><a href="https://zhic.yuque.com/staff-chwecz/xhk8nt/hikegp2zleaa6dm5" class="flex" target="_blank"><img style="margin-right: 5px;"
src="@/assets/site/form_linkActive.svg" alt="">微信版常见问题</a></p>
</div>
</el-drawer>
<div class="tip">为保证正常收款请确定当前公众号能使用此支付商号收款</div>
<el-form>
<div class="flex-wrap">
<div class="flex-left">
<div class="left-pay-list mb24">
<div class="left-pay-item ">
<div class="flex-between">
<span>H5开关</span>
<GuipSwitch :modelValue="siteInfo.is_open_h5" :active-value="1" :inactive-value="0" activeText="开" inactiveText="关" @change="updateSiteH5Status"></GuipSwitch>
</div>
<div v-if="siteWxpayInfo.appid">
<p>微信公众号{{ siteWxpayInfo.appid }}{{ siteWxpayInfo.mch_id }}{{ siteWxpayInfo.short_name }}</p>
<p class="flex" v-if="siteWxpayInfo.is_auth==false || siteWxpayInfo.is_auth_expire==true">
<a href="#" class="flex mr-5" @click="showMpAuth"><img class="mr-5" src="@/assets/site/form_linkActive.svg" alt="">去授权 </a>
<span class="red" v-if="siteWxpayInfo.is_auth==false">此公众号未经授权不可用</span>
<span class="red" v-else-if="siteWxpayInfo.is_auth_expire==true">此公众号授权已过期不可用</span>
</p>
</div>
<div v-else>
<p>微信公众号未绑定</p>
<p class="flex">
<a href="#" class="flex mr-5" @click="goBindPay"><img class="mr-5" src="@/assets/site/form_linkActive.svg" alt="">去绑定微信支付 </a>
<span class="red">绑定微信支付后H5才可使用</span>
</p>
</div>
</div>
</div>
</div>
</div>
</el-form>
</div>
<div class="siteMessage flex-common mt12" id="siteMessage10">
<h3>小程序<span>无须开发仅把申请的小程序授权给我们即可拥有自己的小程序网站</span></h3>
<el-form>
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="combo-formItem w510" label="绑定微信小程序" required="">
<CustomDropdown slot="formDom" width="500px" v-model="bindWxXcxId" :options="xcxList[0]"
@change="changeBindWxXcx" displayKey="name" valueKey="xcx_id" placeholder="请选择">
<template #trigger>
<!-- 自定义触发元素 -->
<!-- 当前项需要单独的state存储一下 -->
<div v-if="bindWxXcxIdSelectItem" class="flex">
<span class="mr-12">{{ bindWxXcxIdSelectItem.name }}</span>
<div v-if="bindWxXcxIdSelectItem.status==4" class="status-item divgreen"><span class="fontgreen">{{ bindWxXcxIdSelectItem.status_desc }}</span></div>
<div v-else-if="bindWxXcxIdSelectItem.status==3" class="status-item divorange"><span class="fontorange">{{ bindWxXcxIdSelectItem.status_desc }}</span></div>
<div v-else-if="bindWxXcxIdSelectItem.status==5 || bindWxXcxIdSelectItem.status==0" class="status-item divgray"><span class="fontgray">{{ bindWxXcxIdSelectItem.status_desc }}</span></div>
<div v-else-if="bindWxXcxIdSelectItem.status==1 || bindWxXcxIdSelectItem.status==2" class="flex">
<div class="status-item divred mr-12">
<span class="fontred">{{ bindWxXcxIdSelectItem.status_desc }}</span>
</div>
<img src="@/assets/question_red.svg" alt="" class=" mr-5"> <span class="errtitle font12 fontgray" @click="lookError(bindWxXcxIdSelectItem.fail_reason)">失败原因</span>
</div>
</div>
<span v-else class="desc">请选择</span>
</template>
<!-- displayKey选中后要显示的字段 -->
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>新增微信小程序</b>
<p class="one ft12">点击右侧按钮根据引导新增小程序</p>
</div>
<div class="right">
<GuipButton size="form" @click="showAddXcx(0)">去新增</GuipButton>
</div>
</div>
</template>
<template #item="{ item }">
<div class="flex">
<p class="mr-12">{{ item.name }}</p>
<div v-if="item.status==4" class="status-item divgreen"><span class="fontgreen">{{ item.status_desc }}</span></div>
<div v-else-if="item.status==3" class="status-item divorange"><span class="fontorange">{{ item.status_desc }}</span></div>
<div v-else-if="item.status==5 || item.status==0" class="status-item divgray"><span class="fontgray">{{ item.status_desc }}</span></div>
<div v-else-if="item.status==1 || item.status==2" class="flex">
<div class="status-item divred mr-12">
<span class="fontred">{{ item.status_desc }}</span>
</div>
<img src="@/assets/question_red.svg" alt="" class=" mr-5"> <span class="errtitle font12 fontgray" @click="lookError(item.fail_reason)">失败原因</span>
</div>
</div>
<div class="flex appid">{{ item.appid }}</div>
</template>
</CustomDropdown>
</GuipFormItem>
<div class="mt24">
<GuipFormItem column="column" class="combo-formItem w510" label="绑定支付宝小程序" required="">
<CustomDropdown slot="formDom" width="500px" v-model="bindAliXcxId" :options="xcxList[2]"
@change="changeBindAliXcx" displayKey="name" valueKey="xcx_id" placeholder="请选择">
<template #trigger>
<!-- 自定义触发元素 -->
<!-- 当前项需要单独的state存储一下 -->
<div v-if="bindAliXcxIdSelectItem" class="flex">
<span class="mr-12">{{ bindAliXcxIdSelectItem.name }}</span>
<div v-if="bindAliXcxIdSelectItem.status==4" class="status-item divgreen"><span class="fontgreen">{{ bindAliXcxIdSelectItem.status_desc }}</span></div>
<div v-else-if="bindAliXcxIdSelectItem.status==3" class="status-item divorange"><span class="fontorange">{{ bindAliXcxIdSelectItem.status_desc }}</span></div>
<div v-else-if="bindAliXcxIdSelectItem.status==5 || bindAliXcxIdSelectItem.status==0" class="status-item divgray"><span class="fontgray">{{ bindAliXcxIdSelectItem.status_desc }}</span></div>
<div v-else-if="bindAliXcxIdSelectItem.status==1 || bindAliXcxIdSelectItem.status==2" class="flex">
<div class="status-item divred mr-12">
<span class="fontred">{{ bindAliXcxIdSelectItem.status_desc }}</span>
</div>
<img src="@/assets/question_red.svg" alt="" class=" mr-5"> <span class="errtitle font12 fontgray" @click="lookError(bindAliXcxIdSelectItem.fail_reason)">失败原因</span>
</div>
</div>
<span v-else class="desc">请选择</span>
</template>
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>新增支付宝小程序</b>
<p class="one ft12">点击右侧按钮根据引导新增小程序</p>
</div>
<div class="right">
<GuipButton size="form" @click="showAddXcx(2)">去新增</GuipButton>
</div>
</div>
</template>
<template #item="{ item }">
<div class="flex">
<p class="mr-12">{{ item.name }}</p>
<div v-if="item.status==4" class="status-item divgreen"><span class="fontgreen">{{ item.status_desc }}</span></div>
<div v-else-if="item.status==3" class="status-item divorange"><span class="fontorange">{{ item.status_desc }}</span></div>
<div v-else-if="item.status==5 || item.status==0" class="status-item divgray"><span class="fontgray">{{ item.status_desc }}</span></div>
<div v-else-if="item.status==1 || item.status==2" class="flex">
<div class="status-item divred mr-12">
<span class="fontred">{{ item.status_desc }}</span>
</div>
<img src="@/assets/question_red.svg" alt="" class=" mr-5"> <span class="errtitle font12 fontgray" @click="lookError(item.fail_reason)">失败原因</span>
</div>
</div>
</template>
</CustomDropdown>
</GuipFormItem>
</div>
</div>
<div class="flex-line"></div>
<div class="flex-right">
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="updateSiteXcxBind()" />
</div>
</div>
<GuipDialog type="center" :dialogVisible="dialogVisibleMpAuth" title="授权微信公众号" confirmText="确认完成准备事项,去授权" cancelText="取消授权" :show-close-button="false"
:show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel"
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex">1. 需要提前注册微信支付商号公众号服务号</p>
<p class="mt10 flex">2. 登录
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg" alt="">微信支付平台
</a>开发配置添加公众号支付授权目录
</p>
<div class="pay-auth-dir">
<p>{{ siteWxpayInfo.pay_auth_dir }}</p>
<img src="@/assets/form_copy.svg" alt="" @click="handleClickCopy(siteWxpayInfo.pay_auth_dir)">
</div>
</div>
</GuipDialog>
<GuipDialog :dialogVisible="dialogVisibleAddXcx" :title="addXcxTitle" confirmText="确认" cancelText="取消" :show-close-button="false"
:show-cancel-button="true" @confirm="addXcx" @cancel="handleCancel"
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div v-if="xcxType == 0">
<div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex">1. 申请微信支付商号2.注册微信小程序3.站点绑定微信付款</p>
<p class="mt12 ml-20 flex"><a class="flex" href="/agentnew/download_xcx_register_tutorial/type/0"><img src="@/assets/download.svg" alt="">下载教程</a></p>
<p class="mt12 flex">1. 登录
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg" alt="">微信支付平台
</a>
</p>
<p class="mt10 ml-30 flex">2. 确认微信小程序是否已绑定微信支付
<a href="https://pay.weixin.qq.com/static/pay_setting/appid_protocol.shtml" class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg" alt="">去确认
</a>
</p>
</div>
<el-form>
<GuipFormItem column="column" class="mb24" label="小程序密钥" :required="true">
<!-- 如果 左侧为纯文本 无特殊格式样式 可以直接 使用label 属性
添加必输校验 直接使用 required 属性
特殊的使用slot = formLeft 自定义内容
添加独立类名修改样式 -->
<!-- <b slot="formLeft">自定义左侧</b> -->
<span class="desc" slot="formRight"><a href="https://mp.weixin.qq.com/" target="_blank">微信小程序平台</a>>开发管理>开发设置>AppSecret(小程序密钥)</span>
<!-- 自定义下方内容 -->
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="xcxAppsecret" prop="" placeholder="请输入小程序密钥" />
</GuipFormItem>
</el-form>
</div>
<div v-else-if="xcxType == 2">
<div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex">1. 注册支付宝企业账号2.创建支付宝小程序3.开通当面付</p>
<p class="mt12 ml-20 flex"><a class="flex" href="/agentnew/download_xcx_register_tutorial/type/2"><img src="@/assets/download.svg" alt="">下载教程</a></p>
<p class="mt12 flex">1. 登录
<a href="https://www.alipay.com/" class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg" alt="">支付宝支付平台
</a>
</p>
<p class="mt10 ml-30 flex">2. 确认支付宝已开通当面付
<a href="https://b.alipay.com/page/product-mall/all-product" class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg" alt="">去确认
</a>
</p>
</div>
</div>
</GuipDialog>
<GuipDialog :dialogVisible="dialogVisibleLookError" title="失败原因" confirmText="我知道了" cancelText="关闭" :show-close-button="false"
:show-cancel-button="false" @confirm="confirmErrinfo" @cancel="handleCancel"
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div class="errinfo divred">
<p class="mx-24 mt12 flex">{{ xcxFailReason }}</p>
</div>
</GuipDialog>
</div>
</template>
<script>
// import request from "./utils/request";
import { mapState } from 'vuex';
import store from '@/store';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipButton from '@/components/GuipButton.vue';
export default {
name: '',
props: [''],
components: {
GuipSwitch,
GroupFormBtns,
GuipDialog,
GuipInput,
GuipFormItem,
CustomDropdown,
GuipButton,
},
data() {
return {
// AUTH
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
siteWxpayInfo: [],
//
siteInfo: [],
xcxList: [],
siteXcxList: [],
dialogVisibleMpAuth: false,
showWhatIsH5: false,
dialogVisibleAddXcx: false,
dialogVisibleLookError: false,
xcxFailReason: '',
bindWxXcxId: 0,
bindAliXcxId: 0,
xcxAppsecret: '',
xcxType: '',
addXcxTitle: '',
bindWxXcxIdSelectItem:null,
bindAliXcxIdSelectItem:null
}
},
created() {
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU','siteSettingData');
},
mounted() {
store.commit('SET_PAGETITLE', '移动端设置');
this.getSiteWxpayInfo();
this.getSiteInfo();
this.getSiteXcxList();
this.getXcxList();
},
computed: {
...mapState(['pageTitle']) // VuexshowSidebar
},
methods:{
//
getSiteInfo() {
const that = this
that.siteInfo = []
this.$http('POST', '/agentnew/ajax_get_site_info', {
uid: this.$route.query.uid,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
that.siteInfo = response.data
that.siteInfo.is_open_h5 = Number(response.data.is_open_h5)
})
}).catch(error => {
console.error(error, 'error')
})
},
getSiteWxpayInfo() {
const that = this
that.siteInfo = []
this.$http('POST', '/agentnew/ajax_get_site_wxpay_info', {
uid: this.$route.query.uid,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
that.siteWxpayInfo = response.data
})
}).catch(error => {
console.error(error, 'error')
})
},
getXcxList() {
this.$http('POST', '/agentnew/ajax_get_xcx_list', {
// uid: this.$route.query.uid,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
this.xcxList = response.data
})
}).catch(error => {
console.error(error, 'error')
})
},
getSiteXcxList() {
this.$http('POST', '/agentnew/ajax_get_site_xcx_list', {
uid: this.$route.query.uid,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
this.siteXcxList = response.data
if (this.siteXcxList && this.siteXcxList[0]) {
this.bindWxXcxId = this.siteXcxList[0].xcx_id
this.bindWxXcxIdSelectItem = this.siteXcxList[0]
}
if (this.siteXcxList && this.siteXcxList[2]) {
this.bindAliXcxId = this.siteXcxList[2].xcx_id
this.bindAliXcxIdSelectItem = this.siteXcxList[2]
}
console.log(this.bindWxXcxId, 'bindWxXcxId');
console.log(this.bindAliXcxId, 'bindAliXcxId');
})
}).catch(error => {
console.error(error, 'error')
})
},
cancelClick() {
console.log('quxiao');
this.getSiteInfo();
},
updateSiteH5Status() {
this.$http('POST', '/agentnew/ajax_update_site_h5_config', {
uid: this.$route.query.uid,
status: this.siteInfo.is_open_h5==1 ? 0 : 1
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
this.getSiteInfo();
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
updateSiteRepeatSubmitConfig() {
},
goBindPay() {
window.open('/agent/siteBaseSetting?uid='+this.$route.query.uid, '_blank');
},
// ---start
showMpAuth() {
this.dialogVisibleMpAuth = true;
},
//
handleConfirm() {
this.$http('POST', '/agentnew/ajax_get_mp_auth_url', {
// uid: this.$route.query.uid,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
window.open(response.data, '_blank');
this.dialogVisibleMpAuth = false;
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
//
handleCancel() {
this.dialogVisibleMpAuth = false;
this.dialogVisibleAddXcx = false;
this.dialogVisibleLookError = false;
},
//
handleClose() {
this.dialogVisibleMpAuth = false;
this.dialogVisibleAddXcx = false;
this.dialogVisibleLookError = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
// ---end
// copy
handleClickCopy(content){
this.$copy(content, {
successMsg: '内容已复制到剪贴板',
errorMsg: '复制失败,请按Ctrl+C手动复制',
vm: this
});
},
showAddXcx(xcxType) {
this.dialogVisibleAddXcx = true;
this.dialogVisibleMpAuth = false;
this.xcxType = xcxType;
if (xcxType == 0) {
this.addXcxTitle = '新增微信小程序';
} else if (xcxType == 2) {
this.addXcxTitle = '新增支付宝小程序';
}
},
addXcx() {
this.$http('POST', '/agentnew/ajax_add_xcx_auth', {
uid: this.$route.query.uid,
type: this.xcxType,
appsecret: this.xcxAppsecret,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.dialogVisibleMpAuth = false;
this.dialogVisibleAddXcx = false;
window.open(response.data.authurl, '_blank');
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
updateSiteXcxBind() {
this.$http('POST', '/agentnew/ajax_update_site_xcx', {
uid: this.$route.query.uid,
wx_xcx_id: this.bindWxXcxId,
ali_xcx_id: this.bindAliXcxId,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
changeBindWxXcx(item) {
this.bindWxXcxIdSelectItem = {...item}
this.bindWxXcxId = item.xcx_id;
console.log(this.bindWxXcxId);
console.log(this.bindAliXcxId);
console.log(item);
},
changeBindAliXcx(item) {
this.bindAliXcxIdSelectItem = {...item}
this.bindWxXcxId = item.xcx_id;
console.log(this.bindWxXcxId);
console.log(this.bindAliXcxId);
console.log(item);
},
lookError(fail_reason, e){
//
if (e) {
e.preventDefault();
e.stopPropagation();
}
this.xcxFailReason = fail_reason;
this.dialogVisibleLookError = true;
},
confirmErrinfo() {
this.dialogVisibleLookError = false;
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__header {
margin-bottom: 0;
}
.pageheader {
display: flex;
justify-content: space-between;
/* 关键属性 */
align-items: center;
margin: 12px 0px 24px 0px;
}
.pagetitle {
font-size: 18px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
}
::v-deep .el-tabs__header {
margin-bottom: 0;
}
.mr-12 {
margin-right: 12px;
}
.site-personal-wrap {
width: 100%;
.siteMessage {
border-radius: 4px;
transition: all .5s;
border: 1px solid transparent;
}
// .siteMessage5_desc {
// border-radius: 4px;
// /* middle/middle_blue_1 */
// background: #F2F7FF;
// /* middle/middle_blue_3 */
// border: 1px solid #BFDAFF;
// padding: 8px 13px;
// margin-bottom: 32px;
// img {
// margin-right: 8px;
// }
// }
.left-pay-list {
width: 100%;
border-radius: 4px;
opacity: 1;
.left-pay-item {
padding: 24px;
color: #23242B;
background: #FAFAFA;
margin-top: 12px;
p {
text-align: left;
margin-top: 9px;
/* caption/caption_regular */
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
color: #626573;
}
.el-form-item {
margin-bottom: 0;
}
}
}
}
.red {
color: #FF4D4F;
}
.mr-5 {
margin-right: 5px;
}
.mr-16 {
margin-right: 16px;
}
.ml-8 {
margin-left: 8px;
}
.ml-20 {
margin-left: 20px;
}
.mx-24 {
margin-left: 24px;
margin-right: 24px;
}
.ml-30 {
margin-left: 30px;
}
.desc {
font-size: 14px;
}
.desc-title {
font-size: 14px;
font-weight: normal;
line-height: 26px;
letter-spacing: 0.08em;
color: #1E2226 !important;
}
.desc-cont {
font-size: 14px;
font-weight: normal;
line-height: 26px;
letter-spacing: normal;
color: #8A9099;
margin-left: 33px;
}
a {
text-decoration: none;
color: #006AFF !important;
}
.tip {
height: 40px;
display: flex;
padding: 0px 14px;
gap: 12px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #F2F7FF;
border: 1px solid #BFDAFF;
align-items: center;
}
.beforeNotice {
h4 {
margin: 0;
gap: 8px;
}
margin-bottom: 18px;
text-align: left;
box-sizing: border-box;
padding: 20px 14px;
border-radius: 4px;
/* middle/middle_blue_1 */
background: #F2F7FF;
/* middle/middle_blue_3 */
border: 1px solid #BFDAFF;
div {
margin-top: 2px;
padding-left: 23px;
p{
color: #8A9099;
}
}
p{
color: #1E2226;
i{
font-style: normal;
}
&:last-child{
display: flex;
align-items: stretch;
b{
font-weight: normal;
color: #8A9099;
display: inline-flex;
img{
margin-left: 4px;
}
}
}
}
a {
text-decoration: none;
color: #006AFF;
margin-right: 5px;
img {
margin-left: 5px;
margin-right: 5px;
}
}
}
.pay-auth-dir {
height: 28px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
align-self: stretch;
z-index: 1;
background: #FFFFFF;
}
.status-item {
height: 19px;
/* 自动布局 */
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
z-index: 1;
border-radius: 2px;
box-sizing: border-box;
}
.divgreen {
border: 1px solid rgba(0, 194, 97, 0.6);
background: rgba(239, 255, 224, 0.5);
}
.divred {
background: #FFF1F0;
border: 1px solid #FFA39E;
}
.divorange {
background: #FFFBF2;
border: 1px solid rgba(251, 131, 45, 0.38);
}
.divgray {
background: #F6F7FA;
border: 1px solid #DFE2E6;
}
.fontgreen {
color: #0DAF49;
}
.fontorange {
color: #FB832D;
}
.fontred {
color: #FF4D4F;
}
.fontgray {
color: #626573;
}
.font12 {
font-size: 12px;
}
.errtitle:hover {
color: #006AFF;
}
.status-item span {
font-size: 12px;
font-weight: normal;
line-height: 13px;
text-align: center;
letter-spacing: 0.08em;
padding: 3px 7px;
}
.appid {
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
/* text/text_4 */
color: #8A9099;
margin-top: 5px;
}
.errinfo {
width: 100%;
height:150px;
}
</style>

31
src/views/agent/sitePersonalization.vue

@ -7,8 +7,9 @@
<div class="flex-wrap">
<div class="flex-left">
<p class="flex-left-desc">销售方向</p>
<GuipRadio v-model="siteInfo.site_type" :options="siteInfo.site_types" label="" prop="site_type" @change="radioChange" label-key="" value-key="" />
<div class="flex mt12">
<GuipRadio v-model="siteInfo.site_type" :options="siteInfo.site_types" label="" prop="site_type" @change="radioChange" />
</div>
<div class="tem-home">
<img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
<div class="tem-home-bottom">
@ -30,7 +31,7 @@
<div class="flex-right"></div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="updateSiteCustomerService(siteInfo)" />
<GroupFormBtns @cancel="cancelClick" @confirm="updateSiteType()" />
</div>
<div class="siteMessage flex-common mt12" id="siteMessage5">
<h3>在线客服</h3>
@ -296,6 +297,8 @@ export default {
}).then(response => {
this.$nextTick(() => {
that.siteInfo = response.data
console.log(that.siteInfo.site_types)
that.siteInfo.is_display_outchain = Number(response.data.is_display_outchain)
that.siteInfo.is_display_price = Number(response.data.is_display_price)
that.siteInfo.is_display_submit_page_price = Number(response.data.is_display_submit_page_price)
@ -303,8 +306,6 @@ export default {
if (response.data.repeat_submit_fields) {
this.repeatSubmitFields = response.data.repeat_submit_fields
}
console.log(that.siteInfo.repeat_submit_fields, 'repeat_submit_fields')
})
}).catch(error => {
console.error(error, 'error')
@ -431,6 +432,26 @@ export default {
console.error(error, 'error')
})
},
updateSiteType() {
this.$http('POST', '/agentnew/ajax_update_site_type', {
uid: this.$route.query.uid,
site_type: this.siteInfo.site_type,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
updateSitWebCustomerService() {
// for(let [key,value] of this.formData){
// console.log(key,value,'=====key');

Loading…
Cancel
Save