537 lines
14 KiB
Vue
537 lines
14 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view
|
|
class="headerTitle"
|
|
:style="{ height: menu.bottom + 4 + 'px', paddingTop: menu.top + 'px' }"
|
|
>
|
|
<image
|
|
class="backArrow"
|
|
src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"
|
|
@click="handleBack"
|
|
/>
|
|
<text class="pageTitle">{{ pageTitle || "" }}</text>
|
|
<view class="backArrow"></view>
|
|
</view>
|
|
|
|
<scroll-view
|
|
scroll-y
|
|
class="content"
|
|
@scrolltolower="handleScrollBottom"
|
|
:style="{ height: `calc(100vh - ${menu.bottom + 4}px)` }"
|
|
>
|
|
<view class="shopList" v-if="shopList && shopList.length > 0">
|
|
<div
|
|
class="buyShopItem"
|
|
v-for="(subItem, subIndex) in shopList"
|
|
:key="subIndex"
|
|
@click.stop="handleGoShopDetail(subItem)"
|
|
>
|
|
<div class="shopImgContent">
|
|
<image class="shopImage" :src="subItem.IMAGE_PATH" />
|
|
</div>
|
|
<div class="priceBox">
|
|
<div class="shopName">{{ subItem.COMMODITY_NAME }}</div>
|
|
<view class="retailPrice"
|
|
>¥{{ subItem.RETbigNumber || "" }}.{{
|
|
subItem.RETsmallNumber || "00"
|
|
}}</view
|
|
>
|
|
<view
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
<view class="nowPrice">
|
|
<text class="unit">¥</text>
|
|
<text class="price"
|
|
>{{ subItem.bigNumber || "" }}.{{
|
|
subItem.smallNumber || "00"
|
|
}}</text
|
|
>
|
|
</view>
|
|
<view class="shopState" v-if="!(subItem.COMMODITY_STOCK > 0)"
|
|
>已售罄</view
|
|
>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
<view class="load-more" v-if="shopList.length > 0">
|
|
<text>{{
|
|
!shopMsg.isOver ? "正在加载,请稍后..." : "——— 我是有底线的 ———"
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="noDataBox" v-else>
|
|
<no-data text="暂无商品数据" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import NoData from "../../../components/noData.vue";
|
|
export default {
|
|
data() {
|
|
return {
|
|
menu: {},
|
|
pageTitle: "",
|
|
shopList: [],
|
|
pageType: "",
|
|
selectType: "",
|
|
brandName: "", // 查询的品牌商品
|
|
shopMsg: {
|
|
pageSize: 10,
|
|
pageIndex: 1,
|
|
isOver: false,
|
|
},
|
|
queryType: "",
|
|
};
|
|
},
|
|
components: {
|
|
NoData,
|
|
},
|
|
onLoad(query) {
|
|
console.log("query", query);
|
|
if (query.pageType === "UnionMall") {
|
|
this.selectType = query.type;
|
|
if (query.type === "1") {
|
|
this.pageTitle = "新品榜";
|
|
} else if (query.type === "2") {
|
|
this.pageTitle = "热销榜";
|
|
} else if (query.type === "3") {
|
|
this.pageTitle = "推荐榜";
|
|
}
|
|
} else if (query.pageType === "brand") {
|
|
this.selectType = query.type;
|
|
this.brandName = query.name;
|
|
this.pageTitle = "品牌列表";
|
|
} else if (query.pageType === "pointsMall") {
|
|
this.pageTitle = "积分商城";
|
|
} else {
|
|
this.selectType = query.type;
|
|
if (query.type === "5030") {
|
|
this.pageTitle = "促销单品";
|
|
} else if (query.type === "5040") {
|
|
this.pageTitle = "甄选商品";
|
|
} else if (query.type === "5050") {
|
|
this.pageTitle = "今日推荐";
|
|
}
|
|
}
|
|
this.queryType = query.pageType;
|
|
this.pageType = query.pageType === "brand" ? "UnionMall" : query.pageType;
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
this.handleGetShopList(query.type);
|
|
},
|
|
methods: {
|
|
// 找到对应类型的商品列表
|
|
async handleGetShopList(type) {
|
|
uni.showLoading({
|
|
title: "加载中...",
|
|
});
|
|
let req = {};
|
|
if (this.queryType === "UnionMall") {
|
|
req = {
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 5070,
|
|
payMethod: "1000,3000",
|
|
justCommodity: 1,
|
|
userdefinedtypeId:
|
|
this.selectType === "1"
|
|
? "1317"
|
|
: this.selectType === "2"
|
|
? "1318"
|
|
: this.selectType === "3"
|
|
? "1319"
|
|
: "",
|
|
sortStr: this.selectType === "2" ? "COMMODITY_EN desc" : "",
|
|
Page_Size: this.shopMsg.pageSize,
|
|
Page_Index: this.shopMsg.pageIndex,
|
|
};
|
|
} else if (this.queryType === "brand") {
|
|
req = {
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 5070,
|
|
payMethod: "1000,3000",
|
|
justCommodity: 1,
|
|
brandName: this.brandName,
|
|
Page_Size: this.shopMsg.pageSize,
|
|
Page_Index: this.shopMsg.pageIndex,
|
|
};
|
|
} else if (this.queryType === "pointsMall") {
|
|
req = {
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
justCommodity: 1,
|
|
payMethod: "2000,3000",
|
|
Page_Size: this.shopMsg.pageSize,
|
|
Page_Index: this.shopMsg.pageIndex,
|
|
};
|
|
} else {
|
|
req = {
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: type,
|
|
justCommodity: 1,
|
|
payMethod: "1000,3000",
|
|
Page_Size: this.shopMsg.pageSize,
|
|
Page_Index: this.shopMsg.pageIndex,
|
|
};
|
|
}
|
|
const data = await this.$api.getCoop(req);
|
|
let oldList = [];
|
|
if (this.shopList && this.shopList.length > 0) {
|
|
oldList = this.shopList;
|
|
}
|
|
let shopList = [];
|
|
let list = data.Data.List;
|
|
if (list && list.length > 0) {
|
|
if (list.length < 10) {
|
|
this.shopMsg.isOver = true;
|
|
}
|
|
list.forEach((item) => {
|
|
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
|
|
item.COMMODITYLIST.forEach((subItem) => {
|
|
if (
|
|
subItem.COMMODITY_MEMBERPRICE &&
|
|
subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.bigNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
|
|
subItem.smallNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
|
|
}
|
|
if (
|
|
subItem.COMMODITY_RETAILPRICE &&
|
|
subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.RETbigNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
|
|
subItem.RETsmallNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
|
|
}
|
|
shopList.push(subItem);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
console.log("shopList", shopList);
|
|
this.shopList = oldList.concat(shopList);
|
|
uni.hideLoading();
|
|
},
|
|
// 跳转商品详情
|
|
handleGoShopDetail(obj) {
|
|
console.log("obj", obj);
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}&pageType=${this.pageType}`,
|
|
});
|
|
},
|
|
// 返回上级
|
|
handleBack() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
// 滚动到底部 加载更多
|
|
handleScrollBottom() {
|
|
this.shopMsg.pageIndex = this.shopMsg.pageIndex + 1;
|
|
this.handleGetShopList(this.queryType);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #f8f8f8;
|
|
|
|
.headerTitle {
|
|
width: 100vw;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.backArrow {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.pageTitle {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
.shopList {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.buyShopItem {
|
|
width: calc((100% - 22rpx) / 2);
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 24rpx;
|
|
|
|
.shopImgContent {
|
|
width: 100%;
|
|
height: 330rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
|
.shopImage {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.priceBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 24rpx 32rpx;
|
|
|
|
.shopName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 32rpx;
|
|
font-style: normal;
|
|
width: calc((100vw - 80rpx) / 2 - 40rpx);
|
|
height: 64rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/* 设置显示的行数，超出的行数会被省略 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.retailPrice {
|
|
margin-top: 12rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #756c6a;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-decoration-line: line-through;
|
|
}
|
|
|
|
.nowPrice {
|
|
.unit {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #fe3f22;
|
|
line-height: 24rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.price {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #fe3f22;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.shopState {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
background: #bbbbbb;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.buyCarBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.buyCarLeft {
|
|
.price {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #ff6219;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.smallPrice {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.unit {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #9fa3a8;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.buyCarIcon {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mallItem {
|
|
width: calc((100% - 16rpx) / 2);
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
overflow: hidden;
|
|
|
|
.mallTop {
|
|
width: 100%;
|
|
height: 330rpx;
|
|
box-sizing: border-box;
|
|
|
|
.mallImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.mallBottom {
|
|
width: 100%;
|
|
height: 188rpx;
|
|
box-sizing: border-box;
|
|
padding: 8rpx 20rpx 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.priceTop {
|
|
.mallTitle {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 32rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.sumText {
|
|
margin-top: 4rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #716f69;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.priceBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.leftPrice {
|
|
.unit {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #130f05;
|
|
line-height: 24rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.price {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #090c1a;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.rightPrice {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
|
|
.mallIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.load-more {
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 80rpx;
|
|
color: #d0d0d0;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.noDataBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
</style> |