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

Merge pull request '注册也样式修改' (#37) from zq-ui into master 

Reviewed-on: #37
pull/38/head
zhangqi 1 week ago
parent
8065d1dbd6 6af73a78a6
commit
57bd9212b6
1 changed files with 131 additions and 67 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. 196
      src/views/Register.vue

196
src/views/Register.vue
View File

@ -329,17 +329,16 @@
<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>
<GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="showDomainModal">添加查重服务
</GuipButton>
<GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }">添加写作辅助</GuipButton>
<GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }">添加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()">
<!-- 其他列 -->
<GuipTable :tableData="tableData1" :loading="tableLoading">
<el-table-column prop="name" label="检测服务" width="210">
<template slot-scope="scope">
<div class="flex">
@ -349,21 +348,17 @@
</div>
</template>
</el-table-column>
<el-table-column prop="stock" label="今日供货价">
<el-table-column prop="stock" label="今日供货价" width="198">
<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">
<!-- 弹框内容 -->
<el-table-column prop="price" label="售价" width="200">
<template #default="{ row,$index }">
<el-popover :ref="`pricePopover-${row.id}`" popper-class="single-popover" placement="top" :append-to-body="true" trigger="manual"
v-model="row.pricePopoverVisible" @show="closeOtherPopovers(row, 'price')">
<div style="text-align: center">
<GuipInput ref="GuipInput" v-if="!row.word" width="252px" v-model="row.edit_price" label="售价"
placeholder="请输入售价" unit="元">
@ -376,68 +371,86 @@
<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">
<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>
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</div>
</span>
</template>
</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">
<!-- 弹框内容 -->
<el-table-column prop="num" label="排序" width="126">
<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" placement="top" trigger="manual" append-to-body :ref="`popover-${row.id}`">
<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="请输入价格" /> -->
<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">
<span>{{ row.num }}</span>
<img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
<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="收款方式" width="195">
<el-table-column prop="stock" label="收款方式" width="198">
<template slot-scope="scope">
<div class="flex cell_render" @click="popPayMentModal(scope.row)">
<div class="flex cell_render">
<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="">
<svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
@click="popPayMentModal(scope.row)" :color="'#8A9099'" :hoverColor="'#006AFF'" />
</div>
</template>
</el-table-column>
<el-table-column prop="stock" label="上首页">
<el-table-column prop="stock" label="上首页" width="110">
<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">
<!-- :fixed="popoverFlag ? 'false' : 'right'" -->
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<div class="flex">
<el-button type="text">编辑</el-button>
@ -445,7 +458,8 @@
</div>
</template>
</el-table-column>
</el-table>
</GuipTable>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="tableData1.length">
@ -514,8 +528,8 @@
<Footer></Footer>
<div class="register-btns">
<GuipButton type="mild" @click="jumpCurStep">跳过</GuipButton>
<GuipButton type="primary" @click="finishCurStep">完成</GuipButton>
<GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpCurStep">跳过</GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="finishCurStep">完成</GuipButton>
</div>
</div>
</template>
@ -531,8 +545,9 @@ 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 SvgIcon from '@/components/SvgIcon.vue';
import store from '../store';
import GuipTable from '@/components/GuipTable.vue';
export default {
components: {
@ -541,16 +556,28 @@ export default {
GuipInput,
GuipRadio,
GuipSelect,
SvgIcon,
Footer,
GuipSwitch,
GuipDialog,
PaymentMethod,
DomainModal,
CustomDropdown
// GuipTable
CustomDropdown,
GuipTable
},
data() {
return {
popoverFlag:false,
tableData2: [
{
id: 1,
date: '2023-01-01',
name: '张三',
namePopoverVisible: false,
agePopoverVisible: false
},
// 更多数据...
],
btnstyleObj1: {
width: '137px',
height: '38px',
@ -756,12 +783,12 @@ export default {
},
],
currentPage: 1, //当前页
pageSize: 1, //每页的容量
pageSize: 2, //每页的容量
total: 0, //列表总数
dialogVisible: false,//是否展示弹框
showCancelButton: true, // 控制是否显示取消按钮
showCloseButton: true, // 控制是否显示关闭按钮
activeStep: 2,//当前步骤条
activeStep: 3,//当前步骤条
has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺
distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商
payment_method_list: [//收款方式
@ -794,22 +821,23 @@ export default {
'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' },
{ id: 1, name: '万方大学生版', stock: 100, price: 50, pricePopoverVisible: 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, pricePopoverVisible: 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, pricePopoverVisible: false, edit_price: '', type: 'b', num: '2', edit_num: '', num_popover: false, homeFlag: false, payment: '0' },
{ id: 11, name: '商品A2', stock: 100, price: 50, pricePopoverVisible: false, edit_price: '', type: 'a', num: '3', edit_num: '', num_popover: false, homeFlag: false, payment: '0' },
{ id: 21, name: '商品B2', stock: 200, price: 80, word: 1000, pricePopoverVisible: false, edit_price: '', editWord: '', type: 'a', num: '0', edit_num: '', num_popover: false, homeFlag: true },
{ id: 31, name: '商品C2', stock: 150, price: 120, pricePopoverVisible: false, edit_price: '', type: 'b', num: '1', edit_num: '' },
{ id: 12, name: '商品A3', stock: 100, price: 50, pricePopoverVisible: false, edit_price: '', type: 'a' },
{ id: 22, name: '商品B3', stock: 200, price: 80, word: 1000, pricePopoverVisible: false, edit_price: '', editWord: '', type: 'a' },
{ id: 32, name: '商品C3', stock: 150, price: 120, pricePopoverVisible: false, edit_price: '', type: 'b' },
{ id: 13, name: '商品A4', stock: 100, price: 50, pricePopoverVisible: false, edit_price: '', type: 'a' },
{ id: 23, name: '商品B4', stock: 200, price: 80, word: 1000, pricePopoverVisible: false, edit_price: '', editWord: '', type: 'a' },
{ id: 33, name: '商品C4', stock: 150, price: 120, pricePopoverVisible: false, edit_price: '', type: 'b' },
{ id: 14, name: '商品A5', stock: 100, price: 50, pricePopoverVisible: false, edit_price: '', type: 'a' },
{ id: 24, name: '商品B5', stock: 200, price: 80, word: 1000, pricePopoverVisible: false, edit_price: '', editWord: '', type: 'a' },
{ id: 34, name: '商品C5', stock: 150, price: 120, pricePopoverVisible: false, edit_price: '', type: 'b' },
],
tableLoading: false,
typelistobj: {
a: ''
},
@ -884,6 +912,19 @@ export default {
},
},
methods: {
closeOtherPopovers(currentRow, type) {
this.tableData1.forEach(row => {
if (row !== currentRow) {
row[`${type}PopoverVisible`] = false;
}
// 关闭同一行其他类型的弹出框
Object.keys(row)
.filter(key => key.endsWith('PopoverVisible') && key !== `${type}PopoverVisible`)
.forEach(key => {
row[key] = false;
});
});
},
nextGoSettingPrice() {
this.$router.push('/configureServicePrices')
},
@ -949,13 +990,14 @@ export default {
// 点击价格单元格时触发
handlePriceClick(row, index, type) {
// 关闭其他行的弹框
this.popoverFlag = true;
this.tableData.forEach((item, i) => {
if (i !== index) {
item[type + '_popover'] = false;
item[type + 'PopoverVisible'] = false;
}
});
// 打开当前行的弹框
row[type + '_popover'] = true;
row[type + 'PopoverVisible'] = true;
row['edit_' + type] = row[type]
// row.edit_price = row.price; // 初始化输入框的值
},
@ -973,7 +1015,7 @@ export default {
row.word = row.edit_word
}
row[type] = row['edit_' + type]; // 更新价格
row[type + '_popover'] = false; // 关闭弹框
row[type + 'PopoverVisible'] = false; // 关闭弹框
this.$message.success('保存成功');
this.$set(this.tableData1, row)
console.log('保存价格：', this.tableData1, row.price);
@ -981,8 +1023,10 @@ export default {
},
// 取消编辑
cancelEdit(row, type) {
row[type + '_popover'] = false; // 关闭弹框
this.$message.info('已取消编辑');
row[type + 'PopoverVisible'] = false;
this.popoverFlag = false
// row[type + '_popover'] = false; // 关闭弹框
this.$Message.info('已取消编辑');
},
random() {
var randomNumber = Math.random();
@ -1125,6 +1169,16 @@ export default {
};
</script>
<style lang="scss" scoped>
.single-popover {
transform: translateX(-50%); /* 根据需要调整 */
left: 50% !important; /* 根据需要调整 */
}
/* 隐藏固定列中的弹出框 */
.el-table__fixed .el-popover,
.el-table__fixed-right .el-popover {
display: none !important;
}
.width-box {
width: 1220px;
}
@ -1258,11 +1312,16 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
h3{
margin: 0;
}
.btngroup {
display: flex;
height: 33px;
button {
font-size: 12px;
margin-left: 12px;
}
}
@ -1337,6 +1396,7 @@ export default {
.register-btns {
// height: 78px;
/* 自动布局 */
// width: 344px;
display: flex;
flex-direction: row;
justify-content: center;
@ -1344,6 +1404,10 @@ export default {
padding: 16px 0px;
/* 蓝色阴影_常规 */
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
button:nth-child(1) {
margin-right: 56px;
}
}
.tem-home {

Write Preview
Loading…
Cancel
Save