mobileclient/营销系统C端 2.0 正式环境/coupon/searchPage.html

94 lines
3.9 KiB
HTML
Raw Normal View History

2022-11-18 18:16:12 +08:00
<!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&&item.available!=22?'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(localStorage.getItem('goodsCollection'));
this.searchResult = goodsCollection;
},
mounted () {
this.$refs.ipt.focus()
},
methods: {
clearFn () {
this.wordSearch = '';
},
exchangeBtn (row) {
let gstatus = row.available;
if (gstatus == 1||gstatus == 22) {
// 跳转商品详情页面
if (this.showType == 1) { //白名单
localStorage.setItem('token', row.token);
localStorage.setItem('key', row.key);
}
localStorage.setItem('goodsInfo', JSON.stringify(row));
//type :1 兑换码 2:立减金
window.location.replace("./details.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>