xuwenbo
5 years ago
74 changed files with 9953 additions and 4633 deletions
@ -1,24 +1,91 @@ |
|||||||
<script> |
<script> |
||||||
export default { |
import Vue from 'vue' |
||||||
|
export default { |
||||||
onLaunch: function() { |
onLaunch: function() { |
||||||
console.log('App Launch') |
// debugger |
||||||
|
const updateManager = uni.getUpdateManager() |
||||||
|
updateManager.onCheckForUpdate(function (res) { |
||||||
|
// 请求完新版本信息的回调 |
||||||
|
console.log(res.hasUpdate) |
||||||
|
}) |
||||||
|
// 下载新版本 |
||||||
|
updateManager.onUpdateReady(function () { |
||||||
|
uni.showModal({ |
||||||
|
title: '更新提示', |
||||||
|
content: '新版本已经准备好，是否重启应用？', |
||||||
|
success(res) { |
||||||
|
if (res.confirm) { |
||||||
|
// 重启应用 |
||||||
|
updateManager.applyUpdate() |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
// 新版本下载失败 |
||||||
|
updateManager.onUpdateFailed(function (res) { |
||||||
|
// 新的版本下载失败 |
||||||
|
uni.showModal({ |
||||||
|
title: '已经有新版本了哟~', |
||||||
|
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~', |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
onShow: function () { |
||||||
|
console.log("App Show"); |
||||||
}, |
}, |
||||||
onShow: function() { |
onHide: function () { |
||||||
console.log('App Show') |
console.log("App Hide"); |
||||||
}, |
}, |
||||||
onHide: function() { |
mounted() { |
||||||
|
this.setAppInfo() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取系统栏高度 |
||||||
|
async setAppInfo() { |
||||||
|
let that = this; |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
uni.getSystemInfo({ |
||||||
|
success: function (e) { |
||||||
|
Vue.prototype.StatusBar = e.statusBarHeight; |
||||||
|
// #ifdef H5 |
||||||
|
Vue.prototype.CustomBar = e.statusBarHeight + 45; |
||||||
|
// #endif |
||||||
|
|
||||||
console.log('App Hide') |
// #ifdef APP-PLUS |
||||||
} |
if (e.platform == "android") { |
||||||
|
Vue.prototype.CustomBar = e.statusBarHeight + 50; |
||||||
|
} else { |
||||||
|
Vue.prototype.CustomBar = e.statusBarHeight + 45; |
||||||
} |
} |
||||||
|
// #endif |
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
let custom = wx.getMenuButtonBoundingClientRect(); |
||||||
|
Vue.prototype.Custom = custom; |
||||||
|
Vue.prototype.CustomBar = |
||||||
|
custom.bottom + custom.top - e.statusBarHeight; |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 自动登录 |
||||||
|
async autoLogin(data) { |
||||||
|
|
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
|
|
||||||
<style lang="less"> |
<style lang="less"> |
||||||
/*每个页面公共css */ |
/*每个页面公共css */ |
||||||
@import "animate.css"; |
@import "animate.css"; |
||||||
@import "./assets/iconfont/iconfont.css"; |
@import "./assets/iconfont/iconfont.css"; |
||||||
@import "./assets/css/base.less"; |
@import "./assets/css/base.less"; |
||||||
@import "./assets/css/reset.less"; |
@import "./assets/css/reset.less"; |
||||||
@import "./assets/css/style.less"; |
@import "./assets/css/style.less"; |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -0,0 +1,17 @@ |
|||||||
|
|
||||||
|
|
||||||
|
import request from "@/utils/request"; |
||||||
|
|
||||||
|
/** |
||||||
|
* 查询所有直播间 |
||||||
|
*/ |
||||||
|
export function yxWechatLive(data) { |
||||||
|
return request.get("/yxWechatLive", data, { login: true }); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取直播回放 |
||||||
|
*/ |
||||||
|
export function getLiveReplay(id, data) { |
||||||
|
return request.get("/yxWechatLive/getLiveReplay/" + id, data, { login: false }); |
||||||
|
} |
||||||
@ -1,2 +1,2 @@ |
|||||||
@charset "UTF-8";.font-color-red{color:#eb3729 !important}.bg-color-red{background-color:#eb3729 !important}.icon-color{color:#eb3729}.cart-color{color:#eb3729 !important;border:1px solid #eb3729 !important}.padding20{padding:20rpx}.pad20{padding:0 20rpx}.padding30{padding:30rpx}.pad30{padding:0 30rpx}.acea-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.acea-row.row-middle{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.acea-row.row-top{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.acea-row.row-bottom{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.acea-row.row-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.acea-row.row-right{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.acea-row.row-left{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.acea-row.row-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.acea-row.row-around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.acea-row.row-column-around{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.acea-row.row-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.acea-row.row-column-between{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.acea-row.row-center-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.acea-row.row-between-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.slider-banner{position:relative;width:100%;overflow:hidden}.slider-banner .swiper-container{height:100%}.slider-banner image{display:block;width:100%;height:100%}.start{width:122rpx;height:30rpx;background-image:url("https://h5.yixiang.co/static/images/start.png");background-repeat:no-repeat;-webkit-background-size:122rpx auto;background-size:122rpx auto}.start.star5{background-position:0 3rpx}.start.star4{background-position:0 -30rpx}.start.star3{background-position:0 -70rpx}.start.star2{background-position:0 -105rpx}.start.star1{background-position:0 -140rpx}.start.star0{background-position:0 -175rpx}.checkbox-wrapper{position:relative}.checkbox-wrapper input{display:none}.checkbox-wrapper .icon{position:absolute;left:0;top:50%;display:inline-block;width:18px;height:18px;border:1px solid #cccccc;-webkit-border-radius:50%;border-radius:50%;-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);transform:translate(0, -50%)}.checkbox-wrapper input:checked+.icon{background-color:#e93323;border-color:#e93323;background-image:url("https://h5.yixiang.co/static/images/enter.png");-webkit-background-size:21rpx 15rpx;background-size:21rpx 15rpx;background-repeat:no-repeat;background-position:center center}.Loads{height:80rpx;font-size:25rpx;color:#000}.Loads .iconfont{font-size:30rpx;margin-right:10rpx;height:32rpx;line-height:32rpx}@-webkit-keyframes load{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.loadingpic{-webkit-animation:load 3s linear 1s infinite;animation:load 3s linear 1s infinite}.loading{-webkit-animation:load linear 1s infinite;animation:load linear 1s infinite} |
@charset "UTF-8";.font-color-red{color:#eb3729 !important}.bg-color-red{background-color:#eb3729 !important}.icon-color{color:#eb3729}.cart-color{color:#eb3729 !important;border:1px solid #eb3729 !important}.padding20{padding:20rpx}.pad20{padding:0 20rpx}.padding30{padding:30rpx}.pad30{padding:0 30rpx}.acea-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.acea-row.row-middle{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.acea-row.row-top{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.acea-row.row-bottom{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.acea-row.row-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.acea-row.row-right{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.acea-row.row-left{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.acea-row.row-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.acea-row.row-around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.acea-row.row-column-around{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.acea-row.row-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.acea-row.row-column-between{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.acea-row.row-center-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.acea-row.row-between-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.slider-banner{position:relative;width:100%;overflow:hidden}.slider-banner .swiper-container{height:100%}.slider-banner image{display:block;width:100%;height:100%}.start{width:122rpx;height:30rpx;background-image:url("https://wx.yixiang.co/static/images/start.png");background-repeat:no-repeat;-webkit-background-size:122rpx auto;background-size:122rpx auto}.start.star5{background-position:0 3rpx}.start.star4{background-position:0 -30rpx}.start.star3{background-position:0 -70rpx}.start.star2{background-position:0 -105rpx}.start.star1{background-position:0 -140rpx}.start.star0{background-position:0 -175rpx}.checkbox-wrapper{position:relative}.checkbox-wrapper input{display:none}.checkbox-wrapper .icon{position:absolute;left:0;top:50%;display:inline-block;width:18px;height:18px;border:1px solid #cccccc;-webkit-border-radius:50%;border-radius:50%;-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);transform:translate(0, -50%)}.checkbox-wrapper input:checked+.icon{background-color:#e93323;border-color:#e93323;background-image:url("https://wx.yixiang.co/static/images/enter.png");-webkit-background-size:21rpx 15rpx;background-size:21rpx 15rpx;background-repeat:no-repeat;background-position:center center}.Loads{height:80rpx;font-size:25rpx;color:#000}.Loads .iconfont{font-size:30rpx;margin-right:10rpx;height:32rpx;line-height:32rpx}@-webkit-keyframes load{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.loadingpic{-webkit-animation:load 3s linear 1s infinite;animation:load 3s linear 1s infinite}.loading{-webkit-animation:load linear 1s infinite;animation:load linear 1s infinite} |
||||||
/*# sourceMappingURL=./base.css.map */ |
/*# sourceMappingURL=./base.css.map */ |
||||||
@ -1,2 +1,2 @@ |
|||||||
input{line-height:normal;-webkit-box-sizing:border-box;box-sizing:border-box}@font-face{font-family:'GuildfordProBook 5';src:url('https://h5.yixiang.co/static/iconfont/GuildfordProBook5.otf')}[v-cloak]{display:none}.iconfont{font-size:36rpx}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){.border-1px::after{-webkit-transform:scaleY(.7);-ms-transform:scaleY(.7);transform:scaleY(.7)}.border-1px::before{-webkit-transform:scaleY(.7);-ms-transform:scaleY(.7);transform:scaleY(.7)}}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.border-1px::after{-webkit-transform:scaleY(.5);-ms-transform:scaleY(.5);transform:scaleY(.5)}.border-1px::before{-webkit-transform:scaleY(.5);-ms-transform:scaleY(.5);transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){.border-1px::after{-webkit-transform:scaleY(.33);-ms-transform:scaleY(.33);transform:scaleY(.33)}.border-1px::before{-webkit-transform:scaleY(.33);-ms-transform:scaleY(.33);transform:scaleY(.33)}}.line1{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;width:100%}.line2{word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:55;background-color:rgba(0,0,0,0.5)} |
input{line-height:normal;-webkit-box-sizing:border-box;box-sizing:border-box}@font-face{font-family:'GuildfordProBook 5';src:url('https://wx.yixiang.co/static/iconfont/GuildfordProBook5.otf')}[v-cloak]{display:none}.iconfont{font-size:36rpx}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){.border-1px::after{-webkit-transform:scaleY(.7);-ms-transform:scaleY(.7);transform:scaleY(.7)}.border-1px::before{-webkit-transform:scaleY(.7);-ms-transform:scaleY(.7);transform:scaleY(.7)}}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.border-1px::after{-webkit-transform:scaleY(.5);-ms-transform:scaleY(.5);transform:scaleY(.5)}.border-1px::before{-webkit-transform:scaleY(.5);-ms-transform:scaleY(.5);transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){.border-1px::after{-webkit-transform:scaleY(.33);-ms-transform:scaleY(.33);transform:scaleY(.33)}.border-1px::before{-webkit-transform:scaleY(.33);-ms-transform:scaleY(.33);transform:scaleY(.33)}}.line1{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;width:100%}.line2{word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:55;background-color:rgba(0,0,0,0.5)} |
||||||
/*# sourceMappingURL=./reset.css.map */ |
/*# sourceMappingURL=./reset.css.map */ |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,207 @@ |
|||||||
|
<template> |
||||||
|
<view class="adv-box mx20 mb10"> |
||||||
|
<!-- 模板1--> |
||||||
|
<view class="x-f" v-if="detail.style == 1"> |
||||||
|
<image style="width:710rpx;height: 220rpx;" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板2--> |
||||||
|
<view class="type1 x-f" v-if="detail.style == 2"> |
||||||
|
<image class="type1-img" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<image class="type1-img" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板3--> |
||||||
|
<view class="type2 x-bc" v-if="detail.style == 3"> |
||||||
|
<image class="type2-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<view class="y-f type2-box"> |
||||||
|
<image class="type2-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" style="border-bottom:1rpx solid #f6f6f6"></image> |
||||||
|
<image class="type2-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 模板4--> |
||||||
|
<view class="type3 x-bc" v-if="detail.style == 4"> |
||||||
|
<view class="type3-box y-f"> |
||||||
|
<image class="type3-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<image class="type3-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<image class="type3-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板5--> |
||||||
|
<view class="type4 y-f" v-if="detail.style == 5"> |
||||||
|
<view class="type4-box x-f"> |
||||||
|
<image class="type4-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<image class="type4-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<image class="type4-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板6--> |
||||||
|
<view class="type5 y-f" v-if="detail.style == 6"> |
||||||
|
<image class="type5-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<view class="type5-box x-bc"> |
||||||
|
<image class="type5-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" style="border-bottom:1rpx solid #f6f6f6"></image> |
||||||
|
<image class="type5-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 模板7--> |
||||||
|
<view class="type6 y-f" v-if="detail.style == 7"> |
||||||
|
<view class="x-f type6-box1"> |
||||||
|
<image class="type6-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"></image> |
||||||
|
<image class="type6-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<view class="x-f type6-box2"> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"></image> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[3].path)" :src="detail.list[3].image" mode="aspectFill"></image> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[4].path)" :src="detail.list[4].image" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return {}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: {} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
methods: { |
||||||
|
// 路由跳转 |
||||||
|
jump(path) { |
||||||
|
this.$tools.routerTo(path); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.adv-box { |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
.type1 { |
||||||
|
.type1-img { |
||||||
|
flex: 1; |
||||||
|
height: 220rpx; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type2 { |
||||||
|
.type2-img1 { |
||||||
|
width: (710rpx/2); |
||||||
|
height: 340rpx; |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
|
||||||
|
.type2-box { |
||||||
|
flex: 1; |
||||||
|
height: 340rpx; |
||||||
|
width: (710rpx/2); |
||||||
|
|
||||||
|
.type2-img2 { |
||||||
|
height: (340rpx/2); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type3 { |
||||||
|
.type3-box { |
||||||
|
width: (710rpx/2); |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
.type3-img1 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type3-img2 { |
||||||
|
flex: 1; |
||||||
|
height: 340rpx; |
||||||
|
width: (710rpx/2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type4 { |
||||||
|
.type4-box { |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
.type4-img1 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type4-img2 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
width: 710rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type5 { |
||||||
|
.type5-img1 { |
||||||
|
width: 710rpx; |
||||||
|
height: (340rpx/2); |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
|
||||||
|
.type5-box { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
width: 710rpx; |
||||||
|
|
||||||
|
.type5-img2 { |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type6 { |
||||||
|
.type6-box1 { |
||||||
|
.type6-img1 { |
||||||
|
width: (710rpx/2); |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type6-box2 { |
||||||
|
border-top: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
.type6-img2 { |
||||||
|
width: (710rpx/3); |
||||||
|
height: (340rpx/2); |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
border-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
image { |
||||||
|
// background-color: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,27 +1,21 @@ |
|||||||
<template> |
<template> |
||||||
<view |
<view class="Loads acea-row row-center-wrapper" v-if="loading || !loaded" style="margin-top: 20rpx;"> |
||||||
class="Loads acea-row row-center-wrapper" |
|
||||||
v-if="loading || !loaded" |
|
||||||
style="margin-top: 20rpx;" |
|
||||||
> |
|
||||||
<template v-if="loading"> |
<template v-if="loading"> |
||||||
<view |
<view class="iconfont icon-jiazai loading acea-row row-center-wrapper"></view> |
||||||
class="iconfont icon-jiazai loading acea-row row-center-wrapper" |
|
||||||
></view> |
|
||||||
正在加载中 |
正在加载中 |
||||||
</template> |
</template> |
||||||
<template v-else> |
<template v-if="!loading"> |
||||||
上拉加载更多 |
上拉加载更多 |
||||||
</template> |
</template> |
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
name: "Loading", |
name: "Loading", |
||||||
props: { |
props: { |
||||||
loaded: Boolean, |
loaded: Boolean, |
||||||
loading: Boolean |
loading: Boolean |
||||||
} |
} |
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
|
|||||||
@ -0,0 +1,155 @@ |
|||||||
|
<template> |
||||||
|
<!-- 产品分类导航 --> |
||||||
|
<view class="menu-category-box mb10" v-if="carousel" :style="list.length <= menu ? `height:200rpx` : `height:360rpx`"> |
||||||
|
<swiper |
||||||
|
class="menu-swiper-box" |
||||||
|
:style="list.length <= menu ? `height:160rpx` : `height:320rpx`" |
||||||
|
@change="onSwiper" |
||||||
|
circular |
||||||
|
:autoplay="false" |
||||||
|
:interval="3000" |
||||||
|
:duration="1000" |
||||||
|
> |
||||||
|
<swiper-item class="menu-swiper-item" v-for="(itemList, index) in carousel" :key="index" :style="list.length <= menu ? `height:200rpx` : `height:340rpx`"> |
||||||
|
<view class="menu-tab-box"> |
||||||
|
<view class="tab-list y-f" :style="{ width: 690 / menu + 'rpx' }" v-for="item in itemList" :key="item.name" @tap="routerTo(item)"> |
||||||
|
<image class="tab-img Shop-selector-circular" :style="{ width: imgW + 'rpx', height: imgW + 'rpx' }" :src="item.pic"></image> |
||||||
|
<text class="Shop-selector-rect">{{ item.name }}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="menu-category-dots" v-if="carousel.length > 1"> |
||||||
|
<text :class="categoryCurrent === index ? 'category-dot-active' : 'category-dot'" v-for="(dot, index) in carousel.length" :key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
categoryCurrent: 0 //分类轮播下标 |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
list: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
}, |
||||||
|
menu: { |
||||||
|
default: 4 |
||||||
|
}, |
||||||
|
imgW: { |
||||||
|
type: Number, |
||||||
|
default: 88 |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
carousel() { |
||||||
|
if (this.list) { |
||||||
|
let list = this.sortData(this.list, this.menu * 2); |
||||||
|
return list; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created() {}, |
||||||
|
methods: { |
||||||
|
// 数据分层 |
||||||
|
sortData(oArr, length) { |
||||||
|
let arr = []; |
||||||
|
let minArr = []; |
||||||
|
oArr.forEach(c => { |
||||||
|
if (minArr.length === length) { |
||||||
|
minArr = []; |
||||||
|
} |
||||||
|
if (minArr.length === 0) { |
||||||
|
arr.push(minArr); |
||||||
|
} |
||||||
|
minArr.push(c); |
||||||
|
}); |
||||||
|
|
||||||
|
return arr; |
||||||
|
}, |
||||||
|
// 轮播 |
||||||
|
onSwiper(e) { |
||||||
|
this.categoryCurrent = e.detail.current; |
||||||
|
}, |
||||||
|
// 路由跳转 |
||||||
|
routerTo(item) { |
||||||
|
this.$yrouter.push(item.uniapp_url); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
// 产品分类 |
||||||
|
.y-f { |
||||||
|
display: -webkit-box; |
||||||
|
display: -webkit-flex; |
||||||
|
display: flex; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-box-direction: normal; |
||||||
|
-webkit-flex-direction: column; |
||||||
|
flex-direction: column; |
||||||
|
-webkit-box-align: center; |
||||||
|
-webkit-align-items: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.menu-category-box { |
||||||
|
padding: 30rpx 30rpx 0 30rpx; |
||||||
|
background: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.menu-category-box, |
||||||
|
.menu-swiper-box { |
||||||
|
position: relative; |
||||||
|
background: #fff; |
||||||
|
.menu-swiper-item { |
||||||
|
background: #fff; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.menu-tab-box { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
.tab-list { |
||||||
|
font-size: 22rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
padding-bottom: 30rpx; |
||||||
|
|
||||||
|
.tab-img { |
||||||
|
border-radius: 25rpx; |
||||||
|
margin-bottom: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.menu-category-dots { |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 20rpx; |
||||||
|
|
||||||
|
.category-dot { |
||||||
|
width: 40rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #eeeeee; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.category-dot-active { |
||||||
|
width: 40rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #a8700d; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,36 +1,214 @@ |
|||||||
<template> |
<template> |
||||||
<view class="promotionGood" v-if="benefit.length > 0"> |
<view> |
||||||
<view class="item acea-row row-between-wrapper" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex" @click="routerGo(item)"> |
<view class="sh-title-card mb10"> |
||||||
<view class="pictrue"><image :src="item.image" class="image" /></view> |
<view class="title-box"> |
||||||
<view class="text"> |
<image class="title-bg" src="@/static/images/title1.png" mode="aspectFill"></image> |
||||||
<view class="name line1">{{ item.storeName }}</view> |
<view class="title-text">为你推荐</view> |
||||||
<view class="sp-money acea-row"> |
<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> --> |
||||||
<view class="moneyCon"> |
|
||||||
促销价: ￥ |
|
||||||
<text class="num">{{ item.price }}</text> |
|
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="acea-row row-between-wrapper"> |
<view class="hot-goods mx20 mb10" v-if="benefit.length"> |
||||||
<view class="money">日常价：￥{{ item.otPrice }}</view> |
<view class="goods-list x-f"> |
||||||
<view>仅剩：{{ item.stock }}{{ item.unitName }}</view> |
<view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex"> |
||||||
|
<view class="goods-box" @tap="routerGo(item)"> |
||||||
|
<view class="img-box"> |
||||||
|
<!-- <image class="tag-img" :src="item.image" mode=""></image> --> |
||||||
|
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
|
<view class="tip one-t">{{ item.storeName }}</view> |
||||||
|
<view class="title more-t">{{ item.storeName }}</view> |
||||||
|
<view class="price-box"> |
||||||
|
<view class="flex x-bc align-end"> |
||||||
|
<view class="current">{{ item.activity_type === 'groupon' ? item.price : item.otPrice }} |
||||||
</view> |
</view> |
||||||
|
<view class="sales miso-font">仅剩：{{ item.stock }}{{ item.unitName }}</view> |
||||||
</view> |
</view> |
||||||
|
<view class="x-f tag-box"> |
||||||
|
<!-- <view class="discount">新人礼</view> |
||||||
|
<view class="discount">满100减60</view> --> |
||||||
</view> |
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
name: 'PromotionGood', |
name: 'PromotionGood', |
||||||
props: ['benefit'], |
props: ['benefit'], |
||||||
data: function() { |
data: function () { |
||||||
return {}; |
return {}; |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
routerGo(item) { |
routerGo(item) { |
||||||
this.$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } }); |
this.$yrouter.push({ |
||||||
|
path: '/pages/shop/GoodsCon/index', |
||||||
|
query: { |
||||||
|
id: item.id |
||||||
} |
} |
||||||
}, |
}); |
||||||
mounted() { |
|
||||||
} |
} |
||||||
}; |
}, |
||||||
|
mounted() {} |
||||||
|
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.sh-title-card { |
||||||
|
width: 750rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.title-box { |
||||||
|
width: 710rpx; |
||||||
|
height: 88rpx; |
||||||
|
margin: 0 auto; |
||||||
|
position: relative; |
||||||
|
border-radius: 30rpx; |
||||||
|
|
||||||
|
.title-bg { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.title-text { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goods-box { |
||||||
|
width: 345rpx; |
||||||
|
background: #fff; |
||||||
|
padding-bottom: 20rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.img-box { |
||||||
|
width: 345rpx; |
||||||
|
height: 345rpx; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.tag-img { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
z-index: 2; |
||||||
|
width: 80rpx; |
||||||
|
height: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.img { |
||||||
|
width: 345rpx; |
||||||
|
height: 345rpx; |
||||||
|
background-color: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
width: 346rpx; |
||||||
|
line-height: 56rpx; |
||||||
|
background: rgba(246, 242, 234, 1); |
||||||
|
font-size: 22rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: rgba(168, 112, 13, 1); |
||||||
|
padding: 0 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 24rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 36rpx; |
||||||
|
height: 72rpx; |
||||||
|
margin: 20rpx 20rpx 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.price-box { |
||||||
|
padding: 10rpx 20rpx 0; |
||||||
|
width: 344rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
.sales { |
||||||
|
font-size: 20rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: rgba(153, 153, 153, 1); |
||||||
|
line-height: 20rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.current { |
||||||
|
font-size: 30rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(225, 33, 43, 1); |
||||||
|
line-height: 30rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
|
||||||
|
&:before { |
||||||
|
content: '￥'; |
||||||
|
font-size: 26rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.original { |
||||||
|
font-size: 22rpx; |
||||||
|
font-weight: 400; |
||||||
|
text-decoration: line-through; |
||||||
|
color: rgba(153, 153, 153, 1); |
||||||
|
margin-left: 14rpx; |
||||||
|
line-height: 22rpx; |
||||||
|
margin-bottom: 10rpx; |
||||||
|
|
||||||
|
&:before { |
||||||
|
content: '￥'; |
||||||
|
font-size: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tag-box { |
||||||
|
.discount { |
||||||
|
line-height: 28rpx; |
||||||
|
border: 1rpx solid rgba(225, 33, 43, 1); |
||||||
|
border-radius: 8rpx; |
||||||
|
font-size: 18rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(225, 33, 43, 1); |
||||||
|
padding: 0 8rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 为你推荐 |
||||||
|
.hot-goods { |
||||||
|
// background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6); |
||||||
|
// border-radius: 20rpx; |
||||||
|
|
||||||
|
.goods-list { |
||||||
|
flex-wrap: wrap; |
||||||
|
width: 710rpx; |
||||||
|
|
||||||
|
.goods-item { |
||||||
|
margin-right: 20rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
width: 345rpx; |
||||||
|
box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22); |
||||||
|
border-radius: 20rpx; |
||||||
|
|
||||||
|
&:nth-child(2n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -0,0 +1,327 @@ |
|||||||
|
<template> |
||||||
|
<view class="sp-live-card" :style="{ width: wh + 'rpx' }"> |
||||||
|
<view class="live-content" @tap="goRoom" :style="{ width: wh + 'rpx' }"> |
||||||
|
<image class="item-cover" :src="detail.shareImge" mode="aspectFill"></image> |
||||||
|
<view class="item-status"> |
||||||
|
<image class="status-img" :src="liveStatus[detail.liveStatus].img" mode=""></image> |
||||||
|
<text class="status-text">{{ liveStatus[detail.liveStatus].title }}</text> |
||||||
|
</view> |
||||||
|
<view class="item-title" :style="{ width: wh + 'rpx' }">{{ detail.name }}</view> |
||||||
|
<!-- <image v-if="detail.liveStatus == 101" class="like-img" src="http://Shop.7wpp.com/imgs/live/zan.gif" mode=""></image> --> |
||||||
|
</view> |
||||||
|
<view class="live-bottom" :style="{ width: wh + 'rpx' }"> |
||||||
|
<view class="live-info"> |
||||||
|
<view class="info-box"> |
||||||
|
<!-- <image class="info-avatar" :src="detail.anchor_img" mode=""></image> --> |
||||||
|
<view class="info-name">{{ detail.anchorName }}</view> |
||||||
|
</view> |
||||||
|
<!-- <text class="views">15W观看</text> --> |
||||||
|
</view> |
||||||
|
<slot name="liveGoods"> |
||||||
|
<view class="live-goods" v-if="detail.product.length"> |
||||||
|
<view class="live-goods__item" v-for="(goods, index) in detail.product" :key="goods.goodsId" |
||||||
|
v-if="index < 3"> |
||||||
|
<image class="live-goods__img" :src="goods.coverImgeUrl" mode=""></image> |
||||||
|
<view class="live-goods__price" v-if="index < 2">￥{{ goods.price }}</view> |
||||||
|
<view class="live-goods__mark" v-else> |
||||||
|
<text>{{ detail.product.length }}+</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
dataFormatL |
||||||
|
} from "@/utils"; |
||||||
|
let HAS_LIVE = false |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
HAS_LIVE = true |
||||||
|
let livePlayer = null; |
||||||
|
if (HAS_LIVE) { |
||||||
|
livePlayer = requirePlugin('live-player-plugin'); |
||||||
|
} |
||||||
|
// #endif |
||||||
|
let timer = null; |
||||||
|
export default { |
||||||
|
name: 'shopLiveCard', |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
liveStatus: { |
||||||
|
'101': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/live.png', |
||||||
|
title: '直播中' |
||||||
|
}, |
||||||
|
'102': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/prevue.png', |
||||||
|
title: '未开始' |
||||||
|
}, |
||||||
|
'103': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/playback.png', |
||||||
|
title: '已结束' |
||||||
|
}, |
||||||
|
'104': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/104.png', |
||||||
|
title: '禁播' |
||||||
|
}, |
||||||
|
'105': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/105.png', |
||||||
|
title: '暂停中' |
||||||
|
}, |
||||||
|
'106': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/106.png', |
||||||
|
title: '异常' |
||||||
|
}, |
||||||
|
'107': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/past.png', |
||||||
|
title: '已过期' |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: { |
||||||
|
type: Object, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
wh: { |
||||||
|
type: Number, |
||||||
|
default: 345 |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
computed: {}, |
||||||
|
created() { |
||||||
|
this.getLiveStatus(); |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
let that = this; |
||||||
|
timer = setInterval(() => { |
||||||
|
that.getLiveStatus(); |
||||||
|
}, 60000); |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
timer = null; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
goRoom() { |
||||||
|
let that = this; |
||||||
|
wx.navigateTo({ |
||||||
|
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${that.detail.roomId}` |
||||||
|
}); |
||||||
|
}, |
||||||
|
dateFormat(fmt, date) { |
||||||
|
let ret; |
||||||
|
const opt = { |
||||||
|
"Y+": date.getFullYear().toString(), // 年 |
||||||
|
"m+": (date.getMonth() + 1).toString(), // 月 |
||||||
|
"d+": date.getDate().toString(), // 日 |
||||||
|
"H+": date.getHours().toString(), // 时 |
||||||
|
"M+": date.getMinutes().toString(), // 分 |
||||||
|
"S+": date.getSeconds().toString() // 秒 |
||||||
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串 |
||||||
|
}; |
||||||
|
for (let k in opt) { |
||||||
|
ret = new RegExp("(" + k + ")").exec(fmt); |
||||||
|
if (ret) { |
||||||
|
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) |
||||||
|
}; |
||||||
|
}; |
||||||
|
return fmt; |
||||||
|
}, |
||||||
|
// 轮询liveStatus |
||||||
|
getLiveStatus() { |
||||||
|
if (HAS_LIVE) { |
||||||
|
let that = this; |
||||||
|
let date = ''; |
||||||
|
if (that.detail.liveStatus == 102) { |
||||||
|
date = this.dateFormat('mm-dd HH:MM', new Date(that.detail.startTime * 1000)).replace('-','/'); |
||||||
|
that.liveStatus['102'].title = '预告 ' + date; |
||||||
|
} |
||||||
|
// livePlayer |
||||||
|
// .getLiveStatus({ |
||||||
|
// room_id: that.detail.roomId |
||||||
|
// }) |
||||||
|
// .then(res => { |
||||||
|
// // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期 |
||||||
|
// that.detail.liveStatus = res.liveStatus; |
||||||
|
// }) |
||||||
|
// .catch(err => { |
||||||
|
// console.log('get live status', err); |
||||||
|
// }); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.sp-live-card { |
||||||
|
width: 344rpx; |
||||||
|
box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22); |
||||||
|
border-radius: 20rpx; |
||||||
|
height: 100%; |
||||||
|
overflow: auto; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.live-content { |
||||||
|
position: relative; |
||||||
|
width: 344rpx; |
||||||
|
height: 344rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.item-cover { |
||||||
|
background-color: #eee; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 20rpx 20rpx 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.item-status { |
||||||
|
position: absolute; |
||||||
|
top: 20rpx; |
||||||
|
left: 10rpx; |
||||||
|
height: 40rpx; |
||||||
|
background: rgba(0, 0, 0, 0.4); |
||||||
|
border-radius: 20rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.status-img { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.status-text { |
||||||
|
font-size: 22rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
padding: 0 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.item-title { |
||||||
|
width: 345rpx; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
line-height: 60rpx; |
||||||
|
padding: 0 20rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
background: linear-gradient(transparent, rgba(#000, 0.5)); |
||||||
|
padding-right: 60rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.like-img { |
||||||
|
position: absolute; |
||||||
|
bottom: 20rpx; |
||||||
|
right: 10rpx; |
||||||
|
width: 60rpx; |
||||||
|
height: 130rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.live-bottom { |
||||||
|
background-color: #fff; |
||||||
|
padding: 20rpx; |
||||||
|
width: 345rpx; |
||||||
|
|
||||||
|
.live-info { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.info-box { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.info-avatar { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
background: #eee; |
||||||
|
} |
||||||
|
|
||||||
|
.info-name { |
||||||
|
width: 150rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.views { |
||||||
|
font-size: 20rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: rgba(153, 153, 153, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.live-goods { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20rpx; |
||||||
|
|
||||||
|
&__item { |
||||||
|
position: relative; |
||||||
|
width: 96rpx; |
||||||
|
height: 96rpx; |
||||||
|
border: 1rpx solid rgba(238, 238, 238, 1); |
||||||
|
border-radius: 10rpx; |
||||||
|
overflow: hidden; |
||||||
|
margin-right: 8rpx; |
||||||
|
|
||||||
|
&:nth-child(3n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__img { |
||||||
|
background: #eee; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
&__price { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
line-height: 40rpx; |
||||||
|
width: 100%; |
||||||
|
background: linear-gradient(transparent, rgba(#000, 0.5)); |
||||||
|
font-size: 20rpx; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
&__mark { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
margin: auto; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
background: rgba(#000, 0.3); |
||||||
|
font-size: 24rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<template> |
||||||
|
<view class="min-goods" @tap="jump('/pages/activity/GroupDetails/index', { id: detail.id })"> |
||||||
|
<view class="img-box"> |
||||||
|
<view class="tag" >{{ detail.people}}人团</view> |
||||||
|
<image class="img" :src="detail.image" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="price-box"> |
||||||
|
<view class="y-f"> |
||||||
|
<text class="seckill-current">￥{{ detail.price }}</text> |
||||||
|
<text class="original">销量{{ detail.sales }}{{detail.unitName}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="title"><slot name="titleText"></slot></view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return {}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: Object |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
methods: { |
||||||
|
// 路由跳转 |
||||||
|
jump(path, query) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path, |
||||||
|
query |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
</style> |
||||||
@ -0,0 +1,256 @@ |
|||||||
|
<template> |
||||||
|
<view class="adv-box mx20 mb10"> |
||||||
|
<!-- 模板1--> |
||||||
|
<view class="x-f" v-if="detail.style == 1"> |
||||||
|
<image style="width:710rpx;height: 220rpx;" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<!-- 模板2--> |
||||||
|
<view class="type1 x-f" v-if="detail.style == 2"> |
||||||
|
<image class="type1-img" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"> |
||||||
|
</image> |
||||||
|
<image class="type1-img" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill"> |
||||||
|
</image> |
||||||
|
</view> |
||||||
|
<!-- 模板3--> |
||||||
|
<view class="type2 x-bc" v-if="detail.style == 3"> |
||||||
|
<image class="type2-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"> |
||||||
|
</image> |
||||||
|
<view class="y-f type2-box"> |
||||||
|
<image class="type2-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" |
||||||
|
style="border-bottom:1rpx solid #f6f6f6"></image> |
||||||
|
<image class="type2-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 模板4--> |
||||||
|
<view class="type3 x-bc" v-if="detail.style == 4"> |
||||||
|
<view class="type3-box y-f"> |
||||||
|
<image class="type3-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
<image class="type3-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<image class="type3-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"> |
||||||
|
</image> |
||||||
|
</view> |
||||||
|
<!-- 模板5--> |
||||||
|
<view class="type4 y-f" v-if="detail.style == 5"> |
||||||
|
<view class="type4-box x-f"> |
||||||
|
<image class="type4-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
<image class="type4-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<image class="type4-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" mode="aspectFill"> |
||||||
|
</image> |
||||||
|
</view> |
||||||
|
<!-- 模板6--> |
||||||
|
<view class="type5 y-f" v-if="detail.style == 6"> |
||||||
|
<image class="type5-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" mode="aspectFill"> |
||||||
|
</image> |
||||||
|
<view class="type5-box x-bc"> |
||||||
|
<image class="type5-img2" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" mode="aspectFill" |
||||||
|
style="border-bottom:1rpx solid #f6f6f6"></image> |
||||||
|
<image class="type5-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!-- 模板7--> |
||||||
|
<view class="type6 y-f" v-if="detail.style == 7"> |
||||||
|
<view class="x-f type6-box1"> |
||||||
|
<image class="type6-img1" @tap="jump(detail.list[0].path)" :src="detail.list[0].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
<image class="type6-img1" @tap="jump(detail.list[1].path)" :src="detail.list[1].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<view class="x-f type6-box2"> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[2].path)" :src="detail.list[2].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[3].path)" :src="detail.list[3].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
<image class="type6-img2" @tap="jump(detail.list[4].path)" :src="detail.list[4].image" |
||||||
|
mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
detail: { |
||||||
|
"list": [{ |
||||||
|
"image": "https:\/\/wx.yixiang.co\/static\/images\/index001.png", |
||||||
|
"name": "", |
||||||
|
"path": "/pages/user/coupon/GetCoupon/index", |
||||||
|
"path_name": "优惠券", |
||||||
|
"path_type": 1 |
||||||
|
}, { |
||||||
|
"image": "https:\/\/wx.yixiang.co\/static\/images\/index002.png", |
||||||
|
"name": "", |
||||||
|
"path": "/pages/shop/GoodsList/index", |
||||||
|
"path_name": "商品", |
||||||
|
"path_type": 1 |
||||||
|
}, { |
||||||
|
"image": "https:\/\/wx.yixiang.co\/static\/images\/index003.png", |
||||||
|
"name": "", |
||||||
|
"path": "/pages/user/signIn/Integral/index", |
||||||
|
"path_name": "积分", |
||||||
|
"path_type": 1 |
||||||
|
}], |
||||||
|
"name": "", |
||||||
|
"style": 3 |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
methods: { |
||||||
|
// 路由跳转 |
||||||
|
jump(path) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.adv-box { |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.type1 { |
||||||
|
.type1-img { |
||||||
|
flex: 1; |
||||||
|
height: 220rpx; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type2 { |
||||||
|
.type2-img1 { |
||||||
|
width: (710rpx/2); |
||||||
|
height: 340rpx; |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
|
||||||
|
.type2-box { |
||||||
|
flex: 1; |
||||||
|
height: 340rpx; |
||||||
|
width: (710rpx/2); |
||||||
|
|
||||||
|
.type2-img2 { |
||||||
|
height: (340rpx/2); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type3 { |
||||||
|
.type3-box { |
||||||
|
width: (710rpx/2); |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
.type3-img1 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type3-img2 { |
||||||
|
flex: 1; |
||||||
|
height: 340rpx; |
||||||
|
width: (710rpx/2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type4 { |
||||||
|
.type4-box { |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
.type4-img1 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type4-img2 { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
width: 710rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type5 { |
||||||
|
.type5-img1 { |
||||||
|
width: 710rpx; |
||||||
|
height: (340rpx/2); |
||||||
|
border-bottom: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
|
||||||
|
.type5-box { |
||||||
|
flex: 1; |
||||||
|
height: (340rpx/2); |
||||||
|
width: 710rpx; |
||||||
|
|
||||||
|
.type5-img2 { |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type6 { |
||||||
|
.type6-box1 { |
||||||
|
.type6-img1 { |
||||||
|
width: (710rpx/2); |
||||||
|
height: (340rpx/2); |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type6-box2 { |
||||||
|
border-top: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
.type6-img2 { |
||||||
|
width: (710rpx/3); |
||||||
|
height: (340rpx/2); |
||||||
|
border-right: 1rpx solid #f6f6f6; |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
border-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
image { |
||||||
|
// background-color: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,197 @@ |
|||||||
|
<template> |
||||||
|
<!-- 今日必拼 --> |
||||||
|
<view class="group-goods pa20 mx20 mb10"> |
||||||
|
<view class="title-box x-bc" @tap="jump('/pages/activity/GoodsGroup/index')"> |
||||||
|
<text class="title">超值拼团</text> |
||||||
|
<view class="group-people x-f"> |
||||||
|
<text class="tip">更多</text> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="goods-box swiper-box x-f"> |
||||||
|
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000"> |
||||||
|
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item"> |
||||||
|
<view class="goods-list-box x-f"> |
||||||
|
<block v-for="mgoods in goods" :key="mgoods.id"> |
||||||
|
<sh-activity-goods :detail="mgoods" class="goods-item"> |
||||||
|
<!-- <block slot="titleText">立减￥8.5</block> --> |
||||||
|
</sh-activity-goods> |
||||||
|
</block> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="swiper-dots" v-if="goodsList.length > 1"> |
||||||
|
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" |
||||||
|
:key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import shActivityGoods from './sh-activity-goods.vue'; |
||||||
|
export default { |
||||||
|
name: 'shGroupon', |
||||||
|
components: { |
||||||
|
shActivityGoods |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
goodsList: [], |
||||||
|
swiperCurrent: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: Array |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
watch: { |
||||||
|
detail(next) { |
||||||
|
this.goodsList = this.sortData(next, 4); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
swiperChange(e) { |
||||||
|
this.swiperCurrent = e.detail.current; |
||||||
|
}, |
||||||
|
// 数据分层 |
||||||
|
sortData(oArr, length) { |
||||||
|
let arr = []; |
||||||
|
let minArr = []; |
||||||
|
oArr.forEach(c => { |
||||||
|
if (minArr.length === length) { |
||||||
|
minArr = []; |
||||||
|
} |
||||||
|
if (minArr.length === 0) { |
||||||
|
arr.push(minArr); |
||||||
|
} |
||||||
|
minArr.push(c); |
||||||
|
}); |
||||||
|
|
||||||
|
return arr; |
||||||
|
}, |
||||||
|
jump(path, query) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path, |
||||||
|
query, |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.swiper-box, |
||||||
|
.carousel { |
||||||
|
width: 700rpx; |
||||||
|
height: 240upx; |
||||||
|
position: relative; |
||||||
|
border-radius: 20rpx; |
||||||
|
|
||||||
|
.carousel-item { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// padding: 0 28upx; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// border-radius: 10upx; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-dots { |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 0rpx; |
||||||
|
z-index: 66; |
||||||
|
|
||||||
|
.dot { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #eee; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.dot-active { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #a8700d; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 今日必拼+限时抢购 |
||||||
|
.group-goods { |
||||||
|
background: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.title-box { |
||||||
|
padding-bottom: 20rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.group-people { |
||||||
|
.time-box { |
||||||
|
font-size: 26rpx; |
||||||
|
color: #edbf62; |
||||||
|
|
||||||
|
.count-text-box { |
||||||
|
width: 30rpx; |
||||||
|
height: 34rpx; |
||||||
|
background: #edbf62; |
||||||
|
text-align: center; |
||||||
|
line-height: 34rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
border-radius: 6rpx; |
||||||
|
color: rgba(#fff, 0.9); |
||||||
|
margin: 0 8rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.head-box { |
||||||
|
.head-img { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
border-radius: 50%; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
font-size: 28rpx; |
||||||
|
padding-left: 30rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.cuIcon-right { |
||||||
|
font-size: 30rpx; |
||||||
|
line-height: 28rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goods-box { |
||||||
|
.goods-item { |
||||||
|
margin-right: 22rpx; |
||||||
|
|
||||||
|
&:nth-child(4n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,5 +1,5 @@ |
|||||||
|
|
||||||
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
|
// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
|
||||||
export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api'; |
export const VUE_APP_API_URL = 'http://127.0.0.1:8008/api'; |
||||||
// export const VUE_APP_API_URL = 'https://h5api.dayouqiantu.cn/api';
|
export const VUE_APP_RESOURCES_URL = 'https://wx.yixiang.co/static'; |
||||||
export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static'; |
|
||||||
|
|||||||
@ -0,0 +1,101 @@ |
|||||||
|
<template> |
||||||
|
<view class="activity-goods-box x-bc" @tap="jump('/pages/activity/GroupDetails/index', { id: id })"> |
||||||
|
<view class="img-box"> |
||||||
|
<slot name="tag"></slot> |
||||||
|
<image class="img" :src="img" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
<view class="goods-right y-bc"> |
||||||
|
<view class="title one-t">{{ title }}</view> |
||||||
|
<view class="tip one-t">{{ info }}</view> |
||||||
|
<view class="slod-end"><slot name="sell"></slot></view> |
||||||
|
<view class=" price-box"> |
||||||
|
<view class="x-f"> |
||||||
|
<view class="current">￥{{ price }}</view> |
||||||
|
<view class="original">￥{{ productPrice }}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<slot name="btn"></slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'activityCard', |
||||||
|
components: {}, |
||||||
|
data() { |
||||||
|
return {}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
cId: 0, |
||||||
|
img: '', |
||||||
|
title: '', |
||||||
|
info: '', |
||||||
|
price: '', |
||||||
|
productPrice: '' |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
methods: { |
||||||
|
// 路由跳转 |
||||||
|
jump(path, parmas) { |
||||||
|
this.$yrouter.push({ path: path, query: parmas }); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.activity-goods-box { |
||||||
|
padding: 40rpx 20rpx; |
||||||
|
background: #fff; |
||||||
|
|
||||||
|
.img-box { |
||||||
|
margin-right: 20rpx; |
||||||
|
width: 200rpx; |
||||||
|
height: 200rpx; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.img { |
||||||
|
width: 200rpx; |
||||||
|
height: 200rpx; |
||||||
|
background-color: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goods-right { |
||||||
|
width: 450rpx; |
||||||
|
min-height: 200rpx; |
||||||
|
align-items: flex-start; |
||||||
|
position: relative; |
||||||
|
.title { |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 28rpx; |
||||||
|
width: 450rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
font-size: 22rpx; |
||||||
|
color: #a8700d; |
||||||
|
width: 500rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.price-box { |
||||||
|
.current { |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(225, 33, 43, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.original { |
||||||
|
font-size: 22rpx; |
||||||
|
font-weight: 400; |
||||||
|
text-decoration: line-through; |
||||||
|
color: rgba(153, 153, 153, 1); |
||||||
|
margin-left: 14rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,90 +1,232 @@ |
|||||||
<template> |
<template> |
||||||
<view class="group-list" ref="container"> |
<view class="page_box"> |
||||||
<view class="list" v-if="combinationList.length>0"> |
<view class="content_box"> |
||||||
<view |
<scroll-view class="scroll-box" scroll-y enable-back-to-top scroll-with-animation @scrolltolower="loadMore"> |
||||||
class="item acea-row row-between-wrapper" |
<view class="group-wrap"> |
||||||
v-for="(item, combinationListIndex) in combinationList" |
<view class="group-head x-bc"> |
||||||
:key="combinationListIndex" |
<text class="group-head__title">爆款拼团</text> |
||||||
@click="link(item.id)" |
<text class="group-head__notice">省钱省心限时拼</text> |
||||||
> |
|
||||||
<view class="pictrue"> |
|
||||||
<image :src="item.image" /> |
|
||||||
</view> |
</view> |
||||||
<view class="text"> |
<view class="group-box"> |
||||||
<view class="line1" v-text="item.title"></view> |
<view class="goods-item" v-for="(groupon, index) in grouponList" :key="groupon.id"> |
||||||
<view class="acea-row"> |
<activity-card :cId="groupon.id" :title="groupon.title" :info="groupon.info" :img="groupon.image" |
||||||
<view class="team acea-row row-middle cart-color"> |
:price="groupon.price" :productPrice="groupon.productPrice"> |
||||||
<view class="iconfont icon-pintuan"></view> |
<block slot="tag"> |
||||||
<view class="num" v-text="item.people + '人团'"></view> |
<view class="tag" v-if="index < 3">TOP{{ index + 1 }}</view> |
||||||
|
</block> |
||||||
|
<block slot="sell"> |
||||||
|
<view class="x-f"> |
||||||
|
<view class="sell-box"> |
||||||
|
<text class="cuIcon-hotfill"></text> |
||||||
|
<text class="sell-num">已拼{{ groupon.sales }}件</text> |
||||||
</view> |
</view> |
||||||
|
<text class="group-num">{{ groupon.people || 0 }}人团</text> |
||||||
</view> |
</view> |
||||||
<view class="bottom acea-row row-between-wrapper"> |
</block> |
||||||
<view class="money"> |
<block slot="btn"><button class="cu-btn buy-btn" |
||||||
￥ |
@tap.stop="jump('/pages/activity/GroupDetails/index', { id: groupon.id })">马上拼</button></block> |
||||||
<text class="num" v-text="item.price"></text> |
</activity-card> |
||||||
<text class="y-money" v-text="'￥' + item.productPrice"></text> |
|
||||||
</view> |
</view> |
||||||
<view class="groupBnt bg-color-red"> |
|
||||||
去拼团 |
|
||||||
<text class="iconfont icon-jiantou"></text> |
|
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
|
</scroll-view> |
||||||
</view> |
</view> |
||||||
</view> |
<Loading :loaded="loaded" :loading="loading"></Loading> |
||||||
<Loading :loaded="status" :loading="loadingList"></Loading> |
|
||||||
</view> |
|
||||||
<view class="noCommodity" style="background-color: #fff;" v-if="combinationList.length === 0"> |
|
||||||
<view class="noPictrue"> |
|
||||||
<image src="@/static/images/noGood.png" class="image" /> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import { getCombinationList } from "@/api/activity"; |
import activityCard from './children/activity-card.vue'; |
||||||
import Loading from "@/components/Loading"; |
import Loading from "@/components/Loading"; |
||||||
|
|
||||||
|
|
||||||
export default { |
import { |
||||||
name: "GoodsGroup", |
getCombinationList |
||||||
|
} from "@/api/activity"; |
||||||
|
export default { |
||||||
components: { |
components: { |
||||||
|
activityCard, |
||||||
Loading |
Loading |
||||||
}, |
}, |
||||||
props: {}, |
data() { |
||||||
data: function() { |
|
||||||
return { |
return { |
||||||
combinationList: [], |
emptyData: { |
||||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
img: '/static/imgs/empty/empty_goods.png', |
||||||
loading: false, //当前接口是否请求完成 false 完成 true 未完成 |
tip: '还没有拼团商品噢，去首页看看吧~', |
||||||
page: 1, //页码 |
path: '/pages/index/index', |
||||||
limit: 20, //数量 |
pathText: '去首页逛逛' |
||||||
loadingList: false |
|
||||||
}; |
|
||||||
}, |
}, |
||||||
mounted: function() { |
loaded: false, |
||||||
// document.querySelector('body').setAttribute('style', 'background-color:#eb3729'); |
loading: false, |
||||||
this.getCombinationList(); |
lastPage: 0, |
||||||
|
currentPage: 1, |
||||||
|
limit: 10, |
||||||
|
grouponList: [] |
||||||
|
}; |
||||||
}, |
}, |
||||||
onReachBottom() { |
onLoad() { |
||||||
!this.loadingList && this.getCombinationList(); |
this.getGrouponList(); |
||||||
}, |
}, |
||||||
|
onPullDownRefresh() {}, |
||||||
|
computed: {}, |
||||||
methods: { |
methods: { |
||||||
getCombinationList: function() { |
// 路由跳转 |
||||||
var that = this; |
jump(path, parmas) { |
||||||
if (that.loading) return; |
this.$yrouter.push({ |
||||||
if (that.status) return; |
path: path, |
||||||
getCombinationList({ page: that.page, limit: that.limit }).then(res => { |
query: parmas |
||||||
that.status = res.data.length < that.limit; |
|
||||||
that.combinationList.push.apply(that.combinationList, res.data); |
|
||||||
that.page++; |
|
||||||
that.loading = false; |
|
||||||
}); |
}); |
||||||
}, |
}, |
||||||
link: function(id) { |
// 加载更多 |
||||||
this.$yrouter.push({ |
loadMore() { |
||||||
path: "/pages/activity/GroupDetails/index", |
|
||||||
query: { id } |
}, |
||||||
|
// 拼团列表 |
||||||
|
getGrouponList() { |
||||||
|
let that = this; |
||||||
|
if (this.loading || this.loaded) return; |
||||||
|
this.loading = true; |
||||||
|
getCombinationList({ |
||||||
|
page: that.currentPage, |
||||||
|
limit: this.limit |
||||||
|
}).then(res => { |
||||||
|
that.grouponList = that.grouponList.concat(res.data.storeCombinationQueryVos) |
||||||
|
this.currentPage++; |
||||||
|
this.loaded = res.data.storeCombinationQueryVos.length < this.limit; |
||||||
|
this.loading = false; |
||||||
}); |
}); |
||||||
|
|
||||||
|
// that.$api('goods.grouponList', { |
||||||
|
// page: that.currentPage |
||||||
|
// }).then(res => { |
||||||
|
// if (res.code === 1) { |
||||||
|
// that.isLoading = false; |
||||||
|
// that.grouponList = [...that.grouponList, ...res.data.data]; |
||||||
|
// // that.grouponList=[]; |
||||||
|
// that.lastPage = res.data.last_page; |
||||||
|
// if (that.currentPage < res.data.last_page) { |
||||||
|
// that.loadStatus = ''; |
||||||
|
// } else { |
||||||
|
// that.loadStatus = 'over'; |
||||||
|
// } |
||||||
|
// } |
||||||
|
// }); |
||||||
} |
} |
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
!this.loading && this.getGrouponList(); |
||||||
} |
} |
||||||
}; |
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.group-wrap { |
||||||
|
background: url('~@/static/images/index-bg.png') no-repeat; |
||||||
|
background-size: 100% 374rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.group-head { |
||||||
|
padding: 0 25rpx; |
||||||
|
height: 100rpx; |
||||||
|
|
||||||
|
.group-head__title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.group-head__notice { |
||||||
|
font-size: 26rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.group-box { |
||||||
|
width: 710rpx; |
||||||
|
background: linear-gradient(#fff, #f5f5f5); |
||||||
|
border-radius: 20rpx; |
||||||
|
margin: 0 auto; |
||||||
|
min-height: 1000rpx; |
||||||
|
|
||||||
|
.goods-item { |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
|
||||||
|
.tag { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 10rpx; |
||||||
|
z-index: 2; |
||||||
|
line-height: 35rpx; |
||||||
|
background: linear-gradient(132deg, rgba(255, 153, 93, 1), rgba(255, 99, 97, 1)); |
||||||
|
border-radius: 0px 18rpx 18rpx 0px; |
||||||
|
padding: 0 10rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: bold; |
||||||
|
color: rgba(255, 255, 255, 0.8); |
||||||
|
} |
||||||
|
|
||||||
|
/deep/.goods-right { |
||||||
|
width: 460rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 460rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
width: 460rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.buy-btn { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
bottom: -10rpx; |
||||||
|
width: 160rpx; |
||||||
|
height: 60rpx; |
||||||
|
background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1)); |
||||||
|
box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22); |
||||||
|
border-radius: 30rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: #fff; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.group-num { |
||||||
|
font-size: 20rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(153, 153, 153, 1); |
||||||
|
margin-left: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.sell-box { |
||||||
|
background: rgba(255, 224, 226, 0.3); |
||||||
|
border-radius: 16rpx; |
||||||
|
line-height: 32rpx; |
||||||
|
padding: 0 10rpx; |
||||||
|
|
||||||
|
.sell-num { |
||||||
|
font-size: 20rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: rgba(247, 151, 156, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.cuIcon-hotfill { |
||||||
|
font-size: 26rpx; |
||||||
|
color: #e1212b; |
||||||
|
margin-right: 8rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -0,0 +1,173 @@ |
|||||||
|
<template> |
||||||
|
<view class="banner-swiper-box"> |
||||||
|
<canvas canvas-id="colorThief" class="hide-canvas"></canvas> |
||||||
|
<swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true"> |
||||||
|
<swiper-item v-for="(item, index) in list" :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 list.length" :key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import colorThief from 'miniapp-color-thief'; |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
swiperCurrent: 0, //轮播下标 |
||||||
|
webviewId: 0, |
||||||
|
bgcolorAry: [], |
||||||
|
list: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
banner: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
created: async function () { |
||||||
|
await this.doColorThief(); |
||||||
|
|
||||||
|
}, |
||||||
|
async mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
watch: { |
||||||
|
banner(next) { |
||||||
|
this.list = next; |
||||||
|
this.doColorThief() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async doColorThief() { |
||||||
|
let that = this; |
||||||
|
// 获取轮播图 |
||||||
|
let item = this.list[this.swiperCurrent]; |
||||||
|
if(!item){ |
||||||
|
return |
||||||
|
} |
||||||
|
// 获取轮播图颜色 |
||||||
|
let bgcolor = this.bgcolorAry[this.swiperCurrent]; |
||||||
|
// 颜色不存在 |
||||||
|
if (!bgcolor) { |
||||||
|
let ctx = uni.createCanvasContext('colorThief', that.$scope); |
||||||
|
if (0 === that.webviewId || ctx.webviewId === that.webviewId) { |
||||||
|
that.webviewId = ctx.webviewId; |
||||||
|
uni.getImageInfo({ |
||||||
|
src: item.pic, |
||||||
|
success: function (image) { |
||||||
|
ctx.drawImage(image.path, 0, 0, image.width, image.height); |
||||||
|
ctx.draw(true, function (e) { |
||||||
|
uni.canvasGetImageData({ |
||||||
|
canvasId: 'colorThief', |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
width: parseInt(image.width), |
||||||
|
height: parseInt(image.height), |
||||||
|
success(res) { |
||||||
|
let newBgcolor = colorThief(res.data) |
||||||
|
.color() |
||||||
|
.getHex(); |
||||||
|
that.$set(that.bgcolorAry, that |
||||||
|
.swiperCurrent, |
||||||
|
newBgcolor); |
||||||
|
that.$emit('getbgcolor', newBgcolor); |
||||||
|
}, |
||||||
|
fail: function (error) { |
||||||
|
} |
||||||
|
}, that.$scope); |
||||||
|
}); |
||||||
|
}, |
||||||
|
fail: function (error) { |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
that.$set(item, 'bgcolor', bgcolor); |
||||||
|
that.$emit('getbgcolor', bgcolor); |
||||||
|
} |
||||||
|
}, |
||||||
|
swiperChange(e) { |
||||||
|
this.swiperCurrent = e.detail.current; |
||||||
|
this.doColorThief(); |
||||||
|
}, |
||||||
|
|
||||||
|
// 路由跳转 |
||||||
|
goRoll(item) { |
||||||
|
if (item.uniapp_url) { |
||||||
|
this.$yrouter.push(item.uniapp_url) |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
// 轮播 |
||||||
|
.banner-swiper-box { |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.banner-swiper-box, |
||||||
|
.banner-carousel { |
||||||
|
width: 750rpx; |
||||||
|
height: 350upx; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.carousel-item { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// padding: 0 28upx; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// border-radius: 10upx; |
||||||
|
// background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.banner-swiper-dots { |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 20rpx; |
||||||
|
z-index: 5; |
||||||
|
|
||||||
|
.banner-dot { |
||||||
|
width: 14rpx; |
||||||
|
height: 14rpx; |
||||||
|
background: rgba(255, 255, 255, 1); |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.banner-dot-active { |
||||||
|
width: 14rpx; |
||||||
|
height: 14rpx; |
||||||
|
background: #a8700d; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.hide-canvas { |
||||||
|
position: fixed !important; |
||||||
|
top: -99999upx; |
||||||
|
left: -99999upx; |
||||||
|
z-index: -99999; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,216 @@ |
|||||||
|
<template> |
||||||
|
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> |
||||||
|
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })"> |
||||||
|
<text class="title">首发新品</text> |
||||||
|
<view class="group-people x-f"> |
||||||
|
<text class="tip">更多</text> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="goods-box swiper-box x-f"> |
||||||
|
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000"> |
||||||
|
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item"> |
||||||
|
<view class="goods-list-box x-f"> |
||||||
|
<block v-for="mgoods in goods" :key="mgoods.id"> |
||||||
|
<view class="min-goods" |
||||||
|
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })"> |
||||||
|
<view class="img-box"> |
||||||
|
<view class="tag">new</view> |
||||||
|
<image class="img" :src="mgoods.image" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="price-box"> |
||||||
|
<view class="y-f"> |
||||||
|
<text class="seckill-current">￥{{ mgoods.price }}</text> |
||||||
|
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="title"> |
||||||
|
<slot name="titleText"></slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</block> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="swiper-dots" v-if="goodsList.length > 1"> |
||||||
|
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" |
||||||
|
:key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import shActivityGoods from '@/components/sh-activity-goods.vue'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "FirstNewProduct", |
||||||
|
components: { |
||||||
|
shActivityGoods |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
goodsList: [], |
||||||
|
swiperCurrent: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: Array |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
watch: { |
||||||
|
detail(next) { |
||||||
|
this.goodsList = this.sortData(next, 4); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
swiperChange(e) { |
||||||
|
this.swiperCurrent = e.detail.current; |
||||||
|
}, |
||||||
|
// 数据分层 |
||||||
|
sortData(oArr, length) { |
||||||
|
let arr = []; |
||||||
|
let minArr = []; |
||||||
|
oArr.forEach(c => { |
||||||
|
if (minArr.length === length) { |
||||||
|
minArr = []; |
||||||
|
} |
||||||
|
if (minArr.length === 0) { |
||||||
|
arr.push(minArr); |
||||||
|
} |
||||||
|
minArr.push(c); |
||||||
|
}); |
||||||
|
|
||||||
|
return arr; |
||||||
|
}, |
||||||
|
jump(path, query) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path, |
||||||
|
query, |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.group-goods { |
||||||
|
position: relative; |
||||||
|
z-index: 9; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-box, |
||||||
|
.carousel { |
||||||
|
width: 700rpx; |
||||||
|
height: 240upx; |
||||||
|
position: relative; |
||||||
|
border-radius: 20rpx; |
||||||
|
|
||||||
|
.carousel-item { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// padding: 0 28upx; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// border-radius: 10upx; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-dots { |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 0rpx; |
||||||
|
z-index: 66; |
||||||
|
|
||||||
|
.dot { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #eee; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.dot-active { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #a8700d; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 今日必拼+限时抢购 |
||||||
|
.group-goods { |
||||||
|
background: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.title-box { |
||||||
|
padding-bottom: 20rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.group-people { |
||||||
|
.time-box { |
||||||
|
font-size: 26rpx; |
||||||
|
color: #edbf62; |
||||||
|
|
||||||
|
.count-text-box { |
||||||
|
width: 30rpx; |
||||||
|
height: 34rpx; |
||||||
|
background: #edbf62; |
||||||
|
text-align: center; |
||||||
|
line-height: 34rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
border-radius: 6rpx; |
||||||
|
color: rgba(#fff, 0.9); |
||||||
|
margin: 0 8rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.head-box { |
||||||
|
.head-img { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
border-radius: 50%; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
font-size: 28rpx; |
||||||
|
padding-left: 30rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.cuIcon-right { |
||||||
|
font-size: 30rpx; |
||||||
|
line-height: 28rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goods-box { |
||||||
|
.goods-item { |
||||||
|
margin-right: 22rpx; |
||||||
|
|
||||||
|
&:nth-child(4n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,219 @@ |
|||||||
|
<template> |
||||||
|
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> |
||||||
|
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:2} })"> |
||||||
|
<text class="title">热门榜单</text> |
||||||
|
<view class="group-people x-f"> |
||||||
|
<text class="tip">更多</text> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="goods-box swiper-box x-f"> |
||||||
|
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000"> |
||||||
|
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item"> |
||||||
|
<view class="goods-list-box x-f"> |
||||||
|
<block v-for="mgoods in goods" :key="mgoods.id"> |
||||||
|
<view class="min-goods" @tap="jump('/pages/shop/GoodsCon/index',{id:mgoods.id})"> |
||||||
|
<view class="img-box"> |
||||||
|
<view class="tag">hot</view> |
||||||
|
<image class="img" :src="mgoods.image" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="price-box"> |
||||||
|
<view class="y-f"> |
||||||
|
<text class="seckill-current">￥{{ mgoods.price }}</text> |
||||||
|
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="title"> |
||||||
|
<slot name="titleText"></slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</block> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="swiper-dots" v-if="goodsList.length > 1"> |
||||||
|
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" |
||||||
|
:key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import shActivityGoods from '@/components/sh-activity-goods.vue'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "HotCommodity", |
||||||
|
components: { |
||||||
|
shActivityGoods |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
goodsList: [], |
||||||
|
swiperCurrent: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: Array |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
watch: { |
||||||
|
detail(next) { |
||||||
|
this.goodsList = this.sortData(next, 4); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
swiperChange(e) { |
||||||
|
this.swiperCurrent = e.detail.current; |
||||||
|
}, |
||||||
|
// 数据分层 |
||||||
|
sortData(oArr, length) { |
||||||
|
let arr = []; |
||||||
|
let minArr = []; |
||||||
|
oArr.forEach(c => { |
||||||
|
if (minArr.length === length) { |
||||||
|
minArr = []; |
||||||
|
} |
||||||
|
if (minArr.length === 0) { |
||||||
|
arr.push(minArr); |
||||||
|
} |
||||||
|
minArr.push(c); |
||||||
|
}); |
||||||
|
|
||||||
|
return arr; |
||||||
|
}, |
||||||
|
jump(path, query) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path, |
||||||
|
query, |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.group-goods { |
||||||
|
position: relative; |
||||||
|
z-index: 9; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-box, |
||||||
|
.carousel { |
||||||
|
width: 700rpx; |
||||||
|
height: 240upx; |
||||||
|
position: relative; |
||||||
|
border-radius: 20rpx; |
||||||
|
|
||||||
|
.carousel-item { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// padding: 0 28upx; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// border-radius: 10upx; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-dots { |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 0rpx; |
||||||
|
z-index: 66; |
||||||
|
|
||||||
|
.dot { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #eee; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.dot-active { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #a8700d; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 今日必拼+限时抢购 |
||||||
|
.group-goods { |
||||||
|
background: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.title-box { |
||||||
|
padding-bottom: 20rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.group-people { |
||||||
|
.time-box { |
||||||
|
font-size: 26rpx; |
||||||
|
color: #edbf62; |
||||||
|
|
||||||
|
.count-text-box { |
||||||
|
width: 30rpx; |
||||||
|
height: 34rpx; |
||||||
|
background: #edbf62; |
||||||
|
text-align: center; |
||||||
|
line-height: 34rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
border-radius: 6rpx; |
||||||
|
color: rgba(#fff, 0.9); |
||||||
|
margin: 0 8rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.head-box { |
||||||
|
.head-img { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
border-radius: 50%; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
font-size: 28rpx; |
||||||
|
padding-left: 30rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.cuIcon-right { |
||||||
|
font-size: 30rpx; |
||||||
|
line-height: 28rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goods-box { |
||||||
|
.goods-item { |
||||||
|
margin-right: 22rpx; |
||||||
|
|
||||||
|
&:nth-child(4n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.min-goods{ |
||||||
|
margin-right: 22rpx; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,249 @@ |
|||||||
|
<template> |
||||||
|
<view class="live-el mx20 mb10"> |
||||||
|
<view class="head"> |
||||||
|
<text class="head-title">热门直播</text> |
||||||
|
<view class="head-more" @tap="$yrouter.push('/pages/shop/Live/LiveList/index')"> |
||||||
|
<text>更多</text> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="content-one"> |
||||||
|
<view class="content-one__item" v-for="live in detail" :key="live.roomId" @tap="goRoom(live)"> |
||||||
|
<image class="item-cover" :src="live.shareImge" mode="widthFix"></image> |
||||||
|
<view class="item-status"> |
||||||
|
<image class="status-img" :src="liveStatus[live.liveStatus].img" mode=""></image> |
||||||
|
<text class="status-text">{{ liveStatus[live.liveStatus].title }}</text> |
||||||
|
</view> |
||||||
|
<view class="item-title">{{ live.name }}</view> |
||||||
|
<image v-if="live.liveStatus == 101" class="like-img" src="http://Shop.7wpp.com/imgs/live/zan.gif" |
||||||
|
mode=""></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ShopLiveCard from '@/components/ShopLiveCard.vue' |
||||||
|
|
||||||
|
let HAS_LIVE = false |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
HAS_LIVE = true |
||||||
|
let livePlayer = null; |
||||||
|
if (HAS_LIVE) { |
||||||
|
livePlayer = requirePlugin('live-player-plugin'); |
||||||
|
} |
||||||
|
// #endif |
||||||
|
import { |
||||||
|
yxWechatLive, |
||||||
|
getLiveReplay |
||||||
|
} from '@/api/live'; |
||||||
|
|
||||||
|
let timer = null; |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
ShopLiveCard |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
liveList: [], |
||||||
|
liveStatus: { |
||||||
|
'101': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/live.png', |
||||||
|
title: '直播中' |
||||||
|
}, |
||||||
|
'102': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/prevue.png', |
||||||
|
title: '未开始' |
||||||
|
}, |
||||||
|
'103': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/playback.png', |
||||||
|
title: '已结束' |
||||||
|
}, |
||||||
|
'104': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/104.png', |
||||||
|
title: '禁播' |
||||||
|
}, |
||||||
|
'105': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/105.png', |
||||||
|
title: '暂停中' |
||||||
|
}, |
||||||
|
'106': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/106.png', |
||||||
|
title: '异常' |
||||||
|
}, |
||||||
|
'107': { |
||||||
|
img: 'https://wx.yixiang.co/static/images/past.png', |
||||||
|
title: '已过期' |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: Array |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
let that = this; |
||||||
|
timer = setInterval(() => { |
||||||
|
that.getLiveStatus(); |
||||||
|
}, 60000); |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
timer = null; |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
methods: { |
||||||
|
// 直播列表 |
||||||
|
getLiveList() { |
||||||
|
// let that = this; |
||||||
|
// yxWechatLive({ |
||||||
|
// page: 1, |
||||||
|
// size: 10, |
||||||
|
// }).then(res => { |
||||||
|
// console.log(res) |
||||||
|
// }) |
||||||
|
}, |
||||||
|
// 轮询liveStatus |
||||||
|
getLiveStatus() { |
||||||
|
// if (HAS_LIVE) { |
||||||
|
// let that = this; |
||||||
|
// let date = ''; |
||||||
|
// if (that.detail.liveStatus == 102) { |
||||||
|
// date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-', |
||||||
|
// '/'); |
||||||
|
// that.liveStatus['102'].title = '预告 ' + date; |
||||||
|
// } |
||||||
|
// livePlayer |
||||||
|
// .getLiveStatus({ |
||||||
|
// room_id: that.detail.roomId |
||||||
|
// }) |
||||||
|
// .then(res => { |
||||||
|
// // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期 |
||||||
|
// that.detail.liveStatus = res.liveStatus; |
||||||
|
// }) |
||||||
|
// .catch(err => { |
||||||
|
// console.log('get live status', err); |
||||||
|
// }); |
||||||
|
// } |
||||||
|
}, |
||||||
|
goRoom(live) { |
||||||
|
console.log(live.roomId,9999) |
||||||
|
wx.navigateTo({ |
||||||
|
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomId}` |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.live-el { |
||||||
|
background: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
padding: 30rpx 20rpx 25rpx; |
||||||
|
|
||||||
|
.head { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&-title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
font-family: PingFang SC; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
} |
||||||
|
|
||||||
|
&-more { |
||||||
|
font-size: 26rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 单个大图直播 |
||||||
|
.content-one { |
||||||
|
.content-one__item { |
||||||
|
position: relative; |
||||||
|
height: 280rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
margin-top: 25rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.item-cover { |
||||||
|
background-color: #eee; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.item-status { |
||||||
|
position: absolute; |
||||||
|
top: 20rpx; |
||||||
|
left: 10rpx; |
||||||
|
height: 40rpx; |
||||||
|
background: rgba(0, 0, 0, 0.4); |
||||||
|
border-radius: 20rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.status-img { |
||||||
|
width: 38rpx; |
||||||
|
height: 38rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.status-text { |
||||||
|
font-size: 22rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
padding: 0 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.item-title { |
||||||
|
width: 680rpx; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
line-height: 60rpx; |
||||||
|
padding: 0 20rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
background: linear-gradient(transparent, rgba(#000, 0.5)); |
||||||
|
} |
||||||
|
|
||||||
|
.like-img { |
||||||
|
position: absolute; |
||||||
|
bottom: 20rpx; |
||||||
|
right: 10rpx; |
||||||
|
width: 60rpx; |
||||||
|
height: 130rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 双图直播 |
||||||
|
.content-two { |
||||||
|
width: 100%; |
||||||
|
// -moz-column-count: 2; |
||||||
|
// -webkit-column-count: 2; |
||||||
|
// column-count: 2; |
||||||
|
// padding-top: 20rpx; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
&__item { |
||||||
|
margin-right: 30rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
|
||||||
|
&:nth-child(2n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,215 @@ |
|||||||
|
<template> |
||||||
|
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> |
||||||
|
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:1} })"> |
||||||
|
<text class="title">精品推荐</text> |
||||||
|
<view class="group-people x-f"> |
||||||
|
<text class="tip">更多</text> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="goods-box swiper-box x-f"> |
||||||
|
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000"> |
||||||
|
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item"> |
||||||
|
<view class="goods-list-box x-f"> |
||||||
|
<block v-for="mgoods in goods" :key="mgoods.id"> |
||||||
|
<view class="min-goods" @tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })"> |
||||||
|
<view class="img-box"> |
||||||
|
<!-- <view class="tag">{{ mgoods.people}}人团</view> --> |
||||||
|
<image class="img" :src="mgoods.image" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="price-box"> |
||||||
|
<view class="y-f"> |
||||||
|
<text class="seckill-current">￥{{ mgoods.price }}</text> |
||||||
|
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="title"> |
||||||
|
<slot name="titleText"></slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</block> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="swiper-dots" v-if="goodsList.length > 1"> |
||||||
|
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" |
||||||
|
:key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import shActivityGoods from '@/components/sh-activity-goods.vue'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "ProductsRecommended", |
||||||
|
components: { |
||||||
|
shActivityGoods |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
goodsList: [], |
||||||
|
swiperCurrent: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: Array |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
watch: { |
||||||
|
detail(next) { |
||||||
|
this.goodsList = this.sortData(next, 4); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
swiperChange(e) { |
||||||
|
this.swiperCurrent = e.detail.current; |
||||||
|
}, |
||||||
|
// 数据分层 |
||||||
|
sortData(oArr, length) { |
||||||
|
let arr = []; |
||||||
|
let minArr = []; |
||||||
|
oArr.forEach(c => { |
||||||
|
if (minArr.length === length) { |
||||||
|
minArr = []; |
||||||
|
} |
||||||
|
if (minArr.length === 0) { |
||||||
|
arr.push(minArr); |
||||||
|
} |
||||||
|
minArr.push(c); |
||||||
|
}); |
||||||
|
|
||||||
|
return arr; |
||||||
|
}, |
||||||
|
jump(path, query) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path, |
||||||
|
query, |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.group-goods { |
||||||
|
position: relative; |
||||||
|
z-index: 9; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-box, |
||||||
|
.carousel { |
||||||
|
width: 700rpx; |
||||||
|
height: 240upx; |
||||||
|
position: relative; |
||||||
|
border-radius: 20rpx; |
||||||
|
|
||||||
|
.carousel-item { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// padding: 0 28upx; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// border-radius: 10upx; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-dots { |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 0rpx; |
||||||
|
z-index: 66; |
||||||
|
|
||||||
|
.dot { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #eee; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.dot-active { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #a8700d; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 今日必拼+限时抢购 |
||||||
|
.group-goods { |
||||||
|
background: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.title-box { |
||||||
|
padding-bottom: 20rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.group-people { |
||||||
|
.time-box { |
||||||
|
font-size: 26rpx; |
||||||
|
color: #edbf62; |
||||||
|
|
||||||
|
.count-text-box { |
||||||
|
width: 30rpx; |
||||||
|
height: 34rpx; |
||||||
|
background: #edbf62; |
||||||
|
text-align: center; |
||||||
|
line-height: 34rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
border-radius: 6rpx; |
||||||
|
color: rgba(#fff, 0.9); |
||||||
|
margin: 0 8rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.head-box { |
||||||
|
.head-img { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
border-radius: 50%; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
font-size: 28rpx; |
||||||
|
padding-left: 30rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.cuIcon-right { |
||||||
|
font-size: 30rpx; |
||||||
|
line-height: 28rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goods-box { |
||||||
|
.goods-item { |
||||||
|
margin-right: 22rpx; |
||||||
|
|
||||||
|
&:nth-child(4n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,216 @@ |
|||||||
|
<template> |
||||||
|
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0"> |
||||||
|
<view class="title-box x-bc" @tap="$yrouter.push('/pages/shop/GoodsPromotion/index')"> |
||||||
|
<text class="title">促销单品</text> |
||||||
|
<view class="group-people x-f"> |
||||||
|
<text class="tip">更多</text> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="goods-box swiper-box x-f"> |
||||||
|
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000"> |
||||||
|
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item"> |
||||||
|
<view class="goods-list-box x-f"> |
||||||
|
<block v-for="mgoods in goods" :key="mgoods.id"> |
||||||
|
<view class="min-goods" |
||||||
|
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } })"> |
||||||
|
<view class="img-box"> |
||||||
|
<view class="tag">促销</view> |
||||||
|
<image class="img" :src="mgoods.image" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="price-box"> |
||||||
|
<view class="y-f"> |
||||||
|
<text class="seckill-current">日常价：￥{{ mgoods.price }}</text> |
||||||
|
<text class="original">仅剩：{{ mgoods.stock }}{{ mgoods.unitName }}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="title"> |
||||||
|
<slot name="titleText"></slot> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</block> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
<view class="swiper-dots" v-if="goodsList.length > 1"> |
||||||
|
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length" |
||||||
|
:key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import shActivityGoods from '@/components/sh-activity-goods.vue'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "ProductsRecommended", |
||||||
|
components: { |
||||||
|
shActivityGoods |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
goodsList: [], |
||||||
|
swiperCurrent: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
detail: Array |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() {}, |
||||||
|
watch: { |
||||||
|
detail(next) { |
||||||
|
this.goodsList = this.sortData(next, 4); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
swiperChange(e) { |
||||||
|
this.swiperCurrent = e.detail.current; |
||||||
|
}, |
||||||
|
// 数据分层 |
||||||
|
sortData(oArr, length) { |
||||||
|
let arr = []; |
||||||
|
let minArr = []; |
||||||
|
oArr.forEach(c => { |
||||||
|
if (minArr.length === length) { |
||||||
|
minArr = []; |
||||||
|
} |
||||||
|
if (minArr.length === 0) { |
||||||
|
arr.push(minArr); |
||||||
|
} |
||||||
|
minArr.push(c); |
||||||
|
}); |
||||||
|
|
||||||
|
return arr; |
||||||
|
}, |
||||||
|
jump(path, query) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path, |
||||||
|
query, |
||||||
|
}); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.group-goods { |
||||||
|
position: relative; |
||||||
|
z-index: 9; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-box, |
||||||
|
.carousel { |
||||||
|
width: 700rpx; |
||||||
|
height: 240upx; |
||||||
|
position: relative; |
||||||
|
border-radius: 20rpx; |
||||||
|
|
||||||
|
.carousel-item { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// padding: 0 28upx; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// border-radius: 10upx; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-dots { |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 0rpx; |
||||||
|
z-index: 66; |
||||||
|
|
||||||
|
.dot { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #eee; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.dot-active { |
||||||
|
width: 45rpx; |
||||||
|
height: 3rpx; |
||||||
|
background: #a8700d; |
||||||
|
border-radius: 50%; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 今日必拼+限时抢购 |
||||||
|
.group-goods { |
||||||
|
background: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.title-box { |
||||||
|
padding-bottom: 20rpx; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.group-people { |
||||||
|
.time-box { |
||||||
|
font-size: 26rpx; |
||||||
|
color: #edbf62; |
||||||
|
|
||||||
|
.count-text-box { |
||||||
|
width: 30rpx; |
||||||
|
height: 34rpx; |
||||||
|
background: #edbf62; |
||||||
|
text-align: center; |
||||||
|
line-height: 34rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
border-radius: 6rpx; |
||||||
|
color: rgba(#fff, 0.9); |
||||||
|
margin: 0 8rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.head-box { |
||||||
|
.head-img { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
border-radius: 50%; |
||||||
|
background: #ccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
font-size: 28rpx; |
||||||
|
padding-left: 30rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.cuIcon-right { |
||||||
|
font-size: 30rpx; |
||||||
|
line-height: 28rpx; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.goods-box { |
||||||
|
.goods-item { |
||||||
|
margin-right: 22rpx; |
||||||
|
|
||||||
|
&:nth-child(4n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
<template> |
||||||
|
<view ref="container"> |
||||||
|
<view class="collectionGoods" v-if="collectProductList.length > 0"> |
||||||
|
<view |
||||||
|
class="item acea-row row-between-wrapper" |
||||||
|
v-for="(item, collectProductListIndex) in collectProductList" |
||||||
|
:key="collectProductListIndex" |
||||||
|
@click="goGoodsCon(item)" |
||||||
|
> |
||||||
|
<view class="pictrue"> |
||||||
|
<image :src="item.image" /> |
||||||
|
</view> |
||||||
|
<view class="text acea-row row-column-between"> |
||||||
|
<view class="infor line1">{{ item.storeName }}</view> |
||||||
|
<view class="acea-row row-between-wrapper"> |
||||||
|
<view class="money font-color-red">￥{{ item.price }}</view> |
||||||
|
<view class="delete" @tap.stop="delCollection(collectProductListIndex)">删除</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<Loading :loaded="loadend" :loading="loading"></Loading> |
||||||
|
<view |
||||||
|
class="noCommodity" |
||||||
|
style="background-color:#fff;" |
||||||
|
v-if="collectProductList.length < 1 && page > 1" |
||||||
|
> |
||||||
|
<view class="noPictrue"> |
||||||
|
<image src="@/static/images/noCollection.png" class="image" /> |
||||||
|
</view> |
||||||
|
<Recommend></Recommend> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Recommend from "@/components/Recommend"; |
||||||
|
import { getCollectUser, getCollectDel } from "@/api/user"; |
||||||
|
import Loading from "@/components/Loading"; |
||||||
|
export default { |
||||||
|
name: "GoodsFoot", |
||||||
|
components: { |
||||||
|
Recommend, |
||||||
|
Loading |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
data: function() { |
||||||
|
return { |
||||||
|
page: 1, |
||||||
|
limit: 20, |
||||||
|
type:'foot', |
||||||
|
collectProductList: [], |
||||||
|
loadTitle: "", |
||||||
|
loading: false, |
||||||
|
loadend: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted: function() { |
||||||
|
this.get_user_collect_product(); |
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
!this.loading && this.get_user_collect_product(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
goGoodsCon(item) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path: "/pages/shop/GoodsCon/index", |
||||||
|
query: { id: item.pid } |
||||||
|
}); |
||||||
|
}, |
||||||
|
get_user_collect_product: function() { |
||||||
|
let that = this; |
||||||
|
if (that.loading) return; //阻止下次请求（false可以进行请求）； |
||||||
|
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）； |
||||||
|
that.loading = true; |
||||||
|
getCollectUser(that.page, that.limit,that.type).then(res => { |
||||||
|
that.loading = false; |
||||||
|
//apply();js将一个数组插入另一个数组; |
||||||
|
that.collectProductList.push.apply(that.collectProductList, res.data); |
||||||
|
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成； |
||||||
|
that.page = that.page + 1; |
||||||
|
}); |
||||||
|
}, |
||||||
|
//删除收藏； |
||||||
|
delCollection: function(index) { |
||||||
|
let that = this, |
||||||
|
id = that.collectProductList[index].pid, |
||||||
|
category = that.collectProductList[index].category; |
||||||
|
getCollectDel(id, category).then(function() { |
||||||
|
uni.showToast({ |
||||||
|
title: "删除成功", |
||||||
|
icon: "success", |
||||||
|
duration: 2000, |
||||||
|
complete: () => { |
||||||
|
that.collectProductList.splice(index, 1); |
||||||
|
that.$set(that, "collectProductList", that.collectProductList); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
@ -0,0 +1,182 @@ |
|||||||
|
<template> |
||||||
|
<view class="page_box"> |
||||||
|
<view class="head_box"> |
||||||
|
<view class="live-tab"> |
||||||
|
<view class="live-tab__item" v-for="tab in liveTab" :key="tab.title" @tap="selTab(tab)"> |
||||||
|
<view class="live-tab__item-name">{{ tab.name }}</view> |
||||||
|
<text class="live-tab__item--link" :class="{ 'live-tab__item--active': tabCur == tab.title }"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="content_box"> |
||||||
|
<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box"> |
||||||
|
<view class="list-box"> |
||||||
|
<block v-for="live in liveList" :key="live.roomId"> |
||||||
|
<shop-live-card :detail="live"></shop-live-card> |
||||||
|
</block> |
||||||
|
</view> |
||||||
|
<view v-if="liveList.length" class="cu-load text-gray" :class="loadStatus"></view> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
<Loading :loaded="loaded" :loading="loading"></Loading> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
yxWechatLive |
||||||
|
} from "@/api/live"; |
||||||
|
import ShopLiveCard from '@/components/ShopLiveCard.vue' |
||||||
|
import Loading from "@/components/Loading"; |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
ShopLiveCard, |
||||||
|
Loading |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tabCur: 'all', |
||||||
|
liveStatus: '', |
||||||
|
loaded: false, |
||||||
|
loading: false, |
||||||
|
liveTab: [{ |
||||||
|
title: 'all', |
||||||
|
name: '全部', |
||||||
|
code: '' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'prevue', |
||||||
|
name: '预告', |
||||||
|
code: '102' |
||||||
|
|
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'living', |
||||||
|
name: '直播中', |
||||||
|
code: '101' |
||||||
|
|
||||||
|
}, |
||||||
|
{ |
||||||
|
title: 'lived', |
||||||
|
name: '已结束', |
||||||
|
code: '103' |
||||||
|
|
||||||
|
} |
||||||
|
], |
||||||
|
liveList: [], |
||||||
|
loadStatus: '', //loading,over |
||||||
|
currentPage: 0, |
||||||
|
size: 10, |
||||||
|
lastPage: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
onLoad() { |
||||||
|
this.getLiveList(); |
||||||
|
}, |
||||||
|
onHide() {}, |
||||||
|
methods: { |
||||||
|
// 切换tab |
||||||
|
selTab(tab) { |
||||||
|
console.log(tab) |
||||||
|
this.tabCur = tab.title; |
||||||
|
this.liveStatus = tab.code; |
||||||
|
this.liveList = []; |
||||||
|
this.loaded=false; |
||||||
|
this.loading=false; |
||||||
|
this.getLiveListTab(); |
||||||
|
}, |
||||||
|
|
||||||
|
// 直播列表 |
||||||
|
getLiveListTab() { |
||||||
|
let that = this; |
||||||
|
yxWechatLive({ |
||||||
|
liveStatus: that.liveStatus, |
||||||
|
page: 0, |
||||||
|
size: that.size |
||||||
|
}).then(res => { |
||||||
|
that.liveList = [...that.liveList, ...res.data.content]; |
||||||
|
that.lastPage = res.data.lastPage; |
||||||
|
this.loaded = res.data.content.length < that.size; |
||||||
|
this.loading = false; |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 直播列表 |
||||||
|
getLiveList() { |
||||||
|
let that = this; |
||||||
|
if (this.loading || this.loaded) return; |
||||||
|
this.loading = true; |
||||||
|
yxWechatLive({ |
||||||
|
liveStatus: this.liveStatus, |
||||||
|
page: this.currentPage, |
||||||
|
size: this.size |
||||||
|
}).then(res => { |
||||||
|
that.liveList = that.liveList.concat(res.data.content) |
||||||
|
this.currentPage++; |
||||||
|
this.loaded = res.data.content.length < that.size; |
||||||
|
this.loading = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
!this.loading && this.getLiveList(); |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
// tab |
||||||
|
.live-tab { |
||||||
|
width: 100%; |
||||||
|
height: 96rpx; |
||||||
|
background: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&__item { |
||||||
|
flex: 1; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__item-name { |
||||||
|
font-size: 28rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: bold; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__item--link { |
||||||
|
width: 68rpx; |
||||||
|
height: 4rpx; |
||||||
|
background: transparent; |
||||||
|
border-radius: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
&__item--active { |
||||||
|
width: 68rpx; |
||||||
|
height: 4rpx; |
||||||
|
background: rgba(213, 166, 90, 1); |
||||||
|
border-radius: 2rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 瀑布流 list |
||||||
|
.scroll-box { |
||||||
|
.list-box { |
||||||
|
width: 100%; |
||||||
|
-moz-column-count: 2; |
||||||
|
-webkit-column-count: 2; |
||||||
|
column-count: 2; |
||||||
|
padding: 25rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,510 @@ |
|||||||
|
@charset "UTF-8"; |
||||||
|
/** |
||||||
|
* 这里是uni-app内置的常用样式变量 |
||||||
|
* |
||||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 |
||||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App |
||||||
|
* |
||||||
|
*/ |
||||||
|
/** |
||||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 |
||||||
|
* |
||||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 |
||||||
|
*/ |
||||||
|
/* 颜色变量 */ |
||||||
|
/* 行为相关颜色 */ |
||||||
|
/* 文字基本颜色 */ |
||||||
|
/* 背景颜色 */ |
||||||
|
/* 边框颜色 */ |
||||||
|
/* 尺寸变量 */ |
||||||
|
/* 文字尺寸 */ |
||||||
|
/* 图片尺寸 */ |
||||||
|
/* Border Radius */ |
||||||
|
/* 水平间距 */ |
||||||
|
/* 垂直间距 */ |
||||||
|
/* 透明度 */ |
||||||
|
/* 文章场景相关 */ |
||||||
|
/* ================== |
||||||
|
自定义变量 |
||||||
|
==================== */ |
||||||
|
/*盒子模型*/ |
||||||
|
.mt2 { |
||||||
|
margin-top: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mr2 { |
||||||
|
margin-right: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mb2 { |
||||||
|
margin-bottom: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ml2 { |
||||||
|
margin-left: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mx2 { |
||||||
|
margin-left: 2rpx; |
||||||
|
margin-right: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.my2 { |
||||||
|
margin-top: 2rpx; |
||||||
|
margin-bottom: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ma2 { |
||||||
|
margin: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mt4 { |
||||||
|
margin-top: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mr4 { |
||||||
|
margin-right: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mb4 { |
||||||
|
margin-bottom: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ml4 { |
||||||
|
margin-left: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mx4 { |
||||||
|
margin-left: 4rpx; |
||||||
|
margin-right: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.my4 { |
||||||
|
margin-top: 4rpx; |
||||||
|
margin-bottom: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ma4 { |
||||||
|
margin: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mt8 { |
||||||
|
margin-top: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mr8 { |
||||||
|
margin-right: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mb8 { |
||||||
|
margin-bottom: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ml8 { |
||||||
|
margin-left: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mx8 { |
||||||
|
margin-left: 8rpx; |
||||||
|
margin-right: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.my8 { |
||||||
|
margin-top: 8rpx; |
||||||
|
margin-bottom: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ma8 { |
||||||
|
margin: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mt10 { |
||||||
|
margin-top: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mr10 { |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mb10 { |
||||||
|
margin-bottom: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ml10 { |
||||||
|
margin-left: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mx10 { |
||||||
|
margin-left: 10rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.my10 { |
||||||
|
margin-top: 10rpx; |
||||||
|
margin-bottom: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ma10 { |
||||||
|
margin: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mt15 { |
||||||
|
margin-top: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mr15 { |
||||||
|
margin-right: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mb15 { |
||||||
|
margin-bottom: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ml15 { |
||||||
|
margin-left: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mx15 { |
||||||
|
margin-left: 15rpx; |
||||||
|
margin-right: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.my15 { |
||||||
|
margin-top: 15rpx; |
||||||
|
margin-bottom: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ma15 { |
||||||
|
margin: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mt20 { |
||||||
|
margin-top: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mr20 { |
||||||
|
margin-right: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mb20 { |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ml20 { |
||||||
|
margin-left: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mx20 { |
||||||
|
margin-left: 20rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.my20 { |
||||||
|
margin-top: 20rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ma20 { |
||||||
|
margin: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mt24 { |
||||||
|
margin-top: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mr24 { |
||||||
|
margin-right: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mb24 { |
||||||
|
margin-bottom: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ml24 { |
||||||
|
margin-left: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mx24 { |
||||||
|
margin-left: 24rpx; |
||||||
|
margin-right: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.my24 { |
||||||
|
margin-top: 24rpx; |
||||||
|
margin-bottom: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ma24 { |
||||||
|
margin: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mt30 { |
||||||
|
margin-top: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mr30 { |
||||||
|
margin-right: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mb30 { |
||||||
|
margin-bottom: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ml30 { |
||||||
|
margin-left: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.mx30 { |
||||||
|
margin-left: 30rpx; |
||||||
|
margin-right: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.my30 { |
||||||
|
margin-top: 30rpx; |
||||||
|
margin-bottom: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.ma30 { |
||||||
|
margin: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pt2 { |
||||||
|
padding-top: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pr2 { |
||||||
|
padding-right: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pb2 { |
||||||
|
padding-bottom: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pl2 { |
||||||
|
padding-left: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.px2 { |
||||||
|
padding-left: 2rpx; |
||||||
|
padding-right: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.py2 { |
||||||
|
padding-top: 2rpx; |
||||||
|
padding-bottom: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pa2 { |
||||||
|
padding: 2rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pt4 { |
||||||
|
padding-top: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pr4 { |
||||||
|
padding-right: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pb4 { |
||||||
|
padding-bottom: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pl4 { |
||||||
|
padding-left: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.px4 { |
||||||
|
padding-left: 4rpx; |
||||||
|
padding-right: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.py4 { |
||||||
|
padding-top: 4rpx; |
||||||
|
padding-bottom: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pa4 { |
||||||
|
padding: 4rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pt8 { |
||||||
|
padding-top: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pr8 { |
||||||
|
padding-right: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pb8 { |
||||||
|
padding-bottom: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pl8 { |
||||||
|
padding-left: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.px8 { |
||||||
|
padding-left: 8rpx; |
||||||
|
padding-right: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.py8 { |
||||||
|
padding-top: 8rpx; |
||||||
|
padding-bottom: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pa8 { |
||||||
|
padding: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pt10 { |
||||||
|
padding-top: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pr10 { |
||||||
|
padding-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pb10 { |
||||||
|
padding-bottom: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pl10 { |
||||||
|
padding-left: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.px10 { |
||||||
|
padding-left: 10rpx; |
||||||
|
padding-right: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.py10 { |
||||||
|
padding-top: 10rpx; |
||||||
|
padding-bottom: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pa10 { |
||||||
|
padding: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pt15 { |
||||||
|
padding-top: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pr15 { |
||||||
|
padding-right: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pb15 { |
||||||
|
padding-bottom: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pl15 { |
||||||
|
padding-left: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.px15 { |
||||||
|
padding-left: 15rpx; |
||||||
|
padding-right: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.py15 { |
||||||
|
padding-top: 15rpx; |
||||||
|
padding-bottom: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pa15 { |
||||||
|
padding: 15rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pt20 { |
||||||
|
padding-top: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pr20 { |
||||||
|
padding-right: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pb20 { |
||||||
|
padding-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pl20 { |
||||||
|
padding-left: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.px20 { |
||||||
|
padding-left: 20rpx; |
||||||
|
padding-right: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.py20 { |
||||||
|
padding-top: 20rpx; |
||||||
|
padding-bottom: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pa20 { |
||||||
|
padding: 20rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pt24 { |
||||||
|
padding-top: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pr24 { |
||||||
|
padding-right: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pb24 { |
||||||
|
padding-bottom: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pl24 { |
||||||
|
padding-left: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.px24 { |
||||||
|
padding-left: 24rpx; |
||||||
|
padding-right: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.py24 { |
||||||
|
padding-top: 24rpx; |
||||||
|
padding-bottom: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pa24 { |
||||||
|
padding: 24rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pt30 { |
||||||
|
padding-top: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pr30 { |
||||||
|
padding-right: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pb30 { |
||||||
|
padding-bottom: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pl30 { |
||||||
|
padding-left: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.px30 { |
||||||
|
padding-left: 30rpx; |
||||||
|
padding-right: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.py30 { |
||||||
|
padding-top: 30rpx; |
||||||
|
padding-bottom: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.pa30 { |
||||||
|
padding: 30rpx; |
||||||
|
} |
||||||
|
/*# sourceMappingURL=uni.css.map */ |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||||||
|
.mt2{margin-top:2rpx}.mr2{margin-right:2rpx}.mb2{margin-bottom:2rpx}.ml2{margin-left:2rpx}.mx2{margin-left:2rpx;margin-right:2rpx}.my2{margin-top:2rpx;margin-bottom:2rpx}.ma2{margin:2rpx}.mt4{margin-top:4rpx}.mr4{margin-right:4rpx}.mb4{margin-bottom:4rpx}.ml4{margin-left:4rpx}.mx4{margin-left:4rpx;margin-right:4rpx}.my4{margin-top:4rpx;margin-bottom:4rpx}.ma4{margin:4rpx}.mt8{margin-top:8rpx}.mr8{margin-right:8rpx}.mb8{margin-bottom:8rpx}.ml8{margin-left:8rpx}.mx8{margin-left:8rpx;margin-right:8rpx}.my8{margin-top:8rpx;margin-bottom:8rpx}.ma8{margin:8rpx}.mt10{margin-top:10rpx}.mr10{margin-right:10rpx}.mb10{margin-bottom:10rpx}.ml10{margin-left:10rpx}.mx10{margin-left:10rpx;margin-right:10rpx}.my10{margin-top:10rpx;margin-bottom:10rpx}.ma10{margin:10rpx}.mt15{margin-top:15rpx}.mr15{margin-right:15rpx}.mb15{margin-bottom:15rpx}.ml15{margin-left:15rpx}.mx15{margin-left:15rpx;margin-right:15rpx}.my15{margin-top:15rpx;margin-bottom:15rpx}.ma15{margin:15rpx}.mt20{margin-top:20rpx}.mr20{margin-right:20rpx}.mb20{margin-bottom:20rpx}.ml20{margin-left:20rpx}.mx20{margin-left:20rpx;margin-right:20rpx}.my20{margin-top:20rpx;margin-bottom:20rpx}.ma20{margin:20rpx}.mt24{margin-top:24rpx}.mr24{margin-right:24rpx}.mb24{margin-bottom:24rpx}.ml24{margin-left:24rpx}.mx24{margin-left:24rpx;margin-right:24rpx}.my24{margin-top:24rpx;margin-bottom:24rpx}.ma24{margin:24rpx}.mt30{margin-top:30rpx}.mr30{margin-right:30rpx}.mb30{margin-bottom:30rpx}.ml30{margin-left:30rpx}.mx30{margin-left:30rpx;margin-right:30rpx}.my30{margin-top:30rpx;margin-bottom:30rpx}.ma30{margin:30rpx}.pt2{padding-top:2rpx}.pr2{padding-right:2rpx}.pb2{padding-bottom:2rpx}.pl2{padding-left:2rpx}.px2{padding-left:2rpx;padding-right:2rpx}.py2{padding-top:2rpx;padding-bottom:2rpx}.pa2{padding:2rpx}.pt4{padding-top:4rpx}.pr4{padding-right:4rpx}.pb4{padding-bottom:4rpx}.pl4{padding-left:4rpx}.px4{padding-left:4rpx;padding-right:4rpx}.py4{padding-top:4rpx;padding-bottom:4rpx}.pa4{padding:4rpx}.pt8{padding-top:8rpx}.pr8{padding-right:8rpx}.pb8{padding-bottom:8rpx}.pl8{padding-left:8rpx}.px8{padding-left:8rpx;padding-right:8rpx}.py8{padding-top:8rpx;padding-bottom:8rpx}.pa8{padding:8rpx}.pt10{padding-top:10rpx}.pr10{padding-right:10rpx}.pb10{padding-bottom:10rpx}.pl10{padding-left:10rpx}.px10{padding-left:10rpx;padding-right:10rpx}.py10{padding-top:10rpx;padding-bottom:10rpx}.pa10{padding:10rpx}.pt15{padding-top:15rpx}.pr15{padding-right:15rpx}.pb15{padding-bottom:15rpx}.pl15{padding-left:15rpx}.px15{padding-left:15rpx;padding-right:15rpx}.py15{padding-top:15rpx;padding-bottom:15rpx}.pa15{padding:15rpx}.pt20{padding-top:20rpx}.pr20{padding-right:20rpx}.pb20{padding-bottom:20rpx}.pl20{padding-left:20rpx}.px20{padding-left:20rpx;padding-right:20rpx}.py20{padding-top:20rpx;padding-bottom:20rpx}.pa20{padding:20rpx}.pt24{padding-top:24rpx}.pr24{padding-right:24rpx}.pb24{padding-bottom:24rpx}.pl24{padding-left:24rpx}.px24{padding-left:24rpx;padding-right:24rpx}.py24{padding-top:24rpx;padding-bottom:24rpx}.pa24{padding:24rpx}.pt30{padding-top:30rpx}.pr30{padding-right:30rpx}.pb30{padding-bottom:30rpx}.pl30{padding-left:30rpx}.px30{padding-left:30rpx;padding-right:30rpx}.py30{padding-top:30rpx;padding-bottom:30rpx}.pa30{padding:30rpx} |
||||||
Loading…
Reference in new issue