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.
327 lines
12 KiB
327 lines
12 KiB
<template>
|
|
<div>
|
|
<el-form :model="formData" :rules="formRules" ref="formRef">
|
|
<div class="step1-wrap min-flex pb90">
|
|
<div class="flex-common">
|
|
<h3>站点信息</h3>
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<GuipFormItem column="column" class="mb24">
|
|
<div slot="formLeft">站点简称</div>
|
|
<div slot="formRight" class="desc">一个站点对应一个销售渠道，定义好名字好区分</div>
|
|
<GuipInput slot="formDom" ref="GuipInput" prop="short_name" :maxlength="10" :showWordLimit="true"
|
|
v-model="formData.short_name" placeholder="仅自己区分站点销售渠道，客户看不到" />
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column" class="channel-radio">
|
|
<div slot="formLeft">销售渠道</div>
|
|
<span slot="formRight" class="desc">{{channel_label}}</span>
|
|
<GuipRadio slot="formDom" v-model="formData.sale_channel" :options="sale_channels"
|
|
prop="sale_channel" :rules="formRules.sale_channel" @change="radioChange" />
|
|
</GuipFormItem>
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<GuipFormItem column="column" class="mb24">
|
|
<div slot="formLeft">域名来源</div>
|
|
<GuipRadio slot="formDom" v-model="domainType" :options="domain_types" prop="domain" :rules="formRules.domain"
|
|
@change="radioDomainChange" />
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column">
|
|
<div slot="formLeft">域名设置</div>
|
|
<GuipInput v-show="domainType==='1'" slot="formDom" v-model="domainPrefix" class="w540">
|
|
<i slot="suffix" class="el-icon-close" @click="handleClear"></i>
|
|
<span slot="appendshow">{{domainName}}</span>
|
|
</GuipInput>
|
|
<domainBind v-show="domainType==='2'" slot="formDom" :defaultPrefix="domainPrefix" :defaultDomain="domainName" @handleEvent="handleChangeDomain" />
|
|
</GuipFormItem>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt20 flex-common">
|
|
<h3>模板选择</h3>
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<p class="flex-left-desc">销售方向</p>
|
|
<div class="flex mt12">
|
|
<GuipRadio v-model="formData.site_type" :options="site_types" :rules="formRules.sale_channel" prop="site_type" @change="radioTypeChange" />
|
|
</div>
|
|
<div class="tem-home">
|
|
<img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
|
|
<div class="tem-home-bottom">
|
|
<b>经典深蓝模板（默认）</b>
|
|
<div>
|
|
<div class="tem-look" @click="lookTemImg">
|
|
<img src="@/assets/register/look-tem.svg" alt="">
|
|
预览
|
|
</div>
|
|
<div @click="editTemImg">
|
|
<img src="@/assets/register/edit-tem.svg" alt="">
|
|
修改
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="register-btns">
|
|
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="saveConfirm">下一步</GuipButton>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import GuipButton from "@/components/GuipButton.vue";
|
|
import GuipInput from "@/components/GuipInput.vue";
|
|
import GuipRadio from "@/components/GuipRadio.vue";
|
|
import GuipFormItem from "@/components/GuipFormItem.vue";
|
|
import domainBind from "@/components/domainBind.vue";
|
|
|
|
export default {
|
|
name: 'domainSet',
|
|
props: {
|
|
siteInfo: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
components: {
|
|
domainBind,
|
|
GuipFormItem, GuipRadio, GuipInput,
|
|
GuipButton
|
|
},
|
|
data(){
|
|
return {
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
|
|
formData: {
|
|
short_name: '',
|
|
domain:'',
|
|
sale_channel: '',
|
|
site_type: '',
|
|
site_tpl: '1',
|
|
not_finished_uid: '',
|
|
},
|
|
formRules: {
|
|
short_name: [
|
|
{ required: true, message: '请输入站点简称', trigger: 'blur' }
|
|
],
|
|
sale_channel: [
|
|
{ required: true, message: '请选择销售渠道', trigger: 'blur' }
|
|
],
|
|
domain: [
|
|
{ required: true, message: '请设置站点域名', trigger: 'blur' }
|
|
],
|
|
site_type: [
|
|
{ required: true, message: '请选择站点类型', trigger: 'blur' }
|
|
],
|
|
},
|
|
|
|
channel_options: [
|
|
{ label: '淘系平台售卖', value: '0', selectedLabel: ''},
|
|
{ label: '非电商平台销售', value: '1', selectedLabel: '适用于搜索推广，如360、百度、微信售卖等渠道' },
|
|
{ label: '自用不出售', value: '2', selectedLabel: '适用于不需要对外售卖，专用于自己检测的用户' },
|
|
{ label: '拼多多平台售卖', value: '3', selectedLabel: '' }
|
|
],
|
|
|
|
sale_channels:{},
|
|
domain_types:{},
|
|
site_types:{},
|
|
domainType: '1',
|
|
domainPrefix: '',
|
|
domainName: '',
|
|
platDomain: '',
|
|
}
|
|
},
|
|
watch:{
|
|
domainPrefix() {
|
|
this.checkFormDataDomain();
|
|
},
|
|
domainName() {
|
|
this.checkFormDataDomain();
|
|
}
|
|
},
|
|
computed: {
|
|
channel_label() {
|
|
const labels = this.sale_channels_label;
|
|
const value = this.formData.sale_channel;
|
|
return labels && labels[value] ? labels[value] : '';
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getAddInfo()
|
|
},
|
|
methods:{
|
|
getAddInfo() {
|
|
const that = this
|
|
that.payList = []
|
|
this.$http('POST', '/agentnew/ajax_get_site_add_info', {},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if(response.status){
|
|
const addInfo = response.data
|
|
that.sale_channels = addInfo.sale_channels
|
|
that.sale_channels_label = addInfo.sale_channels_label
|
|
that.domain_types = addInfo.domain_types
|
|
that.site_types = addInfo.site_types
|
|
that.platDomain = addInfo.plat_domain
|
|
|
|
if(Object.keys(that.siteInfo).length>0){
|
|
that.$nextTick(() => {
|
|
that.formData.short_name = that.siteInfo.short_name
|
|
that.formData.domain = that.siteInfo.domain
|
|
that.formData.sale_channel = that.siteInfo.sale_channel
|
|
that.formData.site_type = that.siteInfo.site_type
|
|
that.formData.site_tpl = that.siteInfo.site_tpl
|
|
that.formData.not_finished_uid = that.siteInfo.uid
|
|
|
|
//域名存在且不是平台主域名
|
|
if(that.formData.domain){
|
|
that.domainType = String(that.siteInfo.domain_type)
|
|
that.domainPrefix = that.siteInfo.domain_prefix;
|
|
that.domainName = that.siteInfo.domain_name;
|
|
}
|
|
})
|
|
}else{
|
|
that.domainName = that.platDomain
|
|
}
|
|
return true
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
radioChange(val){
|
|
this.formData.sale_channel = val
|
|
},
|
|
radioDomainChange(val){
|
|
this.domainType = val
|
|
this.domainName = val === '1' ? this.platDomain : ''
|
|
},
|
|
radioTypeChange(val){
|
|
this.formData.site_type = val
|
|
},
|
|
handleClear() {
|
|
this.domainPrefix = '';
|
|
},
|
|
handleChangeDomain(data) {
|
|
this.domainPrefix = data.prefix
|
|
this.domainName = data.domain
|
|
},
|
|
checkFormDataDomain(){
|
|
if (this.domainPrefix && this.domainName) {
|
|
this.formData.domain = this.domainPrefix + this.domainName;
|
|
}
|
|
},
|
|
lookTemImg(){
|
|
|
|
},
|
|
editTemImg(){
|
|
|
|
},
|
|
saveConfirm() {
|
|
const that = this
|
|
that.$refs.formRef.validate((valid) => {
|
|
if (valid) {
|
|
const that = this
|
|
that.$http('POST', '/agentnew/ajax_add_new_site', that.formData,{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if(response.status && response.data.uid){
|
|
that.formData.uid = response.data.uid
|
|
that.formData.domain_type = that.domainType
|
|
that.formData.domain_prefix = that.domainPrefix
|
|
that.formData.domain_name = that.domainName
|
|
that.$emit('handelSiteInfo', that.formData)
|
|
|
|
if(that.formData.sale_channel === '2'){
|
|
//自用站点无需设置收款方式
|
|
that.$emit('handelStep', 3)
|
|
}else{
|
|
that.$emit('handelStep', 2)
|
|
}
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.w540{
|
|
width: 540px;
|
|
}
|
|
.pb90{
|
|
padding-bottom: 90px;
|
|
}
|
|
.mt20{
|
|
margin-top: 20px;
|
|
}
|
|
.step1-wrap{
|
|
padding-bottom: 90px;
|
|
}
|
|
|
|
.tem-home {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
background: #FFFFFF;
|
|
/* middle/middle_line_1 */
|
|
border: 1px solid #DFE2E6;
|
|
|
|
.tem-home-top {
|
|
width: 100%;
|
|
}
|
|
|
|
.tem-home-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 22px 32px;
|
|
justify-content: space-between;
|
|
|
|
.tem-look {
|
|
margin-right: 36px;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep{
|
|
.el-input-group__append{
|
|
width: 175px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.channel-radio .el-radio-group{
|
|
text-align: left;
|
|
}
|
|
.channel-radio .el-radio{
|
|
min-width: 120px;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
</style>
|