<template>
|
|
<div class="anchor-pz">
|
|
<div class="prediv">
|
|
<div class="option">
|
|
<div class="pz_head">页面预览</div>
|
|
<el-tabs v-model="type">
|
|
<el-tab-pane label="主界面" name="0"></el-tab-pane>
|
|
<el-tab-pane label="PK台" name="1"></el-tab-pane>
|
|
<el-tab-pane label="商品列表" name="2"></el-tab-pane>
|
|
<el-tab-pane label="搜索效果" name="3"></el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<div class="prediv-content">
|
|
<div class="content h5-preview" :style="contentStyle">
|
|
<div class="pv_banner_wrap">
|
<img :src="topImgUrl" alt="" class="pv_banner_img">
|
<div class="pv_user_bar"><span>主播端</span></div>
|
</div>
|
|
<div class="pv_nav_back" v-if="type !== '0'">‹</div>
|
|
<div class="pv_sticky_header" :style="{ background: previewMainBg }">
|
<div class="pv_submit_row">
|
<div class="pv_submit_btn submit_btn--icon" :style="submitBtnStyle">
|
<img :src="submitBtnIconPreviewUrl" class="pv_submit_icon_img" alt="">
|
<span class="pv_submit_text">提交订单</span>
|
</div>
|
</div>
|
<div
|
class="pv_home_top"
|
:class="{ 'pv_home_top--compact': type === '1' || type === '3' }"
|
:style="homeTopSectionStyle">
|
<div class="pv_order_bar">
|
<div class="pv_order_left">
|
<span class="pv_order_label">用户预算</span>
|
<span class="pv_order_currency">¥</span>
|
<span class="pv_budget_val">603</span>
|
<div class="pv_remain_inline">
|
<span class="pv_order_label">剩余经费</span>
|
<span class="pv_remain_val">¥ 303.00</span>
|
</div>
|
</div>
|
<div class="pv_order_right">
|
<div class="pv_order_no_row">
|
<span class="pv_order_label">订单编号</span>
|
<span class="pv_order_no">260602741600</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="pv_featured" v-if="previewFeaturedDisplay.length">
|
<div class="pv_featured_left">
|
<span class="pv_featured_title">精品优选</span>
|
<span class="pv_featured_sub">实测多维综合评定</span>
|
</div>
|
<div class="pv_featured_products">
|
<div class="pv_featured_item" v-for="(item, idx) in previewFeaturedDisplay" :key="idx">
|
<div class="pv_featured_img_wrap">
|
<img v-if="featuredPreviewUrl(item)" :src="featuredPreviewUrl(item)" class="pv_featured_img">
|
<div v-else class="pv_featured_img_ph"></div>
|
</div>
|
<div class="pv_featured_info">
|
<span class="pv_featured_name">{{ item.title }}</span>
|
<div class="pv_featured_tag_row">
|
<span class="pv_tag pv_tag_dim" v-if="item.tags && item.tags[0]">{{ item.tags[0] }}</span>
|
<span class="pv_tag" :class="idx === 0 ? 'pv_tag_blue' : 'pv_tag_green'" v-if="item.tags && item.tags[1]">{{ item.tags[1] }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="pv_table_head_wrap" v-if="type === '0'">
|
<div class="pv_shop_table_head">
|
<span class="pv_col pv_col_cat">品类 <span class="pv_arrow">▼</span></span>
|
<span class="pv_col">型号</span>
|
<span class="pv_col">旗舰价</span>
|
<span class="pv_col">指导价</span>
|
</div>
|
</div>
|
|
<div class="pv_table_head_wrap pv_product_list_head" v-if="type === '2'">
|
<div class="pv_shop_table_head pv_product_shop_table_head">
|
<span class="pv_col">品牌 <span class="pv_arrow">▼</span></span>
|
<span class="pv_col pv_product_search_col">
|
<span class="pv_product_search_inline" :style="searchStyle">
|
<span class="pv_search_ico">🔍</span>
|
<span class="pv_search_divider"></span>
|
<span class="pv_search_ph">搜索型号</span>
|
</span>
|
</span>
|
<span class="pv_col pv_product_cat_col pv_product_cat_col--span">
|
<span class="pv_product_cat_inner">
|
<span class="pv_cat_line">智能门锁</span>
|
</span>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 主界面 -->
|
<template v-if="type === '0'">
|
<div class="pv_shop_table">
|
<div class="pv_shop_table_body">
|
<div class="pv_shop_row" v-for="(row, i) in mockRows" :key="'r-' + i">
|
<div class="pv_shop_row_main">
|
<div class="pv_row_cat_cell">
|
<div class="pv_cat_icon_ph"></div>
|
<span class="pv_cell_ellipsis">{{ row.categoryName }}</span>
|
</div>
|
<div class="pv_row_info_group">
|
<span class="pv_col pv_cell_ellipsis">{{ row.name || '' }}</span>
|
<span class="pv_col pv_cell_ellipsis">{{ row.zdPrice || '' }}</span>
|
<span class="pv_col pv_cell_ellipsis">{{ row.price || '' }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="pv_shop_row pv_shop_row--expand">
|
<div class="pv_expand_cat" :style="rowStyle">
|
<span class="pv_expand_del">×</span>
|
<div class="pv_expand_cat_ph"></div>
|
<span>智能家居</span>
|
</div>
|
<div class="pv_expand_panel" :style="rowStyle">
|
<div class="pv_expand_data_row">
|
<span class="pv_expand_model">九牧/ZS860 (净界Ultra)</span>
|
<span class="pv_expand_zd">4,899</span>
|
<span class="pv_expand_price">3,300</span>
|
</div>
|
<div class="pv_sub_cat_grid">
|
<div class="pv_sub_cat_item" v-for="s in subCats" :key="s">
|
<div class="pv_sub_icon"></div>
|
<span>{{ s }}</span>
|
</div>
|
</div>
|
<div class="pv_expand_search_wrap">
|
<div class="pv_expand_search" :style="searchStyle">
|
<span class="pv_search_ico">🔍</span>
|
<span class="pv_search_ph">搜索商品名称/型号</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<!-- PK台 -->
|
<template v-if="type === '1'">
|
<div class="pv_pk_page" :style="pkShowcaseTheme">
|
<div class="pv_pk_cards">
|
<div class="pv_pk_side">
|
<div class="pv_pk_showcase">
|
<div class="pv_pk_showcase_frame">
|
<div class="pv_pk_visual">
|
<div class="pv_pk_img_card">
|
<img class="pv_pk_img" :src="pkPreviewProduct('left').img" alt="">
|
</div>
|
<div class="pv_pk_reflect"><img :src="pkPreviewProduct('left').img" alt=""></div>
|
<div class="pv_pk_ground"></div>
|
</div>
|
</div>
|
</div>
|
<div class="pv_pk_podium"></div>
|
<div class="pv_pk_detail">
|
<div class="pv_pk_detail_head" :style="tableHeaderStyle">{{ pkPreviewProduct('left').name }}</div>
|
<div class="pv_pk_detail_body">
|
<div class="pv_pk_price_cell">
|
<span class="pv_pk_price_label">期间价</span>
|
<span class="pv_pk_price_val">¥{{ pkPreviewProduct('left').zdPrice }}</span>
|
</div>
|
<div class="pv_pk_price_cell pv_pk_price_cell--hot">
|
<span class="pv_pk_price_label">指导价</span>
|
<span class="pv_pk_price_val">¥{{ pkPreviewProduct('left').price }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pv_pk_vs" :style="{ color: pkVsPreviewColor }">VS</div>
|
<div class="pv_pk_side">
|
<div class="pv_pk_showcase">
|
<div class="pv_pk_showcase_frame">
|
<div class="pv_pk_visual">
|
<div class="pv_pk_img_card">
|
<img class="pv_pk_img" :src="pkPreviewProduct('right').img" alt="">
|
</div>
|
<div class="pv_pk_reflect"><img :src="pkPreviewProduct('right').img" alt=""></div>
|
<div class="pv_pk_ground"></div>
|
</div>
|
</div>
|
</div>
|
<div class="pv_pk_podium"></div>
|
<div class="pv_pk_detail">
|
<div class="pv_pk_detail_head" :style="tableHeaderStyle">{{ pkPreviewProduct('right').name }}</div>
|
<div class="pv_pk_detail_body">
|
<div class="pv_pk_price_cell">
|
<span class="pv_pk_price_label">期间价</span>
|
<span class="pv_pk_price_val">¥{{ pkPreviewProduct('right').zdPrice }}</span>
|
</div>
|
<div class="pv_pk_price_cell pv_pk_price_cell--hot">
|
<span class="pv_pk_price_label">指导价</span>
|
<span class="pv_pk_price_val">¥{{ pkPreviewProduct('right').price }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pv_pk_params">
|
<div class="pv_pk_param_col">
|
<div class="pv_pk_param_head" :style="tableHeaderStyle">
|
<div class="pv_pk_action_group">
|
<div class="pv_pk_change"><span>↻</span><span>换个商品</span></div>
|
<div class="pv_pk_confirm"><span>✓</span><span>选用左侧</span></div>
|
</div>
|
</div>
|
<div class="pv_pk_param_pills">
|
<div class="pv_pill" v-for="(p, pi) in pkPreviewParams" :key="'l-' + pi">
|
<span class="pv_pill_label">{{ p.name }}</span>
|
<span class="pv_pill_val">{{ p.val }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="pv_pk_vs pv_pk_vs--spacer">VS</div>
|
<div class="pv_pk_param_col">
|
<div class="pv_pk_param_head" :style="tableHeaderStyle">
|
<div class="pv_pk_action_group">
|
<div class="pv_pk_change"><span>↻</span><span>换个商品</span></div>
|
<div class="pv_pk_confirm"><span>✓</span><span>选用右侧</span></div>
|
</div>
|
</div>
|
<div class="pv_pk_param_pills">
|
<div class="pv_pill" v-for="(p, pi) in pkPreviewParams" :key="'r-' + pi">
|
<span class="pv_pill_label">{{ p.name }}</span>
|
<span class="pv_pill_val">{{ p.val }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<!-- 商品列表 -->
|
<template v-if="type === '2'">
|
<div class="pv_product_page">
|
<div class="pv_product_grid">
|
<div class="pv_product_card" v-for="(p, i) in productList" :key="i" :style="productCardStyle">
|
<div class="pv_product_card_img">
|
<img :src="p.img" alt="">
|
</div>
|
<div class="pv_product_card_info">
|
<span class="pv_product_brand">{{ p.brandName }}</span>
|
<span class="pv_product_model">{{ p.name }}</span>
|
<span class="pv_product_price_label">指导价 ¥ {{ p.price }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<!-- 搜索效果 -->
|
<template v-if="type === '3'">
|
<div class="pv_pk_page pv_pk_page--ghost">
|
<div class="pv_pk_cards pv_pk_cards--ghost">
|
<div class="pv_pk_side pv_pk_side--ghost" v-for="n in 2" :key="n">
|
<div class="pv_pk_showcase pv_pk_showcase--ghost"><div class="pv_pk_showcase_frame"></div></div>
|
</div>
|
</div>
|
</div>
|
<div class="pv_search_overlay">
|
<div class="pv_pk_search_panel">
|
<div class="pv_pk_search_head" :style="themeStyle">
|
<div class="pv_pk_search_head_left">
|
<span class="pv_pk_search_title">选择商品</span>
|
<span class="pv_pk_search_badge">PK 左侧</span>
|
</div>
|
<span class="pv_pk_search_close">×</span>
|
</div>
|
<div class="pv_pk_search_body">
|
<div class="pv_pk_search_cat">
|
<span class="pv_pk_search_cat_label">品类</span>
|
<span class="pv_pk_search_cat_name">智能马桶</span>
|
</div>
|
<div class="pv_pk_search_bar" :style="searchStyle">
|
<span class="pv_search_ico">🔍</span>
|
<span class="pv_search_divider"></span>
|
<span class="pv_pk_search_input">搜索型号</span>
|
</div>
|
<div class="pv_pk_search_table_head">
|
<span>商品型号</span>
|
<span>指导价</span>
|
</div>
|
<div class="pv_pk_search_list">
|
<div
|
class="pv_pk_search_item"
|
v-for="(s, i) in searchData"
|
:key="i"
|
:class="{ 'pv_pk_search_item--active': i === 0 }">
|
<span class="pv_pk_search_item_name">{{ s.name }}</span>
|
<span class="pv_pk_search_item_price">¥{{ s.price }}</span>
|
</div>
|
</div>
|
<div class="pv_pk_search_footer">共 {{ searchData.length }} 件商品</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-panel">
|
|
<div class="pz_head pz_head--with-switch">
|
<span>主播端页面配置 <span class="version-tag">V3</span></span>
|
<span
|
class="version-switch version-switch--v3"
|
:class="{ 'version-switch--active': useThisVersion }"
|
>
|
<span class="version-switch__icon"><i class="el-icon-mobile-phone" /></span>
|
<span class="version-switch__body">
|
<span class="version-switch__label">立即使用该版本</span>
|
<span class="version-switch__status">{{ useThisVersion ? '已启用 · 主播端当前版本' : '点击按钮后主播端将切换至本版本' }}</span>
|
</span>
|
<span v-if="useThisVersion" class="version-switch__badge">
|
<i class="el-icon-success" /> 当前版本
|
</span>
|
<el-button
|
v-else
|
type="warning"
|
size="medium"
|
:loading="versionSwitchLoading"
|
class="version-switch__btn version-switch__btn--v3"
|
@click="onUseThisVersion"
|
>
|
立即生效
|
</el-button>
|
</span>
|
</div>
|
|
<el-form :model="form" label-width="120px">
|
|
<el-form-item label="内容宽度">
|
<el-input v-model="form.rangeSize" placeholder="750-1200" style="width:200px" />
|
<span class="form-tip">px，支持 750-1200</span>
|
</el-form-item>
|
|
<el-form-item label="页面背景">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.pageBg.mode" @change="onPageBgModeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义颜色</el-radio>
|
<el-radio :label="2">自定义图</el-radio>
|
</el-radio-group>
|
<template v-if="form.pageBg.mode === 0">
|
<div class="img-default-preview page-bg-default-preview">
|
<span class="page-bg-swatch" :style="{ background: pageBgDefaultColor }"></span>
|
<span class="form-tip">默认背景色</span>
|
</div>
|
</template>
|
<template v-if="form.pageBg.mode === 1">
|
<el-color-picker v-model="form.pageBg.bgColor" size="mini" />
|
<span class="inline-label">不透明度</span>
|
<el-input v-model="form.pageBg.alpha" style="width:80px" placeholder="100" />
|
<span class="inline-label">%</span>
|
</template>
|
<template v-if="form.pageBg.mode === 2">
|
<div v-if="!form.pageBg.imgurl" class="img-default-preview">
|
<el-image :src="defaultBgImg" style="width:100px;height:100px" fit="contain" />
|
</div>
|
<div class="img-select-item">
|
<el-image v-if="form.pageBg.imgurl" style="width:100px;height:100px" :src="form.pageBg.imgurl" fit="contain" class="thumb-block" />
|
<el-upload :action="action" :headers="uploadHeaders" :data="{ folder: 'web_param' }" :show-file-list="false"
|
:on-success="(r,f)=>uploadSuccess(r,f,'pageBg')" :on-error="uploadError">
|
<el-button size="small" icon="el-icon-plus">上传</el-button>
|
</el-upload>
|
<span class="form-tip">页面背景图，建议 1920×1080px</span>
|
</div>
|
</template>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="提交订单图标">
|
<el-radio-group v-model="form.submitBtnIcon.type" @change="onSubmitBtnIconTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<div v-if="form.submitBtnIcon.type === 0" class="img-default-preview">
|
<el-image :src="defaultSubmitBtnIcon" style="width:48px;height:48px" fit="contain" />
|
</div>
|
<div v-else class="img-select-item">
|
<el-image v-if="form.submitBtnIcon.imgurl" style="width:48px;height:48px" :src="form.submitBtnIcon.imgurl" fit="contain" class="thumb-block" />
|
<el-upload :action="action" :headers="uploadHeaders" :data="{ folder: 'web_param' }" :show-file-list="false"
|
:on-success="(r,f)=>uploadSuccess(r,f,'submitBtnIcon')" :on-error="uploadError">
|
<el-button size="small" icon="el-icon-plus">上传</el-button>
|
</el-upload>
|
<span class="form-tip">按钮图标模式，建议 48×48px PNG</span>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="提交订单背景色">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.submitBtnBg.bgType" @change="onSubmitBtnBgTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.submitBtnBg.bgType === 1">
|
<el-color-picker v-model="form.submitBtnBg.bgColor" size="mini" />
|
<span class="inline-label">不透明度</span>
|
<el-input v-model="form.submitBtnBg.bgAlpha" style="width:80px" placeholder="100" />
|
<span class="inline-label">%</span>
|
</template>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="提交订单字体色">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.submitBtnColor.colorType" @change="onSubmitBtnColorTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.submitBtnColor.colorType === 1">
|
<el-color-picker v-model="form.submitBtnColor.color" size="mini" />
|
</template>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="顶部宣传图">
|
<el-radio-group v-model="form.topImg.type" @change="onTopImgTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<div v-if="form.topImg.type === 0" class="img-default-preview">
|
<el-image :src="defaultBanner" style="width:100px;height:100px" fit="contain" />
|
</div>
|
<div v-else class="img-select-item">
|
<el-image v-if="form.topImg.imgurl" style="width:100px;height:100px" :src="form.topImg.imgurl" fit="contain" class="thumb-block" />
|
<el-upload :action="action" :headers="uploadHeaders" :data="{ folder: 'web_param' }" :show-file-list="false"
|
:on-success="(r,f)=>uploadSuccess(r,f,'topImg')" :on-error="uploadError">
|
<el-button size="small" icon="el-icon-plus">上传</el-button>
|
</el-upload>
|
<span class="form-tip">建议尺寸 700×300px</span>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="主题背景色">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.theme.bgType" @change="onThemeBgTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.theme.bgType === 1">
|
<el-color-picker v-model="form.theme.bgColor" size="mini" />
|
</template>
|
<span class="form-tip">顶栏、表格表头、PK 标题区等</span>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="主题字体色">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.theme.colorType" @change="onThemeColorTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.theme.colorType === 1">
|
<el-color-picker v-model="form.theme.color" size="mini" />
|
</template>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="行背景色">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.table.rowBgType" @change="onTableRowBgTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.table.rowBgType === 1">
|
<el-color-picker v-model="form.table.rowBg" size="mini" />
|
</template>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="搜索框背景">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.search.bgType" @change="onSearchBgTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.search.bgType === 1">
|
<el-color-picker v-model="form.search.bgColor" size="mini" />
|
<span class="inline-label">不透明度</span>
|
<el-input v-model="form.search.bgAlpha" style="width:80px" placeholder="100" />
|
<span class="inline-label">%</span>
|
</template>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="商品卡背景">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.productList.bgType" @change="onProductListBgTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.productList.bgType === 1">
|
<el-color-picker v-model="form.productList.bgColor" size="mini" />
|
<span class="inline-label">不透明度</span>
|
<el-input v-model="form.productList.bgAlpha" style="width:80px" placeholder="100" />
|
<span class="inline-label">%</span>
|
</template>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="PK背景色">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.pk.bgColorType" @change="onPkBgColorTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.pk.bgColorType === 1">
|
<el-color-picker v-model="form.pk.bgColor" size="mini" />
|
</template>
|
<span class="form-tip">控制 H5 PK 台展示框、按钮等主题色</span>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="PK对比色">
|
<div class="color-select-item">
|
<el-radio-group v-model="form.pk.vsColorType" @change="onPkVsColorTypeChange">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
<template v-if="form.pk.vsColorType === 1">
|
<el-color-picker v-model="form.pk.vsColor" size="mini" />
|
</template>
|
<span class="form-tip">控制 H5 PK 台 VS 标识颜色</span>
|
</div>
|
</el-form-item>
|
|
<div v-for="(feat, fi) in form.featured" :key="fi" class="featured-form">
|
|
<div class="sub-title">精品优选 {{ fi + 1 }}</div>
|
|
<el-form-item label="选择商品">
|
|
<el-button type="primary" plain size="small" @click="openFeaturedPicker(fi)">从企业商品库选择</el-button>
|
|
<el-button v-if="feat.goodsId" type="text" @click="clearFeaturedGoods(fi)">清除</el-button>
|
|
</el-form-item>
|
|
<div v-if="feat.goodsId || feat.title" class="featured-selected">
|
|
<img v-if="featuredPreviewUrl(feat)" :src="featuredPreviewUrl(feat)" class="featured-selected-img" />
|
|
<div v-else class="featured-selected-img featured-selected-ph"></div>
|
|
<div class="featured-selected-info">
|
|
<div class="featured-selected-name">{{ feat.title || '未选择商品' }}</div>
|
|
<div v-if="feat.goodsId" class="featured-selected-id">商品ID：{{ feat.goodsId }}</div>
|
|
</div>
|
|
</div>
|
|
<el-form-item label="标签">
|
|
<el-input v-model="feat.tags[0]" placeholder="标签1" style="margin-bottom:8px" />
|
|
<el-input v-model="feat.tags[1]" placeholder="标签2" />
|
|
</el-form-item>
|
|
</div>
|
|
<FeaturedGoodsPicker ref="featuredGoodsPicker" @select="onFeaturedGoodsSelect" />
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submit">保存配置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getByLoginAnchor, renewAnchorUpdate, updateAnchorPageVersion } from '@/api/business/page'
|
import FeaturedGoodsPicker from '@/components/business/FeaturedGoodsPicker'
|
import Cookies from 'js-cookie'
|
|
const PAGE_DEFAULTS = {
|
pageBg: { mode: 0, bgColor: '#E8DCC8', alpha: '100', img: '', imgurl: '' },
|
theme: { bgType: 0, bgColor: '#4A3728', colorType: 0, color: '#FFFFFF' },
|
table: {
|
rowBgType: 0,
|
rowBg: '#FFFFFF',
|
hoverScale: 1.05
|
},
|
search: { bgType: 0, bgColor: '#FFFFFF', bgAlpha: '100' },
|
productList: { bgType: 0, bgColor: '#FFFFFF', bgAlpha: '100' },
|
pk: { bgColorType: 0, bgColor: '#FF8C42', vsColorType: 0, vsColor: '#FF8C42' },
|
submitBtnIcon: { type: 0, img: '', imgurl: '' },
|
submitBtnBg: { bgType: 0, bgColor: '#FFFFFF', bgAlpha: '100' },
|
submitBtnColor: { colorType: 0, color: '#4A3728' }
|
}
|
|
export default {
|
|
name: 'PageConfigurationNew',
|
|
components: { FeaturedGoodsPicker },
|
|
data () {
|
|
return {
|
|
type: '0',
|
|
action: process.env.VUE_APP_API_PREFIX + '/public/upload',
|
|
resourcePath: '',
|
|
defaultBanner: require('@/assets/images/banner_defult.png'),
|
|
defaultBgImg: require('@/assets/images/background_defult.png'),
|
|
defaultSubmitBtnIcon: require('@/assets/images/submit_btn_defult2.png'),
|
|
pageBgDefaultColor: PAGE_DEFAULTS.pageBg.bgColor,
|
|
useThisVersion: false,
|
|
versionSwitchLoading: false,
|
|
anchorPageVersion: 'v2',
|
|
featuredPickerIndex: 0,
|
|
subCats: ['智能门锁', '马桶', '浴霸', '花洒', '晾衣架'],
|
|
mockRows: [
|
|
{ categoryName: '智能家居', name: '九牧/ZS860 (净界Ultra)', zdPrice: '4,899', price: '3,300' }
|
|
],
|
|
productList: [
|
|
{ img: require('@/assets/images/product/1a.png'), brandName: '希箭', name: 'QX3 轻奢版', price: '2299' },
|
|
{ img: require('@/assets/images/product/2a.png'), brandName: '小牧', name: 'S23 Pro', price: '2999' },
|
|
{ img: require('@/assets/images/product/3a.png'), brandName: '九牧', name: 'ZS860', price: '4899' },
|
|
{ img: require('@/assets/images/product/4a.png'), brandName: '瑞尔特', name: 'M3 旗舰', price: '3299' },
|
|
{ img: require('@/assets/images/product/5a.png'), brandName: '恒洁', name: 'Q9 智能', price: '3599' }
|
|
],
|
|
pkPreviewProducts: {
|
|
left: { name: 'R6S 知味2.0', zdPrice: '4500', price: '6299', img: require('@/assets/images/product/1a.png') },
|
|
right: { name: 'TR Pro 至尊版', zdPrice: '4500', price: '6299', img: require('@/assets/images/product/2a.png') }
|
|
},
|
|
pkPreviewParams: [
|
|
{ name: '冲力等级', val: '5.0级' },
|
|
{ name: '加热方式', val: '即热式' }
|
|
],
|
|
searchData: [
|
|
{ name: '智能马桶 希箭QX3-轻奢版', price: '2299' },
|
|
{ name: '智能马桶 瑞尔特M3 旗舰', price: '3299' },
|
|
{ name: '智能马桶 九牧ZS860', price: '4899' }
|
|
],
|
|
form: {
|
|
rangeSize: '750',
|
|
pageBg: { ...PAGE_DEFAULTS.pageBg },
|
|
topImg: { type: 0, img: '', imgurl: '' },
|
|
submitBtnIcon: { ...PAGE_DEFAULTS.submitBtnIcon },
|
|
submitBtnBg: { ...PAGE_DEFAULTS.submitBtnBg },
|
|
submitBtnColor: { ...PAGE_DEFAULTS.submitBtnColor },
|
|
pkImg: { type: 0, img: '', imgurl: '' },
|
|
theme: { ...PAGE_DEFAULTS.theme },
|
|
table: { ...PAGE_DEFAULTS.table },
|
|
featured: [
|
|
{ goodsId: '', prefixUrl: '', imgurl: '', imgaddr: '', img: '', title: '', tags: ['', ''] },
|
|
{ goodsId: '', prefixUrl: '', imgurl: '', imgaddr: '', img: '', title: '', tags: ['', ''] }
|
|
],
|
|
search: { ...PAGE_DEFAULTS.search },
|
|
productList: { ...PAGE_DEFAULTS.productList },
|
|
pk: { ...PAGE_DEFAULTS.pk }
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
topImgUrl () {
|
|
if (Number(this.form.topImg.type) === 0) return this.defaultBanner
|
|
return this.form.topImg.imgurl || this.defaultBanner
|
|
},
|
|
submitBtnIconPreviewUrl () {
|
|
const cfg = this.form.submitBtnIcon || {}
|
|
if (Number(cfg.type) !== 1) {
|
|
return this.defaultSubmitBtnIcon
|
|
}
|
|
if (cfg.imgurl) {
|
|
if (/^https?:\/\//i.test(cfg.imgurl)) {
|
|
return cfg.imgurl
|
|
}
|
|
if (this.resourcePath && cfg.imgurl.indexOf(this.resourcePath) !== 0) {
|
|
return this.resourcePath + String(cfg.imgurl).replace(/^\//, '')
|
|
}
|
|
return cfg.imgurl
|
|
}
|
|
if (cfg.img && this.resourcePath) {
|
|
return this.resourcePath + String(cfg.img).replace(/^\//, '')
|
|
}
|
|
return this.defaultSubmitBtnIcon
|
|
},
|
|
submitBtnStyle () {
|
|
const bgCfg = this.form.submitBtnBg || {}
|
|
const colorCfg = this.form.submitBtnColor || {}
|
|
const style = {
|
|
color: this.getEffectiveColor(
|
|
colorCfg.colorType,
|
|
colorCfg.color,
|
|
PAGE_DEFAULTS.submitBtnColor.color
|
|
)
|
|
}
|
|
if (Number(bgCfg.bgType) !== 1) {
|
|
style.background = 'rgba(255, 255, 255, 1)'
|
|
} else {
|
|
style.background = this.withAlpha(bgCfg.bgColor || '#FFFFFF', bgCfg.bgAlpha)
|
|
}
|
|
return style
|
|
},
|
|
previewPageBgStyle () {
|
|
const pageBg = this.form.pageBg || {}
|
|
if (Number(pageBg.mode) !== 2 || !pageBg.imgurl) return {}
|
|
return {
|
|
backgroundImage: `url(${pageBg.imgurl})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center top'
|
|
}
|
|
},
|
|
contentStyle () {
|
|
const pageBg = this.form.pageBg || {}
|
|
const mode = Number(pageBg.mode) || 0
|
|
const style = { width: (this.form.rangeSize || 750) + 'px', ...this.previewPageBgStyle }
|
|
if (mode === 2) return style
|
|
const bg = mode === 1
|
|
? (pageBg.bgColor || PAGE_DEFAULTS.pageBg.bgColor)
|
|
: PAGE_DEFAULTS.pageBg.bgColor
|
|
const alpha = Math.round(Number(pageBg.alpha || 100) * 2.55).toString(16).padStart(2, '0')
|
|
style.backgroundColor = bg + alpha
|
|
return style
|
|
},
|
|
previewMainBg () {
|
|
const pageBg = this.form.pageBg || {}
|
|
const mode = Number(pageBg.mode) || 0
|
|
const bg = mode === 1
|
|
? (pageBg.bgColor || PAGE_DEFAULTS.pageBg.bgColor)
|
|
: PAGE_DEFAULTS.pageBg.bgColor
|
|
const alpha = Math.round(Number(pageBg.alpha || 100) * 2.55).toString(16).padStart(2, '0')
|
|
return bg + alpha
|
|
},
|
|
themeStyle () {
|
|
const theme = this.form.theme || {}
|
|
const bg = this.getEffectiveColor(theme.bgType, theme.bgColor, PAGE_DEFAULTS.theme.bgColor)
|
|
const color = this.getEffectiveColor(theme.colorType, theme.color, PAGE_DEFAULTS.theme.color)
|
|
return { background: bg, color }
|
|
},
|
|
homeTopSectionStyle () {
|
|
const { background: bg, color } = this.themeStyle
|
|
return {
|
|
background: bg,
|
|
color,
|
|
'--home-top-bg': bg
|
|
}
|
|
},
|
|
pkShowcaseTheme () {
|
|
const pk = this.form.pk || {}
|
|
const primary = this.themeStyle.background
|
|
const accent = this.getPkThemeColor()
|
|
const gold = '#FFD88A'
|
|
return {
|
|
'--pk-show-primary': primary,
|
|
'--pk-show-accent': accent,
|
|
'--pk-show-gold': gold,
|
|
'--pk-show-primary-soft': this.hexToRgba(primary, 0.22),
|
|
'--pk-show-accent-soft': this.hexToRgba(accent, 0.38),
|
|
'--pk-show-gold-soft': this.hexToRgba(gold, 0.5),
|
|
'--pk-show-accent-faint': this.hexToRgba(accent, 0.12)
|
|
}
|
|
},
|
|
previewFeaturedDisplay () {
|
|
const demos = [
|
|
{ title: '智能门锁 X9 Pro', tags: ['全自动', '3D人脸'] },
|
|
{ title: '智能马桶 至尊版', tags: ['即热式', '虹吸冲水'] }
|
|
]
|
|
const list = (this.form.featured || []).slice(0, 2)
|
|
return list.map((item, i) => ({
|
|
...demos[i],
|
|
...item,
|
|
title: item.title || demos[i].title,
|
|
tags: (item.tags && item.tags.some(t => t)) ? item.tags : demos[i].tags
|
|
}))
|
|
},
|
|
tableHeaderStyle () {
|
|
return this.themeStyle
|
|
},
|
|
rowStyle () {
|
|
const t = this.form.table || {}
|
|
return { background: this.getEffectiveColor(t.rowBgType, t.rowBg, PAGE_DEFAULTS.table.rowBg) }
|
|
},
|
|
searchStyle () {
|
|
const s = this.form.search || {}
|
|
const defaultBg = 'rgba(255, 255, 255, 0.92)'
|
|
if (Number(s.bgType) !== 1) return { background: defaultBg }
|
|
return { background: this.withAlpha(s.bgColor || '#FFFFFF', s.bgAlpha) }
|
|
},
|
|
productListStyle () {
|
|
const p = this.form.productList || {}
|
|
if (Number(p.bgType) !== 1) return { background: PAGE_DEFAULTS.productList.bgColor }
|
|
return { background: this.withAlpha(p.bgColor || '#FFFFFF', p.bgAlpha) }
|
|
},
|
|
productCardStyle () {
|
|
return this.productListStyle
|
|
},
|
|
pkVsPreviewColor () {
|
|
const pk = this.form.pk || {}
|
|
return this.getEffectiveColor(pk.vsColorType, pk.vsColor, PAGE_DEFAULTS.pk.vsColor)
|
|
},
|
|
uploadHeaders () {
|
|
const token = Cookies.get('eva-auth-token')
|
|
return token ? { 'eva-auth-token': token } : {}
|
|
}
|
|
},
|
|
created () {
|
|
this.loadConfig()
|
|
},
|
|
methods: {
|
|
loadConfig () {
|
|
getByLoginAnchor().then(res => {
|
|
if (res && res.resourcePath) this.resourcePath = res.resourcePath
|
|
this.anchorPageVersion = (res && res.anchorPageVersion) || 'v2'
|
|
this.useThisVersion = this.anchorPageVersion === 'v3'
|
|
if (res && res.anchorParam) {
|
|
const param = JSON.parse(res.anchorParam)
|
|
const hadPageBg = !!param.pageBg
|
|
const hadTheme = !!param.theme
|
|
Object.keys(this.form).forEach(key => {
|
|
if (param[key]) this.form[key] = param[key]
|
|
})
|
|
if (!hadPageBg) {
|
|
if (param.main) this.form.main = param.main
|
|
if (param.adImg) this.form.adImg = param.adImg
|
|
this.migratePageBgFromLegacy()
|
|
} else {
|
|
delete this.form.main
|
|
delete this.form.adImg
|
|
}
|
|
if (!hadTheme) {
|
|
if (param.header) this.form.header = param.header
|
|
if (param.table) this.form.table = { ...this.form.table, ...param.table }
|
|
this.migrateThemeFromLegacy()
|
|
} else {
|
|
delete this.form.header
|
|
this.stripLegacyThemeFields()
|
|
}
|
|
this.normalizeFeatured()
|
|
this.normalizeConfig()
|
|
}
|
|
})
|
|
},
|
|
onUseThisVersion () {
|
|
if (this.useThisVersion || this.versionSwitchLoading) return
|
|
this.versionSwitchLoading = true
|
|
updateAnchorPageVersion({ anchorPageVersion: 'v3' })
|
|
.then(() => {
|
|
this.anchorPageVersion = 'v3'
|
|
this.useThisVersion = true
|
|
this.$message.success('已启用 V3 配置')
|
|
})
|
|
.catch(e => {
|
|
this.$tip.apiFailed(e)
|
|
})
|
|
.finally(() => {
|
|
this.versionSwitchLoading = false
|
|
})
|
|
},
|
|
normalizeConfig () {
|
|
const assignDefaults = (target, defaults) => {
|
|
Object.keys(defaults).forEach(key => {
|
|
if (target[key] === undefined || target[key] === null || target[key] === '') {
|
|
this.$set(target, key, defaults[key])
|
|
}
|
|
})
|
|
}
|
|
if (!this.form.pageBg) {
|
|
this.$set(this.form, 'pageBg', { ...PAGE_DEFAULTS.pageBg })
|
|
}
|
|
assignDefaults(this.form.pageBg, PAGE_DEFAULTS.pageBg)
|
|
if (!this.form.theme) {
|
|
this.$set(this.form, 'theme', { ...PAGE_DEFAULTS.theme })
|
|
}
|
|
assignDefaults(this.form.theme, PAGE_DEFAULTS.theme)
|
|
assignDefaults(this.form.table, PAGE_DEFAULTS.table)
|
|
assignDefaults(this.form.search, PAGE_DEFAULTS.search)
|
|
assignDefaults(this.form.productList, PAGE_DEFAULTS.productList)
|
|
assignDefaults(this.form.pk, PAGE_DEFAULTS.pk)
|
|
if (!this.form.submitBtnIcon) {
|
|
this.$set(this.form, 'submitBtnIcon', { ...PAGE_DEFAULTS.submitBtnIcon })
|
|
}
|
|
assignDefaults(this.form.submitBtnIcon, PAGE_DEFAULTS.submitBtnIcon)
|
|
if (this.form.submitBtnIcon.type == null) {
|
|
this.form.submitBtnIcon.type = this.form.submitBtnIcon.imgurl ? 1 : 0
|
|
}
|
|
if (!this.form.submitBtnBg) {
|
|
this.$set(this.form, 'submitBtnBg', { ...PAGE_DEFAULTS.submitBtnBg })
|
|
}
|
|
assignDefaults(this.form.submitBtnBg, PAGE_DEFAULTS.submitBtnBg)
|
|
if (!this.form.submitBtnColor) {
|
|
this.$set(this.form, 'submitBtnColor', { ...PAGE_DEFAULTS.submitBtnColor })
|
|
}
|
|
assignDefaults(this.form.submitBtnColor, PAGE_DEFAULTS.submitBtnColor)
|
|
if (this.form.pk.bgColorType == null) {
|
|
if (this.form.pk.vsColor && !this.form.pk.bgColor) {
|
|
this.form.pk.bgColor = this.form.pk.vsColor
|
|
this.form.pk.bgColorType = this.form.pk.vsColorType != null ? this.form.pk.vsColorType : 1
|
|
} else {
|
|
this.form.pk.bgColorType = PAGE_DEFAULTS.pk.bgColorType
|
|
}
|
|
}
|
|
if (this.form.topImg && this.form.topImg.type == null) {
|
|
this.form.topImg.type = this.form.topImg.imgurl ? 1 : 0
|
|
}
|
|
if (this.form.pageBg.mode == null) {
|
|
this.form.pageBg.mode = this.form.pageBg.imgurl ? 2 : PAGE_DEFAULTS.pageBg.mode
|
|
}
|
|
},
|
|
migrateThemeFromLegacy () {
|
|
const base = { ...PAGE_DEFAULTS.theme }
|
|
const t = this.form.table || {}
|
|
const h = this.form.header || {}
|
|
const theme = { ...base }
|
|
if (Number(t.headerBgType) === 1) {
|
|
theme.bgType = 1
|
|
theme.bgColor = t.headerBg || base.bgColor
|
|
} else if (Number(h.bgType) === 1) {
|
|
theme.bgType = 1
|
|
theme.bgColor = h.bgColor || base.bgColor
|
|
}
|
|
if (Number(t.headerColorType) === 1) {
|
|
theme.colorType = 1
|
|
theme.color = t.headerColor || base.color
|
|
} else if (Number(h.colorType) === 1) {
|
|
theme.colorType = 1
|
|
theme.color = h.color || base.color
|
|
}
|
|
this.form.theme = theme
|
|
delete this.form.header
|
|
this.stripLegacyThemeFields()
|
|
},
|
|
stripLegacyThemeFields () {
|
|
if (!this.form.table) return
|
|
delete this.form.table.headerBgType
|
|
delete this.form.table.headerBg
|
|
delete this.form.table.headerColorType
|
|
delete this.form.table.headerColor
|
|
},
|
|
migratePageBgFromLegacy () {
|
|
const main = this.form.main || {}
|
|
const ad = this.form.adImg || {}
|
|
const base = { ...PAGE_DEFAULTS.pageBg }
|
|
if (Number(ad.type) === 1 && (ad.imgurl || ad.img)) {
|
|
this.form.pageBg = { ...base, mode: 2, img: ad.img || '', imgurl: ad.imgurl || '' }
|
|
} else if (Number(main.bgType) === 1) {
|
|
this.form.pageBg = {
|
|
...base,
|
|
mode: 1,
|
|
bgColor: main.bgColor || PAGE_DEFAULTS.pageBg.bgColor,
|
|
alpha: main.alpha != null ? String(main.alpha) : PAGE_DEFAULTS.pageBg.alpha
|
|
}
|
|
} else {
|
|
this.form.pageBg = { ...base }
|
|
}
|
|
delete this.form.main
|
|
delete this.form.adImg
|
|
},
|
|
getEffectiveColor (type, custom, fallback) {
|
|
return Number(type) === 1 ? (custom || fallback) : fallback
|
|
},
|
|
withAlpha (hex, alpha) {
|
|
const color = (hex || '#FFFFFF').replace('#', '')
|
|
if (color.length !== 6) return hex || '#FFFFFF'
|
|
const a = Math.round(Number(alpha || 100) * 2.55).toString(16).padStart(2, '0')
|
|
return `#${color}${a}`
|
|
},
|
|
onPageBgModeChange (val) {
|
|
const mode = Number(val)
|
|
if (mode === 0) {
|
|
this.form.pageBg.bgColor = PAGE_DEFAULTS.pageBg.bgColor
|
|
this.form.pageBg.alpha = PAGE_DEFAULTS.pageBg.alpha
|
|
this.form.pageBg.img = ''
|
|
this.form.pageBg.imgurl = ''
|
|
} else if (mode === 1) {
|
|
this.form.pageBg.img = ''
|
|
this.form.pageBg.imgurl = ''
|
|
} else if (mode === 2) {
|
|
this.form.pageBg.bgColor = PAGE_DEFAULTS.pageBg.bgColor
|
|
this.form.pageBg.alpha = PAGE_DEFAULTS.pageBg.alpha
|
|
}
|
|
},
|
|
onTopImgTypeChange (val) {
|
|
if (Number(val) === 0) {
|
|
this.form.topImg.img = ''
|
|
this.form.topImg.imgurl = ''
|
|
}
|
|
},
|
|
onSubmitBtnIconTypeChange (val) {
|
|
if (Number(val) === 0) {
|
|
this.form.submitBtnIcon.img = ''
|
|
this.form.submitBtnIcon.imgurl = ''
|
|
}
|
|
},
|
|
onSubmitBtnBgTypeChange (val) {
|
|
if (Number(val) === 0) {
|
|
this.form.submitBtnBg.bgColor = PAGE_DEFAULTS.submitBtnBg.bgColor
|
|
this.form.submitBtnBg.bgAlpha = PAGE_DEFAULTS.submitBtnBg.bgAlpha
|
|
}
|
|
},
|
|
onSubmitBtnColorTypeChange (val) {
|
|
if (Number(val) === 0) {
|
|
this.form.submitBtnColor.color = PAGE_DEFAULTS.submitBtnColor.color
|
|
}
|
|
},
|
|
getPkThemeColor () {
|
|
const pk = this.form.pk || {}
|
|
return this.getEffectiveColor(pk.bgColorType, pk.bgColor, PAGE_DEFAULTS.pk.bgColor)
|
|
},
|
|
onPkBgColorTypeChange (val) {
|
|
if (Number(val) === 0) this.form.pk.bgColor = PAGE_DEFAULTS.pk.bgColor
|
|
},
|
|
onThemeBgTypeChange (val) {
|
|
if (Number(val) === 0) this.form.theme.bgColor = PAGE_DEFAULTS.theme.bgColor
|
|
},
|
|
onThemeColorTypeChange (val) {
|
|
if (Number(val) === 0) this.form.theme.color = PAGE_DEFAULTS.theme.color
|
|
},
|
|
onTableRowBgTypeChange (val) {
|
|
if (Number(val) === 0) this.form.table.rowBg = PAGE_DEFAULTS.table.rowBg
|
|
},
|
|
onSearchBgTypeChange (val) {
|
|
if (Number(val) === 0) {
|
|
this.form.search.bgColor = PAGE_DEFAULTS.search.bgColor
|
|
this.form.search.bgAlpha = PAGE_DEFAULTS.search.bgAlpha
|
|
}
|
|
},
|
|
onProductListBgTypeChange (val) {
|
|
if (Number(val) === 0) {
|
|
this.form.productList.bgColor = PAGE_DEFAULTS.productList.bgColor
|
|
this.form.productList.bgAlpha = PAGE_DEFAULTS.productList.bgAlpha
|
|
}
|
|
},
|
|
onPkVsColorTypeChange (val) {
|
|
if (Number(val) === 0) this.form.pk.vsColor = PAGE_DEFAULTS.pk.vsColor
|
|
},
|
|
normalizeFeatured () {
|
|
if (!Array.isArray(this.form.featured)) {
|
|
this.form.featured = []
|
|
}
|
|
while (this.form.featured.length < 2) {
|
|
this.form.featured.push({ goodsId: '', prefixUrl: '', imgurl: '', imgaddr: '', img: '', title: '', tags: ['', ''] })
|
|
}
|
|
this.form.featured = this.form.featured.slice(0, 2).map(item => {
|
|
const feat = { ...item }
|
|
if (!Array.isArray(feat.tags)) feat.tags = ['', '']
|
|
while (feat.tags.length < 2) feat.tags.push('')
|
|
feat.tags = feat.tags.slice(0, 2)
|
|
return feat
|
|
})
|
|
},
|
|
openFeaturedPicker (index) {
|
|
this.featuredPickerIndex = index
|
|
this.$refs.featuredGoodsPicker.open()
|
|
},
|
|
onFeaturedGoodsSelect (goods) {
|
|
const feat = this.form.featured[this.featuredPickerIndex]
|
|
if (!feat || !goods) return
|
|
feat.goodsId = goods.id
|
|
feat.title = goods.name || ''
|
|
feat.prefixUrl = goods.prefixUrl || ''
|
|
feat.imgurl = goods.imgurl || ''
|
|
feat.imgaddr = ''
|
|
feat.img = ''
|
|
},
|
|
clearFeaturedGoods (index) {
|
|
const feat = this.form.featured[index]
|
|
if (!feat) return
|
|
feat.goodsId = ''
|
|
feat.title = ''
|
|
feat.prefixUrl = ''
|
|
feat.imgurl = ''
|
|
feat.imgaddr = ''
|
|
feat.img = ''
|
|
},
|
|
uploadSuccess (res, file, field) {
|
|
if (!res) {
|
|
this.$message.error('上传失败')
|
|
return
|
|
}
|
|
if (!(res.code === 200 || res.success) || !res.data) {
|
|
this.$message.error((res && res.message) || '上传失败')
|
|
return
|
|
}
|
|
const data = res.data
|
|
if (!this.form[field]) {
|
|
this.$message.error('配置字段不存在')
|
|
return
|
|
}
|
|
if (field === 'pageBg') {
|
|
this.form.pageBg.mode = 2
|
|
this.form.pageBg.img = data.imgaddr || ''
|
|
this.form.pageBg.imgurl = data.url || ((this.resourcePath || '') + (data.imgaddr || ''))
|
|
} else {
|
|
this.form[field].type = 1
|
|
this.form[field].img = data.imgaddr || ''
|
|
this.form[field].imgurl = data.url || ((this.resourcePath || '') + (data.imgaddr || ''))
|
|
}
|
|
this.$message.success('上传成功')
|
|
},
|
|
uploadError () {
|
|
this.$message.error('上传失败，请检查登录状态或网络')
|
|
},
|
|
featuredPreviewUrl (item) {
|
if (!item) return ''
|
if (item.prefixUrl && item.imgurl && !/^https?:\/\//i.test(item.imgurl)) {
|
return item.prefixUrl + item.imgurl
|
}
|
if (item.imgurl && /^https?:\/\//i.test(item.imgurl)) {
|
const secondHttp = item.imgurl.indexOf('http', item.imgurl.indexOf('://') + 3)
|
if (secondHttp > 0) return item.imgurl.substring(secondHttp)
|
return item.imgurl
|
}
|
if (item.imgaddr) return (this.resourcePath || '') + item.imgaddr
|
return item.imgurl || ''
|
},
|
|
pkPreviewProduct (side) {
|
return this.pkPreviewProducts[side] || this.pkPreviewProducts.left
|
},
|
|
hexToRgba (hex, alpha) {
|
const h = String(hex || '').replace('#', '')
|
if (h.length !== 6) return `rgba(74, 55, 40, ${alpha})`
|
const r = parseInt(h.slice(0, 2), 16)
|
const g = parseInt(h.slice(2, 4), 16)
|
const b = parseInt(h.slice(4, 6), 16)
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
},
|
|
submit () {
|
|
if (Number(this.form.rangeSize) < 750 || Number(this.form.rangeSize) > 1200) {
|
|
this.$message.warning('尺寸范围750-1200')
|
|
return
|
|
}
|
|
const payload = { ...this.form }
|
|
delete payload.main
|
|
delete payload.adImg
|
|
delete payload.header
|
|
this.stripLegacyThemeFields()
|
|
if (payload.table) {
|
|
delete payload.table.headerBgType
|
|
delete payload.table.headerBg
|
|
delete payload.table.headerColorType
|
|
delete payload.table.headerColor
|
|
}
|
|
renewAnchorUpdate({
|
anchorParam: JSON.stringify(payload),
|
anchorPageVersion: this.anchorPageVersion
|
}).then(() => {
|
|
this.$message.success('保存成功')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$brown: #4A3728;
|
|
$brown-dark: #3D2E22;
|
|
$cream: #E8DCC8;
|
|
$panel: #F7F0E6;
|
|
$orange: #FF8C42;
|
|
$gold: #FFD88A;
|
|
$row-bg: #F5EFE6;
|
|
|
|
.anchor-pz {
|
|
display: flex;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
|
|
.prediv {
|
|
width: 420px;
|
|
margin-right: 20px;
|
|
flex-shrink: 0;
|
|
|
|
.prediv-content {
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
height: 720px;
|
|
background: #eee;
|
|
border-radius: 12px;
|
|
padding: 8px;
|
|
|
|
.content {
|
|
transform: scale(0.52);
|
|
transform-origin: top left;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
min-height: 1500px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.h5-preview {
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
color: $brown;
|
}
|
|
.pv_banner_wrap {
|
position: relative;
|
margin-bottom: 0;
|
|
.pv_banner_img {
|
width: 100%;
|
display: block;
|
}
|
|
.pv_user_bar {
|
position: absolute;
|
right: 12px;
|
top: 12px;
|
font-size: 12px;
|
color: $brown;
|
z-index: 2;
|
}
|
}
|
|
.pv_nav_back {
|
position: absolute;
|
left: 12px;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 48px;
|
height: 48px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 36px;
|
line-height: 1;
|
color: $brown;
|
z-index: 5;
|
opacity: 0.7;
|
}
|
|
.pv_sticky_header {
|
position: relative;
|
z-index: 4;
|
}
|
|
.pv_submit_row {
|
padding: 10px 14px 8px;
|
}
|
|
.pv_submit_btn {
|
display: inline-flex;
|
align-items: center;
|
gap: 5px;
|
padding: 7px 16px;
|
border-radius: 18px;
|
font-size: 12px;
|
font-weight: 600;
|
box-shadow: 0 2px 8px rgba(74, 55, 40, 0.1);
|
}
|
|
.pv_submit_icon_img {
|
width: 16px;
|
height: 16px;
|
object-fit: contain;
|
flex-shrink: 0;
|
}
|
|
.pv_submit_btn.submit_btn--icon {
|
display: inline-flex;
|
align-items: center;
|
gap: 5px;
|
}
|
|
.pv_submit_text {
|
color: inherit;
|
}
|
|
.pv_home_top {
|
position: relative;
|
margin: 8px 12px 0;
|
padding: 12px 12px 0;
|
border-radius: 16px 16px 0 0;
|
overflow: visible;
|
z-index: 1;
|
--home-top-bg: #4A3728;
|
|
&::after {
|
content: '';
|
position: absolute;
|
top: -18px;
|
left: -24px;
|
right: -24px;
|
bottom: -18px;
|
border-radius: 24px 24px 0 0;
|
background: radial-gradient(
|
ellipse 88% 92% at 50% 48%,
|
var(--home-top-bg) 0%,
|
rgba(74, 55, 40, 0.55) 55%,
|
rgba(74, 55, 40, 0.15) 78%,
|
transparent 100%
|
);
|
filter: blur(10px);
|
z-index: -1;
|
pointer-events: none;
|
}
|
|
&--compact {
|
padding-bottom: 12px;
|
border-radius: 16px;
|
|
&::after {
|
bottom: 0;
|
border-radius: 24px;
|
}
|
|
.pv_featured { margin-bottom: 0; }
|
}
|
}
|
|
.pv_order_bar {
|
display: flex;
|
justify-content: space-between;
|
align-items: stretch;
|
padding: 4px 4px 12px;
|
font-size: 14px;
|
position: relative;
|
z-index: 1;
|
}
|
|
.pv_order_left {
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
flex: 1;
|
min-width: 0;
|
}
|
|
.pv_order_right {
|
display: flex;
|
align-items: center;
|
flex-shrink: 0;
|
margin-left: 8px;
|
}
|
|
.pv_order_no_row { display: flex; align-items: center; gap: 6px; }
|
|
.pv_remain_inline {
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
margin-left: 10px;
|
font-size: 12px;
|
opacity: 0.85;
|
white-space: nowrap;
|
}
|
|
.pv_remain_val { font-weight: 600; color: $gold; }
|
|
.pv_order_label { opacity: 0.9; font-size: 13px; }
|
|
.pv_order_currency, .pv_budget_val { font-weight: 700; font-size: 15px; }
|
|
.pv_budget_val { font-size: 16px; }
|
|
.pv_order_no { font-weight: 600; font-size: 14px; }
|
|
.pv_featured {
|
display: flex;
|
align-items: center;
|
background: linear-gradient(180deg, #FFF9EC 0%, #FAF0E0 100%);
|
padding: 14px;
|
margin: 0 0 10px;
|
border-radius: 20px;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
|
position: relative;
|
z-index: 1;
|
}
|
|
.pv_featured_left {
|
flex-shrink: 0;
|
width: 218px;
|
min-width: 218px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
text-align: center;
|
padding-right: 12px;
|
border-right: 1px solid rgba(74, 55, 40, 0.08);
|
margin-right: 10px;
|
}
|
|
.pv_featured_title {
|
font-size: 22px;
|
font-weight: 700;
|
color: #333;
|
font-family: Georgia, 'Times New Roman', serif;
|
letter-spacing: 1px;
|
line-height: 1.15;
|
margin-bottom: 8px;
|
}
|
|
.pv_featured_sub { font-size: 10px; color: #aaa; }
|
|
.pv_featured_products {
|
flex: 1;
|
display: flex;
|
min-width: 0;
|
}
|
|
.pv_featured_item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 2px 6px;
|
min-width: 0;
|
|
&:not(:last-child) {
|
border-right: 1px solid rgba(74, 55, 40, 0.08);
|
margin-right: 6px;
|
padding-right: 10px;
|
}
|
}
|
|
.pv_featured_img_wrap {
|
width: 44px;
|
height: 72px;
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.pv_featured_img { width: 44px; height: 72px; object-fit: contain; }
|
|
.pv_featured_img_ph {
|
width: 36px;
|
height: 60px;
|
background: rgba(74, 55, 40, 0.06);
|
border-radius: 4px;
|
}
|
|
.pv_featured_info {
|
flex: 1;
|
min-width: 0;
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
}
|
|
.pv_featured_name {
|
font-size: 12px;
|
font-weight: 600;
|
color: #333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.pv_featured_tag_row { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.pv_tag {
|
font-size: 11px;
|
|
&.pv_tag_dim { color: #888; }
|
&.pv_tag_blue { color: #4A8FD4; font-weight: 500; }
|
&.pv_tag_green { color: #3CB371; font-weight: 500; }
|
}
|
|
.pv_table_head_wrap {
|
position: relative;
|
z-index: 3;
|
}
|
|
.pv_shop_table_head {
|
display: grid;
|
grid-template-columns: 1.1fr 2fr 0.9fr 0.9fr;
|
padding: 11px 14px 12px;
|
font-size: 13px;
|
font-weight: 600;
|
position: relative;
|
z-index: 1;
|
}
|
|
.pv_product_shop_table_head {
|
grid-template-columns: 1fr 1.4fr 1fr;
|
}
|
|
.pv_col { min-width: 0; }
|
|
.pv_col_cat { display: flex; align-items: center; gap: 4px; }
|
|
.pv_arrow { font-size: 10px; opacity: 0.8; }
|
|
.pv_product_search_col { display: flex; align-items: center; }
|
|
.pv_product_search_inline {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
border-radius: 16px;
|
padding: 5px 10px;
|
min-width: 0;
|
font-size: 12px;
|
color: rgba(74, 55, 40, 0.5);
|
}
|
|
.pv_search_ico { font-size: 12px; flex-shrink: 0; }
|
|
.pv_search_divider {
|
width: 1px;
|
height: 14px;
|
background: rgba(74, 55, 40, 0.12);
|
flex-shrink: 0;
|
}
|
|
.pv_search_ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.pv_product_cat_col {
|
display: flex;
|
justify-content: flex-end;
|
|
&--span { grid-column: 3 / -1; }
|
}
|
|
.pv_product_cat_inner {
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
max-width: 100%;
|
}
|
|
.pv_cat_line {
|
font-size: 13px;
|
font-weight: 600;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.pv_shop_table {
|
margin: 10px 12px;
|
position: relative;
|
}
|
|
.pv_shop_table_body { padding: 0 10px 10px; }
|
|
.pv_shop_row { margin-bottom: 10px; }
|
|
.pv_shop_row_main {
|
display: flex;
|
gap: 10px;
|
font-size: 13px;
|
min-height: 52px;
|
}
|
|
.pv_row_cat_cell {
|
width: 108px;
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
padding: 10px 8px;
|
background: #fff;
|
border-radius: 14px;
|
box-shadow: 0 2px 8px rgba(74, 55, 40, 0.08);
|
}
|
|
.pv_cat_icon_ph {
|
width: 20px;
|
height: 20px;
|
background: $panel;
|
border-radius: 4px;
|
flex-shrink: 0;
|
}
|
|
.pv_row_info_group {
|
flex: 1;
|
display: grid;
|
grid-template-columns: 2fr 0.9fr 0.9fr;
|
gap: 10px;
|
align-items: center;
|
padding: 10px;
|
background: #fff;
|
border-radius: 14px;
|
box-shadow: 0 2px 8px rgba(74, 55, 40, 0.08);
|
}
|
|
.pv_cell_ellipsis {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
min-width: 0;
|
}
|
|
.pv_shop_row--expand {
|
display: flex;
|
gap: 10px;
|
}
|
|
.pv_expand_cat {
|
position: relative;
|
width: 88px;
|
flex-shrink: 0;
|
border-radius: 14px;
|
padding: 16px 10px;
|
text-align: center;
|
box-shadow: 0 4px 16px rgba(74, 55, 40, 0.12);
|
font-size: 13px;
|
font-weight: 600;
|
}
|
|
.pv_expand_del {
|
position: absolute;
|
right: -6px;
|
top: -6px;
|
width: 22px;
|
height: 22px;
|
background: $orange;
|
color: #fff;
|
border-radius: 50%;
|
font-size: 16px;
|
line-height: 22px;
|
}
|
|
.pv_expand_cat_ph {
|
width: 48px;
|
height: 48px;
|
background: $panel;
|
border-radius: 8px;
|
margin: 0 auto 8px;
|
}
|
|
.pv_expand_panel {
|
flex: 1;
|
border-radius: 14px;
|
padding: 14px;
|
box-shadow: 0 4px 16px rgba(74, 55, 40, 0.12);
|
}
|
|
.pv_expand_data_row {
|
display: grid;
|
grid-template-columns: 2fr 0.9fr 0.9fr;
|
gap: 10px;
|
font-size: 13px;
|
margin-bottom: 12px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid rgba(74, 55, 40, 0.08);
|
}
|
|
.pv_expand_model { font-weight: 600; color: $brown; }
|
|
.pv_expand_zd, .pv_expand_price { text-align: center; }
|
|
.pv_sub_cat_grid {
|
display: flex;
|
gap: 12px;
|
flex-wrap: wrap;
|
margin-bottom: 12px;
|
}
|
|
.pv_sub_cat_item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 56px;
|
font-size: 11px;
|
|
.pv_sub_icon {
|
width: 40px;
|
height: 40px;
|
background: $panel;
|
border-radius: 8px;
|
margin-bottom: 4px;
|
}
|
}
|
|
.pv_expand_search {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 10px 14px;
|
border-radius: 24px;
|
font-size: 13px;
|
color: rgba(74, 55, 40, 0.5);
|
}
|
|
.pv_pk_page {
|
padding: 32px 24px 24px;
|
box-sizing: border-box;
|
max-width: 100%;
|
|
&--ghost { opacity: 0.35; filter: blur(1px); pointer-events: none; }
|
}
|
|
.pv_pk_cards {
|
display: grid;
|
grid-template-columns: 1fr auto 1fr;
|
gap: 12px;
|
align-items: start;
|
margin-bottom: 20px;
|
|
&--ghost { margin-bottom: 0; }
|
}
|
|
.pv_pk_side {
|
min-width: 0;
|
display: flex;
|
flex-direction: column;
|
|
&--ghost .pv_pk_showcase_frame {
|
min-height: 120px;
|
background: rgba(255, 255, 255, 0.5);
|
border-radius: 14px;
|
}
|
}
|
|
.pv_pk_showcase {
|
border-radius: 14px;
|
padding: 3px;
|
background: linear-gradient(
|
135deg,
|
var(--pk-show-accent, #{$orange}) 0%,
|
var(--pk-show-gold, #{$gold}) 42%,
|
var(--pk-show-primary, #{$brown}) 100%
|
);
|
box-shadow: 0 8px 24px var(--pk-show-accent-soft, rgba(255, 140, 66, 0.28));
|
}
|
|
.pv_pk_showcase_frame {
|
border-radius: 11px;
|
padding: 14px 10px 10px;
|
min-height: 168px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 251, 244, 0.94) 100%);
|
border: 1px solid rgba(255, 255, 255, 0.72);
|
}
|
|
.pv_pk_visual {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.pv_pk_img_card {
|
padding: 7px;
|
border-radius: 18px;
|
background: linear-gradient(180deg, #fff 0%, #fffaf3 100%) padding-box,
|
linear-gradient(145deg, var(--pk-show-gold, #{$gold}), var(--pk-show-accent, #{$orange}), var(--pk-show-primary, #{$brown})) border-box;
|
border: 2px solid transparent;
|
box-shadow: 0 10px 24px var(--pk-show-primary-soft, rgba(74, 55, 40, 0.2));
|
}
|
|
.pv_pk_img {
|
display: block;
|
width: 88px;
|
height: 88px;
|
border-radius: 14px;
|
object-fit: contain;
|
background: #fff;
|
}
|
|
.pv_pk_reflect {
|
width: 88px;
|
height: 28px;
|
margin-top: 3px;
|
overflow: hidden;
|
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, transparent 88%);
|
|
img {
|
width: 88px;
|
height: 88px;
|
transform: scaleY(-1);
|
opacity: 0.5;
|
object-fit: contain;
|
}
|
}
|
|
.pv_pk_ground {
|
width: 72%;
|
height: 8px;
|
margin-top: 2px;
|
border-radius: 50%;
|
background: radial-gradient(ellipse, rgba(74, 55, 40, 0.28) 0%, transparent 72%);
|
}
|
|
.pv_pk_podium {
|
width: 82%;
|
height: 18px;
|
margin: -2px auto 0;
|
background: linear-gradient(180deg, $brown-dark 0%, $brown 52%, rgba(0, 0, 0, 0.22) 100%);
|
clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
|
}
|
|
.pv_pk_detail_head {
|
padding: 9px 10px;
|
border-radius: 10px 10px 0 0;
|
font-size: 12px;
|
font-weight: 600;
|
text-align: center;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.pv_pk_detail_body {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 6px;
|
padding: 12px 10px;
|
background: #fff;
|
border: 1px solid rgba(74, 55, 40, 0.1);
|
border-top: none;
|
border-radius: 0 0 10px 10px;
|
box-shadow: 0 4px 12px rgba(74, 55, 40, 0.08);
|
}
|
|
.pv_pk_price_cell { text-align: center; }
|
|
.pv_pk_price_label { display: block; font-size: 11px; color: rgba(74, 55, 40, 0.62); }
|
|
.pv_pk_price_val { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; color: $brown; }
|
|
.pv_pk_price_cell--hot .pv_pk_price_val { color: #c0392b; }
|
|
.pv_pk_vs {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 28px;
|
font-weight: 700;
|
min-width: 36px;
|
margin-top: 68px;
|
|
&--spacer { visibility: hidden; margin-top: 0; }
|
}
|
|
.pv_pk_params {
|
display: grid;
|
grid-template-columns: 1fr auto 1fr;
|
gap: 12px;
|
}
|
|
.pv_pk_param_head {
|
padding: 10px;
|
border-radius: 10px 10px 0 0;
|
box-shadow: 0 2px 10px rgba(74, 55, 40, 0.1);
|
}
|
|
.pv_pk_action_group {
|
display: flex;
|
gap: 8px;
|
padding: 4px;
|
border-radius: 12px;
|
background: rgba(0, 0, 0, 0.16);
|
}
|
|
.pv_pk_change, .pv_pk_confirm {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
gap: 4px;
|
padding: 8px 10px;
|
border-radius: 9px;
|
font-size: 11px;
|
}
|
|
.pv_pk_change {
|
color: rgba(255, 255, 255, 0.92);
|
background: rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
}
|
|
.pv_pk_confirm {
|
flex: 1;
|
font-weight: 700;
|
color: #fff;
|
background: linear-gradient(135deg, var(--pk-show-gold, #{$gold}), var(--pk-show-accent, #{$orange}), var(--pk-show-primary, #{$brown}));
|
}
|
|
.pv_pk_param_pills {
|
background: #fff;
|
border-radius: 0 0 8px 8px;
|
padding: 10px;
|
}
|
|
.pv_pill {
|
display: flex;
|
justify-content: space-between;
|
padding: 8px 10px;
|
margin-bottom: 6px;
|
background: $row-bg;
|
border-radius: 20px;
|
font-size: 12px;
|
|
.pv_pill_label { color: #666; }
|
.pv_pill_val { color: $brown; font-weight: 500; }
|
}
|
|
.pv_product_page { padding: 10px 0 20px; }
|
|
.pv_product_grid {
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
gap: 8px;
|
padding: 0 12px;
|
}
|
|
.pv_product_card {
|
border-radius: 10px;
|
overflow: hidden;
|
box-shadow: 0 2px 8px rgba(74, 55, 40, 0.08);
|
display: flex;
|
flex-direction: column;
|
}
|
|
.pv_product_card_img {
|
background: #fff;
|
padding: 8px 4px 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img { width: 100%; height: 72px; object-fit: contain; }
|
}
|
|
.pv_product_card_info {
|
background: #F5EFE6;
|
padding: 6px 4px 8px;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
gap: 2px;
|
}
|
|
.pv_product_brand { font-size: 10px; color: rgba(74, 55, 40, 0.65); }
|
|
.pv_product_model {
|
font-size: 11px;
|
font-weight: 600;
|
color: $brown;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.pv_product_price_label { font-size: 10px; color: #c0392b; font-weight: 600; }
|
|
.pv_search_overlay {
|
position: absolute;
|
inset: 0;
|
z-index: 20;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 80px 16px 24px;
|
box-sizing: border-box;
|
background: rgba(61, 46, 34, 0.48);
|
backdrop-filter: blur(4px);
|
}
|
|
.pv_pk_search_panel {
|
width: 100%;
|
max-width: 640px;
|
max-height: 520px;
|
display: flex;
|
flex-direction: column;
|
border-radius: 18px;
|
overflow: hidden;
|
box-shadow: 0 20px 48px rgba(61, 46, 34, 0.28);
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
}
|
|
.pv_pk_search_head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 16px 18px;
|
}
|
|
.pv_pk_search_head_left { display: flex; align-items: center; gap: 10px; }
|
|
.pv_pk_search_title { font-size: 17px; font-weight: 600; }
|
|
.pv_pk_search_badge {
|
padding: 3px 10px;
|
border-radius: 999px;
|
font-size: 11px;
|
font-weight: 600;
|
color: $brown;
|
background: $gold;
|
}
|
|
.pv_pk_search_close {
|
width: 32px;
|
height: 32px;
|
line-height: 32px;
|
text-align: center;
|
border-radius: 50%;
|
background: rgba(255, 255, 255, 0.12);
|
font-size: 20px;
|
}
|
|
.pv_pk_search_body {
|
padding: 16px;
|
background: linear-gradient(180deg, #FFF9EC 0%, $panel 100%);
|
flex: 1;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.pv_pk_search_cat {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
margin-bottom: 12px;
|
font-size: 13px;
|
}
|
|
.pv_pk_search_cat_label { color: rgba(74, 55, 40, 0.55); }
|
|
.pv_pk_search_cat_name { font-weight: 600; color: $brown; }
|
|
.pv_pk_search_bar {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 10px 14px;
|
border-radius: 14px;
|
border: 1px solid rgba(74, 55, 40, 0.1);
|
margin-bottom: 12px;
|
font-size: 13px;
|
color: rgba(74, 55, 40, 0.45);
|
}
|
|
.pv_pk_search_table_head {
|
display: grid;
|
grid-template-columns: 1fr auto;
|
gap: 12px;
|
padding: 8px 12px;
|
font-size: 12px;
|
font-weight: 600;
|
color: rgba(74, 55, 40, 0.55);
|
border-bottom: 1px solid rgba(74, 55, 40, 0.08);
|
}
|
|
.pv_pk_search_list {
|
flex: 1;
|
overflow: auto;
|
scrollbar-width: none;
|
-ms-overflow-style: none;
|
&::-webkit-scrollbar {
|
width: 0;
|
height: 0;
|
display: none;
|
}
|
}
|
|
.pv_pk_search_item {
|
display: grid;
|
grid-template-columns: 1fr auto;
|
gap: 12px;
|
padding: 12px 14px;
|
font-size: 13px;
|
color: $brown;
|
border-bottom: 1px solid rgba(74, 55, 40, 0.06);
|
|
&--active {
|
background: rgba(255, 140, 66, 0.12);
|
border-left: 3px solid $orange;
|
}
|
}
|
|
.pv_pk_search_item_price { font-weight: 600; color: #c0392b; }
|
|
.pv_pk_search_footer {
|
padding-top: 10px;
|
font-size: 12px;
|
color: rgba(74, 55, 40, 0.5);
|
text-align: center;
|
}
|
|
|
.form-panel {
|
|
flex: 1;
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
|
|
.thumb { width: 80px; margin-left: 10px; vertical-align: middle; }
|
|
.color-select-item {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.img-select-item {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 12px;
|
margin-top: 10px;
|
}
|
|
.img-default-preview { margin-top: 10px; }
|
|
.page-bg-default-preview {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.page-bg-swatch {
|
width: 40px;
|
height: 24px;
|
border-radius: 4px;
|
border: 1px solid #ddd;
|
}
|
|
.thumb-block { border: 1px solid #eee; border-radius: 6px; }
|
|
.form-tip {
|
margin-left: 8px;
|
color: #999;
|
font-size: 12px;
|
}
|
|
.inline-label {
|
font-size: 13px;
|
color: #666;
|
}
|
|
.featured-form { border-top: 1px solid #eee; padding-top: 12px; margin-top: 12px; }
|
|
.featured-selected {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
margin: 0 0 12px 100px;
|
padding: 10px 12px;
|
background: #fafafa;
|
border: 1px solid #eee;
|
border-radius: 6px;
|
}
|
|
.featured-selected-img {
|
width: 56px;
|
height: 56px;
|
border-radius: 6px;
|
object-fit: cover;
|
flex-shrink: 0;
|
}
|
|
.featured-selected-ph { background: #ddd; }
|
|
.featured-selected-name { font-size: 14px; color: #333; font-weight: 500; }
|
|
.featured-selected-id { font-size: 12px; color: #999; margin-top: 4px; }
|
|
.sub-title { font-weight: bold; margin-bottom: 8px; }
|
|
}
|
|
|
|
.pz_head { font-size: 18px; font-weight: bold; margin-bottom: 12px; }
|
|
.pz_head--with-switch {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 16px;
|
flex-wrap: wrap;
|
}
|
|
.version-tag {
|
display: inline-block;
|
margin-left: 8px;
|
padding: 3px 10px;
|
border-radius: 4px;
|
font-size: 13px;
|
font-weight: 700;
|
color: #e6a23c;
|
background: #fdf6ec;
|
border: 1px solid #f5dab1;
|
vertical-align: middle;
|
}
|
|
.version-switch {
|
display: inline-flex;
|
align-items: center;
|
gap: 14px;
|
padding: 12px 20px;
|
border-radius: 10px;
|
border: 2px solid #e6a23c;
|
background: linear-gradient(135deg, #fdf6ec 0%, #fffbf5 100%);
|
box-shadow: 0 4px 14px rgba(230, 162, 60, 0.22);
|
transition: all 0.25s ease;
|
cursor: default;
|
|
&--active {
|
border-color: #e6a23c;
|
background: linear-gradient(135deg, #e6a23c 0%, #f0b85c 100%);
|
box-shadow: 0 6px 20px rgba(230, 162, 60, 0.4);
|
|
.version-switch__icon {
|
background: rgba(255, 255, 255, 0.25);
|
color: #fff;
|
}
|
|
.version-switch__label {
|
color: #fff;
|
}
|
|
.version-switch__status {
|
color: rgba(255, 255, 255, 0.88);
|
}
|
}
|
|
&__icon {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
background: rgba(230, 162, 60, 0.15);
|
color: #e6a23c;
|
font-size: 20px;
|
}
|
|
&__body {
|
display: flex;
|
flex-direction: column;
|
gap: 2px;
|
min-width: 0;
|
}
|
|
&__label {
|
font-size: 15px;
|
font-weight: 700;
|
color: #e6a23c;
|
white-space: nowrap;
|
line-height: 1.3;
|
}
|
|
&__status {
|
font-size: 12px;
|
color: #909399;
|
white-space: nowrap;
|
line-height: 1.3;
|
}
|
|
&__badge {
|
flex-shrink: 0;
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
padding: 8px 16px;
|
border-radius: 20px;
|
font-size: 14px;
|
font-weight: 600;
|
color: #fff;
|
background: rgba(255, 255, 255, 0.25);
|
white-space: nowrap;
|
}
|
|
&__btn {
|
flex-shrink: 0;
|
padding: 10px 22px;
|
font-size: 14px;
|
font-weight: 700;
|
border-radius: 20px;
|
border: none;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
&--v3 {
|
background: #fff;
|
color: #e6a23c;
|
|
&:hover,
|
&:focus {
|
background: #fffbf5;
|
color: #e6a23c;
|
}
|
}
|
}
|
}
|
|
}
|
|
</style>
|
