|
|
@@ -0,0 +1,236 @@
|
|
|
+<template>
|
|
|
+ <view class="">
|
|
|
+ <u-navbar
|
|
|
+ :title="title"
|
|
|
+ :autoBack="true"
|
|
|
+ :safeAreaInsetTop="true"
|
|
|
+ >
|
|
|
+ </u-navbar>
|
|
|
+ <view class="search-wrap">
|
|
|
+ <u-search
|
|
|
+ placeholder="请输入搜索的商品"
|
|
|
+ :clearabled="true"
|
|
|
+ :showAction="false"
|
|
|
+ height="80rpx"
|
|
|
+ @search="search"
|
|
|
+ @custom="search"
|
|
|
+ @clear="reloadList"
|
|
|
+ bgColor="#fff"
|
|
|
+ borderColor="#00A447"
|
|
|
+ v-model="params.goodsName">
|
|
|
+ </u-search>
|
|
|
+ </view>
|
|
|
+ <view class="search-history page-wrap" v-if="searchHistory.length>0">
|
|
|
+ <view class="search-title u-flex u-row-between">
|
|
|
+ <text>最近搜索</text>
|
|
|
+ <u-icon @click="clearStorage" name="trash" color="#666" size="35"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="history-wrap">
|
|
|
+ <text class="history" v-for="(item,index) in searchHistory" :key="index">
|
|
|
+ {{item.name}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
|
|
|
+ <view class="page-wrap" >
|
|
|
+ <view class="" v-for="item in dataList" :key="item.id" @click="$u.route('/shopping/productdetails',{id:item.id})">
|
|
|
+ <view class="product u-flex">
|
|
|
+ <u--image :showLoading="true" :src="item.mainImg" width="180rpx" height="180rpx"></u--image>
|
|
|
+ <view class="text">
|
|
|
+ <view class="name ellipsis-2">{{item.goodsName}}</view>
|
|
|
+ <view class="u-flex u-row-between">
|
|
|
+ <view class="left">
|
|
|
+ <view class="up">
|
|
|
+ <view class="" v-if="vuex_member_info.levelType>1">
|
|
|
+ <text class="price">¥ <text class="price-num">{{item.vipPrice}}</text></text>
|
|
|
+ <text class="vip-icon">VIP</text>
|
|
|
+ </view>
|
|
|
+ <view class="" v-else>
|
|
|
+ <text class="price">¥ <text class="price-num">{{item.salePrice}}</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="down">
|
|
|
+ <!-- <text class="discount">8.8折</text> -->
|
|
|
+ <text v-if="vuex_member_info.levelType>1" class="original-price gray line-through">¥ {{item.salePrice}}</text>
|
|
|
+ <text class="sales gray">销量 {{item.saleCount}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u--image :showLoading="false" @click.native.stop="addCart(item.id)" :src="staticUrl+'/img/add.png'" width="48rpx" height="48rpx"></u--image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </mescroll-body>
|
|
|
+ <cartfixed ref="cartfixed" @getCartList="getCartList" />
|
|
|
+ <u-toast ref="uToast"></u-toast>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // 引入mescroll-mixins.js
|
|
|
+ import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
+ import cartfixed from "../components/cartfixed.vue"
|
|
|
+ export default {
|
|
|
+ mixins: [MescrollMixin], // 使用mixin
|
|
|
+ components: {
|
|
|
+ cartfixed
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ staticUrl:this.$commonConfig.staticUrl,
|
|
|
+ downOption: {},
|
|
|
+ // 上拉加载的配置(可选, 绝大部分情况无需配置)
|
|
|
+ upOption: {
|
|
|
+ page: {
|
|
|
+ size: 10 // 每页数据的数量,默认10
|
|
|
+ },
|
|
|
+ noMoreSize: 3, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
|
|
|
+ empty: {
|
|
|
+ tip: '暂无相关数据'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title:'产品搜索',
|
|
|
+ params:{
|
|
|
+ goodsName:'',
|
|
|
+ // isExplode:0,//是否爆款 0不是，1是
|
|
|
+ },
|
|
|
+ // 列表数据
|
|
|
+ dataList: [],
|
|
|
+ searchHistory:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(page) {
|
|
|
+ let that = this;
|
|
|
+ this.params.goodsName = page.goodsName;
|
|
|
+ uni.getStorage({
|
|
|
+ key:'searchgoodshistory',
|
|
|
+ success: function(storagedata) {
|
|
|
+ that.searchHistory = storagedata.data;
|
|
|
+ console.log('storagedata',storagedata.data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.$refs.cartfixed.getCartList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
|
|
|
+ downCallback(){
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },
|
|
|
+ /*上拉加载的回调*/
|
|
|
+ upCallback(page) {
|
|
|
+ let that = this;
|
|
|
+ // 此处可以继续请求其他接口
|
|
|
+ // if(page.num == 1){
|
|
|
+ // // 请求其他接口...
|
|
|
+ // }
|
|
|
+ let pageNum = page.num; // 页码, 默认从1开始
|
|
|
+ let pageSize = page.size; // 页长, 默认每页10条
|
|
|
+ this.params = Object.assign(this.params,{pageNum:pageNum,pageSize:pageSize});
|
|
|
+ console.log('this.params',this.params);
|
|
|
+ this.$u.api.memberGoodList(this.params).then(data => {
|
|
|
+ console.log('data',JSON.parse(JSON.stringify(data)));
|
|
|
+ // 接口返回的当前页数据列表 (数组)
|
|
|
+ let curPageData = data.data.rows;
|
|
|
+ console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
|
|
|
+ // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
+ let curPageLen = curPageData.length;
|
|
|
+ // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
+ // let totalPage = data.data.data.totalPage;
|
|
|
+ // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
+ let totalSize = data.data.total;
|
|
|
+ // 接口返回的是否有下一页 (true/false)
|
|
|
+ // let hasNext = data.xxx;
|
|
|
+ // console.log('totalPage',totalPage,'curPageLen',curPageLen);
|
|
|
+ //设置列表数据
|
|
|
+ if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
|
|
|
+ this.dataList = this.dataList.concat(curPageData); //追加新数据
|
|
|
+ // 请求成功,隐藏加载状态
|
|
|
+ //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
|
+ // this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
+ //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
|
|
+ this.mescroll.endBySize(curPageLen, totalSize);
|
|
|
+ }).catch(err => {
|
|
|
+ this.mescroll.endErr()
|
|
|
+ console.log(err)
|
|
|
+ });
|
|
|
+
|
|
|
+ // 存储历史数据
|
|
|
+ let index = this.searchHistory.findIndex(item => item.name === that.params.goodsName);
|
|
|
+ console.log('index',index);
|
|
|
+ if (index !== -1) {
|
|
|
+ // 已经存在，不用重复添加了
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.searchHistory.push({ name: that.params.goodsName });
|
|
|
+ uni.setStorage({
|
|
|
+ key: 'searchgoodshistory',
|
|
|
+ data: that.searchHistory,
|
|
|
+ success: function() {
|
|
|
+ // console.log('数据存储成功')
|
|
|
+ },
|
|
|
+ fail: function() {
|
|
|
+ // console.log('数据存储失败')
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
|
|
|
+ reloadList() {
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },
|
|
|
+ search(e){
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ // this.reloadList();
|
|
|
+ console.log('search',e)
|
|
|
+ },
|
|
|
+ addCart(id){
|
|
|
+ // console.log('addCart',id);
|
|
|
+ this.$u.api.addCart({goodsId:id}).then(res=>{
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ type:"success",
|
|
|
+ message:res.msg
|
|
|
+ });
|
|
|
+ this.$refs.cartfixed.getCartList();
|
|
|
+ console.log('res',res);
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log('addCart',err.data);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clearStorage(){
|
|
|
+ let that = this;
|
|
|
+ uni.clearStorage({
|
|
|
+ key:'searchgoodshistory',
|
|
|
+ success:function(){
|
|
|
+ that.searchHistory = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.search-history{
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ .search-title{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 45rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .history{
|
|
|
+ display: inline-block;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ min-width: 100rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
