466 lines
17 KiB
466 lines
17 KiB
<template>
|
|
<div class="column">
|
|
<!-- 配置服务价格页面 -->
|
|
<div class="config-service-price min-width">
|
|
<div class="config-service-left">
|
|
<div class="left-menu-wrap" v-for="(item,index) in addServiceList" :key="index">
|
|
<div class="menu-top flex">
|
|
<img class="menu-top-img" :src="addImgList[item.name]" alt="">
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
<div v-for="(item1,index1) in item.list" :key="item1.name" :class="['menu-item flex-between',(item1.name == activeService) ? 'menu-active':'']"
|
|
@click="goToCurService(item1,index1)">
|
|
<span>{{ item1.name }}</span>
|
|
<img class="menu-item-name" v-if="item1.checkFlag" src="@/assets/changeTrue.png" alt="">
|
|
<img class="menu-item-name" v-else src="@/assets/changeFlase.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="config-service-right">
|
|
<el-form ref="ruleFormRef" :model="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 v-model="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 v-model="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 v-model="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>
|
|
<div class="pageFooter flex">
|
|
<GuipButton type="primary" @click="submitFun">保存</GuipButton>
|
|
</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 GuipButton from '@/components/GuipButton.vue';
|
|
import Footer from '@/components/Footer.vue';
|
|
import GuipSwitch from '@/components/GuipSwitch.vue';
|
|
import store from '../store';
|
|
|
|
export default {
|
|
// 站点设置
|
|
name: '',
|
|
props: [''],
|
|
components: {
|
|
PageTitle,
|
|
GuipButton,
|
|
GuipFormItem,
|
|
GuipInput,
|
|
GuipSelect,
|
|
Footer,
|
|
GuipSwitch
|
|
},
|
|
data() {
|
|
return {
|
|
activeService:'一般新文献',
|
|
addImgList: {
|
|
'万方': require('@/assets/register/wanfang.png'),
|
|
'维普': require('@/assets/register/weipu.svg'),
|
|
'学术不端': require('@/assets/register/xueshubuduan.svg'),
|
|
},
|
|
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状态到组件的计算属性中
|
|
},
|
|
mounted(){
|
|
console.log(this.$route.query,'888');
|
|
if(Object.keys(this.$route.query).length > 0){
|
|
this.activeService = this.$route.query.index
|
|
}
|
|
// addServiceList 这个数据 如果可以走接口不错 放在store中，会刷新导致数据丢失；放在本地的话，似乎也可以，木有尝试过
|
|
console.log(this.activeService,'addServiceList-----');
|
|
},
|
|
methods: {
|
|
onSwitchChange(data) {
|
|
|
|
console.log(data,this.form.zhifubaoFlag, '---');
|
|
},
|
|
goToCurService(data){
|
|
store.commit('SET_PAGETITLE', data.name);
|
|
this.activeService = data.name;
|
|
this.$refs.ruleFormRef.resetFields()
|
|
// 这样子会重复跳转
|
|
// this.$router.push('/settingServicePrice?name='+data.name)
|
|
// this.$router.push('/settingServicePrice?index='+index)
|
|
},
|
|
deleteFunc() {
|
|
|
|
},
|
|
collectFunc() {
|
|
|
|
},
|
|
// 保存提交
|
|
submitFun(){
|
|
console.log(this.form,'====this.form');
|
|
// 获取form数据
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.alias-wrap ::v-deep .el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
.config-service-price {
|
|
display: flex;
|
|
width: 100%;
|
|
.config-service-left {
|
|
align-items: stretch;
|
|
background: #fff;
|
|
width: 120px;
|
|
transition: all .5s;
|
|
padding: 21px 26px 21px 12px;
|
|
.menu-top{
|
|
color: #1E2226;
|
|
padding: 11px 0;
|
|
}
|
|
.menu-top-img{
|
|
width: 18px;
|
|
}
|
|
.menu-item-name{
|
|
width: 20px;
|
|
height: 14px;
|
|
}
|
|
.menu-item{
|
|
letter-spacing: 0.08em;
|
|
color: #8A9099;
|
|
padding: 9px 0px;
|
|
span{
|
|
max-width: 89px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.menu-active{
|
|
color: #006AFF;
|
|
}
|
|
}
|
|
|
|
.config-service-right {
|
|
align-items: stretch;
|
|
width: calc(100% - 158px);
|
|
}
|
|
.content1{
|
|
margin: 12px 0;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (min-width: 1441px) {
|
|
.config-service-right{
|
|
width: calc(100% - 218px);
|
|
}
|
|
.config-service-price .config-service-left{
|
|
width: 188px !important;
|
|
transition: all .5s;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
}
|
|
.pageFooter{
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 16px 0px;
|
|
opacity: 1;
|
|
background: #FFFFFF;
|
|
/* 蓝色阴影_常规 */
|
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
|
|
}
|
|
</style>
|