xuwenbo
5 years ago
74 changed files with 9953 additions and 4633 deletions
@ -1,24 +1,91 @@
|
||||
<script> |
||||
export default { |
||||
onLaunch: function() { |
||||
console.log('App Launch') |
||||
}, |
||||
onShow: function() { |
||||
console.log('App Show') |
||||
}, |
||||
onHide: function() { |
||||
|
||||
console.log('App Hide') |
||||
} |
||||
} |
||||
import Vue from 'vue' |
||||
export default { |
||||
onLaunch: function() { |
||||
// 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"); |
||||
}, |
||||
onHide: function () { |
||||
console.log("App Hide"); |
||||
}, |
||||
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 |
||||
|
||||
// #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> |
||||
|
||||
|
||||
|
||||
|
||||
<style lang="less"> |
||||
/*每个页面公共css */ |
||||
@import "animate.css"; |
||||
@import "./assets/iconfont/iconfont.css"; |
||||
@import "./assets/css/base.less"; |
||||
@import "./assets/css/reset.less"; |
||||
@import "./assets/css/style.less"; |
||||
</style> |
||||
/*每个页面公共css */ |
||||
@import "animate.css"; |
||||
@import "./assets/iconfont/iconfont.css"; |
||||
@import "./assets/css/base.less"; |
||||
@import "./assets/css/reset.less"; |
||||
@import "./assets/css/style.less"; |
||||
</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 */ |
||||
@ -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 */ |
||||
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> |
||||
<view |
||||
class="Loads acea-row row-center-wrapper" |
||||
v-if="loading || !loaded" |
||||
style="margin-top: 20rpx;" |
||||
> |
||||
<view class="Loads acea-row row-center-wrapper" v-if="loading || !loaded" style="margin-top: 20rpx;"> |
||||
<template v-if="loading"> |
||||
<view |
||||
class="iconfont icon-jiazai loading acea-row row-center-wrapper" |
||||
></view> |
||||
<view class="iconfont icon-jiazai loading acea-row row-center-wrapper"></view> |
||||
正在加载中 |
||||
</template> |
||||
<template v-else> |
||||
<template v-if="!loading"> |
||||
上拉加载更多 |
||||
</template> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Loading", |
||||
props: { |
||||
loaded: Boolean, |
||||
loading: Boolean |
||||
} |
||||
}; |
||||
export default { |
||||
name: "Loading", |
||||
props: { |
||||
loaded: Boolean, |
||||
loading: Boolean |
||||
} |
||||
}; |
||||
</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> |
||||
<view class="promotionGood" v-if="benefit.length > 0"> |
||||
<view class="item acea-row row-between-wrapper" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex" @click="routerGo(item)"> |
||||
<view class="pictrue"><image :src="item.image" class="image" /></view> |
||||
<view class="text"> |
||||
<view class="name line1">{{ item.storeName }}</view> |
||||
<view class="sp-money acea-row"> |
||||
<view class="moneyCon"> |
||||
促销价: ￥ |
||||
<text class="num">{{ item.price }}</text> |
||||
<view> |
||||
<view class="sh-title-card mb10"> |
||||
<view class="title-box"> |
||||
<image class="title-bg" src="@/static/images/title1.png" mode="aspectFill"></image> |
||||
<view class="title-text">为你推荐</view> |
||||
<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> --> |
||||
</view> |
||||
</view> |
||||
<view class="hot-goods mx20 mb10" v-if="benefit.length"> |
||||
<view class="goods-list x-f"> |
||||
<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 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 class="sales miso-font">仅剩：{{ item.stock }}{{ item.unitName }}</view> |
||||
</view> |
||||
<view class="x-f tag-box"> |
||||
<!-- <view class="discount">新人礼</view> |
||||
<view class="discount">满100减60</view> --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="acea-row row-between-wrapper"> |
||||
<view class="money">日常价：￥{{ item.otPrice }}</view> |
||||
<view>仅剩：{{ item.stock }}{{ item.unitName }}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: 'PromotionGood', |
||||
props: ['benefit'], |
||||
data: function() { |
||||
return {}; |
||||
}, |
||||
methods: { |
||||
routerGo(item) { |
||||
this.$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } }); |
||||
export default { |
||||
name: 'PromotionGood', |
||||
props: ['benefit'], |
||||
data: function () { |
||||
return {}; |
||||
}, |
||||
methods: { |
||||
routerGo(item) { |
||||
this.$yrouter.push({ |
||||
path: '/pages/shop/GoodsCon/index', |
||||
query: { |
||||
id: item.id |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
mounted() {} |
||||
}; |
||||
</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; |
||||
} |
||||
}, |
||||
mounted() { |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
.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> |
||||
@ -1,50 +1,52 @@
|
||||
<template> |
||||
<view class="evaluateWtapper"> |
||||
<view |
||||
class="evaluateItem" |
||||
v-for="(item, evaluateWtapperIndex) in reply" |
||||
:key="evaluateWtapperIndex" |
||||
> |
||||
<view class="pic-text acea-row row-middle"> |
||||
<view class="pictrue"> |
||||
<image :src="item.avatar" class="image" /> |
||||
<view class="evaluateWtapper" v-if="reply&&reply.length>0"> |
||||
<view v-for="(item, evaluateWtapperIndex) in reply" :key="evaluateWtapperIndex"> |
||||
<view class="evaluateItem" v-if="item"> |
||||
<view class="pic-text acea-row row-middle"> |
||||
<view class="pictrue"> |
||||
<image :src="item.avatar" class="image" /> |
||||
</view> |
||||
<view class="acea-row row-middle"> |
||||
<view class="name line1">{{ item.nickname }}</view> |
||||
<view class="start" :class="'star' + item.star"></view> |
||||
</view> |
||||
</view> |
||||
<view class="acea-row row-middle"> |
||||
<view class="name line1">{{ item.nickname }}</view> |
||||
<view class="start" :class="'star' + item.star"></view> |
||||
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view> |
||||
<view class="evaluate-infor">{{ item.comment }}</view> |
||||
<view class="imgList acea-row"> |
||||
<view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq"> |
||||
<image :src="itemn" class="image" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="time">{{ item.createTime }} {{ item.sku||'' }}</view> |
||||
<view class="evaluate-infor">{{ item.comment }}</view> |
||||
<view class="imgList acea-row"> |
||||
<view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq"> |
||||
<image :src="itemn" class="image" /> |
||||
<view class="reply" v-if="item.merchantReplyContent"> |
||||
<span class="font-color-red">yshop店员</span> |
||||
：{{item.merchantReplyContent}} |
||||
</view> |
||||
</view> |
||||
<view class="reply" v-if="item.merchantReplyContent"> |
||||
<span class="font-color-red">yshop店员</span> |
||||
：{{item.merchantReplyContent}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import { dataFormat } from "@/utils"; |
||||
import { |
||||
dataFormat |
||||
} from "@/utils"; |
||||
|
||||
export default { |
||||
name: "UserEvaluation", |
||||
props: { |
||||
reply: { |
||||
type: Array, |
||||
default: () => [] |
||||
export default { |
||||
name: "UserEvaluation", |
||||
props: { |
||||
reply: { |
||||
type: Array, |
||||
default: () => [] |
||||
} |
||||
}, |
||||
data: function () { |
||||
return {}; |
||||
}, |
||||
mounted: function () { |
||||
console.log(this) |
||||
}, |
||||
methods: { |
||||
dataFormat |
||||
} |
||||
}, |
||||
data: function() { |
||||
return {}; |
||||
}, |
||||
mounted: function() {}, |
||||
methods: { |
||||
dataFormat |
||||
} |
||||
}; |
||||
}; |
||||
</script> |
||||
|
||||
@ -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://h5api.dayouqiantu.cn/api';
|
||||
export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static'; |
||||
// 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_RESOURCES_URL = 'https://wx.yixiang.co/static'; |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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> |
||||
<view class="group-list" ref="container"> |
||||
<view class="list" v-if="combinationList.length>0"> |
||||
<view |
||||
class="item acea-row row-between-wrapper" |
||||
v-for="(item, combinationListIndex) in combinationList" |
||||
:key="combinationListIndex" |
||||
@click="link(item.id)" |
||||
> |
||||
<view class="pictrue"> |
||||
<image :src="item.image" /> |
||||
</view> |
||||
<view class="text"> |
||||
<view class="line1" v-text="item.title"></view> |
||||
<view class="acea-row"> |
||||
<view class="team acea-row row-middle cart-color"> |
||||
<view class="iconfont icon-pintuan"></view> |
||||
<view class="num" v-text="item.people + '人团'"></view> |
||||
</view> |
||||
<view class="page_box"> |
||||
<view class="content_box"> |
||||
<scroll-view class="scroll-box" scroll-y enable-back-to-top scroll-with-animation @scrolltolower="loadMore"> |
||||
<view class="group-wrap"> |
||||
<view class="group-head x-bc"> |
||||
<text class="group-head__title">爆款拼团</text> |
||||
<text class="group-head__notice">省钱省心限时拼</text> |
||||
</view> |
||||
<view class="bottom acea-row row-between-wrapper"> |
||||
<view class="money"> |
||||
￥ |
||||
<text class="num" v-text="item.price"></text> |
||||
<text class="y-money" v-text="'￥' + item.productPrice"></text> |
||||
</view> |
||||
<view class="groupBnt bg-color-red"> |
||||
去拼团 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
<view class="group-box"> |
||||
<view class="goods-item" v-for="(groupon, index) in grouponList" :key="groupon.id"> |
||||
<activity-card :cId="groupon.id" :title="groupon.title" :info="groupon.info" :img="groupon.image" |
||||
:price="groupon.price" :productPrice="groupon.productPrice"> |
||||
<block slot="tag"> |
||||
<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> |
||||
<text class="group-num">{{ groupon.people || 0 }}人团</text> |
||||
</view> |
||||
</block> |
||||
<block slot="btn"><button class="cu-btn buy-btn" |
||||
@tap.stop="jump('/pages/activity/GroupDetails/index', { id: groupon.id })">马上拼</button></block> |
||||
</activity-card> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<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> |
||||
</scroll-view> |
||||
</view> |
||||
<Loading :loaded="loaded" :loading="loading"></Loading> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getCombinationList } from "@/api/activity"; |
||||
import Loading from "@/components/Loading"; |
||||
|
||||
export default { |
||||
name: "GoodsGroup", |
||||
components: { |
||||
Loading |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
return { |
||||
combinationList: [], |
||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
||||
loading: false, //当前接口是否请求完成 false 完成 true 未完成 |
||||
page: 1, //页码 |
||||
limit: 20, //数量 |
||||
loadingList: false |
||||
}; |
||||
}, |
||||
mounted: function() { |
||||
// document.querySelector('body').setAttribute('style', 'background-color:#eb3729'); |
||||
this.getCombinationList(); |
||||
}, |
||||
onReachBottom() { |
||||
!this.loadingList && this.getCombinationList(); |
||||
}, |
||||
methods: { |
||||
getCombinationList: function() { |
||||
var that = this; |
||||
if (that.loading) return; |
||||
if (that.status) return; |
||||
getCombinationList({ page: that.page, limit: that.limit }).then(res => { |
||||
that.status = res.data.length < that.limit; |
||||
that.combinationList.push.apply(that.combinationList, res.data); |
||||
that.page++; |
||||
that.loading = false; |
||||
}); |
||||
import activityCard from './children/activity-card.vue'; |
||||
import Loading from "@/components/Loading"; |
||||
|
||||
|
||||
import { |
||||
getCombinationList |
||||
} from "@/api/activity"; |
||||
export default { |
||||
components: { |
||||
activityCard, |
||||
Loading |
||||
}, |
||||
data() { |
||||
return { |
||||
emptyData: { |
||||
img: '/static/imgs/empty/empty_goods.png', |
||||
tip: '还没有拼团商品噢，去首页看看吧~', |
||||
path: '/pages/index/index', |
||||
pathText: '去首页逛逛' |
||||
}, |
||||
loaded: false, |
||||
loading: false, |
||||
lastPage: 0, |
||||
currentPage: 1, |
||||
limit: 10, |
||||
grouponList: [] |
||||
}; |
||||
}, |
||||
onLoad() { |
||||
this.getGrouponList(); |
||||
}, |
||||
link: function(id) { |
||||
this.$yrouter.push({ |
||||
path: "/pages/activity/GroupDetails/index", |
||||
query: { id } |
||||
}); |
||||
onPullDownRefresh() {}, |
||||
computed: {}, |
||||
methods: { |
||||
// 路由跳转 |
||||
jump(path, parmas) { |
||||
this.$yrouter.push({ |
||||
path: path, |
||||
query: parmas |
||||
}); |
||||
}, |
||||
// 加载更多 |
||||
loadMore() { |
||||
|
||||
}, |
||||
// 拼团列表 |
||||
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> |
||||
|
||||
<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> |
||||
|
||||
@ -1,219 +1,192 @@
|
||||
<template> |
||||
<view class="container"> |
||||
<view v-if="!token"> |
||||
<!-- #ifdef MP-WEIXIN --> |
||||
<view> |
||||
<view class="getUserInfo"> |
||||
<text>您还未允许微信登录授权，请点击下方按钮允许微信授权登录。</text> |
||||
<button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">允许微信登录授权</button> |
||||
<view style="height:20rpx"></view> |
||||
<button @click="back">取消微信登录授权</button> |
||||
</view> |
||||
<!-- #ifdef MP-WEIXIN --> |
||||
<view v-if="!token" class="force-login-wrap"> |
||||
<!-- <image class="logo-bg" src="@/static/images/logo_bg.png" mode="aspectFill"></image> --> |
||||
<view class="force-login__content y-f"> |
||||
<open-data class="user-avatar" type="userAvatarUrl"></open-data> |
||||
<open-data class="user-name" type="userNickName"></open-data> |
||||
<view class="login-notice">为了提供更优质的服务，需要获取您的头像昵称</view> |
||||
<button class="cu-btn author-btn" @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看</button> |
||||
<button class="cu-btn close-btn" @tap="back">暂不授权</button> |
||||
</view> |
||||
<!-- #endif --> |
||||
<!-- #ifndef MP-WEIXIN --> |
||||
<view> |
||||
<view class="getUserInfo"> |
||||
<text>请先登录</text> |
||||
<button type="primary" @tap="toLogin">去登录</button> |
||||
</view> |
||||
</view> |
||||
<!-- #endif --> |
||||
<!-- #ifndef MP-WEIXIN --> |
||||
<view class="force-login-wrap"> |
||||
<!-- <image class="logo-bg" src="@/static/images/logo_bg.png" mode="aspectFill"></image> --> |
||||
<view class="force-login__content y-f"> |
||||
<view class="login-notice">为了提供更优质的服务，请先登录</view> |
||||
<button class="cu-btn author-btn" @tap="toLogin">去登录</button> |
||||
</view> |
||||
<!-- #endif --> |
||||
</view> |
||||
<!-- #endif --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapState, mapMutations, mapActions } from "vuex"; |
||||
import { wxappAuth, getUser } from "@/api/user"; |
||||
import dayjs from "dayjs"; |
||||
import cookie from "@/utils/store/cookie"; |
||||
import { login, authorize } from "@/utils"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
authorize: false, |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState(["isAuthorization", "$deviceType", "token"]), |
||||
}, |
||||
onShow() { |
||||
// // 先校验用户是否授权，如果没有授权，显示授权按钮 |
||||
}, |
||||
onHide() { |
||||
this.updateAuthorizationPage(false); |
||||
this.changeAuthorization(false); |
||||
}, |
||||
onUnload() { |
||||
this.updateAuthorizationPage(false); |
||||
this.changeAuthorization(false); |
||||
}, |
||||
methods: { |
||||
...mapActions(["changeAuthorization", "setUserInfo"]), |
||||
...mapMutations(["updateAuthorizationPage"]), |
||||
toLogin() { |
||||
this.$yrouter.push({ |
||||
path: "/pages/user/Login/index", |
||||
query: {}, |
||||
}); |
||||
import { |
||||
mapState, |
||||
mapMutations, |
||||
mapActions |
||||
} from "vuex"; |
||||
import { |
||||
wxappAuth, |
||||
getUser |
||||
} from "@/api/user"; |
||||
import dayjs from "dayjs"; |
||||
import cookie from "@/utils/store/cookie"; |
||||
import { |
||||
login, |
||||
authorize |
||||
} from "@/utils"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
authorize: false, |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState(["isAuthorization", "$deviceType", "token"]), |
||||
}, |
||||
onShow() { |
||||
// // 先校验用户是否授权，如果没有授权，显示授权按钮 |
||||
}, |
||||
onHide() { |
||||
this.updateAuthorizationPage(false); |
||||
this.changeAuthorization(false); |
||||
}, |
||||
back() { |
||||
this.$yrouter.switchTab({ |
||||
path: "/pages/home/index", |
||||
query: {}, |
||||
}); |
||||
onUnload() { |
||||
this.updateAuthorizationPage(false); |
||||
this.changeAuthorization(false); |
||||
}, |
||||
getUserInfo(data) { |
||||
if (data.detail.errMsg == "getUserInfo:fail auth deny") { |
||||
uni.showToast({ |
||||
title: "取消授权", |
||||
icon: "none", |
||||
duration: 2000, |
||||
methods: { |
||||
...mapActions(["changeAuthorization", "setUserInfo"]), |
||||
...mapMutations(["updateAuthorizationPage"]), |
||||
toLogin() { |
||||
this.$yrouter.push({ |
||||
path: "/pages/user/Login/index", |
||||
query: {}, |
||||
}); |
||||
return; |
||||
} |
||||
uni.showLoading({ |
||||
title: "登录中", |
||||
}); |
||||
login() |
||||
.then((res) => { |
||||
this.$yrouter.replace({ path: cookie.get("redirect") }); |
||||
}) |
||||
.catch((error) => { |
||||
console.log(error); |
||||
}, |
||||
back() { |
||||
this.$yrouter.switchTab({ |
||||
path: "/pages/home/index", |
||||
query: {}, |
||||
}); |
||||
}, |
||||
getUserInfo(data) { |
||||
if (data.detail.errMsg == "getUserInfo:fail auth deny") { |
||||
uni.showToast({ |
||||
title: error, |
||||
title: "取消授权", |
||||
icon: "none", |
||||
duration: 2000, |
||||
}); |
||||
return; |
||||
} |
||||
uni.showLoading({ |
||||
title: "登录中", |
||||
}); |
||||
login() |
||||
.then((res) => { |
||||
this.$yrouter.replace({ |
||||
path: cookie.get("redirect") |
||||
}); |
||||
}) |
||||
.catch((error) => { |
||||
console.log(error); |
||||
uni.showToast({ |
||||
title: error, |
||||
icon: "none", |
||||
duration: 2000, |
||||
}); |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() {}, |
||||
}; |
||||
mounted() {}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.sp-cell { |
||||
height: 20rpx; |
||||
} |
||||
|
||||
.getUserInfo { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
padding: 30px; |
||||
|
||||
text { |
||||
font-size: 30rpx; |
||||
text-align: center; |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
|
||||
.container { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
position: relative; |
||||
} |
||||
|
||||
.tab-bar { |
||||
font-size: 0; |
||||
display: flex; |
||||
align-items: center; |
||||
background: rgba(255, 255, 255, 0.9); |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
z-index: 99; |
||||
border-top: 1px solid rgba(248, 248, 248, 1); |
||||
|
||||
.tab-bar-item { |
||||
.container { |
||||
flex: 1; |
||||
height: 49px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
position: relative; |
||||
} |
||||
|
||||
&.active { |
||||
text { |
||||
color: #ee7559; |
||||
} |
||||
.force-login-wrap { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
z-index: 11111; |
||||
top: 0; |
||||
|
||||
.tab-bar-pic { |
||||
display: none; |
||||
background: #f9f9f9; |
||||
.logo-bg { |
||||
width: 640rpx; |
||||
height: 300rpx; |
||||
} |
||||
|
||||
&.active { |
||||
display: block; |
||||
} |
||||
.force-login__content { |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
|
||||
.user-avatar { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
border-radius: 50%; |
||||
overflow: hidden; |
||||
margin-bottom: 40rpx; |
||||
} |
||||
} |
||||
|
||||
.tab-bar-pic { |
||||
display: block; |
||||
background: #f9f9f9; |
||||
.user-name { |
||||
font-size: 35rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
color: #000; |
||||
margin-bottom: 30rpx; |
||||
} |
||||
|
||||
&.active { |
||||
display: none; |
||||
.login-notice { |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 400; |
||||
color: #000; |
||||
line-height: 44rpx; |
||||
width: 500rpx; |
||||
text-align: center; |
||||
margin-bottom: 80rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tab-bar-pic { |
||||
width: 25px; |
||||
height: 25px; |
||||
background: #f9f9f9; |
||||
.author-btn { |
||||
width: 630rpx; |
||||
height: 80rpx; |
||||
background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%); |
||||
background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%); |
||||
// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22); |
||||
border-radius: 40rpx; |
||||
font-size: 30rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
|
||||
image { |
||||
width: 25px; |
||||
height: 25px; |
||||
.close-btn { |
||||
width: 630rpx; |
||||
height: 80rpx; |
||||
margin-top: 30rpx; |
||||
border-radius: 40rpx; |
||||
border: 2rpx solid #eb3729; |
||||
background: none; |
||||
font-size: 30rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #eb3729; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tab-bar-pic-active { |
||||
} |
||||
|
||||
text { |
||||
font-size: 10px; |
||||
color: rgb(160, 160, 160); |
||||
line-height: 10px; |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
|
||||
.tab-bar-bg { |
||||
padding-top: 46px; |
||||
width: 100%; |
||||
} |
||||
|
||||
.view-item { |
||||
display: none; |
||||
width: 100%; |
||||
} |
||||
|
||||
.view-item-active { |
||||
display: block; |
||||
} |
||||
|
||||
.getUserInfo { |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
padding: 30px; |
||||
|
||||
p { |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
|
||||
._van-dialog { |
||||
z-index: 99999999999; |
||||
} |
||||
</style> |
||||
|
||||
@ -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> |
||||