完成3.1样式修改
This commit is contained in:
Gao xiaosong
@ -44,7 +44,7 @@ export default {
|
||||
}
|
||||
cookie.get("spread");
|
||||
// this.toLaunch();
|
||||
if (this.$deviceType == "app") {
|
||||
if (this.$deviceType == "app"||this.$deviceType == "h5") {
|
||||
// this.toLaunch();
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index"
|
||||
@ -52,9 +52,9 @@ export default {
|
||||
return;
|
||||
}
|
||||
login().finally(() => {
|
||||
// this.$yrouter.switchTab({
|
||||
// path: "/pages/home/index"
|
||||
// });
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index"
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,9 @@
|
||||
</view>
|
||||
<scroll-view scroll-y="false" scroll-x="true">
|
||||
<view class="timeScroll">
|
||||
<div class="logoPic">
|
||||
<image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png">
|
||||
</div>
|
||||
<view v-for="(item, index) in timeList" :key="index">
|
||||
<view v-if="active==index" class="timeItem active" @click="setTime(index)">
|
||||
<view class="time">{{ item.time }}</view>
|
||||
@ -19,26 +22,15 @@
|
||||
</scroll-view>
|
||||
<view 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 class="countDown font-color-red acea-row row-center-wrapper">
|
||||
<view v-if="item.status === 0" class="activity">活动已结束</view>
|
||||
<count-down
|
||||
:isDay="false"
|
||||
:tipText="'距结束仅剩 '"
|
||||
:dayText="false"
|
||||
:hourText="' : '"
|
||||
:minuteText="' : '"
|
||||
:secondText="false"
|
||||
:datatime="datatime"
|
||||
v-if="item.status === 1"
|
||||
></count-down>
|
||||
<count-down :isDay="false" :tipText="'距结束仅剩 '" :dayText="false" :hourText="' : '" :minuteText="' : '"
|
||||
:secondText="false" :datatime="datatime" v-if="item.status === 1"></count-down>
|
||||
<view v-if="item.status === 2" class="activity">活动即将开始</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="list">
|
||||
<view
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-for="(itemSeckill, indexSeckill) in seckillList"
|
||||
:key="indexSeckill"
|
||||
>
|
||||
<view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList"
|
||||
:key="indexSeckill">
|
||||
<view class="pictrue">
|
||||
<image :src="itemSeckill.image" />
|
||||
</view>
|
||||
@ -53,21 +45,14 @@
|
||||
<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 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="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1">
|
||||
<view class="noPictrue">
|
||||
<image src="@/static/images/noGood.png" class="image" />
|
||||
</view>
|
||||
@ -77,185 +62,211 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { getSeckillConfig, getSeckillList } from "@/api/activity";
|
||||
import CountDown from "@/components/CountDown";
|
||||
// import { Tab, Tabs } from "vant-weapp";
|
||||
import Loading from "@/components/Loading";
|
||||
import {
|
||||
getSeckillConfig,
|
||||
getSeckillList
|
||||
} from "@/api/activity";
|
||||
import CountDown from "@/components/CountDown";
|
||||
// import { Tab, Tabs } from "vant-weapp";
|
||||
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: {
|
||||
changeTime: function(index) {
|
||||
this.active = index;
|
||||
this.getSeckillList();
|
||||
export default {
|
||||
name: "GoodsSeckill",
|
||||
components: {
|
||||
CountDown
|
||||
},
|
||||
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);
|
||||
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: {
|
||||
changeTime: function (index) {
|
||||
this.active = index;
|
||||
this.getSeckillList();
|
||||
},
|
||||
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: [
|
||||
{
|
||||
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: [
|
||||
{
|
||||
{
|
||||
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();
|
||||
});
|
||||
});
|
||||
that.$set(that, "title", title);
|
||||
},
|
||||
setTime: function (index) {
|
||||
var that = this;
|
||||
that.page = 1;
|
||||
that.loadingList = false;
|
||||
that.status = false;
|
||||
that.active = index;
|
||||
that.datatime = that.timeList[that.active].stop;
|
||||
this.seckillList = [];
|
||||
that.getSeckillList();
|
||||
that.$nextTick(function() {
|
||||
that.sticky = true;
|
||||
},
|
||||
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();
|
||||
});
|
||||
});
|
||||
},
|
||||
setTime: function(index) {
|
||||
var that = this;
|
||||
that.page = 1;
|
||||
that.loadingList = false;
|
||||
that.status = false;
|
||||
that.active = index;
|
||||
that.datatime = that.timeList[that.active].stop;
|
||||
this.seckillList = [];
|
||||
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
|
||||
}
|
||||
});
|
||||
},
|
||||
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">
|
||||
.timeScroll {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.flash-sale {
|
||||
background: #f5f5f5!important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.timeItem {
|
||||
font-size: 0.22 * 100rpx;
|
||||
color: #282828;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
padding: 0.11 * 100rpx 0;
|
||||
background-color: none;
|
||||
|
||||
&.active {
|
||||
.time {
|
||||
color: #eb3729;
|
||||
}
|
||||
|
||||
.state {
|
||||
background-color: #eb3729;
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
border-radius: 30rpx;
|
||||
padding: 0 0.2 * 100rpx;
|
||||
font-weight: 800;
|
||||
height: 0.37 * 100rpx;
|
||||
line-height: 0.37 * 100rpx;
|
||||
}
|
||||
.timeScroll {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.list{
|
||||
padding: 0 20rpx;
|
||||
.item{
|
||||
padding: .25*100rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: auto;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin-bottom: .2*100rpx;
|
||||
border-radius: .2*100rpx;
|
||||
}
|
||||
}
|
||||
.logoPic {
|
||||
width: 75rpx;
|
||||
height: 70rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.timeItem .time {
|
||||
font-size: 0.32 * 100rpx;
|
||||
font-weight: bold;
|
||||
height: 0.37 * 100rpx;
|
||||
line-height: 0.37 * 100rpx;
|
||||
}
|
||||
image {
|
||||
width: 75rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.timeItem .state {
|
||||
height: 0.37 * 100rpx;
|
||||
line-height: 0.37 * 100rpx;
|
||||
}
|
||||
.timeItem {
|
||||
font-size: 0.22 * 100rpx;
|
||||
color: #282828;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
background-color: none;
|
||||
|
||||
.activity {
|
||||
color: #333;
|
||||
}
|
||||
&.active {
|
||||
.time {
|
||||
color: #eb3729;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .grab {
|
||||
background-color: #999;
|
||||
}
|
||||
.state {
|
||||
background: linear-gradient(90deg,#00c17b,#00c17b);
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
border-radius: 30rpx;
|
||||
padding: 0 0.2 * 100rpx;
|
||||
font-weight: 800;
|
||||
height: 0.37 * 100rpx;
|
||||
line-height: 0.37 * 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeItem .time {
|
||||
font-size: 0.32 * 100rpx;
|
||||
font-weight: bold;
|
||||
height: .5 * 100rpx;
|
||||
line-height: .5 * 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,219 +1,192 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="!token">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view>
|
||||
<view class="getUserInfo">
|
||||
<text>您还未允许微信登录授权，请点击下方按钮允许微信授权登录。</text>
|
||||
<button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">允许微信登录授权</button>
|
||||
<view style="height:20rpx"></view>
|
||||
<button @click="back">取消微信登录授权</button>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view v-if="!token" class="force-login-wrap">
|
||||
<image class="logo-bg" src="@/static/images/logo_bg.png" mode="aspectFill"></image>
|
||||
<view class="force-login__content y-f">
|
||||
<open-data class="user-avatar" type="userAvatarUrl"></open-data>
|
||||
<open-data class="user-name" type="userNickName"></open-data>
|
||||
<view class="login-notice">为了提供更优质的服务，需要获取您的头像昵称</view>
|
||||
<button class="cu-btn author-btn" @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看</button>
|
||||
<button class="cu-btn close-btn" @tap="back">暂不授权</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view>
|
||||
<view class="getUserInfo">
|
||||
<text>请先登录</text>
|
||||
<button type="primary" @tap="toLogin">去登录</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view>
|
||||
<view class="getUserInfo">
|
||||
<text>请先登录</text>
|
||||
<button type="primary" @tap="toLogin">去登录</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import { wxappAuth, getUser } from "@/api/user";
|
||||
import dayjs from "dayjs";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
import { login, authorize } from "@/utils";
|
||||
import {
|
||||
mapState,
|
||||
mapMutations,
|
||||
mapActions
|
||||
} from "vuex";
|
||||
import {
|
||||
wxappAuth,
|
||||
getUser
|
||||
} from "@/api/user";
|
||||
import dayjs from "dayjs";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
import {
|
||||
login,
|
||||
authorize
|
||||
} from "@/utils";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
authorize: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["isAuthorization", "$deviceType", "token"]),
|
||||
},
|
||||
onShow() {
|
||||
// // 先校验用户是否授权，如果没有授权，显示授权按钮
|
||||
},
|
||||
onHide() {
|
||||
this.updateAuthorizationPage(false);
|
||||
this.changeAuthorization(false);
|
||||
},
|
||||
onUnload() {
|
||||
this.updateAuthorizationPage(false);
|
||||
this.changeAuthorization(false);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["changeAuthorization", "setUserInfo"]),
|
||||
...mapMutations(["updateAuthorizationPage"]),
|
||||
toLogin() {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/user/Login/index",
|
||||
query: {},
|
||||
});
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
authorize: false,
|
||||
};
|
||||
},
|
||||
back() {
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index",
|
||||
query: {},
|
||||
});
|
||||
computed: {
|
||||
...mapState(["isAuthorization", "$deviceType", "token"]),
|
||||
},
|
||||
getUserInfo(data) {
|
||||
if (data.detail.errMsg == "getUserInfo:fail auth deny") {
|
||||
uni.showToast({
|
||||
title: "取消授权",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
onShow() {
|
||||
// // 先校验用户是否授权，如果没有授权，显示授权按钮
|
||||
},
|
||||
onHide() {
|
||||
this.updateAuthorizationPage(false);
|
||||
this.changeAuthorization(false);
|
||||
},
|
||||
onUnload() {
|
||||
this.updateAuthorizationPage(false);
|
||||
this.changeAuthorization(false);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["changeAuthorization", "setUserInfo"]),
|
||||
...mapMutations(["updateAuthorizationPage"]),
|
||||
toLogin() {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/user/Login/index",
|
||||
query: {},
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "登录中",
|
||||
});
|
||||
login()
|
||||
.then((res) => {
|
||||
this.$yrouter.replace({ path: cookie.get("redirect") });
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
},
|
||||
back() {
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index",
|
||||
query: {},
|
||||
});
|
||||
},
|
||||
getUserInfo(data) {
|
||||
if (data.detail.errMsg == "getUserInfo:fail auth deny") {
|
||||
uni.showToast({
|
||||
title: error,
|
||||
title: "取消授权",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "登录中",
|
||||
});
|
||||
login()
|
||||
.then((res) => {
|
||||
this.$yrouter.replace({
|
||||
path: cookie.get("redirect")
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
uni.showToast({
|
||||
title: error,
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.container {
|
||||
flex: 1;
|
||||
height: 49px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.active {
|
||||
text {
|
||||
color: #ee7559;
|
||||
}
|
||||
.force-login-wrap {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
z-index: 11111;
|
||||
top: 0;
|
||||
background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 25%, rgba(255, 255, 255, 1) 98%);
|
||||
|
||||
.tab-bar-pic {
|
||||
display: none;
|
||||
background: #f9f9f9;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.logo-bg {
|
||||
width: 640rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.tab-bar-pic {
|
||||
display: block;
|
||||
background: #f9f9f9;
|
||||
.force-login__content {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
&.active {
|
||||
display: none;
|
||||
.user-avatar {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 35rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: rgba(132, 87, 8, 1);
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.login-notice {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(200, 150, 61, 1);
|
||||
line-height: 44rpx;
|
||||
width: 400rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 80rpx;
|
||||
}
|
||||
|
||||
.author-btn {
|
||||
width: 630rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
||||
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 630rpx;
|
||||
height: 80rpx;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid rgba(233, 180, 97, 1);
|
||||
background: none;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(233, 180, 97, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar-pic {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: #f9f9f9;
|
||||
|
||||
image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar-pic-active {
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 10px;
|
||||
color: rgb(160, 160, 160);
|
||||
line-height: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
._van-dialog {
|
||||
z-index: 99999999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
<!-- 导航栏 -->
|
||||
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
|
||||
<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">
|
||||
<view class="cu-bar fixed" :style="customStyle" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
|
||||
<view class="cu-bar fixed" :style="customStyle"
|
||||
:class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
|
||||
<view class="action">
|
||||
<text class="nav-title shopro-selector-rect">{{ info.name || '商城' }}</text>
|
||||
</view>
|
||||
@ -26,20 +27,25 @@
|
||||
<view class="banner-swiper-box mb10" v-if="banner.length>0">
|
||||
<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
|
||||
<swiper class="banner-carousel shopro-selector-rect" circular @change="swiperChange" :autoplay="true">
|
||||
<swiper-item v-for="(item, index) in banner" :key="index" class="carousel-item " @tap="routerTo(item.path)">
|
||||
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load></image>
|
||||
<swiper-item v-for="(item, index) in banner" :key="index" class="carousel-item "
|
||||
@tap="routerTo(item.path)">
|
||||
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load>
|
||||
</image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="banner-swiper-dots">
|
||||
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'" v-for="(dot, index) in banner.length"
|
||||
:key="index"></text>
|
||||
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'"
|
||||
v-for="(dot, index) in banner.length" :key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<Menu :list="menus"></Menu>
|
||||
|
||||
<PromotionGood :benefit="benefit"></PromotionGood>
|
||||
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"></Coupon-window>
|
||||
</view>
|
||||
<view class="content_box">
|
||||
<Menu :list="menus"></Menu>
|
||||
<Adv />
|
||||
<Groupon :detail="combinationList" />
|
||||
<PromotionGood :benefit="benefit"></PromotionGood>
|
||||
</view>
|
||||
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose">
|
||||
</Coupon-window>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@ -52,9 +58,11 @@
|
||||
} from 'vuex';
|
||||
import GoodList from '@/components/GoodList';
|
||||
import PromotionGood from '@/components/PromotionGood';
|
||||
import CouponWindow from '@/components/CouponWindow';
|
||||
import CouponWindow from '@/components/CouponWindow';
|
||||
import Menu from '@/components/Menu';
|
||||
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
|
||||
import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
|
||||
import Adv from '@/components/sh-adv'
|
||||
import Groupon from '@/components/sh-groupon.vue'
|
||||
import {
|
||||
getHomeData,
|
||||
getShare
|
||||
@ -72,14 +80,16 @@
|
||||
components: {
|
||||
// swiper,
|
||||
// swiperSlide,
|
||||
uniNoticeBar,
|
||||
UniNoticeBar,
|
||||
GoodList,
|
||||
PromotionGood,
|
||||
CouponWindow,
|
||||
Menu,
|
||||
CouponWindow,
|
||||
Menu,
|
||||
Adv,
|
||||
Groupon
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
CustomBar: this.CustomBar,
|
||||
StatusBar: this.StatusBar,
|
||||
@ -93,8 +103,8 @@
|
||||
showCoupon: false,
|
||||
logoUrl: '',
|
||||
banner: [],
|
||||
menus: [],
|
||||
|
||||
menus: [],
|
||||
combinationList: [],
|
||||
roll: [],
|
||||
activity: [],
|
||||
activityOne: {},
|
||||
@ -180,7 +190,7 @@
|
||||
},
|
||||
|
||||
},
|
||||
onShow: function() {
|
||||
onShow: function () {
|
||||
this.getLocation()
|
||||
let that = this;
|
||||
uni.showLoading({
|
||||
@ -198,6 +208,7 @@
|
||||
that.$set(that, 'lovely', res.data.lovely);
|
||||
that.$set(that, 'benefit', res.data.benefit);
|
||||
that.$set(that, 'couponList', res.data.couponList);
|
||||
that.$set(that, 'combinationList', res.data.combinationList);
|
||||
uni.hideLoading();
|
||||
that.setOpenShare();
|
||||
that.doColorThief()
|
||||
@ -236,7 +247,7 @@
|
||||
goGoodsPromotion() {
|
||||
this.$yrouter.push('/pages/shop/GoodsPromotion/index');
|
||||
},
|
||||
setOpenShare: function() {
|
||||
setOpenShare: function () {
|
||||
if (this.$deviceType == 'weixin') {
|
||||
getShare().then(res => {
|
||||
var data = res.data.data;
|
||||
@ -250,7 +261,7 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
startQr: function() {
|
||||
startQr: function () {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let option = handleUrlParam(res.result)
|
||||
@ -307,9 +318,9 @@
|
||||
that.webviewId = ctx.webviewId;
|
||||
uni.getImageInfo({
|
||||
src: bannerItem.pic,
|
||||
success: function(image) {
|
||||
success: function (image) {
|
||||
ctx.drawImage(image.path, 0, 0, image.width, image.height);
|
||||
ctx.draw(true, function(e) {
|
||||
ctx.draw(true, function (e) {
|
||||
uni.canvasGetImageData({
|
||||
canvasId: 'colorThief',
|
||||
x: 0,
|
||||
@ -317,7 +328,8 @@
|
||||
width: parseInt(image.width),
|
||||
height: parseInt(image.height),
|
||||
success(res) {
|
||||
let bgcolor = colorThief(res.data).color().getHex();
|
||||
let bgcolor = colorThief(res.data).color()
|
||||
.getHex();
|
||||
|
||||
that.bgcolorAry[that.swiperCurrent] = bgcolor
|
||||
that.getbgcolor(bgcolor)
|
||||
@ -342,12 +354,16 @@
|
||||
this.bgcolor = e;
|
||||
},
|
||||
},
|
||||
created: async function() {
|
||||
created: async function () {
|
||||
await this.doColorThief();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.content_box {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.index {
|
||||
background-color: #fff;
|
||||
}
|
||||
@ -490,6 +506,4 @@
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user