汇融云链2

This commit is contained in:
2023-02-13 18:43:39 +08:00
parent 76dca84266
commit a29788866e
331 changed files with 95753 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,192 @@
<template>
<!-- 单图 -->
<view class="jshop-adpop" v-if="jdata.options.colorGroup && jdata.options.colorGroup.length > 0">
<view class="adpop" v-if="closeAd">
<view class="adpop-c">
<view class="adpop-img">
<!-- #ifdef MP-WEIXIN -->
<view @click="navToTabPage(jdata.options.colorGroup[0].adLink)">
<image class="ad-img" :src="jdata.options.colorGroup[0].adImg" mode="widthFix" ></image>
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<image class="ad-img" :src="jdata.options.colorGroup[0].adImg" mode="widthFix" @click="navToTabPage(jdata.options.colorGroup[0].adLink)"></image>
<!-- #endif -->
</view>
<image class="close-btn" src="/static/image/close-pink.png" mode="" @click="closePop"></image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "jshopadpop",
props: {
jdata: {
// type: Object,
required: true,
}
},
data(){
return{
closeAd: true
}
},
computed: {
count() {
// console.log(jdata)
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
closePop(){
this.closeAd = false
},
navToTabPage(url) {
uni.navigateTo({
url: url
});
},
showSliderInfo(type, val) {
console.log(type);
if (!val) {
return;
}
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else if(val.indexOf('/pages/coupon/coupon')>-1){
var id = val.replace('/pages/coupon/coupon?id=',"");
this.receiveCoupon(id)
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
} else if (type == 4) {
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
},
//跳转到商品详情页面
goodsDetail: function(id) {
// let ins = encodeURIComponent('id='+id);
let url = '/pages/goods/index/index?id=' + id;
this.$common.navigateTo(url);
},
// 用户领取优惠券
receiveCoupon(couponId) {
let data = {
promotion_id: couponId
}
this.$api.getCoupon(data, res => {
if (res.status) {
this.$common.successToShow(res.msg)
} else {
this.$common.errorToShow(res.msg)
}
})
},
// #ifdef MP-WEIXIN
showSliderInfo2:function(e){
let type = e.currentTarget.dataset.type;
let val = e.currentTarget.dataset.val;
console.log(type);
console.log(val)
console.log(type);
if (!val) {
return;
}
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else if(val.indexOf('/pages/coupon/coupon')>-1){
var id = val.replace('/pages/coupon/coupon?id=',"");
this.receiveCoupon(id)
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
} else if (type == 4) {
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
}
// #endif
},
}
</script>
<style>
.adpop{
position: fixed;
background: rgba(0,0,0,.5);
width: 100%;
height: 100vh;
z-index: 999;
top: 0;
left: 0;
}
.adpop-c{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 70%;
text-align: center;
}
.adpop-img{
width: 100%;
max-height: 1000rpx;
margin-bottom: 50rpx;
}
.ad-img{
width: 100%;
max-height: 1000rpx;
}
.close-btn{
width: 80rpx;
height: 80rpx;
}
</style>

View File

@@ -0,0 +1,82 @@
<template>
<view class='index-article cell-group bottom-cell-group' v-if="jdata.options.colorGroup && count">
<view class='cell-item'
v-for="item in jdata.options.colorGroup"
:key="item.id"
@click="articleDetail(item.id)"
>
<view class="cell-item-bd">
<view class="article-title ">
{{ item.title }}
</view>
<view class="article-time">
{{ item.ctime }}
</view>
</view>
<view class="cell-title-img">
<image :src="item.cover" mode="aspectFill"></image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "jshoparticle",
props: {
jdata:{
// type: Array,
required: true,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
// 查看文章详情
articleDetail (articleId) {
this.$common.navigateTo('/pages/article/index?id=' + articleId+'&id_type=1')
}
}
}
</script>
<style>
.index-article .cell-title-img{
width: 160upx;
height: 160upx;
float: right;
}
.index-article .cell-title-img image{
width: 100%;
height: 100%;
}
.index-article .cell-item-bd{
padding-right: 0;
vertical-align: top;
position: relative;
}
.index-article .article-title{
font-size: 28upx;
color: #333;
width: 100%;
min-height: 80upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.index-article .article-time{
font-size: 24upx;
color: #999;
display: inline-block;
min-width: 220upx;
min-height: 32upx;
position: absolute;
bottom: 0;
}
</style>

View File

@@ -0,0 +1,82 @@
<template>
<view class='index-article cell-group bottom-cell-group' v-if="jdata.options.colorGroup && count">
<view class='cell-item'
v-for="item in jdata.options.colorGroup"
:key="item.id"
@click="articleDetail(item.id)"
>
<view class="cell-item-bd">
<view class="article-title ">
{{ item.title }}
</view>
<view class="article-time">
{{ item.ctime }}
</view>
</view>
<view class="cell-title-img">
<image :src="item.cover" mode="aspectFill"></image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "jshoparticleclassify",
props: {
jdata:{
// type: Array,
required: true,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
// 查看文章详情
articleDetail (articleId) {
this.$common.navigateTo('/pages/article/index?id=' + articleId+'&id_type=1')
}
}
}
</script>
<style>
.index-article .cell-title-img{
width: 160upx;
height: 160upx;
float: right;
}
.index-article .cell-title-img image{
width: 100%;
height: 100%;
}
.index-article .cell-item-bd{
padding-right: 0;
vertical-align: top;
position: relative;
}
.index-article .article-title{
font-size: 28upx;
color: #333;
width: 100%;
min-height: 80upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.index-article .article-time{
font-size: 24upx;
color: #999;
display: inline-block;
min-width: 220upx;
min-height: 32upx;
position: absolute;
bottom: 0;
}
</style>

View File

@@ -0,0 +1,21 @@
<template>
<view class="blank" :style="{background:jdata.options.search_bg,height:jdata.options.udPadding*2+'rpx'}"></view>
</template>
<script>
export default {
name: "jshopblank",
props: {
jdata:{
// type: Array,
required: true,
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@@ -0,0 +1,27 @@
<template>
<view class="content">
<u-parse :content="content" @preview="preview" @navigate="navigate" style="background-color: #fff;"/>
</view>
</template>
<script>
//视频和文本解析组件
import uParse from '@/components/gaoyia-parse/parse.vue'
export default {
name: 'jshop-content',
components: {
uParse
},
props: {
content: {}
},
created() {},
methods: {
preview(src, e) {
// do something
},
navigate(href, e) {
// do something
}
}
}
</script>

View File

@@ -0,0 +1,101 @@
<template>
<view class="coupon bottom-cell-group" v-if="count">
<view class="coupon-item" v-for="item in jdata.options.colorGroup" :key="item.id" @click="receiveCoupon(item.id)">
<view class="coupon-i-l">
<view class="coupon-i-l-t">
<image class="icon" src="/static/image/element-ic.png" mode=""></image>
<text>{{ item.name }}</text>
</view>
<view class="coupon-i-l-b">
{{ item.expression1 + item.expression2 }}
</view>
</view>
<view class="coupon-i-r">
<image class="coupon-logo" src="/static/image/coupon-element.png" mode=""></image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "jshopcoupon",
props: {
jdata:{
// type: Array,
required: true,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
// 用户领取优惠券
receiveCoupon(couponId) {
let jdata = {
promotion_id: couponId
}
this.$api.getCoupon(jdata, res => {
if (res.status) {
this.$common.successToShow(res.msg)
} else {
this.$common.errorToShow(res.msg)
}
})
},
}
}
</script>
<style>
.coupon {
padding: 0 26upx;
background-color: #f8f8f8;
}
.coupon-item {
padding: 20upx;
margin-bottom: 20upx;
background-color: #fff;
}
.coupon-i-l {
width: 400upx;
display: inline-block;
}
.coupon-i-l-t {
font-size: 32upx;
position: relative;
margin-bottom: 10upx;
}
.coupon-i-l-t .icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.coupon-i-l-t text {
margin-left: 60upx;
}
.coupon-i-l-b {
font-size: 24upx;
color: #999;
}
.coupon-i-r {
width: 258upx;
display: inline-block;
text-align: center;
}
.coupon-logo {
width: 130upx;
height: 100upx;
}
</style>

View File

@@ -0,0 +1,604 @@
<template>
<view class="container">
<!-- 新品上市 -->
<view class="f-header m-t" @click="navToTabPage('../../pagesA/product/list')">
<image src="/static/temp/h1.png" ></image>
<view class="tit-box">
<text class="tit">新品上市</text>
<text class="tit2">Guess You Like It</text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="guess-section">
<view v-for="(item, index) in jdata.options.colorGroup" :key="index" class="guess-item" @click="goodsDetail(item.id)">
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.title }}</text>
<text class="price">{{ item.price }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import {goods} from '@/config/mixins.js'
export default {
filters:{
substr(val) {
if (val.length == 0 || val == undefined) {
return false;
} else if (val.length > 13) {
return val.substring(0, 13) + "...";
} else {
return val;
}
}
},
mixins: [goods],
name: "jshopgoods",
props: {
jdata:{
// type: Array,
required: true,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
navToTabPage(url) {
uni.navigateTo({
url: url
});
},
//跳转到商品详情页面
goodsDetail: function(id) {
let url = '../../pagesA/product/product?id=' + id;
this.$common.navigateTo(url);
},
},
}
</script>
<style lang="scss">
.MP-search{
background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;position: fixed;width: 100%;z-index: 999;
}
.MP-search-input{
font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center;
}
.mp-search-box {
position: absolute;
left: 0;
top: 30upx;
z-index: 9999;
width: 100%;
padding: 0 80upx;
.ser-input {
flex: 1;
height: 60upx;
line-height: 60upx;
text-align: center;
font-size: 28upx;
color: $font-color-base;
border-radius: 20px;
background: rgba(255, 255, 255, 0.6);
}
}
page {
.cate-section {
position: relative;
z-index: 5;
border-radius: 16upx 16upx 0 0;
margin-top: -20upx;
}
.carousel-section {
padding: 0;
.titleNview-placing {
padding-top: 0;
height: 0;
}
.carousel {
.carousel-item {
padding: 0;
}
}
.swiper-dots {
left: 45upx;
bottom: 40upx;
}
}
}
page {
background: #f5f5f5;
}
.m-t {
margin-top: 20upx;
}
/* 头部 轮播图 */
.carousel-section {
position: relative;
padding-top: 10px;
.titleNview-placing {
height: var(--status-bar-height);
padding-top: 44px;
box-sizing: content-box;
}
.titleNview-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 426upx;
transition: 0.4s;
}
}
.carousel {
width: 100%;
height: 350upx;
.carousel-item {
width: 100%;
height: 100%;
padding: 0 28upx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
border-radius: 10upx;
}
}
.swiper-dots {
display: flex;
position: absolute;
left: 60upx;
bottom: 15upx;
width: 72upx;
height: 36upx;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
background-size: 100% 100%;
.num {
width: 36upx;
height: 36upx;
border-radius: 50px;
font-size: 24upx;
color: #fff;
text-align: center;
line-height: 36upx;
}
.sign {
position: absolute;
top: 0;
left: 50%;
line-height: 36upx;
font-size: 12upx;
color: #fff;
transform: translateX(-50%);
}
}
/* 分类 */
.cate-section {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 30upx 22upx;
background: #fff;
.cate-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: $font-sm + 2upx;
color: $font-color-dark;
}
/* 原图标颜色太深,不想改图了,所以加了透明度 */
image {
width: 88upx;
height: 88upx;
margin-bottom: 14upx;
border-radius: 50%;
opacity: 0.7;
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
}
}
.ad-1 {
width: 100%;
height: 210upx;
padding: 10upx 0;
background: #fff;
image {
width: 100%;
height: 100%;
}
}
/* 秒杀专区 */
.seckill-section {
padding: 0upx 20upx 20upx;
background: #fff;
.s-header {
display: flex;
align-items: center;
height: 90upx;
line-height: 1;
.s-img {
width: 140upx;
height: 30upx;
}
.tip {
font-size: $font-base;
color: $font-color-light;
// margin: 0 20upx 0 40upx;
}
.timer {
display: inline-block;
width: 40upx;
height: 36upx;
text-align: center;
line-height: 36upx;
margin-right: 14upx;
font-size: $font-sm + 2upx;
color: #fff;
border-radius: 2px;
background: rgba(0, 0, 0, 0.8);
}
.icon-you {
font-size: $font-lg;
color: $font-color-light;
flex: 1;
text-align: right;
}
}
.floor-list {
white-space: nowrap;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 150upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 150upx;
height: 150upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
}
.f-header {
display: flex;
align-items: center;
height: 140upx;
padding: 0upx 20upx;
background: #fff;
image {
flex-shrink: 0;
width: 80upx;
height: 80upx;
margin-right: 20upx;
}
.tit-box {
flex: 1;
display: flex;
flex-direction: column;
}
.tit {
font-size: $font-lg + 2upx;
color: #font-color-dark;
line-height: 1.3;
}
.tit2 {
font-size: $font-sm;
color: $font-color-light;
}
.icon-you {
font-size: $font-lg + 2upx;
color: $font-color-light;
}
}
/* 团购楼层 */
.group-section {
background: #fff;
.g-swiper {
height: 650upx;
padding-bottom: 20upx;
}
.g-swiper-item {
width: 100%;
padding: 0 20upx;
display: flex;
}
image {
width: 100%;
height: 460upx;
border-radius: 4px;
}
.g-item {
display: flex;
flex-direction: column;
overflow: hidden;
}
.left {
flex: 1.2;
// margin-right: 24upx;
.t-box {
padding-top: 20upx;
}
}
.right {
flex: 0.8;
flex-direction: column-reverse;
.t-box {
padding-bottom: 20upx;
}
}
.t-box {
height: 160upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1.6;
}
.price {
color: $uni-color-primary;
}
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
.pro-box {
display: flex;
align-items: center;
margin-top: 10upx;
font-size: $font-sm;
color: $font-base;
padding-right: 10upx;
}
.progress-box {
flex: 1;
border-radius: 10px;
overflow: hidden;
margin-right: 8upx;
}
}
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 320upx;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '¥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '¥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
/* 猜你喜欢 */
.guess-section {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.guess-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
}
.coupon_box {
width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx;
}
.other_type {
width:100%; height:90upx; padding-top:50upx;
.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; }
}
}
.getPosition{
height: 100upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32upx;
background-color: #FFF;
}
</style>

View File

@@ -0,0 +1,132 @@
<template>
<!-- 团购秒杀 -->
<view class="img-list bottom-cell-group group-buying" v-if="jdata.options.colorGroup && count">
<view class='cell-item right-img'>
<view class='cell-item-hd group-title'>
{{jdata.params.title}}
<!-- <view class='cell-hd-title'></view> -->
</view>
</view>
<view class='swiper-grids'>
<scroll-view class='swiper-list' scroll-x="true">
<view class="img-list-item" v-if="item.goods !== 'undefined' && item.goods" v-for="(item, key) in jdata.options.colorGroup"
:key="key">
<image class="img-list-item-l medium-img have-none" :src="item.goods.image_url" mode='aspectFill' @click="groupDetail(item.goods.id, item.goods.group_id)"></image>
<view class="img-list-item-r medium-right">
<view class="goods-name list-goods-name" @click="groupDetail(item.goods.id, item.goods.group_id)">{{item.goods.name}}</view>
<view class="goods-item-c">
<view class="goods-price red-price">{{item.goods.product.price}}</view>
<view class="goods-buy">
<view class="goods-salesvolume red-price" v-if="(item.goods.lasttime != '已经结束' || item.goods.lasttime != '即将开始') && item.goods.lasttime">剩余<uni-countdown
:show-day="false" :hour="item.goods.lasttime.hour" :minute="item.goods.lasttime.minute" :second="item.goods.lasttime.second"></uni-countdown>
</view>
<view class="goods-salesvolume red-price" v-if="item.goods.lasttime == '已经结束'">已结束</view>
<view class="goods-salesvolume red-price" v-if="item.goods.lasttime == '即将开始'">即将开始</view>
<image class="goods-cart" src="/static/image/ic-car.png" @click="groupDetail(item.goods.id, item.goods.group_id)"></image>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
import {
goods
} from '@/config/mixins.js'
export default {
mixins: [goods],
components: {
uniCountdown
},
name: "jshopgrouppurchase",
props: {
jdata: {
// type: Array,
required: false,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
showSliderInfo(type, val) {
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val +'&id_type=1')
} else if (type == 4) {
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
},
//跳转到商品详情页面
// goodsDetail: function(id) {
// let url = '/pages/goods/index/index?id=' + id;
// this.$common.navigateTo(url);
// },
},
}
</script>
<style>
.img-list,
.img-grids {
background-color: #fff;
}
.cell-item {
border: none;
}
.group-buying .img-list-item {
min-height: 236upx;
padding: 20upx;
margin-left: 26upx;
margin-bottom: 26upx;
display: inline-table;
background-color: #f9f9f9;
}
.swiper-grids .img-list-item:last-child {
margin-right: 26upx;
}
/* .group-buying .goods-name{
min-height: 74upx;
} */
.group-buying .group-title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

View File

@@ -0,0 +1,189 @@
<template>
<!-- 单图 -->
<view class="ad jshop-imgsingle" v-if="jdata.options.colorGroup && jdata.options.colorGroup.length > 0">
<view class="" v-for="item in jdata.options.colorGroup" :key="item.id">
<!-- #ifdef MP-WEIXIN -->
<view @click="showSliderInfo2" :data-type="item.linkType" :data-val="item.linkValue">
<image class="ad-img" :src="item.adImg" mode="widthFix" ></image>
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<image class="ad-img" :src="item.adImg" mode="widthFix" @click="showSliderInfo(item.linkType, item.linkValue)"></image>
<!-- #endif -->
<view class="imgup-btn" v-if="item.buttonText != ''" @click="showSliderInfo(item.linkType, item.linkValue)">
<button class="btn btn-fillet" :style="{background:item.buttonColor,color:item.textColor}">{{item.buttonText}}</button>
</view>
</view>
</view>
</template>
<script>
export default {
name: "jshopimgsingle",
props: {
jdata: {
// type: Object,
required: true,
}
},
computed: {
count() {
// console.log(jdata)
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
showSliderInfo(type, val) {
console.log(type);
if (!val) {
return;
}
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else if(val.indexOf('/pages/coupon/coupon')>-1){
var id = val.replace('/pages/coupon/coupon?id=',"");
this.receiveCoupon(id)
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
} else if (type == 4) {
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
},
//跳转到商品详情页面
goodsDetail: function(id) {
// let ins = encodeURIComponent('id='+id);
let url = '/pages/goods/index/index?id=' + id;
this.$common.navigateTo(url);
},
// 用户领取优惠券
receiveCoupon(couponId) {
let data = {
promotion_id: couponId
}
this.$api.getCoupon(data, res => {
if (res.status) {
this.$common.successToShow(res.msg)
} else {
this.$common.errorToShow(res.msg)
}
})
},
// #ifdef MP-WEIXIN
showSliderInfo2:function(e){
let type = e.currentTarget.dataset.type;
let val = e.currentTarget.dataset.val;
console.log(type);
console.log(val)
console.log(type);
if (!val) {
return;
}
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else if(val.indexOf('/pages/coupon/coupon')>-1){
var id = val.replace('/pages/coupon/coupon?id=',"");
this.receiveCoupon(id)
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
} else if (type == 4) {
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
}
// #endif
},
}
</script>
<style>
/* .ad {
width: 100%;
overflow: hidden;
}
.ad-img{
width: 100%;
float: left;
margin-bottom: 20upx;
}
.ad-img:last-child{
margin-bottom: 0;
} */
.jshop-imgsingle.ad {
width: 100%;
overflow: hidden;
position: relative;
}
.jshop-imgsingle .ad-img {
width: 100%;
float: left;
position: relative;
z-index: 667;
/* margin-bottom: 20upx; */
}
.jshop-imgsingle .ad-img:last-child {
margin-bottom: 0;
}
.jshop-imgsingle .imgup-btn {
position: absolute;
z-index: 668;
bottom: 80upx;
left: 40upx;
}
.jshop-imgsingle .imgup-btn .btn {
line-height: 2;
font-size: 28upx;
padding: 0 50upx;
}
</style>

View File

@@ -0,0 +1,667 @@
<template>
<!-- 头部轮播 -->
<!-- #ifdef MP -->
<view class="carousel-section" style="margin-top: 80upx;">
<!-- #endif -->
<!-- #ifndef MP -->
<view class="carousel-section">
<!-- #endif -->
<!-- 标题栏和状态栏占位符 -->
<view class="titleNview-placing"></view>
<!-- 背景色区域 -->
<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
<swiper class="carousel" circular @change="swiperChange">
<swiper-item v-for="(item, index) in jdata.options.colorGroup" :key="index" class="carousel-item" @click="navToTabPage(item.adLink)">
<image :src="item.adImg" />
</swiper-item>
</swiper>
<!-- 自定义swiper指示器 -->
<view class="swiper-dots">
<text class="num">{{ swiperCurrent + 1 }}</text>
<text class="sign">/</text>
<text class="num">{{ jdata.options.colorGroup.length }}</text>
</view>
</view>
</template>
<script>
export default {
name: "jshopimgSlide",
props: {
jdata: {
// type: Object,
required: true,
}
},
data() {
return {
swiperCurrent: 0,
titleNViewBackground: '',
swiperLength: 0,
swiper: {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
},
};
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
created() {},
watch: {},
methods: {
navToTabPage(url) {
uni.navigateTo({
url: url
});
},
//轮播图切换修改背景色
swiperChange(e) {
const index = e.detail.current;
this.swiperCurrent = index;
// this.titleNViewBackground = this.jdata.options.colorGroup[index].background;
},
// 广告点击查看详情
showSliderInfo(type, val) {
if (!val) {
return;
}
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else if (val.indexOf('/pages/coupon/coupon') > -1) {
var id = val.replace('/pages/coupon/coupon?id=', "");
this.receiveCoupon(id)
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
} else if (type == 4) {
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
},
//跳转到商品详情页面
goodsDetail: function(id) {
let url = '/pages/goods/index/index?id=' + id;
this.$common.navigateTo(url);
},
// 用户领取优惠券
receiveCoupon(couponId) {
let data = {
promotion_id: couponId
}
this.$api.getCoupon(data, res => {
if (res.status) {
this.$common.successToShow(res.msg)
} else {
this.$common.errorToShow(res.msg)
}
})
},
}
}
</script>
<style lang="scss">
.MP-search{
background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;position: fixed;width: 100%;z-index: 999;
}
.MP-search-input{
font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center;
}
.mp-search-box {
position: absolute;
left: 0;
top: 30upx;
z-index: 9999;
width: 100%;
padding: 0 80upx;
.ser-input {
flex: 1;
height: 60upx;
line-height: 60upx;
text-align: center;
font-size: 28upx;
color: $font-color-base;
border-radius: 20px;
background: rgba(255, 255, 255, 0.6);
}
}
page {
.cate-section {
position: relative;
z-index: 5;
border-radius: 16upx 16upx 0 0;
margin-top: -20upx;
}
.carousel-section {
padding: 0;
.titleNview-placing {
padding-top: 0;
height: 0;
}
.carousel {
.carousel-item {
padding: 0;
}
}
.swiper-dots {
left: 45upx;
bottom: 40upx;
}
}
}
page {
background: #f5f5f5;
}
.m-t {
margin-top: 20upx;
}
/* 头部 轮播图 */
.carousel-section {
position: relative;
padding-top: 10px;
.titleNview-placing {
height: var(--status-bar-height);
padding-top: 44px;
box-sizing: content-box;
}
.titleNview-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 426upx;
transition: 0.4s;
}
}
.carousel {
width: 100%;
height: 350upx;
.carousel-item {
width: 100%;
height: 100%;
padding: 0 28upx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
border-radius: 10upx;
}
}
.swiper-dots {
display: flex;
position: absolute;
left: 60upx;
bottom: 15upx;
width: 72upx;
height: 36upx;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
background-size: 100% 100%;
.num {
width: 36upx;
height: 36upx;
border-radius: 50px;
font-size: 24upx;
color: #fff;
text-align: center;
line-height: 36upx;
}
.sign {
position: absolute;
top: 0;
left: 50%;
line-height: 36upx;
font-size: 12upx;
color: #fff;
transform: translateX(-50%);
}
}
/* 分类 */
.cate-section {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 30upx 22upx;
background: #fff;
.cate-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: $font-sm + 2upx;
color: $font-color-dark;
}
/* 原图标颜色太深,不想改图了,所以加了透明度 */
image {
width: 88upx;
height: 88upx;
margin-bottom: 14upx;
border-radius: 50%;
opacity: 0.7;
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
}
}
.ad-1 {
width: 100%;
height: 210upx;
padding: 10upx 0;
background: #fff;
image {
width: 100%;
height: 100%;
}
}
/* 秒杀专区 */
.seckill-section {
padding: 0upx 20upx 20upx;
background: #fff;
.s-header {
display: flex;
align-items: center;
height: 90upx;
line-height: 1;
.s-img {
width: 140upx;
height: 30upx;
}
.tip {
font-size: $font-base;
color: $font-color-light;
// margin: 0 20upx 0 40upx;
}
.timer {
display: inline-block;
width: 40upx;
height: 36upx;
text-align: center;
line-height: 36upx;
margin-right: 14upx;
font-size: $font-sm + 2upx;
color: #fff;
border-radius: 2px;
background: rgba(0, 0, 0, 0.8);
}
.icon-you {
font-size: $font-lg;
color: $font-color-light;
flex: 1;
text-align: right;
}
}
.floor-list {
white-space: nowrap;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 150upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 150upx;
height: 150upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
}
.f-header {
display: flex;
align-items: center;
height: 140upx;
padding: 0upx 20upx;
background: #fff;
image {
flex-shrink: 0;
width: 80upx;
height: 80upx;
margin-right: 20upx;
}
.tit-box {
flex: 1;
display: flex;
flex-direction: column;
}
.tit {
font-size: $font-lg + 2upx;
color: #font-color-dark;
line-height: 1.3;
}
.tit2 {
font-size: $font-sm;
color: $font-color-light;
}
.icon-you {
font-size: $font-lg + 2upx;
color: $font-color-light;
}
}
/* 团购楼层 */
.group-section {
background: #fff;
.g-swiper {
height: 650upx;
padding-bottom: 20upx;
}
.g-swiper-item {
width: 100%;
padding: 0 20upx;
display: flex;
}
image {
width: 100%;
height: 460upx;
border-radius: 4px;
}
.g-item {
display: flex;
flex-direction: column;
overflow: hidden;
}
.left {
flex: 1.2;
// margin-right: 24upx;
.t-box {
padding-top: 20upx;
}
}
.right {
flex: 0.8;
flex-direction: column-reverse;
.t-box {
padding-bottom: 20upx;
}
}
.t-box {
height: 160upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1.6;
}
.price {
color: $uni-color-primary;
}
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
.pro-box {
display: flex;
align-items: center;
margin-top: 10upx;
font-size: $font-sm;
color: $font-base;
padding-right: 10upx;
}
.progress-box {
flex: 1;
border-radius: 10px;
overflow: hidden;
margin-right: 8upx;
}
}
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 320upx;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '¥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '¥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
/* 猜你喜欢 */
.guess-section {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.guess-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
}
.coupon_box {
width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx;
}
.other_type {
width:100%; height:90upx; padding-top:50upx;
.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; }
}
}
.getPosition{
height: 100upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32upx;
background-color: #FFF;
}
</style>

View File

@@ -0,0 +1,207 @@
<template>
<view class="imgwindow">
<view class="imgwindow-list" v-if="jdata.id == '3' "
v-bind:class="'row'+jdata.id" :style="{margin:-jdata.id+'px'}">
<image v-for="(item, index) in jdata.options.colorGroup" :key="index" :src="item.adImg" mode="widthFix" @click="showSliderInfo(item.linkType, item.linkValue)"></image>
</view>
<view class="imgwindow-list" v-if="jdata.id == '4'" v-bind:class="'row'+jdata.id" :style="{margin:-jdata.id+'px'}">
<view class="imgwindow-item" ref="imgwitem" :style="{height:height+'px',padding:jdata.id+'px'}" v-for="(item, index) in jdata.options.colorGroup"
:key="index" v-if="index == 0">
<image :src="item.adImg" mode="aspectFill" @click="showSliderInfo(item.linkType, item.linkValue)"></image>
</view>
<view class="imgwindow-item" ref="imgwitem" :style="{height:height1+'px',padding:jdata.id+'px'}" v-for="(item, index) in jdata.options.colorGroup"
:key="index" v-if="index !== 0">
<image :src="item.adImg" mode="aspectFill" @click="showSliderInfo(item.linkType, item.linkValue)"></image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "jshopimgwindow",
props: {
jdata: {
// type: Object,
required: true,
}
},
data() {
return {
height: '',
height1: '',
padding: '3'
}
},
mounted() {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE
var view = uni.createSelectorQuery().in(this).select(".imgwindow-item");
view.boundingClientRect(data => {
this.height = 50;
// 橱窗小图高度
this.height1 = 50 / 2;
}).exec();
// #endif
// #ifdef MP-ALIPAY
var view = uni.createSelectorQuery().in(this).select(".content").boundingClientRect().exec(data => {
this.height1 = data[0].width / 4;
if (this.data.params.style == '3') {
this.height = data[0].width / 3;
} else if (this.data.params.style == '2') {
this.height = data[0].width / 2;
} else if (this.data.params.style == '4') {
this.height = data[0].width / 4;
} else if (this.data.params.style == '0') {
this.height = data[0].width / 2;
}
});
// #endif
// #ifdef MP-WEIXIN
var view = uni.createSelectorQuery().select(".content");
view.boundingClientRect(jdata => {
this.height1 = jdata.width / 4;
if (this.jdata.params.style == '3') {
this.height = jdata.width / 3;
} else if (this.jdata.params.style == '2') {
this.height = jdata.width / 2;
} else if (this.jdata.params.style == '4') {
this.height = jdata.width / 4;
} else if (this.jdata.params.style == '0') {
this.height = jdata.width / 2;
}
}).exec();
// #endif
},
methods: {
showSliderInfo(type, val) {
if (!val) {
return;
}
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val ==
'/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else if(val.indexOf('/pages/coupon/coupon')>-1){
var id = val.replace('/pages/coupon/coupon?id=',"");
this.receiveCoupon(id)
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
} else if (type == 4) {
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
},
//跳转到商品详情页面
goodsDetail: function(id) {
let url = '/pages/goods/index/index?id=' + id;
this.$common.navigateTo(url);
},
// 用户领取优惠券
receiveCoupon(couponId) {
let data = {
promotion_id: couponId
}
this.$api.getCoupon(data, res => {
if (res.status) {
this.$common.successToShow(res.msg)
} else {
this.$common.errorToShow(res.msg)
}
})
},
}
}
</script>
<style>
.imgwindow {
width: 100%;
}
.imgwindow-list {
/* overflow: hidden; */
/* margin: -16upx; */
display: flex;
}
/* 堆积两列 */
.imgwindow-list .imgwindow-item {
height: auto;
flex: 1;
/* float: left; */
/* padding: 8upx; */
}
.imgwindow-list .imgwindow-item image {
width: 100%;
/* height: 100%; */
}
.imgwindow-list.row0{
overflow: hidden;
display: block;
}
.imgwindow-list.row0 .imgwindow-item {
height: auto;
flex: auto;
float: left;
/* padding: 8upx; */
}
.imgwindow-list.row0 .imgwindow-item image {
width: 100%;
height: 100%;
}
.imgwindow-list.row0 .imgwindow-item:first-child {
width: 50%;
}
.imgwindow-list.row0 .imgwindow-item:nth-child(2) {
width: 50%;
}
.imgwindow-list.row0 .imgwindow-item:nth-child(3),
.imgwindow-list.row0 .imgwindow-item:nth-child(4) {
width: 25%;
}
/* .imgwindow-list.row2 .imgwindow-item {
width: 50%;
}
.imgwindow-list.row3 .imgwindow-item {
width: 33.3%;
}
.imgwindow-list.row4 .imgwindow-item {
width: 25%;
} */
</style>

View File

@@ -0,0 +1,616 @@
<template>
<view class="container">
<view class="cate-section">
<view class="cate-item" v-for="(item, index) in jdata.options.colorGroup" @click="navToTabPage(item.tabContent[0].tabLink)">
<image :src="item.tabContent[0].tabImg"></image>
<text>{{item.tabs}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
name: "jshopnavbar",
props: {
jdata: {
// type: Object,
required: true,
}
},
data() {
return {
height: '',
height1: ''
}
},
onLoad() {
},
mounted() {
},
methods: {
showSliderInfo(type, val) {
console.log(val)
if (!val) {
return;
}
console.log("11")
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
} else if (type == 4) {
// console.log("11")
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
},
//跳转到商品详情页面
goodsDetail: function(id) {
let url = '/pages/goods/index/index?id=' + id;
this.$common.navigateTo(url);
},
}
}
</script>
<style lang="scss">
.MP-search{
background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;position: fixed;width: 100%;z-index: 999;
}
.MP-search-input{
font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center;
}
.mp-search-box {
position: absolute;
left: 0;
top: 30upx;
z-index: 9999;
width: 100%;
padding: 0 80upx;
.ser-input {
flex: 1;
height: 60upx;
line-height: 60upx;
text-align: center;
font-size: 28upx;
color: $font-color-base;
border-radius: 20px;
background: rgba(255, 255, 255, 0.6);
}
}
page {
.cate-section {
position: relative;
z-index: 5;
border-radius: 16upx 16upx 0 0;
margin-top: -20upx;
}
.carousel-section {
padding: 0;
.titleNview-placing {
padding-top: 0;
height: 0;
}
.carousel {
.carousel-item {
padding: 0;
}
}
.swiper-dots {
left: 45upx;
bottom: 40upx;
}
}
}
page {
background: #f5f5f5;
}
.m-t {
margin-top: 20upx;
}
/* 头部 轮播图 */
.carousel-section {
position: relative;
padding-top: 10px;
.titleNview-placing {
height: var(--status-bar-height);
padding-top: 44px;
box-sizing: content-box;
}
.titleNview-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 426upx;
transition: 0.4s;
}
}
.carousel {
width: 100%;
height: 350upx;
.carousel-item {
width: 100%;
height: 100%;
padding: 0 28upx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
border-radius: 10upx;
}
}
.swiper-dots {
display: flex;
position: absolute;
left: 60upx;
bottom: 15upx;
width: 72upx;
height: 36upx;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
background-size: 100% 100%;
.num {
width: 36upx;
height: 36upx;
border-radius: 50px;
font-size: 24upx;
color: #fff;
text-align: center;
line-height: 36upx;
}
.sign {
position: absolute;
top: 0;
left: 50%;
line-height: 36upx;
font-size: 12upx;
color: #fff;
transform: translateX(-50%);
}
}
/* 分类 */
.cate-section {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 30upx 22upx;
background: #fff;
.cate-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: $font-sm + 2upx;
color: $font-color-dark;
}
/* 原图标颜色太深,不想改图了,所以加了透明度 */
image {
width: 88upx;
height: 88upx;
margin-bottom: 14upx;
border-radius: 50%;
opacity: 0.7;
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
}
}
.ad-1 {
width: 100%;
height: 210upx;
padding: 10upx 0;
background: #fff;
image {
width: 100%;
height: 100%;
}
}
/* 秒杀专区 */
.seckill-section {
padding: 0upx 20upx 20upx;
background: #fff;
.s-header {
display: flex;
align-items: center;
height: 90upx;
line-height: 1;
.s-img {
width: 140upx;
height: 30upx;
}
.tip {
font-size: $font-base;
color: $font-color-light;
// margin: 0 20upx 0 40upx;
}
.timer {
display: inline-block;
width: 40upx;
height: 36upx;
text-align: center;
line-height: 36upx;
margin-right: 14upx;
font-size: $font-sm + 2upx;
color: #fff;
border-radius: 2px;
background: rgba(0, 0, 0, 0.8);
}
.icon-you {
font-size: $font-lg;
color: $font-color-light;
flex: 1;
text-align: right;
}
}
.floor-list {
white-space: nowrap;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 150upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 150upx;
height: 150upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
}
.f-header {
display: flex;
align-items: center;
height: 140upx;
padding: 0upx 20upx;
background: #fff;
image {
flex-shrink: 0;
width: 80upx;
height: 80upx;
margin-right: 20upx;
}
.tit-box {
flex: 1;
display: flex;
flex-direction: column;
}
.tit {
font-size: $font-lg + 2upx;
color: #font-color-dark;
line-height: 1.3;
}
.tit2 {
font-size: $font-sm;
color: $font-color-light;
}
.icon-you {
font-size: $font-lg + 2upx;
color: $font-color-light;
}
}
/* 团购楼层 */
.group-section {
background: #fff;
.g-swiper {
height: 650upx;
padding-bottom: 20upx;
}
.g-swiper-item {
width: 100%;
padding: 0 20upx;
display: flex;
}
image {
width: 100%;
height: 460upx;
border-radius: 4px;
}
.g-item {
display: flex;
flex-direction: column;
overflow: hidden;
}
.left {
flex: 1.2;
// margin-right: 24upx;
.t-box {
padding-top: 20upx;
}
}
.right {
flex: 0.8;
flex-direction: column-reverse;
.t-box {
padding-bottom: 20upx;
}
}
.t-box {
height: 160upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1.6;
}
.price {
color: $uni-color-primary;
}
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
.pro-box {
display: flex;
align-items: center;
margin-top: 10upx;
font-size: $font-sm;
color: $font-base;
padding-right: 10upx;
}
.progress-box {
flex: 1;
border-radius: 10px;
overflow: hidden;
margin-right: 8upx;
}
}
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 320upx;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '¥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '¥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
/* 猜你喜欢 */
.guess-section {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.guess-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
}
.coupon_box {
width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx;
}
.other_type {
width:100%; height:90upx; padding-top:50upx;
.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; }
}
}
.getPosition{
height: 100upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32upx;
background-color: #FFF;
}
</style>

View File

@@ -0,0 +1,69 @@
<template>
<view class="notice bottom-cell-group" v-if="jdata.options.colorGroup && count">
<view class="notice-icon">
<image class="icon news-icon" src="/static/image/news.png" mode=""></image>
</view>
<swiper class="notice-c" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true">
<swiper-item v-for="item in jdata.options.colorGroup" :key="item.id">
<view class="swiper-item" @click="goNotice(item.id)">{{ item.title }}</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
name: "jshopnotice",
props: {
jdata:{
// type: Object,
required: true,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
// 点击公告
goNotice(id) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + id+'&id_type=2')
},
},
}
</script>
<style>
.notice {
padding: 6upx 26upx 6upx 60upx;
position: relative;
overflow: hidden;
background-color: #fff;
color: #333;
}
.notice-icon {
display: inline-block;
height: 40upx;
position: absolute;
top: 59%;
left: 26upx;
transform: translateY(-50%);
overflow: hidden;
}
.news-icon {
width: 30upx;
height: 30upx;
float: left;
}
.notice-c {
margin-left: 10upx;
height: 50upx;
line-height: 50upx;
width: 630upx;
display: inline-block;
font-size: 28upx;
float: left;
}
</style>

View File

@@ -0,0 +1,150 @@
<template>
<view class="index-goods">
<!-- 列表平铺单列 -->
<view class="img-list bottom-cell-group" >
<view class='cell-item right-img' v-if="jdata.name != ''">
<view class='cell-item-hd'>
<view class='cell-hd-title'>{{jdata.name}}</view>
</view>
<view class='cell-item-bd'>
</view>
<view class='cell-item-ft' >
<text class='cell-ft-text' @click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text>
<image class='cell-ft-next icon' src='/static/image/right.png'></image>
</view>
</view>
<view v-if="count">
<view class="img-list-item" v-for="(item, index) in jdata.options.colorGroup" :key="index" @click="goodsDetail(item.id)">
<image class="img-list-item-l have-none" :src="item.pic" mode='aspectFill'></image>
<view class="img-list-item-r">
<view class="goods-name list-goods-name">
{{item.title}}
</view>
<view class="goods-item-c">
<view class="goods-price red-price">{{item.price}}</view>
<view class="goods-buy">
<view class="goods-salesvolume" v-if="item.comments_count > 0">{{item.comments_count}}条评论</view>
<view class="goods-salesvolume" v-else-if="item.comments_count <= 0">暂无评论</view>
<image class="goods-cart" src="/static/image/ic-car.png"></image>
</view>
</view>
</view>
</view>
</view>
<view class="order-none" v-else>
<image class="order-none-img" src="/static/image/order.png" mode=""></image>
</view>
</view>
</view>
</view>
</template>
<script>
import {goods} from '@/config/mixins.js'
export default {
filters:{
substr(val) {
if (val.length == 0 || val == undefined) {
return false;
} else if (val.length > 13) {
return val.substring(0, 13) + "...";
} else {
return val;
}
}
},
mixins: [goods],
name: "jshoponegoods",
props: {
jdata:{
// type: Array,
required: true,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
//跳转到商品详情页面
goodsDetail: function(id) {
let url = '/pages/goods/index/index?id=' + id;
this.$common.navigateTo(url);
},
},
}
</script>
<style>
.cell-item {
border: none;
/* padding-bottom: 0; */
}
.cell-ft-text {
font-size: 22upx;
color: #999;
}
.img-grids,.img-list{
/* margin-top: 20upx; */
background-color: #fff;
}
.img-grids-item{
display: inline-table;
margin-top: 0;
margin-bottom: 14upx;
}
.column3 .img-grids-item{
width: 230upx;
height: 364rpx !important;
margin: 15upx;
margin-right: 0;
margin-top: 0;
margin-bottom: 6upx;
}
.column3 .img-grids-item:nth-child(3n){
margin-right: 15upx;
}
.column3 .img-grids-item-t{
width: 230upx;
height: 230upx;
}
.column3 .grids-goods-name{
font-size: 24upx;
/* height: 68upx; */
/* min-height: 54rpx; */
}
.column3 .img-grids-item-b{
padding: 0 8upx 8upx;
}
.column3 .goods-price{
font-size: 26upx;
}
.slide3 .img-grids-item{
width: 200upx;
}
.slide3 .img-grids-item-t{
width: 200upx;
height: 200upx;
}
.slide3 .grids-goods-name{
font-size: 24rpx;
height: 66rpx;
}
.index-goods .img-grids-item{
display: inline-block;
margin-top: 0;
}
.index-goods .img-list-item{
padding: 0upx 26upx;
margin-bottom: 14upx;
}
.index-goods .img-list{
padding-bottom: 10upx;
}
</style>

View File

@@ -0,0 +1,83 @@
<template>
<!-- 拼团 -->
<view class="img-list bottom-cell-group group-buying" v-if="jdata.options.colorGroup && count">
<view class='cell-item right-img'>
<view class='cell-item-hd group-title'>
{{jdata.params.title}}
</view>
</view>
<view class='swiper-grids' >
<scroll-view class='swiper-list' scroll-x="true">
<view class="img-list-item" v-if="item.goods_id !== 'undefined' && item.goods_id" v-for="(item, key) in jdata.options.colorGroup" :key="key">
<image class="img-list-item-l medium-img have-none" :src="item.goods_image" mode='aspectFill' @click="pintuanDetail(item.goods_id)"></image>
<view class="img-list-item-r medium-right">
<view class="goods-name list-goods-name" @click="pintuanDetail(item.goods_id)">{{item.goods_name}}</view>
<view class="goods-item-c">
<view class="goods-price red-price">{{item.pintuan_price}}</view>
<view class="goods-buy">
<view class="goods-salesvolume red-price" v-if="(item.pintuan_start_status == 1) && item.lasttime">剩余:<uni-countdown :day="item.lasttime.day" :hour="item.lasttime.hour" :minute="item.lasttime.minute" :second="item.lasttime.second"></uni-countdown></view>
<view class="goods-salesvolume red-price" v-if="item.pintuan_start_status == 3">已结束</view>
<view class="goods-salesvolume red-price" v-if="item.pintuan_start_status == 2">即将开团</view>
<image class="goods-cart" src="/static/image/ic-car.png" @click="pintuanDetail(item.goods_id)"></image>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
import {goods} from '@/config/mixins.js'
export default {
mixins: [goods],
components:{uniCountdown},
name: "jshoppintuan",
props: {
jdata:{
// type: Array,
required: false,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
},
}
</script>
<style>
.img-list, .img-grids {
background-color: #fff;
}
.cell-item{
border: none;
}
.group-buying .img-list-item{
min-height: 236upx;
padding: 20upx;
margin-left: 26upx;
margin-bottom: 26upx;
display: inline-table;
background-color: #f9f9f9;
}
.swiper-grids .img-list-item:last-child{
margin-right: 26upx;
}
/* .group-buying .goods-name{
min-height: 74upx;
} */
.group-buying .group-title{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

View File

@@ -0,0 +1,187 @@
<template>
<view class="adbrathing"
v-show="adbshow"
v-bind:class="['adbrathing'+jdata.params.style.align,!hideanimation?'pc':hideanimation?'hc':'']"
:style="{top:jdata.params.style.top+'%'}" >
<view class="adbrathing-c">
<view class="adbrathing-l">
<image class="user-head-img" :src="log.avatar" mode="aspectFill"></image>
<view class="user-name">
{{log.nickname}}
</view>
</view>
<view class="adbrathing-r">
{{log.ctime}}{{log.desc}}
</view>
</view>
</view>
</template>
<script>
import { apiBaseUrl } from '@/config/config.js';
export default {
name: "jshoprecord",
props: {
jdata:{
// type: Object,
required: true,
},
//记录显示的位置类型
ltype:{
type: String,
required: false,
default:'home',
},
//记录显示的位置的值
lvalue:{
type: String,
required: false,
default:'0',
}
},
data() {
return {
adbshow:false,
hideanimation: true,
log:{
avatar:'/static/demo-img/user-head.jpg',
nickname:'',
desc:'',
ctime:'',
},
times:{},//定时器
};
},
methods:{
//隐藏
hideLog(){
var _this = this;
_this.times = setInterval(function(){
_this.adbshow = !_this.adbshow;
_this.hideanimation = !_this.hideanimation;
clearInterval(_this.times);
_this.times = setInterval(function(){
_this.getRecod();
},5000);
},3000)
},
//获取日志
getRecod(){
var _this = this;
if(_this.times !={}){
clearInterval(_this.times);
}
var data = {
type:_this.ltype,
value:_this.lvalue,
method:'pages.getrecod',
};
uni.request({
url: apiBaseUrl+'api.html',
data: data,
header: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
method: 'POST',
success: (response) => {
var res = response.data;
if(res.status == true){
if(res.data){
_this.log = res.data;
_this.adbshow = true;
_this.hideanimation = false;
_this.hideLog();
}
}
}
});
}
},
mounted() {
this.getRecod();
}
}
</script>
<style lang="scss">
.adbrathing{
position: fixed;
// top: 100px;
// right: 30upx;
// max-width: 400upx;
height: 70upx;
background-color: rgba(0,0,0,.5);
border-radius: 10upx;
padding: 10upx;
z-index: 666;
.adbrathing-c{
width: 100%;
height: 100%;
overflow: hidden;
color: #fff;
font-size: 24upx;
.adbrathing-l{
display: inline-block;
height: 100%;
float: left;
overflow: hidden;
.user-head-img{
width: 50upx;
height: 50upx;
border-radius: 50%;
float: left;
}
.user-name{
float: left;
display: inline-block;
height: 100%;
line-height: 50upx;
margin: 0 4upx 0 10upx;
max-width: 120upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.adbrathing-r{
float: left;
height: 100%;
display: inline-block;
line-height: 50upx;
}
}
}
.adbrathingleft{
left: 30upx
}
.adbrathingright{
right: 30upx
}
.pc{
animation: showcenter .55s;
}
.hc{
animation: hidecenter .55s;
}
@keyframes showcenter{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hidecenter{
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>

View File

@@ -0,0 +1,118 @@
<template>
<view class="" >
<!-- 搜索框 -->
<view class="search" ref="searchBar" id="search">
<view class='search-c round' @click='goSearch()'>
<view class='search-input search-input-p'>
<view class="search-input-p-c">
{{jdata.options.search_tips}}
</view>
</view>
<image class='icon search-icon' src='/static/image/zoom.png'></image>
</view>
</view>
<!-- 搜索框 -->
<view class="search search-fixed" v-show="searchFixed">
<view class='search-c round' @click='goSearch()' >
<view class='search-input search-input-p'>
<view class="search-input-p-c">
{{jdata.options.search_tips}}
</view>
</view>
<image class='icon search-icon' src='/static/image/zoom.png'></image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "jshopsearch",
props: {
jdata:{
// type: Object,
required: true,
}
},
data() {
return {
keyword:'',
searchTop: 0,
scrollTop: 0,
searchFixed: this.$store.state.searchFixed||false
};
},
created() {
//#ifdef H5
this.$nextTick(() => {
this.searchTop = this.$refs.searchBar.$el.offsetTop;
})
// #endif
this.searchStyle()
},
mounted() {
// #ifdef H5
window.addEventListener('scroll', this.handleScroll)
// #endif
},
methods: {
searchStyle (){
},
goSearch() {
uni.navigateTo({
url: '/pages/index/search'
});
},
handleScroll() {
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.scrollTop >= this.searchTop? this.searchFixed = true : this.searchFixed = false;
},
},
/*
//失效
onPageScroll(){
var _this = this;
// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
const query = uni.createSelectorQuery().in(this)
query.select('.search').boundingClientRect(function(res){
if(res.top<0){
_this.searchFixed = true ;
}else{
_this.searchFixed = false;
}
}).exec()
// #endif
} */
}
</script>
<style>
.search-input-p {
color: #888;
}
.square{
border-radius: 0;
}
.radius{
border-radius: 12upx;
}
.search-fixed{
position: fixed;
top: 0;
/* background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); */
transition: all .5s;
}
/* .isOpacity {
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
transition: all .5s;
}
.isOpacity .search-input {
background-color: rgba(255, 255, 255, .5);
transition: all .5s;
} */
</style>

View File

@@ -0,0 +1,614 @@
<template>
<view class="container">
<!-- 团购楼层 -->
<view class="f-header m-t" @click="navToTabPage('../../pagesA/product/groupList')" v-if="jdata.options.colorGroup.length > 0">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit" >精品团购</text>
<text class="tit2">Boutique Group Buying</text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="group-section">
<swiper class="g-swiper" :duration="500">
<swiper-item class="g-swiper-item" v-for="(item, index) in jdata.options.colorGroup" :key="index" @click="goodsDetail(item.id)">
<view class="g-item left">
<image :src="item.pic" mode="aspectFill"></image>
<view class="t-box">
<text class="title clamp">{{ item.title }}</text>
<view class="price-box">
<text class="price">{{ item.price }}</text>
<text class="m-price">{{ item.price }}</text>
</view>
<view class="pro-box">
<view class="progress-box"><progress percent="72" activeColor="#fa436a" active stroke-width="6" /></view>
<text>{{ item.maxPeople }}人成团</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
<script>
import {goods} from '@/config/mixins.js'
export default {
filters:{
substr(val) {
if (val.length == 0 || val == undefined) {
return false;
} else if (val.length > 13) {
return val.substring(0, 13) + "...";
} else {
return val;
}
}
},
mixins: [goods],
name: "jshopgoods",
props: {
jdata:{
// type: Array,
required: true,
}
},
computed: {
count() {
return (this.jdata.options.colorGroup.length > 0)
}
},
methods: {
navToTabPage(url) {
uni.navigateTo({
url: url
});
},
//跳转到商品详情页面
goodsDetail: function(id) {
let url = '../../pagesA/product/product?id=' + id;
this.$common.navigateTo(url);
},
},
}
</script>
<style lang="scss">
.MP-search{
background: #FFFFFF;height: 80upx;display: flex;justify-content: center;align-items: center;position: fixed;width: 100%;z-index: 999;
}
.MP-search-input{
font-size: 28upx;background: #F5F5F5;height: 60upx;width: 90%;border-radius: 50upx;text-align: center;
}
.mp-search-box {
position: absolute;
left: 0;
top: 30upx;
z-index: 9999;
width: 100%;
padding: 0 80upx;
.ser-input {
flex: 1;
height: 60upx;
line-height: 60upx;
text-align: center;
font-size: 28upx;
color: $font-color-base;
border-radius: 20px;
background: rgba(255, 255, 255, 0.6);
}
}
page {
.cate-section {
position: relative;
z-index: 5;
border-radius: 16upx 16upx 0 0;
margin-top: -20upx;
}
.carousel-section {
padding: 0;
.titleNview-placing {
padding-top: 0;
height: 0;
}
.carousel {
.carousel-item {
padding: 0;
}
}
.swiper-dots {
left: 45upx;
bottom: 40upx;
}
}
}
page {
background: #f5f5f5;
}
.m-t {
margin-top: 20upx;
}
/* 头部 轮播图 */
.carousel-section {
position: relative;
padding-top: 10px;
.titleNview-placing {
height: var(--status-bar-height);
padding-top: 44px;
box-sizing: content-box;
}
.titleNview-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 426upx;
transition: 0.4s;
}
}
.carousel {
width: 100%;
height: 350upx;
.carousel-item {
width: 100%;
height: 100%;
padding: 0 28upx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
border-radius: 10upx;
}
}
.swiper-dots {
display: flex;
position: absolute;
left: 60upx;
bottom: 15upx;
width: 72upx;
height: 36upx;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
background-size: 100% 100%;
.num {
width: 36upx;
height: 36upx;
border-radius: 50px;
font-size: 24upx;
color: #fff;
text-align: center;
line-height: 36upx;
}
.sign {
position: absolute;
top: 0;
left: 50%;
line-height: 36upx;
font-size: 12upx;
color: #fff;
transform: translateX(-50%);
}
}
/* 分类 */
.cate-section {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 30upx 22upx;
background: #fff;
.cate-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: $font-sm + 2upx;
color: $font-color-dark;
}
/* 原图标颜色太深,不想改图了,所以加了透明度 */
image {
width: 88upx;
height: 88upx;
margin-bottom: 14upx;
border-radius: 50%;
opacity: 0.7;
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
}
}
.ad-1 {
width: 100%;
height: 210upx;
padding: 10upx 0;
background: #fff;
image {
width: 100%;
height: 100%;
}
}
/* 秒杀专区 */
.seckill-section {
padding: 0upx 20upx 20upx;
background: #fff;
.s-header {
display: flex;
align-items: center;
height: 90upx;
line-height: 1;
.s-img {
width: 140upx;
height: 30upx;
}
.tip {
font-size: $font-base;
color: $font-color-light;
// margin: 0 20upx 0 40upx;
}
.timer {
display: inline-block;
width: 40upx;
height: 36upx;
text-align: center;
line-height: 36upx;
margin-right: 14upx;
font-size: $font-sm + 2upx;
color: #fff;
border-radius: 2px;
background: rgba(0, 0, 0, 0.8);
}
.icon-you {
font-size: $font-lg;
color: $font-color-light;
flex: 1;
text-align: right;
}
}
.floor-list {
white-space: nowrap;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 150upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 150upx;
height: 150upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
}
.f-header {
display: flex;
align-items: center;
height: 140upx;
padding: 0upx 20upx;
background: #fff;
image {
flex-shrink: 0;
width: 80upx;
height: 80upx;
margin-right: 20upx;
}
.tit-box {
flex: 1;
display: flex;
flex-direction: column;
}
.tit {
font-size: $font-lg + 2upx;
color: #font-color-dark;
line-height: 1.3;
}
.tit2 {
font-size: $font-sm;
color: $font-color-light;
}
.icon-you {
font-size: $font-lg + 2upx;
color: $font-color-light;
}
}
/* 团购楼层 */
.group-section {
background: #fff;
.g-swiper {
height: 650upx;
padding-bottom: 20upx;
}
.g-swiper-item {
width: 100%;
padding: 0 20upx;
display: flex;
}
image {
width: 100%;
height: 460upx;
border-radius: 4px;
}
.g-item {
display: flex;
flex-direction: column;
overflow: hidden;
}
.left {
flex: 1.2;
// margin-right: 24upx;
.t-box {
padding-top: 20upx;
}
}
.right {
flex: 0.8;
flex-direction: column-reverse;
.t-box {
padding-bottom: 20upx;
}
}
.t-box {
height: 160upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1.6;
}
.price {
color: $uni-color-primary;
}
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
.pro-box {
display: flex;
align-items: center;
margin-top: 10upx;
font-size: $font-sm;
color: $font-base;
padding-right: 10upx;
}
.progress-box {
flex: 1;
border-radius: 10px;
overflow: hidden;
margin-right: 8upx;
}
}
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 320upx;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '¥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '¥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
/* 猜你喜欢 */
.guess-section {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.guess-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
}
.coupon_box {
width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx;
}
.other_type {
width:100%; height:90upx; padding-top:50upx;
.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; }
}
}
.getPosition{
height: 100upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32upx;
background-color: #FFF;
}
</style>

View File

@@ -0,0 +1,163 @@
<template>
<view class="">
<view class="jshop-tabbar bottom-cell-group" ref="tabBar">
<scroll-view scroll-x='true' class="tabbar-list">
<view class="tabbar-item" v-for="(item, index) in jdata.options.colorGroup" :key="index" @click="showSliderInfo(item.linkType, item.linkValue)">
{{item.text}}
<view class="active-tabbar"></view>
</view>
</scroll-view>
</view>
<!-- <view class="jshop-tabbar bottom-cell-group tabbar-fixed" v-show="tabbarFixed">
<scroll-view scroll-x='true' class="tabbar-list">
<view class="tabbar-item" v-for="(item, index) in jdata.options.colorGroup" :key="index" @click="showSliderInfo(item.linkType, item.linkValue)">
{{item.text}}
<view class="active-tabbar"></view>
</view>
</scroll-view>
</view> -->
</view>
</template>
<script>
export default {
name: "jshopTabbar",
props: {
jdata:{
// type: Object,
required: true,
}
},
data() {
return {
searchTop: 0,
scrollTop: 0,
tabbarFixed: false
};
},
created() {
//#ifdef H5
this.$nextTick(() => {
this.searchTop = this.$refs.tabBar.$el.offsetTop - 52;
})
// #endif
this.searchStyle()
},
mounted() {
// #ifdef H5
window.addEventListener('scroll', this.handleScroll)
// #endif
},
methods: {
searchStyle (){
this.$store.commit('searchStyle',this.jdata.params.style)
// console.log(this.data.params.style)
},
handleScroll() {
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.scrollTop >= this.searchTop? this.tabbarFixed = true : this.tabbarFixed = false;
},
goClassify(){
uni.switchTab({
url: '/pages/classify/classify'
});
// this.$common.navigateTo('/pages/classify/classify')
},
showSliderInfo(type, val) {
console.log(val)
if (!val) {
return;
}
console.log("11")
if (type == 1) {
if (val.indexOf('http') != -1) {
// #ifdef H5
window.location.href = val
// #endif
} else {
// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
uni.switchTab({
url: val
});
return;
} else {
this.$common.navigateTo(val);
return;
}
// #endif
}
} else if (type == 2) {
// 商品详情
this.goodsDetail(val)
} else if (type == 3) {
// 文章详情
this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
} else if (type == 4) {
// console.log("11")
// 文章列表
this.$common.navigateTo('/pages/article/list?cid=' + val)
} else if (type == 5) {
//智能表单
this.$common.navigateTo('/pages/form/detail/form?id=' + val)
}
},
//跳转到商品详情页面
goodsDetail: function(id) {
let url = '/pages/goods/index/index?id=' + id;
this.$common.navigateTo(url);
},
},
onPageScroll(){
var _this = this;
// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
const query = uni.createSelectorQuery().in(this)
query.select('.search').boundingClientRect(function(res){
if(res.top<0){
_this.tabbarFixed = true ;
}else{
_this.tabbarFixed = false;
}
}).exec()
// #endif
}
}
</script>
<style>
.tabbar-list{
padding: 10rpx 0;
background-color: #fff;
white-space: nowrap;
width: 100%;
}
.tabbar-item{
display: inline-block;
padding: 10rpx 20rpx;
}
.tabbar-item:first-of-type{
color: #FF7159;
}
.active-tabbar{
display: none;
}
.tabbar-item:first-of-type .active-tabbar{
display: block;
width: 100%;
height: 4rpx;
margin: 10rpx auto 0;
background-color: #FF7159;
}
.tabbar-fixed{
position: fixed;
top: 104rpx;
transition: all .5s;
z-index: 999;
background-color: #fff;
width: 100%;
}
</style>

View File

@@ -0,0 +1,59 @@
<template>
<view class="clearfix">
<view class="textarea bottom-cell-group" >
<jshopContent :content="jdata.params" v-if="jdata.params"></jshopContent>
</view>
</view>
</template>
<script>
import htmlParser from '@/common/html-parser'
import jshopContent from '@/components/jshop/jshop-content.vue'//视频和文本解析组件
export default {
components: {
jshopContent
},
name: "jshoptextarea",
props: {
jdata:{
// type: Object,
required: true,
}
},
created() {
//this.jdata.params = htmlParser(this.jdata.params)
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.textarea{
width: 100%;
background-color: #fff;
padding: 10upx 26upx;
/* height: 40upx; */
}
.textarea p img{
width: 100% !important;
}
.textarea div{
background-color: #000;
}
.textarea p {
background-color: #000;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>

View File

@@ -0,0 +1,30 @@
<template>
<view class="video bottom-cell-group" >
<video :src="jdata.options.video_link" :poster="jdata.options.video_img" controls></video>
</view>
</template>
<script>
export default {
name: "jshopvideo",
props: {
jdata:{
type: Object,
required: true,
}
},
onLoad(){
},
methods: {
}
}
</script>
<style>
.video video{
width: 100%;
min-height: 200upx;
}
</style>

View File

@@ -0,0 +1,88 @@
<template>
<view>
<block v-for="(item,index) in jdata" :key="index">
<jshopsearch :jdata="item" v-if="item.components=='search' "></jshopsearch>
<jshoptabbar :jdata="item" v-if="item.components=='tabBar' "></jshoptabbar>
<jshopnotice :jdata="item" v-if="item.components=='notice' "></jshopnotice>
<jshopimgSlide :jdata="item" v-if="item.components=='banner' "></jshopimgSlide>
<jshopcoupon :jdata="item" v-if="item.components=='coupon' "></jshopcoupon>
<jshopblank :jdata="item" v-if="item.components=='blank' "></jshopblank>
<jshoptextarea :jdata="item" v-if="item.components=='textarea' "></jshoptextarea>
<jshopvideo :jdata="item" v-if="item.components=='video' "></jshopvideo>
<jshopimgWindow :jdata="item" v-if="item.components=='imgWin' "></jshopimgWindow>
<jshopimgSingle :jdata="item" v-if="item.components=='imgImgSlide' "></jshopimgSingle>
<jshopgoods :jdata="item" v-if="item.components=='shuanglieshangpin' "></jshopgoods>
<jshopslidegoods :jdata="item" v-if="item.components=='danlieshangpin' "></jshopslidegoods>
<jshoparticle :jdata="item" v-if="item.components=='article' "></jshoparticle>
<jshoparticleClassify :jdata="item" v-if="item.components=='articleClassify' "></jshoparticleClassify>
<jshopnavBar :jdata="item" v-if="item.components=='xuanxiangqia' "></jshopnavBar>
<jshopgroupPurchase :jdata="item" v-if="item.components=='groupPurchase' "></jshopgroupPurchase>
<jshoprecord :jdata="item" v-if="item.components=='record' "></jshoprecord>
<jshoppintuan :jdata="item" v-if="item.components=='pintuan' "></jshoppintuan>
<jshopadpop :jdata="item" v-if="item.components=='imgGroup' "></jshopadpop>
</block>
</view>
</template>
<script>
/**
* 吉海科技jshop小程序插件集合。
* author:novice
* date:2019:05:20
*/
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
import jshopimgSlide from '@/components/jshop/jshop-imgSlide.vue'
import jshopsearch from '@/components/jshop/jshop-search.vue'
import jshopnotice from '@/components/jshop/jshop-notice.vue'
import jshopcoupon from '@/components/jshop/jshop-coupon.vue'
import jshopblank from '@/components/jshop/jshop-blank.vue'
import jshoptextarea from '@/components/jshop/jshop-textarea.vue'
import jshopvideo from '@/components/jshop/jshop-video.vue'
import jshopimgWindow from '@/components/jshop/jshop-imgWindow.vue'
import jshopimgSingle from '@/components/jshop/jshop-imgSingle.vue'
import jshopgoods from '@/components/jshop/jshop-goods.vue'
import jshoponegoods from '@/components/jshop/jshop-onegoods.vue'
import jshopslidegoods from '@/components/jshop/jshop-slidegoods.vue'
import jshoparticle from '@/components/jshop/jshop-article.vue'
import jshoparticleClassify from '@/components/jshop/jshop-articleClassify.vue'
import jshopnavBar from '@/components/jshop/jshop-navBar.vue'
import jshopgroupPurchase from '@/components/jshop/jshop-groupPurchase.vue'
import jshoprecord from '@/components/jshop/jshop-record.vue'
import jshoppintuan from '@/components/jshop/jshop-pintuan.vue'
import jshoptabbar from '@/components/jshop/jshop-tabbar.vue'
import jshopadpop from '@/components/jshop/jshop-adpop.vue'
export default {
name: 'jshop',
components: {
jshopimgSlide,
jshopsearch,
jshopnotice,
jshoponegoods,
jshopslidegoods,
jshopcoupon,
jshopblank,
jshoptextarea,
jshopvideo,
jshopimgWindow,
jshopimgSingle,
jshopgoods,
jshoparticle,
jshoparticleClassify,
jshopnavBar,
jshopgroupPurchase,
jshoprecord,
jshoppintuan,
jshoptabbar,
jshopadpop
},
props: {
jdata: {
default: function() {
return []
}
}
}
}
</script>

View File

@@ -0,0 +1,284 @@
<template>
<view class="index-goods">
<!-- 列表平铺两列三列 -->
<view class='img-grids bottom-cell-group'
v-if="jdata.params.column == '2' && jdata.params.display == 'list' || jdata.params.column == '3' && jdata.params.display == 'list'"
v-bind:class="'column'+jdata.params.column">
<view class='cell-item right-img' v-if="jdata.params.title != ''">
<view class='cell-item-hd'>
<view class='cell-hd-title'>{{jdata.params.title}}</view>
</view>
<view class='cell-item-bd'>
</view>
<view class='cell-item-ft' v-if="jdata.params.lookMore == 'true'">
<text class='cell-ft-text' @click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text>
<image class='cell-ft-next icon' src='/static/image/right.png'></image>
</view>
</view>
<!-- <view class='img-grids'> -->
<view class="" v-if="count">
<view class="img-grids-item" v-for="item in jdata.params.list" :key="item.id" @click="goodsDetail(item.id)">
<image
class="img-grids-item-t have-none"
:src="item.image_url"
mode='aspectFill'
></image>
<view class="img-grids-item-b">
<view class="goods-name grids-goods-name">
{{item.name}}
</view>
<view class="goods-item-c">
<view class="goods-price red-price">¥{{item.price}}</view>
</view>
</view>
</view>
</view>
<view v-else-if="!count && !jdata.params.listAjax">
<view class='img-grids-item'>
<image class='img-grids-item-t have-none' src='' mode=''></image>
<view class='img-grids-item-b'>
<view class='goods-name grids-goods-name have-none'></view>
<view class='goods-item-c'>
<view class='goods-price red-price have-none'></view>
</view>
</view>
</view>
<view class='img-grids-item'>
<image class='img-grids-item-t have-none' src='' mode=''></image>
<view class='img-grids-item-b'>
<view class='goods-name grids-goods-name have-none'></view>
<view class='goods-item-c'>
<view class='goods-price red-price have-none'></view>
</view>
</view>
</view>
<view class='img-grids-item'>
<image class='img-grids-item-t have-none' src='' mode=''></image>
<view class='img-grids-item-b'>
<view class='goods-name grids-goods-name have-none'></view>
<view class='goods-item-c'>
<view class='goods-price red-price have-none'></view>
</view>
</view>
</view>
</view>
<!-- <view v-else="">
<scroll-view class='swiper-list' scroll-x="true"></scroll-view>
</view> -->
<!-- </view> -->
</view>
<!-- 列表平铺单列 -->
<view class="img-list bottom-cell-group"
v-if="jdata.params.column == '1' && jdata.params.display == 'list'" >
<view class='cell-item right-img' v-if="jdata.params.title != ''">
<view class='cell-item-hd'>
<view class='cell-hd-title'>{{jdata.params.title}}</view>
</view>
<view class='cell-item-bd'>
</view>
<view class='cell-item-ft' v-if="jdata.params.lookMore == 'true'">
<text class='cell-ft-text' @click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text>
<image class='cell-ft-next icon' src='/static/image/right.png'></image>
</view>
</view>
<view v-if="count">
<view class="img-list-item" v-for="(item, index) in jdata.params.list" :key="index" @click="goodsDetail(item.id)">
<image class="img-list-item-l have-none" :src="item.image_url" mode='aspectFill'></image>
<view class="img-list-item-r">
<view class="goods-name list-goods-name">
{{item.name}}
</view>
<view class="goods-item-c">
<view class="goods-price red-price">¥{{item.price}}</view>
<view class="goods-buy">
<view class="goods-salesvolume" v-if="item.comments_count > 0">{{item.comments_count}}条评论</view>
<view class="goods-salesvolume" v-else-if="item.comments_count <= 0">暂无评论</view>
<image class="goods-cart" src="/static/image/ic-car.png"></image>
</view>
</view>
</view>
</view>
</view>
<view class="order-none" v-else>
<image class="order-none-img" src="/static/image/order.png" mode=""></image>
</view>
</view>
<!-- 横向滚动 -->
<view class='img-grids bottom-cell-group'
v-if="jdata.params.column == '2' && jdata.params.display == 'slide' || jdata.params.column == '3' && jdata.params.display == 'slide'"
v-bind:class="'slide'+jdata.params.column">
<view class='cell-item right-img' v-if="jdata.params.title != ''">
<view class='cell-item-hd'>
<view class='cell-hd-title'>{{jdata.params.title}}</view>
</view>
<view class='cell-item-bd'>
</view>
<view class='cell-item-ft' v-if="jdata.params.lookMore == 'true'">
<text class='cell-ft-text' @click="goodsList({cat_id: jdata.params.classifyId,brand_id:jdata.params.brandId})">查看更多</text>
<image class='cell-ft-next icon' src='/static/image/right.png'></image>
</view>
</view>
<view class='swiper-grids'>
<scroll-view class='swiper-list' scroll-x="true" v-if="count">
<view class='img-grids-item' v-for="item in jdata.params.list" :key="item.id" @click="goodsDetail(item.id)">
<image class='img-grids-item-t have-none' :src='item.image_url' mode='aspectFill'></image>
<view class='img-grids-item-b'>
<view class='goods-name grids-goods-name' >
{{ item.name|substr }}
</view>
<view class='goods-item-c'>
<view class='goods-price red-price'>¥{{ item.price }}</view>
</view>
</view>
</view>
</scroll-view>
<view v-else-if="!goodsListOfHotAjax && !goodsListOfHot.length">
<scroll-view class='swiper-list' scroll-x="true">
<view class='img-grids-item'>
<image class='img-grids-item-t have-none' src='' mode='aspectFill'></image>
<view class='img-grids-item-b'>
<view class='goods-name grids-goods-name have-none'></view>
<view class='goods-item-c'>
<view class='goods-price red-price have-none'></view>
</view>
</view>
</view>
<view class='img-grids-item'>
<image class='img-grids-item-t have-none' src='' mode='aspectFill'></image>
<view class='img-grids-item-b'>
<view class='goods-name grids-goods-name have-none'></view>
<view class='goods-item-c'>
<view class='goods-price red-price have-none'></view>
</view>
</view>
</view>
<view class='img-grids-item'>
<image class='img-grids-item-t have-none' src='' mode=''></image>
<view class='img-grids-item-b'>
<view class='goods-name grids-goods-name have-none'></view>
<view class='goods-item-c'>
<view class='goods-price red-price have-none'></view>
</view>
</view>
</view>
</scroll-view>
</view>
<view v-else="">
<scroll-view class='swiper-list' scroll-x="true"></scroll-view>
</view>
</view>
</view>
</view>
</template>
<script>
import {goods} from '@/config/mixins.js'
export default {
filters:{
substr(val) {
if (val.length == 0 || val == undefined) {
return false;
} else if (val.length > 13) {
return val.substring(0, 13) + "...";
} else {
return val;
}
}
},
mixins: [goods],
name: "jshopgoods",
props: {
jdata:{
// type: Array,
required: true,
}
},
computed: {
count() {
return (this.jdata.params.list.length > 0)
}
},
methods: {
//跳转到商品详情页面
goodsDetail: function(id) {
let url = '/pages/goods/index/index?id=' + id;
this.$common.navigateTo(url);
},
},
}
</script>
<style>
.cell-item {
border: none;
/* padding-bottom: 0; */
}
.cell-ft-text {
font-size: 22upx;
color: #999;
}
.img-grids,.img-list{
/* margin-top: 20upx; */
background-color: #fff;
}
.img-grids-item{
display: inline-table;
margin-top: 0;
margin-bottom: 14upx;
}
.column3 .img-grids-item{
width: 230upx;
height: 364rpx !important;
margin: 15upx;
margin-right: 0;
margin-top: 0;
margin-bottom: 6upx;
}
.column3 .img-grids-item:nth-child(3n){
margin-right: 15upx;
}
.column3 .img-grids-item-t{
width: 230upx;
height: 230upx;
}
.column3 .grids-goods-name{
font-size: 24upx;
/* height: 68upx; */
/* min-height: 54rpx; */
}
.column3 .img-grids-item-b{
padding: 0 8upx 8upx;
}
.column3 .goods-price{
font-size: 26upx;
}
.slide3 .img-grids-item{
width: 200upx;
}
.slide3 .img-grids-item-t{
width: 200upx;
height: 200upx;
}
.slide3 .grids-goods-name{
font-size: 24rpx;
height: 66rpx;
}
.index-goods .img-grids-item{
display: inline-block;
margin-top: 0;
}
.index-goods .img-list-item{
padding: 0upx 26upx;
margin-bottom: 14upx;
}
.index-goods .img-list{
padding-bottom: 10upx;
}
</style>