<template>
<view class="container">
<view class="search-box" v-if="goodsList.length">
<uni-search-bar ref="searchBar" radius="5" placeholder="搜索" :defaultText="goodName" clearButton="auto" cancelButton="none"
bgColor="#ffffff" @confirm="search" class="search-bar" />
</view>
<scroll-view class="goods-box" scroll-y="true" @scrolltolower="handleLoadMore()">
<view style="padding-top: 20px;background-color: #FFFFFF;" v-if="!goodsList.length">
<u-divider color="#909399" border-color="#909399">没有更多了</u-divider>
</view>
<view class="goods-row" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
<image class="goods-img" :src="item.imgPath"></image>
<view class="goods-info">
<view class="goods-name">{{item.productName}}</view>
<view class="goods-details" v-if="item.productType != 4">{{item.productDescribe}}</view>
<view class="goods-area" v-if="item.productType == 4">面积：{{item.areaSize}}㎡ 时长：{{item.term}}天</view>
<view class="goods-number">
<text class="goods-icon">￥</text>
<text class="goods-spec">{{item.bizPrice}}{{item.productType != 4 ? '/' + item.unit : ''}}</text>
<text class="goods-sales" v-if="item.productType != 4">{{item.sellCount}}人付款</text>
</view>
</view>
<view class="goods-cart">
<view class="cart-button" v-if="goodType == 1 || goodType == 3" @click.stop="addCart(item)">
<view class="iconfont icongouwuche"></view>
</view>
<view class="more-button" v-else>
<view class="iconfont icongengduo"></view>
</view>
</view>
</view>
</scroll-view>
<u-modal v-model="modalShow" content="是否将该商品添加至购物车" @confirm="submitAddCart()" :async-close="true"
:show-cancel-button="true"></u-modal>
<u-top-tips ref="uTips"></u-top-tips>
</view>
</template>
<script>
const NET = require('@/utils/request')
const API = require('@/config/api')
export default {
data() {
return {
goodType: '',
pageIndex: 1,
isOver: false,
goodName: '',
goodsList: [],
modalShow: false,
goodItem: {},
}
},
onLoad(options) {
this.goodName = options.goodName ? options.goodName : ''
this.goodType = options.goodType
uni.setNavigationBarTitle({
title: this.goodType == 1 ? '商品列表' : (this.goodType == 3 ? '自助采摘' : (this.goodType == 4 ? '共享种植' : '拍卖'))
});
this.getGoodsList()
},
onReady() {
if (this.goodName) {
this.$refs.searchBar.show = true
this.$refs.searchBar.showSync = true
this.$refs.searchBar.searchVal = this.goodName
}
},
onPullDownRefresh() {
this.goodsList = []
this.pageIndex = 1
this.getGoodsList('refresh')
},
methods: {
// 搜索商品
search(data) {
this.goodName = data.value
this.goodsList = []
this.pageIndex = 1
this.getGoodsList()
},
// 懒加载
handleLoadMore() {
if (!this.isOver) {
this.pageIndex++
this.getGoodsList()
}
},
// 获取商品
getGoodsList(type) {
NET.request(API.getGoodsByType, {
name: this.goodName,
productType: this.goodType,
pageIndex: this.pageIndex,
pageSize: 10,
}, 'POST').then(res => {
if (type == 'refresh') {
uni.stopPullDownRefresh();
}
this.isOver = res.data.list.length != 10
this.goodsList = this.goodsList.concat(res.data.list)
}).catch(error => {
this.$refs.uTips.show({
title: '获取商品列表失败',
type: 'warning',
})
})
},
// 添加购物车
addCart(item) {
this.goodItem = {
productId: item.id,
productName: item.productName,
imgUrl: item.imgPath,
bizPrice: item.bizPrice,
originalPrice: item.originalPrice,
productType: item.productType,
tenantCode: item.tenantCode,
buyNum: 1
}
this.modalShow = true
},
// 提交购物车
submitAddCart() {
NET.request(API.addCart, this.goodItem, 'POST').then(res => {
this.$refs.uTips.show({
title: '加入购物车成功',
type: 'success',
})
this.modalShow = false
}).catch(res => {
this.modalShow = false
this.$refs.uTips.show({
title: '加入购物车失败',
type: 'warning',
})
})
},
// 跳转商品详情
goToGoodDetails(item) {
uni.navigateTo({
url: '/pagesGood/goodDetails?goodId=' + item.id
});
}
},
}
</script>
<style lang="less" scoped>
page {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: #f7f7f7;
.search-box {
width: 100%;
height: 58px;
box-sizing: border-box;
padding: 2px 12px 1px 12px;
/deep/.uni-searchbar {
background-color: #f7f7f7;
}
}
.goods-box {
width: 100%;
height: calc(100% - 58px) !important;
padding: 6px 0 0px 0;
box-sizing: border-box;
overflow-y: auto;
.goods-row {
width: calc(100% - 24px);
height: 104px;
padding: 11px 11px 11px 7px;
box-sizing: border-box;
margin: 4px 0 12px 12px;
background: #FFFFFF;
box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
border-radius: 15px;
.goods-img {
width: 84px;
height: 84px;
float: left;
}
.goods-info {
width: calc(100% - 108px);
height: 84px;
box-sizing: border-box;
padding-left: 6px;
float: left;
.goods-name {
width: calc(100% + 24px);
height: 18px;
font-size: 15px;
font-family: PingFang SC;
color: #333333;
line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.goods-details {
height: 28px;
font-size: 12px;
font-family: PingFang SC;
color: #999999;
line-height: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
margin: 4px 0 12px 0;
}
.goods-area {
height: 28px;
margin: 8px 0;
line-height: 28px;
font-size: 13px;
font-family: PingFang SC;
color: #666666;
}
.goods-number {
height: 16px;
font-family: PingFang SC;
line-height: 16px;
.goods-icon {
font-size: 12px;
color: #52A63A;
}
.goods-spec {
font-size: 15px;
color: #52A63A;
margin-right: 15px;
}
.goods-sales {
font-size: 12px;
color: #999999;
}
}
}
.goods-cart {
width: 24px;
height: 84px;
float: left;
.cart-button {
width: 24px;
height: 24px;
margin-top: 30px;
background-color: #52A63A;
border-radius: 50%;
text-align: center;
.iconfont {
color: #FFFFFF;
font-size: 18px;
line-height: 24px;
}
}
.more-button {
width: 24px;
height: 20px;
margin-top: 64px;
.iconfont {
color: #999999;
font-size: 32px;
line-height: 20px;
}
}
}
}
}
}
</style>