ec.uniapp-master/pages/user/findSearch/findSearch.vue

<template>
	<view>
		<view id="find-search">
		    <view class="menu-box">
		        <view class="navbar">
		            <view class="item" :class="activeIndex == 0? 'active' : ''" @tap="tabClick" data-index="0" style="flex:.5">
		                <span>全部</span>
		            </view>
		            <view class="item" :class="activeIndex == index+1 ? 'active' : ''" @tap="tabClick" v-for="(item, index) in conditions.categories" :key="index" v-if="index < 2" :data-index="index+1" :data-id="item.id">
		                <span>{{item.name}}</span>
		            </view>
		            <view class="item" :class="activeIndex == 3 ? 'active' : ''" @tap="moreClick" style="flex:.8">
		            <span>更多
		            <view class="iconfont icon-jiantou"></view>
		            </span>
		            </view>
		            <view class="item" @tap="filterClick" style="flex: .5">
		            <span>筛选
		            <view class="iconfont icon-filter"></view>
		            </span>
		            </view>
		        </view>
		        <!--        点击更多弹出-->
		        <view class="more-list" v-if="isMore && conditions.categories.length">
		            <view class="item" :class="item.id == category_id ? 'active' : ''" v-for="(item, index) in conditions.categories" :key="index"  @tap="changeCategories" :data-index="index" :data-id="item.id">{{item.name}}</view>
		        </view>
		    </view>
			<view class="content-box">
				<view v-if="list && list[0]">
					<view v-for="(items, idx) in list" :key="idx" >
						<view class="something__box" v-for="(item, index) in items" :key="index" >
							<view class="li-item">
								<view class="something__item">
									<view class="item__user">
										<view class="user__img">
											<image :src="item.avatar"></image>
										</view>
										<view class="user__title">
											<view class="title__box">
												<view class="title__title">
													<span>{{item.nick_name}}</span>
												</view>
											</view>
											<!--<view class="title__stick">
                                                <i class="iconfont icon&#45;&#45;zhidingtuijian"></i>
                                            </view>-->
										</view>
									</view>
									<view class="item__content">
										<view class="item__title" @tap="copyText" :data-txt="item.description">
											{{item.description}}
										</view>
										<!--<view class="read__more" bindtap="more">
                                            {{text}}
                                        </view>-->
										<view class="item__list" v-if="item.img_list.length==1">
											<!--如果图片长度为1，显示一张-->
											<view class="img">
												<image mode="widthFix" :src="item.img_list[0]"></image>
											</view>
											<!-- <view class="list__li">
                                                 <view style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524827781748&di=d50541539b9b5f3850170d97854fc380&imgtype=0&src=http%3A%2F%2Fwww.pp3.cn%2Fuploads%2F201704%2F20170815006.jpg'); background-position: center;background-repeat: no-repeat;background-size: cover;">
                                                     <span></span>
                                                 </view>
                                             </view>-->
										</view>
										<view class="item__list" v-else>
											<view class="list__li" v-for="(i, imgkey) in item.img_list" :key="imgkey"   @tap="preImage" :data-index="index" :data-idx="idx" :data-url="i">
												<view :style="'background: url(' + i + '); background-position: center;background-repeat: no-repeat;background-size: cover;'">
													<span></span>
												</view>
											</view>
										</view>
										<view class="time-txet">{{item.created_at}}</view>
										<view class="tags" v-if="item.tags_list">
											<view class="tag-item" v-for="(tag, n) in item.tags_list" :key="n">{{tag}}</view>
										</view>
										<view class="goods-box" v-if="item.goods" @tap="jumpDetail" :data-id="item.goods.id">
											<view class="left-box">
												<image :src="item.goods.img"></image>
											</view>
											<view class="right-box">
												<view class="name">
													{{item.goods.name}}
												</view>
												<view class="money">￥ {{item.goods.sell_price}}</view>
											</view>
										</view>
									</view>

								</view>
								<view class="bottom-btn mx-1px-top">
									<view class="btn" :class="item.is_favorite ? 'active' : ''" :data-islike="item.is_favorite" @tap="favoriteClick" :data-index="index" :data-idx="idx" :data-id="item.id">
										<span class="iconfont icon-Group3"></span>
										<block v-if="item.is_favorite">已收藏</block>
										<block v-else>收藏</block>
									</view>
									<view class="btn" @tap="downloadImgs" :data-urls="item.img_list">
										<span class="iconfont icon-Group5"></span>
										下载
									</view>
								</view>
							</view>

							<!--<view class="index__end" wx:if="{{page == total_pages}}">
                                已经全部加载完毕
                            </view>-->
						</view>
					</view>
				</view>
				<view v-else class="no-data">暂无数据</view>
			</view>
		    <view class="maks" v-if="isMore" @tap="moreClick"></view>
		    <!--    筛选-->
		    <view class="filter-box" v-if="isFitter" @tap="filterClick">
		        <view class="content">
		            <view class="select" v-if="conditions.brands.length">
		                <view class="topic">
		                    品牌
		                    <span>（单选）</span>
		                </view>
		                <view class="list">
		                    <view class="item" :class="index == brandIndex ? 'active' : ''" v-for="(item, index) in conditions.brands" :key="index"  @tap.stop="radioBrand" :data-id="item.id" :data-name="item.name" :data-index="index">
		                        {{item.name}}
		                    </view>
		                </view>
		            </view>
		            <view class="select" v-if="conditions.tags.length">
		                <view class="topic">
		                    推荐标签
		                    <span>（最多选2个）</span>
		                </view>
		                <view class="list">
		                    <view class="item" :class="item.isChoose == true ? 'active':''" v-for="(item, index) in conditions.tags" :key="index" catchtap="checkboxTag" :data-index="index" :data-id="item.id" :data-name="item.name" :data-isChoose="item.isChoose">
		                        {{item.name}}
		                    </view>
		                </view>
		            </view>
		            <view class="btn-box">
		                <view class="btn reset" catchtap="reset">重置</view>
		                <view class="btn confirm" catchtap="confirm">确定</view>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>
<script>
//import { config, pageLogin, getUrl, sandBox, cookieStorage } from '../../../lib/myapp.js';
import {pageLogin, getUrl,config} from '@/common/js/utils.js';

let a;

export default {
  data() {
    return {
      banner: [],
      conditions: '',
      //筛选条件
      list: [],
      more: true,
      page: '',
      isFitter: false,
      brandIndex: -1,
      brandItem: '',
      tagItem: [],
      category_id: '',
      //分类id
      activeIndex: 0,
      isMore: false,
      category_index: -1,
      isFavorite: false,
      tagIds: [],
      isTab: true,
      keywords: '',
        init: false
    };
  },

  //下拉刷新
  onReachBottom() {
    if (this.more) {
      let page = this.page + 1;
      let brand_id = this.brandItem.id || '';
      let tags = '';
      let arr = [];

      if (this.tagItem.length) {
        this.tagItem.forEach(val => {
          arr.push(val.id);
        });
        tags = arr.join(',');
      }

      this.getContentList(page, brand_id, this.category_id, tags, this.keywords);
    } else {
      wx.showToast({
        image: '../../../static/error.png',
        title: '再拉也没有啦'
      });
    }
  },

  onShow() {
    if (a) {
      a = false;
      return;
    }

    this.getConditions();
    this.getContentList(1, '', '', '', this.keywords);
  },

  onLoad(e) {
    if (e.keywords) {
      this.setData({
        keywords: e.keywords
      });
    }
  },

  components: {},
  props: {},
  methods: {
    //点击分类
    tabClick(e) {
      let index = e.currentTarget.dataset.index;
      let id = e.currentTarget.dataset.id || '';
      this.setData({
        activeIndex: index,
        category_id: id
      });
      let brand_id = this.brandItem.id || '';
      let tags = '';
      let arr = [];

      if (this.tagItem.length) {
        this.tagItem.forEach(val => {
          arr.push(val.id);
        });
        tags = arr.join(',');
      }

      this.getContentList(1, brand_id, this.category_id, tags, this.keywords, true);
    },

    //点击更多
    moreClick() {
      this.setData({
        isMore: !this.isMore
      });
    },

    changeCategories(e) {
      let id = e.currentTarget.dataset.id;
      let index = e.currentTarget.dataset.index;

      if (this.conditions.categories.length >= 2) {
        if (index >= 2) {
          this.setData({
            activeIndex: 3
          });
        } else {
          this.setData({
            activeIndex: index + 1
          });
        }
      }

      this.setData({
        category_id: id,
        category_index: index
      });
      let brand_id = this.brandItem.id || '';
      let tags = '';
      let arr = [];

      if (this.tagItem.length) {
        this.tagItem.forEach(val => {
          arr.push(val.id);
        });
        tags = arr.join(',');
      }

      this.moreClick();
      this.getContentList(1, brand_id, this.category_id, tags, this.keywords, true);
    },

    jumpDetail(e) {
      let id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: `/pages/store/detail/detail?id=${id}`
      });
    },

    //获取筛选条件
    getConditions() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      this.$http.get({
        api: 'api/discover/conditions'
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            if (res.data.tags && res.data.tags.length) {
              res.data.tags.forEach(val => {
                val.isChoose = false;
              });
            }

            this.setData({
              conditions: res.data
            });
          } else {
            wx.showModal({
              content: res.message || '请求失败',
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            content: res.message || '请求失败',
            showCancel: false
          });
        }

        // this.setData({
        //   show: false
        // });
		
		this.show=false;
		
        wx.hideLoading();
      }).catch(rej => {
        wx.hideLoading();
        wx.showModal({
          content: res.message || '请求失败',
          showCancel: false
        });
      });
    },

    //预览图片
    preImage(e) {
      a = true;
      var url = e.currentTarget.dataset.url;
      var findex = e.currentTarget.dataset.idx;
      var index = e.currentTarget.dataset.index;
      wx.previewImage({
        current: url,
        // 当前显示图片的http链接
        urls: this.list[findex][index].img_list // 需要预览的图片http链接列表

      });
    },

    //获取文章列表
    getContentList(page, brand_id, category_id, tags, keywords, is_tab) {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      let token = this.$cookieStorage.get('user_token');
      let tagList = '';

      if (tags) {
        tagList = tags.split(',').sort(function (a, b) {
          return a - b;
        }).join(',');
      }

      this.$http.get({
        api: 'api/discover/content/list',
        data: {
          page: page,
          brand_id: brand_id,
          category_id: category_id,
          tags: tagList,
          keywords: keywords
        },
        header: {
          Authorization: token
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            if (is_tab) {
              this.setData({
                list: []
              });
            }

            let pages = res.meta.pagination;
            let current_page = pages.current_page;
            let total_pages = pages.total_pages;
            this.setData({
             // [`list[${page - 1}]`]: res.data,
              more: current_page < total_pages,
              page: current_page
            });
			
			this.list[page-1]=res.data;


          } else {
            wx.showModal({
              content: res.message || '请求失败',
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            content: res.message || '请求失败',
            showCancel: false
          });
        }

        // this.setData({
        //   show: false
        // });
		
		this.show=false;
		
        wx.hideLoading();
      }).catch(rej => {
        wx.hideLoading();
        wx.showModal({
          content: res.message || '请求失败',
          showCancel: false
        });
      });
    },

    //点击筛选
    filterClick() {
      this.setData({
        isFitter: !this.isFitter
      });
    },

    radioBrand(e) {
      let index = e.currentTarget.dataset.index;
      let id = e.currentTarget.dataset.id;
      let name = e.currentTarget.dataset.name;
      this.setData({
        brandIndex: index,
        brandItem: {
      			id:id,
      			name:name
      		}
      });
    },

    checkboxTag(e) {
      let tags = this.conditions.tags; //渲染的数据

      let index = e.currentTarget.dataset.index;
      let item = {
      		  id:e.currentTarget.dataset.id,
      		  name:e.currentTarget.dataset.name,
      		  isChoose:e.currentTarget.dataset.isChoose
      };
      let tagItem = this.tagItem;
      let tagIds = this.tagIds;
      let idsIndex = tagIds.indexOf(item.id);

      if (idsIndex == -1) {
        if (tagItem.length < 2) {
          tags[index].isChoose = true;
          tagItem.push(item);
          tagIds.push(item.id);
          this.setData({
            tagItem: tagItem,
            tagIds: tagIds,
            'conditions.tags': tags
          });
        } else {
          wx.showToast({
            title: '最多选择两个',
            icon: 'none'
          });
        }
      } else {
        tagItem.splice(idsIndex, 1);
        tagIds.splice(idsIndex, 1);
        tags[index].isChoose = false;
        this.setData({
          tagItem: tagItem,
          tagIds: tagIds,
          'conditions.tags': tags
        });
      }
    },

    //重置标签
    reset() {
      let tags = this.conditions.tags;
      tags.forEach(val => {
        val.isChoose = false;
      });
      this.setData({
        brandIndex: -1,
        tagItem: [],
        tagIds: [],
        'conditions.tags': tags
      });
    },

    //确认筛选
    confirm() {
      let brand_id = this.brandItem.id || '';
      let tags = '';
      let arr = [];

      if (this.tagItem.length) {
        this.tagItem.forEach(val => {
          arr.push(val.id);
        });
        tags = arr.join(',');
      }

      this.getContentList(1, brand_id, this.category_id, tags, this.keywords, true);
      this.filterClick();
    },

    //收藏内容
    addFavorite(content_id, idx, index) {
      let token = this.$cookieStorage.get('user_token');
      wx.showLoading({
        title: "收藏中",
        mask: true
      });
      this.$http.post({
        api: 'api/content/favorite/add',
        header: {
          Authorization: token
        },
        data: {
          content_id: content_id
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
              let items = this.list[idx];
              let item = items[index];
              item.is_favorite = 1;
              this.$set(this.list, idx, items)
          } else {
            wx.showModal({
              content: res.message || '请求失败',
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            content: res.message || '请求失败',
            showCancel: false
          });
        }

        wx.hideLoading();
      }).catch(rej => {
        wx.hideLoading();
        wx.showModal({
          content: res.message || '请求失败',
          showCancel: false
        });
      });
    },

    deleteFavorite(content_id, idx, index) {
      let token = this.$cookieStorage.get('user_token');
      wx.showLoading({
        title: "取消中",
        mask: true
      });
      this.$http.post({
        api: 'api/content/favorite/delete',
        header: {
          Authorization: token
        },
        data: {
          content_id: content_id
        }
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
              let items = this.list[idx];
              let item = items[index];
              item.is_favorite = 0;
              this.$set(this.list, idx, items)
          } else {
            wx.showModal({
              content: res.message || '请求失败',
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            content: res.message || '请求失败',
            showCancel: false
          });
        }

        wx.hideLoading();
      }).catch(rej => {
        wx.hideLoading();
        wx.showModal({
          content: res.message || '请求失败',
          showCancel: false
        });
      });
    },

    favoriteClick(e) {
      let token = this.$cookieStorage.get('user_token');

      if (token) {
        let islike = e.currentTarget.dataset.islike;
        let idx = e.currentTarget.dataset.idx;
        let index = e.currentTarget.dataset.index;
        let id = e.currentTarget.dataset.id;

        if (islike == 0) {
          this.addFavorite(id, idx, index);
        } else if (islike == 1) {
          this.deleteFavorite(id, idx, index);
        }
      } else {
        let url = getUrl();
        wx.navigateTo({
          url: "/pages/user/register/register?url=" + url
        });
      }
    },

    //复制文案
    copyText(e) {
      let txt = e.currentTarget.dataset.txt;
      wx.setClipboardData({
        data: txt,

        success() {
          wx.showToast({
            title: "复制成功"
          });
        }

      });
    },

    //获取授权
    writePhotosAlbum(successFun, failFun) {
      // #ifdef MP-WEIXIN
      wx.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: function () {
                successFun && successFun();
              },
              fail: function (res) {
                wx.hideLoading();
                wx.showModal({
                  title: '提示',
                  content: "小程序需要您的微信授权保存图片，是否重新授权？",
                  showCancel: true,
                  cancelText: "否",
                  confirmText: "是",
                  success: function (res2) {
                    if (res2.confirm) {
                      //用户点击确定'
                      wx.openSetting({
                        success: res3 => {
                          if (res3.authSetting['scope.writePhotosAlbum']) {
                            //已授权
                            successFun && successFun();
                          } else {
                            failFun && failFun();
                          }
                        }
                      });
                    } else {
                      failFun && failFun();
                    }
                  }
                });
              }
            });
          } else {
            successFun && successFun();
          }
        }
      
      });
      // #endif
	  // #ifdef APP-PLUS
	  var that = this;
	   uni.getSystemInfo({
	   	success(result) {
	   		if(result.platform == 'android'){
	   			that.requestAndroidPermission(successFun);
	   		} else if(result.platform == 'ios'){
	   			that.requestIosPermission(successFun)
	   		}
	   		
	   	}
	   })
	  // #endif
    },
	//ios app权限设置
	requestIosPermission(successFun){
		var result = permision.judgeIosPermission('photoLibrary');
		if(result){
			successFun && successFun();
		}else{
			//打开授权，iOS上如果没有调用过的权限，不会出现在权限设置界面。
			permision.gotoAppPermissionSetting()
		}
	},
	//安卓 app 权限设施
	async requestAndroidPermission(successFun) {
	    var result = await permision.requestAndroidPermission("android.permission.WRITE_EXTERNAL_STORAGE")
	    var strStatus
	    if (result == 1) {
	        strStatus = "已获得授权";
				 successFun && successFun();
	    } else if (result == 0) { 
	        strStatus = "未获得授权";
					permision.gotoAppPermissionSetting()
	    } else {
	        strStatus = "被永久拒绝权限"
				  permision.gotoAppPermissionSetting()
	    }
	},

    //下载多张图片
    downloadImgs(e) {
      let urlsList = e.currentTarget.dataset.urls;

      if (urlsList && urlsList.length) {
        var _this = this; // 获取权限


        this.writePhotosAlbum(function success() {
          wx.showLoading({
            title: '加载中',
            mask: true
          });

          _this.queue(urlsList).then(res => {
            wx.hideLoading();
            wx.showToast({
              title: '下载完成'
            });
          }).catch(err => {
            wx.hideLoading();
            console.log(err);
          });
        }, function fail() {
          wx.showToast({
            title: '您拒绝了保存到相册',
            icon: 'none'
          });
        });
      } else {
        return;
      }
    },

    // 队列
    queue(urls) {
      let promise = Promise.resolve();
      urls.forEach((url, index) => {
        promise = promise.then(() => {
          return this.download(url);
        });
      });
      return promise;
    },

    // 下载
    download(url) {
      return new Promise((resolve, reject) => {
        wx.downloadFile({
          url: url,
          success: function (res) {
            var temp = res.tempFilePath;
            wx.saveImageToPhotosAlbum({
              filePath: temp,
              success: function (res) {
                resolve(res);
              },
              fail: function (err) {
                reject(res);
              }
            });
          },
          fail: function (err) {
            reject(err);
          }
        });
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  },
  computed: {},
  watch: {}
};
</script>
<style rel="stylesheet/less" lang="less">
    @import "findSearch";
</style>