123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <template name="recommend">
- <!-- 供应商信息 -->
- <view class="recommend clearfix">
- <view class="recommend-empty" v-if="isEmpty">暂无相关推荐商品</view>
- <view class="recommend-list" v-else>
- <scroll-view scroll-y="true" :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower">
- <view class="row-list" v-for="(item, index) in recommendList" :key="index" @click.stop="navToDetailPage(item.productID)">
- <view class="list-image"><image :src="item.mainImage" mode=""></image></view>
- <view class="list-name">{{item.name}}</view>
- </view>
- <!--加载loadding-->
- <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
- <tui-nomore :visible="!pullUpOn" bgcolor="#FFFFFF" :text='nomoreText'></tui-nomore>
- <!--加载loadding-->
- </scroll-view>
- </view>
- </view>
- </template>
- <script>
- import authorize from '@/common/config/authorize.js'
- import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
- import tuiNomore from "@/components/tui-components/nomore/nomore"
- import { queryRelevant } from "@/api/product.js"
-
- export default{
- name:'recommend',
- props:{
- queryProductid: {
- // Unistars类型
- type: Number,
- default: 0
- }
- },
- components:{
- tuiLoadmore,
- tuiNomore,
- },
- data() {
- return{
- recommendList:[],
- isEmpty:false,
- pageNum:1,
- pageSize:10,
- hasNextPage:false,
- loadding: false,
- pullUpOn: true,
- pullFlag: true,
- nomoreText: '上拉显示更多',
- productID:'',
- scrollHeight: '',
- }
- },
- created() {
- // console.log(this.queryProductid)
- this.productID = this.queryProductid
- this.infoRecommend(this.queryProductid)
- this.setScrollHeight();
- },
- methods:{
- infoRecommend(id){
- queryRelevant({productID:id,pageNum:this.pageNum,pageSize:this.pageSize}).then(response =>{
- // console.log(response)
- let responseData = response.data
- if(responseData.results&&responseData.results.length > 0){
- this.isEmpty = false
- this.hasNextPage = responseData.hasNextPage
- this.recommendList =responseData.results
- this.pullFlag = false;
- setTimeout(()=>{this.pullFlag = true;},500)
- if(this.hasNextPage){
- this.pullUpOn = false
- this.nomoreText = '上拉显示更多'
- }else{
- this.pullUpOn = false
- this.loadding = false
- this.nomoreText = '已至底部'
- }
- }else{
- this.isEmpty = true
- }
- }).catch(response =>{
- this.$util.msg(response.msg,2000)
- })
- },
- getOnReachBottomData(){
- this.pageNum+=1
- queryRelevant({productID:this.productID,pageNum:this.pageNum,pageSize:this.pageSize}).then(response =>{
- let responseData = response.data
- if(responseData.results&&responseData.results.length > 0){
- this.hasNextPage = responseData.hasNextPage
- this.recommendList = this.recommendList.concat(responseData.results)
- this.pullFlag = false;// 防上拉暴滑
- setTimeout(()=>{this.pullFlag = true;},500)
- if(this.hasNextPage){
- this.pullUpOn = false
- this.nomoreText = '上拉显示更多'
- }else{
- this.pullUpOn = false
- this.loadding = false
- this.nomoreText = '已至底部'
- }
- }
- }).catch(response =>{
- this.$util.msg(response.msg,2000)
- })
- },
- scrolltolower() {
- if(this.hasNextPage){
- this.loadding = true
- this.pullUpOn = true
- this.getOnReachBottomData(this.currentTab);
- }
- },
- setScrollHeight() {
- const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
- this.windowHeight = windowHeight - 1;
- this.scrollHeight = windowHeight - 1;
- },
- navToDetailPage(id) {//跳转商品详情页
- this.$api.navigateTo(`/pages/goods/product?id=${id}`)
- }
- }
- }
- </script>
- <style lang="scss">
- .recommend{
- background: #FFFFFF;
- width: 100%;
- .recommend-empty{
- width: 702rpx;
- height: 100rpx;
- line-height: 100rpx;
- padding: 0 24rpx;
- font-size: $font-size-32;
- color: #999999;
- text-align: center;
- }
- .recommend-list{
- width: 702rpx;
- height: auto;
- padding: 24rpx;
- .row-list{
- width: 340rpx;
- height: auto;
- float: left;
- margin-right: 20rpx;
- margin-bottom: 30rpx;
- &:nth-child(2n){
- margin-right: 0;
- }
- .list-image{
- width: 100%;
- height: 340rpx;
- border-radius: 14rpx;
- image{
- width: 100%;
- height: 340rpx;
- border-radius: 14rpx;
- }
- }
- .list-name{
- font-size: $font-size-28;
- color: $text-color;
- line-height: 44rpx;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- }
- }
- </style>
|