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