Browse Source

收款方式弹出框

zq-develop
zq 2 months ago
parent
commit
db85e3a039
  1. BIN
      src/assets/register/jingdong_pay.png
  2. BIN
      src/assets/register/taobao_pay.png
  3. BIN
      src/assets/register/weixin_pay.png
  4. BIN
      src/assets/register/zhifubao_pay.png
  5. 2
      src/components/Footer.vue
  6. 62
      src/components/domainModal.vue
  7. 81
      src/components/paymentMethod.vue
  8. 160
      src/views/Register.vue
  9. 3
      src/views/elementGroups.vue

BIN
src/assets/register/jingdong_pay.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/register/taobao_pay.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/register/weixin_pay.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
src/assets/register/zhifubao_pay.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

2
src/components/Footer.vue

@ -6,7 +6,7 @@
<style lang="scss" scoped>
.web-main-footer{
width: 100%;
height: 65px;
min-height: 65px;
display: flex;
align-items: center;
justify-content: center;

62
src/components/domainModal.vue

@ -0,0 +1,62 @@
<template>
<div class="domain-wrap">
<p>设置自己的域名需要做 2 步站外操作如果暂时未准备好或打算稍后设置可以先选用平台免费域名平台随时支持域名修改 </p>
<div class="domain-box">
<div class="domain-item">
<p>1.&emsp;域名必须在阿里云完成 ICP 备案</p>
<p>备案网址https://beian.aliyun.com</p>
</div>
<div class="domain-item">
<p>2.&emsp;域名要解析到平台服务器上</p>
<p>备案网址https://beian.aliyun.com</p>
</div>
<div class="domain-item">
<p>3.&emsp;域名填写</p>
<el-input placeholder="填写完整域名" />
</div>
</div>
</div>
</template>
<script>
// import GuipInput from '@/components/GuipInput.vue';
export default {
name: '',
props: [''],
components: {
// GuipInput,
},
data() {
return {
}
},
methods: {
onSwitchChange(data) {
console.log(data, '---');
}
}
}
</script>
<style lang="scss">
.domain-wrap {
.domain-item{
margin-bottom: 10px;
}
.domain-item p:last-child{
padding-left: 23px;
color: #8A9099;
}
p{
text-align: left;
line-height: 18px;
margin-bottom: 8px;
}
.domain-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
}
</style>

81
src/components/paymentMethod.vue

@ -0,0 +1,81 @@
<template>
<div class="payment-wrap">
<div class="payment-item" v-for="item in paymentList" :key="item.name">
<dl>
<dt>
<img v-if="item.type == '1'" src="@/assets/register/weixin_pay.png" alt="">
<img v-if="item.type == '2'" src="@/assets/register/zhifubao_pay.png" alt="">
<img v-if="item.type == '3'" src="@/assets/register/taobao_pay.png" alt="">
<img v-if="item.type == '4'" src="@/assets/register/jingdong_pay.png" alt="">
</dt>
<dd>
<p>{{ item.name }}</p>
<p>{{ item.num }}</p>
</dd>
</dl>
<GuipSwitch :modelValue="item.flag" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
</div>
</template>
<script>
import GuipSwitch from '@/components/GuipSwitch.vue';
export default {
name: '',
props:['paymentList'],
components: {
GuipSwitch
},
data(){
return {
payImg:{
'1':'weixin_pay.png',
'2':'zhifubao_pay.png',
'3':'taobao_pay.png',
'4':'jingdong_pay.png',
}
}
},
methods:{
onSwitchChange(data){
console.log(data,'---');
}
}
}
</script>
<style lang="scss">
.payment-wrap{
.payment-item{
display: flex;
align-items: center;
justify-content: space-between;
dl{
display: flex;
}
dt img{
width: 32px;
height: 32px;
}
dd{
margin-left: 12px;
p{
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
font-variation-settings: "opsz" auto;
text-align: left;
color: #8A9099;
}
}
dd p:first-child{
font-size: 14px;
line-height: 18px;
margin-bottom: 6px;
color: #1E2226;
}
}
}
</style>

160
src/views/Register.vue

@ -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' ? '查重服务' : '写作辅助'
@ -244,12 +244,11 @@
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="请输入价格" /> -->
@ -276,13 +275,11 @@
@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>
@ -299,6 +296,15 @@
</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)">
@ -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,16 +355,61 @@ 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
@ -384,10 +438,10 @@ 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: 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' },
@ -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) => {
@ -570,6 +636,11 @@ export default {
} else {
return "未开始";
}
},
popPayMentModal(row) {
this.dialogVisible = true;
this.dialogTitle = row.name + '-收款方式'
console.log(row, '=====');
}
}
};
@ -720,15 +791,38 @@ 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 {
display: none;
transition: all .3s;
margin-left: 8px;
}
.el-table__row:hover {
.edit_icon {
display: block;

3
src/views/elementGroups.vue

@ -304,9 +304,10 @@ export default {
},
data() {
return {
date1:'',
switchValue: true,
dialogVisible: false,//
dialogVisible: true,//
showCancelButton: true, //
showCloseButton: true, //
form: {

Loading…
Cancel
Save