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