zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

二维码展示、增加swtich示例、侧边栏单独项可点击

pull/70/head
zq 4 days ago
parent
25e3a4dfa1
commit
60c187ee88
5 changed files with 157 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      src/components/GuipSwitch.vue
  2. 27
      src/components/SetLeftMenu.vue
  3. 2
      src/router/index.js
  4. 206
      src/views/agent/payInfoSetting.vue
  5. 11
      src/views/elementGroups.vue

22
src/components/GuipSwitch.vue
View File

@ -1,7 +1,7 @@
<template>
<el-form-item>
<div class="flex switchWrap">
<span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText
<div class="switchWrap">
<span :class="['switchDesc',{'fl':float =='left'},{'fr':float =='right'}]" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText
}}</span>
<el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" v-bind="$attrs"
@ -47,6 +47,10 @@ export default {
type: String,
default: '#BABDC2',
},
float: {
type: String,
default: 'left',
},
disabled: {
type: Boolean,
default: false,
@ -94,18 +98,24 @@ export default {
</script>
<style scoped>
.switchWrap {
align-items: center;
/* align-items: center; */
}
.fl{
float: left;
margin-right: 12px;
}
.fr{
float: right;
margin-left: 12px;
}
.switchDesc {
font-size: 12px;
font-weight: normal;
line-height: 13px;
line-height: 20px;
letter-spacing: 0.08em;
font-variation-settings: "opsz" auto;
/* text/text_3 */
color: #626573;
display: inline-block;
margin-right: 15px;
}
</style>

27
src/components/SetLeftMenu.vue
View File

@ -2,9 +2,8 @@
<aside class="sidebar">
<ul style="margin: 0;">
<li v-for="(item, index) in menuList" :key="item.path + random()">
<div
:class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']">
<!-- @click="gotoPath(item, index)" 暂时先注释 -->
<div
:class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']" @click="gotoPath(item, index)">
<SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
:isActive="($route.path == item.path || (item.noToPath && curIndex == index))" />
<span class="title_text">{{ item.name }}</span>
@ -47,8 +46,8 @@ export default {
},
watch: {
'$route'(to, from) {
console.log(to, from);
'$route'() {
// console.log(to, from);
// 路由变化时重新计算位置
this.$nextTick(() => {
this.calculateFloorOffsets();
@ -105,9 +104,18 @@ export default {
const scrollPosition = this.getScrollPosition();
let activeFloor = null;
console.log(this.curIndex,scrollPosition,'this.curIndex===');
// 从下往上查找当前可见区域对应的楼层
for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
// for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
// const item = this.menuList[this.curIndex].list[i];
// if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
// activeFloor = item.desc;
// break;
// }
// }
// 从上往下
for (let i = 0; i < this.menuList[this.curIndex].list.length; i++) {
const item = this.menuList[this.curIndex].list[i];
if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
activeFloor = item.desc;
@ -147,14 +155,15 @@ export default {
// ele.classList.remove('ceshi')
// }, 1000)
// }
gotoPath(item, index) {
gotoPath(item) {
let path = item.path;
this.activeFloor = null
if (!path) {
this.curIndex = index;
this.curIndex = 0;
return;
}
if (this.$route.path != path) {
this.curIndex = index;
this.curIndex = 0;
this.scrollLock = false;
this.handleScroll();

2
src/router/index.js
View File

@ -17,7 +17,7 @@ const blackHeaderList = [
'/franchise'
];
const blackFooterList = [
'/', '/franchise'
'/', '/franchise','/agent/payInfoSetting'
];
// const whiteSlideList = ['/', '/ui',
// '/agent/siteList',

206
src/views/agent/payInfoSetting.vue
View File

@ -4,7 +4,7 @@
<div class="site-setting-wrap min-flex-right">
<div class="siteMessage flex-common">
<h3>支付授权</h3>
<el-form v-if="payType==payTypeTaoBao">
<el-form v-if="payType == payTypeTaoBao">
<div class="flex-wrap">
<div class="flex-left" style="max-width:100%">
<div class="beforeNotice">
@ -15,31 +15,39 @@
<p class="mt10 flex">
如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面
</p>
</div>
</div>
</div>
</div>
</el-form>
<el-form v-else-if="payType==payTypeWeixin">
<el-form v-else-if="payType == payTypeWeixin">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="1. 公司简称">
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" prop="company_short_name" placeholder="6字以内">
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name"
prop="company_short_name" placeholder="6字以内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）">
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id" prop="mch_id" placeholder="请输入商户号">
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/'
target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id"
prop="mch_id" placeholder="请输入商户号">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥">
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">注意，支付密钥不能设置为纯数字</p></span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2" prop="payinfo.apiv2" placeholder="请输入微信支付秘钥">
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/'
target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">
注意，支付密钥不能设置为纯数字</p></span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2"
prop="payinfo.apiv2" placeholder="请输入微信支付秘钥">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="4. 公众号APPID">
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid" prop="payinfo.appid" placeholder="请输入公众号APPID">
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/'
target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid"
prop="payinfo.appid" placeholder="请输入公众号APPID">
</GuipInput>
</GuipFormItem>
</div>
@ -50,38 +58,36 @@
<p>预览支付二维码</p>
</div>
<div class="preview-content">
<!-- 有二维码的情况 -->
<QrCode
v-if="qrCodeDataUrl"
:imageUrl="qrCodeDataUrl"
text="微信扫码支付"
>
<!-- 有二维码的情况 -->
<QrCode v-if="qrCodeDataUrl" :imageUrl="qrCodeDataUrl" text="微信扫码支付">
<div class="flex gap8" slot="desc">
<img style="width: 16px;" src="@/assets/register/weixin.svg" alt="">
<span class="qrcode-title ft12">微信扫码支付</span>
</div>
</QrCode>
<span v-else class="desc_title">暂未配置</span>
</div>
</div>
</div>
</div>
</el-form>
<el-form v-else-if="payType==payTypeAlipay">
<el-form v-else-if="payType == payTypeAlipay">
<div class="flex-wrap">
<div class="flex-left">
<div v-if="payinfo.is_pay_public==0">
<div v-if="payinfo.is_pay_public == 0">
<GuipFormItem column="column" class="mb24" label="1. 公司简称">
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" placeholder="6字以内"></GuipInput>
<GuipInput slot="formDom" ref="GuipInput" column="column"
v-model="payinfo.short_name" placeholder="6字以内"></GuipInput>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
<span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入公司支付宝账号"></GuipInput>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
placeholder="请输入公司支付宝账号"></GuipInput>
</GuipFormItem>
</div>
<div v-if="payinfo.is_pay_public==1">
<div v-if="payinfo.is_pay_public == 1">
<div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
<p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
@ -89,11 +95,14 @@
</div>
<GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
<span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput>
<GuipInput slot="formDom" ref="GuipInput" column="column"
v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput>
</GuipFormItem>
<GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号">
<span class="desc" slot="formRight">请输入有效账号</span>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号"></GuipInput>
<GuipInput slot="formDom" ref="GuipInput" column="column"
v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号">
</GuipInput>
</GuipFormItem>
</div>
</div>
@ -104,29 +113,31 @@
<p>预览支付二维码</p>
</div>
<div class="preview-content">
</div>
</div>
</div>
</div>
</el-form>
<el-form v-else-if="payType==payTypePdd">
<el-form v-else-if="payType == payTypePdd">
<div class="flex-wrap">
<div class="flex-left" style="max-width:100%">
<div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
<p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex"
target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
<p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
<p class="mt5 flex gray">授权成功后点击下方“同步授权”。</p>
</div>
<GuipFormItem column="column" class="mb24" label="账号名称">
<!-- <span class="desc" slot="formRight">账号名称</span> -->
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入账号名称"></GuipInput>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
placeholder="请输入账号名称"></GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
<el-form v-else-if="payType==payTypeJingdong">
<el-form v-else-if="payType == payTypeJingdong">
<div class="flex-wrap">
<div class="flex-left" style="max-width:100%">
<div class="beforeNotice">
@ -136,7 +147,8 @@
</div>
<GuipFormItem column="column" class="mb24" label="账号名称">
<!-- <span class="desc" slot="formRight">账号名称</span> -->
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入账号名称"></GuipInput>
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account"
placeholder="请输入账号名称"></GuipInput>
</GuipFormItem>
</div>
</div>
@ -146,10 +158,11 @@
<Footer></Footer>
<div class="register-btns">
<GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancle">取消</GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText }}</GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText
}}</GuipButton>
</div>
</div>
</template>
<script>
import store from '@/store';
@ -179,7 +192,7 @@ export default {
// CustomDropdown,
GuipButton,
QrCode,
Footer,
Footer,
// GroupFormBtns
},
@ -196,7 +209,7 @@ export default {
payTypeJingdong: PAY_TYPE_JINGDONG,
payTypePdd: PAY_TYPE_PDD,
confirmText: '保存',
qrCodeDataUrl:''
qrCodeDataUrl: ''
}
},
computed: {
@ -210,21 +223,21 @@ export default {
store.commit('SET_PAGETITLE', '支付授权');
this.getPayment();
// 模拟生成二维码
// 模拟生成二维码
QRCode.toDataURL('https://your-payment-link.com')
.then(url => {
this.qrCodeDataUrl = url
})
.catch(err => {
console.error(err)
})
.then(url => {
this.qrCodeDataUrl = url
})
.catch(err => {
console.error(err)
})
},
methods: {
getPayment() {
this.$http('POST', '/agentnew/ajax_get_payinfo', {
payid: this.$route.query.payid,
},{
headers:{
}, {
headers: {
'Auth': this.token
}
}).then(response => {
@ -243,33 +256,33 @@ export default {
},
// 确认按钮事件
addPayment() {
if (this.payType == PAY_TYPE_TAOBAO) {
window.open(this.payinfo.authurl, '_blank');
} else if (this.payType == PAY_TYPE_WEIXIN) {
this.$http('POST', '/agentnew/ajax_add_weixinpay', {
payid: this.$route.query.payid,
company_short_name: this.payinfo.short_name,
mch_id: this.payinfo.mch_id,
apiv2: this.payinfo.apiv2,
appid: this.payinfo.appid
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
if (this.payType == PAY_TYPE_TAOBAO) {
window.open(this.payinfo.authurl, '_blank');
} else if (this.payType == PAY_TYPE_WEIXIN) {
this.$http('POST', '/agentnew/ajax_add_weixinpay', {
payid: this.$route.query.payid,
company_short_name: this.payinfo.short_name,
mch_id: this.payinfo.mch_id,
apiv2: this.payinfo.apiv2,
appid: this.payinfo.appid
}, {
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')
})
}).catch(error => {
console.error(error, 'error')
})
} else if (this.payType == PAY_TYPE_ALIPAY) {
} else if (this.payType == PAY_TYPE_ALIPAY) {
this.$http('POST', '/agentnew/ajax_add_alipay', {
payid: this.$route.query.payid,
company_short_name: this.payinfo.short_name,
@ -286,10 +299,10 @@ export default {
if (response.status) {
if (this.payinfo.is_pay_public == 1) {
this.$Message.success(response.info);
} else {
} else {
window.open(response.data.authurl, '_blank');
}
} else {
this.$Message.error(response.info);
}
@ -315,7 +328,7 @@ export default {
}).catch(error => {
console.error(error, 'error')
})
} else if (this.payType == PAY_TYPE_JINGDONG) {
} else if (this.payType == PAY_TYPE_JINGDONG) {
window.open(this.payinfo.authurl, '_blank');
}
},
@ -330,36 +343,39 @@ export default {
</script>
<style lang="scss" scoped>
a {
text-decoration: none;
color: #006AFF;
text-decoration: none;
color: #006AFF;
}
.payInfo_wrap{
.payInfo_wrap {
height: calc(100% - 80px);
box-sizing: border-box;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.register-btns {
// height: 78px;
/* 自动布局 */
// width: 344px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
background: #FFFFFF;
padding: 16px 0px;
/* 蓝色阴影_常规 */
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
button:nth-child(1) {
margin-right: 56px;
}
// height: 78px;
/* 自动布局 */
// width: 344px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
background: #FFFFFF;
padding: 16px 0px;
/* 蓝色阴影_常规 */
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
button:nth-child(1) {
margin-right: 56px;
}
}
.preview {
background: #FAFAFA;
border-radius: 4px;
@ -374,17 +390,20 @@ a {
// padding-top: 24px;
// padding-left: 20px;
}
.qrcode-title{
.qrcode-title {
font-size: 12px;
line-height: 13px;
letter-spacing: 0.08em;
color: #0DAF49;
}
.desc_title{
.desc_title {
font-size: 16px;
letter-spacing: 0.08em;
color: #626573;
}
.preview-title p {
font-size: 14px;
font-weight: bold;
@ -476,5 +495,4 @@ a {
width: 100%;
flex: 1;
}
</style>

11
src/views/elementGroups.vue
View File

@ -297,8 +297,17 @@
<label for="">开关L</label>
<!-- active-value 开启状态的值 -->
<!-- inactive-value 关闭状态的值 -->
<GuipSwitch :modelValue="switchValue" activeText="默认类型" inactiveText="关闭" @change="onSwitchChange">
<GuipSwitch :modelValue="switchValue" activeText="默认类型boolean" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
<div class="ele-item">
<label for="">开关L</label>
<!-- 左侧不需要添加float 属性 -->
<GuipSwitch :modelValue="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
<div class="ele-item">
<label for="">开关L</label>
<GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number" @change="onSwitchChange">
</GuipSwitch>
<GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string" @change="onSwitchChange">

Write Preview
Loading…
Cancel
Save