merge:合并修复bug以及首页修改

feature/ad-0531-ch
张征 2 years ago
commit 3c2ff793ab

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 569 B

After

Width:  |  Height:  |  Size: 358 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 823 B

After

Width:  |  Height:  |  Size: 661 B

@ -99,7 +99,7 @@
:class="isAccount ? 'clearmargin' : ''"
>
<UiButton
v-if="addressList[0].id && !isAccount"
v-if="addressList[0]&&addressList[0].id && !isAccount"
type="grey"
@click="onCanceloperation()"
>取消</UiButton
@ -239,6 +239,8 @@ export default {
} else {
vm.defaultAddress = true;
vm.isOperation = true;
vm.addressList = [];
vm.$emit("getList", vm.addressList);
}
console.log("获取收货地址", res);
},

@ -2,7 +2,7 @@
<div class="chosen">
<div class="chosen-title flex flex-between flex-middle">
<h3 class="chosen-title--txt">为你精选</h3>
<div class="chosen-title--btn flex" @click="getRecommendedGoodsList()">
<div class="chosen-title--btn flex" @click="onRest()">
<img src="@/assets/img/goods/each.png" alt="切换推荐" />
<span>换一组</span>
</div>
@ -23,6 +23,8 @@ export default {
components: { UiGoodsItem },
data() {
return {
pages: 0,
pageIndex: 1,
recommendedData: [],
};
},
@ -30,17 +32,22 @@ export default {
this.getRecommendedGoodsList();
},
methods: {
onRest() {
this.pageIndex < this.pages ? this.pageIndex++ : (this.pageIndex = 1);
this.getRecommendedGoodsList();
},
async getRecommendedGoodsList() {
let vm = this;
let res = await ApiGetGoodsList({
length: 20,
pageIndex: 1,
pageIndex: vm.pageIndex,
name: "",
categoryId: "",
order: "",
});
console.log(res.result)
console.log(res.result);
vm.recommendedData = res.result.records;
vm.pages = res.result.pages;
},
},
};

@ -51,24 +51,30 @@ export default {
</script>
<style lang="scss" scoped>
.goods-item {
width: 232px;
height: 340px;
width: 228px;
height: 320px;
cursor: pointer;
background: #ffffff;
transition: all 0.3s;
padding: 30px;
&:hover {
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
box-shadow: 0px 4px 40px 1px rgba(0, 0, 0, 0.10000000149011612);
margin-top: -3px;
}
&__img {
width: 232px;
height: 232px;
width: 130px!important;
height: 130px;
display: block;
margin: 0 auto 44px;
}
&__title {
width: 200px;
width: 170px;
height: 45px;
line-height: 22px;
margin: 17px auto 10px;
// margin: 17px auto 10px;
margin-bottom: 10px;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
@ -80,12 +86,15 @@ export default {
-webkit-line-clamp: 2;
&-label {
display: inline-block;
padding: 2px 8px;
background: rgba(255, 135, 91, 0.1);
width: 40px;
height: 18px;
text-align: center;
line-height: 18px;
background: #FF6A19;
font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #ff875b;
color: #fff;
text-align: center;
margin-right: 8px;
}
@ -95,7 +104,7 @@ export default {
margin: 0 auto;
&--txt {
font-size: 14px;
font-size: 16px;
color: #ff512b;
&::before {
content: "¥";

@ -171,7 +171,9 @@ export default {
background: #ff512b;
border-radius: 50%;
color: #ffffff;
margin-left: 4px;
left: 10px;
top: -7px;
position: absolute;
&--more {
// width: unset;
top: -8px;

@ -303,7 +303,7 @@ export default {
.header-wrap-content--line {
width: 1px;
height: 10px;
background: #d8d8d8;
background: #969696;
}
.header-wrap-content__common {
cursor: pointer;

@ -193,6 +193,7 @@ export default {
background: #ffffff;
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
z-index: 9999;
&--hide-shadow {
box-shadow: none;
/deep/.el-menu {
@ -277,6 +278,10 @@ export default {
padding: 0 5px;
}
}
/deep/.tab-category-menu__right {
top: 70px!important;
}
}
}
.header-box-wrap__right {
@ -288,7 +293,7 @@ export default {
z-index: 1;
border-radius: 4px;
/deep/.el-input__suffix{
/deep/.el-input__suffix {
display: flex;
align-items: center;
// margin-right: 16px;

@ -11,7 +11,11 @@
<main class="main">
<h3 class="title">消息通知</h3>
<section class="section">
<div class="section__item flex" v-for="item in socketMsgData" :key="item.id">
<div
class="section__item flex"
v-for="item in socketMsgData"
:key="item.id"
>
<img
class="section__item-img"
src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
@ -25,28 +29,33 @@
}}</span>
</div>
<div class="section__item-content--txt">
{{
JSON.parse(item.payload).content ||
``
}}
{{ JSON.parse(item.payload).content || `` }}
</div>
</div>
</div>
<UiEmpty
v-if="!socketMsgData.length"
desc="暂无消息通知"
:icon="require('@/assets/img/account/order/empty.png')"
>
</UiEmpty>
</section>
</main>
</div>
</template>
<script>
import { mapState } from "vuex";
import UiEmpty from "@/components/UiEmpty.vue";
export default {
components: { UiEmpty },
data() {
return {};
},
computed: {
...mapState(["token","socketMsgData"]),
...mapState(["token", "socketMsgData"]),
},
mounted(){
console.log(`socketMsgData`,this.$store.state)
mounted() {
console.log(`socketMsgData`, this.$store.state);
},
methods: {},
};
@ -71,6 +80,8 @@ export default {
padding: 22px 20px 0;
border: 1px solid #ddd;
margin-top: -1px;
max-height: 600px;
overflow-y: auto;
&__item {
margin-bottom: 20px;

@ -53,6 +53,7 @@ export default {
</script>
<style lang="scss" scoped>
.box{
min-width: 1000px;
border: 1px solid #ddd;
border-radius: 4px;
display: flex;

@ -537,6 +537,9 @@ export default {
margin-bottom: 14px;
&__crumbs {
width: 1200px;
color: #666;
@include ellipsis;
padding-right: 970px
}
}
.main {
@ -814,7 +817,7 @@ export default {
width: 1200px;
margin: 64px auto 0;
&-recommend {
width: 232px;
width: 228px;
margin-right: 30px;
/deep/.goods-item {

@ -11,18 +11,24 @@
<el-carousel height="360px" indicator-position="outside">
<el-carousel-item>
<el-image
<<<<<<< HEAD
@click="onAdvBannerClick(1)"
:src="banner1"
=======
@click="onAdvBannerClick(0)"
:src="adv1"
>>>>>>> fix/ui-0521-zz
fit="cover"
></el-image>
</el-carousel-item>
<el-carousel-item>
<el-image
@click="onAdvBannerClick(2)"
:src="banner2"
@click="onAdvBannerClick(1)"
:src="adv2"
fit="cover"
></el-image>
</el-carousel-item>
<el-carousel-item v-for="item in bannerList" :key="item.id">
<el-image
@click="onBannerClick(item.id)"
@ -38,23 +44,23 @@ export default {
name: "HomtBanner",
data() {
return {
banner1: require("~/assets/img/home/banner1.jpg"),
banner2: require("~/assets/img/home/banner2.jpg"),
adv1: require("~/assets/img/banner/zbk.jpg"),
adv2: require("~/assets/img/banner/jlp.jpg"),
bannerList: [
{
url: "https://cdn.mashibing.com/shop-pc/goods13.jpg",
url: require(`~/assets/img/banner/1.jpg`),
id: 13,
},
{
url: "https://cdn.mashibing.com/shop-pc/goods30.jpg",
url: require(`~/assets/img/banner/2.jpg`),
id: 30,
},
{
url: "https://cdn.mashibing.com/shop-pc/goods15.jpg",
url: require(`~/assets/img/banner/3.jpg`),
id: 15,
},
{
url: "https://cdn.mashibing.com/shop-pc/goods40.jpg",
url: require(`~/assets/img/banner/4.jpg`),
id: 40,
},
],
@ -71,6 +77,14 @@ export default {
onBannerClick(goodsId) {
window.open(`${location.origin}/goods/detail/${goodsId}`);
},
onAdvBannerClick(i) {
if (i === 0) {
window.open(`https://www.mashibing.com/live/1530`);
} else if (i === 1) {
window.open(`https://www.mashibing.com/free/1373`);
}
},
},
};
</script>

@ -42,9 +42,11 @@
v-for="(item, index) in recommendArray"
:key="index"
@click="onJumpGoodsDetail(item.id)"
class="recommend-products-right__item"
class="recommend-products-right__item flex flex-column"
>
<strong class="home-pick-recommend--title">{{ item.title }}</strong>
<strong class="home-pick-recommend--title2">{{
item.title
}}</strong>
<p class="home-pick-recommend--subtitle">
{{ recommendGoodsOne.subtitle }}
</p>
@ -68,43 +70,70 @@
</div>
</div>
</div>
<!-- 新品上架 -->
<div v-if="showNew" class="home-pick-new">
<div v-if="showNew" class="home-pick-recommend">
<div class="home-pick--label flex flex-middle">
<strong>新品上架</strong>
</div>
<div class="home-pick-new__products flex">
<!-- 左侧商品 -->
<div class="home-pick-recommend__products flex flex-middle flex-between">
<!-- 左侧商品 -->
<div
@click="onJumpGoodsDetail(newGoodsOne.id)"
class="pick-new-products__left"
class="pick-recommend-products__left"
>
<img
:src="newGoodsOne.mainPicture"
class="new-products-left__cover"
/>
<div class="new-products-left__wrap">
<p>{{ newGoodsOne.name }}</p>
<strong class="home-pick--price__16">{{
newGoodsOne.startingPrice
}}</strong>
<strong class="home-pick-recommend--title">
{{ newGoodsOne.name }}
</strong>
<!-- 商品标签 -->
<div
v-for="item in newGoodsOne.labelList"
:key="item.code"
class="home-pick-recommend--tag-wrap flex"
>
<div :class="`tag-wrap__item tag-wrap__item--${item.code}`">
{{ item.text }}
</div>
</div>
<p class="home-pick-recommend--subtitle">
{{ newGoodsOne.subtitle }}
</p>
<strong class="home-pick--price__18">{{
newGoodsOne.startingPrice
}}</strong>
<div class="recommend-products-left__cover">
<img :src="newGoodsOne.mainPicture" />
</div>
</div>
<div class="pick-new-products__right flex flex-wrap flex-between">
<!-- 右侧商品 -->
<div
class="pick-recommend-products__right flex flex-column flex-between"
>
<div
v-for="(item, index) in newArray"
:key="index"
@click="onJumpGoodsDetail(item.id)"
class="new-products-right__wrap flex flex-middle"
class="recommend-products-right__item flex flex-column"
>
<div class="products-right-wrap__cover">
<img :src="item.mainPicture" />
<strong class="home-pick-recommend--title2">{{ item.name }}</strong>
<p class="home-pick-recommend--subtitle">
{{ item.subtitle }}
</p>
<!-- 商品标签 -->
<div
v-for="itemLabel in item.labelList"
:key="itemLabel.code"
class="home-pick-recommend--tag-wrap flex"
>
<div :class="`tag-wrap__item tag-wrap__item--${itemLabel.code}`">
{{ itemLabel.text }}
</div>
</div>
<div class="products-right-wrap__info">
<p>{{ item.name }}</p>
<strong class="home-pick--price__14">{{
item.startingPrice
}}</strong>
<strong class="home-pick--price__18">{{
item.startingPrice
}}</strong>
<div class="recommend-products-right__cover flex-1">
<img :src="item.mainPicture" />
</div>
</div>
</div>
@ -114,7 +143,7 @@
</template>
<script>
const RECOMMEND_MIN_COUNT = 3; //
const NEW_MIN_COUNT = 5; //
const NEW_MIN_COUNT = 3; //
export default {
name: "HomePick",
@ -156,6 +185,7 @@ export default {
deep: true,
handler(val) {
if (val && val.length >= NEW_MIN_COUNT) {
console.log("新品上架", val);
this.showNew = true;
this.newGoodsOne = val[0];
this.newArray = val.slice(1, NEW_MIN_COUNT);
@ -176,7 +206,7 @@ export default {
margin-top: 30px;
&--label {
font-size: 24px;
margin-bottom: 16px;
margin-bottom: 30px;
img {
width: 16px;
height: 16px;
@ -185,6 +215,7 @@ export default {
}
&--price {
&__18 {
margin-top: auto;
font-size: 18px;
color: #ff512b;
&::before {
@ -211,10 +242,9 @@ export default {
}
.home-pick-recommend {
width: 590px;
width: 50%;
min-height: 340px;
padding: 16px 20px 20px;
background: #ffffff;
border-radius: 4px;
&--tag-wrap {
margin-bottom: 8px;
@ -240,7 +270,14 @@ export default {
}
&--title {
display: block;
width: 140px;
width: 200px;
font-size: 16px;
margin-bottom: 6px;
@include ellipsis;
}
&--title2 {
display: block;
width: 150px;
font-size: 16px;
margin-bottom: 6px;
@include ellipsis;
@ -251,18 +288,25 @@ export default {
margin-bottom: 8px;
}
&__products {
height: 264px;
// height: 264px;
cursor: pointer;
.pick-recommend-products__left {
position: relative;
width: 264px;
height: 100%;
background: #f8f8f9;
padding: 12px 0 0 20px;
width: 292px;
height: 302px;
background: #fff;
padding: 20px;
margin-right: 16px;
transition: all 0.3s;
&:hover {
box-shadow: 0px 4px 40px 1px rgba(0, 0, 0, 0.10000000149011612);
margin-top: -3px;
}
.recommend-products-left__cover {
position: absolute;
right: 0;
bottom: 0;
right: 18px;
bottom: 18px;
width: 170px;
height: 170px;
img {
@ -275,11 +319,21 @@ export default {
width: 266px;
height: 100%;
.recommend-products-right__item {
width: 100%;
height: 122px;
width: 284px;
height: 144px;
border-radius: 4px;
position: relative;
background: #f8f7f8;
padding: 10px 0 10px 20px;
background: #fff;
padding: 20px;
transition: all 0.3s;
&:hover {
box-shadow: 0px 4px 40px 1px rgba(0, 0, 0, 0.10000000149011612);
}
&:nth-child(1) {
margin-bottom: 16px;
}
}
.recommend-products-right__cover {
position: absolute;
@ -296,63 +350,5 @@ export default {
}
}
}
.home-pick-new {
width: 590px;
min-height: 340px;
padding: 16px 20px 20px;
background: #ffffff;
border-radius: 4px;
&__products {
cursor: pointer;
.pick-new-products__left {
width: 170px;
height: 264px;
background: #f8f8f9;
margin-right: 20px;
.new-products-left__cover {
width: 170px;
height: 170px;
}
.new-products-left__wrap {
padding: 10px 0;
text-align: center;
font-size: 14px;
p {
width: 140px;
margin: 0 auto 12px auto;
@include ellipsis;
}
}
}
.pick-new-products__right {
.new-products-right__wrap {
width: 170px;
height: 100px;
background: #ffffff;
padding: 16px 8px 16px 0;
&:nth-child(-n + 2) {
margin-bottom: 40px;
}
.products-right-wrap__cover {
width: 68px;
height: 68px;
margin-right: 16px;
img {
width: 100%;
height: 100%;
}
}
.products-right-wrap__info {
font-size: 14px;
p {
width: 78px;
margin-bottom: 8px;
@include ellipses(2);
}
}
}
}
}
}
}
</style>

@ -34,7 +34,7 @@
<div class="home-sckill flex" @click="onJumpSeckill">
<div class="home-sckill-carousel">
<el-carousel
height="260px"
height="300px"
arrow="always"
:autoplay="false"
:loop="false"
@ -47,10 +47,8 @@
class="carousel-goods-box flex flex-middle"
>
<div
v-if="indexChild !== 0"
class="carousel-goods-box--line"
></div>
<div class="carousel-goods-box__item">
class="carousel-goods-box__item flex flex-column flex-middle"
>
<img
class="goods-box-item__cover"
:src="itemChild.productMainPicture"
@ -59,9 +57,14 @@
<p class="box-item-wrap__title">
{{ itemChild.productName }}
</p>
<strong class="box-item-wrap__price"
>{{ itemChild.activityPrice }}</strong
>
<p>
<strong class="box-item-wrap__price"
>{{ itemChild.activityPrice }}</strong
>
<span class="box-item-wrap__price2"
>{{ itemChild.originalPrice }}</span
>
</p>
</div>
</div>
</div>
@ -75,7 +78,7 @@
<script>
import _ from "lodash";
const CAROUSEL_COUNT = 6; //
const CAROUSEL_COUNT = 5; //
export default {
name: "HomeSeckill",
@ -160,6 +163,8 @@ export default {
//
setTimerInterval({ startTime, endTime }) {
startTime = startTime .replace(/\-/g, "/");
endTime = endTime .replace(/\-/g, "/");
startTime = new Date(startTime).getTime();
endTime = new Date(endTime).getTime();
if (this.current > startTime && this.current < endTime) {
@ -225,8 +230,9 @@ export default {
}
}
.home-sckill {
height: 260px;
height: 300px;
cursor: pointer;
margin-bottom: 60px;
.home-sckill-carousel {
/deep/.el-carousel {
width: 1200px;
@ -256,32 +262,45 @@ export default {
}
.carousel-goods {
height: 100%;
background: #f8f8f8;
.carousel-goods-box {
.carousel-goods-box--line {
height: 160px;
width: 1px;
background: #eeeeee;
}
margin-right: 15px;
width: 228px;
height: 300px;
background: #ffffff;
border-radius: 4px;
.carousel-goods-box__item {
width: 198px;
width: 100%;
padding: 20px 24px;
transition: all .3s;
&:hover {
transform: translateY(-3px);
}
.goods-box-item__cover {
width: 150px;
height: 150px;
width: 140px;
height: 140px;
object-fit: productMainPicture;
margin-bottom: 14px;
margin-bottom: 24px;
}
.goods-box-item__wrap {
font-size: 14px;
font-size: 16px;
color: #333333;
text-align: center;
width: 100%;
.box-item-wrap__title {
@include ellipsis;
margin-bottom: 8px;
margin-bottom: 20px;
}
.box-item-wrap__price {
color: #ff512b;
text-align: center;
margin-right: 15px;
}
.box-item-wrap__price2 {
color: #999999;
text-decoration: line-through;
}
}
}

Loading…
Cancel
Save