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.
845 lines
31 KiB
845 lines
31 KiB
<template>
|
|
<div class="serviceAdd-wrap">
|
|
<div class="ml12 mr12 overFlow-wrap">
|
|
<PromptText text="如何添加服务？" :type="1" class="add-info">
|
|
<template #next_desc>
|
|
<div class="alert-more flex gap12" :class="alertShow ? '' : 'alert-more-hide'" @click="handleAlert">
|
|
<div v-if="alertShow">收起</div>
|
|
<div v-else>展开</div>
|
|
<img src="@/assets/site/show_and_hide.png" alt="">
|
|
</div>
|
|
</template>
|
|
<template #desc>
|
|
<div class="alert-more-info mt12" v-show="alertShow">
|
|
<div class="flex mb10 gap10">1.点击左侧导航进入设置页，开启所需服务（<img src="@/assets/site/open_success_menu.svg"
|
|
alt="">图标表示已开启）。</div>
|
|
<div class="flex mb10 gap10">2.可开启多个服务。</div>
|
|
<div class="flex gap10">3.全部开启后，点击底部 [添加完成] 。</div>
|
|
</div>
|
|
</template>
|
|
</PromptText>
|
|
|
|
<div class="service-title flex-between" v-if="serviceAddInfo">
|
|
<div class="service-name flex gap12">
|
|
<img src="@/assets/site/step_success.png" alt="">
|
|
<span>{{ serviceAddInfo.ver_name }}_{{ serviceAddInfo.type_name }}</span>
|
|
</div>
|
|
<div class="service-status" v-if="serviceInfo.status">
|
|
<span class="service-status-close" @click="handleDelServiceClick">关闭服务</span>
|
|
<span class="service-status-desc">已开启</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 网页售价 -->
|
|
<div class="flex-common mb12 price-set" v-if="serviceAddInfo.web_price_set">
|
|
<el-form class="el-row demo-ruleForm" ref="formRef">
|
|
<div class="price-top">
|
|
<span class="title">网页支付与售价</span>
|
|
<span class="desc"
|
|
v-if="serviceAddInfo.supply_price">供货价：{{ serviceAddInfo.supply_price }}{{ serviceAddInfo.supply_price_warning }}</span>
|
|
</div>
|
|
|
|
<PromptText v-if="serviceAddInfo.prompt.title" :text='serviceAddInfo.prompt.title' :type="1"
|
|
class="mb12">
|
|
<template #desc v-if="serviceAddInfo.prompt.content">
|
|
<div class="alert-more-info mt12">
|
|
<div class="flex mb10" v-for="item in serviceAddInfo.prompt.content" :key="item">
|
|
{{ item }}</div>
|
|
</div>
|
|
</template>
|
|
</PromptText>
|
|
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<div class="flex-between mb12">
|
|
<div>售价管理</div>
|
|
</div>
|
|
<div class="flex-between">
|
|
<div class="short-width">
|
|
<GuipSelect width="100%" v-model="serviceInfo.unit" placeholder="选择计费方式"
|
|
:options="serviceAddInfo.set_units" />
|
|
</div>
|
|
<div class="short-width" v-if="serviceInfo.unit > 0">
|
|
<GuipInput v-if="serviceInfo.unit === '1'" v-model="serviceInfo.price" width="100%"
|
|
ref="GuipInput" unit="元/篇"></GuipInput>
|
|
<GuipInput v-if="serviceInfo.unit === '2'" v-model="serviceInfo.price" width="100%"
|
|
ref="GuipInput" unit="元/页"></GuipInput>
|
|
</div>
|
|
</div>
|
|
<div class="flex-between mt12" v-if="serviceInfo.unit === '0'">
|
|
<div class="short-width">
|
|
<GuipInput width="100%" v-model="serviceInfo.price" ref="GuipInput" unit="元">
|
|
</GuipInput>
|
|
</div>
|
|
<div class="short-width">
|
|
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" unit="字符">
|
|
</GuipInput>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-if="serviceAddInfo.base_set">
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<div class="flex-between mb12">
|
|
<div>起售价格（选填）</div>
|
|
<div>超过设定字符，按照正常售价收取</div>
|
|
</div>
|
|
<div class="flex-between">
|
|
<div class="third-width">
|
|
<GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput"
|
|
unit="字符内"></GuipInput>
|
|
</div>
|
|
<div class="w85">
|
|
用户需支付
|
|
</div>
|
|
<div class="third-width">
|
|
<GuipInput width="100%" v-model="serviceInfo.base_unit_price" ref="GuipInput"
|
|
unit="元"></GuipInput>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="flex service-opt mt12">
|
|
<GuipButton type="ignore" @click="resetPrice">重置</GuipButton>
|
|
<GuipButton type="primary" @click="savePrice" size="medium">保存</GuipButton>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 店铺售价-->
|
|
<div class="flex-common mb12 price-set" v-if="serviceAddInfo.shop_price_set">
|
|
<el-form class="el-row demo-ruleForm" ref="formRef">
|
|
<div class="price-top">
|
|
<span class="title">{{ serviceAddInfo.shop_name }}支付管理</span>
|
|
<span class="desc"></span>
|
|
</div>
|
|
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<div class="flex-between mb12">
|
|
<div>售价管理</div>
|
|
</div>
|
|
<div class="flex-between">
|
|
<div class="short-width">
|
|
<GuipSelect width="100%" v-model="serviceInfo.unit" placeholder="选择计费方式"
|
|
:options="serviceAddInfo.set_units" />
|
|
</div>
|
|
<div class="short-width" v-if="serviceInfo.unit > 0">
|
|
<GuipInput v-if="serviceInfo.unit === '1'" v-model="serviceAddInfo.unit_piece"
|
|
width="100%" ref="GuipInput" unit="件/篇"></GuipInput>
|
|
<GuipInput v-if="serviceInfo.unit === '2'" v-model="serviceAddInfo.unit_piece"
|
|
width="100%" ref="GuipInput" unit="件/页"></GuipInput>
|
|
</div>
|
|
</div>
|
|
<div class="flex-between mt12" v-if="serviceInfo.unit === '0'">
|
|
<div class="short-width">
|
|
<GuipInput width="100%" v-model="serviceInfo.unit_piece" ref="GuipInput" unit="件">
|
|
</GuipInput>
|
|
</div>
|
|
<div class="short-width">
|
|
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" unit="字符">
|
|
</GuipInput>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-if="serviceAddInfo.base_set">
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<div class="flex-between mb12">
|
|
<div>起售价格（选填）</div>
|
|
<div>超过设定字符，按照正常售价收取</div>
|
|
</div>
|
|
<div class="flex-between">
|
|
<div class="third-width">
|
|
<GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput"
|
|
unit="字符内"></GuipInput>
|
|
</div>
|
|
<div class="w85">
|
|
用户需支付
|
|
</div>
|
|
<div class="third-width">
|
|
<GuipInput width="100%" v-model="serviceInfo.base_unit_piece" ref="GuipInput"
|
|
unit="件"></GuipInput>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="flex service-opt mt12">
|
|
<GuipButton type="ignore" @click="resetShopPrice">重置</GuipButton>
|
|
<GuipButton type="primary" @click="saveShopPrice()" size="medium">保存</GuipButton>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 店铺商品绑定-->
|
|
<div class="flex-common mb12 price-set" v-if="serviceAddInfo.exists_shop_pay">
|
|
<el-form class="el-row demo-ruleForm" ref="formRef">
|
|
<div class="price-top">
|
|
<span class="title">关联电商商品</span>
|
|
<span class="desc">必须关联，且确保服务与{{ serviceAddInfo.shop_name }}电商商品一致</span>
|
|
</div>
|
|
<div class="flex-wrap" @click="bindGoods">
|
|
<div class="flex-left bind-button gap12">
|
|
<img src="@/assets/addIcon.svg" alt="">
|
|
<span>添加宝贝</span>
|
|
</div>
|
|
</div>
|
|
<div class="bind-list" v-if="bindList">
|
|
<div class="bind-item" v-for="(row, key) in bindList" :key="key">
|
|
<img :src="row.pic_url ? row.pic_url : require('@/assets/site/invalid.png')" alt="">
|
|
<div class="bind-goods-info">
|
|
<div class="bind-goods-title"><el-link :href="row.link"
|
|
target="_blank">{{ row.title }}</el-link>
|
|
</div>
|
|
<div class="flex-between gap12">
|
|
<div class="flex gap12">
|
|
<span v-if="row.price">￥{{ row.price }}</span>
|
|
<span v-if="row.sec_title">{{ row.sec_title }}</span>
|
|
</div>
|
|
<div class="flex gap12">
|
|
<span class="bind-btn bind-delete"
|
|
@click="handleDelBindClick(row, key)">删除</span>
|
|
<span class="bind-btn"
|
|
:class="row.is_default === '1' ? 'bind-default-active' : 'bind-default'"
|
|
@click="handleDefaultConfirm(row.id)">默认商品</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
|
|
<bindGoods :showBind="showBind" :uid="uid" :type="type" :pati="pati" :pageCode="pageCode"
|
|
@handleBind="handleBind">
|
|
</bindGoods>
|
|
|
|
<GuipDialog :dialogVisible="dialogDelBindConfim" title="提示" :show-close-button="false"
|
|
@confirm="handleDelBindConfirm" @cancel="handleDelBindCancel">
|
|
您确定要删除吗？删除后所有绑定都会删除
|
|
</GuipDialog>
|
|
</div>
|
|
|
|
<GuipDialog :dialogVisible="dialogDelServiceConfim" title="提示" :show-close-button="false"
|
|
@confirm="handleDelServiceConfirm" @cancel="handleDelServiceCancel">
|
|
确定要移除服务吗?
|
|
</GuipDialog>
|
|
|
|
</div>
|
|
<div class="register-btns">
|
|
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">添加完成
|
|
</GuipButton>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import store from '@/store';
|
|
import { mapState } from 'vuex';
|
|
import GuipButton from "@/components/GuipButton.vue";
|
|
import PromptText from "@/components/PromptText.vue";
|
|
import GuipSelect from "@/components/GuipSelect.vue";
|
|
import GuipInput from "@/components/GuipInput.vue";
|
|
import bindGoods from "@/components/bindGoods.vue";
|
|
import GuipDialog from "@/components/GuipDialog.vue";
|
|
|
|
export default {
|
|
name: 'siteServiceAdd',
|
|
props: [''],
|
|
components: {
|
|
GuipDialog,
|
|
GuipInput,
|
|
GuipSelect,
|
|
PromptText,
|
|
GuipButton,
|
|
bindGoods,
|
|
},
|
|
data() {
|
|
return {
|
|
// AUTH
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
|
|
uid: 0,
|
|
type: 0,
|
|
prodid: 0,
|
|
serviceAddInfo: {},
|
|
serviceInfo: {},
|
|
bindList: [],
|
|
alertShow: true,
|
|
menuList: {},
|
|
siteAddUrl: '/agent/siteAdd',
|
|
showBind: false,
|
|
pati: '',
|
|
pageCode: '',
|
|
dialogDelBindConfim: false,
|
|
delRow: {},
|
|
dialogDelServiceConfim: false,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
watch: {
|
|
'$store.state.currentMenuItem'(newVal) {
|
|
this.type = newVal.type
|
|
this.getServiceAddInfo();
|
|
},
|
|
},
|
|
created() {
|
|
if (!this.$route.query.uid && !this.$route.query.prodid) {
|
|
this.$message.error('非法请求');
|
|
this.$router.push('/agent/siteAdd')
|
|
}
|
|
this.uid = this.$route.query.uid
|
|
this.prodid = this.$route.query.prodid
|
|
|
|
this.loadPddSDK()
|
|
},
|
|
mounted() {
|
|
store.commit('SET_PAGETITLE', '站点信息');
|
|
this.getAddServiceList();
|
|
},
|
|
methods: {
|
|
handleAlert() {
|
|
this.alertShow = !this.alertShow
|
|
},
|
|
//获得左侧菜单导航
|
|
getAddServiceList() {
|
|
const that = this
|
|
that.$http('POST', '/agentnew/ajax_get_service_add_list', {
|
|
uid: that.uid,
|
|
prodid: that.prodid,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
that.$nextTick(() => {
|
|
that.menuList = response.data
|
|
store.commit('SET_SECOND_MENU', response.data);
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
//获得要添加的服务信息
|
|
getServiceAddInfo() {
|
|
const that = this
|
|
that.$http('POST', '/agentnew/ajax_get_service_add_info', {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if (response.status) {
|
|
that.$nextTick(() => {
|
|
that.serviceAddInfo = response.data
|
|
//拼多多渠道查询商品所需参数初始化
|
|
if (that.serviceAddInfo.shop_name === '拼多多') this.initPddParam(that.uid)
|
|
//设置默认计费方式
|
|
that.serviceInfo.unit = that.serviceAddInfo.unit
|
|
//查询是否添加了此服务
|
|
that.getServiceInfo()
|
|
|
|
store.commit('SET_BREADRIGHTTEXT', that.serviceAddInfo.site_short_name);
|
|
})
|
|
return true
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
//查询是否添加了此服务
|
|
getServiceInfo() {
|
|
const that = this
|
|
that.serviceInfo = {}
|
|
that.$http('POST', '/agentnew/ajax_get_service_info', {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
that.serviceInfo.status = false
|
|
if (response.status && response.data) {
|
|
that.$nextTick(() => {
|
|
that.serviceInfo = response.data.service_info
|
|
that.serviceInfo.status = true
|
|
})
|
|
that.getServiceBindGoods()
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
//查询绑定的宝贝
|
|
getServiceBindGoods() {
|
|
const that = this
|
|
that.$http('POST', '/agentnew/ajax_get_service_bind_goods', {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if (response.status && response.data) {
|
|
that.$nextTick(() => {
|
|
that.bindList = response.data
|
|
})
|
|
}
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
handleDelServiceClick() {
|
|
this.dialogDelServiceConfim = true
|
|
},
|
|
handleDelServiceCancel() {
|
|
this.dialogDelServiceConfim = false
|
|
},
|
|
handleDelServiceConfirm() {
|
|
const that = this
|
|
this.dialogDelServiceConfim = false
|
|
this.$http('POST', '/agentnew/ajax_del_service', {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if (response.status) {
|
|
that.$message.success('删除成功');
|
|
this.$nextTick(() => {
|
|
that.serviceInfo = {}
|
|
that.setMenuList(that.type, false)
|
|
})
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
resetPrice() {
|
|
this.serviceInfo.price = ''
|
|
this.serviceInfo.unit_num = ''
|
|
this.serviceInfo.b_unit_price = ''
|
|
this.serviceInfo.b_unit_num = ''
|
|
},
|
|
savePrice() {
|
|
const that = this
|
|
this.$http('POST', "/agentnew/ajax_set_service_price", {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
unit_num: that.serviceInfo.unit_num,
|
|
unit_price: that.serviceInfo.price,
|
|
b_unit_num: that.serviceInfo.base_unit_num,
|
|
b_unit_price: that.serviceInfo.base_unit_price,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if (response.status) {
|
|
if (that.serviceInfo.status === false) {
|
|
that.serviceInfo.status = true
|
|
that.setMenuList(that.type, true)
|
|
}
|
|
that.$message.success('保存成功');
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
resetShopPrice() {
|
|
this.serviceInfo.unit_piece = ''
|
|
this.serviceInfo.unit_num = ''
|
|
this.serviceInfo.b_unit_piece = ''
|
|
this.serviceInfo.b_unit_num = ''
|
|
},
|
|
saveShopPrice() {
|
|
const that = this
|
|
this.$http('POST', "/agentnew/ajax_set_service_price", {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
unit_num: that.serviceInfo.unit_num,
|
|
unit_piece: that.serviceInfo.unit_piece,
|
|
b_unit_num: that.serviceInfo.base_unit_num,
|
|
b_unit_piece: that.serviceInfo.base_unit_piece,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if (response.status) {
|
|
if (that.serviceInfo.status === false) {
|
|
that.serviceInfo.status = true
|
|
that.setMenuList(that.type, true)
|
|
}
|
|
that.$message.success('保存成功');
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
setMenuList(type, status) {
|
|
Object.values(this.menuList).forEach((item) => {
|
|
let ver_select = false
|
|
item.list.forEach((item1) => {
|
|
if (item1.type === type) item1.is_select = status
|
|
if (item1.is_select === true) ver_select = true
|
|
})
|
|
|
|
if (ver_select) item.is_select = true
|
|
})
|
|
store.commit('SET_SECOND_MENU', this.menuList);
|
|
},
|
|
//------绑定相关 start------
|
|
bindGoods() {
|
|
this.showBind = true
|
|
},
|
|
handleBind(bindRes) {
|
|
this.showBind = false
|
|
if (bindRes) this.getServiceBindGoods()
|
|
},
|
|
loadPddSDK() {
|
|
const script = document.createElement('script');
|
|
script.src = 'https://pfile.pddpic.com/galerie-go/open_sdk/pc.202102201613.js';
|
|
document.head.appendChild(script);
|
|
},
|
|
async getPddPageCode(uid) {
|
|
const that = this
|
|
return await that.$http('POST', '/agentnew/ajax_get_pdd_page_code', {
|
|
uid: uid,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
return response.data
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
async initPddParam(uid) {
|
|
if (typeof window.PDD_OPEN_init === 'function') {
|
|
this.pageCode = await this.getPddPageCode(uid)
|
|
|
|
await window.PDD_OPEN_init({ code: this.pageCode })
|
|
this.pati = await window.PDD_OPEN_getPati()
|
|
} else {
|
|
console.error('PDD_OPEN_init 不存在，SDK 未正确加载');
|
|
}
|
|
},
|
|
handleDelBindClick(row, index) {
|
|
this.dialogDelBindConfim = true
|
|
this.delRow.index = index
|
|
this.delRow.row = row
|
|
},
|
|
handleDelBindCancel() {
|
|
this.dialogDelBindConfim = false
|
|
},
|
|
handleDelBindConfirm() {
|
|
const that = this
|
|
this.dialogDelBindConfim = false
|
|
this.$http('POST', '/agentnew/ajax_del_bind_service_goods', {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
numiid: that.delRow.row.num_iid,
|
|
skuid: that.delRow.row.sku_id,
|
|
paytype: that.delRow.row.pay_type,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if (response.status) {
|
|
that.$message.success('删除成功');
|
|
this.$nextTick(() => {
|
|
that.bindList.splice(that.delRow.index, 1);
|
|
})
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
handleDefaultConfirm(id) {
|
|
const that = this
|
|
this.$http('POST', '/agentnew/ajax_default_bind_setting', {
|
|
uid: that.uid,
|
|
type: that.type,
|
|
id: id,
|
|
}, {
|
|
headers: {
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
if (response.status) {
|
|
that.$message.success('设置成功');
|
|
that.bindList.forEach((item) => {
|
|
item.is_default = '0'
|
|
if (item.id === id) item.is_default = '1'
|
|
});
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
//------绑定相关 end------
|
|
jumpStep() {
|
|
this.$router.push(this.siteAddUrl + '?uid=' + this.uid)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.serviceAdd-wrap{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.overFlow-wrap{
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
.pb80 {
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
.ml12 {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.mr12 {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.mb10 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.w85 {
|
|
width: 85px;
|
|
}
|
|
|
|
.add-info {
|
|
.alert-more {
|
|
color: #006AFF;
|
|
letter-spacing: 0.08em;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
/* 标准语法 */
|
|
-webkit-user-select: none;
|
|
/* Safari */
|
|
-moz-user-select: none;
|
|
/* Firefox */
|
|
-ms-user-select: none;
|
|
/* IE/Edge */
|
|
}
|
|
|
|
.alert-more-hide {
|
|
img {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.alert-more-info {
|
|
color: #1E2226;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
::v-deep .prompt-desc {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #1E2226;
|
|
}
|
|
}
|
|
|
|
|
|
.service-title {
|
|
margin: 20px 0;
|
|
letter-spacing: 0.08em;
|
|
|
|
.service-name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #1E2226;
|
|
}
|
|
|
|
.service-status {
|
|
.service-status-desc {
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 194, 97, 0.6);
|
|
color: #0DAF49;
|
|
padding: 2px 10px 2px 32px;
|
|
background-image: url(@/assets/site/open_success.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: 10px 50%;
|
|
background-size: 16px 16px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.service-status-close {
|
|
cursor: pointer;
|
|
color: #8A9099;
|
|
background-image: url(@/assets/site/form_close.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: 0 50%;
|
|
background-size: 16px 16px;
|
|
padding: 2px 10px 2px 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.price-set {
|
|
letter-spacing: 0.08em;
|
|
|
|
.price-top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
|
|
.title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #1E2226;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 14px;
|
|
color: #626573;
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.third-width {
|
|
width: calc((100% - 109px) / 2);
|
|
}
|
|
}
|
|
|
|
.service-opt {
|
|
justify-content: right;
|
|
}
|
|
|
|
.bind-button {
|
|
padding: 15px 20px;
|
|
border-radius: 4px;
|
|
border: 1px dashed #BABDC2;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.bind-list {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
letter-spacing: 0.08em;
|
|
flex-wrap: wrap;
|
|
margin-top: 32px;
|
|
|
|
.bind-item {
|
|
display: flex;
|
|
gap: 22px;
|
|
justify-content: space-between;
|
|
width: calc((100% - 78px) / 2);
|
|
height: 80px;
|
|
border-radius: 8px;
|
|
background: #FAFAFA;
|
|
padding: 16px;
|
|
color: #626573;
|
|
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.bind-goods-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: calc(100% - 80px);
|
|
|
|
.bind-goods-title {
|
|
text-align: left;
|
|
|
|
a {
|
|
color: #1E2226;
|
|
}
|
|
|
|
a:hover {
|
|
color: #006AFF;
|
|
}
|
|
}
|
|
|
|
span {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.bind-btn {
|
|
cursor: pointer;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 50%;
|
|
background-size: 16px 16px;
|
|
padding: 2px 0 2px 22px;
|
|
}
|
|
|
|
.bind-delete {
|
|
color: #626573;
|
|
background-image: url(@/assets/site/delete.svg);
|
|
}
|
|
|
|
.bind-default {
|
|
color: #626573;
|
|
background-image: url(@/assets/site/star-icon.svg);
|
|
}
|
|
|
|
.bind-default-active {
|
|
color: #006AFF;
|
|
background-image: url(@/assets/site/star-active-icon.svg);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.register-btns {
|
|
// position: absolute;
|
|
// left: 0;
|
|
// bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
background: #FFFFFF;
|
|
padding: 16px 0px;
|
|
/* 蓝色阴影_常规 */
|
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
|
|
z-index: 999;
|
|
|
|
button:nth-child(1) {
|
|
margin-right: 56px;
|
|
}
|
|
}
|
|
</style>
|