zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://gitea.intra.yunpaper.com/zhangqi/kuailelunwen_new_houtai

pull/88/head
rainbro 4 days ago
parent
82d1c6470d 370301e605
commit
f1a56688a7
7 changed files with 1519 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/components/PromptText.vue
  2. 318
      src/components/site/addSiteStep/step1.vue
  3. 601
      src/components/site/addSiteStep/step2.vue
  4. 295
      src/components/site/addSiteStep/step3.vue
  5. 15
      src/router/index.js
  6. 290
      src/views/agent/siteAdd.vue
  7. 2
      src/views/agent/siteList.vue

1
src/components/PromptText.vue
View File

@ -60,6 +60,7 @@ export default {
.prompt-text{
padding: 8px 13px;
border-radius: 4px;
text-align: justify;
}
.flex-text{
display: flex;

318
src/components/site/addSiteStep/step1.vue
View File

@ -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>

601
src/components/site/addSiteStep/step2.vue
View File

@ -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>

295
src/components/site/addSiteStep/step3.vue
View File

@ -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>

15
src/router/index.js
View File

@ -8,7 +8,7 @@ import HomeView from '../views/HomeView.vue';
Vue.use(VueRouter)
// 侧边导航黑名单
const blackSliderList = [
'/register', '/franchise','/agent/siteServiceList', '/agent/siteTemplate'
'/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate'
];
// 一级路由
let first_child_router = []
@ -17,7 +17,7 @@ const blackHeaderList = [
'/franchise'
];
const blackFooterList = [
'/', '/franchise','/agent/payInfoSetting','/agent/siteServiceEdit'
'/', '/franchise', '/register', '/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit'
];
// const whiteSlideList = ['/', '/ui',
// '/agent/siteList',
@ -117,6 +117,17 @@ const routes = [{
}
},
{
path: '/agent/siteAdd',
name: '添加站点',
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteAdd.vue'),
meta: {
title: '添加站点',
hideBreadcrumb: true, // 一级页面不显示面包屑
}
},
{
path: '/agent/siteServiceList',
name: '服务列表',
isFirst: true,

290
src/views/agent/siteAdd.vue
View File

@ -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>

2
src/views/agent/siteList.vue
View File

@ -145,7 +145,7 @@ export default {
// 站点设置url
siteSettingUrl: '/agent/siteBaseSetting',
// 新增站点url
addNewSiteUrl: '/ui',
addNewSiteUrl: '/agent/siteAdd',
popoverFlag:false,
// 站点分组名称
selected_group: '',

Write Preview
Loading…
Cancel
Save