|
|
|
@ -55,8 +55,7 @@ |
|
|
|
<img v-if="isStepFinished(index)" src="@/assets/register/step1_ing.svg" 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-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> |
|
|
|
@ -74,43 +73,464 @@ |
|
|
|
</el-step> |
|
|
|
</el-steps> |
|
|
|
|
|
|
|
<p class="pageDesc">搭建售卖渠道</p> |
|
|
|
<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> |
|
|
|
<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" placeholder="仅支持数字、字母"> |
|
|
|
<span slot="appendshow">.chachongz.com</span> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<div class="step1-top2 flex-common"> |
|
|
|
<h3>模板选择</h3> |
|
|
|
<el-form :model="form1" ref="formRef"> |
|
|
|
<div class="flex-wrap"> |
|
|
|
<div class="flex-left"> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</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" class="first_register"> |
|
|
|
|
|
|
|
<div class="step3-wrap"> |
|
|
|
<div class="step3-top"> |
|
|
|
</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="未绑定微信收款" /> |
|
|
|
</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="未绑定支付宝收款" /> |
|
|
|
</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="mild" size="mmedium">添加查重服务</GuipButton> |
|
|
|
<GuipButton type="mild" size="mmedium">添加写作辅助</GuipButton> |
|
|
|
<GuipButton type="mild" size="mmedium">添加AIGC</GuipButton> |
|
|
|
<GuipButton type="normal" size="mmedium">添加查重服务</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="检测服务"> |
|
|
|
<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="上首页"> |
|
|
|
<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="温馨提示" :show-close-button="false" |
|
|
|
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose" |
|
|
|
@dialogVisibleChange="dialogVisibleChange"> |
|
|
|
<div> |
|
|
|
<p>这是一个自定义内容的弹框。</p> |
|
|
|
</div> |
|
|
|
</GuipDialog> --> |
|
|
|
<Footer></Footer> |
|
|
|
<div class="register-btns"> |
|
|
|
<GuipButton type="mild">跳过</GuipButton> |
|
|
|
<GuipButton type="primary">完成</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 GuipTable from '@/components/GuipTable.vue'; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeStep: 0, |
|
|
|
currentPage: 1, //当前页 |
|
|
|
pageSize: 5, //每页的容量 |
|
|
|
total: 0, //列表总数 |
|
|
|
dialogVisible: false, |
|
|
|
activeStep: 3,//当前步骤条 |
|
|
|
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' } |
|
|
|
] |
|
|
|
], |
|
|
|
tableData1: [ |
|
|
|
{ id: 1, name: '商品A1', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a', num: '1', edit_num: '',num_popover:false, homeFlag: true }, |
|
|
|
{ id: 2, name: '商品B1', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a', num: '2', edit_num: '',num_popover:false, homeFlag: true }, |
|
|
|
{ id: 3, name: '商品C1', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b', num: '2', edit_num: '',num_popover:false, homeFlag: false }, |
|
|
|
{ id: 1, name: '商品A2', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a', num: '3', edit_num: '',num_popover:false, homeFlag: false }, |
|
|
|
{ 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: [], |
|
|
|
options_zhifubao: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
components:{ |
|
|
|
components: { |
|
|
|
GuipButton, |
|
|
|
GuipFormItem, |
|
|
|
GuipInput, |
|
|
|
GuipRadio, |
|
|
|
GuipSelect, |
|
|
|
Footer, |
|
|
|
GuipSwitch |
|
|
|
// GuipDialog, |
|
|
|
// GuipTable |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
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) { |
|
|
|
@ -155,21 +575,30 @@ export default { |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.width-box{ |
|
|
|
.width-box { |
|
|
|
width: 1220px; |
|
|
|
} |
|
|
|
|
|
|
|
@media (min-width: 1441px) { |
|
|
|
.width-box{ |
|
|
|
.width-box { |
|
|
|
width: 1220px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media (max-width:1200px) { |
|
|
|
.width-box{ |
|
|
|
.width-box { |
|
|
|
width: 1100px; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.shortspan { |
|
|
|
display: inline-block; |
|
|
|
height: 38px; |
|
|
|
margin: 0 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.custom-icon { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -189,6 +618,10 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.register-wrap { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.custom-icon { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
@ -219,7 +652,7 @@ export default { |
|
|
|
/* 自动布局 */ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding: 24px 110px; |
|
|
|
padding: 24px 36px; |
|
|
|
line-height: 32px; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
@ -227,15 +660,58 @@ export default { |
|
|
|
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; |
|
|
|
} |
|
|
|
.step3-wrap{ |
|
|
|
.step3-top{ |
|
|
|
|
|
|
|
// 店铺首次授权 |
|
|
|
.first_register { |
|
|
|
letter-spacing: 0.08em; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-between; |
|
|
|
.btngroup{ |
|
|
|
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; |
|
|
|
button{ |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.btngroup { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
button { |
|
|
|
margin-left: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -243,4 +719,56 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.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); |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zq
4 months ago
