yxt_group
/
mallplus
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2023-02-14

master
guoxing 2 years ago
parent
03eb3fd9e0
commit
4ac17b52d7
2 changed files with 157 additions and 316 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 463
      mallplusui-uniapp-app2/pages/index/index.vue
  2. 10
      mallplusui-uniapp-app2/pagesA/product/product.vue

463
mallplusui-uniapp-app2/pages/index/index.vue
View File

@ -187,74 +187,81 @@
</scroll-view>
</view>
<!-- 新品推荐 -->
<view v-if='homeNewProductList && homeNewProductList.length>0' class="f-header m-t"
@click="navToTabPage('../../pagesA/product/list')">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">新品推荐</text>
<!-- 新品推荐 -->
<view v-if='homeNewProductList && homeNewProductList.length>0' class="f-header m-t"
@click="navToTabPage('../../pagesA/product/list')">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">新品推荐</text>
</view>
<text class="yticon icon-you"></text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="guess-section">
<view v-for="(item, index) in homeNewProductList" :key="index" class="guess-item"
@click="navToDetailPage1(item)">
<view class="image-wrapper">
<image :src="item.pic" mode="aspectFill"></image>
<view class="guess-section">
<view v-for="(item, index) in homeNewProductList" :key="index" class="guess-item"
@click="navToDetailPage1(item)">
<view class="image-wrapper">
<image :src="item.pic" mode="aspectFill"></image>
</view>
<text class="title clamp">{{ item.productName }}</text>
<view>
<text class="price">惠农价￥{{ item.price }}</text>
<text class="m-price"> 县区商超价￥{{ item.price }}</text>
</view>
</view>
<text class="title clamp">{{ item.productName }}</text>
<text class="price">￥{{ item.price }}</text>
</view>
</view>
<!-- 人气推荐 -->
<view v-if='homeRecommendProductList && homeRecommendProductList.length>0' class="f-header m-t"
@click="navToTabPage('../../pagesA/product/list')">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">人气推荐</text>
<!-- 人气推荐 -->
<view v-if='homeRecommendProductList && homeRecommendProductList.length>0' class="f-header m-t"
@click="navToTabPage('../../pagesA/product/list')">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">人气推荐</text>
</view>
<text class="yticon icon-you"></text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="guess-section">
<view v-for="(item, index) in homeRecommendProductList" :key="index" class="guess-item"
@click="navToDetailPage1(item)">
<view class="image-wrapper">
<image :src="item.pic" mode="aspectFill"></image>
<view class="guess-section">
<view v-for="(item, index) in homeRecommendProductList" :key="index" class="guess-item"
@click="navToDetailPage1(item)">
<view class="image-wrapper">
<image :src="item.pic" mode="aspectFill"></image>
</view>
<text class="title clamp">{{ item.name }}</text>
<view>
<text class="price">惠农价￥{{ item.price }}</text>
<text class="m-price">县区商超价￥{{ item.price }}</text>
</view>
</view>
<text class="title clamp">{{ item.name }}</text>
<text class="price">￥{{ item.price }}</text>
</view>
</view>
<!-- 新品上市 -->
<view class="f-header m-t" @click="navToTabPage('../../pagesA/product/list')">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">新品上市</text>
<!-- 新品上市 -->
<view class="f-header m-t" @click="navToTabPage('../../pagesA/product/list')">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">新品上市</text>
</view>
<text class="yticon icon-you"></text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="guess-section">
<view v-for="(item, index) in newProductList" :key="index" class="guess-item"
@click="navToDetailPage(item)">
<view class="image-wrapper">
<image :src="item.pic" mode="aspectFill"></image>
<view class="guess-section">
<view v-for="(item, index) in newProductList" :key="index" class="guess-item"
@click="navToDetailPage(item)">
<view class="image-wrapper">
<image :src="item.pic" mode="aspectFill"></image>
</view>
<text class="title clamp">{{ item.name }}</text>
<text class="label">【{{ item.storeName }}】</text>
<text class="price">惠农价￥{{ item.price }}</text>
</view>
<text class="title clamp">{{ item.name }}</text>
<text class="price">￥{{ item.price }}</text>
<text>【{{ item.storeName }}】</text>
<uni-load-more :status="loadingType"></uni-load-more>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<!-- <mallplusCopyright></mallplusCopyright> -->
</view>
<!-- <mallplusCopyright></mallplusCopyright> -->
</view>
</view>
</template>
<script>
@ -782,7 +789,7 @@
width: 100%;
z-index: 999;
}
.MP-search-input {
font-size: 28upx;
background: #f5f5f5;
@ -791,7 +798,7 @@
border-radius: 50upx;
text-align: center;
}
.mp-search-box {
position: absolute;
left: 0;
@ -799,7 +806,7 @@
z-index: 9999;
width: 100%;
padding: 0 80upx;
.ser-input {
flex: 1;
height: 60upx;
@ -811,7 +818,7 @@
background: rgba(255, 255, 255, 0.6);
}
}
page {
.cate-section {
position: relative;
@ -819,47 +826,47 @@
border-radius: 16upx 16upx 0 0;
margin-top: -20upx;
}
.carousel-section {
padding: 0;
.titleNview-placing {
padding-top: 0;
height: 0;
}
.carousel {
.carousel-item {
padding: 0;
}
}
.swiper-dots {
left: 45upx;
bottom: 40upx;
}
}
}
page {
background: #f5f5f5;
}
.m-t {
margin-top: 20upx;
}
/* 头部 轮播图 */
.carousel-section {
position: relative;
padding-top: 10px;
.titleNview-placing {
height: var(--status-bar-height);
padding-top: 44px;
box-sizing: content-box;
}
.titleNview-background {
position: absolute;
top: 0;
@ -869,25 +876,25 @@
transition: 0.4s;
}
}
.carousel {
width: 100%;
height: 350upx;
.carousel-item {
width: 100%;
height: 100%;
padding: 0 28upx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
border-radius: 10upx;
}
}
.swiper-dots {
display: flex;
position: absolute;
@ -897,7 +904,7 @@
height: 36upx;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
background-size: 100% 100%;
.num {
width: 36upx;
height: 36upx;
@ -907,7 +914,7 @@
text-align: center;
line-height: 36upx;
}
.sign {
position: absolute;
top: 0;
@ -918,7 +925,7 @@
transform: translateX(-50%);
}
}
/* 分类 */
.cate-section {
display: flex;
@ -927,7 +934,7 @@
flex-wrap: wrap;
padding: 30upx 22upx;
background: #fff;
.cate-item {
display: flex;
flex-direction: column;
@ -935,7 +942,7 @@
font-size: $font-sm + 2upx;
color: $font-color-dark;
}
/* 原图标颜色太深,不想改图了,所以加了透明度 */
image {
width: 88upx;
@ -946,41 +953,41 @@
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
}
}
.ad-1 {
width: 100%;
height: 210upx;
padding: 10upx 0;
background: #fff;
image {
width: 100%;
height: 100%;
}
}
/* 秒杀专区 */
.seckill-section {
padding: 0upx 20upx 20upx;
background: #fff;
.s-header {
display: flex;
align-items: center;
height: 90upx;
line-height: 1;
.s-img {
width: 140upx;
height: 30upx;
}
.tip {
font-size: $font-base;
color: $font-color-light;
// margin: 0 20upx 0 40upx;
}
.timer {
display: inline-block;
width: 40upx;
@ -993,7 +1000,7 @@
border-radius: 2px;
background: rgba(0, 0, 0, 0.8);
}
.icon-you {
font-size: $font-lg;
color: $font-color-light;
@ -1001,135 +1008,142 @@
text-align: right;
}
}
.floor-list {
white-space: nowrap;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 150upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 150upx;
height: 150upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
}
}
.f-header {
display: flex;
align-items: center;
height: 140upx;
padding: 0upx 20upx;
background: #fff;
image {
flex-shrink: 0;
width: 80upx;
height: 80upx;
margin-right: 20upx;
}
.tit-box {
flex: 1;
display: flex;
flex-direction: column;
}
.tit {
font-size: $font-lg + 2upx;
color: #font-color-dark;
line-height: 1.3;
}
.tit2 {
font-size: $font-sm;
color: $font-color-light;
}
.icon-you {
font-size: $font-lg + 2upx;
color: $font-color-light;
}
}
/* 团购楼层 */
.group-section {
background: #fff;
.g-swiper {
height: 650upx;
padding-bottom: 20upx;
}
.g-swiper-item {
width: 100%;
padding: 0 20upx;
display: flex;
}
image {
width: 100%;
height: 460upx;
border-radius: 4px;
}
.g-item {
display: flex;
flex-direction: column;
overflow: hidden;
}
.left {
flex: 1.2;
// margin-right: 24upx;
.t-box {
padding-top: 20upx;
}
}
.right {
flex: 0.8;
flex-direction: column-reverse;
.t-box {
padding-bottom: 20upx;
}
}
.t-box {
height: 160upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1.6;
}
.price {
color: $uni-color-primary;
}
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
.pro-box {
display: flex;
align-items: center;
@ -1138,7 +1152,7 @@
color: $font-base;
padding-right: 10upx;
}
.progress-box {
flex: 1;
border-radius: 10px;
@ -1146,248 +1160,75 @@
margin-right: 8upx;
}
}
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 320upx;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
/* 猜你喜欢 */
.guess-section {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.guess-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.label {
margin-top: -10upx;
font-size: 30upx;
margin-left: -13upx;
}
.price {
font-size: $font-lg;
font-size: 18px;
color: $uni-color-primary;
line-height: 1;
}
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
.coupon_box {
width: 100%;
height: auto;
display: table;
padding: 6upx 26upx 26upx 26upx;
}
.other_type {
width: 100%;
height: 90upx;
padding-top: 50upx;
.text {
width: 100%;
border-top: 1px solid #eeeeee;
@ -1395,7 +1236,7 @@
text-align: center;
position: relative;
}
.text span {
width: 180upx;
height: 40upx;
@ -1412,7 +1253,7 @@
}
}
}
.getPosition {
height: 100upx;
display: flex;

10
mallplusui-uniapp-app2/pagesA/product/product.vue
View File

@ -11,12 +11,12 @@
<view class="introduce-section">
<text class="title">{{ goods.name }}</text>
<view class="price-box">
<text class="price-tip">¥</text>
<text class="price" v-if="goods.vipPrice && goods.vipPrice > 0">{{ (goods.price * goods.memberRate) / 10 }}</text>
<text class="price" v-else-if="!goods.vipPrice">{{ goods.price }}</text>
<text class="m-price" v-if="!goods.vipPrice">¥{{ goods.originalPrice }}</text>
<!-- <text class="price-tip">惠农价</text> -->
<text class="price" v-if="goods.vipPrice && goods.vipPrice > 0">惠农价¥{{ (goods.price * goods.memberRate) / 10 }}</text>
<text class="price" v-else-if="!goods.vipPrice">惠农价¥{{ goods.price }}</text>
<text class="m-price" v-if="!goods.vipPrice">县区商超价{{ goods.originalPrice }}</text>
<text class="m-price" v-else-if="goods.vipPrice && goods.vipPrice > 0">¥{{ goods.price }}</text>
<text class="price" v-if="goods.isFenxiao == 1 && goods.fenxiaoPrice > 0">佣金 ¥{{ goods.fenxiaoPrice }}</text>
<text class="price">优惠¥{{ goods.originalPrice- goods.price }}</text>
<text class="coupon-tip" v-if="goods.memberRate && goods.memberRate != 10">会员折扣{{ goods.memberRate }}折</text>
</view>
<view class="bot-row">

Write Preview
Loading…
Cancel
Save