You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
14 KiB
371 lines
14 KiB
3 months ago
|
<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>
|