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.
363 lines
14 KiB
363 lines
14 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">{{formData.sale_channel_label}}</span>
|
|
<GuipRadio slot="formDom" v-model="formData.sale_channel" :options="formData.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="formData.domain_type" :options="formData.domain_types" prop="domain" :rules="formRules.domain"
|
|
@change="radioDomainChange" />
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column">
|
|
<div slot="formLeft">域名设置</div>
|
|
<GuipInput v-show="formData.domain_type==='1'" slot="formDom" v-model="formData.domain_prefix" class="w540">
|
|
<i slot="suffix" class="el-icon-close" @click="handleClear"></i>
|
|
<span slot="appendshow">{{formData.domain_name}}</span>
|
|
</GuipInput>
|
|
<domainBind v-show="formData.domain_type==='2'" slot="formDom" :defaultPrefix="formData.domain_prefix" :defaultDomain="formData.domain_name" @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="formData.site_types" :rules="formRules.sale_channel" prop="site_type" @change="radioTypeChange" />
|
|
</div>
|
|
<div class="tem-home">
|
|
<div class="tem-home-top">
|
|
<img :src="formData.picture?formData.picture:require('@/assets/register/tem-img-normal.png')" alt="">
|
|
</div>
|
|
<div class="tem-home-bottom">
|
|
<input type="hidden" v-model="formData.site_tpl">
|
|
<b>{{formData.site_tpl_name}}</b>
|
|
<div>
|
|
<div class="tem-look" @click="previewTpl">
|
|
<img src="@/assets/register/look-tem.svg" alt="">
|
|
预览
|
|
</div>
|
|
<div @click="changeTpl">
|
|
<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";
|
|
import db from '@/utils/indexedDBUtil'
|
|
|
|
export default {
|
|
name: 'domainSet',
|
|
props: {
|
|
siteInfo: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
components: {
|
|
domainBind,
|
|
GuipFormItem, GuipRadio, GuipInput,
|
|
GuipButton
|
|
},
|
|
data(){
|
|
return {
|
|
formData: {
|
|
short_name: '',
|
|
sale_channel: '',
|
|
sale_channel_label: '',
|
|
site_type: '',
|
|
site_tpl: '',
|
|
site_tpl_name: '',
|
|
site_tpl_ico: '',
|
|
site_tpl_logo: '',
|
|
picture:'',
|
|
not_finished_uid: '',
|
|
plat_domain: '',
|
|
domain_type: '',
|
|
domain_prefix: '',
|
|
domain_name: '',
|
|
sale_channels:{},
|
|
sale_channels_label:{},
|
|
domain_types:{},
|
|
site_types:{},
|
|
site_type_tpl:{},
|
|
},
|
|
formRules: {
|
|
short_name: [
|
|
{ required: true, message: '请输入站点简称', trigger: 'blur' }
|
|
],
|
|
sale_channel: [
|
|
{ required: true, message: '请选择销售渠道', trigger: 'blur' }
|
|
],
|
|
domain_prefix: [
|
|
{ required: true, message: '请设置站点域名', trigger: 'blur' }
|
|
],
|
|
site_type: [
|
|
{ required: true, message: '请选择站点类型', trigger: 'blur' }
|
|
],
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
submitData() {
|
|
return {
|
|
short_name: this.formData.short_name,
|
|
domain: this.formData.domain_prefix + this.formData.domain_name,
|
|
sale_channel: this.formData.sale_channel,
|
|
site_type: this.formData.site_type,
|
|
site_tpl: this.formData.site_tpl,
|
|
not_finished_uid: this.formData.not_finished_uid,
|
|
ico: this.formData.site_tpl_ico,
|
|
logo: this.formData.site_tpl_logo,
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
const formData = JSON.parse(localStorage.getItem('formData'))
|
|
if(formData){
|
|
this.formData = formData;
|
|
localStorage.removeItem('formData')
|
|
this.getSiteTplSet()
|
|
return true;
|
|
}
|
|
|
|
this.getAddInfo()
|
|
},
|
|
methods:{
|
|
async getSiteTplSet(){
|
|
const siteTplInfo = JSON.parse(localStorage.getItem('site_tpl_info'))
|
|
if(siteTplInfo){
|
|
this.formData.site_tpl = siteTplInfo.site_tpl
|
|
this.formData.site_tpl_name = siteTplInfo.site_tpl_name
|
|
this.formData.picture = siteTplInfo.picture
|
|
localStorage.removeItem('site_tpl_info')
|
|
}
|
|
|
|
const ico = await db.get('ico')
|
|
if(ico){
|
|
this.formData.site_tpl_ico = ico
|
|
await db.remove('ico')
|
|
}
|
|
const logo = await db.get('logo')
|
|
if(logo){
|
|
this.formData.site_tpl_logo = logo
|
|
await db.remove('logo')
|
|
}
|
|
},
|
|
getAddInfo() {
|
|
const that = this
|
|
this.$http('POST', '/agentnew/ajax_get_site_add_info', {}).then(response => {
|
|
if(response.status){
|
|
const addInfo = response.data
|
|
that.formData.sale_channels = addInfo.sale_channels
|
|
that.formData.sale_channels_label = addInfo.sale_channels_label
|
|
|
|
that.formData.domain_type = String(addInfo.domain_type)
|
|
that.formData.domain_types = addInfo.domain_types
|
|
that.formData.plat_domain = addInfo.plat_domain
|
|
that.formData.domain_name = addInfo.plat_domain
|
|
|
|
that.formData.site_type = String(addInfo.site_type)
|
|
that.formData.site_types = addInfo.site_types
|
|
that.formData.site_type_tpl = addInfo.site_type_tpl
|
|
if(that.formData.site_type){
|
|
that.formData.site_tpl = this.formData.site_type_tpl[this.formData.site_type].site_tpl
|
|
that.formData.site_tpl_name = this.formData.site_type_tpl[this.formData.site_type].site_tpl_name
|
|
that.formData.picture = this.formData.site_type_tpl[this.formData.site_type].picture
|
|
}
|
|
|
|
if(Object.keys(that.siteInfo).length>0){
|
|
that.$nextTick(() => {
|
|
that.formData.short_name = that.siteInfo.short_name
|
|
that.formData.sale_channel = String(that.siteInfo.sale_channel)
|
|
that.formData.site_type = String(that.siteInfo.site_type)
|
|
that.formData.site_tpl = that.siteInfo.site_tpl
|
|
that.formData.site_tpl_name = that.siteInfo.site_tpl_name
|
|
that.formData.picture = that.siteInfo.picture
|
|
that.formData.not_finished_uid = that.siteInfo.uid
|
|
|
|
//域名存在且不是平台主域名
|
|
if(that.siteInfo.domain){
|
|
that.formData.domain_type = String(that.siteInfo.domain_type)
|
|
that.formData.domain_prefix = that.siteInfo.domain_prefix;
|
|
that.formData.domain_name = that.siteInfo.domain_name;
|
|
}
|
|
})
|
|
}
|
|
return true
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
radioChange(){
|
|
const labels = this.formData.sale_channels_label;
|
|
const value = this.formData.sale_channel;
|
|
this.formData.sale_channel_label = labels && labels[value] ? labels[value] : '';
|
|
},
|
|
radioDomainChange(){
|
|
this.formData.domain_name = this.formData.domain_type === '1' ? this.formData.plat_domain : ''
|
|
},
|
|
radioTypeChange(){
|
|
if(this.formData.site_type){
|
|
this.formData.site_tpl = this.formData.site_type_tpl[this.formData.site_type].site_tpl
|
|
this.formData.site_tpl_name = this.formData.site_type_tpl[this.formData.site_type].site_tpl_name
|
|
this.formData.picture = this.formData.site_type_tpl[this.formData.site_type].picture
|
|
}
|
|
},
|
|
handleClear() {
|
|
this.formData.domain_prefix = '';
|
|
},
|
|
handleChangeDomain(data) {
|
|
this.formData.domain_prefix = data.prefix
|
|
this.formData.domain_name = data.domain
|
|
},
|
|
previewTpl(){
|
|
window.open('http://'+this.siteInfo.domain, '_blank');
|
|
},
|
|
changeTpl(){
|
|
if(this.formData.site_type === ''){
|
|
this.$message.warning('请选择站点类型');
|
|
return false;
|
|
}
|
|
localStorage.setItem('formData', JSON.stringify(this.formData))
|
|
this.$router.push(`/agent/siteTemplate?site_type=${this.formData.site_type}`)
|
|
},
|
|
saveConfirm() {
|
|
const that = this
|
|
that.$refs.formRef.validate((valid) => {
|
|
if (valid) {
|
|
const that = this
|
|
that.$http('POST', '/agentnew/ajax_add_new_site', that.submitData).then(response => {
|
|
if(response.status && response.data.uid){
|
|
that.formData.uid = response.data.uid
|
|
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%;
|
|
height: 255px;
|
|
overflow: hidden;
|
|
img{
|
|
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>
|