564 lines
20 KiB
Vue
564 lines
20 KiB
Vue
<template>
|
||
<view class="main">
|
||
<div class="header" :style="{ paddingTop: menu.top + 'px' }">
|
||
<view class="headerTop" :style="{ height: menu.height + 'px' }">
|
||
<image class="backArrow" src="/static/images/home/brankBlackArrow.svg" @click="handleBack" />
|
||
<view class="searchBox">
|
||
<input placeholder="请搜索商品" class="serach_input" v-model="searchText" confirm-type="search"
|
||
@confirm="handleSearch" :auto-focus="true" />
|
||
|
||
<image class="clearIcon" @click="handleClearSearchText" src="/static/images/home/clearIcon.svg" />
|
||
</view>
|
||
<view class="backArrow"></view>
|
||
</view>
|
||
</div>
|
||
|
||
|
||
<scroll-view scroll-y class="shopListBox"
|
||
:style="{ height: `calc(100vh - ${menu.bottom}px - ${safeHeight}px )` }">
|
||
<div class="shopList">
|
||
<div class="buyShopItem" v-for="(subItem, subIndex) in shopList" :key="subIndex"
|
||
@click.stop="showDetail(subItem)">
|
||
<div class="shopImgContent">
|
||
<image class="shopImage" :src="subItem.IMAGE_PATH" />
|
||
</div>
|
||
<div class="priceBox">
|
||
<div class="shopName">{{ subItem.COMMODITY_NAME }}</div>
|
||
<view style="
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 12rpx;
|
||
">
|
||
<view class="nowPrice">
|
||
<text class="unit">¥</text>
|
||
<text class="price">{{ subItem.bigNumber || "" }}.{{
|
||
subItem.smallNumber || "00"
|
||
}}</text>
|
||
<text class="unitRule">/ {{ subItem.COMMODITY_UNIT }}</text>
|
||
</view>
|
||
<view class="shopState" v-if="!(subItem.COMMODITY_STOCK > 0)">已售罄</view>
|
||
</view>
|
||
|
||
<div class="marketBottom" v-if="subItem.COMMODITY_RETAILPRICE">
|
||
<span class="marketPrice">市场价：¥{{ subItem.COMMODITY_RETAILPRICE }}/ {{
|
||
subItem.COMMODITY_UNIT
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
menu: {}, // 手机的一些位置信息
|
||
searchText: "", // 搜索商品的文字
|
||
safeHeight: 0,
|
||
shopList: [],
|
||
pageType: ""
|
||
}
|
||
},
|
||
onLoad(query) {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
let height = uni.getStorageSync("safeHeight");
|
||
this.safeHeight = Number(height);
|
||
if (query.pageType) {
|
||
this.pageType = query.pageType
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
methods: {
|
||
// 删除搜索内容
|
||
handleClearSearchText() {
|
||
this.searchText = ""
|
||
},
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
async handleSearch() {
|
||
if (this.searchText) {
|
||
uni.showLoading({ title: "加载中" });
|
||
let url = this.pageType === "UnionMall" ? '/third-party/getWeChatGetMallGoodsInfo' : '/third-party/getWeChatGetMallGoodsInfoExclude'
|
||
|
||
// const data = await this.$api.$javaGet(
|
||
// // '/third-party/getExcludeWeChatGetMallGoodsInfo',
|
||
// url,
|
||
// {
|
||
// ownerUnitId: 911,
|
||
// appId: "wxee018fb96955552a",
|
||
// commodityName: this.searchText,
|
||
// excludeNature: this.pageType === "UnionMall" ? "" : 5070,
|
||
// commodityNature: this.pageType === "UnionMall" ? 5070 : "",
|
||
// payMethod: "1000,3000",
|
||
// justCommodity: 1,
|
||
// }
|
||
// )
|
||
|
||
const data = await this.$api.getCoop({
|
||
action_type: "WeChat_GetMallGoodsInfo",
|
||
ownerUnitId: 911,
|
||
appId: "wxee018fb96955552a",
|
||
commodityName: this.searchText,
|
||
excludeNature: this.pageType === "UnionMall" ? "" : this.user.INDUSTRY_MEMBERSHIP_ID ? '' : 5070,
|
||
commodityNature: this.pageType === "UnionMall" ? 5070 : "",
|
||
payMethod: "1000,2000,3000",
|
||
justCommodity: 1,
|
||
});
|
||
|
||
|
||
|
||
uni.hideLoading()
|
||
let list = data.Data.List;
|
||
let shopList = [];
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
|
||
item.COMMODITYLIST.forEach((subItem) => {
|
||
// 判断当前的购物车里面 是不是已经有数据了 有数据的话 把原本的商品数量赋值进去
|
||
if (this.shopCarList && this.shopCarList.length > 0) {
|
||
this.shopCarList.forEach((shopCarItem) => {
|
||
if (shopCarItem.COMMODITY_ID === subItem.COMMODITY_ID) {
|
||
subItem.count = shopCarItem.count;
|
||
if (subItem.SKULIST && subItem.SKULIST.length > 0) {
|
||
subItem.COMMODITY_RULE = shopCarItem.COMMODITY_RULE;
|
||
} else {
|
||
subItem.showReduce = true;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
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);
|
||
this.shopList = shopList
|
||
} else {
|
||
this.shopList = []
|
||
}
|
||
},
|
||
|
||
showDetail(obj) {
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}&pageType=${this.pageType}`,
|
||
});
|
||
},
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #f5f5f5;
|
||
|
||
.header {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.headerTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: space-between;
|
||
|
||
.backArrow {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.searchBox {
|
||
width: 65%;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 12rpx;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.serach_input {
|
||
width: calc(100% - 46rpx);
|
||
border: none;
|
||
height: 20px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.clearIcon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.pageTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #ffffff;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
.pageSearch {
|
||
width: calc(100% - 48rpx);
|
||
margin-top: 28rpx;
|
||
margin-left: 24rpx;
|
||
box-sizing: border-box;
|
||
height: 38px;
|
||
background: #fff;
|
||
border-radius: 19px;
|
||
box-sizing: border-box;
|
||
padding: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.areaSelect {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160304;
|
||
line-height: 20px;
|
||
padding-left: 12px;
|
||
position: relative;
|
||
|
||
.areaIcon {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
.areaSelect:after {
|
||
content: "";
|
||
width: 2px;
|
||
height: 14px;
|
||
position: absolute;
|
||
top: 3px;
|
||
right: -12px;
|
||
background: #e7e5e5;
|
||
display: block;
|
||
}
|
||
|
||
.serach_input {
|
||
width: 80%;
|
||
border: none;
|
||
height: 20px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.searchBtn {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #fdfdfd;
|
||
line-height: 20px;
|
||
padding: 7px 16px;
|
||
background: #1890ff;
|
||
border-radius: 17px;
|
||
}
|
||
}
|
||
|
||
.search {
|
||
position: absolute;
|
||
left: 32rpx;
|
||
width: 480rpx;
|
||
height: 72rpx;
|
||
background: #f2f4f5;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-radius: 36rpx;
|
||
opacity: 0.8;
|
||
|
||
.search_icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin: auto 16rpx auto 24rpx;
|
||
}
|
||
}
|
||
|
||
.shop_info {
|
||
position: absolute;
|
||
left: 32rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.shop_img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-right: 16rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.shop_box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
|
||
.shop_title {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 56rpx;
|
||
}
|
||
|
||
.shop_txt {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #ecf1f6;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopListBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
|
||
.shopList {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.buyShopItem {
|
||
width: calc((100% - 22rpx) / 2);
|
||
background: #f5f5f5;
|
||
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;
|
||
background-color: #fff;
|
||
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;
|
||
}
|
||
|
||
|
||
.marketBottom {
|
||
height: 12px;
|
||
|
||
.marketPrice {
|
||
font-size: 10px;
|
||
line-height: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.marketPriceValue {
|
||
font-size: 10px;
|
||
line-height: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.unit {
|
||
font-size: 10px;
|
||
line-height: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.unitRule {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
font-size: 12px;
|
||
line-height: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopListBox ::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
}
|
||
}
|
||
</style> |