Gao xiaosong
5 years ago
9 changed files with 1230 additions and 1299 deletions
@ -1,223 +1,201 @@
|
||||
<template> |
||||
<view class="flash-sale" ref="container"> |
||||
<view class="header" v-if="headerImg"> |
||||
<image :src="headerImg" /> |
||||
</view> |
||||
<vant-tabs |
||||
:active="active" |
||||
@change="setTime" |
||||
:sticky="sticky" |
||||
animated |
||||
line-height="2" |
||||
:ellipsis="false" |
||||
> |
||||
<vant-tab |
||||
:ellipsis="false" |
||||
:title="[title[index]]" |
||||
v-for="(item, index) in timeList" |
||||
:key="index" |
||||
> |
||||
<view slot="title" class="timeItem"> |
||||
<view class="time">{{ item.time }}</view> |
||||
<view class="state">{{ item.state }}</view> |
||||
</view> |
||||
<view class="countDown font-color-red acea-row row-center-wrapper"> |
||||
<view v-if="item.status === 0" class="activity">活动已结束</view> |
||||
<count-down |
||||
:is-day="false" |
||||
:tip-text="'距结束仅剩 '" |
||||
:day-text="''" |
||||
:hour-text="' : '" |
||||
:minute-text="' : '" |
||||
:second-text="''" |
||||
:datatime="datatime" |
||||
v-if="item.status === 1" |
||||
></count-down> |
||||
<view v-if="item.status === 2" class="activity">活动即将开始</view> |
||||
</view> |
||||
<view class="list"> |
||||
<view |
||||
class="item acea-row row-between-wrapper" |
||||
v-for="(itemSeckill, indexSeckill) in seckillList" |
||||
:key="indexSeckill" |
||||
> |
||||
<view class="pictrue"> |
||||
<image :src="itemSeckill.image" /> |
||||
</view> |
||||
<view class="text acea-row row-column-around"> |
||||
<view class="line1" v-text="itemSeckill.title"></view> |
||||
<view class="money"> |
||||
限时价 |
||||
<text class="num font-color-red" v-text="'￥' + itemSeckill.price"></text> |
||||
</view> |
||||
<view class="progress cart-color"> |
||||
<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view> |
||||
<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="grab bg-color-red" |
||||
v-if="item.status === 1 && itemSeckill.stock > 0" |
||||
@click="goDetail(itemSeckill.id)" |
||||
>马上抢</view> |
||||
<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 0">已结束</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="noCommodity" |
||||
style="background-color: #fff;" |
||||
v-if="seckillList.length === 0 && page > 1" |
||||
> |
||||
<view class="noPictrue"> |
||||
<image :src="$VUE_APP_RESOURCES_URL+'/images/noGood.png'" class="image" /> |
||||
</view> |
||||
</view> |
||||
</vant-tab> |
||||
</vant-tabs> |
||||
</view> |
||||
<view class="flash-sale" ref="container"> |
||||
<view class="header" v-if="headerImg"><image :src="headerImg" /></view> |
||||
<view class="" v-for="(item, index) in timeList" :key="index"> |
||||
<view class="timeItem"> |
||||
<view class="time">{{ item.time }}</view> |
||||
<view class="state">{{ item.state }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="" v-for="(item, index) in timeList" :key="index"> |
||||
<view v-if="active == index"> |
||||
<view class="countDown font-color-red acea-row row-center-wrapper"> |
||||
<view v-if="item.status === 0" class="activity">活动已结束</view> |
||||
<count-down |
||||
:is-day="false" |
||||
:tip-text="'距结束仅剩 '" |
||||
:day-text="''" |
||||
:hour-text="' : '" |
||||
:minute-text="' : '" |
||||
:second-text="''" |
||||
:datatime="datatime" |
||||
v-if="item.status === 1" |
||||
></count-down> |
||||
<view v-if="item.status === 2" class="activity">活动即将开始</view> |
||||
</view> |
||||
<view class="list"> |
||||
<view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList" :key="indexSeckill"> |
||||
<view class="pictrue"><image :src="itemSeckill.image" /></view> |
||||
<view class="text acea-row row-column-around"> |
||||
<view class="line1" v-text="itemSeckill.title"></view> |
||||
<view class="money"> |
||||
限时价 |
||||
<text class="num font-color-red" v-text="'￥' + itemSeckill.price"></text> |
||||
</view> |
||||
<view class="progress cart-color"> |
||||
<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view> |
||||
<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view> |
||||
</view> |
||||
</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0" @click="goDetail(itemSeckill.id)">马上抢</view> |
||||
<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view> |
||||
<view class="grab bg-color-red" v-if="item.status === 0">已结束</view> |
||||
</view> |
||||
</view> |
||||
<view class="noCommodity" style="background-color: #fff;" v-if="seckillList.length === 0 && page > 1"> |
||||
<view class="noPictrue"><image :src="$VUE_APP_RESOURCES_URL + '/images/noGood.png'" class="image" /></view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- |
||||
<vant-tabs :active="active" @change="setTime" :sticky="sticky" animated line-height="2" :ellipsis="false"> |
||||
<vant-tab :ellipsis="false" :title="[title[index]]"> |
||||
|
||||
</vant-tab> |
||||
</vant-tabs> --> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import { getSeckillConfig, getSeckillList } from "@/api/activity"; |
||||
import CountDown from "@/components/CountDown"; |
||||
import { getSeckillConfig, getSeckillList } from '@/api/activity'; |
||||
import CountDown from '@/components/CountDown'; |
||||
// import { Tab, Tabs } from "vant-weapp"; |
||||
import Loading from "@/components/Loading"; |
||||
import Loading from '@/components/Loading'; |
||||
|
||||
export default { |
||||
name: "GoodsSeckill", |
||||
components: { |
||||
CountDown |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
headerImg: "", |
||||
timeList: [], |
||||
sticky: false, |
||||
loading: false, |
||||
datatime: 0, |
||||
active: 0, |
||||
seckillList: [], |
||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
||||
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成 |
||||
page: 1, //页码 |
||||
limit: 5, //数量 |
||||
title: [] |
||||
}; |
||||
}, |
||||
mounted: function() { |
||||
this.mountedStart(); |
||||
}, |
||||
onReachBottom() { |
||||
!this.loadingList && this.getSeckillList(); |
||||
}, |
||||
methods: { |
||||
mountedStart: function() { |
||||
var that = this; |
||||
uni.showLoading(); |
||||
getSeckillConfig().then(res => { |
||||
that.$set(that, "headerImg", res.data.lovely); |
||||
that.$set(that, "timeList", res.data.seckillTime); |
||||
that.$set(that, "active", res.data.seckillTimeIndex); |
||||
name: 'GoodsSeckill', |
||||
components: { |
||||
CountDown |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
headerImg: '', |
||||
timeList: [], |
||||
sticky: false, |
||||
loading: false, |
||||
datatime: 0, |
||||
active: 0, |
||||
seckillList: [], |
||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
||||
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成 |
||||
page: 1, //页码 |
||||
limit: 5, //数量 |
||||
title: [] |
||||
}; |
||||
}, |
||||
mounted: function() { |
||||
this.mountedStart(); |
||||
}, |
||||
onReachBottom() { |
||||
!this.loadingList && this.getSeckillList(); |
||||
}, |
||||
methods: { |
||||
mountedStart: function() { |
||||
var that = this; |
||||
uni.showLoading(); |
||||
getSeckillConfig().then(res => { |
||||
that.$set(that, 'headerImg', res.data.lovely); |
||||
that.$set(that, 'timeList', res.data.seckillTime); |
||||
that.$set(that, 'active', res.data.seckillTimeIndex); |
||||
|
||||
let title = []; |
||||
title = res.data.seckillTime.map((item, index) => { |
||||
return { |
||||
name: "div", |
||||
attrs: { |
||||
class: "timeItem" |
||||
}, |
||||
children: [ |
||||
{ |
||||
name: "div", |
||||
attrs: { |
||||
class: "time" |
||||
}, |
||||
children: [ |
||||
{ |
||||
type: "text", |
||||
text: item.time |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
name: "div", |
||||
attrs: { |
||||
class: "state" |
||||
}, |
||||
children: [ |
||||
{ |
||||
type: "text", |
||||
text: item.state |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}; |
||||
}); |
||||
that.$set(that, "title", title); |
||||
that.datatime = that.timeList[that.active].stop; |
||||
that.getSeckillList(); |
||||
that.$nextTick(function() { |
||||
that.sticky = true; |
||||
uni.hideLoading(); |
||||
}); |
||||
}); |
||||
}, |
||||
setTime: function(event) { |
||||
var that = this; |
||||
that.active = event.mp.detail.index; |
||||
that.datatime = that.timeList[that.active].stop; |
||||
that.getSeckillList(); |
||||
}, |
||||
getSeckillList: function() { |
||||
var that = this; |
||||
if (that.loadingList) return; |
||||
if (that.status) return; |
||||
var time = that.timeList[that.active].id; |
||||
getSeckillList(time, { page: that.page, limit: that.limit }).then(res => { |
||||
that.status = res.data.length < that.limit; |
||||
that.seckillList.push.apply(that.seckillList, res.data); |
||||
that.page++; |
||||
uni.hideLoading(); |
||||
}); |
||||
}, |
||||
goDetail: function(id) { |
||||
var that = this; |
||||
var time = that.timeList[that.active].stop; |
||||
this.$yrouter.push({ |
||||
path: "/pages/activity/SeckillDetails/index", |
||||
query: { id, time } |
||||
}); |
||||
} |
||||
} |
||||
let title = []; |
||||
title = res.data.seckillTime.map((item, index) => { |
||||
return { |
||||
name: 'div', |
||||
attrs: { |
||||
class: 'timeItem' |
||||
}, |
||||
children: [ |
||||
{ |
||||
name: 'div', |
||||
attrs: { |
||||
class: 'time' |
||||
}, |
||||
children: [ |
||||
{ |
||||
type: 'text', |
||||
text: item.time |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
name: 'div', |
||||
attrs: { |
||||
class: 'state' |
||||
}, |
||||
children: [ |
||||
{ |
||||
type: 'text', |
||||
text: item.state |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}; |
||||
}); |
||||
that.$set(that, 'title', title); |
||||
that.datatime = that.timeList[that.active].stop; |
||||
that.getSeckillList(); |
||||
that.$nextTick(function() { |
||||
that.sticky = true; |
||||
uni.hideLoading(); |
||||
}); |
||||
}); |
||||
}, |
||||
setTime: function(event) { |
||||
var that = this; |
||||
that.active = event.mp.detail.index; |
||||
that.datatime = that.timeList[that.active].stop; |
||||
that.getSeckillList(); |
||||
}, |
||||
getSeckillList: function() { |
||||
var that = this; |
||||
if (that.loadingList) return; |
||||
if (that.status) return; |
||||
var time = that.timeList[that.active].id; |
||||
getSeckillList(time, { page: that.page, limit: that.limit }).then(res => { |
||||
that.status = res.data.length < that.limit; |
||||
that.seckillList.push.apply(that.seckillList, res.data); |
||||
that.page++; |
||||
uni.hideLoading(); |
||||
}); |
||||
}, |
||||
goDetail: function(id) { |
||||
var that = this; |
||||
var time = that.timeList[that.active].stop; |
||||
this.$yrouter.push({ |
||||
path: '/pages/activity/SeckillDetails/index', |
||||
query: { id, time } |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style scoped lang="less"> |
||||
.timeItem { |
||||
font-size: 0.22*100rpx; |
||||
color: #282828; |
||||
width: 100%; |
||||
text-align: center; |
||||
padding: 0.11*100rpx 0; |
||||
height: 0.96*100rpx; |
||||
background-color: #efc58f; |
||||
font-size: 0.22 * 100rpx; |
||||
color: #282828; |
||||
width: 100%; |
||||
text-align: center; |
||||
padding: 0.11 * 100rpx 0; |
||||
height: 0.96 * 100rpx; |
||||
background-color: #efc58f; |
||||
} |
||||
.timeItem .time { |
||||
font-size: 0.32*100rpx; |
||||
font-weight: bold; |
||||
height: 0.37*100rpx; |
||||
line-height: 0.37*100rpx; |
||||
font-size: 0.32 * 100rpx; |
||||
font-weight: bold; |
||||
height: 0.37 * 100rpx; |
||||
line-height: 0.37 * 100rpx; |
||||
} |
||||
.timeItem .state { |
||||
height: 0.37*100rpx; |
||||
line-height: 0.37*100rpx; |
||||
height: 0.37 * 100rpx; |
||||
line-height: 0.37 * 100rpx; |
||||
} |
||||
.activity { |
||||
color: #333; |
||||
color: #333; |
||||
} |
||||
.flash-sale .list .item .grab { |
||||
background-color: #999; |
||||
background-color: #999; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,214 +1,209 @@
|
||||
<template> |
||||
<view class="container"> |
||||
<view v-if="!$store.getters.token&&$deviceType=='weixin'"> |
||||
<view class="getUserInfo"> |
||||
<text>您还未允许微信登录授权，请点击下方按钮允许微信授权登录。</text> |
||||
<button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">允许微信登录授权</button> |
||||
<view style="height:20rpx"></view> |
||||
<button @click="back">取消微信登录授权</button> |
||||
<view v-if="!token"> |
||||
<view v-if="$deviceType == 'weixin'"> |
||||
<view class="getUserInfo"> |
||||
<text>您还未允许微信登录授权，请点击下方按钮允许微信授权登录。</text> |
||||
<button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">允许微信登录授权</button> |
||||
<view style="height:20rpx"></view> |
||||
<button @click="back">取消微信登录授权</button> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view v-if="!$store.getters.token&&$deviceType!='weixin'&&$deviceType=='app'"> |
||||
<view class="getUserInfo"> |
||||
<text>请先登录</text> |
||||
<button type="primary" @click="this.toLogin">去登录</button> |
||||
<view v-if="$deviceType == 'app'"> |
||||
<view class="getUserInfo"> |
||||
<text>请先登录</text> |
||||
<button type="primary" @click="this.toLogin">去登录</button> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
mapState, |
||||
mapMutations, |
||||
mapActions |
||||
} from "vuex"; |
||||
// 组件 |
||||
// import request from "@//api/request"; |
||||
import { |
||||
wxappAuth, |
||||
getUser |
||||
} from "@/api/user"; |
||||
import dayjs from "dayjs"; |
||||
import cookie from "@/utils/store/cookie"; |
||||
import { |
||||
login |
||||
} from "@/utils"; |
||||
|
||||
export default { |
||||
data() { |
||||
return {}; |
||||
}, |
||||
computed: { |
||||
...mapState(["isAuthorization"]) |
||||
}, |
||||
onShow() { |
||||
|
||||
this.UPDATE_AUTHORIZATIONPAGE(true); |
||||
}, |
||||
onHide() { |
||||
this.UPDATE_AUTHORIZATIONPAGE(false); |
||||
this.changeAuthorization(false); |
||||
}, |
||||
onUnload() { |
||||
this.UPDATE_AUTHORIZATIONPAGE(false); |
||||
this.changeAuthorization(false); |
||||
import { mapState, mapMutations, mapActions } from 'vuex'; |
||||
// 组件 |
||||
// import request from "@//api/request"; |
||||
import { wxappAuth, getUser } from '@/api/user'; |
||||
import dayjs from 'dayjs'; |
||||
import cookie from '@/utils/store/cookie'; |
||||
import { login } from '@/utils'; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState(['isAuthorization','$deviceType','token']) |
||||
}, |
||||
onShow() { |
||||
this.UPDATE_AUTHORIZATIONPAGE(true); |
||||
}, |
||||
onHide() { |
||||
this.UPDATE_AUTHORIZATIONPAGE(false); |
||||
this.changeAuthorization(false); |
||||
}, |
||||
onUnload() { |
||||
this.UPDATE_AUTHORIZATIONPAGE(false); |
||||
this.changeAuthorization(false); |
||||
}, |
||||
methods: { |
||||
...mapActions(['changeAuthorization', 'setUserInfo']), |
||||
...mapMutations(['UPDATE_AUTHORIZATIONPAGE', 'CHANGE_TABTAR']), |
||||
back() { |
||||
this.$yrouter.switchTab({ |
||||
path: '/pages/home/index', |
||||
query: {} |
||||
}); |
||||
}, |
||||
methods: { |
||||
...mapActions(["changeAuthorization", "setUserInfo"]), |
||||
...mapMutations(["UPDATE_AUTHORIZATIONPAGE", "CHANGE_TABTAR"]), |
||||
back() { |
||||
this.$yrouter.switchTab({ |
||||
path: "/pages/home/index", |
||||
query: {} |
||||
}); |
||||
}, |
||||
getUserInfo(data) { |
||||
if (data.detail.errMsg == "getUserInfo:fail auth deny") { |
||||
uni.showToast({ |
||||
title: "取消授权", |
||||
icon: "none", |
||||
duration: 2000 |
||||
}); |
||||
return; |
||||
} |
||||
uni.showLoading({ |
||||
title: "登录中" |
||||
}); |
||||
login({ |
||||
success: () => {} |
||||
}); |
||||
}, |
||||
toLogin() { |
||||
this.$yrouter.push({ |
||||
path: "/pages/user/Login/index", |
||||
query: {} |
||||
getUserInfo(data) { |
||||
if (data.detail.errMsg == 'getUserInfo:fail auth deny') { |
||||
uni.showToast({ |
||||
title: '取消授权', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}); |
||||
return; |
||||
} |
||||
uni.showLoading({ |
||||
title: '登录中' |
||||
}); |
||||
login({ |
||||
success: () => {} |
||||
}); |
||||
}, |
||||
onUnload() {}, |
||||
mounted() {} |
||||
}; |
||||
toLogin() { |
||||
this.$yrouter.push({ |
||||
path: '/pages/user/Login/index', |
||||
query: {} |
||||
}); |
||||
} |
||||
}, |
||||
onUnload() {}, |
||||
mounted() { |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.sp-cell { |
||||
height: 20rpx; |
||||
.sp-cell { |
||||
height: 20rpx; |
||||
} |
||||
|
||||
.getUserInfo { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
padding: 30px; |
||||
|
||||
text { |
||||
font-size: 30rpx; |
||||
text-align: center; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.getUserInfo { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
padding: 30px; |
||||
|
||||
text { |
||||
font-size: 30rpx; |
||||
text-align: center; |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
|
||||
.container { |
||||
} |
||||
|
||||
.container { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
position: relative; |
||||
} |
||||
|
||||
.tab-bar { |
||||
font-size: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
background: rgba(255, 255, 255, 0.9); |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
z-index: 99; |
||||
border-top: 1px solid rgba(248, 248, 248, 1); |
||||
|
||||
.tab-bar-item { |
||||
flex: 1; |
||||
height: 49px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
position: relative; |
||||
} |
||||
|
||||
.tab-bar { |
||||
font-size: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background: rgba(255, 255, 255, 0.9); |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
z-index: 99; |
||||
border-top: 1px solid rgba(248, 248, 248, 1); |
||||
|
||||
.tab-bar-item { |
||||
flex: 1; |
||||
height: 49px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
|
||||
&.active { |
||||
text { |
||||
color: #ee7559; |
||||
} |
||||
|
||||
.tab-bar-pic { |
||||
display: none; |
||||
background: #f9f9f9; |
||||
flex-direction: column; |
||||
|
||||
&.active { |
||||
display: block; |
||||
} |
||||
} |
||||
&.active { |
||||
text { |
||||
color: #ee7559; |
||||
} |
||||
|
||||
.tab-bar-pic { |
||||
display: block; |
||||
display: none; |
||||
background: #f9f9f9; |
||||
|
||||
&.active { |
||||
display: none; |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tab-bar-pic { |
||||
width: 25px; |
||||
height: 25px; |
||||
display: block; |
||||
background: #f9f9f9; |
||||
|
||||
image { |
||||
width: 25px; |
||||
height: 25px; |
||||
&.active { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tab-bar-pic-active {} |
||||
.tab-bar-pic { |
||||
width: 25px; |
||||
height: 25px; |
||||
background: #f9f9f9; |
||||
|
||||
text { |
||||
font-size: 10px; |
||||
color: rgb(160, 160, 160); |
||||
line-height: 10px; |
||||
margin-top: 5px; |
||||
image { |
||||
width: 25px; |
||||
height: 25px; |
||||
} |
||||
} |
||||
|
||||
.tab-bar-bg { |
||||
padding-top: 46px; |
||||
width: 100%; |
||||
.tab-bar-pic-active { |
||||
} |
||||
|
||||
.view-item { |
||||
display: none; |
||||
width: 100%; |
||||
text { |
||||
font-size: 10px; |
||||
color: rgb(160, 160, 160); |
||||
line-height: 10px; |
||||
margin-top: 5px; |
||||
} |
||||
|
||||
.view-item-active { |
||||
display: block; |
||||
} |
||||
|
||||
.tab-bar-bg { |
||||
padding-top: 46px; |
||||
width: 100%; |
||||
} |
||||
|
||||
.view-item { |
||||
display: none; |
||||
width: 100%; |
||||
} |
||||
|
||||
.view-item-active { |
||||
display: block; |
||||
} |
||||
|
||||
.getUserInfo { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
padding: 30px; |
||||
|
||||
p { |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
|
||||
.getUserInfo { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
padding: 30px; |
||||
|
||||
p { |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
|
||||
._van-dialog { |
||||
z-index: 99999999999; |
||||
} |
||||
._van-dialog { |
||||
z-index: 99999999999; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,313 +1,269 @@
|
||||
<template> |
||||
<view class="index"> |
||||
<view class="header acea-row row-center-wrapper"> |
||||
<view @click="goGoodSearch()" class="search acea-row row-middle"> |
||||
<text class="iconfont icon-xiazai5"></text>搜索商品 |
||||
</view> |
||||
</view> |
||||
<view class="slider-banner banner"> |
||||
<swiper indicatorDots="true" v-if="banner.length > 0"> |
||||
<block v-for="(item, bannerIndex) in banner" :key="bannerIndex"> |
||||
<swiper-item> |
||||
<view @click="item.url?$yrouter.push('/'+item.url) : ''" class="swiper-item"> |
||||
<image :src="item.pic" /> |
||||
</view> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
</view> |
||||
<view class="news acea-row row-between-wrapper"> |
||||
<view class="pictrue" v-if="$VUE_APP_RESOURCES_URL"> |
||||
<image :src="$VUE_APP_RESOURCES_URL+'/images/news.png'" /> |
||||
</view> |
||||
<view class="swiper-no-swiping new-banner"> |
||||
<swiper |
||||
class="swiper-wrapper" |
||||
v-if="roll.length > 0" |
||||
:indicator-dots="false" |
||||
autoplay |
||||
circular |
||||
vertical |
||||
> |
||||
<block v-for="(item, rollIndex) in roll" :key="rollIndex"> |
||||
<swiper-item class="swiper-slide"> |
||||
<view |
||||
@click="item.uniapp_url?$yrouter.push(item.uniapp_url) : ''" |
||||
class="swiper-item acea-row row-between-wrapper" |
||||
> |
||||
<view class="text acea-row row-between-wrapper"> |
||||
<view class="label" v-if="item.show === '是'">最新</view> |
||||
<view class="newsTitle line1">{{ item.info }}</view> |
||||
</view> |
||||
<view class="iconfont icon-xiangyou"></view> |
||||
</view> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
</view> |
||||
</view> |
||||
<view class="nav acea-row"> |
||||
<view |
||||
@click="goWxappUrl(item)" |
||||
class="item" |
||||
v-for="(item, menusIndex) in menus" |
||||
:key="menusIndex" |
||||
> |
||||
<view class="pictrue"> |
||||
<image :src="item.pic" /> |
||||
</view> |
||||
<view>{{ item.name }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="wrapper hot" v-if="bastList.length > 0"> |
||||
<image class="bg" src="../../static/images/index-bg.png" mode="widthFix" ></image> |
||||
<view class="title acea-row row-between-wrapper"> |
||||
<view class="text"> |
||||
<view class="name line1">热门榜单</view> |
||||
</view> |
||||
<view @click="goHotNewGoods()" class="more"> |
||||
更多 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
</view> |
||||
</view> |
||||
<view class="newProducts"> |
||||
<scroll-view scroll-y="false" scroll-x="true"> |
||||
<view class="newProductsScroll"> |
||||
<view |
||||
@click="goGoodsCon(item)" |
||||
class="newProductsItem" |
||||
v-for="(item, likeInfoIndex) in likeInfo" |
||||
:key="likeInfoIndex" |
||||
> |
||||
<view class="img-box"> |
||||
<image :src="item.image" /> |
||||
</view> |
||||
<view class="pro-info line1">{{ item.storeName }}</view> |
||||
<view class="money font-color-red">￥{{ item.price }}</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
</view> |
||||
<view class="wrapper" v-if="bastList.length > 0"> |
||||
<view class="title acea-row row-between-wrapper"> |
||||
<view class="text"> |
||||
<view class="name line1">精品推荐</view> |
||||
</view> |
||||
<view @click="goHotNewGoods(1)" class="more"> |
||||
更多 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
</view> |
||||
</view> |
||||
<Good-list :good-list="bastList" :is-sort="false"></Good-list> |
||||
</view> |
||||
<view class="index"> |
||||
<view class="header acea-row row-center-wrapper"> |
||||
<view @click="goGoodSearch()" class="search acea-row row-middle"> |
||||
<text class="iconfont icon-xiazai5"></text> |
||||
搜索商品 |
||||
</view> |
||||
</view> |
||||
<view class="slider-banner banner"> |
||||
<swiper indicatorDots="true" v-if="banner.length > 0"> |
||||
<block v-for="(item, bannerIndex) in banner" :key="bannerIndex"> |
||||
<swiper-item> |
||||
<view @click="item.url ? $yrouter.push('/' + item.url) : ''" class="swiper-item"><image :src="item.pic" /></view> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
</view> |
||||
<view class="news acea-row row-between-wrapper"> |
||||
<view class="pictrue" v-if="$VUE_APP_RESOURCES_URL"><image :src="$VUE_APP_RESOURCES_URL + '/images/news.png'" /></view> |
||||
<view class="swiper-no-swiping new-banner"> |
||||
<swiper class="swiper-wrapper" v-if="roll.length > 0" :indicator-dots="false" autoplay circular vertical> |
||||
<block v-for="(item, rollIndex) in roll" :key="rollIndex"> |
||||
<swiper-item class="swiper-slide"> |
||||
<view @click="item.uniapp_url ? $yrouter.push(item.uniapp_url) : ''" class="swiper-item acea-row row-between-wrapper"> |
||||
<view class="text acea-row row-between-wrapper"> |
||||
<view class="label" v-if="item.show === '是'">最新</view> |
||||
<view class="newsTitle line1">{{ item.info }}</view> |
||||
</view> |
||||
<view class="iconfont icon-xiangyou"></view> |
||||
</view> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
</view> |
||||
</view> |
||||
<view class="nav acea-row"> |
||||
<view @click="goWxappUrl(item)" class="item" v-for="(item, menusIndex) in menus" :key="menusIndex"> |
||||
<view class="pictrue"><image :src="item.pic" /></view> |
||||
<view>{{ item.name }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="wrapper hot" v-if="bastList.length > 0"> |
||||
<image class="bg" src="../../static/images/index-bg.png" mode="widthFix"></image> |
||||
<view class="title acea-row row-between-wrapper"> |
||||
<view class="text"><view class="name line1">热门榜单</view></view> |
||||
<view @click="goHotNewGoods()" class="more"> |
||||
更多 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
</view> |
||||
</view> |
||||
<view class="newProducts"> |
||||
<scroll-view scroll-y="false" scroll-x="true"> |
||||
<view class="newProductsScroll"> |
||||
<view @click="goGoodsCon(item)" class="newProductsItem" v-for="(item, likeInfoIndex) in likeInfo" :key="likeInfoIndex"> |
||||
<view class="img-box"><image :src="item.image" /></view> |
||||
<view class="pro-info line1">{{ item.storeName }}</view> |
||||
<view class="money font-color-red">￥{{ item.price }}</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
</view> |
||||
<view class="wrapper" v-if="bastList.length > 0"> |
||||
<view class="title acea-row row-between-wrapper"> |
||||
<view class="text"><view class="name line1">精品推荐</view></view> |
||||
<view @click="goHotNewGoods(1)" class="more"> |
||||
更多 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
</view> |
||||
</view> |
||||
<Good-list :good-list="bastList" :is-sort="false"></Good-list> |
||||
</view> |
||||
|
||||
<view class="wrapper" v-if="firstList.length > 0"> |
||||
<view class="title acea-row row-between-wrapper"> |
||||
<view class="text"> |
||||
<view class="name line1"> |
||||
首发新品 |
||||
<text class="new font-color-red">NEW~</text> |
||||
</view> |
||||
</view> |
||||
<view @click="goHotNewGoods(3)" class="more"> |
||||
更多 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
</view> |
||||
</view> |
||||
<view class="newProducts"> |
||||
<scroll-view scroll-y="false" scroll-x="true"> |
||||
<view class="newProductsScroll"> |
||||
<view |
||||
@click="goGoodsCon(item)" |
||||
class="newProductsItem" |
||||
v-for="(item, firstListIndex) in firstList" |
||||
:key="firstListIndex" |
||||
> |
||||
<view class="img-box"> |
||||
<image :src="item.image" /> |
||||
</view> |
||||
<view class="pro-info line1">{{ item.storeName }}</view> |
||||
<view class="money font-color-red">￥{{ item.price }}</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
</view> |
||||
<view class="wrapper" v-if="benefit.length > 0"> |
||||
<view class="title acea-row row-between-wrapper"> |
||||
<view class="text"> |
||||
<view class="name line1">促销单品</view> |
||||
</view> |
||||
<view @click="goGoodsPromotion()" class="more"> |
||||
更多 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<PromotionGood :benefit="benefit"></PromotionGood> |
||||
<Coupon-window |
||||
:coupon-list="couponList" |
||||
v-if="showCoupon" |
||||
@checked="couponClose" |
||||
@close="couponClose" |
||||
></Coupon-window> |
||||
</view> |
||||
<view class="wrapper" v-if="firstList.length > 0"> |
||||
<view class="title acea-row row-between-wrapper"> |
||||
<view class="text"> |
||||
<view class="name line1"> |
||||
首发新品 |
||||
<text class="new font-color-red">NEW~</text> |
||||
</view> |
||||
</view> |
||||
<view @click="goHotNewGoods(3)" class="more"> |
||||
更多 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
</view> |
||||
</view> |
||||
<view class="newProducts"> |
||||
<scroll-view scroll-y="false" scroll-x="true"> |
||||
<view class="newProductsScroll"> |
||||
<view @click="goGoodsCon(item)" class="newProductsItem" v-for="(item, firstListIndex) in firstList" :key="firstListIndex"> |
||||
<view class="img-box"><image :src="item.image" /></view> |
||||
<view class="pro-info line1">{{ item.storeName }}</view> |
||||
<view class="money font-color-red">￥{{ item.price }}</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
</view> |
||||
<view class="wrapper" v-if="benefit.length > 0"> |
||||
<view class="title acea-row row-between-wrapper"> |
||||
<view class="text"><view class="name line1">促销单品</view></view> |
||||
<view @click="goGoodsPromotion()" class="more"> |
||||
更多 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<PromotionGood :benefit="benefit"></PromotionGood> |
||||
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"></Coupon-window> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
// import { swiper, swiperSlide } from "vue-awesome-swiper"; |
||||
|
||||
import GoodList from "@/components/GoodList"; |
||||
import PromotionGood from "@/components/PromotionGood"; |
||||
import CouponWindow from "@/components/CouponWindow"; |
||||
import { getHomeData, getShare } from "@/api/public"; |
||||
import cookie from "@/utils/store/cookie"; |
||||
import { isWeixin } from "@/utils/index"; |
||||
import GoodList from '@/components/GoodList'; |
||||
import PromotionGood from '@/components/PromotionGood'; |
||||
import CouponWindow from '@/components/CouponWindow'; |
||||
import { getHomeData, getShare } from '@/api/public'; |
||||
import cookie from '@/utils/store/cookie'; |
||||
import { isWeixin } from '@/utils/index'; |
||||
|
||||
const HAS_COUPON_WINDOW = "has_coupon_window"; |
||||
const HAS_COUPON_WINDOW = 'has_coupon_window'; |
||||
|
||||
export default { |
||||
name: "Index", |
||||
components: { |
||||
// swiper, |
||||
// swiperSlide, |
||||
GoodList, |
||||
PromotionGood, |
||||
CouponWindow |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
showCoupon: false, |
||||
logoUrl: "", |
||||
banner: [], |
||||
menus: [], |
||||
roll: [], |
||||
activity: [], |
||||
activityOne: {}, |
||||
bastList: [], |
||||
firstList: [], |
||||
info: { |
||||
fastList: [], |
||||
bastBanner: [], |
||||
name: 'Index', |
||||
components: { |
||||
// swiper, |
||||
// swiperSlide, |
||||
GoodList, |
||||
PromotionGood, |
||||
CouponWindow |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
showCoupon: false, |
||||
logoUrl: '', |
||||
banner: [], |
||||
menus: [], |
||||
roll: [], |
||||
activity: [], |
||||
activityOne: {}, |
||||
bastList: [], |
||||
firstList: [], |
||||
info: { |
||||
fastList: [], |
||||
bastBanner: [], |
||||
|
||||
bastList: [] |
||||
}, |
||||
likeInfo: [], |
||||
lovely: [], |
||||
benefit: [], |
||||
couponList: [], |
||||
swiperOption: { |
||||
pagination: { |
||||
el: ".swiper-pagination", |
||||
clickable: true |
||||
}, |
||||
autoplay: { |
||||
disableOnInteraction: false, |
||||
delay: 2000 |
||||
}, |
||||
loop: true, |
||||
speed: 1000, |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
swiperRoll: { |
||||
direction: "vertical", |
||||
autoplay: { |
||||
disableOnInteraction: false, |
||||
delay: 2000 |
||||
}, |
||||
loop: true, |
||||
speed: 1000, |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
swiperScroll: { |
||||
freeMode: true, |
||||
freeModeMomentum: false, |
||||
slidesPerView: "auto", |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
swiperBoutique: { |
||||
pagination: { |
||||
el: ".swiper-pagination", |
||||
clickable: true |
||||
}, |
||||
autoplay: { |
||||
disableOnInteraction: false, |
||||
delay: 2000 |
||||
}, |
||||
loop: true, |
||||
speed: 1000, |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
swiperProducts: { |
||||
freeMode: true, |
||||
freeModeMomentum: false, |
||||
slidesPerView: "auto", |
||||
observer: true, |
||||
observeParents: true |
||||
} |
||||
}; |
||||
}, |
||||
onShow: function() { |
||||
let that = this; |
||||
uni.showLoading({ |
||||
title:'加载中' |
||||
}) |
||||
getHomeData().then(res => { |
||||
that.logoUrl = res.data.logoUrl; |
||||
that.$set(that, "banner", res.data.banner); |
||||
that.$set(that, "menus", res.data.menus); |
||||
that.$set(that, "roll", res.data.roll); |
||||
that.$set(that, "activity", res.data.activity); |
||||
var activityOne = res.data.activity.shift(); |
||||
that.$set(that, "activityOne", activityOne); |
||||
that.$set(that, "info", res.data.info); |
||||
that.$set(that, "firstList", res.data.firstList); |
||||
that.$set(that, "bastList", res.data.bastList); |
||||
that.$set(that, "likeInfo", res.data.likeInfo); |
||||
that.$set(that, "lovely", res.data.lovely); |
||||
that.$set(that, "benefit", res.data.benefit); |
||||
that.$set(that, "couponList", res.data.couponList); |
||||
uni.hideLoading() |
||||
that.setOpenShare(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
goGoodSearch() { |
||||
this.$yrouter.push("/pages/shop/GoodSearch/index"); |
||||
}, |
||||
goWxappUrl(item) { |
||||
this.$yrouter.push(item.uniapp_url); |
||||
}, |
||||
goHotNewGoods(type) { |
||||
this.$yrouter.push({ |
||||
path: "/pages/shop/HotNewGoods/index", |
||||
query: { type } |
||||
}); |
||||
}, |
||||
goGoodsCon(item) { |
||||
console.log(item) |
||||
this.$yrouter.push({ |
||||
path: "/pages/shop/GoodsCon/index", |
||||
query: { id: item.id } |
||||
}); |
||||
}, |
||||
goGoodsPromotion() { |
||||
this.$yrouter.push("/pages/shop/GoodsPromotion/index"); |
||||
}, |
||||
setOpenShare: function() {} |
||||
} |
||||
bastList: [] |
||||
}, |
||||
likeInfo: [], |
||||
lovely: [], |
||||
benefit: [], |
||||
couponList: [], |
||||
swiperOption: { |
||||
pagination: { |
||||
el: '.swiper-pagination', |
||||
clickable: true |
||||
}, |
||||
autoplay: { |
||||
disableOnInteraction: false, |
||||
delay: 2000 |
||||
}, |
||||
loop: true, |
||||
speed: 1000, |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
swiperRoll: { |
||||
direction: 'vertical', |
||||
autoplay: { |
||||
disableOnInteraction: false, |
||||
delay: 2000 |
||||
}, |
||||
loop: true, |
||||
speed: 1000, |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
swiperScroll: { |
||||
freeMode: true, |
||||
freeModeMomentum: false, |
||||
slidesPerView: 'auto', |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
swiperBoutique: { |
||||
pagination: { |
||||
el: '.swiper-pagination', |
||||
clickable: true |
||||
}, |
||||
autoplay: { |
||||
disableOnInteraction: false, |
||||
delay: 2000 |
||||
}, |
||||
loop: true, |
||||
speed: 1000, |
||||
observer: true, |
||||
observeParents: true |
||||
}, |
||||
swiperProducts: { |
||||
freeMode: true, |
||||
freeModeMomentum: false, |
||||
slidesPerView: 'auto', |
||||
observer: true, |
||||
observeParents: true |
||||
} |
||||
}; |
||||
}, |
||||
onShow: function() { |
||||
let that = this; |
||||
uni.showLoading({ |
||||
title: '加载中' |
||||
}); |
||||
getHomeData().then(res => { |
||||
console.log(res); |
||||
that.logoUrl = res.data.logoUrl; |
||||
that.$set(that, 'banner', res.data.banner); |
||||
that.$set(that, 'menus', res.data.menus); |
||||
that.$set(that, 'roll', res.data.roll); |
||||
that.$set(that, 'activity', res.data.activity); |
||||
var activityOne = res.data.activity.shift(); |
||||
that.$set(that, 'activityOne', activityOne); |
||||
that.$set(that, 'info', res.data.info); |
||||
that.$set(that, 'firstList', res.data.firstList); |
||||
that.$set(that, 'bastList', res.data.bastList); |
||||
that.$set(that, 'likeInfo', res.data.likeInfo); |
||||
that.$set(that, 'lovely', res.data.lovely); |
||||
that.$set(that, 'benefit', res.data.benefit); |
||||
that.$set(that, 'couponList', res.data.couponList); |
||||
uni.hideLoading(); |
||||
that.setOpenShare(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
goGoodSearch() { |
||||
this.$yrouter.push('/pages/shop/GoodSearch/index'); |
||||
}, |
||||
goWxappUrl(item) { |
||||
this.$yrouter.push(item.uniapp_url); |
||||
}, |
||||
goHotNewGoods(type) { |
||||
this.$yrouter.push({ |
||||
path: '/pages/shop/HotNewGoods/index', |
||||
query: { type } |
||||
}); |
||||
}, |
||||
goGoodsCon(item) { |
||||
console.log(item); |
||||
this.$yrouter.push({ |
||||
path: '/pages/shop/GoodsCon/index', |
||||
query: { id: item.id } |
||||
}); |
||||
}, |
||||
goGoodsPromotion() { |
||||
this.$yrouter.push('/pages/shop/GoodsPromotion/index'); |
||||
}, |
||||
setOpenShare: function() {} |
||||
} |
||||
}; |
||||
</script> |
||||
<style scoped lang="less"> |
||||
.index { |
||||
background-color: #fff; |
||||
background-color: #fff; |
||||
} |
||||
.swiper-item { |
||||
height: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue