5 changed files with 1517 additions and 2 deletions
@ -0,0 +1,318 @@ |
|||||
|
<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" label="" prop="site_type" @change="radioChange" /> |
||||
|
</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.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
||||
|
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' } |
||||
|
], |
||||
|
}, |
||||
|
|
||||
|
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 : '' |
||||
|
}, |
||||
|
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 |
||||
|
this.$emit('handelSiteInfo', that.formData) |
||||
|
|
||||
|
if(this.formData.sale_channel === '2'){ |
||||
|
//自用站点无需设置收款方式 |
||||
|
this.$emit('handelStep', 3) |
||||
|
}else{ |
||||
|
this.$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> |
||||
@ -0,0 +1,601 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="step2-wrap min-flex"> |
||||
|
<div class="flex-common"> |
||||
|
<h3>店铺收款</h3> |
||||
|
|
||||
|
<template v-if="!isJd"> |
||||
|
|
||||
|
<el-form ref="formRef" v-if="siteInfo.sale_channel === '0'"> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<div class="shopadd-wrap" v-if="!taobaoList.length"> |
||||
|
<p class="shopadd-title">店铺授权</p> |
||||
|
<div class="flex flex-between shopadd-area"> |
||||
|
<div> |
||||
|
<p>请确保使用要添加的淘宝主账号登录并授权</p> |
||||
|
<p>如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p> |
||||
|
</div> |
||||
|
<GuipButton :disabled="!addablePays[payTypeTaoBao]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypeTaoBao)">前往添加</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<GuipFormItem column="column" v-else> |
||||
|
<div slot="formLeft" class="form-top-icon"> |
||||
|
<img src="@/assets/register/taobao.svg" style="width: 26px;height: 26px;" alt=""><span>淘宝/天猫店铺</span> |
||||
|
</div> |
||||
|
|
||||
|
<CustomDropdown slot="formDom" width="100%" @change="changeSelectTaobao" valueKey="payid" |
||||
|
:options="taobaoList" :options_null="!taobaoList.length"> |
||||
|
|
||||
|
<template #trigger> |
||||
|
<span v-if="selectTaobao">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span> |
||||
|
<span v-else-if="!taobaoList.length">暂无收款账号，稍后配置</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>如未购买"快乐帮手"服务或已过期，会跳转到购买服务页面</p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<GuipButton type="primary" size="medium" @click="goBindPay(payTypeTaoBao)">前往添加</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template #item="{ item }"> |
||||
|
<div class="flex-between"> |
||||
|
<div class="left"> |
||||
|
<p class="one">{{ item.account }}</p> |
||||
|
<p>{{ item.short_name }}</p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<img v-if="selectTaobao && selectTaobao.payid == item.payid" src="@/assets/register/drop-selected.svg" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</CustomDropdown> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-form ref="formRef" v-if="siteInfo.sale_channel === '1'"> |
||||
|
<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%" @change="changeSelectWeixin" valueKey="payid" |
||||
|
:options="wxpayList" :options_null="!wxpayList.length"> |
||||
|
<!-- 选择后显示数据 --> |
||||
|
<template #trigger> |
||||
|
<span v-if="selectWxpay">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span> |
||||
|
<span v-else-if="wxpayList.length === 0">暂无收款账号，稍后配置</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" @click="goBindPay(payTypeWeixin)">前往绑定</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template #item="{ item }"> |
||||
|
<div class="flex-between"> |
||||
|
<div class="left"> |
||||
|
<p class="one">{{ item.short_name }}</p> |
||||
|
<p>{{ item.account }}</p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<img v-if="selectWxpay && selectWxpay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</CustomDropdown> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<!-- 支付宝 --> |
||||
|
<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> |
||||
|
|
||||
|
<CustomDropdown slot="formDom" width="100%" @change="changeSelectAlipay" valueKey="payid" |
||||
|
:options="alipayList" :options_null="!alipayList.length"> |
||||
|
|
||||
|
<template #trigger> |
||||
|
<span v-if="selectAlipay">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span> |
||||
|
<span v-else-if="alipayList.length === 0">暂无收款账号，稍后配置</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" @click="goBindPay(payTypeAlipay)">前往绑定</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template #item="{ item }"> |
||||
|
<div class="flex-between"> |
||||
|
<div class="left"> |
||||
|
<p class="one">{{ item.short_name }}</p> |
||||
|
<p>{{ item.account }}</p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<img v-if="selectAlipay && selectAlipay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</CustomDropdown> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-form ref="formRef" v-if="siteInfo.sale_channel === '3'"> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<div class="shopadd-wrap" v-if="pddList.length"> |
||||
|
<p class="shopadd-title">店铺授权</p> |
||||
|
<div class="flex flex-between shopadd-area"> |
||||
|
<div> |
||||
|
<p>请确保使用要添加的拼多多主账号登录并授权</p> |
||||
|
<p>如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p> |
||||
|
</div> |
||||
|
<GuipButton :disabled="!addablePays[payTypePdd]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypePdd)">前往添加</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<GuipFormItem column="column" v-else> |
||||
|
<div slot="formLeft" class="form-top-icon"> |
||||
|
<img src="@/assets/register/pinduoduo.svg" style="width: 26px;height: 26px;" alt=""><span>拼多多店铺</span> |
||||
|
</div> |
||||
|
|
||||
|
<CustomDropdown slot="formDom" width="100%" @change="changeSelectPdd" valueKey="payid" |
||||
|
:options="pddList" :options_null="!pddList.length"> |
||||
|
|
||||
|
<template #trigger> |
||||
|
<span v-if="selectPdd">{{ selectPdd.short_name }} {{ selectPdd.account }}</span> |
||||
|
<span v-else-if="pddList.length === 0">暂无收款账号，稍后配置</span> |
||||
|
<span v-else>未绑定拼多多店铺</span> |
||||
|
</template> |
||||
|
|
||||
|
<template #normal> |
||||
|
<div class="flex flex-between noraml-jump"> |
||||
|
<div class="left"> |
||||
|
<b>绑定新拼多多店铺</b> |
||||
|
<p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<GuipButton type="primary" size="medium" @click="goBindPay(payTypePdd)">前往绑定</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template #item="{ item }"> |
||||
|
<div class="flex-between"> |
||||
|
<div class="left"> |
||||
|
<p class="one">{{ item.short_name }}</p> |
||||
|
<p>{{ item.account }}</p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<img v-if="selectPdd && selectPdd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</CustomDropdown> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<template v-else> |
||||
|
<el-form ref="formRef"> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<div class="shopadd-wrap" v-if="!jdList.length"> |
||||
|
<p class="shopadd-title">店铺授权</p> |
||||
|
<div class="flex flex-between shopadd-area"> |
||||
|
<div> |
||||
|
<p>请确保使用要添加的京东主账号登录并授权</p> |
||||
|
<p>如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p> |
||||
|
</div> |
||||
|
<GuipButton :disabled="!addablePays[payTypeJingdong]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypeJingdong)">前往添加</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<GuipFormItem column="column" v-else> |
||||
|
<div slot="formLeft" class="form-top-icon"> |
||||
|
<img src="@/assets/register/jingdong.svg" style="width: 26px;height: 26px;" alt=""><span>京东店铺</span> |
||||
|
</div> |
||||
|
|
||||
|
<CustomDropdown slot="formDom" width="100%" @change="changeSelectJindong" valueKey="payid" |
||||
|
:options="jdList" :options_null="!jdList.length"> |
||||
|
|
||||
|
<template #trigger> |
||||
|
<span v-if="selectJd">{{ selectJd.short_name }} {{ selectJd.account }}</span> |
||||
|
<span v-else-if="jdList.length === 0">暂无收款账号，稍后配置</span> |
||||
|
<span v-else>未绑定京东店铺</span> |
||||
|
</template> |
||||
|
|
||||
|
<template #normal> |
||||
|
<div class="flex flex-between noraml-jump"> |
||||
|
<div class="left"> |
||||
|
<b>绑定新京东店铺</b> |
||||
|
<p class="one">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<GuipButton type="primary" size="medium" @click="goBindPay(payTypeJingdong)">前往绑定</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template #item="{ item }"> |
||||
|
<div class="flex-between"> |
||||
|
<div class="left"> |
||||
|
<p class="one">{{ item.short_name }}</p> |
||||
|
<p>{{ item.account }}</p> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<img v-if="selectJd && selectJd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</CustomDropdown> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</template> |
||||
|
|
||||
|
<addPay :payType="addPayType" :visible="isShowAddPay" @update:visible="handleEvent" :authToken="authToken" |
||||
|
:taobaoAuthUrl="taobaoAuthUrl" :isExistSelfSupplys="isExistSelfSupplys" :pddAuthUrl="pddAuthUrl" :jdAuthUrl="jdAuthUrl"></addPay> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="register-btns"> |
||||
|
<GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">跳过</GuipButton> |
||||
|
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">下一步</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
|
||||
|
import GuipButton from "@/components/GuipButton.vue"; |
||||
|
import addPay from "@/components/pay/addPay.vue"; |
||||
|
import GuipFormItem from "@/components/GuipFormItem.vue"; |
||||
|
import CustomDropdown from "@/components/CustomDropdown.vue"; |
||||
|
|
||||
|
const PAY_TYPE_TAOBAO = 0; // 淘宝 |
||||
|
const PAY_TYPE_WEIXIN = 2; // 微信 |
||||
|
const PAY_TYPE_ALIPAY = 3; // 支付宝 |
||||
|
const PAY_TYPE_JINGDONG = 4; // 京东 |
||||
|
const PAY_TYPE_PDD = 11; // 拼多多 |
||||
|
|
||||
|
export default { |
||||
|
name: 'domainSet', |
||||
|
props: { |
||||
|
siteInfo: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
}, |
||||
|
isJd: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
}, |
||||
|
components: { |
||||
|
CustomDropdown, GuipFormItem, |
||||
|
addPay, |
||||
|
GuipButton |
||||
|
|
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
||||
|
|
||||
|
// 收款方式 |
||||
|
payTypeTaoBao: PAY_TYPE_TAOBAO, |
||||
|
payTypeWeixin: PAY_TYPE_WEIXIN, |
||||
|
payTypeAlipay: PAY_TYPE_ALIPAY, |
||||
|
payTypeJingdong: PAY_TYPE_JINGDONG, |
||||
|
payTypePdd: PAY_TYPE_PDD, |
||||
|
|
||||
|
taobaoList: [], |
||||
|
wxpayList: [], |
||||
|
alipayList: [], |
||||
|
pddList: [], |
||||
|
jdList: [], |
||||
|
|
||||
|
bindWxpayId: 0, |
||||
|
selectWxpay: null, |
||||
|
bindAlipayId: 10079, |
||||
|
selectAlipay: null, |
||||
|
bindTaobaoId: 0, |
||||
|
selectTaobao: null, |
||||
|
bindPddId: 0, |
||||
|
selectPdd: null, |
||||
|
bindJdId: 0, |
||||
|
selectJd: null, |
||||
|
|
||||
|
addPayType: -1, |
||||
|
isShowAddPay: false, |
||||
|
authToken: '', |
||||
|
addablePays: [], |
||||
|
|
||||
|
// 淘宝授权url |
||||
|
taobaoAuthUrl: '', |
||||
|
// 是否存在自供货 存在自供货 则不支持支付宝代收款 |
||||
|
isExistSelfSupplys: false, |
||||
|
// 拼多多授权url |
||||
|
pddAuthUrl: '', |
||||
|
// 拼多多店铺名称 |
||||
|
pdd_shop_name: '', |
||||
|
// 京东授权url |
||||
|
jdAuthUrl: '', |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if(Object.keys(this.siteInfo).length === 0) { |
||||
|
this.$message.error('未知错误'); |
||||
|
this.$emit('handelStep', 1) |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
this.getSitePayIndex() |
||||
|
this.getPayList() |
||||
|
this.getAddablePays() |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 获取支付列表 |
||||
|
getSitePayIndex() { |
||||
|
this.$http('POST', '/agentnew/ajax_get_site_pay_index', { |
||||
|
uid: this.siteInfo.uid |
||||
|
},{ |
||||
|
headers:{ |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
if(Object.keys(response.data).length>0){ |
||||
|
console.log(response.data) |
||||
|
this.$nextTick(() => { |
||||
|
if (response.data[this.payTypeWeixin]) { |
||||
|
this.bindWxpayId = response.data[this.payTypeWeixin].payid; |
||||
|
this.selectWxpay = response.data[this.payTypeWeixin]; |
||||
|
} |
||||
|
if (response.data[this.payTypeAlipay]) { |
||||
|
this.bindAlipayId = response.data[this.payTypeAlipay].payid; |
||||
|
this.selectAlipay = response.data[this.payTypeAlipay]; |
||||
|
} |
||||
|
if (response.data[this.payTypeTaoBao]) { |
||||
|
this.bindTaobaoId = response.data[this.payTypeTaoBao].payid; |
||||
|
this.selectTaobao = response.data[this.payTypeTaoBao]; |
||||
|
} |
||||
|
if (response.data[this.payTypePdd]) { |
||||
|
this.bindPddId = response.data[this.payTypePdd].payid; |
||||
|
this.selectPdd = response.data[this.payTypePdd]; |
||||
|
} |
||||
|
if (response.data[this.payTypeJingdong]) { |
||||
|
this.bindJdId = response.data[this.payTypeJingdong].payid; |
||||
|
this.selectJd = response.data[this.payTypeJingdong]; |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
// 获取支付列表 |
||||
|
getPayList() { |
||||
|
this.$http('POST', '/agentnew/ajax_get_pay_list', {},{ |
||||
|
headers:{ |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
if ( |
||||
|
response.data && |
||||
|
response.data.paylist && |
||||
|
response.data.paylist[this.payTypeWeixin] && |
||||
|
response.data.paylist[this.payTypeWeixin].length > 0 |
||||
|
) { |
||||
|
this.wxpayList = response.data.paylist[this.payTypeWeixin] |
||||
|
} |
||||
|
if ( |
||||
|
response.data && |
||||
|
response.data.paylist && |
||||
|
response.data.paylist[this.payTypeAlipay] && |
||||
|
response.data.paylist[this.payTypeAlipay].length > 0 |
||||
|
) { |
||||
|
this.alipayList = response.data.paylist[this.payTypeAlipay] |
||||
|
} |
||||
|
if ( |
||||
|
response.data && |
||||
|
response.data.paylist && |
||||
|
response.data.paylist[this.payTypeTaoBao] && |
||||
|
response.data.paylist[this.payTypeTaoBao].length > 0 |
||||
|
) { |
||||
|
this.taobaoList = response.data.paylist[this.payTypeTaoBao] |
||||
|
} |
||||
|
if ( |
||||
|
response.data && |
||||
|
response.data.paylist && |
||||
|
response.data.paylist[this.payTypePdd] && |
||||
|
response.data.paylist[this.payTypePdd].length > 0 |
||||
|
) { |
||||
|
this.pddList = response.data.paylist[this.payTypePdd] |
||||
|
} |
||||
|
if ( |
||||
|
response.data && |
||||
|
response.data.paylist && |
||||
|
response.data.paylist[this.payTypeJingdong] && |
||||
|
response.data.paylist[this.payTypeJingdong].length > 0 |
||||
|
) { |
||||
|
this.jdList = response.data.paylist[this.payTypeJingdong] |
||||
|
} |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
// 获取可添加的收款方式 |
||||
|
getAddablePays() { |
||||
|
this.$http('POST', '/agentnew/ajax_get_addable_pays', {},{ |
||||
|
headers:{ |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
this.addablePays = response.data |
||||
|
if(response.data[PAY_TYPE_TAOBAO]) { |
||||
|
this.taobaoAuthUrl = response.data[PAY_TYPE_TAOBAO].authurl |
||||
|
} |
||||
|
|
||||
|
if (response.data[PAY_TYPE_ALIPAY]) { |
||||
|
this.isExistSelfSupplys = response.data[PAY_TYPE_ALIPAY].is_exist_self_supplys |
||||
|
} |
||||
|
|
||||
|
if (response.data[PAY_TYPE_PDD]) { |
||||
|
this.pddAuthUrl = response.data[PAY_TYPE_PDD].authurl |
||||
|
} |
||||
|
|
||||
|
if (response.data[PAY_TYPE_JINGDONG]) { |
||||
|
this.jdAuthUrl = response.data[PAY_TYPE_JINGDONG].authurl |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
changeSelectWeixin(item) { |
||||
|
this.bindWxpayId = item.payid; |
||||
|
this.selectWxpay = item; |
||||
|
console.log(this.bindWxpayId, 'bindWxpayId'); |
||||
|
console.log(this.selectWxpay, 'selectWxpay'); |
||||
|
|
||||
|
this.selectedItem = { ...item }; |
||||
|
console.log(this.selectedItem, 'this.selectedItem===='); |
||||
|
}, |
||||
|
changeSelectAlipay(item) { |
||||
|
this.bindAlipayId = item.payid; |
||||
|
this.selectAlipay = item; |
||||
|
console.log(this.bindWxpayId, 'bindWxpayId'); |
||||
|
|
||||
|
this.selectedItem = { ...item }; |
||||
|
console.log(this.selectedItem, 'this.selectedItem===='); |
||||
|
}, |
||||
|
changeSelectTaobao(item) { |
||||
|
this.bindTaobaoId = item.payid; |
||||
|
this.selectTaobao = item; |
||||
|
|
||||
|
this.selectedItem = { ...item }; |
||||
|
}, |
||||
|
changeSelectJindong(item) { |
||||
|
this.bindJdId = item.payid; |
||||
|
this.selectJd = item; |
||||
|
|
||||
|
this.selectedItem = { ...item }; |
||||
|
}, |
||||
|
changeSelectPdd(item) { |
||||
|
this.bindPddId = item.payid; |
||||
|
this.selectPdd = item; |
||||
|
|
||||
|
this.selectedItem = { ...item }; |
||||
|
}, |
||||
|
goBindPay(type) { |
||||
|
this.addPayType = type; |
||||
|
this.isShowAddPay = true; |
||||
|
this.authToken = this.token; |
||||
|
}, |
||||
|
handleEvent() { |
||||
|
this.getPayList() |
||||
|
this.getAddablePays() |
||||
|
}, |
||||
|
jumpStep(){ |
||||
|
this.$emit('handelStep', 3) |
||||
|
}, |
||||
|
nextStep() { |
||||
|
var data = { |
||||
|
uid: this.siteInfo.uid, |
||||
|
open_processs: 4, |
||||
|
pay_config: { |
||||
|
0: this.bindTaobaoId, |
||||
|
2: this.bindWxpayId, |
||||
|
3: this.bindAlipayId, |
||||
|
4: this.bindJdId, |
||||
|
11: this.bindPddId, |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
this.$http('POST', '/agentnew/ajax_update_site_pay', data, { |
||||
|
headers: { |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
if (response.status) { |
||||
|
this.$emit('handelStep', 3) |
||||
|
return true; |
||||
|
} |
||||
|
this.$Message.error(response.info); |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.shopadd-wrap{ |
||||
|
.shopadd-title{ |
||||
|
color: #1E2226; |
||||
|
letter-spacing: 0.08em; |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 12px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
.shopadd-area{ |
||||
|
width: 510px; |
||||
|
padding: 24px; |
||||
|
border-radius: 4px; |
||||
|
background: #FAFAFA; |
||||
|
div{ |
||||
|
letter-spacing: 0.08em; |
||||
|
font-size: 12px; |
||||
|
text-align: left; |
||||
|
color: #626573; |
||||
|
|
||||
|
p:first-child{ |
||||
|
font-size: 14px; |
||||
|
color: #1E2226; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,295 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="step3-wrap min-flex"> |
||||
|
<div class="step3-top flex-common"> |
||||
|
<h3 class="flex gap8"><img src="@/assets/menu/littleTitleIcon1.svg" alt="">服务列表</h3> |
||||
|
<div class="btngroup"> |
||||
|
<GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(1)">添加查重服务</GuipButton> |
||||
|
<GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(3)">添加写作辅助</GuipButton> |
||||
|
<GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(2)">添加AIGC</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="flex-common table-wrap"> |
||||
|
<el-form> |
||||
|
<GuipTable :border="true" :tableData="tableData" :loading="tableLoading"> |
||||
|
<el-table-column prop="name" fixed="left" label="检测服务" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex nowrap "> |
||||
|
<div :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助' |
||||
|
}}</div> |
||||
|
<div class="">{{ scope.row.name }}</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="stock" label="今日供货价" min-width="138"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex cell_render"> |
||||
|
<span>¥{{ scope.row.stock }}/篇</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="price" label="售价" width="300"> |
||||
|
<template #default="{ row,$index }"> |
||||
|
<el-popover v-model="row.pricePopoverVisible" :ref="`pricePopover-${row.id}`" |
||||
|
placement="bottom" trigger="manual" :append-to-body="false" :visible-arrow="true" |
||||
|
popper-class="custom-popover" @show="popshow" > |
||||
|
<div style="text-align: center"> |
||||
|
<GuipInput ref="GuipInput" v-if="!row.word" width="252px" v-model="row.edit_price" label="售价" |
||||
|
placeholder="请输入售价" unit="元"> |
||||
|
</GuipInput> |
||||
|
<div v-else class="flex"> |
||||
|
<GuipInput ref="GuipInput" width="133px" v-model="row.edit_price" label="售价" placeholder="请输入售价" |
||||
|
unit="元"> |
||||
|
</GuipInput> |
||||
|
<span class="shortspan">/</span> |
||||
|
<GuipInput ref="GuipInput" width="133px" v-model="row.edit_word" placeholder="请输入字符" unit="字符"> |
||||
|
</GuipInput> |
||||
|
</div> |
||||
|
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;"> |
||||
|
<GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton> |
||||
|
<GuipButton type="primary" @click="savePrice(row, 'price')" size="medium">确定</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<template #reference> |
||||
|
<div class="flex cell_render" @click="handlePriceClick(row,$index,'price')"> |
||||
|
<span v-if="row.word" :key="random()">¥{{ row.price }}/{{ row.word }}字</span> |
||||
|
<span v-else :key="random()">¥{{ row.price }}/篇</span> |
||||
|
<span>测试用一下</span> |
||||
|
<span>随便写的</span> |
||||
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'" |
||||
|
:hoverColor="'#006AFF'" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="num" label="排序" min-width="95"> |
||||
|
<template #default="{ row,$index }"> |
||||
|
<!-- <el-tooltip :manual="true" v-model="row.numPopoverVisible" placement="top" effect="light"> |
||||
|
<template #content> |
||||
|
<div style="text-align: center"> |
||||
|
<GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" placeholder="请输入数字"> |
||||
|
</GuipInput> |
||||
|
<p |
||||
|
style="width: 252px;margin-left: 40px;text-align: right;color: #8A9099;letter-spacing: 0.08em;"> |
||||
|
输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p> |
||||
|
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;"> |
||||
|
<GuipButton size="medium" @click="cancelEdit(row, 'num')">取消</GuipButton> |
||||
|
<GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div class="flex cell_render" @click="row.numPopoverVisible = true"> |
||||
|
<span>{{ row.num }}</span> |
||||
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'" |
||||
|
:hoverColor="'#006AFF'" /> |
||||
|
</div> |
||||
|
</el-tooltip> --> |
||||
|
<el-popover v-model="row.numPopoverVisible" :ref="`popover-${row.id}`" |
||||
|
placement="bottom" trigger="manual" :append-to-body="false" :visible-arrow="true" |
||||
|
popper-class="custom-popover" @show="popshow" > |
||||
|
<!-- <el-popover v-model="row.numPopoverVisible" placement="top" class="single-popover" trigger="manual" :append-to-body="false" :ref="`popover-${row.id}`"> --> |
||||
|
<div style="text-align: center" :visible-arrow="true"> |
||||
|
<GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" placeholder="请输入数字"> |
||||
|
</GuipInput> |
||||
|
<p |
||||
|
style="width: 252px;margin-left: 40px;text-align: right;color: #8A9099;letter-spacing: 0.08em;"> |
||||
|
输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p> |
||||
|
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;"> |
||||
|
<GuipButton size="medium" @click="cancelEdit(row, 'num')">取消</GuipButton> |
||||
|
<GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span slot="reference" @click="handlePriceClick(row,$index,'num')"> |
||||
|
<div class="flex cell_render"> |
||||
|
<GuipToolTip :content="row.num"> |
||||
|
<span class="nowrap">{{ row.num }}</span> |
||||
|
</GuipToolTip> |
||||
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'" |
||||
|
:hoverColor="'#006AFF'" /> |
||||
|
</div> |
||||
|
</span> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="stock" label="收款方式" min-width="258"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex cell_render"> |
||||
|
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')"> |
||||
|
{{ scope.row.payment == '0' ? '默认站点支付' : '自定义支付' }}</span> |
||||
|
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" |
||||
|
:color="'#8A9099'" :hoverColor="'#006AFF'" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="stock" fixed="right" label="上首页" min-width="160"> |
||||
|
<template slot-scope="scope"> |
||||
|
<GuipSwitch :modelValue="scope.row.homeFlag"> |
||||
|
</GuipSwitch> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" fixed="right" min-width="150px"> |
||||
|
<div class="flex"> |
||||
|
<el-button type="text">编辑</el-button> |
||||
|
<el-button type="text">删除</el-button> |
||||
|
</div> |
||||
|
</el-table-column> |
||||
|
</GuipTable> |
||||
|
|
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
||||
|
:total="tableData.length"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="register-btns"> |
||||
|
<GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">跳过</GuipButton> |
||||
|
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">完成</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
|
||||
|
import GuipButton from "@/components/GuipButton.vue"; |
||||
|
import GuipInput from "@/components/GuipInput.vue"; |
||||
|
import GuipToolTip from "@/components/GuipToolTip.vue"; |
||||
|
import SvgIcon from "@/components/SvgIcon.vue"; |
||||
|
import GuipSwitch from "@/components/GuipSwitch.vue"; |
||||
|
import GuipTable from "@/components/GuipTable.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'domainSet', |
||||
|
props: { |
||||
|
siteInfo: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
GuipTable, GuipSwitch, SvgIcon, GuipToolTip, GuipInput, |
||||
|
GuipButton |
||||
|
|
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
||||
|
tableData:[], |
||||
|
tableLoading:false, |
||||
|
currentPage: 1, //当前页 |
||||
|
pageSize: 2, //每页的容量 |
||||
|
total: 0, //列表总数 |
||||
|
// 服务列表url |
||||
|
serviceAddUrl: '/agent/siteAddService', |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if(Object.keys(this.siteInfo).length === 0) { |
||||
|
this.$message.error('未知错误'); |
||||
|
this.$emit('handelStep', 1) |
||||
|
return false; |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
jumpStep(){ |
||||
|
this.$emit('handelStep', 4) |
||||
|
}, |
||||
|
nextStep(){ |
||||
|
//保存数据 |
||||
|
|
||||
|
this.$emit('handelStep', 4) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
}, |
||||
|
serviceAdd(prodid){ |
||||
|
this.$router.push(this.serviceAddUrl + '?uid=' + this.siteInfo.uid + '&prodid=' + prodid) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
handleEvent(data){ |
||||
|
this.newDomain = data |
||||
|
}, |
||||
|
saveConfirm() { |
||||
|
let obj = {} |
||||
|
obj.uid = this.info.uid |
||||
|
obj.type = this.info.type |
||||
|
if(this.domainFrom === '1'){ |
||||
|
if(!this.newDomain.prefix || !this.newDomain.domain) return false |
||||
|
obj.domain = this.newDomain.prefix + this.newDomain.domain |
||||
|
}else{ |
||||
|
obj.domain = '' |
||||
|
} |
||||
|
|
||||
|
const that = this |
||||
|
this.$http('POST', '/agentnew/ajax_update_service_domain', obj,{ |
||||
|
headers:{ |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
if(response.status){ |
||||
|
that.$message.success('保存成功'); |
||||
|
|
||||
|
//替换域名 |
||||
|
const protocol = new URL(that.info.domain).protocol; |
||||
|
if(this.domainFrom === '1'){ |
||||
|
that.info.domain = protocol + "//" +obj.domain; |
||||
|
that.info.ser_domain = protocol + "//" +obj.domain; |
||||
|
}else{ |
||||
|
that.info.domain = that.info.site_domain; |
||||
|
that.info.ser_domain = ''; |
||||
|
} |
||||
|
|
||||
|
that.$emit('saveEvent', that.info) |
||||
|
return true; |
||||
|
} |
||||
|
that.$message.error(response.info); |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.step3-wrap { |
||||
|
flex: 1; |
||||
|
|
||||
|
.step3-top { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 0; |
||||
|
align-items: end; |
||||
|
h3{ |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.btngroup { |
||||
|
display: flex; |
||||
|
height: 33px; |
||||
|
|
||||
|
button { |
||||
|
font-size: 12px; |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,290 @@ |
|||||
|
<template> |
||||
|
<div class="register-wrap min-width"> |
||||
|
<!-- 顶部提示语 --> |
||||
|
<div class="register-top" v-if="showAlert"> |
||||
|
<div class="register-top-left"> |
||||
|
<img src="../../assets/register/register-top-left.svg" alt=""> |
||||
|
<span>设置完这些信息就可以正式售卖啦，也可以选择跳过，先进入后台看看哦 </span> |
||||
|
</div> |
||||
|
<div class="register-top-right"> |
||||
|
<img src="../../assets/register/register-top-close.svg" alt="" @click="hideAlert"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 步骤条 --> |
||||
|
<div class="sticky"> |
||||
|
<div style="width: 100%;background: #fff;"> |
||||
|
<div class="step-wrap min-flex"> |
||||
|
<div :class="['step-item', activeStep === 1 ? 'checked' : 'success']" @click="goCurActiveStep(1)"> |
||||
|
<img v-if="activeStep === 1" src="../../assets/register/step1_ing.svg" alt="" class="custom-icon"> |
||||
|
<img v-if="activeStep > 1" src="../../assets/register/step_success.svg" alt="" class="custom-icon"> |
||||
|
<span>基础信息</span> |
||||
|
</div> |
||||
|
<div :class="['step-line', activeStep > 1 ? 'step_active-line' : '']"></div> |
||||
|
<div :class="['step-item', activeStep === 2 ? 'checked' : activeStep > 2 ? 'success' : '']" |
||||
|
@click="goCurActiveStep(2)"> |
||||
|
<img v-if="activeStep === 1" src="../../assets/register/step2_null.svg" alt="" class="custom-icon"> |
||||
|
<img v-if="activeStep === 2" src="../../assets/register/step2_ing.svg" alt="" class="custom-icon"> |
||||
|
<img v-if="activeStep > 2" src="../../assets/register/step_success.svg" alt="" class="custom-icon"> |
||||
|
<span>收款方式</span> |
||||
|
</div> |
||||
|
<div :class="['step-line', activeStep > 2 ? 'step_active-line' : '']"></div> |
||||
|
<div :class="['step-item', activeStep === 3 ? 'checked' : activeStep > 2 ? 'success' : '']" |
||||
|
@click="goCurActiveStep(3)"> |
||||
|
<img v-if="activeStep !== 3" src="../../assets/register/step3_null.svg" alt="" class="custom-icon"> |
||||
|
<img v-if="activeStep === 3" src="../../assets/register/step3_ing.svg" alt="" class="custom-icon"> |
||||
|
<!-- <img v-if="activeStep >2" src="@/assets/register/step_success.svg" alt=""> --> |
||||
|
<span>添加服务</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="width: 100%;background: #fff;"> |
||||
|
<div class="step-desc min-flex"> |
||||
|
<span>{{ renderStepDesc('1') }}</span> |
||||
|
<span>{{ renderStepDesc('2') }}</span> |
||||
|
<span>{{ renderStepDesc('3') }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<p class="pageDesc min-flex">搭建售卖渠道</p> |
||||
|
|
||||
|
<!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 --> |
||||
|
<!-- 默认页面展示 的初始组件 Franchise--> |
||||
|
<component :is="process" :siteInfo="siteInfo" ref="dynamicComponent" @handelSiteInfo="handelSiteInfo" @handelStep="handelStep"/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
import step1 from '@/components/site/addSiteStep/step1.vue' |
||||
|
import step2 from '@/components/site/addSiteStep/step2.vue' |
||||
|
import step3 from '@/components/site/addSiteStep/step3.vue' |
||||
|
|
||||
|
export default { |
||||
|
// 服务个性化设置 |
||||
|
name: 'siteAdd', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
step1, |
||||
|
step2, |
||||
|
step3, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// AUTH |
||||
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
||||
|
siteInfo:{}, |
||||
|
showAlert:true, |
||||
|
activeStep: '',//当前步骤条 |
||||
|
process: '', //进度默认为站点开通 |
||||
|
prodid: '',//要添加的服务类型 |
||||
|
stepDesc: { |
||||
|
'1': '填写站点信息、选择模板样式', |
||||
|
'2': '配置收款方式', |
||||
|
'3': '想卖哪些东西？来选选吧', |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
|
watch:{ |
||||
|
activeStep: { |
||||
|
immediate: true, |
||||
|
handler(newVal) { |
||||
|
if(newVal){ |
||||
|
this.process = 'step'+newVal |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getNotFinishedSite() |
||||
|
}, |
||||
|
methods: { |
||||
|
getNotFinishedSite() { |
||||
|
const that = this |
||||
|
that.payList = [] |
||||
|
this.$http('POST', '/agentnew/ajax_get_not_finished_site', {},{ |
||||
|
headers:{ |
||||
|
'Auth': this.token |
||||
|
} |
||||
|
}).then(response => { |
||||
|
if(response.status){ |
||||
|
that.$nextTick(() => { |
||||
|
const unsiteInfo = response.data |
||||
|
if(Object.keys(unsiteInfo).length>0){ |
||||
|
that.siteInfo = unsiteInfo |
||||
|
if(that.siteInfo.open_process === '3'){ |
||||
|
if(that.siteInfo.sale_channel === '2'){ |
||||
|
that.activeStep = 3 //自用不出售 不设置收款方式 |
||||
|
return true |
||||
|
}else{ |
||||
|
that.activeStep = 2 //站点信息已存在 设置收款方式 |
||||
|
return true |
||||
|
} |
||||
|
}else if(that.siteInfo.open_process === '4'){ |
||||
|
that.activeStep = 3 //收款方式已设置 添加售卖服务 |
||||
|
return true |
||||
|
} |
||||
|
} |
||||
|
that.activeStep = 1 |
||||
|
}) |
||||
|
return true |
||||
|
} |
||||
|
that.$message.error(response.info); |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
hideAlert(){ |
||||
|
this.showAlert = false |
||||
|
}, |
||||
|
goCurActiveStep(step) { |
||||
|
if (step < this.activeStep) { |
||||
|
this.activeStep = step |
||||
|
} |
||||
|
}, |
||||
|
renderStepDesc(step) { |
||||
|
return this.stepDesc[step] |
||||
|
}, |
||||
|
handelSiteInfo(siteInfo){ |
||||
|
this.siteInfo = siteInfo |
||||
|
}, |
||||
|
handelStep(step){ |
||||
|
if(step === 4){ |
||||
|
//跳转主页面 |
||||
|
this.$message.success('保存成功'); |
||||
|
return true; |
||||
|
} |
||||
|
|
||||
|
this.activeStep = step |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
.register-btns { |
||||
|
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); |
||||
|
z-index: 999; |
||||
|
button:nth-child(1) { |
||||
|
margin-right: 56px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.register-wrap { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
|
||||
|
.custom-icon { |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
} |
||||
|
|
||||
|
.register-top { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
// height: 72px; |
||||
|
align-items: center; |
||||
|
padding: 20px 40px 20px 110px; |
||||
|
background: linear-gradient(270deg, #F6EEF7 3%, #EDE9FB 97%); |
||||
|
color: #23242B; |
||||
|
letter-spacing: 0.08em; |
||||
|
line-height: 32px; |
||||
|
|
||||
|
.register-top-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.register-top-left img { |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pageDesc { |
||||
|
/* 自动布局 */ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 24px 36px; |
||||
|
line-height: 32px; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.06em; |
||||
|
color: #1E2226; |
||||
|
text-align: left; |
||||
|
width: calc(84.75% - 72px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step-wrap { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 24px 0 0 0; |
||||
|
|
||||
|
.step-item { |
||||
|
align-items: center; |
||||
|
display: flex; |
||||
|
|
||||
|
span { |
||||
|
color: #1E2226; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
|
||||
|
.custom-icon { |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.checked span { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #006AFF !important; |
||||
|
transition: all .3s; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.success span { |
||||
|
font-size: 16px; |
||||
|
font-weight: normal; |
||||
|
color: #006AFF !important; |
||||
|
transition: all .3s; |
||||
|
} |
||||
|
|
||||
|
.step-line { |
||||
|
flex: 1; |
||||
|
margin: 0 32px; |
||||
|
border-bottom: 1px solid #DFE2E6; |
||||
|
} |
||||
|
|
||||
|
.step_active-line { |
||||
|
transition: all .3s; |
||||
|
border-bottom: 1px solid #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step-desc { |
||||
|
padding-top: 6px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 24px; |
||||
|
color: #8A9099; |
||||
|
|
||||
|
span { |
||||
|
padding-left: 36px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue