You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
763 lines
30 KiB
763 lines
30 KiB
1 day ago
|
<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="changeBind(0)" displayKey="name" valueKey="xcx_id" placeholder="请选择">
|
||
|
|
<!-- 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/site/form_qua_ic.svg" alt="" class="flex mr-5"> <span>失败原因</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="changeBind(2)" displayKey="name" valueKey="xcx_id" placeholder="请选择">
|
||
|
|
<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/site/form_qua_ic.svg" alt="" class="flex mr-5"> <span>失败原因</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>
|
||
|
|
|
||
|
|
</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: [],
|
||
|
|
options: [],
|
||
|
|
xcxList: [],
|
||
|
|
siteXcxList: [],
|
||
|
|
dialogVisibleMpAuth: false,
|
||
|
|
showWhatIsH5: false,
|
||
|
|
dialogVisibleAddXcx: false,
|
||
|
|
bindWxXcxId: 0,
|
||
|
|
bindAliXcxId: 0,
|
||
|
|
xcxAppsecret: '',
|
||
|
|
xcxType: '',
|
||
|
|
addXcxTitle: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
||
|
|
},
|
||
|
|
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
|
||
|
|
}
|
||
|
|
if (this.siteXcxList && this.siteXcxList[2]) {
|
||
|
|
this.bindAliXcxId = this.siteXcxList[2].xcx_id
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
},
|
||
|
|
// 关闭弹框事件
|
||
|
|
handleClose() {
|
||
|
|
this.dialogVisibleMpAuth = false;
|
||
|
|
this.dialogVisibleAddXcx = 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')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
changeBind(item) {
|
||
|
|
// this.bindWxXcxId = item.xcx_id;
|
||
|
|
console.log(this.bindWxXcxId);
|
||
|
|
console.log(this.bindAliXcxId);
|
||
|
|
console.log(item);
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
</style>
|