|
|
|
@ -109,7 +109,7 @@ |
|
|
|
<GuipFormItem column="column"> |
|
|
|
<div slot="formLeft">域名设置 |
|
|
|
</div> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" placeholder="仅支持数字、字母"> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" @click="yumingInput" placeholder="仅支持数字、字母"> |
|
|
|
<span slot="appendshow">.chachongz.com</span> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
@ -204,7 +204,7 @@ |
|
|
|
<div class="step3-top flex-common"> |
|
|
|
<h3>服务列表</h3> |
|
|
|
<div class="btngroup"> |
|
|
|
<GuipButton type="normal" size="mmedium">添加查重服务</GuipButton> |
|
|
|
<GuipButton type="normal" size="mmedium" @click="showDomainModal">添加查重服务</GuipButton> |
|
|
|
<GuipButton type="normal" size="mmedium">添加写作辅助</GuipButton> |
|
|
|
<GuipButton type="normal" size="mmedium">添加AIGC</GuipButton> |
|
|
|
</div> |
|
|
|
@ -215,7 +215,7 @@ |
|
|
|
<el-table :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%" |
|
|
|
:key="random()"> |
|
|
|
<!-- 其他列 --> |
|
|
|
<el-table-column prop="name" label="检测服务"> |
|
|
|
<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' ? '查重服务' : '写作辅助' |
|
|
|
@ -228,8 +228,8 @@ |
|
|
|
<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> |
|
|
|
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt=""> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
@ -244,22 +244,21 @@ |
|
|
|
placeholder="请输入售价" unit="元"> |
|
|
|
</GuipInput> |
|
|
|
<div v-else class="flex"> |
|
|
|
<GuipInput ref="GuipInput" width="133px" v-model="row.edit_price" label="售价" |
|
|
|
placeholder="请输入售价" unit="元"> |
|
|
|
<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 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> |
|
|
|
<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')"> |
|
|
|
<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> |
|
|
|
@ -276,43 +275,50 @@ |
|
|
|
@show="popshow"> |
|
|
|
<!-- 弹框内容 --> |
|
|
|
<div style="text-align: center"> |
|
|
|
<GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" |
|
|
|
placeholder="请输入数字"> |
|
|
|
<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> |
|
|
|
<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')"> |
|
|
|
<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>{{ 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> |
|
|
|
<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> |
|
|
|
<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" |
|
|
|
@ -324,13 +330,16 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 设置域名弹出框 --> |
|
|
|
<!-- <GuipDialog :dialogVisible="dialogVisible" title="温馨提示" :show-close-button="false" |
|
|
|
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false" |
|
|
|
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose" |
|
|
|
@dialogVisibleChange="dialogVisibleChange"> |
|
|
|
<div> |
|
|
|
<p>这是一个自定义内容的弹框。</p> |
|
|
|
</div> |
|
|
|
</GuipDialog> --> |
|
|
|
<PaymentMethod :paymentList="paymentList" /> |
|
|
|
</GuipDialog> |
|
|
|
<GuipDialog :dialogVisible="dialogVisible1" title="温馨提示" :show-close-button="false" |
|
|
|
:show-cancel-button="showCancelButton" cancelText="先用平台免费域名" confirmText="准备完毕，验证自有域名" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose" |
|
|
|
@dialogVisibleChange="dialogVisibleChange"> |
|
|
|
<DomainModal/> |
|
|
|
</GuipDialog> |
|
|
|
<Footer></Footer> |
|
|
|
<div class="register-btns"> |
|
|
|
<GuipButton type="mild">跳过</GuipButton> |
|
|
|
@ -346,23 +355,68 @@ 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 GuipDialog from '@/components/GuipDialog.vue'; |
|
|
|
import PaymentMethod from '@/components/paymentMethod.vue'; |
|
|
|
import DomainModal from '@/components/domainModal.vue'; |
|
|
|
// import GuipTable from '@/components/GuipTable.vue'; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
GuipButton, |
|
|
|
GuipFormItem, |
|
|
|
GuipInput, |
|
|
|
GuipRadio, |
|
|
|
GuipSelect, |
|
|
|
Footer, |
|
|
|
GuipSwitch, |
|
|
|
GuipDialog, |
|
|
|
PaymentMethod, |
|
|
|
DomainModal |
|
|
|
// GuipTable |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
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: 5, //每页的容量 |
|
|
|
total: 0, //列表总数 |
|
|
|
dialogVisible: false, |
|
|
|
dialogVisible: false,//是否展示弹框 |
|
|
|
showCancelButton: true, // 控制是否显示取消按钮 |
|
|
|
showCloseButton: true, // 控制是否显示关闭按钮 |
|
|
|
activeStep: 3,//当前步骤条 |
|
|
|
has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺 |
|
|
|
distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商 |
|
|
|
payment_method_list:[//收款方式 |
|
|
|
payment_method_list: [//收款方式 |
|
|
|
|
|
|
|
], |
|
|
|
add_chachong_list:[//查重服务 |
|
|
|
add_chachong_list: [//查重服务 |
|
|
|
|
|
|
|
], |
|
|
|
distribution_channel_options: [ |
|
|
|
@ -384,11 +438,11 @@ export default { |
|
|
|
{ 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: 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' }, |
|
|
|
@ -438,25 +492,37 @@ export default { |
|
|
|
options_zhifubao: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: { |
|
|
|
GuipButton, |
|
|
|
GuipFormItem, |
|
|
|
GuipInput, |
|
|
|
GuipRadio, |
|
|
|
GuipSelect, |
|
|
|
Footer, |
|
|
|
GuipSwitch |
|
|
|
// GuipDialog, |
|
|
|
// GuipTable |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
showDomainModal(){ |
|
|
|
this.dialogVisible1 = true |
|
|
|
}, |
|
|
|
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; |
|
|
|
}, |
|
|
|
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) => { |
|
|
|
@ -468,48 +534,48 @@ export default { |
|
|
|
item.removeAttribute('aria-hidden') |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 表格首页开关 |
|
|
|
onSwitchChange(row){ |
|
|
|
console.log(row,'------flag'); |
|
|
|
// 表格首页开关 |
|
|
|
onSwitchChange(row) { |
|
|
|
console.log(row, '------flag'); |
|
|
|
row.homeFlag = !row.homeFlag; |
|
|
|
this.$set(this.tableData1, row) |
|
|
|
}, |
|
|
|
// 点击价格单元格时触发 |
|
|
|
handlePriceClick(row, index,type) { |
|
|
|
handlePriceClick(row, index, type) { |
|
|
|
// 关闭其他行的弹框 |
|
|
|
this.tableData.forEach((item, i) => { |
|
|
|
if (i !== index) { |
|
|
|
item[type+ '_popover'] = false; |
|
|
|
item[type + '_popover'] = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
// 打开当前行的弹框 |
|
|
|
row[type+ '_popover']= true; |
|
|
|
row['edit_'+type] = row[type] |
|
|
|
row[type + '_popover'] = true; |
|
|
|
row['edit_' + type] = row[type] |
|
|
|
// row.edit_price = row.price; // 初始化输入框的值 |
|
|
|
}, |
|
|
|
// 保存价格 |
|
|
|
savePrice(row,type) { |
|
|
|
if (type=='price' && row.edit_price === '') { |
|
|
|
savePrice(row, type) { |
|
|
|
if (type == 'price' && row.edit_price === '') { |
|
|
|
this.$message.warning('价格不能为空'); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (type == 'word' &&row.word && row.editWord === '') { |
|
|
|
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; // 关闭弹框 |
|
|
|
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; // 关闭弹框 |
|
|
|
cancelEdit(row, type) { |
|
|
|
row[type + '_popover'] = false; // 关闭弹框 |
|
|
|
this.$message.info('已取消编辑'); |
|
|
|
}, |
|
|
|
random() { |
|
|
|
@ -570,6 +636,11 @@ export default { |
|
|
|
} else { |
|
|
|
return "未开始"; |
|
|
|
} |
|
|
|
}, |
|
|
|
popPayMentModal(row) { |
|
|
|
this.dialogVisible = true; |
|
|
|
this.dialogTitle = row.name + '-收款方式' |
|
|
|
console.log(row, '====='); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
@ -720,17 +791,40 @@ export default { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.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{ |
|
|
|
|
|
|
|
.edit_icon { |
|
|
|
display: none; |
|
|
|
transition: all .3s; |
|
|
|
margin-left: 8px; |
|
|
|
} |
|
|
|
.el-table__row:hover{ |
|
|
|
.edit_icon{ |
|
|
|
|
|
|
|
.el-table__row:hover { |
|
|
|
.edit_icon { |
|
|
|
display: block; |
|
|
|
transition: all .3s; |
|
|
|
} |
|
|
|
|
zq
2 months ago
