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.
358 lines
15 KiB
358 lines
15 KiB
<template>
|
|
<div class="site-setting-wrap min-flex-right">
|
|
<div class="siteMessage flex-common" id="siteMessage1">
|
|
<h3>站点信息</h3>
|
|
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10" :showWordLimit="true"
|
|
desc="这是是右侧文案" v-model="siteForm.site_alias" prop="site_alias"
|
|
placeholder="仅自己区分站点销售渠道，客户看不到" />
|
|
<GuipInput ref="GuipInput" column="column" label="公司名称" desc="在站点首页底部“关于我们”展示"
|
|
v-model="siteForm.company_name" prop="company_name" placeholder="非必填" />
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<GuipInput ref="GuipInput" column="column" label="公司地址" desc="在站点首页底部“关于我们”展示"
|
|
v-model="siteForm.company_address" prop="company_address" placeholder="非必填" />
|
|
<GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
|
|
v-model="siteForm.company_phone" prop="company_phone" placeholder="非必填" />
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />
|
|
|
|
</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" style="width: 200px;">
|
|
<GuipSelect width="200px" v-model="domainSuffix" placeholder="选择后缀"
|
|
:filterable="true" allow-create :options="domainOptions">
|
|
<!-- <el-option
|
|
v-for="item in domainOptions"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
/> -->
|
|
</GuipSelect>
|
|
</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>
|
|
</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 GuipRadio from '@/components/GuipRadio.vue';
|
|
import CustomDropdown from '@/components/CustomDropdown.vue';
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
import GroupFormBtns from '@/components/GroupFormBtns.vue';
|
|
import GuipSelect from '@/components/GuipSelect.vue';
|
|
// import {setHighActive} from '@/utils/common';
|
|
export default {
|
|
// 站点设置
|
|
name: '',
|
|
props: [''],
|
|
components: {
|
|
GuipRadio,
|
|
GuipFormItem,
|
|
GuipInput,
|
|
CustomDropdown,
|
|
GuipButton,
|
|
GroupFormBtns,
|
|
GuipSelect
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
domainInput: '',
|
|
domainSuffix: '.chachongz.com',
|
|
domainOptions: [
|
|
{
|
|
value: '1',
|
|
label: '.chachongz.com'
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '.turnitin.org.cn'
|
|
},
|
|
{
|
|
value: '3',
|
|
label: '.jishu.chachongz.com'
|
|
},
|
|
],
|
|
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','siteSettingData']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
created(){
|
|
store.commit('SET_CUSTOMIZE', true);
|
|
store.commit('SET_SLIDER_MENU','siteSettingData');
|
|
},
|
|
mounted() {
|
|
store.commit('SET_PAGETITLE', '基本设置');
|
|
},
|
|
methods: {
|
|
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">
|
|
.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%;
|
|
padding: 12px ;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#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>
|