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.
404 lines
17 KiB
404 lines
17 KiB
1 week ago
|
<template>
|
||
|
|
<div class="main-content12">
|
||
|
|
<!-- page header -->
|
||
|
|
<div class="pageheader">
|
||
|
|
<span class="pagetitle">基本设置</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- page content -->
|
||
|
|
<div class="site-setting-wrap min-flex-right">
|
||
|
|
<div class="siteMessage flex-common" id="siteMessage1">
|
||
|
|
<h3>站点信息</h3>
|
||
|
|
<el-form>
|
||
|
|
<div class="flex-wrap">
|
||
|
|
<div class="flex-left">
|
||
|
|
<GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10" :showWordLimit="true"
|
||
|
|
desc="一个站点对应一个销售渠道，定义好名字好区分" v-model="siteInfo.short_name" prop="short_name"
|
||
|
|
placeholder="仅自己区分站点销售渠道，客户看不到" />
|
||
|
|
|
||
|
|
<GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
|
||
|
|
v-model="siteInfo.phone_num" prop="company_phone" placeholder="非必填" />
|
||
|
|
</div>
|
||
|
|
<div class="flex-line"></div>
|
||
|
|
<div class="flex-right">
|
||
|
|
<GuipTextarea v-model="siteInfo.company_name" label="详细介绍" column="column" prop="doctor_detail"
|
||
|
|
width="100%" height="90px" placeholder="请输入描述内容" desc="在站点首页底部“关于我们”展示"
|
||
|
|
show-word-limit />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
<GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="updateSiteInfo()" />
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="siteMessage flex-common" id="siteMessage2">
|
||
|
|
<h3>站点信息</h3>
|
||
|
|
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
|
||
|
|
<div class="flex-wrap">
|
||
|
|
<div class="flex-left">
|
||
|
|
<GuipFormItem column="column" class="mb24" label="域名来源" required="true">
|
||
|
|
<GuipRadio slot="formDom" v-model="siteForm1.domain_source" :options="domain_source"
|
||
|
|
prop="domain_source" @change="domain_radioChange" />
|
||
|
|
</GuipFormItem>
|
||
|
|
</div>
|
||
|
|
<div class="flex-line"></div>
|
||
|
|
<div class="flex-right">
|
||
|
|
<GuipFormItem column="column" label="域名设置" required="true">
|
||
|
|
<GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母">
|
||
|
|
<span slot="appendshow">.chachongz.com</span>
|
||
|
|
</GuipInput>
|
||
|
|
</GuipFormItem>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="siteMessage flex-common" id="siteMessage3">
|
||
|
|
<h3>店铺收款</h3>
|
||
|
|
<el-form :model="siteForm2" ref="formRef">
|
||
|
|
<div class="flex-wrap">
|
||
|
|
<div class="flex-left">
|
||
|
|
<GuipFormItem column="column" class="mb24">
|
||
|
|
<div slot="formLeft" class="form-top-icon">
|
||
|
|
<img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;"
|
||
|
|
alt=""><span>微信收款</span>
|
||
|
|
</div>
|
||
|
|
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay" :options="options_weixin"
|
||
|
|
@change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
|
||
|
|
@changeNormal="changeNormalWeixin">
|
||
|
|
<!-- 自定义触发按钮 -->
|
||
|
|
<template #trigger>
|
||
|
|
<span v-if="selectedItemWeixin"
|
||
|
|
style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
|
||
|
|
select_placeholder_weixin ? select_placeholder_weixin :
|
||
|
|
selectedItemWeixin.desc }}</span>
|
||
|
|
<span v-else>请选择</span>
|
||
|
|
</template>
|
||
|
|
<template #normal>
|
||
|
|
<div class="flex flex-between noraml-jump">
|
||
|
|
<div class="left">
|
||
|
|
<b>绑定新微信收款</b>
|
||
|
|
<p class="one">需要使用您公司的微信支付</p>
|
||
|
|
<p>需在微信商户平台-产品中心开通Native支付</p>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<GuipButton type="primary" size="medium">前往绑定</GuipButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- 自定义下拉选项 -->
|
||
|
|
<template #item="{ item }">
|
||
|
|
<div class="flex-between">
|
||
|
|
<div class="left">
|
||
|
|
<p class="one">{{ item.label }}</p>
|
||
|
|
<p>{{ item.desc }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<img v-if="selectedItem.value == item.value"
|
||
|
|
src="@/assets/register/drop-selected.svg" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</CustomDropdown>
|
||
|
|
</GuipFormItem>
|
||
|
|
<GuipFormItem column="column">
|
||
|
|
<div slot="formLeft" class="form-top-icon">
|
||
|
|
<img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;"
|
||
|
|
alt=""><span>支付宝收款</span>
|
||
|
|
</div>
|
||
|
|
<!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay"
|
||
|
|
:options="options_zhifubao" placeholder="未绑定支付宝收款" /> -->
|
||
|
|
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay" :options="options_weixin"
|
||
|
|
@change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
|
||
|
|
@changeNormal="changeNormalWeixin">
|
||
|
|
<!-- 自定义触发按钮 -->
|
||
|
|
<template #trigger>
|
||
|
|
<span v-if="selectedItemWeixin"
|
||
|
|
style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
|
||
|
|
select_placeholder_weixin ? select_placeholder_weixin :
|
||
|
|
selectedItemWeixin.desc }}</span>
|
||
|
|
<span v-else>请选择</span>
|
||
|
|
</template>
|
||
|
|
<template #normal>
|
||
|
|
<div class="flex flex-between noraml-jump">
|
||
|
|
<div class="left">
|
||
|
|
<b>绑定新支付宝收款</b>
|
||
|
|
<p class="one">需要使用您公司的支付宝支付</p>
|
||
|
|
<p>需在支付宝商户平台-产品中心开通Native支付</p>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<GuipButton type="primary" size="medium">前往绑定</GuipButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- 自定义下拉选项 -->
|
||
|
|
<template #item="{ item }">
|
||
|
|
<div class="flex-between">
|
||
|
|
<div class="left">
|
||
|
|
<p class="one">{{ item.label }}</p>
|
||
|
|
<p>{{ item.desc }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<img v-if="selectedItem.value == item.value"
|
||
|
|
src="@/assets/register/drop-selected.svg" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</CustomDropdown>
|
||
|
|
</GuipFormItem>
|
||
|
|
</div>
|
||
|
|
<div class="flex-line"></div>
|
||
|
|
<div class="flex-right">
|
||
|
|
<!-- <div>{{ input1 }}</div> -->
|
||
|
|
<div class="addStore flex">
|
||
|
|
<div></div>
|
||
|
|
添加其他收款方式
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
// import GuipInput from '@/components/GuipInput.vue';
|
||
|
|
import store from '@/store';
|
||
|
|
import { mapState } from 'vuex';
|
||
|
|
import GuipFormItem from '@/components/GuipFormItem.vue';
|
||
|
|
import GuipInput from '@/components/GuipInput.vue';
|
||
|
|
import GuipTextarea from '@/components/GuipTextarea.vue';
|
||
|
|
import GuipRadio from '@/components/GuipRadio.vue';
|
||
|
|
import CustomDropdown from '@/components/CustomDropdown.vue';
|
||
|
|
import GuipButton from '@/components/GuipButton.vue';
|
||
|
|
import GroupFormBtns from '@/components/GroupFormBtns.vue';
|
||
|
|
// import {setHighActive} from '@/utils/common';
|
||
|
|
export default {
|
||
|
|
// 站点设置
|
||
|
|
name: '',
|
||
|
|
props: [''],
|
||
|
|
components: {
|
||
|
|
GuipRadio,
|
||
|
|
GuipFormItem,
|
||
|
|
GuipInput,
|
||
|
|
GuipTextarea,
|
||
|
|
CustomDropdown,
|
||
|
|
GuipButton,
|
||
|
|
GroupFormBtns
|
||
|
|
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// AUTH
|
||
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
|
||
|
|
// 站点信息
|
||
|
|
siteInfo: {
|
||
|
|
short_name: '',
|
||
|
|
company_name: '',
|
||
|
|
phone_num: '',
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
siteForm: {
|
||
|
|
company_name: '',
|
||
|
|
company_address: '',
|
||
|
|
company_phone: '',
|
||
|
|
site_alias: '',
|
||
|
|
},
|
||
|
|
// siteFormrules: {
|
||
|
|
// site_alias: [
|
||
|
|
// { required: true, message: '请输入站点简称', trigger: 'blur' }
|
||
|
|
// ]
|
||
|
|
// },
|
||
|
|
siteForm1: {
|
||
|
|
domain_set: '',
|
||
|
|
domain_source: '平台免费域名',
|
||
|
|
},
|
||
|
|
siteForm2: {
|
||
|
|
zhifubao_pay: '',
|
||
|
|
weixin_pay: '',
|
||
|
|
},
|
||
|
|
siteFormrules1: {
|
||
|
|
domain_source: [
|
||
|
|
{ required: true, message: '请输入站点简称', trigger: 'blur' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
domain_source: [
|
||
|
|
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
|
||
|
|
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
|
||
|
|
],
|
||
|
|
options_weixin_null: {
|
||
|
|
label: '暂无收款账号',
|
||
|
|
value: '暂时没有收款账号，我想稍后配置',
|
||
|
|
desc: '暂无收款账号，稍后配置'
|
||
|
|
},
|
||
|
|
select_placeholder_weixin: '暂无收款账号，稍后配置',
|
||
|
|
selectedItemWeixin: {},//微信收款方式
|
||
|
|
options_weixin: [],
|
||
|
|
options_zhifubao: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
||
|
|
},
|
||
1 week ago
|
created(){
|
||
|
|
store.commit('SET_CUSTOMIZE', true);
|
||
|
|
store.commit('SET_SLIDER_MENU','siteSettingData');
|
||
|
|
},
|
||
|
1 week ago
|
mounted() {
|
||
|
|
store.commit('SET_PAGETITLE', '基本设置');
|
||
|
|
|
||
|
|
this.getSiteInfo();
|
||
|
|
},
|
||
|
|
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
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
updateSiteInfo() {
|
||
|
|
this.$http('POST', '/agentnew/ajax_update_site_info', {
|
||
|
|
uid: this.$route.query.uid,
|
||
|
|
short_name: this.siteInfo.short_name,
|
||
|
|
company_name: this.siteInfo.company_name,
|
||
|
|
company_phone: this.siteInfo.phone_num,
|
||
|
|
},{
|
||
|
|
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')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
cancleUpdateSiteInfo() {
|
||
|
|
this.getSiteInfo();
|
||
|
|
},
|
||
|
|
changeNormalWeixin() {
|
||
|
|
|
||
|
|
},
|
||
|
|
changeSelectWeixin(item, flag) {
|
||
|
|
if (flag) {
|
||
|
|
this.select_placeholder_weixin = this.options_weixin_null.desc;
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.selectedItem = { ...item };
|
||
|
|
console.log(this.selectedItem, 'this.selectedItem====');
|
||
|
|
},
|
||
|
|
// 销售渠道
|
||
|
|
domain_radioChange(type) {
|
||
|
|
console.log(type, '--');
|
||
|
|
},
|
||
|
|
onSwitchChange(data) {
|
||
|
|
console.log(data, '---');
|
||
|
|
},
|
||
|
|
submitForm(form) {
|
||
|
|
console.log(this.$refs[form], '-----');
|
||
|
|
this.$refs[form].validate((valid) => {
|
||
|
|
console.log(this[form], '======formxinxi');
|
||
|
|
if (valid) {
|
||
|
|
alert('提交成功!');
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
cancelClick() {
|
||
|
|
console.log('quxiao');
|
||
|
|
},
|
||
|
|
confirmClick(type) {
|
||
|
|
console.log(type, '确认');
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.pageheader {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between; /* 关键属性 */
|
||
|
|
align-items: center;
|
||
|
|
margin: 16px 0px 16px 0px;
|
||
|
|
}
|
||
|
|
.pagetitle {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: normal;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #1E2226;
|
||
|
|
margin-top:8px;
|
||
|
|
}
|
||
|
|
.siteMessage{
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: all .5s;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
}
|
||
|
|
.addStore {
|
||
|
|
margin-top: 12px;
|
||
|
|
// border-radius: 4px;
|
||
|
|
// opacity: 1;
|
||
|
|
// /* text/text_white_2 */
|
||
|
|
// border: 1px dashed #BABDC2;
|
||
|
|
// padding: 15px 20px;
|
||
|
|
// color: #626573;
|
||
|
|
// justify-content: center;
|
||
|
|
|
||
|
|
// img {
|
||
|
|
// margin-right: 12px;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.site-setting-wrap{
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
#siteMessage2{
|
||
|
|
margin: 12px 0;
|
||
|
|
}
|
||
|
|
.domain-wrap {
|
||
|
|
.domain-item {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.domain-item p:last-child {
|
||
|
|
padding-left: 23px;
|
||
|
|
color: #8A9099;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
text-align: left;
|
||
|
|
line-height: 18px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.domain-box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|