zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

服务列表页

pull/73/head
pengda 4 days ago
parent
bcb7128f6f
commit
01d0b357c9
5 changed files with 431 additions and 460 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B

56
src/components/paymentMethod.vue
View File

@ -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
View File

@ -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
View File

@ -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>温馨提示：提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。</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>温馨提示：报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。</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']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
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
View File

@ -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; /* 关键属性 */

Write Preview
Loading…
Cancel
Save