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.
1668 lines
56 KiB
1668 lines
56 KiB
<template>
|
|
<div class="register-wrap min-width">
|
|
<!-- 顶部提示语 -->
|
|
<div class="register-top">
|
|
<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="">
|
|
</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>
|
|
<!-- 步骤条 -->
|
|
<!-- <el-steps :active="activeStep" finish-status="success">
|
|
<el-step v-for="(step, index) in steps" :key="index" :status="getStepStatus(index)">
|
|
<template #icon>
|
|
<div class="custom-icon">
|
|
<img v-if="isStepFinished(index)" :src="step.finish" alt="checked"
|
|
style="width: 24px; height: 24px" />
|
|
<img v-else-if="isStepActive(index)" :src="step.checked" alt="editing" style="width: 24px; height: 24px" />
|
|
<img v-else :src="step.wait" alt="waiting" style="width: 24px; height: 24px" />
|
|
</div>
|
|
</template>
|
|
|
|
<template #title>
|
|
<div class="step-title">
|
|
<span>{{ step.title }}</span>
|
|
<div class="step-status">
|
|
{{ getStepStatusText(index) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-step>
|
|
</el-steps> -->
|
|
|
|
<p class="pageDesc min-flex">搭建售卖渠道</p>
|
|
|
|
<div class="step1-wrap min-flex" v-if="activeStep == 1">
|
|
|
|
<div class="step1-top1 flex-common">
|
|
<h3>站点信息</h3>
|
|
<el-form :model="form1" ref="formRef">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<GuipFormItem column="column" class="mb24">
|
|
<!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
|
|
<div slot="formLeft">站点简称
|
|
</div>
|
|
<div slot="formRight" class="desc">一个站点对应一个销售渠道，定义好名字好区分
|
|
</div>
|
|
<GuipInput slot="formDom" ref="GuipInput" :maxlength="10" :showWordLimit="true"
|
|
placeholder="仅自己区分站点销售渠道，客户看不到" />
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column">
|
|
<div slot="formLeft">销售渠道
|
|
</div>
|
|
<span slot="formRight">适用于搜索推广，如360、百度、微信售卖等渠道</span>
|
|
<GuipRadio slot="formDom" v-model="form1.distribution_channel" :options="distribution_channel_options"
|
|
prop="language" @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="form1.language" :options="domain_source" prop="language"
|
|
@change="radioChange" />
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column">
|
|
<div slot="formLeft">域名设置
|
|
</div>
|
|
<GuipInput slot="formDom" ref="GuipInput" @click="yumingInput" placeholder="仅支持数字、字母">
|
|
<span slot="appendshow">.chachongz.com</span>
|
|
</GuipInput>
|
|
</GuipFormItem>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
<div class="step1-top2 flex-common">
|
|
<h3>模板选择</h3>
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<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="step2-wrap min-flex" v-if="activeStep == 2 && distribution_channel > 0">
|
|
<div class="step1-top flex-common">
|
|
<h3>店铺收款</h3>
|
|
<el-form :model="form2" ref="formRef">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<!--电商渠道-仅支持店铺首款 -->
|
|
<GuipFormItem column="column">
|
|
<div slot="formLeft">店铺渠道
|
|
</div>
|
|
<GuipRadio slot="formDom" v-model="form2.store_channel" :options="store_channel" prop="language"
|
|
@change="radioChange_store" />
|
|
</GuipFormItem>
|
|
|
|
<GuipFormItem column="column" v-if="has_store < 1">
|
|
<div slot="formLeft">店铺授权
|
|
</div>
|
|
<div slot="formDom" class="first_register">
|
|
<div class="first_reg_left">
|
|
<b>请确保使用要添加的淘宝主账号登录并授权</b>
|
|
<p> 如未购买"快乐帮手"服务或已过期，会跳转到购买服务页面</p>
|
|
</div>
|
|
<div class="first_reg_right">
|
|
<GuipButton type="primary" size="medium">前往授权</GuipButton>
|
|
</div>
|
|
</div>
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column" v-else>
|
|
<div slot="formLeft">店铺绑定
|
|
</div>
|
|
<div slot="formRight" class="desc">可选择已有店铺，或授权新店铺
|
|
</div>
|
|
<div slot="formDom">
|
|
<CustomDropdown v-model="selectedValue1" :options="options1" @change="changeSelect" placeholder="请选择">
|
|
<!-- 自定义触发按钮 -->
|
|
<template #trigger>
|
|
<span v-if="selectedItem" style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
|
|
selectedItem.desc }}</span>
|
|
<span v-else>请选择</span>
|
|
</template>
|
|
<template #normal>
|
|
<div class="flex flex-between noraml-jump">
|
|
<div class="left">
|
|
<b>授权新店铺</b>
|
|
<p class="one">请确保使用要添加的淘宝主账号登录并授权</p>
|
|
<p>如未购买"快乐帮手"服务或已过期，会跳转到购买服务页面</p>
|
|
</div>
|
|
<div class="right">
|
|
<GuipButton type="primary" size="medium">点击授权</GuipButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 自定义下拉选项 -->
|
|
<template #item="{ item }">
|
|
<div class="flex-between">
|
|
<div class="left">
|
|
<p class="one">{{ item.label }}</p>
|
|
<p>{{ item.desc }}</p>
|
|
</div>
|
|
<div class="right">
|
|
<img v-if="selectedItem.value == item.value" src="../assets/register/drop-selected.svg"
|
|
alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CustomDropdown>
|
|
</div>
|
|
</GuipFormItem>
|
|
</div>
|
|
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<!-- 非电商 -->
|
|
<div class="step2-wrap min-flex" v-if="activeStep == 2 && distribution_channel < 1">
|
|
<div class="step2-top flex-common">
|
|
<h3>店铺收款</h3>
|
|
<el-form :model="form3" ref="formRef">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<GuipFormItem column="column">
|
|
<div slot="formLeft" class="form-top-icon">
|
|
<img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;" alt=""><span>微信收款</span>
|
|
</div>
|
|
<!-- <GuipSelect slot="formDom" v-model="form3.weixin_pay" prop="weixin_pay" :options="options_weixin"
|
|
placeholder="未绑定微信收款" /> -->
|
|
<CustomDropdown slot="formDom" v-model="form3.weixin_pay" :options="options_weixin"
|
|
@change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
|
|
@changeNormal="changeNormalWeixin">
|
|
<!-- 自定义触发按钮 -->
|
|
<template #trigger>
|
|
<span v-if="selectedItemWeixin" style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
|
|
select_placeholder_weixin ? select_placeholder_weixin :
|
|
selectedItemWeixin.desc }}</span>
|
|
<span v-else>请选择</span>
|
|
</template>
|
|
<template #normal>
|
|
<div class="flex flex-between noraml-jump">
|
|
<div class="left">
|
|
<b>绑定新微信收款</b>
|
|
<p class="one">需要使用您公司的微信支付</p>
|
|
<p>需在微信商户平台-产品中心开通Native支付</p>
|
|
</div>
|
|
<div class="right">
|
|
<GuipButton type="primary" size="medium">前往绑定</GuipButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 自定义下拉选项 -->
|
|
<template #item="{ item }">
|
|
<div class="flex-between">
|
|
<div class="left">
|
|
<p class="one">{{ item.label }}</p>
|
|
<p>{{ item.desc }}</p>
|
|
</div>
|
|
<div class="right">
|
|
<img v-if="selectedItem.value == item.value" src="../assets/register/drop-selected.svg" alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- <template #options_null>
|
|
<div class="flex-between dropdown-item" >
|
|
<div class="left">
|
|
<p class="one">暂无收款账号</p>
|
|
<p>暂时没有收款账号，我想稍后配置</p>
|
|
</div>
|
|
<div class="right">
|
|
<img 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>
|
|
<GuipSelect slot="formDom" v-model="form3.zhifubao_pay" prop="zhifubao_pay" :options="options_zhifubao"
|
|
placeholder="未绑定支付宝收款" />
|
|
<!-- <CustomDropdown slot="formDom" v-model="form3.weixin_pay" :options="options_weixin"
|
|
@change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
|
|
@changeNormal="changeNormalWeixin">
|
|
<template #trigger>
|
|
<span v-if="selectedItemWeixin" style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
|
|
select_placeholder_weixin ? select_placeholder_weixin :
|
|
selectedItemWeixin.desc }}</span>
|
|
<span v-else>请选择</span>
|
|
</template>
|
|
<template #normal>
|
|
<div class="flex flex-between noraml-jump">
|
|
<div class="left">
|
|
<b>绑定新微信收款</b>
|
|
<p class="one">需要使用您公司的微信支付</p>
|
|
<p>需在微信商户平台-产品中心开通Native支付</p>
|
|
</div>
|
|
<div class="right">
|
|
<GuipButton type="primary" size="medium">前往绑定</GuipButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #item="{ item }">
|
|
<div class="flex-between">
|
|
<div class="left">
|
|
<p class="one">{{ item.label }}</p>
|
|
<p>{{ item.desc }}</p>
|
|
</div>
|
|
<div class="right">
|
|
<img v-if="selectedItem.value == item.value" src="../assets/register/drop-selected.svg" alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CustomDropdown> -->
|
|
</GuipFormItem>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="step3-wrap min-flex" v-if="activeStep == 3">
|
|
<div class="step3-top flex-common">
|
|
<h3>服务列表</h3>
|
|
<div class="btngroup">
|
|
<GuipButton type="normal" size="mmedium" @click="showDomainModal">添加查重服务</GuipButton>
|
|
<GuipButton type="normal" size="mmedium">添加写作辅助</GuipButton>
|
|
<GuipButton type="normal" size="mmedium">添加AIGC</GuipButton>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex-common table-wrap">
|
|
<el-form>
|
|
<el-table :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
|
|
:key="random()">
|
|
<!-- 其他列 -->
|
|
<el-table-column prop="name" label="检测服务" width="210">
|
|
<template slot-scope="scope">
|
|
<div class="flex">
|
|
<span :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助'
|
|
}}</span>
|
|
<span class="">{{ scope.row.name }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="stock" label="今日供货价">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render">
|
|
<span>¥{{ scope.row.stock }}/篇</span>
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<!-- 价格列 -->
|
|
<el-table-column label="售价">
|
|
<template v-slot="{ row, $index }">
|
|
<el-popover v-model="row.price_popover" placement="top" trigger="manual" :ref="`popover-${$index}`"
|
|
@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>
|
|
<!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
|
|
<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>
|
|
<!-- 触发弹框的按钮 -->
|
|
<span slot="reference" @click="handlePriceClick(row, $index, 'price')">
|
|
|
|
<div class="flex cell_render">
|
|
<span v-if="row.word" :key="random()">¥{{ row.price }}/{{ row.word }}字</span>
|
|
<span v-else :key="random()">¥{{ row.price }}/篇</span>
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
|
|
</div>
|
|
</span>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="stock" label="排序">
|
|
<template v-slot="{ row, $index }">
|
|
<el-popover v-model="row.num_popover" placement="top" trigger="manual" :ref="`popover-${$index}`"
|
|
@show="popshow">
|
|
<!-- 弹框内容 -->
|
|
<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>
|
|
<!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
|
|
<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">
|
|
<span>{{ row.num }}</span>
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
|
|
</div>
|
|
</span>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="stock" label="收款方式" width="195">
|
|
<template slot-scope="scope">
|
|
<div class="flex cell_render" @click="popPayMentModal(scope.row)">
|
|
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{ scope.row.payment
|
|
==
|
|
'0' ? '默认站点支付' : '自定义支付' }}</span>
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="stock" label="上首页">
|
|
<template slot-scope="scope">
|
|
<GuipSwitch :modelValue="scope.row.homeFlag" @change="onSwitchChange(scope.row)">
|
|
</GuipSwitch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="112">
|
|
<template slot-scope="scope">
|
|
<div class="flex">
|
|
<el-button type="text">编辑</el-button>
|
|
<el-button @click="handleClick(scope.row)" type="text">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
|
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
|
|
:total="tableData1.length">
|
|
</el-pagination>
|
|
</el-form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- 设置域名弹出框 -->
|
|
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
|
|
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
|
|
@dialogVisibleChange="dialogVisibleChange">
|
|
<PaymentMethod :paymentList="paymentList" />
|
|
</GuipDialog>
|
|
<GuipDialog :dialogVisible="dialogVisible1" title="温馨提示" :show-close-button="false"
|
|
:show-cancel-button="showCancelButton" cancelText="先用平台免费域名" confirmText="准备完毕，验证自有域名" @confirm="handleConfirm"
|
|
@cancel="handleCancel" @close="handleClose1" @dialogVisibleChange="dialogVisibleChange">
|
|
<DomainModal />
|
|
</GuipDialog>
|
|
|
|
<el-dialog :visible.sync="dialogVisibleAdd" ref="addDialog" width="1011px" class="addDialog-wrap"
|
|
:show-close="false">
|
|
<div class="addService_wrap">
|
|
<div class="addServicetop">
|
|
<div class="flex">
|
|
<b>添加查重服务</b>
|
|
<!-- 分类导航 -->
|
|
<el-scrollbar>
|
|
<ul>
|
|
<li v-for="(item, index) in addlist" :key="item.name" @click="scrollToCategory(index)"
|
|
:class="['normal_service', activeCategory == index ? 'active_service' : '']">
|
|
<img :src="addImgList[item.name]" alt="">
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</el-scrollbar>
|
|
</div>
|
|
<img src="@/assets/register/close.svg" alt="" @click="handleCloseAdd">
|
|
</div>
|
|
<!-- 内容 -->
|
|
<div class="addServicebot" ref="content">
|
|
<div v-for="(category, index) in addlist" :key="index" :ref="`category-${index}`" class="category-section">
|
|
<h3 class="flex"><img :src="addImgList[category.name]" alt="">{{ category.name }}</h3>
|
|
<p class="service-desc">{{ category.desc }}</p>
|
|
<ul>
|
|
<li v-for="item in category.list" :key="item.name" :class="item.checked ? 'service-active' : ''">
|
|
<div class="service-name-item flex-between">
|
|
<span>{{ item.name }}</span>
|
|
<input type="checkbox" :id="`item-${item.id}`" v-model="item.checked"
|
|
@change="updateSelectedCount(item)" />
|
|
</div>
|
|
<p class="service-desc-item">{{ item.desc }}</p>
|
|
<p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="bottom flex">
|
|
<span>已选{{ serviceTotal }}项服务</span>
|
|
<GuipButton type="primary" :btnstyle="btnstyleObj1" @click="nextGoSettingPrice">下一步</GuipButton>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<Footer></Footer>
|
|
<div class="register-btns">
|
|
<GuipButton type="mild" @click="jumpCurStep">跳过</GuipButton>
|
|
<GuipButton type="primary" @click="finishCurStep">完成</GuipButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Footer from '@/components/Footer.vue';
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
import GuipFormItem from '@/components/GuipFormItem.vue';
|
|
import GuipInput from '@/components/GuipInput.vue';
|
|
import GuipRadio from '@/components/GuipRadio.vue';
|
|
import GuipSelect from '@/components/GuipSelect.vue';
|
|
import GuipSwitch from '@/components/GuipSwitch.vue';
|
|
import GuipDialog from '@/components/GuipDialog.vue';
|
|
import PaymentMethod from '@/components/paymentMethod.vue';
|
|
import DomainModal from '@/components/domainModal.vue';
|
|
import CustomDropdown from '@/components/CustomDropdown.vue';
|
|
// import GuipTable from '@/components/GuipTable.vue';
|
|
import store from '../store';
|
|
|
|
export default {
|
|
components: {
|
|
GuipButton,
|
|
GuipFormItem,
|
|
GuipInput,
|
|
GuipRadio,
|
|
GuipSelect,
|
|
Footer,
|
|
GuipSwitch,
|
|
GuipDialog,
|
|
PaymentMethod,
|
|
DomainModal,
|
|
CustomDropdown
|
|
// GuipTable
|
|
},
|
|
data() {
|
|
return {
|
|
btnstyleObj1: {
|
|
width: '137px',
|
|
height: '38px',
|
|
},
|
|
serviceTotal: 0,
|
|
activeCategory: 0,
|
|
addlist: [
|
|
{
|
|
name: '万方',
|
|
desc: '提供中英文文献相似性检测服务。自主研发的“句子级正交软聚类倒排语义” 算法，海量数据全文对比，5分钟快速出报告。',
|
|
list: [
|
|
{
|
|
name: '一般新文献',
|
|
desc: '适用于所有未正式发表的文献类型。',
|
|
price: '2.4',
|
|
word: '1000字符',
|
|
checked: false,
|
|
checkFlag: true
|
|
},
|
|
{
|
|
name: '本科论文',
|
|
desc: '适用于在校大学生毕业论文。',
|
|
price: '2.4',
|
|
word: '1000字符',
|
|
checked: false,
|
|
checkFlag: false
|
|
},
|
|
{
|
|
name: '说博士论文',
|
|
desc: '适用于应届高校硕博士研究生论文检测。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '高职高专',
|
|
desc: '适用于高等职业学院和高等专科学校论文检测。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '一般新文献1name',
|
|
desc: '适用于所有未正式发表的文献类型。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
]
|
|
},
|
|
{
|
|
name: '维普',
|
|
desc: '维普维普维普维普维普维普维普维普',
|
|
list: [
|
|
{
|
|
name: '一般新文献222',
|
|
desc: '适用于所有未正式发表的文献类型。',
|
|
price: '2.4',
|
|
checked: false,
|
|
checkFlag: true,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '本科论文222',
|
|
desc: '适用于在校大学生毕业论文。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '说博士论文222',
|
|
desc: '适用于应届高校硕博士研究生论文检测。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '高职高专222',
|
|
desc: '适用于高等职业学院和高等专科学校论文检测。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '一般新文献2222',
|
|
desc: '适用于所有未正式发表的文献类型。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '高职高专2224',
|
|
desc: '适用于高等职业学院和高等专科学校论文检测。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '一般新文献2222221',
|
|
desc: '适用于所有未正式发表的文献类型。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '高职高专22242',
|
|
desc: '适用于高等职业学院和高等专科学校论文检测。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '一般新文献22222211',
|
|
desc: '适用于所有未正式发表的文献类型。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
]
|
|
},
|
|
{
|
|
name: '学术不端',
|
|
desc: '学术不端学术不端学术不端学术不端学术不端学术不端',
|
|
list: [
|
|
{
|
|
name: '一般新文献333',
|
|
desc: '适用于所有未正式发表的文献类型。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '本科论文33',
|
|
desc: '适用于在校大学生毕业论文。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '说博士论文333',
|
|
desc: '适用于应届高校硕博士研究生论文检测。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '高职高专333',
|
|
desc: '适用于高等职业学院和高等专科学校论文检测。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
{
|
|
name: '一般新文献3332',
|
|
desc: '适用于所有未正式发表的文献类型。',
|
|
price: '2.4',
|
|
checked: false,
|
|
word: '1000字符'
|
|
},
|
|
]
|
|
},
|
|
],
|
|
addImgList: {
|
|
'万方': require('@/assets/register/wanfang.png'),
|
|
'维普': require('@/assets/register/weipu.svg'),
|
|
'学术不端': require('@/assets/register/xueshubuduan.svg'),
|
|
},
|
|
dialogVisibleAdd: false,
|
|
selectedItemWeixin: {},//微信收款方式
|
|
selectedItem: {},//店铺绑定
|
|
selectedValue1: null,//店铺绑定
|
|
options1: [//店铺
|
|
{ label: "博闻教育专营店", time: "有效期至2025-06-13 05:00:00", desc: "博闻教育专营店 有效期至2025-06-13 05:00:00", value: 1 },
|
|
{ label: "这是一个店", time: "有效期至2025-06-13 05:00:00", desc: "这是一个店 有效期至2025-06-13 05:00:00", value: 2 },
|
|
{ label: "ewqewq地方", time: "有效期至2025-06-13 05:00:00", desc: "ewqewq地方 有效期至2025-06-13 05:00:00", value: 3 },
|
|
],
|
|
dialogTitle: '编辑',
|
|
dialogVisible1: false,
|
|
paymentList: [
|
|
{
|
|
type: '1',
|
|
name: '小知攻城狮',
|
|
num: '1520574481 （wx1bda8b3d08d169cb）',
|
|
flag: true
|
|
},
|
|
{
|
|
type: '2',
|
|
name: '自收款',
|
|
num: 'wangyong@kuailebanshou.com',
|
|
flag: true
|
|
},
|
|
{
|
|
type: '3',
|
|
name: '店铺收款',
|
|
num: '轻歌曼舞82',
|
|
flag: false
|
|
},
|
|
{
|
|
type: '4',
|
|
name: '京东收款',
|
|
num: 'celunwen',
|
|
flag: false
|
|
},
|
|
],
|
|
currentPage: 1, //当前页
|
|
pageSize: 1, //每页的容量
|
|
total: 0, //列表总数
|
|
dialogVisible: false,//是否展示弹框
|
|
showCancelButton: true, // 控制是否显示取消按钮
|
|
showCloseButton: true, // 控制是否显示关闭按钮
|
|
activeStep: 2,//当前步骤条
|
|
has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺
|
|
distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商
|
|
payment_method_list: [//收款方式
|
|
|
|
],
|
|
add_chachong_list: [//查重服务
|
|
|
|
],
|
|
distribution_channel_options: [
|
|
{ label: '电商平台销售', value: '1', selectedLabel: '电商平台销售（淘宝、天猫、拼多多店铺）' },
|
|
{ label: '非电商平台销售', value: '0', selectedLabel: '非电商平台销售（浏览器搜索推广、微信售卖等）' },
|
|
],
|
|
domain_source: [
|
|
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
|
|
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
|
|
],
|
|
store_channel: [
|
|
{ label: '拼多多', value: '拼多多', selectedLabel: "拼多多" },
|
|
{ label: '天猫', value: '天猫', selectedLabel: "天猫" },
|
|
{ label: '淘宝', value: '淘宝', selectedLabel: "淘宝" },
|
|
],
|
|
steps: [
|
|
{ title: "步骤 1", 'desc': '', 'wait': '../assets/register/step1_ing.svg', 'checked': '../assets/register/step1_ing.svg', 'finish': '../assets/register/step_success.svg' },
|
|
{ title: "步骤 2", 'desc': '', 'wait': '../assets/register/step2_null.svg', 'checked': '../assets/register/step2_ing.svg', 'finish': '../assets/register/step_success.svg' },
|
|
{ title: "步骤 3", 'desc': '', 'wait': '../assets/register/step3_null.svg', 'checked': '../assets/register/step3_ing.svg', 'finish': '../assets/register/step_success.svg' }
|
|
],
|
|
stepDesc: {
|
|
'1': '填写站点信息、选择模板样式',
|
|
'2': '配置收款方式',
|
|
'3': '想卖哪些东西？来选选吧',
|
|
},
|
|
tableData1: [
|
|
{ id: 1, name: '万方大学生版', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a', num: '1', edit_num: '', num_popover: false, homeFlag: true, payment: '0' },
|
|
{ id: 2, name: '维普检测版', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a', num: '2', edit_num: '', num_popover: false, homeFlag: true, payment: '1' },
|
|
{ id: 3, name: '商品C1', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b', num: '2', edit_num: '', num_popover: false, homeFlag: false, payment: '0' },
|
|
{ id: 1, name: '商品A2', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a', num: '3', edit_num: '', num_popover: false, homeFlag: false, payment: '0' },
|
|
{ id: 2, name: '商品B2', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a', num: '0', edit_num: '', num_popover: false, homeFlag: true },
|
|
{ id: 3, name: '商品C2', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b', num: '1', edit_num: '' },
|
|
{ id: 1, name: '商品A3', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a' },
|
|
{ id: 2, name: '商品B3', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a' },
|
|
{ id: 3, name: '商品C3', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b' },
|
|
{ id: 1, name: '商品A4', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a' },
|
|
{ id: 2, name: '商品B4', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a' },
|
|
{ id: 3, name: '商品C4', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b' },
|
|
{ id: 1, name: '商品A5', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a' },
|
|
{ id: 2, name: '商品B5', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a' },
|
|
{ id: 3, name: '商品C5', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b' },
|
|
],
|
|
typelistobj: {
|
|
a: ''
|
|
},
|
|
|
|
// 表格列配置
|
|
columns: [
|
|
{ prop: 'name', label: '检测服务', popover: false }, // 支持气泡框
|
|
{ prop: 'age', label: '今日供货价', popover: true }, // 不支持气泡框
|
|
{ prop: 'address', label: '售价', popover: true }, // 支持气泡框
|
|
{ prop: 'address1', label: '收款方式', popover: true }, // 支持气泡框
|
|
{ prop: 'address2', label: '排序', popover: true }, // 支持气泡框
|
|
{ prop: 'address3', label: '上首页', popover: false }, // 支持气泡框
|
|
// { prop: 'address', label: '操作', popover: false }, // 支持气泡框
|
|
],
|
|
tableData: [{
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1518 弄',
|
|
price: '20',
|
|
age: 20,
|
|
// 在支持修改的项目中，需要主动保留一份原始数据
|
|
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
|
|
},],
|
|
form1: {
|
|
username: '',
|
|
distribution_channel: '',
|
|
},
|
|
form2: {
|
|
store_channel: '',
|
|
},
|
|
form3: {
|
|
zhifubao_pay: '',
|
|
weixin_pay: '',
|
|
},
|
|
options_weixin_null: {
|
|
label: '暂无收款账号',
|
|
value: '暂时没有收款账号，我想稍后配置',
|
|
desc: '暂无收款账号，稍后配置'
|
|
},
|
|
select_placeholder_weixin: '暂无收款账号，稍后配置',
|
|
options_weixin: [],
|
|
options_zhifubao: [],
|
|
};
|
|
},
|
|
computed: {
|
|
// 计算选中的总数
|
|
selectedCount() {
|
|
const newaddlist = JSON.parse(JSON.stringify(this.addlist))
|
|
let list = []
|
|
let listTotal = []
|
|
newaddlist.forEach(item => {
|
|
let item2 = JSON.parse(JSON.stringify(item));
|
|
item2.list = [];
|
|
item.list.forEach((item1) => {
|
|
if (item1.checked) {
|
|
// list1.push(item1)
|
|
listTotal.push(item1)
|
|
if (item2.list.length == 0) {
|
|
item2.list = [item1]
|
|
} else {
|
|
item2.list.push(item1)
|
|
}
|
|
}
|
|
})
|
|
if (item2.list.length > 0) {
|
|
list.push(item2)
|
|
}
|
|
})
|
|
console.log(list, 'list----', this.addlist);
|
|
store.commit('SET_ADDSERVICELIST', list);
|
|
return listTotal.length;
|
|
},
|
|
},
|
|
methods: {
|
|
nextGoSettingPrice() {
|
|
this.$router.push('/settingServicePrice')
|
|
},
|
|
goCurActiveStep(step) {
|
|
if (step < this.activeStep) {
|
|
this.activeStep = step
|
|
}
|
|
},
|
|
showDomainModal() {
|
|
this.dialogVisibleAdd = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.content.addEventListener('scroll', this.handleScroll);
|
|
});
|
|
},
|
|
yumingInput() {
|
|
this.dialogVisible1 = true;
|
|
},
|
|
// 确认按钮事件
|
|
handleConfirm() {
|
|
this.$message.success('点击了确认按钮');
|
|
this.dialogVisible = false;
|
|
},
|
|
// 取消按钮事件
|
|
handleCancel() {
|
|
this.$message.warning('点击了取消按钮');
|
|
this.dialogVisible = false;
|
|
},
|
|
// 关闭弹框事件
|
|
handleClose() {
|
|
this.$message.info('弹框已关闭');
|
|
this.dialogVisible = false;
|
|
},
|
|
handleClose1() {
|
|
this.$message.info('弹框已关闭111');
|
|
this.dialogVisible1 = false;
|
|
},
|
|
dialogVisibleChange(data) {
|
|
console.log(data, 'data098908090');
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val
|
|
},
|
|
popshow() {
|
|
var ariaEls = document.querySelectorAll('.el-popover')
|
|
ariaEls.forEach((item) => {
|
|
item.removeAttribute('aria-hidden')
|
|
})
|
|
|
|
ariaEls = document.querySelectorAll('.el-radio__original')
|
|
ariaEls.forEach((item) => {
|
|
item.removeAttribute('aria-hidden')
|
|
})
|
|
},
|
|
// 表格首页开关
|
|
onSwitchChange(row) {
|
|
console.log(row, '------flag');
|
|
row.homeFlag = !row.homeFlag;
|
|
this.$set(this.tableData1, row)
|
|
},
|
|
// 点击价格单元格时触发
|
|
handlePriceClick(row, index, type) {
|
|
// 关闭其他行的弹框
|
|
this.tableData.forEach((item, i) => {
|
|
if (i !== index) {
|
|
item[type + '_popover'] = false;
|
|
}
|
|
});
|
|
// 打开当前行的弹框
|
|
row[type + '_popover'] = true;
|
|
row['edit_' + type] = row[type]
|
|
// row.edit_price = row.price; // 初始化输入框的值
|
|
},
|
|
// 保存价格
|
|
savePrice(row, type) {
|
|
if (type == 'price' && row.edit_price === '') {
|
|
this.$message.warning('价格不能为空');
|
|
return;
|
|
}
|
|
if (type == 'word' && row.word && row.editWord === '') {
|
|
this.$message.warning('字符不能为空');
|
|
return;
|
|
}
|
|
if (row.edit_word) {
|
|
row.word = row.edit_word
|
|
}
|
|
row[type] = row['edit_' + type]; // 更新价格
|
|
row[type + '_popover'] = false; // 关闭弹框
|
|
this.$message.success('保存成功');
|
|
this.$set(this.tableData1, row)
|
|
console.log('保存价格：', this.tableData1, row.price);
|
|
// 这里可以调用接口保存修改后的价格
|
|
},
|
|
// 取消编辑
|
|
cancelEdit(row, type) {
|
|
row[type + '_popover'] = false; // 关闭弹框
|
|
this.$message.info('已取消编辑');
|
|
},
|
|
random() {
|
|
var randomNumber = Math.random();
|
|
return randomNumber
|
|
},
|
|
// nextStep() {
|
|
// if (this.activeStep < 2) {
|
|
// this.activeStep++;
|
|
// }
|
|
// },
|
|
// 销售渠道
|
|
radioChange(type) {
|
|
console.log(type, '--');
|
|
this.distribution_channel = type;
|
|
},
|
|
// 店铺渠道选择
|
|
radioChange_store(data) {
|
|
console.log(data, '店铺渠道选择');
|
|
// this.distribution_channel= data;
|
|
},
|
|
// 上一步
|
|
prevStep() {
|
|
if (this.activeStep > 0) {
|
|
this.activeStep--;
|
|
}
|
|
},
|
|
// 下一步
|
|
nextStep() {
|
|
if (this.activeStep < this.steps.length - 1) {
|
|
this.activeStep++;
|
|
}
|
|
},
|
|
// 判断步骤是否已完成
|
|
isStepFinished(index) {
|
|
return index < this.activeStep;
|
|
},
|
|
// 判断步骤是否为当前步骤（填写中）
|
|
isStepActive(index) {
|
|
return index === this.activeStep;
|
|
},
|
|
// 获取步骤状态
|
|
getStepStatus(index) {
|
|
if (this.isStepFinished(index)) {
|
|
return "success"; // 已完成
|
|
} else if (this.isStepActive(index)) {
|
|
return "process"; // 进行中
|
|
} else {
|
|
return "wait"; // 未开始
|
|
}
|
|
},
|
|
// 获取步骤状态文案
|
|
getStepStatusText(index) {
|
|
if (this.isStepFinished(index)) {
|
|
return "已完成";
|
|
} else if (this.isStepActive(index)) {
|
|
return "填写中";
|
|
} else {
|
|
return "未开始";
|
|
}
|
|
},
|
|
renderStepDesc(step) {
|
|
return this.stepDesc[step]
|
|
},
|
|
popPayMentModal(row) {
|
|
this.dialogVisible = true;
|
|
this.dialogTitle = row.name + '-收款方式'
|
|
console.log(row, '=====');
|
|
},
|
|
lookTemImg() {
|
|
|
|
},
|
|
editTemImg() {
|
|
|
|
},
|
|
jumpCurStep() {
|
|
if (this.activeStep != '3') {
|
|
this.activeStep = Number(this.activeStep) + 1
|
|
} else {
|
|
// 直接进入主页面
|
|
}
|
|
},
|
|
finishCurStep() {
|
|
if (this.activeStep != '3') {
|
|
this.activeStep = Number(this.activeStep) + 1
|
|
} else {
|
|
// 直接进入主页面
|
|
}
|
|
},
|
|
|
|
// 店铺绑定下拉框
|
|
changeSelect(item) {
|
|
this.selectedItem = { ...item };
|
|
console.log(this.selectedItem, 'this.selectedItem====');
|
|
},
|
|
changeSelectWeixin(item, flag) {
|
|
if (flag) {
|
|
this.select_placeholder_weixin = this.options_weixin_null.desc;
|
|
return
|
|
}
|
|
this.selectedItem = { ...item };
|
|
console.log(this.selectedItem, 'this.selectedItem====');
|
|
},
|
|
changeNormalWeixin() {
|
|
|
|
},
|
|
// 关闭弹窗
|
|
handleCloseAdd() {
|
|
this.dialogVisibleAdd = false;
|
|
this.$refs.content.removeEventListener('scroll', this.handleScroll);
|
|
},
|
|
// 滚动到指定分类
|
|
scrollToCategory(index) {
|
|
this.activeCategory = index;
|
|
const element = this.$refs[`category-${index}`][0];
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
},
|
|
// 处理滚动事件
|
|
handleScroll() {
|
|
const scrollPosition = this.$refs.content.scrollTop;
|
|
// console.log(this.activeCategory,scrollPosition,'this.activeCategory');
|
|
this.addlist.forEach((category, index) => {
|
|
const element = this.$refs[`category-${index}`][0];
|
|
const elementTop = Math.round(element.offsetTop - 70);
|
|
const elementBottom = elementTop + element.offsetHeight;
|
|
// console.log('进来了',scrollPosition,elementTop,elementBottom,index,scrollPosition >= elementTop && scrollPosition < elementBottom);
|
|
if (scrollPosition >= elementTop && scrollPosition < elementBottom) {
|
|
this.activeCategory = index;
|
|
}
|
|
});
|
|
},
|
|
updateSelectedCount(item) {
|
|
this.serviceTotal = this.selectedCount;
|
|
console.log(item, 'item----');
|
|
// this.$set(this.addlist,item)
|
|
console.log('选中总数已更新：', this.addlist);
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.width-box {
|
|
width: 1220px;
|
|
}
|
|
|
|
@media (min-width: 1441px) {
|
|
.width-box {
|
|
width: 1220px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:1200px) {
|
|
.width-box {
|
|
width: 1100px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.shortspan {
|
|
display: inline-block;
|
|
height: 38px;
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.custom-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.step-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.step-status {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.step1-top {
|
|
.form-item1 {
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
.step1-top2 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
// 店铺首次授权
|
|
.first_register {
|
|
letter-spacing: 0.08em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24px;
|
|
align-self: stretch;
|
|
background: #FAFAFA;
|
|
border-radius: 4px;
|
|
|
|
b {
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
p {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
line-height: 13px;
|
|
color: #626573;
|
|
}
|
|
}
|
|
|
|
.step3-wrap {
|
|
flex: 1;
|
|
|
|
.step3-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 0;
|
|
|
|
.btngroup {
|
|
display: flex;
|
|
|
|
button {
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.normal_payment,
|
|
.self_payment {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
background: #F6F7FA;
|
|
box-sizing: border-box;
|
|
border: 1px solid #DFE2E6;
|
|
letter-spacing: 0.08em;
|
|
color: #626573;
|
|
}
|
|
|
|
.self_payment {
|
|
border: 1px solid #BFDAFF;
|
|
background: #F2F7FF;
|
|
color: #006AFF;
|
|
}
|
|
|
|
.table-wrap {
|
|
span {
|
|
color: #1E2226;
|
|
}
|
|
|
|
.edit_icon {
|
|
display: none;
|
|
transition: all .3s;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.el-table__row:hover {
|
|
.edit_icon {
|
|
display: block;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.green,
|
|
.blue {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #0DAF49 !important;
|
|
letter-spacing: 0.08em;
|
|
/* 基本 */
|
|
width: 80px;
|
|
border-radius: 4px;
|
|
background: rgba(239, 255, 224, 0.5);
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(0, 194, 97, 0.6);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.blue {
|
|
background: #F2F7FF;
|
|
border: 1px solid #BFDAFF;
|
|
color: #006AFF !important;
|
|
}
|
|
|
|
.register-btns {
|
|
// height: 78px;
|
|
/* 自动布局 */
|
|
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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// .el-step__head:nth-child(1){
|
|
// background: url('../assets/register/step1_ing.svg') no-repeat center;
|
|
// background-size: cover;
|
|
// width: 24px; /* 图标大小 */
|
|
// height: 24px; /* 图标大小 */
|
|
// }
|
|
// :deep(.el-step__line) {
|
|
// height: 0px; // 线的高度
|
|
// width: 50px;
|
|
// margin-top: 14px; // 线与圆圈的间距
|
|
// left: 80% !important;
|
|
// position: absolute;
|
|
// border: 1px solid #006AFF;
|
|
// }
|
|
.step2-wrap {
|
|
flex: 1;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
::v-deep .addDialog-wrap .el-dialog {
|
|
background: #F6F7FA;
|
|
height: 546px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
::v-deep .addDialog-wrap .el-dialog .el-dialog__body {
|
|
padding: 0 24px 0;
|
|
}
|
|
|
|
::v-deep .addDialog-wrap .el-dialog__header {
|
|
background: #F6F7FA;
|
|
border-radius: 8px;
|
|
|
|
}
|
|
|
|
.addDialog-wrap {
|
|
.bottom {
|
|
margin-top: 24px;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
text-align: center;
|
|
letter-spacing: 0.08em;
|
|
font-variation-settings: "opsz" auto;
|
|
color: #9E9E9E;
|
|
display: inline-block;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addService_wrap {
|
|
text-align: left;
|
|
background-color: #fff;
|
|
|
|
// display: ;
|
|
.addServicetop {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 24px;
|
|
width: 963.43px;
|
|
|
|
b {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 26px;
|
|
letter-spacing: 0.08em;
|
|
font-variation-settings: "opsz" auto;
|
|
color: #1E2226;
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
padding-left: 20px;
|
|
|
|
li {
|
|
cursor: pointer;
|
|
list-style-type: none;
|
|
display: flex;
|
|
align-items: center;
|
|
display: flex;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.normal_service {
|
|
padding: 4px 10px;
|
|
border-radius: 100px;
|
|
opacity: 1;
|
|
background: #FFFFFF;
|
|
letter-spacing: 0.08em;
|
|
color: #8A9099;
|
|
border: 1px solid transparent;
|
|
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
.active_service {
|
|
color: #006AFF;
|
|
box-sizing: border-box;
|
|
border: 1px solid #006AFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.addServicebot {
|
|
overflow-y: auto;
|
|
max-height: 380px;
|
|
margin-top: 24px;
|
|
|
|
ul {
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
// justify-content: space-between;
|
|
display: grid;
|
|
grid-gap: 14px;
|
|
grid-template-columns: repeat(auto-fit, 220px);
|
|
// grid-auto-rows: 50px;
|
|
padding-left: 0;
|
|
margin: 20px 0 0;
|
|
|
|
li {
|
|
list-style-type: none;
|
|
width: 220px;
|
|
height: 126px;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
padding: 14px 10px;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
border: 1px solid #DFE2E6;
|
|
cursor: pointer;
|
|
transition: all .3s;
|
|
}
|
|
|
|
li:hover {
|
|
background: #F6F7FA;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
|
|
.service-active {
|
|
border: 1px solid #006AFF;
|
|
}
|
|
|
|
.service-desc {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.08em;
|
|
font-variation-settings: "opsz" auto;
|
|
color: #8A8C99;
|
|
margin: 6px 0 8px;
|
|
}
|
|
|
|
.service-name-item {
|
|
font-size: 14px;
|
|
letter-spacing: 0.08em;
|
|
color: #1E2226;
|
|
}
|
|
|
|
.service-desc-item {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
line-height: 17px;
|
|
letter-spacing: 0.03em;
|
|
font-variation-settings: "opsz" auto;
|
|
color: #8A9099;
|
|
margin: 14px 0 12px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
height: 34px;
|
|
}
|
|
|
|
.service-price-item {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
letter-spacing: 0.08em;
|
|
font-variation-settings: "opsz" auto;
|
|
color: #8A9099;
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: #1E2226;
|
|
|
|
}
|
|
|
|
span {
|
|
color: #1E2226;
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.category-section {
|
|
padding: 20px;
|
|
|
|
h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.08em;
|
|
color: #1E2226;
|
|
|
|
img {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|