7 changed files with 840 additions and 12 deletions
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,762 @@ |
|||
<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> |
|||
Loading…
Reference in new issue