mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-06-23 18:40:25 +08:00
feat: 新增全局布局样式并提升组件响应式表现
- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式 - 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整 - 在 API 请求中增加 loading 状态管理，改善用户体验 - 优化领券中心与商品详情页，提升功能与 UI 一致性
This commit is contained in:
田香琪
@@ -205,6 +205,7 @@ export function couponList (params) {
|
||||
url: `/buyer/promotion/coupon`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
loading: false,
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
@@ -72,7 +72,8 @@ export function applyStatus () {
|
||||
return request({
|
||||
url: `/buyer/store/store/apply`,
|
||||
needToken: true,
|
||||
method: Method.GET
|
||||
method: Method.GET,
|
||||
loading: false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
22
buyer/src/assets/styles/global-layout.scss
Normal file
22
buyer/src/assets/styles/global-layout.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
// 全局布局工具类（非 scoped，避免子组件继承 class 时宽度失效）
|
||||
.width_1200_auto {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 首页主体：分类导航 + 楼层装修共用同一 1200px 容器，保证列对齐
|
||||
.index-main {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 与 CateNav 商品分类栏、Carousel 左占位一致的列宽
|
||||
$index-side-col-width: 263.2px;
|
||||
$index-col-gap: 10px;
|
||||
@@ -30,6 +30,7 @@ $dark_content_color: #d5d5d5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
/***** 封装一些方法可用于 黑暗主题 ，明亮主题 *****/
|
||||
@@ -305,9 +306,11 @@ li {
|
||||
}
|
||||
|
||||
.width_1200_auto {
|
||||
width: 1184px;
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@@ -325,18 +328,24 @@ li {
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
column-gap: 10px;
|
||||
}
|
||||
.goods-show-info {
|
||||
width: 235px;
|
||||
width: calc(20% - 8px);
|
||||
padding: 6px;
|
||||
margin: 10px 0px;
|
||||
margin-left: 5px;
|
||||
margin: 10px 0;
|
||||
position: relative;
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.goods-show-img img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
.goods-show-info:hover {
|
||||
border: 1px solid #ccc;
|
||||
@@ -368,7 +377,12 @@ li {
|
||||
color: $theme_color;
|
||||
}
|
||||
.goods-page {
|
||||
margin:10px auto ;
|
||||
text-align: right;
|
||||
width: 1200px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,18 +9,24 @@
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
column-gap: 10px;
|
||||
}
|
||||
.goods-show-info {
|
||||
width: 235px;
|
||||
width: calc(20% - 8px);
|
||||
padding: 6px;
|
||||
margin: 10px 0px;
|
||||
margin-left: 5px;
|
||||
margin: 10px 0;
|
||||
position: relative;
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.goods-show-img img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
.goods-show-info:hover {
|
||||
border: 1px solid #ccc;
|
||||
@@ -37,6 +43,7 @@
|
||||
text-overflow: ellipsis;
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient:vertical;
|
||||
color:#808080;
|
||||
}
|
||||
@@ -62,7 +69,12 @@
|
||||
color: $theme_color;
|
||||
}
|
||||
.goods-page {
|
||||
margin:10px auto ;
|
||||
text-align: right;
|
||||
width: 1200px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -136,5 +136,10 @@ export default {
|
||||
|
||||
:deep(._Card .el-card__body) {
|
||||
padding: 0 !important;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
:deep(._Card .el-card__body:empty) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,7 +57,7 @@ export default {
|
||||
if (!this.userInfo) {
|
||||
this.$Modal.confirm({
|
||||
title: '请登录',
|
||||
content: '<p>请登录后执行此操作</p>',
|
||||
content: '请登录后执行此操作',
|
||||
okText: '立即登录',
|
||||
cancelText: '继续浏览',
|
||||
onOk: () => {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
:src="currentImg"
|
||||
:preview-src-list="previewList"
|
||||
fit="contain"
|
||||
style="width: 100%; height: 400px"
|
||||
style="width: 100%; height: 350px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -220,16 +220,18 @@
|
||||
<div class="item-select-title">
|
||||
<p>数量</p>
|
||||
</div>
|
||||
<div class="item-select-row">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:max="skuDetail.quantity"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
v-model="count"
|
||||
:precision="0.1"
|
||||
@blur="changeCount"
|
||||
></el-input-number>
|
||||
<span class="inventory"> 库存{{ skuDetail.quantity }}</span>
|
||||
<div class="item-select-column">
|
||||
<div class="item-select-row">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
:max="skuDetail.quantity"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
v-model="count"
|
||||
:precision="0.1"
|
||||
@blur="changeCount"
|
||||
></el-input-number>
|
||||
<span class="inventory"> 库存{{ skuDetail.quantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -241,45 +243,52 @@
|
||||
<div class="item-select-title">
|
||||
<p>重量</p>
|
||||
</div>
|
||||
<div class="item-select-row">
|
||||
<span class="inventory"> {{ skuDetail.weight }}kg</span>
|
||||
<div class="item-select-column">
|
||||
<span class="inventory">{{ skuDetail.weight }}kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="add-buy-car"
|
||||
class="item-select add-buy-car-row"
|
||||
v-if="$route.query.way === 'POINT' && skuDetail.authFlag === 'PASS'"
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="pointPay"
|
||||
>积分购买</el-button
|
||||
>
|
||||
<div class="item-select-column">
|
||||
<div class="add-buy-car">
|
||||
<el-button
|
||||
type="danger"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="pointPay"
|
||||
>积分购买</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="add-buy-car"
|
||||
class="item-select add-buy-car-row"
|
||||
v-if="$route.query.way !== 'POINT' && skuDetail.authFlag === 'PASS'"
|
||||
>
|
||||
|
||||
<el-button
|
||||
type="danger"
|
||||
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="addShoppingCartBtn"
|
||||
>加入购物车</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
:loading="loading1"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="buyNow"
|
||||
>立即购买</el-button
|
||||
>
|
||||
<el-tooltip content="观看视频" v-if="skuDetail.goodsVideo">
|
||||
<img class="view-video" @click="showGoodsVideo = true" :src="require('@/assets/iconfont/play.svg')" alt="">
|
||||
</el-tooltip>
|
||||
<div class="item-select-column">
|
||||
<div class="add-buy-car">
|
||||
<el-button
|
||||
type="danger"
|
||||
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="addShoppingCartBtn"
|
||||
>加入购物车</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
:loading="loading1"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="buyNow"
|
||||
>立即购买</el-button
|
||||
>
|
||||
<el-tooltip content="观看视频" v-if="skuDetail.goodsVideo">
|
||||
<img class="view-video" @click="showGoodsVideo = true" :src="require('@/assets/iconfont/play.svg')" alt="">
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -644,9 +653,7 @@ export default {
|
||||
height: 350px;
|
||||
box-shadow: 0px 0px 8px $border_color;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
#dplayer{
|
||||
width: 100%;
|
||||
@@ -657,7 +664,7 @@ export default {
|
||||
}
|
||||
|
||||
.item-detail-img-row {
|
||||
margin-top: 15px;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -835,6 +842,7 @@ export default {
|
||||
.item-select {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@@ -843,15 +851,25 @@ export default {
|
||||
font-size: 14px;
|
||||
margin-right: 15px;
|
||||
width: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-select-column {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-select-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -890,12 +908,33 @@ export default {
|
||||
border-top: 1px dotted $border_color;
|
||||
}
|
||||
|
||||
.add-buy-car-row {
|
||||
margin-top: 25px;
|
||||
|
||||
&.item-select {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.item-select-column {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-buy-car {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> * {
|
||||
margin: 0 4px;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -164,9 +164,13 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
changeHeight (name) { // 设置商品详情高度
|
||||
let heightCss = window.getComputedStyle(this.$refs[name]).height;
|
||||
heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89;
|
||||
this.$refs.itemIntroDetail.style.height = heightCss + 'px';
|
||||
const el = this.$refs[name];
|
||||
const container = this.$refs.itemIntroDetail;
|
||||
if (!el || !container) return;
|
||||
let heightCss = window.getComputedStyle(el).height;
|
||||
heightCss = parseInt(heightCss, 10) + 89;
|
||||
if (Number.isNaN(heightCss)) return;
|
||||
container.style.height = heightCss + 'px';
|
||||
},
|
||||
changePageNum (val) { // 修改评论页码
|
||||
this.commentParams.pageNumber = val;
|
||||
@@ -245,13 +249,18 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => { // 手动设置详情高度，解决无法撑开问题
|
||||
setTimeout(this.changeHeight('itemIntroGoods'), 2000);
|
||||
setTimeout(() => {
|
||||
this.changeHeight('itemIntroGoods');
|
||||
}, 2000);
|
||||
});
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
this.getList();
|
||||
if (this.skuDetail.grade === null || this.skuDetail.grade === undefined) {
|
||||
this.skuDetail.grade = 100
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -41,9 +41,9 @@
|
||||
<li @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
|
||||
<li @click="goUserCenter('/home/MsgList')"><span class="nav-item">我的消息</span></li>
|
||||
<li v-if="$route.name !== 'Cart'" style="position:relative;">
|
||||
<el-dropdown placement="bottom-start" trigger="hover">
|
||||
<el-dropdown placement="bottom-start" trigger="hover" @visible-change="handleCartDropdownVisible">
|
||||
<router-link to="/cart" target="_blank">
|
||||
<span class="nav-item" @mouseenter="getCartList">
|
||||
<span class="nav-item">
|
||||
<el-icon :size="18"><ShoppingCart /></el-icon>
|
||||
购物车（{{ cartNum < 100 ? cartNum : '99' }}）
|
||||
</span>
|
||||
@@ -107,7 +107,10 @@ export default {
|
||||
return {
|
||||
config: require('@/config'),
|
||||
userInfo: {}, // 用户信息
|
||||
shoppingCart: [] // 购物车
|
||||
shoppingCart: [], // 购物车
|
||||
cartLoading: false,
|
||||
cartLoadedAt: 0,
|
||||
cartCacheTime: 5000
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -146,7 +149,7 @@ export default {
|
||||
} else {
|
||||
this.$Modal.confirm({
|
||||
title: '请登录',
|
||||
content: '<p>请登录后执行此操作</p>',
|
||||
content: '请登录后执行此操作',
|
||||
okText: '立即登录',
|
||||
cancelText: '继续浏览',
|
||||
onOk: () => {
|
||||
@@ -173,15 +176,31 @@ export default {
|
||||
this.$router.push('login');
|
||||
}
|
||||
},
|
||||
handleCartDropdownVisible(visible) {
|
||||
if (visible) {
|
||||
this.getCartList();
|
||||
}
|
||||
},
|
||||
getCartList() {
|
||||
// 获取购物车列表
|
||||
if (this.userInfo.username) {
|
||||
cartGoodsAll().then((res) => {
|
||||
this.shoppingCart = res.result.skuList;
|
||||
if (!this.userInfo.username || this.cartLoading) {
|
||||
return;
|
||||
}
|
||||
const now = Date.now();
|
||||
if (this.cartLoadedAt && now - this.cartLoadedAt < this.cartCacheTime) {
|
||||
return;
|
||||
}
|
||||
this.cartLoadedAt = now;
|
||||
this.cartLoading = true;
|
||||
cartGoodsAll().then((res) => {
|
||||
if (res.success) {
|
||||
this.shoppingCart = (res.result && res.result.skuList) || [];
|
||||
this.$store.commit('SET_CARTNUM', this.shoppingCart.length);
|
||||
this.Cookies.setItem('cartNum', this.shoppingCart.length);
|
||||
});
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.cartLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -192,28 +211,36 @@ export default {
|
||||
.box {
|
||||
width: 100%;
|
||||
font-size: 12px !important;
|
||||
height: 36px;
|
||||
height: 36px;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
line-height: 36px;
|
||||
float: none;
|
||||
line-height: 1;
|
||||
margin-right: 15px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav a,
|
||||
@@ -221,9 +248,11 @@ export default {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@@ -305,6 +334,8 @@ export default {
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div class="model-form">
|
||||
<div class="model-content">
|
||||
<template v-for="(element, index) in data.list" :key="element.key || index">
|
||||
<model-form-item
|
||||
v-if="element && element.key"
|
||||
:element="element"
|
||||
:index="index"
|
||||
:data="data"
|
||||
></model-form-item>
|
||||
</template>
|
||||
<model-form-item
|
||||
v-for="(element, index) in renderList"
|
||||
:key="element.key"
|
||||
:element="element"
|
||||
:index="index"
|
||||
:data="data"
|
||||
></model-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -19,12 +18,32 @@ export default {
|
||||
components: {
|
||||
ModelFormItem
|
||||
},
|
||||
props: ['data']
|
||||
props: ['data'],
|
||||
computed: {
|
||||
renderList() {
|
||||
const list = this.data?.list || [];
|
||||
return list.filter(
|
||||
(el) => el && el.key && !this.isBuiltinModule(el.type)
|
||||
);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isBuiltinModule(type) {
|
||||
// 顶部广告、快捷导航由 Index 页单独渲染
|
||||
return type === 'topAdvert' || type === 'navBar';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.model-form {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.model-content {
|
||||
width: 100%;
|
||||
min-height: 1200px;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,10 +2,9 @@
|
||||
<div class="model-item" v-if="element && element.key">
|
||||
<!-- 轮播图模块，包括个人信息，快捷导航模块 -->
|
||||
<template v-if="element.type == 'carousel'">
|
||||
<model-carousel
|
||||
:data="element"
|
||||
class="mb_20 width_1200_auto"
|
||||
></model-carousel>
|
||||
<div class="carousel-wrap mb_20">
|
||||
<model-carousel :key="element.key" :data="element"></model-carousel>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="element.type == 'carousel1'">
|
||||
<model-carousel1 :data="element" class="mb_20"></model-carousel1>
|
||||
@@ -20,7 +19,7 @@
|
||||
<template v-if="element.type == 'hotAdvert'">
|
||||
<div class="mb_20 width_1200_auto">
|
||||
<img
|
||||
style="display: block"
|
||||
style="display: block; width: 100%; max-width: 1200px; height: auto"
|
||||
class="hover-pointer"
|
||||
:src="element.options.list[0].img"
|
||||
@click="linkTo(element.options.list[0].url)"
|
||||
@@ -46,33 +45,39 @@
|
||||
</template>
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
class="discountAdvert"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require('@/assets/images/decorate.png') + ')',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.classification"
|
||||
:key="index"
|
||||
:src="item.img"
|
||||
width="190"
|
||||
height="210"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.brandList"
|
||||
:key="'discount' + index"
|
||||
:src="item.img"
|
||||
width="240"
|
||||
height="105"
|
||||
alt=""
|
||||
/>
|
||||
<div class="discountAdvert-wrap width_1200_auto mb_20">
|
||||
<div
|
||||
class="discountAdvert"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(' + require('@/assets/images/decorate.png') + ')',
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.classification"
|
||||
:key="index"
|
||||
:src="item.img"
|
||||
width="190"
|
||||
height="210"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.brandList"
|
||||
:key="'discount' + index"
|
||||
:src="item.img"
|
||||
width="240"
|
||||
height="105"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -183,11 +188,19 @@ export default {
|
||||
.model-item {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.carousel-wrap {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
}
|
||||
.bannerAd{
|
||||
width: 1183px;
|
||||
width: 100%;
|
||||
height: 166.6px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/** 热门广告 */
|
||||
.advert-list {
|
||||
@@ -196,6 +209,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 3px 10px;
|
||||
box-sizing: border-box;
|
||||
> li {
|
||||
img {
|
||||
cursor: pointer;
|
||||
@@ -210,25 +224,40 @@ export default {
|
||||
}
|
||||
|
||||
/** 折扣广告 */
|
||||
.discountAdvert {
|
||||
width: 1300px;
|
||||
height: 566px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
background-repeat: no-repeat;
|
||||
.discountAdvert-wrap {
|
||||
position: relative;
|
||||
left: -47px;
|
||||
padding-left: 295px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
img {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
|
||||
transform: translateY(-2px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.discountAdvert {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
height: 520px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1200px 520px;
|
||||
background-position: center top;
|
||||
position: relative;
|
||||
padding: 10px 0 0 330px;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
img {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
<template>
|
||||
<div class="model-carousel">
|
||||
<div class="nav-body clearfix">
|
||||
<!-- 侧边导航占位 -->
|
||||
<div class="nav-side"></div>
|
||||
<div class="nav-body">
|
||||
<!-- 侧边导航占位（与 CateNav 分类栏同宽，勿与 CateNav .nav-side 混用类名） -->
|
||||
<div class="carousel-side-spacer"></div>
|
||||
<div class="nav-content">
|
||||
<!-- 轮播图 -->
|
||||
<!-- autoplay autoplay-speed="10000"-->
|
||||
<el-carousel height="334px" :interval="5000">
|
||||
<el-carousel-item v-for="(item, index) in data.options.list" :key="index">
|
||||
<!-- 轮播图：无数据时不挂载 el-carousel，避免 Element Plus 卸载子项时报错 -->
|
||||
<el-carousel
|
||||
v-if="carouselList.length"
|
||||
:key="carouselRenderKey"
|
||||
height="334px"
|
||||
:interval="5000"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in carouselList"
|
||||
:key="carouselItemKey(item, index)"
|
||||
>
|
||||
<div class="swiper-img">
|
||||
<img
|
||||
:src="item.img"
|
||||
@@ -17,6 +24,7 @@
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div v-else class="swiper-img carousel-placeholder"></div>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="person-msg">
|
||||
@@ -84,6 +92,16 @@ import storage from "@/plugins/storage";
|
||||
export default {
|
||||
name: "modelCarousel",
|
||||
props: ["data"],
|
||||
computed: {
|
||||
carouselList() {
|
||||
return this.data?.options?.list || [];
|
||||
},
|
||||
carouselRenderKey() {
|
||||
const moduleKey = this.data?.key || "carousel";
|
||||
const imgs = this.carouselList.map((item) => item?.img || "").join("|");
|
||||
return `${moduleKey}-${this.carouselList.length}-${imgs}`;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: require("@/config"),
|
||||
@@ -154,6 +172,9 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
carouselItemKey(item, index) {
|
||||
return item?.img || item?.url || `slide-${index}`;
|
||||
},
|
||||
// 快捷跳转中心
|
||||
entryControl(val) {
|
||||
console.log("val",val)
|
||||
@@ -182,10 +203,15 @@ export default {
|
||||
|
||||
.swiper-img {
|
||||
overflow: hidden;
|
||||
width: 637px;
|
||||
width: 100%;
|
||||
height: 329.9px;
|
||||
}
|
||||
|
||||
.carousel-placeholder {
|
||||
border-radius: 10px;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
width: 216px
|
||||
}
|
||||
@@ -266,20 +292,18 @@ export default {
|
||||
|
||||
.model-carousel {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hover-pointer {
|
||||
//display: block;
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
width: 637px;
|
||||
width: 100%;
|
||||
height: 329.9px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.welcome {
|
||||
@@ -334,44 +358,63 @@ export default {
|
||||
|
||||
}
|
||||
|
||||
/* 导航主体 */
|
||||
/* 导航主体：固定列宽与 CateNav 完全一致（263.2 + 10 + 637 + 10 + 263.2 = 1183.4px） */
|
||||
.nav-body {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
height: 340px;
|
||||
margin: 0px auto;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 263.2px 637px 263.2px;
|
||||
column-gap: 10px;
|
||||
align-items: start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
height: 334px;
|
||||
.carousel-side-spacer {
|
||||
grid-column: 1;
|
||||
width: 263.2px;
|
||||
height: 334px;
|
||||
flex-shrink: 0;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
// background-color: #6e6568;
|
||||
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content {
|
||||
grid-column: 2;
|
||||
width: 637px;
|
||||
margin-left: 10.8px;
|
||||
|
||||
min-width: 637px;
|
||||
max-width: 637px;
|
||||
margin-top: 10px;
|
||||
height: 333.9px;
|
||||
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.el-carousel) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-carousel__container) {
|
||||
height: 334px;
|
||||
}
|
||||
|
||||
:deep(.el-carousel__item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
grid-column: 3;
|
||||
width: 263.2px;
|
||||
margin-left: 10px;
|
||||
min-width: 263.2px;
|
||||
max-width: 263.2px;
|
||||
margin-top: 10px;
|
||||
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
|
||||
@@ -88,82 +88,171 @@ export default {
|
||||
.new-goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
> div {
|
||||
width: 393px;
|
||||
height: 440px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left > .content {
|
||||
> div:nth-child(1) {
|
||||
height: 240px;
|
||||
flex-direction: column;
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
justify-content: space-between;
|
||||
img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
> div:nth-child(3),
|
||||
> div:nth-child(4) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.middle > .content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
flex-direction: unset;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding: 6px 4px 4px 6px;
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
> div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(1) {
|
||||
grid-row: span 2;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 8px 6px;
|
||||
img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
> div {
|
||||
flex: unset;
|
||||
width: 100%;
|
||||
p {
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 6px;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(1),
|
||||
> div:nth-child(2),
|
||||
> div:nth-child(3) {
|
||||
> div:nth-child(3),
|
||||
> div:nth-child(5) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
> div:nth-child(4),
|
||||
> div:nth-child(5) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.middle > .content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
flex-direction: unset;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
> div:nth-child(6),
|
||||
> div:nth-child(3) {
|
||||
> div:nth-child(2n) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
> div:nth-child(n + 5) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right > .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
flex-direction: unset;
|
||||
flex-wrap: unset;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
padding: 5px 10px 0 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 4px 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
border-bottom: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
:nth-child(2) {
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 32px;
|
||||
line-height: 16px;
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
}
|
||||
:nth-child(3) {
|
||||
color: $theme_color;
|
||||
margin-top: 5px;
|
||||
margin-top: 2px;
|
||||
line-height: 1.2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.jiaobiao {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 10px;
|
||||
right: 16px;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
background: url(../../../assets/images/festival_icon.png);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
@@ -181,10 +270,11 @@ export default {
|
||||
background-position: -60px -30px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(4),
|
||||
> div:nth-child(5),
|
||||
> div:nth-child(6) {
|
||||
border: none;
|
||||
> div:nth-child(3n) {
|
||||
border-right: none;
|
||||
}
|
||||
> div:nth-child(n + 4) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -209,6 +299,8 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
height: 370px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.con-item {
|
||||
width: 185px;
|
||||
@@ -222,6 +314,42 @@ export default {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.middle > .content .con-item {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 4px 4px 6px;
|
||||
img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
> div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left > .content .con-item {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.describe {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
:key="index"
|
||||
@click="linkTo(item.url)" class="hover-pointer"
|
||||
>
|
||||
<div class="right-item" :style="{'border': index===2 || index===3 ?'none': ''}">
|
||||
<div class="right-item">
|
||||
<div>
|
||||
<span :style="{ background: msgRight.bgColor }">{{item.name}}</span>
|
||||
<span>{{ item.describe }}</span>
|
||||
@@ -135,65 +135,85 @@ export default {
|
||||
|
||||
.recommend-right {
|
||||
width: 595px;
|
||||
height: 360px;
|
||||
|
||||
.head-recommend {
|
||||
background: #a25684;
|
||||
}
|
||||
.content-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
height: 360px;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
height: 180px;
|
||||
padding-top: 10px;
|
||||
padding: 0;
|
||||
border-right: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(2n) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:nth-child(n + 3) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.right-item {
|
||||
border-bottom: 1px solid #eee;
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 150px;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
>div:nth-child(1) {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin-top: 30px;
|
||||
span:nth-child(1){
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
background-color: #a25684;
|
||||
display: block;
|
||||
> div:nth-child(1) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-top: 0;
|
||||
text-align: left;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 10px 10px 0;
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
background-color: #a25684;
|
||||
display: block;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.right-img {
|
||||
width: 100;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img{
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(n + 1) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="cate-nav width_1200_auto" :class="{'fixed-show':useClass == 'fixed-show'}">
|
||||
<div class="cate-nav" :class="{'fixed-show':useClass == 'fixed-show'}">
|
||||
<div class="nav-con" :class="{'background-white':useClass == 'background-white'}">
|
||||
<div
|
||||
class="all-categories hover-pointer"
|
||||
@@ -149,9 +149,8 @@ export default {
|
||||
// 导航列表
|
||||
if (storage.getItem("navList")) {
|
||||
return JSON.parse(storage.getItem("navList"));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
return { list: [] };
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
@@ -261,21 +260,27 @@ export default {
|
||||
}
|
||||
.cate-nav {
|
||||
position: relative;
|
||||
margin: 14px auto 0 auto;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
margin: 14px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/** 商品分类 */
|
||||
.nav-con {
|
||||
height: 46px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
.all-categories {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 46px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
padding-left: 37.4px;
|
||||
background: #FFFFFF;
|
||||
width: 263.2px;
|
||||
padding-top: 15.4px;
|
||||
line-height: 20px;
|
||||
border-bottom: none;
|
||||
font-size: 16.8px;
|
||||
font-weight: normal;
|
||||
@@ -283,15 +288,16 @@ export default {
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.nav-item {
|
||||
width: 914px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
margin-left: 10px;
|
||||
margin: 0 0 0 10px;
|
||||
padding: 0;
|
||||
line-height: 46px;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
// background-color: #eee;
|
||||
display: flex;
|
||||
li {
|
||||
float: left;
|
||||
@@ -306,12 +312,12 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
// 分类列表
|
||||
// 分类列表（浮层叠在轮播左列之上）
|
||||
.cate-list {
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 46px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
|
||||
@@ -96,6 +96,9 @@ export default {
|
||||
this.init()
|
||||
});
|
||||
},
|
||||
close () {
|
||||
this.show = false;
|
||||
},
|
||||
init () { // 初始化数据
|
||||
this.flag = false;
|
||||
this.downX = 0;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { createApp } from "vue";
|
||||
import "core-js/stable";
|
||||
import "./assets/styles/global-layout.scss";
|
||||
import "./assets/styles/theme.less";
|
||||
import App from "./App.vue";
|
||||
import { router } from "./router/index";
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
</router-link>
|
||||
<p>领券中心</p>
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
style="width: 400px"
|
||||
@keyup.enter="search"
|
||||
placeholder="搜索优惠券"
|
||||
@@ -17,8 +18,8 @@
|
||||
|
||||
<div class="fontsize_18 recommend">推荐好券</div>
|
||||
|
||||
<empty v-if="list.length === 0" />
|
||||
<ul class="coupon-list" v-else>
|
||||
<empty v-if="!loading && list.length === 0" />
|
||||
<ul class="coupon-list" v-else-if="list.length > 0">
|
||||
<li v-for="(item, index) in list" class="coupon-item" :key="index">
|
||||
<div class="c-left">
|
||||
<div>
|
||||
@@ -29,7 +30,7 @@
|
||||
<span
|
||||
v-if="item.couponType === 'DISCOUNT'"
|
||||
class="fontsize_12 global_color"
|
||||
><span class="price">{{ item.couponDiscount }}</span>折</span>
|
||||
><span class="price">{{ item.couponDiscount || item.discount }}</span>折</span>
|
||||
<span class="describe"
|
||||
>满{{ item.consumeThreshold }}元可用</span>
|
||||
</div>
|
||||
@@ -60,6 +61,8 @@ export default {
|
||||
return {
|
||||
list: [], // 优惠券列表
|
||||
total: 0, // 优惠券总数
|
||||
loading: false,
|
||||
keyword: "",
|
||||
params: {
|
||||
// 请求参数
|
||||
getType: "FREE",
|
||||
@@ -70,25 +73,31 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
// 搜索优惠券
|
||||
search(item) {
|
||||
this.params.couponName = item;
|
||||
search() {
|
||||
this.params.couponName = this.keyword.trim();
|
||||
this.params.pageNumber = 1;
|
||||
this.getList();
|
||||
},
|
||||
// 获取优惠券列表
|
||||
getList() {
|
||||
this.$Spin.show();
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
couponList(this.params)
|
||||
.then((res) => {
|
||||
this.$Spin.hide();
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.list = res.result.records;
|
||||
this.total = res.result.total;
|
||||
if (res && res.success && res.result) {
|
||||
this.list = res.result.records || [];
|
||||
this.total = res.result.total || 0;
|
||||
} else {
|
||||
this.list = [];
|
||||
this.total = 0;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$Spin.hide();
|
||||
this.list = [];
|
||||
this.total = 0;
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 分页 改变页码
|
||||
@@ -104,12 +113,12 @@ export default {
|
||||
},
|
||||
// 领取优惠券
|
||||
receive(item) {
|
||||
receiveCoupon(item.id).then((res) => {
|
||||
if (res.success) {
|
||||
console.log(item);
|
||||
receiveCoupon(item.id)
|
||||
.then((res) => {
|
||||
if (!res || !res.success) return;
|
||||
this.$Modal.confirm({
|
||||
title: "领取优惠券",
|
||||
content: "<p>优惠券领取成功，可到我的优惠券页面查看</p>",
|
||||
content: "优惠券领取成功，可到我的优惠券页面查看",
|
||||
okText: "我的优惠券",
|
||||
cancelText: "立即使用",
|
||||
closable: true,
|
||||
@@ -123,8 +132,8 @@ export default {
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 优惠券可用范围
|
||||
useScope(type, storeName) {
|
||||
@@ -178,8 +187,54 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
.coupon-item {
|
||||
overflow: hidden;
|
||||
$claim-width: 55px;
|
||||
|
||||
.c-left {
|
||||
width: calc(100% - #{$claim-width});
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
b {
|
||||
background: url("../assets/images/small-circle.png") top left repeat-y;
|
||||
right: $claim-width;
|
||||
width: 0;
|
||||
background: none;
|
||||
border-right: 1px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
.c-right {
|
||||
width: $claim-width;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
letter-spacing: 4px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
i.circle-top,
|
||||
i.circle-bottom {
|
||||
right: calc(#{$claim-width} - 9px);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
i.circle-top {
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
i.circle-bottom {
|
||||
bottom: -9px;
|
||||
}
|
||||
}
|
||||
.pageration {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="forget-password" @click='$refs.verify.show = false'>
|
||||
<div class="forget-password" @click="hideVerify">
|
||||
<div style="height:50px;"></div>
|
||||
<!-- 顶部logo -->
|
||||
<div class="logo-box">
|
||||
@@ -151,6 +151,9 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hideVerify() {
|
||||
this.$refs.verify?.close?.();
|
||||
},
|
||||
// 提交短信验证码，修改密码
|
||||
next () {
|
||||
this.$refs.formFirst.validate((valid) => {
|
||||
@@ -230,12 +233,12 @@ export default {
|
||||
},
|
||||
verifyChange (con) { // 验证通过
|
||||
if (!con.status) return;
|
||||
this.$refs.verify.show = false;
|
||||
this.hideVerify();
|
||||
this.verifyStatus = true;
|
||||
},
|
||||
verifyBtnClick () {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.init();
|
||||
this.$refs.verify?.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -202,19 +202,26 @@ export default {
|
||||
.shop-item-path {
|
||||
height: 38px;
|
||||
@include background_color($light_background_color);
|
||||
line-height: 38px;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.shop-nav-container {
|
||||
width: 1200px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.el-breadcrumb) {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.store-collect {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
|
||||
span {
|
||||
|
||||
@@ -19,16 +19,18 @@
|
||||
:key="index"
|
||||
@click="orderBy(item.en, index)"
|
||||
>
|
||||
<span :class="{ 'goods-list-tool-active': index === sortIndex }"
|
||||
>{{ item.title }}<el-icon><ArrowDown /></el-icon></span>
|
||||
<span :class="{ 'goods-list-tool-active': index === sortIndex }">
|
||||
{{ item.title }}
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
</li>
|
||||
<li @click="orderBy('price', 5, 'up')" class="price-sort">
|
||||
<span :class="{ 'goods-list-tool-active': 5 === sortIndex }">
|
||||
价格
|
||||
<div>
|
||||
<span class="price-arrows">
|
||||
<el-icon :class="{ 'price-color': sortPriceIndex == 'desc' }"><ArrowUp /></el-icon>
|
||||
<el-icon :class="{ 'price-color': sortPriceIndex == 'asc' }"><ArrowDown /></el-icon>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -44,7 +46,7 @@
|
||||
@click="goGoodsDetail(item.id, item.goodsId)"
|
||||
>
|
||||
<div class="goods-show-img">
|
||||
<img width="220" height="220" :src="item.thumbnail" />
|
||||
<img :src="item.thumbnail" />
|
||||
</div>
|
||||
<div class="goods-show-price">
|
||||
<span>
|
||||
@@ -72,22 +74,21 @@
|
||||
|
||||
<div class="goods-show-right">
|
||||
<el-tag
|
||||
class="goods-show-tag"
|
||||
class="goods-show-tag goods-show-tag-self"
|
||||
color="red"
|
||||
effect="dark"
|
||||
v-if="item.selfOperated"
|
||||
>
|
||||
自营
|
||||
</el-tag>
|
||||
<el-tag
|
||||
class="goods-show-tag"
|
||||
color="blue"
|
||||
class="goods-show-tag goods-show-tag-physical"
|
||||
v-if="item.goodsType === 'VIRTUAL_GOODS'"
|
||||
>
|
||||
虚拟
|
||||
</el-tag>
|
||||
<el-tag
|
||||
class="goods-show-tag"
|
||||
color="blue"
|
||||
class="goods-show-tag goods-show-tag-physical"
|
||||
v-else-if="item.goodsType === 'PHYSICAL_GOODS'"
|
||||
>
|
||||
实物
|
||||
@@ -103,7 +104,8 @@
|
||||
@size-change="changePageSize"
|
||||
:total="total"
|
||||
:page-size="params.pageSize"
|
||||
layout="total, sizes, prev, pager, next"></el-pagination>
|
||||
layout="total, prev, pager, next, sizes"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<el-skeleton size="large" fix v-if="loading"></el-skeleton>
|
||||
@@ -244,6 +246,8 @@ export default {
|
||||
},
|
||||
components: {
|
||||
GoodsClassNav,
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -274,6 +278,24 @@ export default {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.goods-show-tag-self {
|
||||
color: #fff;
|
||||
|
||||
:deep(.el-tag__content) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-show-tag-physical {
|
||||
background-color: #e6f4ff;
|
||||
border-color: #b3d8ff;
|
||||
color: #409eff;
|
||||
|
||||
:deep(.el-tag__content) {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-show-seller {
|
||||
// padding:3px 0;
|
||||
vertical-align: middle;
|
||||
@@ -295,6 +317,8 @@ export default {
|
||||
.goods-show-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@@ -314,38 +338,40 @@ export default {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.goods-list-tool ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: 15px;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: left;
|
||||
}
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
.price-sort {
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
position: relative;
|
||||
line-height: 15px;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
}
|
||||
span > div {
|
||||
display: inline-block;
|
||||
.price-arrows {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
line-height: 0;
|
||||
|
||||
.el-icon {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
&:nth-child(1) {
|
||||
top: 1px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: 7px;
|
||||
font-size: 8px;
|
||||
line-height: 1;
|
||||
height: 6px;
|
||||
|
||||
:deep(svg) {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.price-color {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
@@ -354,28 +380,37 @@ export default {
|
||||
}
|
||||
.goods-list-tool li {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.goods-list-tool span {
|
||||
.goods-list-tool li > span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 3px 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin-left: -1px;
|
||||
background-color: #fff;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.goods-list-tool span:hover {
|
||||
.goods-list-tool li > span:hover {
|
||||
border-color: $theme_color;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.goods-list-tool .el-icon {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
.goods-list-tool li > span .el-icon {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
.goods-list-tool-active {
|
||||
color: #fff;
|
||||
border-left: 1px solid #ccc;
|
||||
background-color: $theme_color !important;
|
||||
|
||||
.price-color {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------商品栏结束------------------- */
|
||||
|
||||
@@ -29,10 +29,11 @@
|
||||
<BaseHeader></BaseHeader>
|
||||
<!-- 搜索框、logo -->
|
||||
<Search></Search>
|
||||
<!-- 商品分类 -->
|
||||
<cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
|
||||
<!-- 楼层装修部分 -->
|
||||
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||
<div class="index-main">
|
||||
<!-- 商品分类 + 楼层装修（同一宽度容器，保证与分类栏左缘对齐） -->
|
||||
<cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
|
||||
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||
</div>
|
||||
<!-- 底部栏 -->
|
||||
<BaseFooter></BaseFooter>
|
||||
<!-- 侧边栏 -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login" @keyup.enter="handleSubmit('formInline')">
|
||||
<!-- 顶部logo -->
|
||||
<div class="top-content" @click='$refs.verify.show = false'>
|
||||
<div class="top-content" @click="hideVerify">
|
||||
<div class="logo-box">
|
||||
<img :src="$store.state.logoImg" @click="$router.push('/')" />
|
||||
<div>欢迎登录</div>
|
||||
@@ -12,13 +12,13 @@
|
||||
<!-- 轮播 -->
|
||||
<el-carousel :interval="5000" arrow="never" class="login-carousel" height="550px">
|
||||
<el-carousel-item>
|
||||
<div class="demo-carousel" @click='$refs.verify.show = false'>
|
||||
<div class="demo-carousel" @click="hideVerify">
|
||||
<img src="https://lili-system.oss-cn-beijing.aliyuncs.com/background.jpg" />
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- 登录模块 -->
|
||||
<div class="form-box" @click='$refs.verify.show = false'>
|
||||
<div class="form-box" @click="hideVerify">
|
||||
<div class="account-number">
|
||||
<div class="tab-switch">
|
||||
<span>{{ type ? '账号登录' : '验证码登录' }}</span>
|
||||
@@ -70,7 +70,7 @@
|
||||
<div v-show="!scannerCodeLoginFLag">
|
||||
<!-- 账号密码登录 -->
|
||||
<el-form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
|
||||
@click.self='$refs.verify.show = false'>
|
||||
@click.self="hideVerify">
|
||||
<el-form-item prop="username">
|
||||
<el-input type="text" v-model="formData.username" clearable placeholder="用户名">
|
||||
<template #prepend><el-icon><User /></el-icon></template>
|
||||
@@ -87,7 +87,7 @@
|
||||
</el-form>
|
||||
<!-- 验证码登录 -->
|
||||
<el-form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
|
||||
@click.self='$refs.verify.show = false'>
|
||||
@click.self="hideVerify">
|
||||
<el-form-item prop="mobile">
|
||||
<el-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
|
||||
<template #prepend><el-icon><Lock /></el-icon></template>
|
||||
@@ -126,8 +126,8 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div class="register">
|
||||
<span style="color:red" @click="$router.push('signUp')">还没有账号？点击立即注册</span>
|
||||
<span @click="$router.push('forgetPassword')">忘记密码</span>
|
||||
<span style="color:red" @click.stop="$router.push('signUp')">还没有账号？点击立即注册</span>
|
||||
<span @click.stop="$router.push('forgetPassword')">忘记密码</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -224,17 +224,20 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideVerify() {
|
||||
this.$refs.verify?.close?.();
|
||||
},
|
||||
|
||||
// 登录
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.type) {
|
||||
this.$refs.verify.init();
|
||||
this.$refs.verify?.init();
|
||||
} else {
|
||||
let data = JSON.parse(JSON.stringify(this.formSms));
|
||||
apiLogin.smsLogin(data).then((res) => {
|
||||
this.$refs.verify.show = false;
|
||||
this.hideVerify();
|
||||
if (res.success) {
|
||||
this.$Message.success("登录成功");
|
||||
storage.setItem("accessToken", res.result.accessToken);
|
||||
@@ -306,7 +309,7 @@ export default {
|
||||
// 账号密码登录
|
||||
let data = JSON.parse(JSON.stringify(this.formData));
|
||||
data.password = md5(data.password);
|
||||
this.$refs.verify.show = false;
|
||||
this.hideVerify();
|
||||
this.$Spin.show();
|
||||
apiLogin
|
||||
.login(data)
|
||||
@@ -323,13 +326,13 @@ export default {
|
||||
});
|
||||
} else {
|
||||
this.verifyStatus = true;
|
||||
this.$refs.verify.show = false;
|
||||
this.hideVerify();
|
||||
}
|
||||
},
|
||||
// 开启滑块验证
|
||||
verifyBtnClick() {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.init();
|
||||
this.$refs.verify?.init();
|
||||
}
|
||||
},
|
||||
handleWebLogin(type) {
|
||||
@@ -448,7 +451,7 @@ export default {
|
||||
this.$refs.formSms.resetFields();
|
||||
}
|
||||
this.verifyStatus = false;
|
||||
this.$refs.verify.show = false;
|
||||
this.hideVerify();
|
||||
clearInterval(this.interval);
|
||||
this.codeMsg = "发送验证码";
|
||||
this.time = 60;
|
||||
@@ -614,11 +617,12 @@ export default {
|
||||
|
||||
.register {
|
||||
display: flex;
|
||||
|
||||
margin-top: -10px;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
>
|
||||
|
||||
<div class="goods-show-img">
|
||||
<img :src="item.small" height="220" width="220" alt=""/>
|
||||
<img :src="item.small" alt=""/>
|
||||
</div>
|
||||
<div class="goods-show-price">
|
||||
<span>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sign-up" @click='$refs.verify.show = false'>
|
||||
<div class="sign-up" @click="hideVerify">
|
||||
<div style="height:50px;"></div>
|
||||
<div class="logo-box">
|
||||
<img
|
||||
@@ -75,7 +75,7 @@
|
||||
:verifyType="verifyType"
|
||||
@change="verifyChange"
|
||||
></Verify>
|
||||
<div class="login-btn">已有账号？<a @click="$router.push('login')">立即登录</a></div>
|
||||
<div class="login-btn">已有账号？<a @click.stop="$router.push('login')">立即登录</a></div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<div type="flex" justify="space-around" class="help">
|
||||
@@ -139,22 +139,26 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hideVerify() {
|
||||
this.$refs.verify?.close?.();
|
||||
},
|
||||
// 注册
|
||||
handleRegist () {
|
||||
this.$refs.formRegist.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = JSON.parse(JSON.stringify(this.formRegist));
|
||||
data.password = md5(data.password);
|
||||
apiLogin.regist(data).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success('注册成功!');
|
||||
this.$router.push('login');
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
} else {}
|
||||
});
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = JSON.parse(JSON.stringify(this.formRegist));
|
||||
data.password = md5(data.password);
|
||||
apiLogin.regist(data).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success('注册成功!');
|
||||
this.$router.push('login');
|
||||
} else {
|
||||
this.$Message.warning(res.message || '注册失败');
|
||||
}
|
||||
}).catch(() => {});
|
||||
}).catch(() => {});
|
||||
},
|
||||
// 发送短信验证码
|
||||
sendCode () {
|
||||
@@ -187,21 +191,21 @@ export default {
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
this.$Message.warning(res.message || '验证码发送失败');
|
||||
}
|
||||
});
|
||||
}).catch(() => {});
|
||||
}
|
||||
},
|
||||
// 图片验证码成功回调
|
||||
verifyChange (con) {
|
||||
if (!con.status) return;
|
||||
this.$refs.verify.show = false;
|
||||
this.hideVerify();
|
||||
this.verifyStatus = true;
|
||||
},
|
||||
// 打开图片验证码
|
||||
verifyBtnClick () {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.init();
|
||||
this.$refs.verify?.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -143,8 +143,35 @@ export default {
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
}
|
||||
.order-row,
|
||||
.order-item-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> [span] {
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
> [span='12'] {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
> [span='4'] {
|
||||
flex: 0 0 16.666667%;
|
||||
max-width: 16.666667%;
|
||||
}
|
||||
|
||||
> [span='6'] {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.order-item-view {
|
||||
padding: 10px 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.order-item {
|
||||
text-align: center;
|
||||
|
||||
@@ -470,29 +470,36 @@ export default {
|
||||
},
|
||||
distribution() {
|
||||
// 获取分销商信息
|
||||
distribution().then((res) => {
|
||||
if (res.result) {
|
||||
this.result = res.result;
|
||||
let type = res.result.distributionStatus;
|
||||
if (type === "PASS") {
|
||||
this.status = 2;
|
||||
this.getGoodsData();
|
||||
} else if ( type === "REFUSE") {
|
||||
distribution()
|
||||
.then((res) => {
|
||||
if (res?.result) {
|
||||
this.result = res.result;
|
||||
const type = res.result.distributionStatus;
|
||||
if (type === "PASS") {
|
||||
this.status = 2;
|
||||
this.getGoodsData();
|
||||
} else if (type === "REFUSE") {
|
||||
this.status = 0;
|
||||
} else if (type === "RETREAT") {
|
||||
this.status = 4;
|
||||
} else if (type === "APPEAL") {
|
||||
this.status = 5;
|
||||
} else {
|
||||
this.status = 1;
|
||||
}
|
||||
} else if (res?.code === 22000) {
|
||||
// 分销功能未开启
|
||||
this.status = 3;
|
||||
} else {
|
||||
// 没有资格申请，显示申请表单
|
||||
this.status = 0;
|
||||
} else if (type === "RETREAT") {
|
||||
this.status = 4;
|
||||
}else if (type === "APPEAL") {
|
||||
this.status = 5;
|
||||
}else {
|
||||
this.status = 1;
|
||||
}
|
||||
} else if (!res.data.success && res.data.code === 22000) {
|
||||
this.status = 3;
|
||||
} else {
|
||||
// 没有资格申请 先去实名认证
|
||||
this.status = 0;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err?.code === 22000) {
|
||||
this.status = 3;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -10,12 +10,10 @@
|
||||
<!-- 物流评分、服务评分 -->
|
||||
<div class="delivery-rate">
|
||||
<div class="fontsize_16">物流服务评价：</div>
|
||||
<div class="color999">
|
||||
<span>物流评价：<el-rate disabled :value="Number(orderGoods.deliveryScore)" /></span>
|
||||
<span>服务评价：<el-rate disabled :value="Number(orderGoods.serviceScore)" /></span>
|
||||
<span
|
||||
>服务评价：<el-rate disabled :value="Number(orderGoods.descriptionScore)"
|
||||
/></span>
|
||||
<div class="color999 delivery-rate-items">
|
||||
<span>物流评价：<el-rate disabled :model-value="Number(orderGoods.deliveryScore) || 0" /></span>
|
||||
<span>服务评价：<el-rate disabled :model-value="Number(orderGoods.serviceScore) || 0" /></span>
|
||||
<span>描述评价：<el-rate disabled :model-value="Number(orderGoods.descriptionScore) || 0" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加订单评价 左侧商品详情 右侧评价框 -->
|
||||
@@ -133,13 +131,29 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
border-bottom: 1px solid #eee;
|
||||
> div:nth-child(1) {
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.delivery-rate-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.delivery-rate-items :deep(.el-rate) {
|
||||
--el-rate-fill-color: #ffb400;
|
||||
--el-rate-disabled-fill-color: #ffb400;
|
||||
}
|
||||
|
||||
:deep(.el-rate__icon.is-active) {
|
||||
color: #ffb400;
|
||||
}
|
||||
.goods-eval li {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
@@ -45,17 +45,27 @@
|
||||
<div>
|
||||
<span @click="shopPage(order.shopId)">{{ order.storeName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="order-actions">
|
||||
<!-- 订单基础操作 -->
|
||||
<el-button @click="goDetail(order.sn)" type="info" size="small">售后详情</el-button>
|
||||
<el-button @click="openModal(order)"
|
||||
v-if="order.serviceStatus == 'PASS' &&
|
||||
order.serviceType != 'RETURN_MONEY'"
|
||||
type="warning" size="small">提交物流
|
||||
</el-button>
|
||||
<el-button @click="cancel(order.sn)" type="danger" v-if="order.afterSaleAllowOperationVO.cancel" size="small">
|
||||
取消售后
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="goDetail(order.sn)"
|
||||
type="warning"
|
||||
size="small"
|
||||
class="after-sale-action-btn"
|
||||
>售后详情</el-button>
|
||||
<el-button
|
||||
@click="openModal(order)"
|
||||
v-if="order.serviceStatus == 'PASS' && order.serviceType != 'RETURN_MONEY'"
|
||||
size="small"
|
||||
class="after-sale-action-btn submit-logistics-btn"
|
||||
>提交物流</el-button>
|
||||
<el-button
|
||||
@click="cancel(order.sn)"
|
||||
type="danger"
|
||||
v-if="order.afterSaleAllowOperationVO.cancel"
|
||||
size="small"
|
||||
class="after-sale-action-btn"
|
||||
>取消售后</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,8 +106,14 @@
|
||||
<el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="发货时间" prop="mDeliverTime">
|
||||
<el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime"
|
||||
format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
|
||||
<el-date-picker
|
||||
type="date"
|
||||
style="width:100%"
|
||||
v-model="form.mDeliverTime"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择发货时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -225,32 +241,32 @@ export default {
|
||||
},
|
||||
// 提交物流信息
|
||||
submitDelivery() {
|
||||
this.submitLoading = true
|
||||
afterSaleDelivery(this.form).then(res => {
|
||||
if (res.success) {
|
||||
this.logisticsShow = false;
|
||||
this.$Message.success('提交成功')
|
||||
this.getList()
|
||||
}
|
||||
this.submitLoading = false
|
||||
}).catch(() => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
this.$refs.form?.validate((valid) => {
|
||||
if (!valid) return;
|
||||
this.submitLoading = true;
|
||||
afterSaleDelivery(this.form).then(res => {
|
||||
if (res.success) {
|
||||
this.logisticsShow = false;
|
||||
this.$Message.success('提交成功');
|
||||
this.getList();
|
||||
}
|
||||
this.submitLoading = false;
|
||||
}).catch(() => {
|
||||
this.submitLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
// 提交物流modal
|
||||
openModal(row) {
|
||||
console.log(row);
|
||||
this.singleOrder = row;
|
||||
this.form.afterSaleSn = row.sn
|
||||
this.logisticsShow = true;
|
||||
this.$refs.form.resetFields()
|
||||
if (!this.companyList.length) {
|
||||
this.getCompany()
|
||||
this.getCompany();
|
||||
}
|
||||
},
|
||||
// 格式化时间
|
||||
changeTime(time) {
|
||||
this.form.mDeliverTime = time;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form?.resetFields();
|
||||
this.form.afterSaleSn = row.sn;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -331,11 +347,31 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(3) {
|
||||
width: 100px;
|
||||
.order-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-width: 100px;
|
||||
|
||||
.el-button {
|
||||
margin-bottom: 10px;
|
||||
.after-sale-action-btn {
|
||||
display: block;
|
||||
margin: 0;
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
:deep(.submit-logistics-btn) {
|
||||
background-color: #ff9900 !important;
|
||||
border-color: #ff9900 !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #e68a00 !important;
|
||||
border-color: #e68a00 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,7 +88,14 @@
|
||||
<el-input v-model="form.logisticsNo" placeholder="请填写物流单号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="发货时间" prop="mDeliverTime">
|
||||
<el-date-picker type="date" style="width:100%" v-model="form.mDeliverTime" @change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></el-date-picker>
|
||||
<el-date-picker
|
||||
type="date"
|
||||
style="width:100%"
|
||||
v-model="form.mDeliverTime"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择发货时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -206,16 +213,14 @@ export default {
|
||||
},
|
||||
// 提交物流modal
|
||||
openModal () {
|
||||
this.form.afterSaleSn = this.afterSale.sn
|
||||
this.logisticsShow = true;
|
||||
this.$refs.form.resetFields()
|
||||
if (!this.companyList.length) {
|
||||
this.getCompany()
|
||||
this.getCompany();
|
||||
}
|
||||
},
|
||||
// 格式化时间
|
||||
changeTime (time) {
|
||||
this.form.mDeliverTime = time;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form?.resetFields();
|
||||
this.form.afterSaleSn = this.afterSale.sn;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@@ -4,12 +4,10 @@
|
||||
<card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" v-if="!homePage"></card>
|
||||
<card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" _More="全部订单" _Src="/home/MyOrder" v-else></card>
|
||||
<!-- 搜索 筛选 -->
|
||||
<div class="mb_24 box" v-if="!homePage">
|
||||
<div class="global_float_right" >
|
||||
<div class="order-search-bar" v-if="!homePage">
|
||||
<div class="global_float_right">
|
||||
<el-input
|
||||
class="width_300"
|
||||
|
||||
|
||||
v-model="params.keywords"
|
||||
@keyup.enter="getList"
|
||||
placeholder="请输入订单号搜索"
|
||||
@@ -62,12 +60,12 @@
|
||||
<div>
|
||||
<span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="order-actions">
|
||||
<!-- 订单基础操作 -->
|
||||
<el-button @click="orderDetail(order.sn)" type="info" size="small">订单详情</el-button>
|
||||
<el-button @click="orderDetail(order.sn)" type="warning" size="small">订单详情</el-button>
|
||||
<el-button @click="handleCancelOrder(order.sn)" type="danger" v-if="order.allowOperationVO.cancel" size="small">取消订单</el-button>
|
||||
<el-button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</el-button>
|
||||
<el-button @click="received(order.sn)" size="small" type="warning" v-if="order.allowOperationVO.rog">确认收货</el-button>
|
||||
<el-button @click="received(order.sn)" size="small" class="confirm-receipt-btn" v-if="order.allowOperationVO.rog">确认收货</el-button>
|
||||
<!-- 售后 -->
|
||||
<el-button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
|
||||
@click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
|
||||
@@ -92,12 +90,18 @@
|
||||
</div>
|
||||
<template #footer><div></div></template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="cancelAvail" title="请选择取消订单原因" @ok="sureCancel" @cancel="cancelAvail = false">
|
||||
<el-radio-group v-model="cancelParams.reason" vertical type="button" button-style="solid">
|
||||
<el-dialog v-model="cancelAvail" title="请选择取消订单原因">
|
||||
<el-radio-group v-model="cancelParams.reason">
|
||||
<el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
|
||||
{{item.reason}}
|
||||
{{ item.reason }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<template #footer>
|
||||
<div style="text-align: right">
|
||||
<el-button @click="cancelAvail = false">取消</el-button>
|
||||
<el-button type="primary" @click="sureCancel">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -302,7 +306,9 @@ export default {
|
||||
.wrapper {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.box {
|
||||
.order-search-bar {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-size {
|
||||
@@ -373,10 +379,30 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(3) {
|
||||
width: 100px;
|
||||
.order-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-width: 100px;
|
||||
|
||||
.el-button {
|
||||
margin-bottom: 10px;
|
||||
margin: 0;
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
:deep(.confirm-receipt-btn) {
|
||||
background-color: #ff9900 !important;
|
||||
border-color: #ff9900 !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #e68a00 !important;
|
||||
border-color: #e68a00 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,16 +173,16 @@
|
||||
<td>{{refundPriceList(goods.isRefund)}}</td>
|
||||
<td>{{ $filters.unitPrice(goods.refundPrice, "￥") }}</td>
|
||||
<td>{{ $filters.unitPrice((goods.goodsPrice * goods.num), "￥") }}</td>
|
||||
<td>
|
||||
<td class="order-item-actions">
|
||||
<el-button
|
||||
v-if="
|
||||
goods.afterSaleStatus.includes('NOT_APPLIED') ||
|
||||
goods.afterSaleStatus.includes('PART_AFTER_SALE')
|
||||
"
|
||||
@click="applyAfterSale(goods.sn)"
|
||||
type="info"
|
||||
type="warning"
|
||||
size="small"
|
||||
class="mb_5"
|
||||
class="order-item-action-btn mb_5"
|
||||
>申请售后</el-button
|
||||
>
|
||||
<el-button
|
||||
@@ -190,14 +190,14 @@
|
||||
@click="comment(order.order.sn, goodsIndex)"
|
||||
size="small"
|
||||
type="success"
|
||||
class="fontsize_12 mb_5"
|
||||
class="order-item-action-btn fontsize_12 mb_5"
|
||||
>评价</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="goods.complainStatus == 'NO_APPLY'"
|
||||
@click="complain(order.order.sn, goodsIndex)"
|
||||
type="warning"
|
||||
class="fontsize_12"
|
||||
class="order-item-action-btn fontsize_12 mb_5"
|
||||
size="small"
|
||||
>投诉</el-button
|
||||
>
|
||||
@@ -239,19 +239,20 @@
|
||||
<el-dialog
|
||||
v-model="cancelAvail"
|
||||
title="请选择取消订单原因"
|
||||
@ok="sureCancel"
|
||||
@cancel="cancelAvail = false"
|
||||
>
|
||||
<el-radio-group
|
||||
v-model="cancelParams.reason"
|
||||
vertical
|
||||
type="button"
|
||||
button-style="solid"
|
||||
>
|
||||
<el-radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
|
||||
{{ item.reason }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<template #footer>
|
||||
<div style="text-align: right">
|
||||
<el-button @click="cancelAvail = false">取消</el-button>
|
||||
<el-button type="primary" @click="sureCancel">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!--查询物流-->
|
||||
@@ -594,6 +595,10 @@ table {
|
||||
height: 40px;
|
||||
background: #eee;
|
||||
}
|
||||
th {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
@@ -613,6 +618,16 @@ table {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-item-actions {
|
||||
vertical-align: middle;
|
||||
|
||||
.order-item-action-btn {
|
||||
display: block;
|
||||
margin: 0 auto 5px;
|
||||
min-width: 88px;
|
||||
}
|
||||
}
|
||||
/** 订单价格 */
|
||||
.order-price {
|
||||
text-align: right;
|
||||
|
||||
@@ -133,21 +133,73 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
@import "../../../assets/styles/coupon.scss";
|
||||
.coupon-item {
|
||||
height: 125px;
|
||||
overflow: hidden;
|
||||
height: 145px;
|
||||
margin-left: 0;
|
||||
$claim-width: 55px;
|
||||
|
||||
.c-left {
|
||||
padding: 16px;
|
||||
width: calc(100% - #{$claim-width});
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
right: $claim-width;
|
||||
width: 0;
|
||||
background: none;
|
||||
border-right: 1px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
.c-right {
|
||||
padding: 20px 16px;
|
||||
width: 43px;
|
||||
font-size: 14px;
|
||||
width: $claim-width;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
letter-spacing: 4px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.canot-use {
|
||||
color: #999;
|
||||
background-color: #eee;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
i {
|
||||
right: 34px;
|
||||
|
||||
i.circle-top,
|
||||
i.circle-bottom {
|
||||
right: calc(#{$claim-width} - 9px);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
i.circle-top {
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
i.circle-bottom {
|
||||
bottom: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -30,8 +30,13 @@
|
||||
:key="index">
|
||||
<div>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-tag class="ml_10" v-if="item.isDefault" color="red">默认</el-tag>
|
||||
<el-tag class="ml_10" v-if="item.alias" color="warning">{{ item.alias }}
|
||||
<el-tag class="ml_10 address-default-tag" v-if="item.isDefault" color="red" effect="dark">默认</el-tag>
|
||||
<el-tag
|
||||
class="ml_10 address-alias-tag"
|
||||
v-if="item.alias"
|
||||
color="rgb(255, 153, 0)"
|
||||
effect="dark"
|
||||
>{{ item.alias }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div>{{ item.mobile }}</div>
|
||||
@@ -182,8 +187,16 @@
|
||||
</div>
|
||||
<img class="used" v-if="usedCouponId.includes(item.id)" src="../../assets/images/geted.png" alt="" />
|
||||
<b></b>
|
||||
<a class="c-right" @click="useCoupon(item.id, true)">立即使用</a>
|
||||
<a class="c-right" v-if="usedCouponId.includes(item.id)" @click="useCoupon(item.id, false)">放弃优惠</a>
|
||||
<a
|
||||
class="c-right"
|
||||
v-if="!usedCouponId.includes(item.id)"
|
||||
@click="useCoupon(item.id, true)"
|
||||
>立即使用</a>
|
||||
<a
|
||||
class="c-right c-right-cancel"
|
||||
v-else
|
||||
@click="useCoupon(item.id, false)"
|
||||
>放弃优惠</a>
|
||||
<i class="circle-top"></i>
|
||||
<i class="circle-bottom"></i>
|
||||
</li>
|
||||
@@ -1020,6 +1033,18 @@ export default {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
:deep(.address-default-tag) {
|
||||
--el-tag-text-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.address-alias-tag) {
|
||||
--el-tag-bg-color: rgb(255, 153, 0);
|
||||
--el-tag-border-color: rgb(255, 153, 0);
|
||||
--el-tag-text-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
>div {
|
||||
border: 1px dotted #949494;
|
||||
width: 265px;
|
||||
@@ -1340,32 +1365,92 @@ export default {
|
||||
}
|
||||
|
||||
.coupon-item {
|
||||
width: 260px;
|
||||
width: 280px;
|
||||
height: 125px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
$claim-width: 55px;
|
||||
|
||||
.c-right {
|
||||
width: 30px;
|
||||
padding: 10px 7px;
|
||||
.c-left {
|
||||
width: calc(100% - #{$claim-width});
|
||||
padding: 14px 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> div,
|
||||
> p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> div .price {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
background: url("../../assets/images/small-circle.png") top left repeat-y;
|
||||
right: 28px;
|
||||
right: $claim-width;
|
||||
width: 0;
|
||||
background: none;
|
||||
border-right: 1px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
.c-right {
|
||||
width: $claim-width;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
letter-spacing: 3px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.c-right-cancel {
|
||||
letter-spacing: 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.circle-top,
|
||||
.circle-bottom {
|
||||
right: 22px;
|
||||
right: calc(#{$claim-width} - 9px);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.circle-top {
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
.circle-bottom {
|
||||
bottom: -9px;
|
||||
}
|
||||
|
||||
.used {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 40px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 50%;
|
||||
right: calc(#{$claim-width} + 8px);
|
||||
transform: translateY(-50%);
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="pay-btn">
|
||||
<el-button type="primary" @click="$router.push('/')">继续逛逛</el-button>
|
||||
<el-button type="info" v-if="$route.query.orderType ==='RECHARGE'" @click="$router.push('/home/MoneyManagement')">查看余额</el-button>
|
||||
<el-button type="info" v-else @click="$router.push('/home/myOrder')">查看订单</el-button>
|
||||
<el-button class="view-order-btn" v-else @click="$router.push('/home/myOrder')">查看订单</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -35,4 +35,15 @@ export default {
|
||||
margin:0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.view-order-btn {
|
||||
--el-button-bg-color: rgb(250, 100, 25);
|
||||
--el-button-border-color: rgb(250, 100, 25);
|
||||
--el-button-hover-bg-color: rgb(250, 100, 25);
|
||||
--el-button-hover-border-color: rgb(250, 100, 25);
|
||||
--el-button-active-bg-color: rgb(250, 100, 25);
|
||||
--el-button-active-border-color: rgb(250, 100, 25);
|
||||
--el-button-text-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -100,7 +100,7 @@ export default {
|
||||
if (way === 'WALLET') {
|
||||
this.$Modal.confirm({
|
||||
title: '支付确认',
|
||||
content: '<p>确认使用余额支付吗？</p>',
|
||||
content: '确认使用余额支付吗？',
|
||||
onOk: () => {
|
||||
pay(params).then(res => {
|
||||
if (res.success) {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
@click="goGoodsDetail(item.id)"
|
||||
>
|
||||
<div class="goods-show-img">
|
||||
<img width="220" height="220" :src="item.goodsSku.thumbnail" />
|
||||
<img :src="item.goodsSku.thumbnail" />
|
||||
</div>
|
||||
<div class="goods-show-price">
|
||||
<span>
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<div class="company-msg">
|
||||
<el-form ref="firstForm" :model="form" :rules="rules" label-width="140px">
|
||||
<el-form
|
||||
ref="firstForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="140px"
|
||||
@submit.prevent
|
||||
@keydown.enter.prevent
|
||||
@focusout="saveDraft"
|
||||
>
|
||||
<h4>基础信息</h4>
|
||||
<el-form-item prop="companyName" label="公司名称">
|
||||
<el-input
|
||||
@@ -182,6 +190,8 @@ import * as RegExp from '@/plugins/RegExp.js';
|
||||
import multipleMap from "@/components/map/multiple-map";
|
||||
import storage from '@/plugins/storage';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
const FIRST_APPLY_DRAFT_KEY = 'shopEntryFirstDraft';
|
||||
|
||||
export default {
|
||||
components: { multipleMap, View, Delete },
|
||||
props: {
|
||||
@@ -199,6 +209,20 @@ export default {
|
||||
|
||||
previewPicture: '', // 预览图片url
|
||||
form: { // 表单数据
|
||||
companyName: '',
|
||||
companyAddressIdPath: '',
|
||||
companyAddressPath: '',
|
||||
companyAddress: '',
|
||||
employeeNum: '',
|
||||
companyPhone: '',
|
||||
registeredCapital: '',
|
||||
linkName: '',
|
||||
linkPhone: '',
|
||||
companyEmail: '',
|
||||
licenseNum: '',
|
||||
scope: '',
|
||||
legalName: '',
|
||||
legalId: '',
|
||||
legalPhoto: [],
|
||||
licencePhoto: []
|
||||
},
|
||||
@@ -241,7 +265,8 @@ export default {
|
||||
]
|
||||
},
|
||||
uploadLoading1: false, // 上传loading
|
||||
uploadLoading: false // 上传loading
|
||||
uploadLoading: false, // 上传loading
|
||||
contentInitialized: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -269,7 +294,10 @@ export default {
|
||||
applyFirst(params)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) this.$emit('change', 1);
|
||||
if (res.success) {
|
||||
sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
|
||||
this.$emit('change', 1);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
@@ -337,18 +365,57 @@ export default {
|
||||
// 删除图片
|
||||
handleRemove (index, listName) {
|
||||
this.form[listName].splice(index, 1);
|
||||
},
|
||||
initFormFromContent(content) {
|
||||
if (!content || !Object.keys(content).length) return;
|
||||
this.form = JSON.parse(JSON.stringify(content));
|
||||
this.form.legalPhoto = content.legalPhoto
|
||||
? String(content.legalPhoto).split(',').filter(Boolean)
|
||||
: [];
|
||||
this.form.licencePhoto = content.licencePhoto
|
||||
? String(content.licencePhoto).split(',').filter(Boolean)
|
||||
: [];
|
||||
this.contentInitialized = true;
|
||||
},
|
||||
restoreDraft() {
|
||||
const draft = sessionStorage.getItem(FIRST_APPLY_DRAFT_KEY);
|
||||
if (!draft) return;
|
||||
try {
|
||||
const parsed = JSON.parse(draft);
|
||||
this.form = {
|
||||
legalPhoto: [],
|
||||
licencePhoto: [],
|
||||
...parsed,
|
||||
};
|
||||
this.form.legalPhoto = Array.isArray(parsed.legalPhoto) ? parsed.legalPhoto : [];
|
||||
this.form.licencePhoto = Array.isArray(parsed.licencePhoto) ? parsed.licencePhoto : [];
|
||||
} catch (e) {
|
||||
sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
|
||||
}
|
||||
},
|
||||
saveDraft() {
|
||||
sessionStorage.setItem(FIRST_APPLY_DRAFT_KEY, JSON.stringify(this.form));
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
content: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (this.contentInitialized || !val || !Object.keys(val).length) return;
|
||||
this.initFormFromContent(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
if (Object.keys(this.content).length) { // 处理回显数据
|
||||
this.form = JSON.parse(JSON.stringify(this.content));
|
||||
if (this.form.licencePhoto) {
|
||||
this.form.legalPhoto = this.content.legalPhoto.split(',');
|
||||
this.form.licencePhoto = this.content.licencePhoto.split(',');
|
||||
|
||||
}
|
||||
if (Object.keys(this.content).length) {
|
||||
this.initFormFromContent(this.content);
|
||||
} else {
|
||||
this.restoreDraft();
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.saveDraft();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -90,11 +90,9 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.content != {}) {
|
||||
if (this.content && Object.keys(this.content).length) {
|
||||
this.form = JSON.parse(JSON.stringify(this.content));
|
||||
this.$forceUpdate();
|
||||
}
|
||||
this.$refs.secondForm.resetFields()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -3,17 +3,32 @@
|
||||
<div style="height: 20px"></div>
|
||||
<div class="content">
|
||||
<h1>店铺入驻</h1>
|
||||
<el-steps :current="currentIndex" class="margin">
|
||||
<el-steps :active="currentIndex" class="margin" finish-status="success">
|
||||
<el-step title="企业资质信息"></el-step>
|
||||
<el-step title="财务资质信息"></el-step>
|
||||
<el-step title="其他信息"></el-step>
|
||||
<el-step title="提交审核"></el-step>
|
||||
</el-steps>
|
||||
<first-apply v-if="currentIndex == 0 && dataReview" :content="firstData" @change="nextPage"></first-apply>
|
||||
<div v-if="initLoading" class="step-loading" v-loading="true"></div>
|
||||
<template v-else>
|
||||
<first-apply
|
||||
v-if="currentIndex === 0 && agreementAccepted"
|
||||
:content="firstData"
|
||||
@change="nextPage"
|
||||
></first-apply>
|
||||
|
||||
<second-apply v-if="currentIndex == 1 && dataReview" :content="secondData" @change="nextPage"></second-apply>
|
||||
<second-apply
|
||||
v-if="currentIndex === 1 && agreementAccepted"
|
||||
:content="secondData"
|
||||
@change="nextPage"
|
||||
></second-apply>
|
||||
|
||||
<third-apply v-if="currentIndex == 2 && dataReview" :content="thirdData" @change="nextPage"></third-apply>
|
||||
<third-apply
|
||||
v-if="currentIndex === 2 && agreementAccepted"
|
||||
:content="thirdData"
|
||||
@change="nextPage"
|
||||
></third-apply>
|
||||
</template>
|
||||
|
||||
<div class="success-page" v-if="currentIndex == 3">
|
||||
<span v-if="storeDisable == '' || storeDisable == 'APPLYING'">入驻申请提交成功，等待平台审核</span>
|
||||
@@ -28,15 +43,15 @@
|
||||
</div>
|
||||
|
||||
<el-dialog title="店铺入驻协议" v-model="showAgreement" width="1200" :closable="false" :close-on-click-modal="false">
|
||||
<Scroll :on-reach-bottom="handleReachBottom">
|
||||
<div class="agreement-scroll">
|
||||
<div class="agreeent-con" v-html="agreementCon"></div>
|
||||
</Scroll>
|
||||
</div>
|
||||
|
||||
<template #footer><div style="text-align: center">
|
||||
<p>
|
||||
<el-checkbox v-model="checked">我已同意以上协议</el-checkbox>
|
||||
</p>
|
||||
<el-button type="primary" :disabled="!checked" class="margin" @click="showAgreement = false">同意协议填写资质信息</el-button>
|
||||
<el-button type="primary" :disabled="!checked" class="margin" @click="confirmAgreement">同意协议填写资质信息</el-button>
|
||||
</div></template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@@ -63,101 +78,114 @@ export default {
|
||||
secondData: {}, // 第二步数据
|
||||
thirdData: {}, // 第三步数据
|
||||
storeDisable: "", // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒绝 APPLYING 申请中，审核
|
||||
dataReview: true, // 根据接口返回判断是否可展示数据
|
||||
initLoading: true,
|
||||
agreementAccepted: false, // 是否已同意入驻协议
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
confirmAgreement() {
|
||||
this.agreementAccepted = true;
|
||||
this.showAgreement = false;
|
||||
sessionStorage.setItem("shopEntryAgreementAccepted", "1");
|
||||
},
|
||||
assignApplyData(data) {
|
||||
const first = [
|
||||
"companyAddressPath",
|
||||
"companyAddress",
|
||||
"companyAddressIdPath",
|
||||
"companyEmail",
|
||||
"companyName",
|
||||
"employeeNum",
|
||||
"companyPhone",
|
||||
"legalId",
|
||||
"legalName",
|
||||
"licencePhoto",
|
||||
"legalPhoto",
|
||||
"licenseNum",
|
||||
"linkName",
|
||||
"linkPhone",
|
||||
"registeredCapital",
|
||||
"scope",
|
||||
];
|
||||
const second = [
|
||||
"settlementBankAccountName",
|
||||
"settlementBankAccountNum",
|
||||
"settlementBankBranchName",
|
||||
"settlementBankJointName",
|
||||
];
|
||||
const third = [
|
||||
"goodsManagementCategory",
|
||||
"storeCenter",
|
||||
"storeDesc",
|
||||
"storeLogo",
|
||||
"storeName",
|
||||
"storeAddressIdPath",
|
||||
"storeAddressPath",
|
||||
"storeAddressDetail",
|
||||
];
|
||||
|
||||
this.storeDisable = data.storeDisable || "";
|
||||
Object.assign(this.firstData, Object.fromEntries(first.map((key) => [key, data[key]])));
|
||||
Object.assign(this.secondData, Object.fromEntries(second.map((key) => [key, data[key]])));
|
||||
Object.assign(this.thirdData, Object.fromEntries(third.map((key) => [key, data[key]])));
|
||||
},
|
||||
getArticle() {
|
||||
// 入驻协议
|
||||
agreement().then((res) => {
|
||||
this.agreementCon = res.result.content;
|
||||
});
|
||||
},
|
||||
handleReachBottom(){
|
||||
|
||||
},
|
||||
getData(status) {
|
||||
// 获取已填写店铺信息
|
||||
applyStatus().then((res) => {
|
||||
if (res.success) {
|
||||
if (!res.result) {
|
||||
if (!res.success) {
|
||||
return;
|
||||
}
|
||||
if (!res.result) {
|
||||
if (status === "init" && !this.agreementAccepted) {
|
||||
this.showAgreement = true;
|
||||
} else {
|
||||
this.dataReview = false;
|
||||
let data = res.result;
|
||||
let first = [
|
||||
"companyAddressPath",
|
||||
"companyAddress",
|
||||
"companyAddressIdPath",
|
||||
"companyEmail",
|
||||
"companyName",
|
||||
"employeeNum",
|
||||
"companyPhone",
|
||||
"legalId",
|
||||
"legalName",
|
||||
"licencePhoto",
|
||||
"legalPhoto",
|
||||
"licenseNum",
|
||||
"linkName",
|
||||
"linkPhone",
|
||||
"registeredCapital",
|
||||
"scope",
|
||||
];
|
||||
let second = [
|
||||
"settlementBankAccountName",
|
||||
"settlementBankAccountNum",
|
||||
"settlementBankBranchName",
|
||||
"settlementBankJointName",
|
||||
];
|
||||
let third = [
|
||||
"goodsManagementCategory",
|
||||
"storeCenter",
|
||||
"storeDesc",
|
||||
"storeLogo",
|
||||
"storeName",
|
||||
"storeAddressIdPath",
|
||||
"storeAddressPath",
|
||||
"storeAddressDetail",
|
||||
];
|
||||
|
||||
this.storeDisable = data.storeDisable;
|
||||
|
||||
first.forEach((e) => {
|
||||
this.firstData[e] = data[e];
|
||||
});
|
||||
second.forEach((e) => {
|
||||
this.secondData[e] = data[e];
|
||||
});
|
||||
third.forEach((e) => {
|
||||
this.thirdData[e] = data[e];
|
||||
});
|
||||
if (status === "init") {
|
||||
if (this.storeDisable === "APPLY") {
|
||||
this.currentIndex = 0;
|
||||
} else {
|
||||
this.currentIndex = 3;
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.dataReview = true;
|
||||
this.$forceUpdate();
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.assignApplyData(res.result);
|
||||
if (status === "init") {
|
||||
this.agreementAccepted = true;
|
||||
sessionStorage.setItem("shopEntryAgreementAccepted", "1");
|
||||
if (this.storeDisable === "APPLY") {
|
||||
this.currentIndex = 0;
|
||||
} else {
|
||||
this.currentIndex = 3;
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
if (status === "init") {
|
||||
this.initLoading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshApplyData() {
|
||||
applyStatus().then((res) => {
|
||||
if (res.success && res.result) {
|
||||
this.assignApplyData(res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 下一步
|
||||
nextPage(step) {
|
||||
this.currentIndex = step;
|
||||
this.getData("next");
|
||||
if (step > 0 && step < 3) {
|
||||
this.refreshApplyData();
|
||||
} else if (step === 3) {
|
||||
this.refreshApplyData();
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.agreementAccepted = sessionStorage.getItem("shopEntryAgreementAccepted") === "1";
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.getData("init");
|
||||
this.getArticle();
|
||||
|
||||
|
||||
this.getData("init");
|
||||
this.getArticle();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -187,6 +215,13 @@ export default {
|
||||
|
||||
}
|
||||
}
|
||||
.agreement-scroll {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.step-loading {
|
||||
min-height: 320px;
|
||||
}
|
||||
.success-page {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
|
||||
@@ -148,7 +148,7 @@ export default {
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) this.$emit('change', 3);
|
||||
this.$parent.getData()
|
||||
this.$parent.getData('next');
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
@@ -228,19 +228,17 @@ export default {
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getCategoryList();
|
||||
if (this.content != {}) {
|
||||
if (this.content && Object.keys(this.content).length) {
|
||||
this.form = JSON.parse(JSON.stringify(this.content));
|
||||
if (this.form.storeLogo) {
|
||||
this.form.storeLogo = this.content.storeLogo.split(',');
|
||||
this.form.goodsManagementCategory = this.content.goodsManagementCategory.split(
|
||||
','
|
||||
);
|
||||
this.form.storeLogo = String(this.content.storeLogo).split(',').filter(Boolean);
|
||||
this.form.goodsManagementCategory = String(this.content.goodsManagementCategory || '')
|
||||
.split(',')
|
||||
.filter(Boolean);
|
||||
} else {
|
||||
this.form.storeLogo = [];
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}
|
||||
this.$refs.thirdForm.resetFields()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,27 +1,26 @@
|
||||
import Cookies from "js-cookie";
|
||||
const psl = require("psl");
|
||||
|
||||
const isClient = typeof window !== "undefined";
|
||||
|
||||
function withCookieDomain(options = {}) {
|
||||
if (!isClient) {
|
||||
return options;
|
||||
}
|
||||
const pPsl = psl.parse(document.domain);
|
||||
let domain = pPsl.domain;
|
||||
if (/\d+\.\d+\.\d+\.\d+/.test(pPsl.input)) domain = pPsl.input;
|
||||
return { domain, ...options };
|
||||
}
|
||||
|
||||
export default {
|
||||
setItem: (key, value, options = {}) => {
|
||||
if (process.client) {
|
||||
console.log(process.client);
|
||||
const pPsl = psl.parse(document.domain);
|
||||
let domain = pPsl.domain;
|
||||
if (/\d+\.\d+\.\d+\.\d+/.test(pPsl.input)) domain = pPsl.input;
|
||||
options = { domain, ...options };
|
||||
}
|
||||
Cookies.set(key, value, options);
|
||||
Cookies.set(key, value, withCookieDomain(options));
|
||||
},
|
||||
getItem: key => {
|
||||
return Cookies.get(key);
|
||||
},
|
||||
removeItem: (key, options = {}) => {
|
||||
if (process.client) {
|
||||
const pPsl = psl.parse(document.domain);
|
||||
let domain = pPsl.domain;
|
||||
if (/\d+\.\d+\.\d+\.\d+/.test(pPsl.input)) domain = pPsl.input;
|
||||
options = { domain, ...options };
|
||||
}
|
||||
Cookies.remove(key, options);
|
||||
Cookies.remove(key, withCookieDomain(options));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,4 +1,30 @@
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
let loadingInstance = null;
|
||||
|
||||
export const Spin = {
|
||||
show(options = {}) {
|
||||
Spin.hide();
|
||||
const config =
|
||||
typeof options === "string"
|
||||
? { text: options }
|
||||
: options && typeof options === "object"
|
||||
? options
|
||||
: {};
|
||||
loadingInstance = ElLoading.service({
|
||||
lock: true,
|
||||
text: config.text || "加载中...",
|
||||
background: config.background || "rgba(255, 255, 255, 0.7)",
|
||||
...config,
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
if (loadingInstance) {
|
||||
loadingInstance.close();
|
||||
loadingInstance = null;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const Message = {
|
||||
success(content) {
|
||||
@@ -53,6 +79,17 @@ export const Modal = {
|
||||
}
|
||||
});
|
||||
},
|
||||
warning(options = {}) {
|
||||
const content = options.content || options.title || "";
|
||||
return ElMessageBox.alert(content, options.title || "提示", {
|
||||
confirmButtonText: options.okText || "确定",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
if (typeof options.onOk === "function") {
|
||||
return options.onOk();
|
||||
}
|
||||
});
|
||||
},
|
||||
remove() {
|
||||
ElMessageBox.close();
|
||||
},
|
||||
@@ -68,4 +105,5 @@ export function setupLegacyMessage(app) {
|
||||
app.config.globalProperties.$Message = Message;
|
||||
app.config.globalProperties.$Modal = Modal;
|
||||
app.config.globalProperties.$Notice = Notice;
|
||||
app.config.globalProperties.$Spin = Spin;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user