代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet/less" href="./less/reset.less">
<link rel="stylesheet/less" href="./less//index.less">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<title></title>
</head>
<body>
<div id="app">
<div class="main">
<div class="login-top">
<header class="title">
<ul>
<li></li>
<li>柒星社区</li>
<li>
<a href="./mine.html">
<img src="./img/mine.png">
</a>
</li>
</ul>
</header>
</div>
<div class="scroll">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img :src="carousel[0]"/>
</div>
<div class="carousel-item">
<img :src="carousel[1]">
</div>
</div>
</div>
<ul class="tabbar">
<li v-for="(item,index) in tabbar" @click="tabb(index,item.gtId)" :class="index==isActive?'tabbarSelect':'tabbarDefault'">{{item.gtName}}</li>
</ul>
<ul class="sorting">
<li v-for="(item,index) in sorting" @click="sortMethod(index)">
<ul>
<li>{{item.name}}</li>
<img :src="item.img" class="arrow">
</ul>
</li>
</ul>
<div class="content" v-for="(item,index) in content" @click="spellDeals(item.goodsId,item.goodsImage,item.goodsName,item.buyingPrice,item.spec,item.gtId)">
<img :src="item.goodsImage">
<ul>
<li>{{item.goodsName}}</li>
<li>销量：{{item.salenum}}</li>
<li>
<ul>
<li>￥{{item.buyingPrice}}</li>
<li>原价：￥{{item.price}}</li>
</ul>
</li>
<li>未拼到获{{item.subsidy}}元补贴</li>
<li>
<ul>
<li>差{{item.fewPeople}}人拼团</li>
<li>立即拼购</li>
</ul>
</li>
</ul>
</div>
<aside class="aside">已经到底了~</aside>
</div>
<div v-if="sortStatus">
<div class="weui-mask" @click="cancelSort"></div>
<div :class="[sortIndex==0?'comprehensiveSort':'priceSort','weui-actionsheet']">
<div class="weui-actionsheet__title">
<p class="weui-actionsheet__title-text">{{sortName}}</p>
</div>
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell" v-for="(item,index) in sortMenu" @click="sortWay(index)">{{item.name}}</div>
</div>
<div class="weui-actionsheet__action" @click="cancelSort">
<div class="weui-actionsheet__cell" >取消</div>
</div>
</div>
</div>
<div id="loadingToast" v-if="loadingStatus">
<div class="weui-mask"></div>
<div class="weui-toast">
<span class="weui-primary-loading weui-icon_toast">
<span class="weui-primary-loading__dot"></span>
</span>
<p class="weui-toast__content">加载中</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="module">
import {swiper, control, goodsList} from './js/request/api.js';
import { shareLink } from './js/public.js';
Vue.prototype.public = {shareLink};
let app = new Vue({
el: '#app',
data: {
carousel: [],
tabbar: [],
isActive: 0,
sorting:[
{
name: '综合排序',
img: './img/arrow.png'
},
{
name: '价格排序',
img: './img/arrow.png'
}
],
content:[],
sortName: '',
sortStatus: false,
sortMenu: [],
sortIndex: 0,
gtIdIndex: null,
loadingStatus: false
},
created(){
let that = this;
that.swiper();
that.control();
that.goodsList(1,null,null,null);
},
mounted(){
let that = this;
that.public.shareLink();
},
methods:{
tabb(index,gtld){
let that = this;
that.isActive = index;
that.gtIdIndex = gtld;
that.goodsList(gtld,null,null,null);
},
sortMethod(index){
let that = this;
that.sortIndex = index;
if(index == 0){
that.sortName = '综合排序';
that.sortMenu = [
{
name: '按最热开团'
},
{
name: '按成团数从高到底'
},
{
name: '按成团数从低到高'
}
];
that.sortStatus = true;
}else{
that.sortName = '价格排序';
that.sortMenu = [
{
name: '按成交价从高到底'
},
{
name: '按成交价从低到高'
}
];
that.sortStatus = true;
}
},
cancelSort(){
let that = this;
that.sortStatus = false;
},
sortWay(index){
let that = this;
if(that.sortIndex == 0){
if(index == 0){
that.goodsList(that.gtIdIndex,null,1,null);
that.cancelSort();
}else if(index == 1){
that.goodsList(that.gtIdIndex,null,null,0);
that.cancelSort();
}else if(index == 2){
that.goodsList(that.gtIdIndex,null,null,1);
that.cancelSort();
}
}else if(that.sortIndex == 1){
if(index == 0){
that.goodsList(that.gtIdIndex,0,null,null);
that.cancelSort();
}else if(index == 1){
that.goodsList(that.gtIdIndex,1,null,null);
that.cancelSort();
}
}
},
spellDeals(goodsId,goodsImage,goodsName,buyingPrice,spec,gtId){
let url = "./spellDeals.html?goodsId="+goodsId+"&goodsImage="+goodsImage+"&goodsName="+goodsName+"&buyingPrice="+buyingPrice+"&spec="+spec+">Id="+gtId;
window.location.href = url;
},
swiper(){
let that = this;
swiper({
showIndex:16
}).then(res=>{
that.carousel.push(res.data[0].icon);
that.carousel.push(res.data[1].icon);
}).catch(error=>{
console.log(error);
})
},
control(){
let that = this;
control().then(res=>{
res.data.push({gtId:5,gtName:'新人专区'});
that.tabbar = res.data;
}).catch(error=>{
console.log(error);
})
},
goodsList(gtld,price,heat,team){
let that = this;
goodsList({
page: '1',
rows: '20',
gtId: gtld,
price: price?price:null,
heat: heat?heat:null,
team: team?team:null
}).then(res=>{
that.loadingStatus = true;
if(res.code == 0){
that.content = res.data.goodsCorpsList;
setTimeout(()=>{
that.loadingStatus = false;
},2000)
}
}).catch(error=>{
})
},
}
})
</script>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
