zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化优惠券使用跳转

master
paulGao 2023-01-11 11:28:51 +08:00
parent 9c03205c9f
commit bbe315fb45
2 changed files with 780 additions and 727 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
pages/cart/coupon/myCoupon.vue
View File

@ -2,28 +2,63 @@
<view class="b-content">
<view class="navbar">
<!-- 循环出头部tab栏 -->
<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="handleTabClick(index)"><text
:class="{ current: tabCurrentIndex === index }">{{
<view
v-for="(item, index) in navList"
:key="index"
class="nav-item"
@click="handleTabClick(index)"
><text :class="{ current: tabCurrentIndex === index }">{{
item.text
}}</text></view>
}}</text></view
>
</view>
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content" v-for="(navItem, navIndex) in navList" :key="navIndex">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
<swiper
:current="tabCurrentIndex"
class="swiper-box"
duration="300"
@change="changeTab"
>
<swiper-item
class="tab-content"
v-for="(navItem, navIndex) in navList"
:key="navIndex"
>
<scroll-view
class="list-scroll-content"
scroll-y
@scrolltolower="loadData"
>
<!-- 空白页 -->
<u-empty mode="coupon" text="暂无优惠券了" v-if="navItem.wheterEmpty"></u-empty>
<u-empty
mode="coupon"
text="暂无优惠券了"
v-if="navItem.wheterEmpty"
></u-empty>
<!-- 数据 -->
<view v-if="navItem.dataList && coupon" class="coupon-item" :class="{ 'coupon-used': navIndex != 0 }"
v-for="(coupon, index) in navItem.dataList" :key="index">
<view
v-if="navItem.dataList && coupon"
class="coupon-item"
:class="{ 'coupon-used': navIndex != 0 }"
v-for="(coupon, index) in navItem.dataList"
:key="index"
>
<view class="left">
<view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
<view
class="wave"
v-for="(item, index) in 12"
:key="index"
></view>
</view>
<view class="message">
<view class="price" v-if="coupon.couponType == 'DISCOUNT'">{{ coupon.discount }}折</view>
<view class="price" v-if="coupon.couponType == 'DISCOUNT'"
>{{ coupon.discount }}折</view
>
<view class="price" v-else>{{ coupon.price }}元</view>
<view class="sub-price">满{{ coupon.consumeThreshold | unitPrice }}可用</view>
<view class="sub-price"
>满{{ coupon.consumeThreshold | unitPrice }}可用</view
>
</view>
<view class="circle circle-top"></view>
<view class="circle circle-bottom"></view>
@ -31,27 +66,47 @@
<view class="right" v-if="coupon">
<view class="content">
<view class="title-1">{{ coupon.title }}</view>
<view class="title-2">使用平台：{{
coupon.scopeType == 'ALL' && coupon.storeId == '0'
<view class="title-2"
>使用平台：{{
coupon.scopeType == "ALL" && coupon.storeId == "0"
? "全平台"
: coupon.scopeType == "PORTION_CATEGORY"
? "仅限品类"
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
}}使用</view>
<view v-if="coupon.endTime">{{
coupon.endTime
}}</view>
<view @click="couponDetail(coupon)">详细说明
<u-icon style="float: right; margin-top: 10rpx" name="arrow-right"></u-icon>
: coupon.storeName == "platform"
? "全平台"
: coupon.storeName + ""
}}使用</view
>
<view v-if="coupon.endTime">{{ coupon.endTime }}</view>
<view @click="couponDetail(coupon)"
>详细说明
<u-icon
style="float: right; margin-top: 10rpx"
name="arrow-right"
></u-icon>
</view>
</view>
<view class="jiao-1" v-if="navIndex == 0">
<text class="text-1">新到</text>
<text class="text-2" v-if="coupon.used_status == 1">将过期</text>
<text class="text-2" v-if="coupon.used_status == 1"
>将过期</text
>
</view>
<image class="no-icon" v-if="navIndex == 1" src="@/static/img/used.png"></image>
<image class="no-icon" v-if="navIndex == 2" src="@/static/img/overdue.png"></image>
<view class="receive" v-if="navIndex == 0" @click="useItNow(coupon)">
<image
class="no-icon"
v-if="navIndex == 1"
src="@/static/img/used.png"
></image>
<image
class="no-icon"
v-if="navIndex == 2"
src="@/static/img/overdue.png"
></image>
<view
class="receive"
v-if="navIndex == 0"
@click="useItNow(coupon)"
>
<text>立即</text><br />
<text>使用</text>
</view>
@ -116,7 +171,7 @@ export default {
},
onShow() {
this.navList[this.tabCurrentIndex].params.pageNumber = 1
this.navList[this.tabCurrentIndex].params.pageNumber = 1;
this.navList[this.tabCurrentIndex].dataList = [];
this.getData();
},
@ -188,15 +243,9 @@ export default {
* 立即使用优惠券
*/
useItNow(item) {
if (item.storeId && item.storeId!='0') {
uni.navigateTo({
url: `/pages/product/shopPage?id=${item.storeId}`,
url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
});
} else {
uni.switchTab({
url: "/pages/navigation/search/searchPage",
});
}
},
/**

372
pages/navigation/search/searchPage.vue
View File

@ -1,39 +1,40 @@
<template>
<view class="content">
<u-navbar :background="navObj" :is-back="false">
<mSearch ref="mSearch" class="mSearch-input-box" @clickLeft="back" :mode="2" :placeholder="defaultKeyword"
@search="doSearch(false)" @confirm="doSearch(false)" @SwitchType="doSearchSwitch()" v-model="keyword"
:isFocusVal="!isShowSeachGoods"></mSearch>
<mSearch
ref="mSearch"
class="mSearch-input-box"
@clickLeft="back"
:mode="2"
:placeholder="defaultKeyword"
@search="doSearch(false)"
@confirm="doSearch(false)"
@SwitchType="doSearchSwitch()"
v-model="keyword"
:isFocusVal="!isShowSeachGoods"
></mSearch>
</u-navbar>
<view class="search-keyword" v-if="!isShowSeachGoods">
<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
<block v-for="(row, index) in keywordList" :key="index">
<view class="keyword-entry" hover-class="keyword-entry-tap">
<view class="keyword-text" @tap.stop="doSearch(keywordList[index].words)">
<rich-text :nodes="row.words"></rich-text>
</view>
<view class="keyword-text" @tap.stop="doSearch(keywordList[index].words)"><rich-text :nodes="row.words"></rich-text></view>
</view>
</block>
</scroll-view>
<div class="keyword-box" v-show="!isShowKeywordList">
<view class="keyword-block add1">
<view class="keyword-list-header">
<view class="u-tips">热门搜索</view>
</view>
<view class="keyword-list-header"><view class="u-tips">热门搜索</view></view>
<view class="keyword keywordBox">
<view class="wes" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">
{{ keyword }}</view>
<view class="wes" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view>
</view>
</view>
<view class="keyword-block" v-if="oldKeywordList.length > 0">
<view class="keyword-list-header">
<view class="u-tips">搜索历史</view>
</view>
<view class="keyword-list-header"><view class="u-tips">搜索历史</view></view>
<div class="oldKeyList">
<div class="oldKeyItem" v-if="keyword" v-for="(keyword, index) in oldKeywordList" :key="index"
@click="doSearch(keyword)">
<span>{{ keyword }} </span>
<div class="oldKeyItem" v-if="keyword" v-for="(keyword, index) in oldKeywordList" :key="index" @click="doSearch(keyword)">
<span>{{ keyword }}</span>
</div>
<div @click="showMore" v-if="oldKeywordIndex > loadIndex" class="oldKeyItem">展示更多</div>
@ -51,13 +52,11 @@
<text>销量</text>
<view class="p-box">
<view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-up-1.png"
v-if="params.sort === 'buyCount' && params.order === 'asc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-up-1.png" v-if="params.sort === 'buyCount' && params.order === 'asc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
</view>
<view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-down.png"
v-if="params.sort === 'buyCount' && params.order === 'desc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-down.png" v-if="params.sort === 'buyCount' && params.order === 'desc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
</view>
</view>
@ -66,13 +65,11 @@
<text>价格</text>
<view class="p-box">
<view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-up-1.png"
v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-up-1.png" v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
</view>
<view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-down.png"
v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-down.png" v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
</view>
</view>
@ -81,20 +78,32 @@
</view>
<!-- 一行一个商品展示 -->
<div v-if="isSWitch">
<scroll-view :style="{ height: goodsHeight }" enableBackToTop="true" lower-threshold="250"
@scrolltolower="loadmore()" scroll-with-animation scroll-y class="scoll-page">
<goodsList :res='goodsList' type='oneColumns' :keyword='keyword' />
<scroll-view
:style="{ height: goodsHeight }"
enableBackToTop="true"
lower-threshold="250"
@scrolltolower="loadmore()"
scroll-with-animation
scroll-y
class="scoll-page"
>
<goodsList :res="goodsList" type="oneColumns" :keyword="keyword" />
<uni-load-more :status="loadingType" @loadmore="loadmore()"></uni-load-more>
</scroll-view>
</div>
<!-- 一行两个商品展示 -->
<div v-if="
!isSWitch &&
!(goodsList == [] || goodsList == '' || goodsList == null)
">
<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true"
@scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
<goodsList :res='goodsList' :keyword='keyword' />
<div v-if="!isSWitch && !(goodsList == [] || goodsList == '' || goodsList == null)">
<scroll-view
:style="{ height: goodsHeight }"
scroll-anchoring
enableBackToTop="true"
@scrolltolower="loadmore()"
scroll-with-animation
scroll-y
lower-threshold="250"
class="scoll-page"
>
<goodsList :res="goodsList" :keyword="keyword" />
<uni-load-more :status="loadingType"></uni-load-more>
</scroll-view>
</div>
@ -105,13 +114,15 @@
<view class="sort-box ">
<view class="sort-list">
<view class="sort-item">
<view class="sort-title"> 品牌 </view>
<view class="sort-title">品牌</view>
<view class="flex" v-if="sortData.brands">
<view class="sort-brand-item" :key="brandsIndex" v-for="(brand, brandsIndex) in sortData.brands"
@click="handleSort(brand, brandsIndex, 'brand')">
<view class="sort-radius" :class="{
'sort-active': brand.__selected,
}">
<view class="sort-brand-item" :key="brandsIndex" v-for="(brand, brandsIndex) in sortData.brands" @click="handleSort(brand, brandsIndex, 'brand')">
<view
class="sort-radius"
:class="{
'sort-active': brand.__selected
}"
>
{{ brand.name }}
</view>
</view>
@ -119,14 +130,20 @@
<!-- <u-empty v-else text="暂无品牌" mode="list"></u-empty> -->
</view>
<view class="sort-item">
<view class="sort-title"> 全部分类 </view>
<view class="sort-title">全部分类</view>
<view class="flex" style="flex-wrap: wrap;" v-if="sortData.categories">
<view class="sort-brand-item" :key="categoriesIndex"
<view
class="sort-brand-item"
:key="categoriesIndex"
v-for="(categoryId, categoriesIndex) in sortData.categories"
@click="handleSort(categoryId, categoriesIndex, 'categoryId')">
<view class="sort-radius" :class="{
'sort-active': categoryId.__selected,
}">
@click="handleSort(categoryId, categoriesIndex, 'categoryId')"
>
<view
class="sort-radius"
:class="{
'sort-active': categoryId.__selected
}"
>
{{ categoryId.name }}
</view>
</view>
@ -136,18 +153,14 @@
</view>
<view class="sort-list">
<view class="sort-item">
<view class="sort-title"> 价格区间 </view>
<view class="sort-title">价格区间</view>
<view style="display:flex; margin-top:20rpx; align-items: center;">
<view class="sort-brand-item uinput">
<view class="sort-radius">
<u-input v-model="minPrice" type="number" placeholder="最低价" input-align="center" />
</view>
<view class="sort-radius"><u-input v-model="minPrice" type="number" placeholder="最低价" input-align="center" /></view>
</view>
<view>-</view>
<view class="sort-brand-item uinput">
<view class="sort-radius">
<u-input v-model="maxPrice" type="number" placeholder="最高价" input-align="center" />
</view>
<view class="sort-radius"><u-input v-model="maxPrice" type="number" placeholder="最高价" input-align="center" /></view>
</view>
</view>
</view>
@ -155,13 +168,15 @@
<view class="sort-list" v-if="sortData.paramOptions">
<view class="sort-item" :key="paramIndex" v-for="(param, paramIndex) in sortData.paramOptions">
<view class="sort-title"> {{ param.key }} </view>
<view class="sort-title">{{ param.key }}</view>
<view class="flex" style="flex-warp:warp" v-if="param.values">
<view class="sort-brand-item" :key="i" v-for="(value, i) in param.values"
@click="handleSort(value, i, 'prop', param)">
<view class="sort-radius" :class="{
'sort-active': value.__selected,
}">
<view class="sort-brand-item" :key="i" v-for="(value, i) in param.values" @click="handleSort(value, i, 'prop', param)">
<view
class="sort-radius"
:class="{
'sort-active': value.__selected
}"
>
{{ value.title }}
</view>
</view>
@ -177,11 +192,7 @@
</view>
</u-popup>
<div class="empty" v-if="empty">
<view>
<image style="width: 320rpx; height: 240rpx" src="/static/nodata.png">
</image>
</view>
<view><image style="width: 320rpx; height: 240rpx" src="/static/nodata.png"></image></view>
<view>
<p>没有找到相关的商品信息</p>
<p>请换一个关键词试试吧</p>
@ -192,49 +203,49 @@
</template>
<script>
import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
import goodsList from '@/components/m-goods-list/list.vue'
import { getHotKeywords } from "@/api/home.js";
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
import storage from "@/utils/storage";
import { getGoodsList, getGoodsRelated } from '@/api/goods.js';
import goodsList from '@/components/m-goods-list/list.vue';
import { getHotKeywords } from '@/api/home.js';
import mSearch from '@/components/m-search-revision/m-search-revision.vue';
import storage from '@/utils/storage';
export default {
data() {
return {
empty:false,
empty: false,
scrollTop: 0,
loadIndex: 10,
oldKeywordIndex: 0,
selectedWay: {
brand: [],
categoryId: [],
prop: [],
prop: []
},
sortPopup: false, //筛选的开关
navObj: {
background: "#fff",
background: '#fff'
},
typeSortData: {
type: "",
index: "",
type: '',
index: ''
},
goodsHeight: "",
defaultKeyword: "",
keyword: "",
goodsHeight: '',
defaultKeyword: '',
keyword: '',
oldKeywordList: [],
hotKeywordList: [],
keywordList: [],
goodsList: [],
cateMaskState: 0, //分类面板展开状态
loadingType: "more", //加载更多状态
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
isShowSeachGoods: false,
isShowKeywordList: false,
sortData: "",
sortData: '',
isSWitch: false,
params: {
@ -242,10 +253,10 @@ export default {
pageSize: 10,
// sort: 'grade_asc',
keyword: "",
keyword: ''
},
minPrice: "",
maxPrice: "",
minPrice: '',
maxPrice: '',
sortParams: {
pageNumber: 1,
pageSize: 10,
@ -253,10 +264,10 @@ export default {
// price: "", //价格,示例值(10_30)
// prop: "", //属性:参数名_参数值@参数名_参数值,示例值(屏幕类型_LED@屏幕尺寸_15英寸)
// brandId:"", //品牌,可以多选 品牌Id@品牌Id@品牌Id
categoryId: "",
categoryId: ''
},
routerVal: "",
routerVal: ''
};
},
@ -276,9 +287,9 @@ export default {
this.params.categoryId = this.routerVal.category;
this.sortParams.categoryId = this.routerVal.category;
this.isShowSeachGoods = true;
this.$nextTick(()=>{
this.$nextTick(() => {
this.$refs.mSearch.isShowSeachGoods = true;
})
});
}
if (this.routerVal.keyword) {
this.params.keyword = this.routerVal.keyword;
@ -288,6 +299,14 @@ export default {
this.params.storeId = this.routerVal.storeId;
this.isShowSeachGoods = true;
}
if (this.routerVal.promotionType) {
this.params.promotionType = this.routerVal.promotionType;
this.isShowSeachGoods = true;
}
if (this.routerVal.promotionsId) {
this.params.promotionsId = this.routerVal.promotionsId;
this.isShowSeachGoods = true;
}
this.loadData();
},
components: {
@ -304,15 +323,14 @@ export default {
this.defaultKeyword = val;
}
} else {
this.defaultKeyword = "请输入搜索商品";
this.defaultKeyword = '请输入搜索商品';
}
},
sortPopup(val) {
if (val) {
this.selectedWay = { brand: [], categoryId: [], prop: [] };
console.log(this.selectedWay);
}
},
}
},
onReachBottom() {
@ -327,34 +345,30 @@ export default {
let navHeight = 0;
uni.getSystemInfo({
success: function (res) {
success: function(res) {
// res - 各种参数
let top = uni.createSelectorQuery().select(".u-navbar");
top
.boundingClientRect(function (data) {
let top = uni.createSelectorQuery().select('.u-navbar');
top.boundingClientRect(function(data) {
if (data && data.height) {
//data - 各种参数
topHeight = data.height; // 获取元素宽度
}
})
.exec();
let nav = uni.createSelectorQuery().select(".navbar");
nav
.boundingClientRect(function (data) {
}).exec();
let nav = uni.createSelectorQuery().select('.navbar');
nav.boundingClientRect(function(data) {
if (data && data.height) {
//data - 各种参数
navHeight = data.height; // 获取元素宽度
}
})
.exec();
},
}).exec();
}
});
this.goodsHeight = windowHeight - navHeight - topHeight;
// #ifdef APP-PLUS
this.goodsHeight = this.goodsHeight - 100;
// #endif
this.goodsHeight += "px";
this.goodsHeight += 'px';
},
methods: {
@ -362,9 +376,9 @@ export default {
getPromotion(item) {
if (item.promotionMap) {
let array = [];
Object.keys(item.promotionMap).forEach((child) => {
if (!array.includes(child.split("-")[0])) {
array.push(child.split("-")[0]);
Object.keys(item.promotionMap).forEach(child => {
if (!array.includes(child.split('-')[0])) {
array.push(child.split('-')[0]);
}
});
@ -386,18 +400,17 @@ export default {
}
// 如果选中品牌 赋值
this.selectedWay["brand"].forEach((item) => {
this.selectedWay['brand'].forEach(item => {
if (item.__selected) {
this.params.brandId.push(item.value);
}
});
this.params.brandId = this.params.brandId.join("@") || "";
this.params.brandId = this.params.brandId.join('@') || '';
console.log(this.params.brandId);
// 处理分类 (单选)
if (this.selectedWay["categoryId"][0]) {
this.params.categoryId = this.selectedWay["categoryId"][0].value;
if (this.selectedWay['categoryId'][0]) {
this.params.categoryId = this.selectedWay['categoryId'][0].value;
}
if (!this.params.prop) {
this.params.prop = [];
@ -405,12 +418,12 @@ export default {
this.params.prop = [this.params.prop];
}
this.selectedWay["prop"].forEach((item) => {
this.selectedWay['prop'].forEach(item => {
if (item.__selected) {
this.params.prop.push(`${item.parent}_${item.title}`);
}
});
this.params.prop = this.params.prop.join("@");
this.params.prop = this.params.prop.join('@');
// 处理价格
if (this.minPrice || this.maxPrice) {
this.params.price = `${this.minPrice}_${this.maxPrice}`;
@ -423,7 +436,6 @@ export default {
this.params.pageNumber = 1;
this.sortParams = this.params;
this.loadData();
this.sortPopup = false;
},
@ -433,16 +445,16 @@ export default {
this.sortParams = {
pageNumber: 1,
pageSize: 10,
categoryId: this.routerVal.category || "",
categoryId: this.routerVal.category || ''
};
this.sortPopup = false;
this.initSortGoods();
this.minPrice = "";
this.maxPrice = "";
this.minPrice = '';
this.maxPrice = '';
this.params = {
pageNumber: 1,
pageSize: 10,
categoryId: this.routerVal.category || "",
categoryId: this.routerVal.category || ''
};
this.goodsList = [];
this.loadData();
@ -450,12 +462,12 @@ export default {
// 点击筛选的内容
handleSort(val, index, type, parent) {
if (type == "prop") {
if (type == 'prop') {
val.parent = parent.key;
}
this.selectedWay[type].push(val);
if (type == "categoryId") {
this.sortData.categories.forEach((item) => {
if (type == 'categoryId') {
this.sortData.categories.forEach(item => {
item.__selected = false;
});
val.__selected = true;
@ -475,19 +487,19 @@ export default {
},
back() {
uni.navigateBack({
delta: 1,
delta: 1
});
},
// 跳转到商品详情
navigateToDetailPage(item) {
uni.navigateTo({
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`,
url: `/pages/product/goods?id=${item.content.id}&goodsId=${item.content.goodsId}`
});
},
// 跳转地址
navigateToStoreDetailPage(item) {
uni.navigateTo({
url: `/pages/product/shopPage?id=${item.content.storeId}`,
url: `/pages/product/shopPage?id=${item.content.storeId}`
});
},
loadmore() {
@ -495,17 +507,17 @@ export default {
this.loadData();
},
initSortGoods() {
getGoodsRelated(this.sortParams).then((res) => {
getGoodsRelated(this.sortParams).then(res => {
if (res.data.success) {
for (let item of Object.keys(res.data.result)) {
res.data.result[item].forEach((child) => {
res.data.result[item].forEach(child => {
child.__selected = false;
// 循环出和品牌分类一样的数据格式
if (child.values) {
child.values = child.values.map((item) => ({
child.values = child.values.map(item => ({
title: item,
__selected: false,
__selected: false
}));
}
});
@ -525,30 +537,28 @@ export default {
this.params.pageSize = 10;
// this.params.order = "desc";
if (this.params.sort == type) {
this.params.order == "asc"
? (this.params.order = "desc")
: (this.params.order = "asc");
this.params.order == 'asc' ? (this.params.order = 'desc') : (this.params.order = 'asc');
this.$set(this.params, "sort", type);
this.$set(this.params, 'sort', type);
} else {
this.params.order = "desc";
this.$set(this.params, "sort", type);
this.params.order = 'desc';
this.$set(this.params, 'sort', type);
}
if (index == 0) {
this.params.sort = "releaseTime";
this.params.order = "desc";
this.params.sort = 'releaseTime';
this.params.order = 'desc';
}
this.filterIndex = index;
uni.pageScrollTo({
duration: 300,
scrollTop: 0,
scrollTop: 0
});
this.loadData("refresh", 1);
this.loadData('refresh', 1);
uni.showLoading({
title: "正在加载",
title: '正在加载'
});
},
//加载默认搜索关键字
@ -561,21 +571,21 @@ export default {
//
this.defaultKeyword = this.hotKeywordList[0];
} else {
this.defaultKeyword = "请输入搜索商品";
this.defaultKeyword = '请输入搜索商品';
}
},
//加载历史搜索,自动读取本地Storage
loadOldKeyword(index) {
this.oldKeywordList = [];
uni.getStorage({
key: "OldKeys",
success: (res) => {
key: 'OldKeys',
success: res => {
var OldKeys = JSON.parse(res.data);
this.oldKeywordIndex = OldKeys.length;
for (let i = 0; i < index; i++) {
this.oldKeywordList.push(OldKeys[i]);
}
},
}
});
},
@ -586,27 +596,24 @@ export default {
*/
async loadHotKeyword() {
this.hotKeywordList = [];
if (
!storage.getHotWords().time ||
storage.getHotWords().time <= new Date().getTime() / 1000
) {
if (!storage.getHotWords().time || storage.getHotWords().time <= new Date().getTime() / 1000) {
// 没有缓存或者第一次进入请求接口保存缓存
let res = await getHotKeywords(10);
let keywords = res.data.result;
keywords.forEach((item) => {
keywords.forEach(item => {
this.hotKeywordList.push(item);
});
let hotData = {
time: new Date().getTime() / 1000 + 30 * 5,
keywords: keywords,
keywords: keywords
};
storage.setHotWords(hotData);
} else {
let keywords = storage.getHotWords().keywords;
keywords.forEach((item) => {
keywords.forEach(item => {
this.hotKeywordList.push(item);
});
}
@ -614,18 +621,18 @@ export default {
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type, loading) {
this.loadingType = "loading";
if (type == "refresh") {
this.loadingType = 'loading';
if (type == 'refresh') {
this.goodsList = [];
}
//没有更多直接返回 #TODO
let goodsList = await getGoodsList(this.params);
if (goodsList.data.result.content.length < 10) {
this.loadingType = "noMore";
this.empty = true
this.loadingType = 'noMore';
this.empty = true;
} else {
this.empty = false
this.empty = false;
}
this.goodsList.push(...goodsList.data.result.content);
this.initSortGoods();
@ -639,14 +646,11 @@ export default {
for (var i = 0; i < len; i++) {
var row = keywords[i];
//定义高亮#9f9f9f
var html = row[0].replace(
keyword,
"<span style='color: #9f9f9f;'>" + keyword + "</span>"
);
html = "<div>" + html + "</div>";
var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + '</span>');
html = '<div>' + html + '</div>';
var tmpObj = {
keyword: row[0],
htmlStr: html,
htmlStr: html
};
keywordArr.push(tmpObj);
}
@ -659,15 +663,15 @@ export default {
//清除历史搜索
oldDelete() {
uni.showModal({
content: "确定清除历史搜索记录？",
success: (res) => {
content: '确定清除历史搜索记录？',
success: res => {
if (res.confirm) {
this.oldKeywordList = [];
uni.removeStorage({
key: "OldKeys",
key: 'OldKeys'
});
}
},
}
});
},
@ -675,9 +679,9 @@ export default {
doSearchSwitch() {
this.isSWitch = !this.isSWitch;
this.isShowSeachGoods = true;
this.params.pageNumber = 1
this.params.pageSize = 10
this.loadData("refresh", 1);
this.params.pageNumber = 1;
this.params.pageSize = 10;
this.loadData('refresh', 1);
},
/**
@ -693,25 +697,25 @@ export default {
* 第一次搜索如果没有关键词会将热门搜索中第一个热词进行判定
* 如果没有热词则会展示一个空词搜索
*/
keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || "";
keyword = (this.hotKeywordList.length && this.hotKeywordList[0]) || '';
}
this.defaultKeyword == "请输入搜索商品" ? (keyword = "") : "";
this.defaultKeyword == '请输入搜索商品' ? (keyword = '') : '';
// this.keyword = keyword;
keyword ? (this.keyword = keyword) : "";
keyword ? (this.keyword = keyword) : '';
this.saveKeyword(keyword); //保存为历史
this.isShowSeachGoods = true;
this.$refs.mSearch.isShowSeachGoods = true;
this.params.keyword = this.keyword;
this.params.pageNumber = 1;
this.$set(this.sortParams, "keyword", keyword);
this.loadData("refresh", 1);
this.$set(this.sortParams, 'keyword', keyword);
this.loadData('refresh', 1);
},
//保存关键字到历史记录
saveKeyword(keyword) {
if (!keyword) return false;
uni.getStorage({
key: "OldKeys",
success: (res) => {
key: 'OldKeys',
success: res => {
var OldKeys = JSON.parse(res.data);
var findIndex = OldKeys.indexOf(keyword);
if (findIndex == -1) {
@ -724,24 +728,24 @@ export default {
OldKeys.length > 10 && OldKeys.pop();
uni.setStorage({
key: "OldKeys",
data: JSON.stringify(OldKeys),
key: 'OldKeys',
data: JSON.stringify(OldKeys)
});
this.oldKeywordList = OldKeys; //更新历史搜索
},
fail: (e) => {
fail: e => {
var OldKeys = [keyword];
uni.setStorage({
key: "OldKeys",
data: JSON.stringify(OldKeys),
key: 'OldKeys',
data: JSON.stringify(OldKeys)
});
this.oldKeywordList = OldKeys; //更新历史搜索
},
}
});
},
},
}
}
};
</script>
<style lang="scss" scoped>
@import "./search.scss";
@import './search.scss';
</style>