rainbro 3 days ago
parent
commit
8e3f1c2d97
  1. BIN
      src/assets/register/card_pay.png
  2. 56
      src/components/paymentMethod.vue
  3. 4
      src/views/agent/siteServiceAdd.vue
  4. 760
      src/views/agent/siteServiceEdit.vue
  5. 71
      src/views/agent/siteServiceList.vue

BIN
src/assets/register/card_pay.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 413 B

56
src/components/paymentMethod.vue

@ -1,17 +1,15 @@
<template>
<div class="payment-wrap">
<draggable v-model="list" @start="drag=true" @end="onEnd" :move="checkMove" handle=".drag-handle" >
<div class="payment-item" v-for="item in list" :key="item.name">
<dl>
<dt class="drag-handle">
<img v-if="item.pay_type == '1'" src="@/assets/register/jingdong_pay.png" alt="">
<img v-if="item.pay_type == '2'" src="@/assets/register/weixin_pay.png" alt="">
<img v-if="item.pay_type == '3'" src="@/assets/register/zhifubao_pay.png" alt="">
<img v-if="item.pay_type == '4'" src="@/assets/register/taobao_pay.png" alt="">
</dt>
<div class="payment-item" v-for="(item, index) in list" :key="item.name">
<dl :class="index === list.length - 1 ? '' : 'drag-handle'">
<img v-if="item.pay_type == '1'" src="@/assets/register/card_pay.png" alt="">
<img v-if="item.pay_type == '2'" src="@/assets/register/weixin_pay.png" alt="">
<img v-if="item.pay_type == '3'" src="@/assets/register/zhifubao_pay.png" alt="">
<img v-if="item.pay_type == '4'" src="@/assets/register/taobao_pay.png" alt="">
<dd>
<p>{{ item.name }}</p>
<p>{{ item.account }}</p>
<p class="pay-name">{{ item.name }}</p>
<p v-if="item.account" class="pay-account">{{ item.account }}</p>
</dd>
</dl>
<el-form>
@ -86,33 +84,39 @@ export default {
<style lang="scss">
.payment-wrap{
.payment-item{
padding: 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #DFE2E6;
dl{
display: flex;
align-items: center;
margin: 0;
}
dt img{
width: 32px;
height: 32px;
dl img{
width: 22px;
}
dd{
text-align: left;
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;
font-variation-settings: "opsz" auto;
letter-spacing: 0.08em;
.pay-name{
font-size: 14px;
line-height: 18px;
color: #1E2226;
}
.pay-account{
font-size: 12px;
line-height: 13px;
margin-top: 6px;
color: #8A9099;
}
}
dd p:first-child{
font-size: 14px;
line-height: 18px;
margin-bottom: 6px;
color: #1E2226;
.el-form-item{
margin: 0;
}
}
.drag-handle {

4
src/views/agent/siteServiceAdd.vue

@ -30,7 +30,7 @@
<GuipRadio label="计费方式" v-model="row.default_set" :options="methodOptions" @change="methodChange()"/>
</div>
<div class="service-info-item">
<GuipInput v-model="row.unit_price" label="售价管理" ref="GuipInput" width="180px" unit="元"></GuipInput>
<GuipInput v-model="row.price" label="售价管理" ref="GuipInput" width="180px" unit="元"></GuipInput>
<template v-if="row.default_set == 0">
<span class="mr12"></span>
<GuipInput v-model="row.unit_num" ref="GuipInput" width="180px" unit="字符"></GuipInput>
@ -139,7 +139,7 @@ export default {
uid: that.uid,
type: row.type,
unit_num: row.unit_num,
unit_price: row.unit_price,
unit_price: row.price,
// unit_piece: row.unit_piece,
b_unit_num: row.b_unit_num,
b_unit_price: row.b_unit_price,

760
src/views/agent/siteServiceEdit.vue

@ -1,406 +1,323 @@
<template>
<div class="main-content12">
<!-- page header -->
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
<!-- page content -->
<div class="site-setting-wrap min-flex-right">
<div class="siteMessage flex-common" id="siteMessage1">
<h3>站点信息</h3>
<el-form>
<div class="flex-wrap">
<div class="flex-left">
<GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10"
:showWordLimit="true" desc="一个站点对应一个销售渠道,定义好名字好区分" v-model="siteInfo.short_name"
prop="short_name" placeholder="仅自己区分站点销售渠道,客户看不到" />
<!-- 收款方式-->
<div class="flex-common payment-area">
<div class="notice-text">
<img class="notice-icon" src="@/assets/site/siteSemInfo_Icon.svg" alt="">
<span>按住左侧图标上下拖动可进行排序平台卡券只能放到最后</span>
</div>
<PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
</div>
<GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
v-model="siteInfo.phone_num" prop="company_phone" placeholder="非必填" />
</div>
<div class="flex-line"></div>
<div class="flex-right">
<GuipTextarea v-model="siteInfo.company_name" label="详细介绍" column="column"
prop="doctor_detail" width="100%" height="90px" placeholder="请输入描述内容"
desc="在站点首页底部“关于我们”展示" show-word-limit />
</div>
<!-- 提交页seo-->
<div class="flex-common">
<div class="warning-text">
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
<span>温馨提示提交页标题不允许使用知网pmlcamlcsmlc等关键词</span>
</div>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="提交页标题(T:title)">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="提交页关键词(K:keyword)">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="提交页描述(D:description)">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
</el-form>
<GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="updateSiteInfo()" />
</div>
</el-form>
</div>
<!-- 报告页seo-->
<div class="flex-common">
<div class="warning-text">
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
<span>温馨提示报告页标题不允许使用知网pmlcamlcsmlc等关键词</span>
</div>
<div class="siteMessage flex-common" id="siteMessage2">
<h3>站点信息</h3>
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="域名来源" required="true">
<GuipRadio slot="formDom" v-model="siteForm1.domain_source" :options="domain_source"
prop="domain_source" @change="domain_radioChange" />
</GuipFormItem>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<!-- <GuipFormItem column="column" label="域名设置" required="true">
<GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母">
<span slot="appendshow">.chachongz.com</span>
</GuipInput>
</GuipFormItem> -->
<GuipFormItem column="column" class="combo-formItem" label="域名设置" required="true">
<div slot="formDom" class="self-drop-wrap flex" style="width: 100%;">
<GuipInput style="width: 60%;" v-model="siteForm1.domain_set"
placeholder="仅支持数字、字母">
</GuipInput>
<div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{
siteForm1.domainSuffix }}</div>
</div>
<CustomDropdown slot="formDom" ref="dropDomain" width="100%"
v-model="siteForm1.domainSuffix" :options="domainOptions" @change="changeSelectIp"
placeholder="请选择">
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>添加新域名</b>
<p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
<p class="ft12">如果暂时未准备好可先选用平台免费域名随时支持域名修改 </p>
</div>
<div class="right">
<GuipButton size="form">前往绑定</GuipButton>
</div>
</div>
</template>
<!-- 自定义下拉选项 -->
<!-- <template #item="{ item }">
<div class="flex-between">
<div class="left">
<p class="one">{{ item.label }}</p>
</div>
<div class="right">
<img v-if="siteForm1.domainSuffix == item.value"
src="@/assets/register/drop-selected.svg" alt="">
</div>
</div>
</template> -->
</CustomDropdown>
</GuipFormItem>
</div>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="报告页标题(T:title)">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="报告页关键词(K:keyword)">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="报告页描述(D:description)">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<!-- 展示设置-->
<div class="flex-common">
<h3 class="mb16">基础信息</h3>
<div class="warning-text">
<img class="warning-icon" src="@/assets/site/info_filled.svg" alt="">
<span>温馨提示服务别名首页服务广告词和首页服务描述不允许使用"知网""pmlc""amlc""smlc"等关键词 </span>
</div>
<div class="siteMessage flex-common" id="siteMessage3">
<h3>店铺收款</h3>
<el-form :model="siteForm2" ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24">
<div slot="formLeft" class="form-top-icon">
<img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;"
alt=""><span>微信收款</span>
</div>
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay"
:options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
:options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
<!-- 自定义触发按钮 -->
<template #trigger>
<span v-if="selectedItemWeixin"
style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
select_placeholder_weixin ? select_placeholder_weixin :
selectedItemWeixin.desc }}</span>
<span v-else>请选择</span>
</template>
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>绑定新微信收款</b>
<p class="one">需要使用您公司的微信支付</p>
<p>需在微信商户平台-产品中心开通Native支付</p>
</div>
<div class="right">
<GuipButton type="primary" size="medium">前往绑定</GuipButton>
</div>
</div>
</template>
<!-- 自定义下拉选项 -->
<template #item="{ item }">
<div class="flex-between">
<div class="left">
<p class="one">{{ item.label }}</p>
<p>{{ item.desc }}</p>
</div>
<div class="right">
<img v-if="selectedItem.value == item.value"
src="@/assets/register/drop-selected.svg" alt="">
</div>
</div>
</template>
</CustomDropdown>
</GuipFormItem>
<GuipFormItem column="column">
<div slot="formLeft" class="form-top-icon">
<img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;"
alt=""><span>支付宝收款</span>
</div>
<!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay"
:options="options_zhifubao" placeholder="未绑定支付宝收款" /> -->
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay"
:options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
:options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
<!-- 自定义触发按钮 -->
<template #trigger>
<span v-if="selectedItemWeixin"
style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
select_placeholder_weixin ? select_placeholder_weixin :
selectedItemWeixin.desc }}</span>
<span v-else>请选择</span>
</template>
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>绑定新支付宝收款</b>
<p class="one">需要使用您公司的支付宝支付</p>
<p>需在支付宝商户平台-产品中心开通Native支付</p>
</div>
<div class="right">
<GuipButton type="primary" size="medium">前往绑定</GuipButton>
</div>
</div>
</template>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="服务别名">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内" desc="展示在用户端的服务名称">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="服务广告词">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议20字内" desc="用来简短概括的解释服务">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="服务描述">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
desc="用来详细的解释服务">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="服务Logo">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<!-- 自定义下拉选项 -->
<template #item="{ item }">
<div class="flex-between">
<div class="left">
<p class="one">{{ item.label }}</p>
<p>{{ item.desc }}</p>
</div>
<div class="right">
<img v-if="selectedItem.value == item.value"
src="@/assets/register/drop-selected.svg" alt="">
</div>
</div>
</template>
</CustomDropdown>
</GuipFormItem>
<div class="flex-common">
<h3>展示开关</h3>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<div class="card-item">
<div class="card-info">
<p class="card-name">首页服务显示</p>
<p class="card-desc">控制首页是否显示本服务</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<!-- <div>{{ input1 }}</div> -->
<div class="addStore flex">
<div></div>
添加其他收款方式
<div class="card-item">
<div class="card-info">
<p class="card-name">检测页价格展示</p>
<p class="card-desc">本服务检测页面是否展示价格</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
<div class="flex-line "></div>
<div class="flex-right">
<div class="card-item">
<div class="card-info">
<p class="card-name">首页推荐位</p>
<p class="card-desc">开启即上推荐位</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
</div>
</div>
</el-form>
</div>
<!-- 页面品牌和颜色-->
<div class="flex-common">
<h3>PC端页面品牌</h3>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="提交页Logo上传">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="报告页Logo上传">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<div class="flex-common">
<h3 class="mb16">页面色彩</h3>
<div class="notice-text">
<img class="notice-icon" src="@/assets/site/siteSemInfo_Icon.svg" alt="">
<span>操作说明点击色块可打开调色盘改色也可直接更改6位色值数据进行改色</span>
</div>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
aaa
</div>
<div class="flex-line "></div>
<div class="flex-right">
bbb
</div>
</div>
</el-form>
</div>
<!-- 自定义导航-->
<div class="flex-common">
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="首页链接">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
</GuipInput>
<el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="检测服务链接">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
</GuipInput>
<el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
</div>
</div>
</template>
<script>
// import GuipInput from '@/components/GuipInput.vue';
import store from '@/store';
import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipTextarea from '@/components/GuipTextarea.vue';
import GuipRadio from '@/components/GuipRadio.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
// import {setHighActive} from '@/utils/common';
import PaymentMethod from "@/components/paymentMethod.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipInput from "@/components/GuipInput.vue";
import HoverButton from "@/components/HoverButton.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
export default {
//
name: '',
props: [''],
components: {
GuipRadio,
GuipFormItem,
GuipInput,
GuipTextarea,
CustomDropdown,
GuipSwitch,
HoverButton,
GuipInput, GuipFormItem,
GuipButton,
GroupFormBtns
PaymentMethod
},
data() {
return {
// AUTH
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
//
siteInfo: {
short_name: '',
company_name: '',
phone_num: '',
},
domainOptions: [
{
value: '.chachongz.com',
label: '.chachongz.com'
},
{
value: '.turnitin.org.cn',
label: '.turnitin.org.cn'
},
{
value: '.jishu.chachongz.com',
label: '.jishu.chachongz.com'
},
],
siteForm: {
company_name: '',
company_address: '',
company_phone: '',
site_alias: '',
},
// siteFormrules: {
// site_alias: [
// { required: true, message: '', trigger: 'blur' }
// ]
// },
siteForm1: {
domain_set: '',
domainSuffix:'.chachongz.com',
domain_source: '平台免费域名',
},
siteForm2: {
zhifubao_pay: '',
weixin_pay: '',
},
siteFormrules1: {
domain_source: [
{ required: true, message: '请输入站点简称', trigger: 'blur' }
]
},
domain_source: [
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
],
options_weixin_null: {
label: '暂无收款账号',
value: '暂时没有收款账号,我想稍后配置',
desc: '暂无收款账号,稍后配置'
uid:0,
type:0,
payList: [],
//
saveBtnStyleObj: {
width: '144px',
height: '46px',
borderRadius: '4px',
background: '#006AFF',
},
select_placeholder_weixin: '暂无收款账号,稍后配置',
selectedItemWeixin: {},//
options_weixin: [],
options_zhifubao: [],
}
},
computed: {
...mapState(['pageTitle']) // VuexshowSidebar
},
created() {
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU', 'siteSettingData');
if(!this.$route.query.uid && !this.$route.query.type) {
this.$message.error('非法请求');
this.$router.push('/agent/siteList')
}
this.uid = this.$route.query.uid;
this.type = this.$route.query.type;
},
mounted() {
store.commit('SET_PAGETITLE', '基本设置');
this.getSiteInfo();
this.getPayList()
},
methods: {
//
toggleDrop(e){
this.$refs.dropDomain.toggleDropdown(e)
},
changeSelectIp(item) {
//
this.selectedItem1 = { ...item };
},
//
getSiteInfo() {
//
getPayList() {
const that = this
that.siteInfo = []
this.$http('POST', '/agentnew/ajax_get_site_info', {
uid: this.$route.query.uid,
}, {
headers: {
that.payList = []
this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
uid: that.uid,
type: that.type,
},{
headers:{
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
that.siteInfo = response.data
that.payList = response.data.paylist
})
}).catch(error => {
console.error(error, 'error')
})
},
updateSiteInfo() {
this.$http('POST', '/agentnew/ajax_update_site_info', {
uid: this.$route.query.uid,
short_name: this.siteInfo.short_name,
company_name: this.siteInfo.company_name,
company_phone: this.siteInfo.phone_num,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
confirmPayment(payList){
this.payList = payList
},
cancleUpdateSiteInfo() {
this.getSiteInfo();
},
changeNormalWeixin() {
},
changeSelectWeixin(item, flag) {
if (flag) {
this.select_placeholder_weixin = this.options_weixin_null.desc;
return
}
this.selectedItem = { ...item };
console.log(this.selectedItem, 'this.selectedItem====');
},
//
domain_radioChange(type) {
console.log(type, '--');
},
onSwitchChange(data) {
console.log(data, '---');
},
submitForm(form) {
console.log(this.$refs[form], '-----');
this.$refs[form].validate((valid) => {
console.log(this[form], '======formxinxi');
if (valid) {
alert('提交成功!');
} else {
return false;
}
});
},
cancelClick() {
console.log('quxiao');
},
confirmClick(type) {
console.log(type, '确认');
}
}
}
</script>
<style lang="scss" scoped>
.mb16{
margin-bottom: 16px;
}
.pageheader {
display: flex;
justify-content: space-between;
/* 关键属性 */
align-items: center;
margin: 16px 0px 16px 0px;
margin: 16px 0 16px 0;
}
.pagetitle {
@ -411,98 +328,109 @@ export default {
color: #1E2226;
margin-top: 8px;
}
.siteMessage {
border-radius: 4px;
transition: all .5s;
border: 1px solid transparent;
.flex-common{
margin-bottom: 12px;
}
.combo-formItem {
::v-deep {
.form-item-bottom {
position: relative;
}
.select-trigger {
background: #F6F7FA;
border-color: transparent;
}
.is-open .select-trigger {
border-color: #006AFF;
}
.notice-text{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #F2F7FF;
border: 1px solid #BFDAFF;
margin-bottom: 32px;
.notice-icon{
width: 16px;
height: 16px;;
margin-right: 8px;
}
span{
color: #1E2226;
letter-spacing: 0.08em;
}
}
.el-input__inner {
border-radius: 2px 0 0 2px;
}
}
.self-drop-wrap {
position: absolute;
z-index: 1;
width: 100%;
}
.appendDrop {
height: 38px;
align-items: center;
border-radius: 0 2px 2px 0;
border: 1px solid #DFE2E6;
border-left-color: transparent;
justify-content: center;
box-sizing: border-box;
padding: 0 30px 0 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:hover {
border: 1px solid #006AFF;
}
}
::v-deep .payment-item{
width: 540px;
height: 95px;
padding: 0 24px;
background: #FAFAFA;
border-radius: 4px;
border: none;
margin-bottom: 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;
// }
.save-button{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
display: flex;
align-items: center;
justify-content: center;
padding: 16px 0;
}
.site-setting-wrap {
width: 100%;
.warning-text{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #FFF1F0;
border: 1px solid #FFA39E;
margin-bottom: 32px;
.warning-icon{
width: 16px;
height: 16px;;
margin-right: 8px;
}
span{
color: #1E2226;
letter-spacing: 0.08em;
}
}
#siteMessage2 {
margin: 12px 0;
::v-deep .form-item-bottom{
text-align: left;
}
.domain-wrap {
.domain-item {
margin-bottom: 10px;
}
.domain-item p:last-child {
padding-left: 23px;
color: #8A9099;
.card-item{
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
background: #FAFAFA;
border-radius: 4px;
border: none;
margin-bottom: 12px;
.card-info{
text-align: left;
margin-left: 12px;
font-variation-settings: "opsz" auto;
letter-spacing: 0.08em;
.card-name{
font-size: 14px;
line-height: 18px;
color: #1E2226;
}
p {
text-align: left;
line-height: 18px;
margin-bottom: 8px;
.card-desc{
font-size: 12px;
line-height: 13px;
margin-top: 12px;
color: #8A9099;
}
}
.domain-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.el-form-item{
margin: 0;
}
}
</style>

71
src/views/agent/siteServiceList.vue

@ -112,14 +112,14 @@
<el-table-column prop="sort_id" label="上首页">
<template slot-scope="scope">
<div class="flex cell_render">
<GuipSwitch :modelValue="scope.row.is_display" active-value="1" inactive-value="0" @change="onSwitchChange(scope.row)"></GuipSwitch>
<GuipSwitch :modelValue="scope.row.is_index_display" active-value="1" inactive-value="0" @change="onSwitchChange(scope.row)"></GuipSwitch>
</div>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<el-link type="primary" :href="serviceEditUrl+'?type='+scope.row.type" target="_blank" class="mr-16">编辑</el-link>
<el-link type="primary" :href="serviceEditUrl+'?uid='+uid+'&type='+scope.row.type" target="_blank" class="mr-16">编辑</el-link>
<el-link type="primary" @click="handleDelClick(scope.row, scope.$index)">删除</el-link>
</template>
</el-table-column>
@ -127,7 +127,11 @@
</GuipTable>
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false" @confirm="handleConfirm"
@cancel="handleCancel">
@cancel="handleCancel" type="center" >
<div class="notice-text">
<img class="notice-icon" src="@/assets/site/siteSemInfo_Icon.svg" alt="">
<span>按住左侧图标上下拖动可进行排序平台卡券只能放到最后</span>
</div>
<PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
</GuipDialog>
@ -371,7 +375,7 @@ export default {
saveEdit(row, type) {
row[type + 'PopoverVisible'] = false; //
if(type == 'price') this.savePrice(row)
if(type == 'sort') this.saveSort(row)
if(type == 'sort') this.saveUpdateInfo(row, true)
},
//
cancelEdit(row, type) {
@ -403,23 +407,21 @@ export default {
this.saveRequest('/agentnew/ajax_set_service_price', obj, row)
},
saveSort(row){
let obj = {}
obj.uid = this.uid
obj.type = row.type
obj.sort_num = row.sort_id
this.saveRequest('/agentnew/ajax_set_service_sort', obj, row)
},
onSwitchChange(row){
row.is_display = row.is_display == "1" ? "0" : "1"
row.is_index_display = row.is_index_display == "1" ? "0" : "1"
this.saveUpdateInfo(row)
},
saveUpdateInfo(row, resort = false){
let obj = {}
obj.uid = this.uid
obj.type = row.type
obj.is_display = row.is_display
this.saveRequest('/agentnew/ajax_set_service_display_index', obj, row)
obj.sort_id = row.sort_id
obj.is_index_display = row.is_index_display
obj.is_display_price = row.is_display_price
obj.is_recommend = row.is_recommend
this.saveRequest('/agentnew/ajax_update_service_show', obj, row, resort)
},
saveRequest(url, obj, row){
saveRequest(url, obj, row, resort = false){
const that = this
this.$http('POST', url, obj,{
headers:{
@ -430,6 +432,9 @@ export default {
that.$message.success('保存成功');
this.$nextTick(() => {
that.$set(that.serviceList, row)
if(resort){
this.sortServiceList()
}
})
return true;
}
@ -438,6 +443,20 @@ export default {
console.error(error, 'error')
})
},
sortServiceList() {
const sortable = this.serviceList
.map((row, i) => ({ row, i }))
.filter(item => item.row.sort_id > 0)
.sort((a, b) => a.row.sort_id - b.row.sort_id);
let i = 0;
this.serviceList = this.serviceList.map(row => {
if (row.sort_id > 0) {
return sortable[i++].row;
}
return row;
});
},
popPayMentModal(row){
this.dialogVisible = true;
this.dialogTitle = row.type_desc + '-收款方式'
@ -555,6 +574,26 @@ export default {
letter-spacing: 0.08em;
}
}
.notice-text{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #F2F7FF;
border: 1px solid #BFDAFF;
margin: 12px 0 24px 0;
.notice-icon{
width: 16px;
height: 16px;;
margin-right: 8px;
}
span{
color: #1E2226;
letter-spacing: 0.08em;
}
}
.pageheader {
display: flex;
justify-content: space-between; /* 关键属性 */

Loading…
Cancel
Save