zq
2 months ago
15 changed files with 905 additions and 60 deletions
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 30 KiB |
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<div class="page-title-wrap min-flex"> |
|||
<b>{{ pageTitle }}</b> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import GuipInput from '@/components/GuipInput.vue'; |
|||
import { mapState } from 'vuex'; |
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
// GuipInput, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.page-title-wrap { |
|||
width: 100%; |
|||
height: 72px; |
|||
/* 自动布局 */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 24px 12px; |
|||
|
|||
b { |
|||
/* headline/haeadline_3_bold */ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
line-height: 24px; |
|||
letter-spacing: 0.06em; |
|||
font-variation-settings: "opsz" auto; |
|||
/* text/text_1 */ |
|||
color: #1E2226; |
|||
display: inline-block; |
|||
text-align: left; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,371 @@ |
|||
<template> |
|||
<!-- 配置服务价格页面 --> |
|||
<div class="config-service-price min-width"> |
|||
<div class="config-service-left"> |
|||
|
|||
</div> |
|||
<div class="config-service-right"> |
|||
<el-form> |
|||
|
|||
<!-- 面包屑导航 start --> |
|||
<!-- 面包屑导航 end --> |
|||
|
|||
<PageTitle /> |
|||
|
|||
<div class="min-flex flex "> |
|||
<div class="flex-common alias-wrap"> |
|||
<b>服务别名</b> |
|||
<GuipInput ref="GuipInput" width="510px" v-model="form.alias" placeholder="服务别名将展示在前端销售页面中"> |
|||
</GuipInput> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="min-flex"> |
|||
<div class="content1 flex-common"> |
|||
<h3>网页支付与售价</h3> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<p class="flex-left-desc">支付渠道</p> |
|||
|
|||
<div class="left-pay-list"> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>微信收款</span> |
|||
<GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭" |
|||
@change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
<p>知网学诚 899990008@163.com</p> |
|||
</div> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>支付宝收款</span> |
|||
<GuipSwitch :modelValue="form.zhifubaoFlag" activeText="开启" |
|||
inactiveText="关闭" @change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
<p>知网学诚 899990008@163.com</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<GuipFormItem column="column"> |
|||
<div slot="formLeft" class="form-top-icon">售价管理 |
|||
</div> |
|||
<span slot="formRight" class="info">供货价格：3.5元/篇</span> |
|||
<div class="flex-between" slot="formDom"> |
|||
<div class="short-width"> |
|||
<GuipSelect v-model="form.payword" :defaultValue="form.payword" |
|||
prop="payword" width="100%" :options="options_payword" /> |
|||
</div> |
|||
<div class="short-width"> |
|||
<GuipInput ref="GuipInput" width="100%" v-model="form.price" |
|||
:defaultValue="form.price" placeholder="请输入售价" unit="元/篇" /> |
|||
</div> |
|||
</div> |
|||
</GuipFormItem> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="content2 flex-common"> |
|||
<h3>淘宝支付管理</h3> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<p class="flex-left-desc">淘宝渠道</p> |
|||
|
|||
<div class="left-pay-list mb24"> |
|||
<div class="left-pay-item "> |
|||
<div class="flex-between"> |
|||
<span>淘宝收款</span> |
|||
<GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭" |
|||
@change="onSwitchChange"> |
|||
</GuipSwitch> |
|||
</div> |
|||
<p>知网学诚 899990008@163.com</p> |
|||
</div> |
|||
</div> |
|||
<GuipFormItem column="column"> |
|||
<div slot="formLeft" class="form-top-icon">淘宝售价 |
|||
</div> |
|||
<div class="flex-between" slot="formDom"> |
|||
<div class="short-width"> |
|||
<GuipInput ref="GuipInput" width="100%" v-model="form.taobaoNum" |
|||
:defaultValue="form.taobaoNum" placeholder="请输入件数" unit="件" /> |
|||
</div> |
|||
<div class="short-width"> |
|||
<GuipInput ref="GuipInput" width="100%" v-model="form.taobaoword" |
|||
:defaultValue="form.taobaoword" placeholder="请输入字符" unit="字符" /> |
|||
</div> |
|||
</div> |
|||
</GuipFormItem> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<GuipFormItem column="column"> |
|||
<div slot="formLeft">关联商品 |
|||
</div> |
|||
<div slot="formRight" class="info-error">必须关联，且确保服务与XX电商商品一致 |
|||
</div> |
|||
<div class="associated_Goods" slot="formDom"> |
|||
<img src="" class="goods_left" alt=""> |
|||
<div class="goods_right"> |
|||
<div class="goods_right_item flex-between"> |
|||
<img src="@/assets/goodsTem.png" alt="" class="good-item-left"> |
|||
<div class="good-item-right"> |
|||
<p>小分解论文查重检测大学本科硕士毕业论文初稿重复率查询系统职称小分解论文查重检测大学本科硕士毕业论文初稿重复率查询系统职称小分解论文查重检测大学本科硕士毕业论文初稿重复率查询系统职称 |
|||
</p> |
|||
<div class="flex-between good-item-right-bot"> |
|||
<span>¥{{ }}39.4</span> |
|||
<div class="flex"> |
|||
<div class="flex good-bot-btn" @click="deleteFunc"><img |
|||
src="@/assets/delete.svg" alt="">删除 |
|||
</div> |
|||
<div class="flex good-bot-btn" @click="collectFunc"><img |
|||
src="@/assets/collect.svg" alt="">默认商品</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</GuipFormItem> |
|||
<div class="addStore flex"> |
|||
<img src="@/assets/addIcon.svg" alt="">添加商品 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
|
|||
<Footer></Footer> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import PageTitle from '@/components/PageTitle.vue'; |
|||
import { mapState } from 'vuex'; |
|||
// import GuipButton from '@/components/GuipButton.vue'; |
|||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
import GuipSelect from '@/components/GuipSelect.vue'; |
|||
import Footer from '@/components/Footer.vue'; |
|||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|||
|
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
// GuipInput, |
|||
PageTitle, |
|||
// GuipButton, |
|||
GuipFormItem, |
|||
GuipInput, |
|||
GuipSelect, |
|||
Footer, |
|||
GuipSwitch |
|||
}, |
|||
data() { |
|||
return { |
|||
options_payword: [ |
|||
{ |
|||
label: '按篇', value: '0' |
|||
}, |
|||
{ |
|||
label: '按字符', value: '1' |
|||
}, |
|||
], |
|||
form: { |
|||
price: 30, |
|||
alias: '', |
|||
payword: '0', |
|||
weixinFlag: true, |
|||
zhifubaoFlag: true, |
|||
taobaoword: 1000, |
|||
taobaoNum: 1, |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle', 'addServiceList']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|||
}, |
|||
methods: { |
|||
onSwitchChange(data) { |
|||
console.log(data, '---'); |
|||
}, |
|||
deleteFunc() { |
|||
|
|||
}, |
|||
collectFunc() { |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.config-service-price { |
|||
display: flex; |
|||
|
|||
.config-service-left { |
|||
width: 158px; |
|||
height: 100%; |
|||
background: #eee; |
|||
} |
|||
|
|||
.config-service-right { |
|||
width: calc(100% - 158px); |
|||
} |
|||
|
|||
.alias-wrap { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
|
|||
b { |
|||
display: inline-block; |
|||
margin-right: 32px; |
|||
/* body/body 1_bold */ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz" auto; |
|||
/* text/text_1 */ |
|||
color: #1E2226; |
|||
} |
|||
} |
|||
|
|||
.flex-left, |
|||
.flex-right { |
|||
min-width: 392px; |
|||
max-width: 590px; |
|||
flex: 1; |
|||
} |
|||
|
|||
.left-pay-list { |
|||
width: 100%; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
|
|||
/* middle/middle_grey_0 */ |
|||
// span{ |
|||
// color: #23242B; |
|||
// } |
|||
.left-pay-item { |
|||
padding: 24px; |
|||
color: #23242B; |
|||
background: #FAFAFA; |
|||
margin-top: 12px; |
|||
|
|||
p { |
|||
text-align: left; |
|||
margin-top: 9px; |
|||
/* caption/caption_regular */ |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 13px; |
|||
letter-spacing: 0.08em; |
|||
color: #626573; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.short-width { |
|||
width: calc((100% - 12px) / 2); |
|||
} |
|||
|
|||
.goods_right { |
|||
.goods_right_item { |
|||
padding: 16px; |
|||
border-radius: 8px; |
|||
opacity: 1; |
|||
/* middle/middle_grey_0 */ |
|||
background: #FAFAFA; |
|||
|
|||
.good-item-left { |
|||
width: 80px; |
|||
margin-right: 22px; |
|||
} |
|||
} |
|||
|
|||
.good-item-right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 80px; |
|||
|
|||
p { |
|||
text-align: left; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz" auto; |
|||
/* text/text_1 */ |
|||
color: #1E2226; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
/* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */ |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
height: 36px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.good-item-right-bot { |
|||
flex: 1; |
|||
align-items: end; |
|||
} |
|||
|
|||
.good-bot-btn { |
|||
img { |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.good-bot-btn:nth-child(1) { |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
|
|||
.addStore { |
|||
margin-top: 12px; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
/* text/text_white_2 */ |
|||
border: 1px dashed #BABDC2; |
|||
padding: 15px 20px; |
|||
color: #626573; |
|||
justify-content: center; |
|||
img{ |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.alias-wrap ::v-deep .el-form-item { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.info-error { |
|||
color: #FF4D4F; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
|
|||
.info { |
|||
letter-spacing: 0.08em; |
|||
color: #8A9099; |
|||
} |
|||
|
|||
.min-flex { |
|||
min-width: 1018px; |
|||
max-width: 1556px; |
|||
width: 97.6%; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue