mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-10-29 05:50:50 +00:00
feat: 跳转方法
This commit is contained in:
From-wh
parent
52052ad3a1
commit
85ff894003
@ -44,9 +44,9 @@
|
||||
},
|
||||
mounted() {
|
||||
this.timer()
|
||||
},
|
||||
onHide() {
|
||||
clearInterval(this.timecount)
|
||||
},
|
||||
onHide() {
|
||||
clearInterval(this.timecount)
|
||||
},
|
||||
methods: {
|
||||
timer() {
|
||||
@ -70,22 +70,8 @@
|
||||
jump(url) {
|
||||
if (url) {
|
||||
clearInterval(this.timecount)
|
||||
if (url.indexOf("http") != -1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/annex/web_view/index?url=${url}`
|
||||
});
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: url,
|
||||
fail: () => {
|
||||
uni.switchTab({
|
||||
url
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$util.JumpPath(url);
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,14 +19,14 @@
|
||||
</view>
|
||||
<view class='name line2'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.base">
|
||||
<!-- <view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.base">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image>
|
||||
</view>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.is_vip">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/vip.png'></image>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,384 +1,367 @@
|
||||
<template>
|
||||
<view class="group-list" :style="colorStyle">
|
||||
<view class="swiper" v-if="bannerList.length">
|
||||
<swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval"
|
||||
:duration="duration" indicator-color="rgba(0,0,0,0.3)">
|
||||
<block v-for="(item,index) in bannerList" :key="index">
|
||||
<swiper-item>
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" class="slide-image"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="groupMember acea-row row-center-wrapper">
|
||||
<view class="line">
|
||||
<image src="../static/groupLine.png"></image>
|
||||
</view>
|
||||
<view class="member acea-row row-center-wrapper">
|
||||
<view class="pictrue" v-for="(item,index) in pinkPeople" :key="index" v-if="index<6">
|
||||
<image :src="item"></image>
|
||||
</view>
|
||||
<text style="margin-left: 10rpx;">{{pinkCount}}{{$t(`人参与`)}}</text>
|
||||
<view class="pictrue" v-if="pinkPeople.length>5">
|
||||
<image :src="pinkPeople[pinkPeople.length-1]"></image>
|
||||
<view class="iconfont icon-gengduo1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line right">
|
||||
<image src="../static/groupLine.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list" v-if="combinationList.length">
|
||||
<view class="item acea-row row-between-wrapper" v-for="(item,index) in combinationList" :key='index'
|
||||
@tap="openSubcribe(item)">
|
||||
<view class="pictrue">
|
||||
<image :src="item.image"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line2">{{item.title}}</view>
|
||||
<view class="bottom acea-row row-between row-bottom">
|
||||
<view class="y_money">
|
||||
<view class="price">{{$t(`￥`)}}{{item.product_price}}</view>
|
||||
<view class="money">{{$t(`￥`)}}<text class="num">{{item.price}}</text></view>
|
||||
</view>
|
||||
<view class="bnt acea-row row-center-wrapper" v-if="item.stock>0&&item.quota>0">
|
||||
<view class="light">
|
||||
<image src="../static/lightning.png"></image>
|
||||
</view>
|
||||
<view class="num">{{item.people}}{{$t(`人团`)}}</view>
|
||||
<view class="go">{{$t(`去拼团`)}}</view>
|
||||
</view>
|
||||
<view class="bnt gray acea-row row-center-wrapper" v-else>{{$t(`已售罄`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCombinationList,
|
||||
getCombinationBannerList,
|
||||
getPink
|
||||
} from '@/api/activity.js';
|
||||
import {
|
||||
openPinkSubscribe
|
||||
} from '../../../utils/SubscribeMessage.js';
|
||||
import home from '@/components/home/index.vue'
|
||||
import colors from "@/mixins/color";
|
||||
let app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
home
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
pinkPeople: [],
|
||||
pinkCount: 0,
|
||||
bannerList: [],
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
combinationList: [],
|
||||
limit: 10,
|
||||
page: 1,
|
||||
loading: false,
|
||||
loadend: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t(`拼团列表`)
|
||||
})
|
||||
this.getCombinationList();
|
||||
this.getBannerList();
|
||||
this.getPink();
|
||||
},
|
||||
methods: {
|
||||
getPink: function() {
|
||||
getPink().then(res => {
|
||||
this.pinkPeople = res.data.avatars;
|
||||
this.pinkCount = res.data.pink_count;
|
||||
})
|
||||
},
|
||||
getBannerList: function() {
|
||||
getCombinationBannerList().then(res => {
|
||||
this.bannerList = res.data;
|
||||
})
|
||||
},
|
||||
goDetail(item) {
|
||||
let url = item.link;
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index',
|
||||
'/pages/index/index'
|
||||
]
|
||||
.indexOf(url) == -1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
openSubcribe: function(item) {
|
||||
let page = item;
|
||||
// #ifndef MP
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.showLoading({
|
||||
title: this.$t(`正在加载中`),
|
||||
})
|
||||
openPinkSubscribe().then(res => {
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
|
||||
});
|
||||
}).catch(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
getCombinationList: function() {
|
||||
var that = this;
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
var data = {
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
};
|
||||
this.loading = true
|
||||
getCombinationList(data).then(function(res) {
|
||||
var combinationList = that.combinationList;
|
||||
var limit = that.limit;
|
||||
that.page++;
|
||||
that.loadend = limit > res.data.length;
|
||||
that.combinationList = combinationList.concat(res.data);
|
||||
that.page = that.data.page;
|
||||
that.loading = false;
|
||||
}).catch(() => {
|
||||
that.loading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom: function() {
|
||||
this.getCombinationList();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
// background-color: var(--view-theme) !important;
|
||||
}
|
||||
|
||||
.group-list {
|
||||
min-height: 100vh;
|
||||
background-color: var(--view-theme) !important;
|
||||
padding: 30rpx 0;
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
|
||||
swiper {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 8rpx !important;
|
||||
height: 8rpx !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/deep/.uni-swiper-dot-active {
|
||||
width: 18rpx !important;
|
||||
border-radius: 4rpx;
|
||||
background-color: var(--view-theme) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groupMember {
|
||||
height: 100rpx;
|
||||
|
||||
.line {
|
||||
width: 102rpx;
|
||||
height: 4rpx;
|
||||
|
||||
&.right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.member {
|
||||
margin: 0 30rpx;
|
||||
color: #fff;
|
||||
|
||||
.pictrue {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
border: 2rpx solid #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&~.pictrue {
|
||||
margin-left: -8rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
width: 43rpx;
|
||||
height: 43rpx;
|
||||
background: rgba(51, 51, 51, 0.6);
|
||||
border-radius: 50%;
|
||||
top: 2rpx;
|
||||
left: 2rpx;
|
||||
color: #fff;
|
||||
font-size: 10rpx;
|
||||
text-align: center;
|
||||
line-height: 43rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.item {
|
||||
width: 690rpx;
|
||||
height: 230rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 14rpx;
|
||||
padding: 0 22rpx;
|
||||
margin: 0 auto 18rpx auto;
|
||||
|
||||
.pictrue {
|
||||
width: 186rpx;
|
||||
height: 186rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 440rpx;
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
line-height: 38rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.y_money {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
.price {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.money {
|
||||
color: var(--view-priceColor);
|
||||
font-weight: 600;
|
||||
|
||||
.num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bnt {
|
||||
height: 58rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-color: var(--view-theme);
|
||||
border-radius: 28rpx;
|
||||
|
||||
.light {
|
||||
position: absolute;
|
||||
width: 28rpx;
|
||||
height: 58rpx;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -8rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 120rpx;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
color: var(--view-theme);
|
||||
height: 100%;
|
||||
line-height: 58rpx;
|
||||
border-radius: 28rpx 0 14rpx 28rpx;
|
||||
}
|
||||
|
||||
.go {
|
||||
width: 112rpx;
|
||||
background-color: var(--view-theme);
|
||||
height: 100%;
|
||||
line-height: 58rpx;
|
||||
border-radius: 0 28rpx 28rpx 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
width: 148rpx;
|
||||
background-color: #cccccc;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="group-list" :style="colorStyle">
|
||||
<view class="swiper" v-if="bannerList.length">
|
||||
<swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval"
|
||||
:duration="duration" indicator-color="rgba(0,0,0,0.3)">
|
||||
<block v-for="(item,index) in bannerList" :key="index">
|
||||
<swiper-item>
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" class="slide-image"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="groupMember acea-row row-center-wrapper">
|
||||
<view class="line">
|
||||
<image src="../static/groupLine.png"></image>
|
||||
</view>
|
||||
<view class="member acea-row row-center-wrapper">
|
||||
<view class="pictrue" v-for="(item,index) in pinkPeople" :key="index" v-if="index<6">
|
||||
<image :src="item"></image>
|
||||
</view>
|
||||
<text style="margin-left: 10rpx;">{{pinkCount}}{{$t(`人参与`)}}</text>
|
||||
<view class="pictrue" v-if="pinkPeople.length>5">
|
||||
<image :src="pinkPeople[pinkPeople.length-1]"></image>
|
||||
<view class="iconfont icon-gengduo1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line right">
|
||||
<image src="../static/groupLine.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list" v-if="combinationList.length">
|
||||
<view class="item acea-row row-between-wrapper" v-for="(item,index) in combinationList" :key='index'
|
||||
@tap="openSubcribe(item)">
|
||||
<view class="pictrue">
|
||||
<image :src="item.image"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line2">{{item.title}}</view>
|
||||
<view class="bottom acea-row row-between row-bottom">
|
||||
<view class="y_money">
|
||||
<view class="price">{{$t(`￥`)}}{{item.product_price}}</view>
|
||||
<view class="money">{{$t(`￥`)}}<text class="num">{{item.price}}</text></view>
|
||||
</view>
|
||||
<view class="bnt acea-row row-center-wrapper" v-if="item.stock>0&&item.quota>0">
|
||||
<view class="light">
|
||||
<image src="../static/lightning.png"></image>
|
||||
</view>
|
||||
<view class="num">{{item.people}}{{$t(`人团`)}}</view>
|
||||
<view class="go">{{$t(`去拼团`)}}</view>
|
||||
</view>
|
||||
<view class="bnt gray acea-row row-center-wrapper" v-else>{{$t(`已售罄`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCombinationList,
|
||||
getCombinationBannerList,
|
||||
getPink
|
||||
} from '@/api/activity.js';
|
||||
import {
|
||||
openPinkSubscribe
|
||||
} from '../../../utils/SubscribeMessage.js';
|
||||
import home from '@/components/home/index.vue'
|
||||
import colors from "@/mixins/color";
|
||||
let app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
home
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
pinkPeople: [],
|
||||
pinkCount: 0,
|
||||
bannerList: [],
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
combinationList: [],
|
||||
limit: 10,
|
||||
page: 1,
|
||||
loading: false,
|
||||
loadend: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$t(`拼团列表`)
|
||||
})
|
||||
this.getCombinationList();
|
||||
this.getBannerList();
|
||||
this.getPink();
|
||||
},
|
||||
methods: {
|
||||
getPink: function() {
|
||||
getPink().then(res => {
|
||||
this.pinkPeople = res.data.avatars;
|
||||
this.pinkCount = res.data.pink_count;
|
||||
})
|
||||
},
|
||||
getBannerList: function() {
|
||||
getCombinationBannerList().then(res => {
|
||||
this.bannerList = res.data;
|
||||
})
|
||||
},
|
||||
goDetail(item) {
|
||||
let url = item.link;
|
||||
this.$util.JumpPath(url);
|
||||
},
|
||||
openSubcribe: function(item) {
|
||||
let page = item;
|
||||
// #ifndef MP
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.showLoading({
|
||||
title: this.$t(`正在加载中`),
|
||||
})
|
||||
openPinkSubscribe().then(res => {
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
|
||||
});
|
||||
}).catch(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
getCombinationList: function() {
|
||||
var that = this;
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
var data = {
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
};
|
||||
this.loading = true
|
||||
getCombinationList(data).then(function(res) {
|
||||
var combinationList = that.combinationList;
|
||||
var limit = that.limit;
|
||||
that.page++;
|
||||
that.loadend = limit > res.data.length;
|
||||
that.combinationList = combinationList.concat(res.data);
|
||||
that.page = that.data.page;
|
||||
that.loading = false;
|
||||
}).catch(() => {
|
||||
that.loading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom: function() {
|
||||
this.getCombinationList();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
// background-color: var(--view-theme) !important;
|
||||
}
|
||||
|
||||
.group-list {
|
||||
min-height: 100vh;
|
||||
background-color: var(--view-theme) !important;
|
||||
padding: 30rpx 0;
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
|
||||
swiper {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 8rpx !important;
|
||||
height: 8rpx !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/deep/.uni-swiper-dot-active {
|
||||
width: 18rpx !important;
|
||||
border-radius: 4rpx;
|
||||
background-color: var(--view-theme) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groupMember {
|
||||
height: 100rpx;
|
||||
|
||||
.line {
|
||||
width: 102rpx;
|
||||
height: 4rpx;
|
||||
|
||||
&.right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.member {
|
||||
margin: 0 30rpx;
|
||||
color: #fff;
|
||||
|
||||
.pictrue {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
border: 2rpx solid #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&~.pictrue {
|
||||
margin-left: -8rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
width: 43rpx;
|
||||
height: 43rpx;
|
||||
background: rgba(51, 51, 51, 0.6);
|
||||
border-radius: 50%;
|
||||
top: 2rpx;
|
||||
left: 2rpx;
|
||||
color: #fff;
|
||||
font-size: 10rpx;
|
||||
text-align: center;
|
||||
line-height: 43rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.item {
|
||||
width: 690rpx;
|
||||
height: 230rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 14rpx;
|
||||
padding: 0 22rpx;
|
||||
margin: 0 auto 18rpx auto;
|
||||
|
||||
.pictrue {
|
||||
width: 186rpx;
|
||||
height: 186rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 440rpx;
|
||||
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
line-height: 38rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.y_money {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
.price {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.money {
|
||||
color: var(--view-priceColor);
|
||||
font-weight: 600;
|
||||
|
||||
.num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bnt {
|
||||
height: 58rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-color: var(--view-theme);
|
||||
border-radius: 28rpx;
|
||||
|
||||
.light {
|
||||
position: absolute;
|
||||
width: 28rpx;
|
||||
height: 58rpx;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -8rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 120rpx;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
color: var(--view-theme);
|
||||
height: 100%;
|
||||
line-height: 58rpx;
|
||||
border-radius: 28rpx 0 14rpx 28rpx;
|
||||
}
|
||||
|
||||
.go {
|
||||
width: 112rpx;
|
||||
background-color: var(--view-theme);
|
||||
height: 100%;
|
||||
line-height: 58rpx;
|
||||
border-radius: 0 28rpx 28rpx 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
width: 148rpx;
|
||||
background-color: #cccccc;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,194 +1,179 @@
|
||||
<template>
|
||||
<div class="quality-recommend" :style="colorStyle">
|
||||
<div class="slider-banner swiper">
|
||||
<view class="swiper">
|
||||
<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
|
||||
:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<block v-for="(item, index) in imgUrls" :key="index">
|
||||
<swiper-item>
|
||||
<image :src="item.img" class="slide-image" @click="goPages(item)"></image>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</div>
|
||||
<div class="title acea-row row-center-wrapper">
|
||||
<div class="line"></div>
|
||||
<div class="name">
|
||||
<span class="iconfont" :class="icon"></span>
|
||||
{{ typeName[type]}}
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<view class="wrapper">
|
||||
<GoodList :bastList="goodsList" :is-sort="false"></GoodList>
|
||||
<emptyPage v-if="goodsList.length == 0 && !isScroll" :title="$t(`暂无数据`)"></emptyPage>
|
||||
</view>
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
<!-- <pageFooter></pageFooter> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import GoodList from '@/components/goodList';
|
||||
import pageFooter from '@/components/pageFooter/index.vue';
|
||||
import {
|
||||
getGroomList
|
||||
} from '@/api/store';
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js';
|
||||
import home from '@/components/home/index.vue'
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
name: 'HotNewGoods',
|
||||
components: {
|
||||
GoodList,
|
||||
emptyPage,
|
||||
home,
|
||||
pageFooter
|
||||
},
|
||||
props: {},
|
||||
mixins: [colors],
|
||||
data: function() {
|
||||
return {
|
||||
imgUrls: [],
|
||||
goodsList: [],
|
||||
name: '',
|
||||
icon: '',
|
||||
type: 0,
|
||||
typeName: ['', this.$t(`精品推荐`), this.$t(`热门榜单`), this.$t(`首发新品`),
|
||||
this.$t(`促销单品`)
|
||||
],
|
||||
autoplay: true,
|
||||
circular: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
page: 1,
|
||||
limit: 8,
|
||||
isScroll: true,
|
||||
};
|
||||
},
|
||||
onLoad: function(option) {
|
||||
this.type = option.type;
|
||||
this.titleInfo();
|
||||
this.name = option.name;
|
||||
// document.title = "精品推荐";
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.name
|
||||
});
|
||||
this.getIndexGroomList();
|
||||
},
|
||||
methods: {
|
||||
titleInfo: function() {
|
||||
if (this.type === '1') {
|
||||
this.icon = 'icon-jingpintuijian';
|
||||
} else if (this.type === '2') {
|
||||
this.icon = 'icon-remen';
|
||||
} else if (this.type === '3') {
|
||||
this.icon = 'icon-xinpin';
|
||||
} else if (this.type === '4') {
|
||||
this.icon = 'icon-xinpin';
|
||||
}
|
||||
},
|
||||
goPages(item) {
|
||||
let url = item.link || '';
|
||||
goPage().then(res => {
|
||||
if (url.indexOf('http') != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url;
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(url) == -1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getIndexGroomList() {
|
||||
if (!this.isScroll) return;
|
||||
let that = this;
|
||||
let type = this.type;
|
||||
getGroomList(type, {
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
})
|
||||
.then(res => {
|
||||
that.imgUrls = res.data.banner;
|
||||
that.goodsList = that.goodsList.concat(res.data.list);
|
||||
that.isScroll = res.data.list.length >= that.limit;
|
||||
that.page++;
|
||||
})
|
||||
.catch(function(res) {
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
});
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getIndexGroomList();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
/deep/ .empty-box {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.swiper,
|
||||
swiper,
|
||||
swiper-item,
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
.quality-recommend {
|
||||
.wrapper {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 120rpx;
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.name {
|
||||
margin: 0 20rpx;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 190rpx;
|
||||
height: 2rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.txt-bar {
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.acea-row {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
<template>
|
||||
<div class="quality-recommend" :style="colorStyle">
|
||||
<div class="slider-banner swiper">
|
||||
<view class="swiper">
|
||||
<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
|
||||
:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<block v-for="(item, index) in imgUrls" :key="index">
|
||||
<swiper-item>
|
||||
<image :src="item.img" class="slide-image" @click="goPages(item)"></image>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</div>
|
||||
<div class="title acea-row row-center-wrapper">
|
||||
<div class="line"></div>
|
||||
<div class="name">
|
||||
<span class="iconfont" :class="icon"></span>
|
||||
{{ typeName[type]}}
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<view class="wrapper">
|
||||
<GoodList :bastList="goodsList" :is-sort="false"></GoodList>
|
||||
<emptyPage v-if="goodsList.length == 0 && !isScroll" :title="$t(`暂无数据`)"></emptyPage>
|
||||
</view>
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
<!-- <pageFooter></pageFooter> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import GoodList from '@/components/goodList';
|
||||
import pageFooter from '@/components/pageFooter/index.vue';
|
||||
import {
|
||||
getGroomList
|
||||
} from '@/api/store';
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js';
|
||||
import home from '@/components/home/index.vue'
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
name: 'HotNewGoods',
|
||||
components: {
|
||||
GoodList,
|
||||
emptyPage,
|
||||
home,
|
||||
pageFooter
|
||||
},
|
||||
props: {},
|
||||
mixins: [colors],
|
||||
data: function() {
|
||||
return {
|
||||
imgUrls: [],
|
||||
goodsList: [],
|
||||
name: '',
|
||||
icon: '',
|
||||
type: 0,
|
||||
typeName: ['', this.$t(`精品推荐`), this.$t(`热门榜单`), this.$t(`首发新品`),
|
||||
this.$t(`促销单品`)
|
||||
],
|
||||
autoplay: true,
|
||||
circular: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
page: 1,
|
||||
limit: 8,
|
||||
isScroll: true,
|
||||
};
|
||||
},
|
||||
onLoad: function(option) {
|
||||
this.type = option.type;
|
||||
this.titleInfo();
|
||||
this.name = option.name;
|
||||
// document.title = "精品推荐";
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.name
|
||||
});
|
||||
this.getIndexGroomList();
|
||||
},
|
||||
methods: {
|
||||
titleInfo: function() {
|
||||
if (this.type === '1') {
|
||||
this.icon = 'icon-jingpintuijian';
|
||||
} else if (this.type === '2') {
|
||||
this.icon = 'icon-remen';
|
||||
} else if (this.type === '3') {
|
||||
this.icon = 'icon-xinpin';
|
||||
} else if (this.type === '4') {
|
||||
this.icon = 'icon-xinpin';
|
||||
}
|
||||
},
|
||||
goPages(item) {
|
||||
let url = item.link || '';
|
||||
goPage().then(res => {
|
||||
this.$util.JumpPath(url);
|
||||
});
|
||||
},
|
||||
getIndexGroomList() {
|
||||
if (!this.isScroll) return;
|
||||
let that = this;
|
||||
let type = this.type;
|
||||
getGroomList(type, {
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
})
|
||||
.then(res => {
|
||||
that.imgUrls = res.data.banner;
|
||||
that.goodsList = that.goodsList.concat(res.data.list);
|
||||
that.isScroll = res.data.list.length >= that.limit;
|
||||
that.page++;
|
||||
})
|
||||
.catch(function(res) {
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
});
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getIndexGroomList();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
/deep/ .empty-box {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.swiper,
|
||||
swiper,
|
||||
swiper-item,
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
.quality-recommend {
|
||||
.wrapper {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 120rpx;
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.name {
|
||||
margin: 0 20rpx;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 190rpx;
|
||||
height: 2rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.txt-bar {
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.acea-row {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -35,6 +35,16 @@
|
||||
<view class='line'></view>
|
||||
</view>
|
||||
<view class='list acea-row'>
|
||||
<navigator hover-class='none'
|
||||
:url='"/pages/goods/goods_list/index?cid="+item.id+"&title="+item.cate_name'
|
||||
class='item acea-row row-column row-middle'>
|
||||
<view class='picture'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.pic || defimg">
|
||||
</easy-loadimage>
|
||||
<!-- <image src="/static/images/sort-img.png" v-else></image> -->
|
||||
</view>
|
||||
<view class='name line1'>{{$t(`全部商品`)}}</view>
|
||||
</navigator>
|
||||
<block v-for="(itemn,indexn) in item.children" :key="indexn">
|
||||
<navigator hover-class='none'
|
||||
:url='"/pages/goods/goods_list/index?sid="+itemn.id+"&title="+itemn.cate_name'
|
||||
@ -86,6 +96,7 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defimg: require('@/static/images/2-002.png'),
|
||||
navlist: [],
|
||||
productList: [],
|
||||
navActive: 0,
|
||||
|
||||
@ -54,16 +54,7 @@
|
||||
methods: {
|
||||
goDetail(item) {
|
||||
let urls = item.info[2].value
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index']
|
||||
.indexOf(urls) == -1) {
|
||||
uni.navigateTo({
|
||||
url: urls
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: urls
|
||||
})
|
||||
}
|
||||
this.$util.JumpPath(urls);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,253 +1,241 @@
|
||||
<template>
|
||||
<view v-show="!isSortType && menus.length" :class="bgStyle?'borderRadius15':''" :style="{background:bgColor,margin:'0 '+prConfig*2+'rpx',marginTop:mbConfig*2+'rpx'}">
|
||||
<view v-if="isMany">
|
||||
<view class="swiper">
|
||||
<swiper :interval="interval" :duration="duration" :style="'height:'+(navHigh*2+17)+'rpx;'" @change='bannerfun'>
|
||||
<block>
|
||||
<swiper-item v-for="(item,indexw) in menuList" :key="indexw">
|
||||
<view class="nav acea-row" :id="'nav' + indexw">
|
||||
<view :style="'color:' + titleColor" class="item" :class="number===1?'four':number===2?'five':''" v-for="(itemn,indexn) in item.list" :key="indexn" @click="menusTap(itemn.info[1].value)">
|
||||
<view class="pictrue skeleton-radius" :class="menuStyle?'':'on'">
|
||||
<image :src="itemn.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="menu-txt">{{ $t(itemn.info[0].value) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="dot acea-row row-center-wrapper" v-if="docConfig<2">
|
||||
<view class="dot-item" :class="{ 'line_dot-item': docConfig === 0,'': docConfig === 1}" :style="active==index?'background:'+ dotColor:''" v-for="(item,index) in menuList"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav oneNav" v-else>
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
|
||||
<block v-for="(item, index) in menus" :key="index">
|
||||
<view class="item" :style="'color:' + titleColor" @click="menusTap(item.info[1].value)">
|
||||
<view class="pictrue skeleton-radius" :class="menuStyle?'':'on'">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="menu-txt">{{ $t(item.info[0].value) }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'menus',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
menus: this.dataConfig.menuConfig.list || [],
|
||||
titleColor: this.dataConfig.titleColor.color[0].item,
|
||||
mbConfig: this.dataConfig.mbConfig.val,
|
||||
rowsNum: this.dataConfig.rowsNum.type,
|
||||
number: this.dataConfig.number.type,
|
||||
isMany: this.dataConfig.tabConfig.tabVal,
|
||||
menuStyle: this.dataConfig.menuStyle.type,
|
||||
docConfig: this.dataConfig.pointerStyle.type,
|
||||
dotColor: this.dataConfig.pointerColor.color[0].item,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
bgStyle: this.dataConfig.bgStyle.type,
|
||||
prConfig: this.dataConfig.prConfig.val,
|
||||
navHigh: 0,
|
||||
menuList: [],
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
if (this.rowsNum === 0) {
|
||||
if (this.number === 0) {
|
||||
this.pageNum(6)
|
||||
} else if (this.number === 1) {
|
||||
this.pageNum(8)
|
||||
} else {
|
||||
this.pageNum(10)
|
||||
}
|
||||
} else if (this.rowsNum === 1) {
|
||||
if (this.number === 0) {
|
||||
this.pageNum(9)
|
||||
} else if (this.number === 1) {
|
||||
this.pageNum(12)
|
||||
} else {
|
||||
this.pageNum(15)
|
||||
}
|
||||
} else {
|
||||
if (this.number === 0) {
|
||||
this.pageNum(12)
|
||||
} else if (this.number === 1) {
|
||||
this.pageNum(16)
|
||||
} else {
|
||||
this.pageNum(20)
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.menuList.length&&this.isMany) {
|
||||
let that = this
|
||||
// #ifdef H5
|
||||
that.menuHeight()
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
setTimeout(() => {
|
||||
that.menuHeight()
|
||||
},100)
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
bannerfun(e) {
|
||||
this.active = e.detail.current;
|
||||
},
|
||||
menuHeight(){
|
||||
let that = this;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#nav0').boundingClientRect(data => {
|
||||
that.navHigh = data.height;
|
||||
}).exec();
|
||||
},
|
||||
pageNum(num) {
|
||||
let count = Math.ceil(this.menus.length / num);
|
||||
let goodArray = new Array();
|
||||
for (let i = 0; i < count; i++) {
|
||||
let list = this.menus.slice(i * num, i * num + num);
|
||||
if (list.length)
|
||||
goodArray.push({
|
||||
list: list
|
||||
});
|
||||
}
|
||||
this.$set(this, 'menuList', goodArray);
|
||||
},
|
||||
menusTap(url) {
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
uni.navigateTo({
|
||||
url: `/pages/annex/web_view/index?url=${url}`
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index']
|
||||
.indexOf(url) == -1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dot {
|
||||
width: 100%;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.instruct {
|
||||
width: 50rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dot-item {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
border-radius: 50%;
|
||||
margin: 0 4px;
|
||||
|
||||
&.line_dot-item {
|
||||
width: 20rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
&.oneNav{
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
.item {
|
||||
margin-top: 30rpx;
|
||||
width: 160rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.on {
|
||||
image {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-txt {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
z-index: 20;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.nav {
|
||||
.item {
|
||||
width: 33.3333%;
|
||||
|
||||
&.four {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.five {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swiper,
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view v-show="!isSortType && menus.length" :class="bgStyle?'borderRadius15':''"
|
||||
:style="{background:bgColor,margin:'0 '+prConfig*2+'rpx',marginTop:mbConfig*2+'rpx'}">
|
||||
<view v-if="isMany">
|
||||
<view class="swiper">
|
||||
<swiper :interval="interval" :duration="duration" :style="'height:'+(navHigh*2+17)+'rpx;'"
|
||||
@change='bannerfun'>
|
||||
<block>
|
||||
<swiper-item v-for="(item,indexw) in menuList" :key="indexw">
|
||||
<view class="nav acea-row" :id="'nav' + indexw">
|
||||
<view :style="'color:' + titleColor" class="item"
|
||||
:class="number===1?'four':number===2?'five':''" v-for="(itemn,indexn) in item.list"
|
||||
:key="indexn" @click="menusTap(itemn.info[1].value)">
|
||||
<view class="pictrue skeleton-radius" :class="menuStyle?'':'on'">
|
||||
<image :src="itemn.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="menu-txt">{{ $t(itemn.info[0].value) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="dot acea-row row-center-wrapper" v-if="docConfig<2">
|
||||
<view class="dot-item" :class="{ 'line_dot-item': docConfig === 0,'': docConfig === 1}"
|
||||
:style="active==index?'background:'+ dotColor:''" v-for="(item,index) in menuList"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav oneNav" v-else>
|
||||
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" show-scrollbar="false">
|
||||
<block v-for="(item, index) in menus" :key="index">
|
||||
<view class="item" :style="'color:' + titleColor" @click="menusTap(item.info[1].value)">
|
||||
<view class="pictrue skeleton-radius" :class="menuStyle?'':'on'">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="menu-txt">{{ $t(item.info[0].value) }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'menus',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
menus: this.dataConfig.menuConfig.list || [],
|
||||
titleColor: this.dataConfig.titleColor.color[0].item,
|
||||
mbConfig: this.dataConfig.mbConfig.val,
|
||||
rowsNum: this.dataConfig.rowsNum.type,
|
||||
number: this.dataConfig.number.type,
|
||||
isMany: this.dataConfig.tabConfig.tabVal,
|
||||
menuStyle: this.dataConfig.menuStyle.type,
|
||||
docConfig: this.dataConfig.pointerStyle.type,
|
||||
dotColor: this.dataConfig.pointerColor.color[0].item,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
bgStyle: this.dataConfig.bgStyle.type,
|
||||
prConfig: this.dataConfig.prConfig.val,
|
||||
navHigh: 0,
|
||||
menuList: [],
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
if (this.rowsNum === 0) {
|
||||
if (this.number === 0) {
|
||||
this.pageNum(6)
|
||||
} else if (this.number === 1) {
|
||||
this.pageNum(8)
|
||||
} else {
|
||||
this.pageNum(10)
|
||||
}
|
||||
} else if (this.rowsNum === 1) {
|
||||
if (this.number === 0) {
|
||||
this.pageNum(9)
|
||||
} else if (this.number === 1) {
|
||||
this.pageNum(12)
|
||||
} else {
|
||||
this.pageNum(15)
|
||||
}
|
||||
} else {
|
||||
if (this.number === 0) {
|
||||
this.pageNum(12)
|
||||
} else if (this.number === 1) {
|
||||
this.pageNum(16)
|
||||
} else {
|
||||
this.pageNum(20)
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.menuList.length && this.isMany) {
|
||||
let that = this
|
||||
// #ifdef H5
|
||||
that.menuHeight()
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
setTimeout(() => {
|
||||
that.menuHeight()
|
||||
}, 100)
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
bannerfun(e) {
|
||||
this.active = e.detail.current;
|
||||
},
|
||||
menuHeight() {
|
||||
let that = this;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#nav0').boundingClientRect(data => {
|
||||
that.navHigh = data.height;
|
||||
}).exec();
|
||||
},
|
||||
pageNum(num) {
|
||||
let count = Math.ceil(this.menus.length / num);
|
||||
let goodArray = new Array();
|
||||
for (let i = 0; i < count; i++) {
|
||||
let list = this.menus.slice(i * num, i * num + num);
|
||||
if (list.length)
|
||||
goodArray.push({
|
||||
list: list
|
||||
});
|
||||
}
|
||||
this.$set(this, 'menuList', goodArray);
|
||||
},
|
||||
menusTap(url) {
|
||||
this.$util.JumpPath(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dot {
|
||||
width: 100%;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.instruct {
|
||||
width: 50rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dot-item {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
border-radius: 50%;
|
||||
margin: 0 4px;
|
||||
|
||||
&.line_dot-item {
|
||||
width: 20rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
&.oneNav {
|
||||
padding-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 30rpx;
|
||||
width: 160rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.on {
|
||||
image {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-txt {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
z-index: 20;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.nav {
|
||||
.item {
|
||||
width: 33.3333%;
|
||||
|
||||
&.four {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&.five {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swiper,
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,138 +1,134 @@
|
||||
<template>
|
||||
<view v-show="!isSortType">
|
||||
<view class='news acea-row row-middle' :class="{pageOn:bgStyle===1}" v-if="itemNew.length" :style="'margin:0 '+prConfig*2+'rpx;margin-top:'+mbConfig*2+'rpx;color:'+txtColor+';background-color:'+bgColor+';'">
|
||||
<!-- ../../../static/images/news.png -->
|
||||
<view class='pictrue skeleton-rect'>
|
||||
<image :src='logoConfig'></image>
|
||||
</view>
|
||||
<view class='swiperTxt skeleton-rect'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration"
|
||||
vertical="true" circular="true">
|
||||
<block v-for="(item,index) in itemNew" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view @click="jump(item.chiild[1].val)" class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'
|
||||
:style="'text-align:'+ (txtStyle==1?'center':txtStyle==2?'right':'left') +';color:'+txtColor+';'">
|
||||
{{item.chiild[0].val}}</view>
|
||||
</view>
|
||||
<view class='iconfont icon-xiangyou'></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'news',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
autoplay: true,
|
||||
duration: 500,
|
||||
itemNew: this.dataConfig.listConfig.list,
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
mbConfig: this.dataConfig.mbConfig.val,
|
||||
txtStyle: this.dataConfig.txtStyle.type,
|
||||
txtColor: this.dataConfig.txtColor.color[0].item,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
bgStyle: this.dataConfig.bgStyle.type,
|
||||
prConfig: this.dataConfig.prConfig.val
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
jump(url){
|
||||
uni.navigateTo({
|
||||
url:url,
|
||||
fail:()=>{
|
||||
uni.switchTab({
|
||||
url:url
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pageOn{
|
||||
border-radius: 12rpx!important;
|
||||
}
|
||||
.news {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
height: 77rpx;
|
||||
border-top: 1rpx solid #f4f4f4;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0 10rpx 30rpx #f5f5f5;
|
||||
}
|
||||
|
||||
.news .pictrue {
|
||||
width: 130rpx;
|
||||
height: 36rpx;
|
||||
border-right: 1rpx solid #ddd;
|
||||
padding-right: 23rpx;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.news .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.news .swiperTxt {
|
||||
width: 523rpx;
|
||||
height: 100%;
|
||||
line-height: 77rpx;
|
||||
overflow: hidden;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text {
|
||||
width: 89%;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text .label {
|
||||
font-size: 20rpx;
|
||||
color: #ff4c48;
|
||||
width: 64rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
border: 2rpx solid #ff4947;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text .newsTitle {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.news .swiperTxt .iconfont {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.news .swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
<template>
|
||||
<view v-show="!isSortType">
|
||||
<view class='news acea-row row-middle' :class="{pageOn:bgStyle===1}" v-if="itemNew.length"
|
||||
:style="'margin:0 '+prConfig*2+'rpx;margin-top:'+mbConfig*2+'rpx;color:'+txtColor+';background-color:'+bgColor+';'">
|
||||
<!-- ../../../static/images/news.png -->
|
||||
<view class='pictrue skeleton-rect'>
|
||||
<image :src='logoConfig'></image>
|
||||
</view>
|
||||
<view class='swiperTxt skeleton-rect'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration"
|
||||
vertical="true" circular="true">
|
||||
<block v-for="(item,index) in itemNew" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view @click="jump(item.chiild[1].val)" class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'
|
||||
:style="'text-align:'+ (txtStyle==1?'center':txtStyle==2?'right':'left') +';color:'+txtColor+';'">
|
||||
{{item.chiild[0].val}}
|
||||
</view>
|
||||
</view>
|
||||
<view class='iconfont icon-xiangyou'></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'news',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
autoplay: true,
|
||||
duration: 500,
|
||||
itemNew: this.dataConfig.listConfig.list,
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
mbConfig: this.dataConfig.mbConfig.val,
|
||||
txtStyle: this.dataConfig.txtStyle.type,
|
||||
txtColor: this.dataConfig.txtColor.color[0].item,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
bgStyle: this.dataConfig.bgStyle.type,
|
||||
prConfig: this.dataConfig.prConfig.val
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
jump(url) {
|
||||
this.$util.JumpPath(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pageOn {
|
||||
border-radius: 12rpx !important;
|
||||
}
|
||||
|
||||
.news {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
height: 77rpx;
|
||||
border-top: 1rpx solid #f4f4f4;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0 10rpx 30rpx #f5f5f5;
|
||||
}
|
||||
|
||||
.news .pictrue {
|
||||
width: 130rpx;
|
||||
height: 36rpx;
|
||||
border-right: 1rpx solid #ddd;
|
||||
padding-right: 23rpx;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.news .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.news .swiperTxt {
|
||||
width: 523rpx;
|
||||
height: 100%;
|
||||
line-height: 77rpx;
|
||||
overflow: hidden;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text {
|
||||
width: 89%;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text .label {
|
||||
font-size: 20rpx;
|
||||
color: #ff4c48;
|
||||
width: 64rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
border: 2rpx solid #ff4947;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text .newsTitle {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.news .swiperTxt .iconfont {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.news .swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,331 +1,311 @@
|
||||
<template>
|
||||
<view class="pictureCube skeleton-rect" :class="{pageOn:bgStyle===1}"
|
||||
:style="{margin:'0 '+prConfig*2+'rpx',marginTop:slider*2+'rpx',background:bgColor}" v-if="picList.length"
|
||||
v-show="!isSortType">
|
||||
<view class="advertItem01" v-for="(item,index) in picList" :key="index" v-if="style==0" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="advertItem02 acea-row" v-if="style==1">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFill" :style="'height:'+ imageH +'rpx;'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem03 acea-row" v-if="style==2">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFill" :style="'height:'+ imageH +'rpx;'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem04 acea-row" v-if="style==3">
|
||||
<view class="item" @click="goDetail(picList[0])">
|
||||
<image :src="picList[0].image"></image>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="pic" @click="goDetail(picList[1])">
|
||||
<image :src="picList[1].image"></image>
|
||||
</view>
|
||||
<view class="pic" @click="goDetail(picList[2])">
|
||||
<image :src="picList[2].image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem05 acea-row" v-if="style==4">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFill" :style="'height:'+ imageH +'rpx;'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem06 acea-row" v-if="style==5">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'pictureCube',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
picList: this.dataConfig.picStyle.picList,
|
||||
style: this.dataConfig.tabConfig.tabVal,
|
||||
bgStyle: this.dataConfig.bgStyle.type,
|
||||
prConfig: this.dataConfig.prConfig.val,
|
||||
slider: this.dataConfig.mbConfig.val,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
widthC: '',
|
||||
imageH: ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.picList.length) {
|
||||
let that = this;
|
||||
this.$nextTick((e) => {
|
||||
if (this.style == 1) {
|
||||
this.widthC = 375
|
||||
} else if (this.style == 2) {
|
||||
this.widthC = 250
|
||||
} else if (this.style == 4) {
|
||||
this.widthC = 188
|
||||
}
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.picList[0].image),
|
||||
success: (res) => {
|
||||
if (res && res.height > 0) {
|
||||
let height = res.height * ((that.widthC - that.prConfig * 2) / res
|
||||
.width)
|
||||
that.$set(that, 'imageH', height);
|
||||
} else {
|
||||
that.$set(that, 'imageH', (that.widthC - that.prConfig * 2) * 2);
|
||||
}
|
||||
},
|
||||
fail: function(error) {
|
||||
that.$set(that, 'imageH', (that.widthC - that.prConfig * 2) * 2);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
goDetail(url) {
|
||||
let urls = url.link
|
||||
if (urls.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = urls
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
uni.navigateTo({
|
||||
url: `/pages/annex/web_view/index?url=${urls}`
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index']
|
||||
.indexOf(urls) == -1) {
|
||||
uni.navigateTo({
|
||||
url: urls
|
||||
})
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: urls
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pageOn {
|
||||
border-radius: 24rpx !important;
|
||||
|
||||
.advertItem01 {
|
||||
image {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem02 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem03 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
image {
|
||||
border-radius: 0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem04 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.pic {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 0 20rpx 0 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0 0 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem05 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
image {
|
||||
border-radius: 0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem06 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0 20rpx 0 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
image {
|
||||
border-radius: 0 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
image {
|
||||
border-radius: 0 0 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pictureCube {
|
||||
background-color: #fff;
|
||||
|
||||
.advertItem01 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem02 {
|
||||
// /deep/uni-image>img{
|
||||
// position: unset;
|
||||
// }
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem03 {
|
||||
.item {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem04 {
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 376rpx;
|
||||
|
||||
.pic {
|
||||
width: 100%;
|
||||
height: 188rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem05 {
|
||||
.item {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem06 {
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 188rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="pictureCube skeleton-rect" :class="{pageOn:bgStyle===1}"
|
||||
:style="{margin:'0 '+prConfig*2+'rpx',marginTop:slider*2+'rpx',background:bgColor}" v-if="picList.length"
|
||||
v-show="!isSortType">
|
||||
<view class="advertItem01" v-for="(item,index) in picList" :key="index" v-if="style==0" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="advertItem02 acea-row" v-if="style==1">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFill" :style="'height:'+ imageH +'rpx;'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem03 acea-row" v-if="style==2">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFill" :style="'height:'+ imageH +'rpx;'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem04 acea-row" v-if="style==3">
|
||||
<view class="item" @click="goDetail(picList[0])">
|
||||
<image :src="picList[0].image"></image>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="pic" @click="goDetail(picList[1])">
|
||||
<image :src="picList[1].image"></image>
|
||||
</view>
|
||||
<view class="pic" @click="goDetail(picList[2])">
|
||||
<image :src="picList[2].image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem05 acea-row" v-if="style==4">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFill" :style="'height:'+ imageH +'rpx;'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advertItem02 advertItem06 acea-row" v-if="style==5">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'pictureCube',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
picList: this.dataConfig.picStyle.picList,
|
||||
style: this.dataConfig.tabConfig.tabVal,
|
||||
bgStyle: this.dataConfig.bgStyle.type,
|
||||
prConfig: this.dataConfig.prConfig.val,
|
||||
slider: this.dataConfig.mbConfig.val,
|
||||
bgColor: this.dataConfig.bgColor.color[0].item,
|
||||
widthC: '',
|
||||
imageH: ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.picList.length) {
|
||||
let that = this;
|
||||
this.$nextTick((e) => {
|
||||
if (this.style == 1) {
|
||||
this.widthC = 375
|
||||
} else if (this.style == 2) {
|
||||
this.widthC = 250
|
||||
} else if (this.style == 4) {
|
||||
this.widthC = 188
|
||||
}
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.picList[0].image),
|
||||
success: (res) => {
|
||||
if (res && res.height > 0) {
|
||||
let height = res.height * ((that.widthC - that.prConfig * 2) / res
|
||||
.width)
|
||||
that.$set(that, 'imageH', height);
|
||||
} else {
|
||||
that.$set(that, 'imageH', (that.widthC - that.prConfig * 2) * 2);
|
||||
}
|
||||
},
|
||||
fail: function(error) {
|
||||
that.$set(that, 'imageH', (that.widthC - that.prConfig * 2) * 2);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
goDetail(url) {
|
||||
let urls = url.link
|
||||
this.$util.JumpPath(urls);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pageOn {
|
||||
border-radius: 24rpx !important;
|
||||
|
||||
.advertItem01 {
|
||||
image {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem02 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem03 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
image {
|
||||
border-radius: 0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem04 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.pic {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 0 20rpx 0 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0 0 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem05 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
image {
|
||||
border-radius: 0 20rpx 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem06 {
|
||||
.item {
|
||||
&:nth-child(1) {
|
||||
image {
|
||||
border-radius: 20rpx 0 0 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
image {
|
||||
border-radius: 0 20rpx 0 0
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
image {
|
||||
border-radius: 0 0 0 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
image {
|
||||
border-radius: 0 0 20rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pictureCube {
|
||||
background-color: #fff;
|
||||
|
||||
.advertItem01 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem02 {
|
||||
// /deep/uni-image>img{
|
||||
// position: unset;
|
||||
// }
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem03 {
|
||||
.item {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem04 {
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 376rpx;
|
||||
|
||||
.pic {
|
||||
width: 100%;
|
||||
height: 188rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem05 {
|
||||
.item {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.advertItem06 {
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 188rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -117,27 +117,7 @@
|
||||
},
|
||||
goDetail(url) {
|
||||
let urls = url.info[1].value
|
||||
if (urls.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = urls
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
uni.navigateTo({
|
||||
url: `/pages/annex/web_view/index?url=${urls}`
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index']
|
||||
.indexOf(urls) == -1) {
|
||||
uni.navigateTo({
|
||||
url: urls
|
||||
})
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: urls
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$util.JumpPath(urls);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,67 +1,75 @@
|
||||
<template>
|
||||
<view v-show="!isSortType">
|
||||
<view v-if="titleConfig" :style="'margin:0 '+prConfig*2+'rpx;'">
|
||||
<navigator :url="linkConfig" hover-class="none" class='title' :class="[(textPosition==0?'left':textPosition==2?'right':''),(textStyle==1?'italics':textStyle==2?'blod':''), (bgStyle===0?'':'borderRadius15')]" :style="'font-size:'+fontSize+'rpx;margin-top:'+mbConfig*2+'rpx;background-color:'+titleColor+';color:'+themeColor+';'">
|
||||
<div>{{titleConfig}}</div>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'titles',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType:{
|
||||
type: String | Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fontSize:this.dataConfig.fontSize.val*2,
|
||||
linkConfig:this.dataConfig.linkConfig.value,
|
||||
mbConfig:this.dataConfig.mbConfig.val,
|
||||
textPosition:this.dataConfig.textPosition.type,
|
||||
textStyle:this.dataConfig.textStyle.type,
|
||||
titleColor:this.dataConfig.titleColor.color[0].item,
|
||||
titleConfig:this.dataConfig.titleConfig.value,
|
||||
themeColor:this.dataConfig.themeColor.color[0].item,
|
||||
prConfig:this.dataConfig.prConfig.val,
|
||||
bgStyle:this.dataConfig.bgStyle.type
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.title{
|
||||
font-size: 40rpx;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.left{
|
||||
text-align: left;
|
||||
}
|
||||
&.right{
|
||||
text-align: right;
|
||||
}
|
||||
&.blod{
|
||||
font-weight: bold;
|
||||
}
|
||||
&.italics{
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<view v-show="!isSortType">
|
||||
<view v-if="titleConfig" :style="'margin:0 '+prConfig*2+'rpx;'">
|
||||
<view @click="goLink" class='title'
|
||||
:class="[(textPosition==0?'left':textPosition==2?'right':''),(textStyle==1?'italics':textStyle==2?'blod':''), (bgStyle===0?'':'borderRadius15')]"
|
||||
:style="'font-size:'+fontSize+'rpx;margin-top:'+mbConfig*2+'rpx;background-color:'+titleColor+';color:'+themeColor+';'">
|
||||
<div>{{titleConfig}}</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'titles',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fontSize: this.dataConfig.fontSize.val * 2,
|
||||
linkConfig: this.dataConfig.linkConfig.value,
|
||||
mbConfig: this.dataConfig.mbConfig.val,
|
||||
textPosition: this.dataConfig.textPosition.type,
|
||||
textStyle: this.dataConfig.textStyle.type,
|
||||
titleColor: this.dataConfig.titleColor.color[0].item,
|
||||
titleConfig: this.dataConfig.titleConfig.value,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,
|
||||
prConfig: this.dataConfig.prConfig.val,
|
||||
bgStyle: this.dataConfig.bgStyle.type
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
goLink() {
|
||||
this.$util.JumpPath(this.linkConfig);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.blod {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.italics {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
// #endiff
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
// 微信分享；
|
||||
|
||||
@ -81,24 +81,7 @@
|
||||
methods: {
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(url) ==
|
||||
-1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$util.JumpPath(url);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -103,25 +103,7 @@
|
||||
},
|
||||
goDetail(url) {
|
||||
goPage().then(res => {
|
||||
let urls = url.info[1].value
|
||||
if (urls.indexOf("http") != -1) {
|
||||
// #ifdef H5 || APP-PLUS
|
||||
location.href = urls
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(urls) ==
|
||||
-1) {
|
||||
uni.navigateTo({
|
||||
url: urls
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: urls
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$util.JumpPath(urls);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,26 +71,7 @@
|
||||
methods: {
|
||||
menusTap(url) {
|
||||
goPage().then(res => {
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
// uni.navigateTo({
|
||||
// url: url
|
||||
// })
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(url) == -1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$util.JumpPath(url);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -207,9 +207,7 @@
|
||||
},
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
this.$util.JumpPath(url);
|
||||
})
|
||||
},
|
||||
goDetail(item) {
|
||||
|
||||
@ -1,191 +1,175 @@
|
||||
<template>
|
||||
<view class="new" :style="colorStyle">
|
||||
<view class="news default" v-if="isIframe && !itemNew.length">{{$t(`暂无新闻，请上传新闻`)}}</view>
|
||||
<view class='news acea-row row-between-wrapper skeleton-rect' v-if="isShow && itemNew.length">
|
||||
<view class='pictrue'>
|
||||
<image :src='img'></image>
|
||||
</view>
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration"
|
||||
vertical="true" circular="true" disable-touch="true">
|
||||
<block v-for="(item,index) in itemNew" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper' hover-class='none'
|
||||
@click="gopage(item.chiild[1].val)">
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.chiild[0].val}}</view>
|
||||
</view>
|
||||
<view class='iconfont icon-xiangyou'></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view class='news acea-row row-between-wrapper' v-if="!isShow && isIframe && itemNew.length">
|
||||
<view class='pictrue'>
|
||||
<image :src='img'></image>
|
||||
</view>
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration"
|
||||
vertical="true" circular="true">
|
||||
<block v-for="(item,index) in itemNew" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper' hover-class='none'
|
||||
@click="gopage(item.chiild[1].val)">
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.chiild[0].val}}</view>
|
||||
</view>
|
||||
<view class='iconfont icon-xiangyou'></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import colors from '@/mixins/color.js';
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
name: 'news',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
mixins:[colors],
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.img = nVal.imgUrl.url;
|
||||
this.itemNew = nVal.newList.list;
|
||||
this.isShow = nVal.isShow.val;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
autoplay: true,
|
||||
duration: 500,
|
||||
img: '',
|
||||
itemNew: [],
|
||||
name: this.$options.name,
|
||||
isIframe: false,
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isIframe = app.globalData.isIframe;
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(url) ==
|
||||
-1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.new{
|
||||
background-color: #fff;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.news {
|
||||
height: 60rpx;
|
||||
padding: 0 26rpx;
|
||||
// box-shadow: 0 10rpx 30rpx #f5f5f5;
|
||||
background-color: var(--view-op-point-four);
|
||||
margin: 0 $uni-index-margin-col;
|
||||
border-radius: 60rpx;
|
||||
// box-shadow: $uni-index-box-shadow;
|
||||
|
||||
&.default {
|
||||
text-align: center;
|
||||
line-height: 77rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.news .pictrue {
|
||||
width: 116rpx;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
border-right: 1rpx solid #ddd;
|
||||
padding-right: 23rpx;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.news .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.news .swiperTxt {
|
||||
width: 470rpx;
|
||||
height: 100%;
|
||||
line-height: 60rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text {
|
||||
line-height: 28rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text .label {
|
||||
font-size: 20rpx;
|
||||
color: #ff4c48;
|
||||
width: 64rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
border: 2rpx solid #ff4947;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text .newsTitle {
|
||||
width: 400rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.news .swiperTxt .iconfont {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.news .swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
<template>
|
||||
<view class="new" :style="colorStyle">
|
||||
<view class="news default" v-if="isIframe && !itemNew.length">{{$t(`暂无新闻，请上传新闻`)}}</view>
|
||||
<view class='news acea-row row-between-wrapper skeleton-rect' v-if="isShow && itemNew.length">
|
||||
<view class='pictrue'>
|
||||
<image :src='img'></image>
|
||||
</view>
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration"
|
||||
vertical="true" circular="true" disable-touch="true">
|
||||
<block v-for="(item,index) in itemNew" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper' hover-class='none'
|
||||
@click="gopage(item.chiild[1].val)">
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.chiild[0].val}}</view>
|
||||
</view>
|
||||
<view class='iconfont icon-xiangyou'></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view class='news acea-row row-between-wrapper' v-if="!isShow && isIframe && itemNew.length">
|
||||
<view class='pictrue'>
|
||||
<image :src='img'></image>
|
||||
</view>
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration"
|
||||
vertical="true" circular="true">
|
||||
<block v-for="(item,index) in itemNew" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper' hover-class='none'
|
||||
@click="gopage(item.chiild[1].val)">
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.chiild[0].val}}</view>
|
||||
</view>
|
||||
<view class='iconfont icon-xiangyou'></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import colors from '@/mixins/color.js';
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
name: 'news',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
mixins: [colors],
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.img = nVal.imgUrl.url;
|
||||
this.itemNew = nVal.newList.list;
|
||||
this.isShow = nVal.isShow.val;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
autoplay: true,
|
||||
duration: 500,
|
||||
img: '',
|
||||
itemNew: [],
|
||||
name: this.$options.name,
|
||||
isIframe: false,
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isIframe = app.globalData.isIframe;
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
this.$util.JumpPath(url);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.new {
|
||||
background-color: #fff;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.news {
|
||||
height: 60rpx;
|
||||
padding: 0 26rpx;
|
||||
// box-shadow: 0 10rpx 30rpx #f5f5f5;
|
||||
background-color: var(--view-op-point-four);
|
||||
margin: 0 $uni-index-margin-col;
|
||||
border-radius: 60rpx;
|
||||
// box-shadow: $uni-index-box-shadow;
|
||||
|
||||
&.default {
|
||||
text-align: center;
|
||||
line-height: 77rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.news .pictrue {
|
||||
width: 116rpx;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
border-right: 1rpx solid #ddd;
|
||||
padding-right: 23rpx;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.news .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.news .swiperTxt {
|
||||
width: 470rpx;
|
||||
height: 100%;
|
||||
line-height: 60rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text {
|
||||
line-height: 28rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text .label {
|
||||
font-size: 20rpx;
|
||||
color: #ff4c48;
|
||||
width: 64rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
border: 2rpx solid #ff4947;
|
||||
}
|
||||
|
||||
.news .swiperTxt .text .newsTitle {
|
||||
width: 400rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.news .swiperTxt .iconfont {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.news .swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -223,9 +223,7 @@
|
||||
},
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
this.$util.JumpPath(url);
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -235,7 +233,7 @@
|
||||
<style lang="scss" scoped>
|
||||
/deep/.uni-scroll-view-content,
|
||||
.scroll-view_x {
|
||||
display: flex;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@ -302,8 +300,8 @@
|
||||
padding: 20rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
@ -138,9 +138,7 @@
|
||||
},
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
this.$util.JumpPath(url);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -122,33 +122,7 @@
|
||||
methods: {
|
||||
goDetail(url) {
|
||||
goPage().then(res => {
|
||||
let urls = url.info[1].value
|
||||
if (urls) {
|
||||
if (urls.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = urls
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(urls) ==
|
||||
-1) {
|
||||
uni.navigateTo({
|
||||
url: urls
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: urls,
|
||||
fail() {
|
||||
uni.reLaunch({
|
||||
url: urls
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$util.JumpPath(url);
|
||||
})
|
||||
},
|
||||
//替换安全域名
|
||||
|
||||
@ -1,411 +1,396 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="points-swiper">
|
||||
<image class="bag" src="../../static/images/jf-head.png" mode=""></image>
|
||||
<view class="swiper">
|
||||
<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
|
||||
:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<block v-for="(item, index) in imgUrls" :key="index">
|
||||
<swiper-item>
|
||||
<image :src="item.img" class="slide-image" @click="goPages(item)"></image>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view class="model">
|
||||
<view class="model-list" v-for="(model,index) in modelList" :key="index" @click="jump(model.url)">
|
||||
<image class="img" :src="model.imgUrl" mode=""></image>
|
||||
<text>{{model.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="body-title">
|
||||
<text class="title">{{$t(`大家都在换`)}}</text>
|
||||
<text class="jump-trip" @click="jumpMore">{{$t(`查看更多`)}}
|
||||
<text class="iconfont icon-xiangyou"></text></text>
|
||||
</view>
|
||||
<view class="product-list" v-if="goodList.length">
|
||||
<view class="product-item" v-for="(item, index) in goodList" @click="goGoodsDetail(item)">
|
||||
<image :src="item.image"></image>
|
||||
<view class="info">
|
||||
<view class="title line1">{{ item.title }}</view>
|
||||
<view class="price-box">
|
||||
{{ item.price }} {{$t(`积分`)}}
|
||||
</view>
|
||||
<view class="sales">{{item.sales}}{{$t(`人兑换`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-goods">
|
||||
<image :src="imgHost + '/statics/images/no-thing.png'" mode=""></image>
|
||||
<view class="fontimg">{{$t(`暂无商品，去看点别的吧`)}}</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="body-title">
|
||||
<text class="title">{{$t(`轻松赚积分`)}}</text>
|
||||
<text></text>
|
||||
</view>
|
||||
<view class="footer-list">
|
||||
<view class="list-left">
|
||||
<image class="icon-sty" src="./static/go-shoping.png" mode=""></image>
|
||||
<view class="list-left-right">
|
||||
<view class="title">
|
||||
{{$t(`购买商品`)}}
|
||||
</view>
|
||||
<view class="trip">
|
||||
{{$t(`购买商品可获得积分奖励`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="right-box">
|
||||
<text class="go-jump">
|
||||
{{$t(`去完成`)}}
|
||||
</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="footer-list">
|
||||
<view class="list-left">
|
||||
<image class="icon-sty" src="./static/everyday.png" mode=""></image>
|
||||
<view class="list-left-right">
|
||||
<view class="title">
|
||||
{{$t(`每日签到活动`)}}
|
||||
</view>
|
||||
<view class="trip">
|
||||
{{$t(`每日签到可获得积分奖励`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="/pages/users/user_sgin/index" class="right-box">
|
||||
<text class="go-jump">
|
||||
{{$t(`去完成`)}}
|
||||
</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="footer-list">
|
||||
<view class="list-left">
|
||||
<image class="icon-sty" src="./static/luck-draw.png" mode=""></image>
|
||||
<view class="list-left-right">
|
||||
<view class="title">
|
||||
{{$t(`九宫格抽奖活动`)}}
|
||||
</view>
|
||||
<view class="trip">
|
||||
{{$t(`幸运抽奖可获得积分奖励`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="/pages/goods/lottery/grids/index?type=1" class="right-box">
|
||||
<text class="go-jump">
|
||||
{{$t(`去完成`)}}
|
||||
</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import swipers from './components/swiper.vue';
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex';
|
||||
import {
|
||||
getStoreIntegral
|
||||
} from '@/api/points_mall.js'
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js';
|
||||
import colors from "@/mixins/color";
|
||||
import {HTTP_REQUEST_URL} from '@/config/app';
|
||||
export default {
|
||||
components: {
|
||||
// swipers
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
imgHost:HTTP_REQUEST_URL,
|
||||
autoplay: true,
|
||||
circular: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
imgUrls: [],
|
||||
goodList: [],
|
||||
modelList: [{
|
||||
title: this.$t(`我的积分`),
|
||||
imgUrl: './static/my-point.png',
|
||||
url: "/pages/users/user_integral/index"
|
||||
},
|
||||
{
|
||||
title: this.$t(`每日签到`),
|
||||
imgUrl: './static/sign-in.png',
|
||||
url: '/pages/users/user_sgin/index'
|
||||
}, {
|
||||
title: this.$t(`积分抽奖`),
|
||||
imgUrl: './static/points-lottery.png',
|
||||
url: '/pages/goods/lottery/grids/index?type=1'
|
||||
}, {
|
||||
title: this.$t(`兑换记录`),
|
||||
imgUrl: './static/exchange.png',
|
||||
url: "/pages/points_mall/exchange_record"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
onLoad() {
|
||||
this.getStoreIntegral()
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV == true) {
|
||||
this.getStoreIntegral();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getStoreIntegral() {
|
||||
getStoreIntegral().then(res => {
|
||||
this.imgUrls = res.data.banner
|
||||
this.goodList = res.data.list
|
||||
})
|
||||
},
|
||||
// 去商品详情
|
||||
goGoodsDetail(item) {
|
||||
goShopDetail(item).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/points_mall/integral_goods_details?id=${item.id}`
|
||||
});
|
||||
});
|
||||
},
|
||||
jumpMore() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/points_mall/integral_goods_list'
|
||||
})
|
||||
},
|
||||
goPages(item) {
|
||||
let url = item.link;
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index',
|
||||
'/pages/index/index'
|
||||
]
|
||||
.indexOf(url) == -1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
jump(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper,
|
||||
swiper,
|
||||
swiper-item,
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
/deep/ .uni-swiper-wrapper {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.points-swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.bag {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 285rpx;
|
||||
}
|
||||
|
||||
.points-swiper-sty {
|
||||
padding: 20rpx 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 56rpx 42rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.model-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-top: 27rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.img {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
margin-bottom: 19rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.body {
|
||||
background-color: #fff;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.body-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.jump-trip,
|
||||
.icon-xiangyou {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.product-item {
|
||||
position: relative;
|
||||
width: 334rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.06);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 344rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 14rpx 16rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 8px;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.sales {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.footer-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 26rpx 0;
|
||||
|
||||
.list-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-sty {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.list-left-right {
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.trip {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.go-jump {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #E93323;
|
||||
border-radius: 26rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
padding: 6rpx 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-goods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 472rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fontimg {
|
||||
text-align: center;
|
||||
color: #bebebe;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="points-swiper">
|
||||
<image class="bag" src="../../static/images/jf-head.png" mode=""></image>
|
||||
<view class="swiper">
|
||||
<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
|
||||
:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<block v-for="(item, index) in imgUrls" :key="index">
|
||||
<swiper-item>
|
||||
<image :src="item.img" class="slide-image" @click="goPages(item)"></image>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<view class="model">
|
||||
<view class="model-list" v-for="(model,index) in modelList" :key="index" @click="jump(model.url)">
|
||||
<image class="img" :src="model.imgUrl" mode=""></image>
|
||||
<text>{{model.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="body-title">
|
||||
<text class="title">{{$t(`大家都在换`)}}</text>
|
||||
<text class="jump-trip" @click="jumpMore">{{$t(`查看更多`)}}
|
||||
<text class="iconfont icon-xiangyou"></text></text>
|
||||
</view>
|
||||
<view class="product-list" v-if="goodList.length">
|
||||
<view class="product-item" v-for="(item, index) in goodList" @click="goGoodsDetail(item)">
|
||||
<image :src="item.image"></image>
|
||||
<view class="info">
|
||||
<view class="title line1">{{ item.title }}</view>
|
||||
<view class="price-box">
|
||||
{{ item.price }} {{$t(`积分`)}}
|
||||
</view>
|
||||
<view class="sales">{{item.sales}}{{$t(`人兑换`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-goods">
|
||||
<image :src="imgHost + '/statics/images/no-thing.png'" mode=""></image>
|
||||
<view class="fontimg">{{$t(`暂无商品，去看点别的吧`)}}</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="body-title">
|
||||
<text class="title">{{$t(`轻松赚积分`)}}</text>
|
||||
<text></text>
|
||||
</view>
|
||||
<view class="footer-list">
|
||||
<view class="list-left">
|
||||
<image class="icon-sty" src="./static/go-shoping.png" mode=""></image>
|
||||
<view class="list-left-right">
|
||||
<view class="title">
|
||||
{{$t(`购买商品`)}}
|
||||
</view>
|
||||
<view class="trip">
|
||||
{{$t(`购买商品可获得积分奖励`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="right-box">
|
||||
<text class="go-jump">
|
||||
{{$t(`去完成`)}}
|
||||
</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="footer-list">
|
||||
<view class="list-left">
|
||||
<image class="icon-sty" src="./static/everyday.png" mode=""></image>
|
||||
<view class="list-left-right">
|
||||
<view class="title">
|
||||
{{$t(`每日签到活动`)}}
|
||||
</view>
|
||||
<view class="trip">
|
||||
{{$t(`每日签到可获得积分奖励`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="/pages/users/user_sgin/index" class="right-box">
|
||||
<text class="go-jump">
|
||||
{{$t(`去完成`)}}
|
||||
</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="footer-list">
|
||||
<view class="list-left">
|
||||
<image class="icon-sty" src="./static/luck-draw.png" mode=""></image>
|
||||
<view class="list-left-right">
|
||||
<view class="title">
|
||||
{{$t(`九宫格抽奖活动`)}}
|
||||
</view>
|
||||
<view class="trip">
|
||||
{{$t(`幸运抽奖可获得积分奖励`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="/pages/goods/lottery/grids/index?type=1" class="right-box">
|
||||
<text class="go-jump">
|
||||
{{$t(`去完成`)}}
|
||||
</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import swipers from './components/swiper.vue';
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex';
|
||||
import {
|
||||
getStoreIntegral
|
||||
} from '@/api/points_mall.js'
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js';
|
||||
import colors from "@/mixins/color";
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
components: {
|
||||
// swipers
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
autoplay: true,
|
||||
circular: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
imgUrls: [],
|
||||
goodList: [],
|
||||
modelList: [{
|
||||
title: this.$t(`我的积分`),
|
||||
imgUrl: './static/my-point.png',
|
||||
url: "/pages/users/user_integral/index"
|
||||
},
|
||||
{
|
||||
title: this.$t(`每日签到`),
|
||||
imgUrl: './static/sign-in.png',
|
||||
url: '/pages/users/user_sgin/index'
|
||||
}, {
|
||||
title: this.$t(`积分抽奖`),
|
||||
imgUrl: './static/points-lottery.png',
|
||||
url: '/pages/goods/lottery/grids/index?type=1'
|
||||
}, {
|
||||
title: this.$t(`兑换记录`),
|
||||
imgUrl: './static/exchange.png',
|
||||
url: "/pages/points_mall/exchange_record"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
onLoad() {
|
||||
this.getStoreIntegral()
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV == true) {
|
||||
this.getStoreIntegral();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getStoreIntegral() {
|
||||
getStoreIntegral().then(res => {
|
||||
this.imgUrls = res.data.banner
|
||||
this.goodList = res.data.list
|
||||
})
|
||||
},
|
||||
// 去商品详情
|
||||
goGoodsDetail(item) {
|
||||
goShopDetail(item).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/points_mall/integral_goods_details?id=${item.id}`
|
||||
});
|
||||
});
|
||||
},
|
||||
jumpMore() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/points_mall/integral_goods_list'
|
||||
})
|
||||
},
|
||||
goPages(item) {
|
||||
let url = item.link;
|
||||
this.$util.JumpPath(url);
|
||||
},
|
||||
jump(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper,
|
||||
swiper,
|
||||
swiper-item,
|
||||
.slide-image {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
}
|
||||
|
||||
/deep/ .uni-swiper-wrapper {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.points-swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.bag {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 285rpx;
|
||||
}
|
||||
|
||||
.points-swiper-sty {
|
||||
padding: 20rpx 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 56rpx 42rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.model-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-top: 27rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.img {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
margin-bottom: 19rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.body {
|
||||
background-color: #fff;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.body-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.jump-trip,
|
||||
.icon-xiangyou {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.product-item {
|
||||
position: relative;
|
||||
width: 334rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.06);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 344rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 14rpx 16rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 8px;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.sales {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.footer-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 26rpx 0;
|
||||
|
||||
.list-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-sty {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.list-left-right {
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.trip {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.go-jump {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #E93323;
|
||||
border-radius: 26rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
padding: 6rpx 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-goods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 472rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fontimg {
|
||||
text-align: center;
|
||||
color: #bebebe;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -315,7 +315,7 @@
|
||||
}, {
|
||||
tab: 3
|
||||
});
|
||||
// #endiff
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
// #ifdef MP
|
||||
|
||||
@ -340,7 +340,7 @@
|
||||
.coupon-list .item.svip .line1 .image{width:30rpx;height:30rpx;margin-right:10rpx;vertical-align:middle;z-index:0;}
|
||||
|
||||
.noCommodity {
|
||||
border-top: 7rpx solid #f5f5f5
|
||||
// border-top: 7rpx solid #f5f5f5
|
||||
}
|
||||
|
||||
.noCommodity .pictrue {
|
||||
|
||||
@ -746,10 +746,10 @@ export default {
|
||||
}
|
||||
|
||||
return 0
|
||||
},
|
||||
/*
|
||||
* 获取当前时间
|
||||
*/
|
||||
},
|
||||
/*
|
||||
* 获取当前时间
|
||||
*/
|
||||
getNowTime() {
|
||||
let today = new Date();
|
||||
let year = today.getFullYear(); // 获取当前年份
|
||||
@ -995,6 +995,52 @@ export default {
|
||||
}
|
||||
return status;
|
||||
},
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 跳转路径封装函数
|
||||
* @param url 跳转路径
|
||||
*/
|
||||
JumpPath: function(url) {
|
||||
let arr = url.split('@APPID=');
|
||||
if (arr.length > 1) {
|
||||
//#ifdef MP
|
||||
uni.navigateToMiniProgram({
|
||||
appId: arr[arr.length - 1], // 此为生活缴费appid
|
||||
path: arr[0], // 此为生活缴费首页路径
|
||||
envVersion: "release",
|
||||
success: res => {
|
||||
console.log("打开成功", res);
|
||||
},
|
||||
fail: err => {
|
||||
console.log('sgdhgf', err);
|
||||
}
|
||||
})
|
||||
//#endif
|
||||
//#ifndef MP
|
||||
this.Tips({
|
||||
title: 'h5与app端不支持跳转外部小程序'
|
||||
});
|
||||
//#endif
|
||||
} else {
|
||||
if (url.indexOf("http") != -1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/annex/web_view/index?url=${url}`
|
||||
});
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index',
|
||||
'/pages/index/index'
|
||||
]
|
||||
.indexOf(url) == -1) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user