HandOver-liuwu
/
mobileclient
mirror of https://codeup.aliyun.com/lsxd/marketing/mobileclient.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(搜索栏目)：支持模糊查询key码中商品

This commit is contained in:
Apple 2022-10-08 14:51:07 +08:00
parent ee39266f7d
commit ca24976413
2 changed files with 99 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
v1_5_0_C/couponCollection.html
View File

@ -1,27 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover"> <title>商品列表页</title>
<title>商品页</title> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript" charset="utf-8"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript" <script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322"></script>
charset="utf-8"></script>
<script type="text/javascript" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144322">
</script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/js/swiper.min.js"></script> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/js/swiper.min.js"></script>
<link href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/css/swiper.min.css" rel="stylesheet"> <link href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/siteqiexchange/css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css"> <link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/loading.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api2_0.js"></script>
<link rel="stylesheet" <link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/couponCollection.css">
href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/couponCollection.css">
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/tabbar.css"> <link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/tabbar.css">
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/modelPop.js"></script> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/modelPop.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/tabbar.js"></script> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/tabbar.js"></script>
</head> </head>
<body> <body>
<div id="homepage" :style="{background: <div id="homepage" :style="{background:
(viewConfig.backgroundImg.iswitch&&viewConfig.backgroundImg.bgImg? (viewConfig.backgroundImg.iswitch&&viewConfig.backgroundImg.bgImg?
@ -44,7 +38,7 @@
<img class="backpresty" @click="backHandler" v-if="goodsShow&&!isKey" <img class="backpresty" @click="backHandler" v-if="goodsShow&&!isKey"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
alt=""> alt="">
<div class="search-box" v-if="viewConfig.search.iswitch==='1'"> <div class="search-box" v-if="viewConfig.search.iswitch==='1'" @click="searchFn">
<input type="text" class="search" :style="{ <input type="text" class="search" :style="{
color:viewConfig.search.fontColor, color:viewConfig.search.fontColor,
textAlign:viewConfig.search.textAlign, textAlign:viewConfig.search.textAlign,
@ -400,6 +394,7 @@
} }
goodsArr.sort(objectArraySort('weight')) goodsArr.sort(objectArraySort('weight'))
self.swiperDataList = goodsArr; self.swiperDataList = goodsArr;
sessionStorage.setItem('goodsCollection',JSON.stringify(goodsArr));
self.goodsShow = goodsArr.length > 1; self.goodsShow = goodsArr.length > 1;
sessionStorage.setItem('goodsCount', goodsArr.length); sessionStorage.setItem('goodsCount', goodsArr.length);
if (goodsArr && goodsArr.length == 1 && goodsArr[0].available == 1) { if (goodsArr && goodsArr.length == 1 && goodsArr[0].available == 1) {
@ -436,6 +431,7 @@
req.axiosPost('/key/products', data).then(res => { req.axiosPost('/key/products', data).then(res => {
if (res.code == 200) { if (res.code == 200) {
self.swiperDataList = res.data; self.swiperDataList = res.data;
sessionStorage.setItem('goodsCollection', JSON.stringify(res.data));
sessionStorage.setItem('goodsCount', res.data.length); sessionStorage.setItem('goodsCount', res.data.length);
self.goodsShow = res.data.length > 1; self.goodsShow = res.data.length > 1;
if (res.data && res.data.length == 1) {//单个商品直接进入详情页面 if (res.data && res.data.length == 1) {//单个商品直接进入详情页面
@ -526,6 +522,10 @@
if (this.viewConfig.jumpType === '1') { if (this.viewConfig.jumpType === '1') {
window.location.href = this.viewConfig.jumpUrl window.location.href = this.viewConfig.jumpUrl
} }
},
//搜索
searchFn(){
window.location.href = './searchPage.html'
} }
} }
}) })

87
v1_5_0_C/searchPage.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
<title>权益兑换页</title>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/css/searchPage.css">
</head>
<body>
<div id="searchPage">
<div class="search">
<div class="search-ipt">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/search.png" alt="" class="search-icon">
<input type="text" class="ipt" v-model="wordSearch" placeholder="请输入关键字搜索" maxlength="12" ref="ipt">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/cance.png" alt="" class="close-icon" @click="clearFn">
</div>
<span class="cancel" @click="history.go(-1)">取消</span>
</div>
<h4>搜索结果</h4>
<ul class="search-result" v-if="searchResult.length>0">
<li v-for="(item,index) in searchResult" :class="item.stock&&item.stock<0||item.available!=1&&item.available!=2?'changegray':''" @click="exchangeBtn(item)">
<img :src="item.type==1?item.entity.show_url:(item.entity.channel==1?'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/zfbreduce.png':'https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/wxreduce.png')" alt="" class="good-pic">
<span>{{item.type==1?item.entity.product_name:item.entity.batch_goods_name}}</span>
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png" alt="" class="next-icon">
</li>
</ul>
<img src="http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/saleNull.png" alt="" class="empty-record" v-else>
</div>
</body>
<script>
let goodsCollection=[];
new Vue({
el: '#searchPage',
data () {
return {
wordSearch:'',
searchResult:[]
}
},
created () {
goodsCollection=JSON.parse(sessionStorage.getItem('goodsCollection'));
this.searchResult=goodsCollection;
},
mounted () {
this.$refs.ipt.focus()
},
methods: {
clearFn(){
this.wordSearch='';
},
exchangeBtn (row) {
let gstatus = row.available;
if (gstatus == 1) {
// 跳转商品详情页面
if (this.showType == 1) { //白名单
sessionStorage.setItem('token', row.token);
sessionStorage.setItem('key', row.key);
}
sessionStorage.setItem('goodsInfo', JSON.stringify(row));
//type :1 兑换码 2:立减金
window.location.replace("./exchange.html");
}
},
},
watch: {
wordSearch(val){
let filterGoods=[];
goodsCollection.forEach(item=>{
if(item.type==1){ //1兑换码 2立减金
if(item.entity.product_name.includes(val)) filterGoods.push(item);
}
if(item.type==2){ //1兑换码 2立减金
if(item.entity.batch_goods_name.includes(val)) filterGoods.push(item);
}
});
this.searchResult=filterGoods;
}
}
});
</script>
</html>