chore: 添加缺失的静态资源文件
添加多个前端界面所需的图片、字体、音频等静态资源文件，包括： - 管理员后台的图标、背景图、组件图片 - 移动端页面的商品图片、用户中心图片、活动图标 - 第三方库的示例图片和字体文件 - 浏览器兼容性配置文件 - 图标字体文件（eot、ttf、woff、woff2格式） 这些资源是前端界面正常显示所必需的，之前可能因版本控制忽略或遗漏而缺失。
This commit is contained in:
263
view/uniapp/pages/index/components/articleList.vue
Normal file
263
view/uniapp/pages/index/components/articleList.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<!-- 新闻列表 -->
|
||||
<view v-show="!dataConfig.isHide && articleList.length" :style="[articleWrapperStyle]">
|
||||
<view class="articleList" :class="{
|
||||
large: dataConfig.styleConfig.tabVal == 0,
|
||||
small: dataConfig.styleConfig.tabVal == 2,
|
||||
}" v-if="articleList.length">
|
||||
<navigator :url='"/pages/extension/news_details/index?id="+item.id' hover-class="none"
|
||||
v-for="(item,index) in articleList" :key="index" :style="[articleItemStyle]" class="item">
|
||||
<view v-if="dataConfig.styleConfig.tabVal != 0" class="image-wrap">
|
||||
<easy-loadimage :imageSrc="item.image_input[0]" :borderRadius="borderRadius" width="100%" height="100%"></easy-loadimage>
|
||||
</view>
|
||||
<view class="text-wrap">
|
||||
<view class="title-wrap">
|
||||
<view class="title" :class="{
|
||||
line1: dataConfig.styleConfig.tabVal != 1,
|
||||
line2: dataConfig.styleConfig.tabVal == 1,
|
||||
}" :style="[titleStyle]">{{ item.title }}</view>
|
||||
</view>
|
||||
<view v-if="dataConfig.styleConfig.tabVal == 0" class="image-wrap">
|
||||
<easy-loadimage :imageSrc="item.image_input[0]" :borderRadius="borderRadius" width="100%" height="100%"></easy-loadimage>
|
||||
</view>
|
||||
<view class="time-wrap" :style="[numberStyle]">
|
||||
<view v-if="dataConfig.checkboxList.type.includes(0)" class="time time-wrap-item" :style="[timeStyle]">{{ item.add_time }}</view>
|
||||
<view class="like-wrap time-wrap-item">
|
||||
<view v-if="dataConfig.checkboxList.type.includes(1)" class="view">
|
||||
<text class="iconfont icon-ic_Eyes" :style="[iconEyesStyle]"></text>{{ item.visit }}
|
||||
</view>
|
||||
<view v-if="dataConfig.checkboxList.type.includes(2)" class="like">
|
||||
<text class="iconfont icon-ic_Like" :style="[iconLikeStyle]"></text>{{ item.likes }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getArticleList
|
||||
} from '@/api/api.js';
|
||||
export default {
|
||||
name: 'articleList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
articleList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderRadius() {
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return borderRadius;
|
||||
},
|
||||
timeStyle() {
|
||||
return {
|
||||
'color': this.dataConfig.timeColor.color[0].item,
|
||||
};
|
||||
},
|
||||
iconEyesStyle() {
|
||||
return {
|
||||
'color': this.dataConfig.browseColor.color[0].item,
|
||||
};
|
||||
},
|
||||
iconLikeStyle() {
|
||||
return {
|
||||
'color': this.dataConfig.likeColor.color[0].item,
|
||||
};
|
||||
},
|
||||
numberStyle() {
|
||||
return {
|
||||
'color': this.dataConfig.statisticColor.color[0].item,
|
||||
};
|
||||
},
|
||||
articleItemStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.bgColor.color[0].item} 0%, ${this.dataConfig.bgColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
articleWrapperStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
titleStyle() {
|
||||
let styleObject = {
|
||||
'color': this.dataConfig.nameColor.color[0].item,
|
||||
};
|
||||
if (!this.dataConfig.nameConfig.tabVal) {
|
||||
styleObject['font-weight'] = 'bold';
|
||||
}
|
||||
return styleObject;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCidArticle();
|
||||
},
|
||||
methods: {
|
||||
getCidArticle() {
|
||||
getArticleList(this.dataConfig.selectConfig.activeValue || 0, {
|
||||
page: 1,
|
||||
limit: this.dataConfig.numConfig.val
|
||||
}).then(res => {
|
||||
this.articleList = res.data;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.articleList {
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
margin: 0;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0 6rpx 24rpx;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.label-wrap {
|
||||
margin-top: 16rpx;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
height: 28rpx;
|
||||
padding: 0 6rpx;
|
||||
border: 1rpx solid #E93323;
|
||||
border-radius: 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: #E93323;
|
||||
}
|
||||
|
||||
.image-wrap {
|
||||
width: 240rpx;
|
||||
height: 152rpx;
|
||||
}
|
||||
|
||||
.time-wrap {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #999999;
|
||||
|
||||
.time-wrap-item:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.like-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.view {
|
||||
flex: 1;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
&.large {
|
||||
.item {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
padding: 32rpx 24rpx;
|
||||
}
|
||||
|
||||
.image-wrap {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.time-wrap {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
flex-direction: column;
|
||||
width: 342rpx;
|
||||
padding: 0;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
padding: 20rpx 20rpx 18rpx;
|
||||
}
|
||||
|
||||
.image-wrap {
|
||||
width: 342rpx;
|
||||
height: 216rpx;
|
||||
}
|
||||
|
||||
.label-wrap {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.time-wrap {
|
||||
flex-direction: column;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.like-wrap {
|
||||
justify-content: space-between;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
394
view/uniapp/pages/index/components/bargain.vue
Normal file
394
view/uniapp/pages/index/components/bargain.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<view :style="[boxStyle]" v-if="bargList.length && !dataConfig.isHide">
|
||||
<view :style="[boxContentStyle]">
|
||||
<!-- 砍价头部 -->
|
||||
<view class="w-full h-96 px-24 flex-between-center bg-cover" :style="[headerStyle]">
|
||||
<view class="flex-y-center">
|
||||
<text class="fs-32 lh-44rpx fw-500" :style="[titleStyle]" v-if="titleConfig">{{titleTxtConfig}}</text>
|
||||
<image :src="titleImg" class="w-140 h-32" v-else></image>
|
||||
<text class="fs-28 text--w111-ccc px-16" :style="[dividerColor]">|</text>
|
||||
<text class="fs-26 text--w111-999 lh-36rpx" :style="[tipsColor]">{{tipTxt}}</text>
|
||||
</view>
|
||||
<view class="flex-y-center fs-24 text--w111-999" :style="[headerBntColor]"
|
||||
@tap="goPage('/pages/activity/goods_bargain/index')">
|
||||
<text>{{rightBntTxt}}</text>
|
||||
<text class="iconfont icon-ic_rightarrow fs-24"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 砍价列表 -->
|
||||
<!-- 单列 -->
|
||||
<view class="pt-32 pr-20 pb-32 pl-20 bg--w111-fff" :style="[contentBox]"
|
||||
v-if="goodStyleConfig == 0">
|
||||
<view class="w-full flex justify-between item"
|
||||
v-for="(item,index) in bargList" :key="index"
|
||||
@tap="bargDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="280rpx"
|
||||
height="280rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="flex-1 flex-col justify-between pl-20 h-280">
|
||||
<view class="w-full fs-28 h-80 lh-40rpx line2" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex-y-center mt-26" :style="[joinColor]"
|
||||
v-if="checkboxInfo.includes(1)">
|
||||
<text class="iconfont icon-ic_fire fs-20"></text>
|
||||
<text class="fs-24 fw-500 pl-4">{{item.people}}人正在参与</text>
|
||||
</view>
|
||||
<view class="flex justify-between items-end">
|
||||
<view class="flex-col">
|
||||
<baseMoney :money="item.min_price" symbolSize="24" integerSize="36"
|
||||
decimalSize="36" weight :color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-28 text--w111-999 pt-14 Regular"
|
||||
v-if="checkboxInfo.includes(3)"
|
||||
:style="[otPriceColor]">¥{{item.price}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24 text--w111-fff'
|
||||
v-if="!showBtn" :style="[btnBgColor]">参与砍价</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两列 -->
|
||||
<view class="grid-column-2 grid-gap-22rpx pt-32 pr-20 pb-32 pl-20"
|
||||
v-if="goodStyleConfig == 1">
|
||||
<view v-for="(item,index) in bargList" :key="index"
|
||||
@tap="bargDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
height="324rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line2 mt-16 fs-28 lh-40rpx"
|
||||
:style="[productStyle]" v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex justify-between items-end mt-10">
|
||||
<view class="flex-col">
|
||||
<baseMoney
|
||||
:money="item.min_price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-28 text--w111-999 pt-14 Regular"
|
||||
v-if="checkboxInfo.includes(3)" :style="[otPriceColor]">¥{{item.price}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24 text--w111-fff bg--w111-E93323'
|
||||
v-if="!showBtn" :style="[btnBgColor]">参与砍价</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 三列 -->
|
||||
<view class="grid-column-3 grid-gap-18rpx pt-32 pr-20 pb-32 pl-20"
|
||||
v-if="goodStyleConfig == 2">
|
||||
<view v-for="(item,index) in bargList" :key="index"
|
||||
@tap="bargDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
height="212rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex items-baseline">
|
||||
<baseMoney :money="item.min_price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
preFix="低至"
|
||||
preFixSize="22"
|
||||
:textColor="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
</view>
|
||||
<view class="text-line fs-24 text--w111-999 Regular lh-32rpx"
|
||||
:style="[otPriceColor]" v-if="checkboxInfo.includes(3)">¥{{item.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 滑动 -->
|
||||
<scroll-view scroll-x="true" show-scrollbar="false"
|
||||
class="white-nowrap vertical-middle w-full pt-32 pb-32"
|
||||
v-if="goodStyleConfig == 3">
|
||||
<view class="inline-block ml-20" v-for="(item,index) in bargList" :key="index"
|
||||
@tap="bargDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="224rpx"
|
||||
height="224rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-222 line1 mt-16 fs-26 mb-10" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<text class="badge fs-20 text--w111-fff mb-14"
|
||||
v-if="checkboxInfo.includes(0)" :style="[braginSuccess]">{{item.people}}人已砍成功</text>
|
||||
<view>
|
||||
<baseMoney :money="item.min_price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
openBargainSubscribe
|
||||
} from '@/utils/SubscribeMessage.js';
|
||||
import {
|
||||
getBargainList
|
||||
} from '@/api/activity.js';
|
||||
export default {
|
||||
name: 'bargain',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType:{
|
||||
type: String | Number,
|
||||
default:0
|
||||
},
|
||||
pullReset:{
|
||||
type: Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bargList: [],
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
pullReset(val){
|
||||
if(val == 1){
|
||||
this.getBargainList();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
boxStyle(){
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
}
|
||||
},
|
||||
boxContentStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
background: `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
/*商品模板*/
|
||||
goodStyleConfig(){
|
||||
return this.dataConfig.goodStyleConfig.tabVal
|
||||
},
|
||||
styleConfig(){
|
||||
return this.dataConfig.styleConfig.tabVal
|
||||
},
|
||||
headerStyle(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx 0 0`
|
||||
}else{
|
||||
borderRadius = `${br} ${br} 0 0`
|
||||
}
|
||||
return {
|
||||
backgroundImage: this.styleConfig ? 'url(' + imgBgUrl + ')' : `linear-gradient(90deg,${this.dataConfig.headerBgColor.color[0].item} 0%,${this.dataConfig.headerBgColor.color[1].item} 100%)`,
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
contentBox(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `0 0 ${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx`
|
||||
}else{
|
||||
borderRadius = `0 0 ${br} ${br}`
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
/*标题是文本还是图片*/
|
||||
titleConfig(){
|
||||
return this.dataConfig.titleConfig.tabVal
|
||||
},
|
||||
/*标题文本*/
|
||||
titleTxtConfig(){
|
||||
return this.dataConfig.titleTxtConfig.value
|
||||
},
|
||||
/*标题图片*/
|
||||
titleImg(){
|
||||
return this.styleConfig ? this.titleUrl : this.titleColorUrl
|
||||
},
|
||||
titleColorUrl(){
|
||||
return this.dataConfig.imgColorConfig.url
|
||||
},
|
||||
titleUrl(){
|
||||
return this.dataConfig.imgConfig.url
|
||||
},
|
||||
titleStyle(){
|
||||
return {
|
||||
'font-style': this.dataConfig.titleText.tabVal == 2 ? 'italic' : '',
|
||||
'font-size': `${this.dataConfig.titleNumber.val * 2}rpx`,
|
||||
'font-weight': this.dataConfig.titleText.tabVal == 0 ? 'bold' : '',
|
||||
color: this.dataConfig.titleColor.color[0].item
|
||||
}
|
||||
},
|
||||
/*标题提示文字*/
|
||||
tipsColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.tipsColor.color[0].item : this.dataConfig.tipsColor2.color[0].item
|
||||
}
|
||||
},
|
||||
/*分割线颜色*/
|
||||
dividerColor(){
|
||||
return {
|
||||
color: this.dataConfig.dividerColor.color[0].item
|
||||
}
|
||||
},
|
||||
/*头部提示语文本*/
|
||||
tipTxt(){
|
||||
return this.dataConfig.tipTxtConfig.value
|
||||
},
|
||||
/*头部按钮文本*/
|
||||
rightBntTxt(){
|
||||
return this.dataConfig.rightBntConfig.value
|
||||
},
|
||||
/*头部按钮样式*/
|
||||
headerBntColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.headerBntColor.color[0].item : this.dataConfig.headerBntColor2.color[0].item,
|
||||
fontSize: `${this.dataConfig.bntNumber.val * 2}rpx`
|
||||
}
|
||||
},
|
||||
/*商品图片圆角样式*/
|
||||
imgStyle(){
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return borderRadius
|
||||
},
|
||||
/*商品名称样式*/
|
||||
productStyle(){
|
||||
return {
|
||||
color: this.dataConfig.goodsNameColor.color[0].item,
|
||||
fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : '500'
|
||||
}
|
||||
},
|
||||
/* 展示信息 */
|
||||
checkboxInfo(){
|
||||
return this.dataConfig.checkboxInfo.type
|
||||
},
|
||||
/* 参与人数颜色 */
|
||||
joinColor(){
|
||||
return {
|
||||
color: this.dataConfig.toneConfig.tabVal ? this.dataConfig.joinNumColor.color[0].item : 'var(--view-theme)'
|
||||
}
|
||||
},
|
||||
/* 价格颜色 */
|
||||
priceColor(){
|
||||
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.bargainPriceColor.color[0].item : 'var(--view-theme)'
|
||||
},
|
||||
/* 原价颜色 */
|
||||
otPriceColor(){
|
||||
return this.dataConfig.goodsPriceColor.color[0].item
|
||||
},
|
||||
showBtn(){
|
||||
return this.dataConfig.bargainConfig.tabVal
|
||||
},
|
||||
/* 按钮颜色 */
|
||||
btnBgColor(){
|
||||
return {
|
||||
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.goodsBntColor.color[1].item} 0%,${this.dataConfig.goodsBntColor.color[0].item} 100%)`: 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)'
|
||||
}
|
||||
},
|
||||
/*砍价成功*/
|
||||
braginSuccess(){
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['background'] = `linear-gradient(90deg,${this.dataConfig.joinBgColor.color[0].item} 0%,${this.dataConfig.joinBgColor.color[1].item} 100%)`;
|
||||
styleObject['color'] = this.dataConfig.joinNumColor2.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
/*商品数量*/
|
||||
numberConfig(){
|
||||
return this.dataConfig.numberConfig.val
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getBargainList();
|
||||
},
|
||||
methods: {
|
||||
goPage(url){
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 砍价列表
|
||||
getBargainList() {
|
||||
let limit = this.$config.LIMIT;
|
||||
getBargainList({
|
||||
page: 1,
|
||||
limit: this.numberConfig>=limit?limit:this.numberConfig
|
||||
}).then(res => {
|
||||
this.bargList = res.data
|
||||
})
|
||||
},
|
||||
bargDetail(item){
|
||||
// #ifndef MP
|
||||
this.$emit('changeBarg', item);
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
openBargainSubscribe().then(res=>{
|
||||
this.$emit('changeBarg', item);
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Regular{
|
||||
font-family: 'Regular';
|
||||
}
|
||||
.bg-cover{
|
||||
background-size: cover;
|
||||
}
|
||||
.item ~ .item{
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.badge{
|
||||
padding: 0 10rpx;
|
||||
height: 26rpx;
|
||||
background: linear-gradient(270deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
border-radius: 20rpx;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
68
view/uniapp/pages/index/components/blankPage.vue
Normal file
68
view/uniapp/pages/index/components/blankPage.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<!-- 辅助空白 -->
|
||||
<view v-show="!dataConfig.isHide">
|
||||
<view class="blankPage" :style="[blankWrapStyle]">
|
||||
<view class="bankCon" :style="[blankStyle]"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'blankPage',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bgColor: '',
|
||||
heightConfig: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
blankWrapStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.lrEdge.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
blankStyle() {
|
||||
let borderRadius = [];
|
||||
if (this.dataConfig.fillet.type) {
|
||||
for (let i = 0; i < this.dataConfig.fillet.valList.length; i++) {
|
||||
borderRadius.push(`${this.dataConfig.fillet.valList[i].val * 2}rpx`);
|
||||
}
|
||||
} else {
|
||||
borderRadius = [`${this.dataConfig.fillet.val * 2}rpx`];
|
||||
}
|
||||
return {
|
||||
'height': `${this.dataConfig.heightConfig.val * 2}rpx`,
|
||||
'border-radius': borderRadius.join(' '),
|
||||
'background': this.dataConfig.bgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.blankPage {
|
||||
.bankCon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
452
view/uniapp/pages/index/components/combination.vue
Normal file
452
view/uniapp/pages/index/components/combination.vue
Normal file
@@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<!-- 拼团活动 -->
|
||||
<view>
|
||||
<view :style="[boxStyle]" v-if="combinationList.length && !dataConfig.isHide">
|
||||
<view :style="[boxContentStyle]">
|
||||
<!-- 拼团头部 -->
|
||||
<view class="w-full h-96 px-24 flex-between-center bg-cover" :style="[headerStyle]">
|
||||
<view class="flex-y-center">
|
||||
<text class="fs-32 lh-44rpx fw-500" v-if="titleConfig" :style="[titleStyle]">{{titleTxtConfig}}</text>
|
||||
<image :src="titleImg" class="w-140 h-32" v-else></image>
|
||||
<text class="fs-28 text--w111-ccc px-16" :style="[dividerColor]">|</text>
|
||||
<view class="avatar-group flex-y-center">
|
||||
<image v-for="(item,index) in pinkInfo.avatars" :key="index"
|
||||
:src="item" mode="" class="w-36 h-36 rd-50-p111-"></image>
|
||||
</view>
|
||||
<text class="fs-26 text--w111-999 lh-36rpx ml-22" :style="[tipsColor]">{{pinkInfo.pink_count}}人拼团成功</text>
|
||||
</view>
|
||||
<view class="flex-y-center fs-24 text--w111-999" :style="[headerBntColor]" @tap="goPage('/pages/activity/goods_combination/index')">
|
||||
<text>{{rightBntTxt}}</text>
|
||||
<text class="iconfont icon-ic_rightarrow fs-24"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 拼团列表 -->
|
||||
<!-- 单列 -->
|
||||
<view class="pt-32 pr-20 pb-32 pl-20 bg--w111-fff" :style="[contentBox]" v-if="goodStyleConfig == 0">
|
||||
<view class="w-full flex justify-between item"
|
||||
v-for="(item,index) in combinationList" :key="index"
|
||||
@tap="goDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="240rpx"
|
||||
height="240rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="flex-1 flex-col justify-between pl-20 h-240">
|
||||
<view class="w-full">
|
||||
<view class="w-full fs-28 h-80 lh-40rpx line2" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex mt-14" v-if="checkboxInfo.includes(1)">
|
||||
<view class="flex fs-20 rd-8rpx" :style="[labelBg]">
|
||||
<text class="tuan-num text--w111-fff flex-center">{{item.people}}人团</text>
|
||||
<text class="complete flex-center" :style="[pinkNumStyle]">已拼{{item.pink_count}}份</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-end">
|
||||
<view class="flex-col">
|
||||
<baseMoney
|
||||
:money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
preFix="拼团价"
|
||||
preFixSize="24"
|
||||
:textColor="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-28 text--w111-999 pt-14 Regular"
|
||||
v-if="checkboxInfo.includes(3)"
|
||||
:style="[otPriceColor]">¥{{item.ot_price}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24 text--w111-fff'
|
||||
v-if="!showBtn" :style="[btnBgColor]">去拼团</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两列 -->
|
||||
<view class="grid-column-2 grid-gap-22rpx pt-32 pr-20 pb-32 pl-20" v-if="goodStyleConfig == 1">
|
||||
<view v-for="(item,index) in combinationList" :key="index"
|
||||
@tap="goDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
height="324rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full mt-16 flex-y-center"
|
||||
:style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">
|
||||
<!-- <view class="flex fs-20 rd-4rpx" :style="[labelBg]">
|
||||
<text class="complete flex-center rd-4rpx" :style="[pinkNumStyle]">{{item.people}}人团</text>
|
||||
</view> -->
|
||||
<view class="line2 fs-28 lh-40rpx pl-10">{{item.title}}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-end mt-10">
|
||||
<view class="flex-col">
|
||||
<baseMoney
|
||||
:money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-28 text--w111-999 pt-14 Regular"
|
||||
v-if="checkboxInfo.includes(3)" :style="[otPriceColor]">¥{{item.ot_price}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24 text--w111-fff bg--w111-E93323'
|
||||
v-if="!showBtn" :style="[btnBgColor]">去拼团</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 三列 -->
|
||||
<view class="grid-column-3 grid-gap-18rpx pt-32 pr-20 pb-32 pl-20" v-if="goodStyleConfig == 2">
|
||||
<view class="relative" v-for="(item,index) in combinationList" :key="index"
|
||||
@tap="goDetail(item)">
|
||||
<view class="abs-tag z-20" :style="[labelBg]">
|
||||
<text class="circle-tag flex-center fs-22" :style="[pinkNumStyle]">{{item.people}}人团</text>
|
||||
</view>
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
height="212rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex items-baseline">
|
||||
<baseMoney :money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
</view>
|
||||
<view class="text-line fs-24 text--w111-999 Regular lh-32rpx"
|
||||
:style="[otPriceColor]" v-if="checkboxInfo.includes(3)">¥{{item.ot_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 滑动 -->
|
||||
<scroll-view scroll-x="true" show-scrollbar="false"
|
||||
class="white-nowrap vertical-middle w-full pt-32 pb-32"
|
||||
v-if="goodStyleConfig == 3">
|
||||
<view class="inline-block ml-20 relative"
|
||||
v-for="(item,index) in combinationList" :key="index"
|
||||
@tap="goDetail(item)">
|
||||
<view class="abs-tag z-20" :style="[labelBg]">
|
||||
<text class="circle-tag flex-center fs-22" :style="[pinkNumStyle]">{{item.people}}人团</text>
|
||||
</view>
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="224rpx"
|
||||
height="224rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-222 line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<baseMoney :money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { openPinkSubscribe } from '@/utils/SubscribeMessage.js';
|
||||
import {pink} from '@/api/api.js';
|
||||
import {getCombinationList} from '@/api/activity.js';
|
||||
export default {
|
||||
name: 'combination',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType:{
|
||||
type: String | Number,
|
||||
default:0
|
||||
},
|
||||
pullReset:{
|
||||
type: Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pinkInfo: '',
|
||||
combinationList: [],
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
pullReset(val){
|
||||
if(val == 1){
|
||||
this.pink();
|
||||
this.getCombinationList();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
boxStyle(){
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
}
|
||||
},
|
||||
boxContentStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
background: `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
contentBox(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `0 0 ${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx`
|
||||
}else{
|
||||
borderRadius = `0 0 ${br} ${br}`
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
/*商品模板*/
|
||||
goodStyleConfig(){
|
||||
return this.dataConfig.goodStyleConfig.tabVal
|
||||
},
|
||||
styleConfig(){
|
||||
return this.dataConfig.styleConfig.tabVal
|
||||
},
|
||||
headerStyle(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx 0 0`
|
||||
}else{
|
||||
borderRadius = `${br} ${br} 0 0`
|
||||
}
|
||||
return {
|
||||
backgroundImage: this.styleConfig ? 'url(' + imgBgUrl + ')' : `linear-gradient(90deg,${this.dataConfig.headerBgColor.color[0].item} 0%,${this.dataConfig.headerBgColor.color[1].item} 100%)`,
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
/*标题是文本还是图片*/
|
||||
titleConfig(){
|
||||
return this.dataConfig.titleConfig.tabVal
|
||||
},
|
||||
/*标题文本*/
|
||||
titleTxtConfig(){
|
||||
return this.dataConfig.titleTxtConfig.value
|
||||
},
|
||||
/*标题图片*/
|
||||
titleImg(){
|
||||
return this.styleConfig ? this.titleUrl : this.titleColorUrl
|
||||
},
|
||||
titleColorUrl(){
|
||||
return this.dataConfig.imgColorConfig.url
|
||||
},
|
||||
titleUrl(){
|
||||
return this.dataConfig.imgConfig.url
|
||||
},
|
||||
titleStyle(){
|
||||
return {
|
||||
'font-style': this.dataConfig.titleText.tabVal == 2 ? 'italic' : '',
|
||||
'font-size': `${this.dataConfig.titleNumber.val * 2}rpx`,
|
||||
'font-weight': this.dataConfig.titleText.tabVal == 0 ? 'bold' : '',
|
||||
color: this.dataConfig.titleColor.color[0].item
|
||||
}
|
||||
},
|
||||
/*标题提示文字*/
|
||||
tipsColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.tipsColor.color[0].item : this.dataConfig.tipsColor2.color[0].item
|
||||
}
|
||||
},
|
||||
/*分割线颜色*/
|
||||
dividerColor(){
|
||||
return {
|
||||
color: this.dataConfig.dividerColor.color[0].item
|
||||
}
|
||||
},
|
||||
/*头部按钮文本*/
|
||||
rightBntTxt(){
|
||||
return this.dataConfig.rightBntConfig.value
|
||||
},
|
||||
/*头部按钮样式*/
|
||||
headerBntColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.headerBntColor.color[0].item : this.dataConfig.headerBntColor2.color[0].item,
|
||||
fontSize: `${this.dataConfig.bntNumber.val * 2}rpx`
|
||||
}
|
||||
},
|
||||
/*商品图片圆角样式*/
|
||||
imgStyle(){
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return borderRadius
|
||||
},
|
||||
/*商品名称样式*/
|
||||
productStyle(){
|
||||
return {
|
||||
color: this.dataConfig.goodsNameColor.color[0].item,
|
||||
fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : '500'
|
||||
}
|
||||
},
|
||||
/* 展示信息 */
|
||||
checkboxInfo(){
|
||||
return this.dataConfig.checkboxInfo.type
|
||||
},
|
||||
pinkNumStyle(){
|
||||
return {
|
||||
color: this.dataConfig.toneConfig.tabVal ? this.dataConfig.labelColor.color[0].item : 'var(--view-theme)',
|
||||
// background: this.dataConfig.toneConfig.tabVal ? this.dataConfig.labelColor.color[0].item : 'var(--view-theme)'
|
||||
}
|
||||
},
|
||||
labelBg(){
|
||||
return {
|
||||
background: this.dataConfig.toneConfig.tabVal ? this.dataConfig.labelColor.color[0].item : 'var(--view-theme)'
|
||||
}
|
||||
},
|
||||
/* 价格颜色 */
|
||||
priceColor(){
|
||||
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.pinkPriceColor.color[0].item : 'var(--view-theme)'
|
||||
},
|
||||
/* 原价颜色 */
|
||||
otPriceColor(){
|
||||
return this.dataConfig.goodsPriceColor.color[0].item
|
||||
},
|
||||
showBtn(){
|
||||
return this.dataConfig.pinkConfig.tabVal
|
||||
},
|
||||
/* 按钮颜色 */
|
||||
btnBgColor(){
|
||||
return {
|
||||
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.goodsBntColor.color[1].item} 0%,${this.dataConfig.goodsBntColor.color[0].item} 100%)`: 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)'
|
||||
}
|
||||
},
|
||||
/*商品数量*/
|
||||
numberConfig(){
|
||||
return this.dataConfig.numberConfig.val
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.pink();
|
||||
this.getCombinationList();
|
||||
},
|
||||
methods: {
|
||||
goPage(url){
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
goDetail(item){
|
||||
// #ifndef MP
|
||||
uni.navigateTo({
|
||||
url:`/pages/activity/goods_details/index?id=${item.id}&type=3`
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
openPinkSubscribe().then(res=>{
|
||||
uni.navigateTo({
|
||||
url:`/pages/activity/goods_details/index?id=${item.id}&type=3`
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 拼团列表
|
||||
getCombinationList: function() {
|
||||
let that = this;
|
||||
let limit = that.$config.LIMIT;
|
||||
let data = {
|
||||
page: 1,
|
||||
limit: this.numberConfig>=limit?limit:this.numberConfig
|
||||
};
|
||||
getCombinationList(data).then(res=> {
|
||||
that.combinationList = res.data;
|
||||
}).catch((res) => {
|
||||
return that.$util.Tips({
|
||||
title: res
|
||||
});
|
||||
})
|
||||
},
|
||||
// 拼团数据（拼团人数头部图片）
|
||||
pink: function() {
|
||||
pink().then(res => {
|
||||
this.pinkInfo = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Regular{
|
||||
font-family: 'Regular';
|
||||
}
|
||||
.bg-cover{
|
||||
background-size: cover;
|
||||
}
|
||||
.item ~ .item{
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.inline-flex{
|
||||
display: inline-flex
|
||||
}
|
||||
.tuan-num{
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 8rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 8rpx 0 0 8rpx;
|
||||
}
|
||||
.complete{
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 8rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 0 8rpx 8rpx 0;
|
||||
background:rgba(255,255,255,0.9);
|
||||
}
|
||||
.rd-4rpx{
|
||||
border-radius: 4rpx !important;
|
||||
}
|
||||
.avatar-group image{
|
||||
margin-right: -10rpx;
|
||||
}
|
||||
.abs-tag{
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
top: 10rpx;
|
||||
width: 84rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.circle-tag{
|
||||
width: 84rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
background:rgba(255,255,255,0.9);
|
||||
}
|
||||
</style>
|
||||
532
view/uniapp/pages/index/components/community.vue
Normal file
532
view/uniapp/pages/index/components/community.vue
Normal file
@@ -0,0 +1,532 @@
|
||||
<template>
|
||||
<view :style="[shortVideoWrapStyle]" v-if="videoList.length && !dataConfig.isHide">
|
||||
<view class="shortVideo" :style="[shortVideoStyle]">
|
||||
<view class="nav acea-row row-between-wrapper" :style="[navStyle]">
|
||||
<view v-if="dataConfig.titleConfig.tabVal" class="title" :style="[titleStyle]">{{ dataConfig.titleTxtConfig.value }}</view>
|
||||
<easy-loadimage v-else
|
||||
:image-src="dataConfig.imgConfig.url"
|
||||
width="134rpx"
|
||||
height="34rpx"></easy-loadimage>
|
||||
<view class="more" :style="[buttonStyle]" @click="more(0)">
|
||||
{{ dataConfig.rightBntConfig.value }}
|
||||
<text class="iconfont icon-ic_rightarrow" :style="[buttonStyle]"></text>
|
||||
</view>
|
||||
<image class="clover" src="/static/img/clover.png" mode=""></image>
|
||||
</view>
|
||||
<view v-if="dataConfig.styleConfig.tabVal == 0" class="list" :style="[listStyle]">
|
||||
<scroll-view scroll-x="true" class="scroll white-nowrap pl-20" show-scrollbar="false">
|
||||
<view class="item inline-block"
|
||||
v-for="item in videoList" :key="item.id"
|
||||
@click="more(item.id,item.content_type)"
|
||||
:style="[itemStyle]">
|
||||
<view class="relative">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="296rpx"
|
||||
height="369rpx"
|
||||
:borderRadius="imageRadius"></easy-loadimage>
|
||||
<view class="abs-lb w-full text--w111-fff z-80">
|
||||
<view class="fs-24 pl-16 lh-38rpx w-full line1" v-show="item.title">{{item.title}}</view>
|
||||
<view class="pl-16 pb-14 flex-y-center">
|
||||
<image class="w-36 h-36 rd-50-p111-" :src="item.author_image"></image>
|
||||
<text class="pl-8 fs-20">{{item.author}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="copty-mask" :style="{'border-radius': imageRadius}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-else class="p-20" :style="[listStyle]">
|
||||
<view :class="'wf-page wf-page'+type">
|
||||
<!-- left -->
|
||||
<view>
|
||||
<view id="left" v-if="leftList.length">
|
||||
<view v-for="(item,index) in leftList" :key="index"
|
||||
class="wf-item" :style="[wfItemStyle]"
|
||||
@click="more(item.id,item.content_type)">
|
||||
<view class="wf-item-page wf-page0">
|
||||
<view class='pictrue overflow-picture relative'>
|
||||
<easy-loadimage
|
||||
mode="widthFix"
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
:borderRadius="imageRadius"></easy-loadimage>
|
||||
<view class="player flex-center" v-if="item.content_type == 2">
|
||||
<text class="iconfont icon-ic_right2 fs-20"></text>
|
||||
</view>
|
||||
<view class="w-60 h-36 rd-4rpx flex-center fs-22 text--w111-fff pic-number"
|
||||
v-if="item.content_type == 1">{{item.slider_image.length}}张</view>
|
||||
<view class="abs-lt w-full h-full flex-col flex-center text--w111-fff shenhe"
|
||||
v-if="[0,-1].includes(item.is_verify)">
|
||||
<text class="fs-28" v-show="item.is_verify == 0">正在审核</text>
|
||||
<text class="fs-24 pt-22" v-show="item.is_verify == 0">通过后将展示在列表</text>
|
||||
<text class="fs-28" v-show="item.is_verify == -1">审核未通过</text>
|
||||
<text class="fs-24 pt-22" v-show="item.is_verify == -1">查看未通过原因</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_box box-border">
|
||||
<view class="w-full lh-40rpx fs-28 line2">{{item.title}}</view>
|
||||
<view class="pt-22 fs-22 text--w111-999 flex-between-center">
|
||||
<view class="flex-y-center" @tap.stop="toUser">
|
||||
<image class="w-34 h-34 rd-50-p111-" :src="item.author_image"></image>
|
||||
<text class="pl-8">{{item.author}}</text>
|
||||
</view>
|
||||
<view class="flex-y-center" :class="{'text-red': item.is_like}" @tap.stop="contentLike(item)">
|
||||
<text class="iconfont fs-22" :class="item.is_like ? 'icon-icon_Like_2' : 'icon-ic_Like'"></text>
|
||||
<text class="pl-10">{{item.like_num}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- right -->
|
||||
<view>
|
||||
<view id="right" v-if="rightList.length">
|
||||
<view v-for="(item,index) in rightList" :key="index"
|
||||
class="wf-item" :style="[wfItemStyle]"
|
||||
@click="more(item.id,item.content_type)">
|
||||
<view class="wf-item-page wf-page0">
|
||||
<view class='pictrue overflow-picture relative'>
|
||||
<easy-loadimage
|
||||
mode="widthFix"
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
:borderRadius="imageRadius"></easy-loadimage>
|
||||
<view class="player flex-center" v-if="item.content_type == 2">
|
||||
<text class="iconfont icon-ic_right2 fs-20"></text>
|
||||
</view>
|
||||
<view class="w-60 h-36 rd-4rpx flex-center fs-22 text--w111-fff pic-number"
|
||||
v-if="item.content_type == 1">{{item.slider_image.length}}张</view>
|
||||
<view class="abs-lt w-full h-full flex-col flex-center text--w111-fff shenhe"
|
||||
v-if="[0,-1].includes(item.is_verify)">
|
||||
<text class="fs-28" v-show="item.is_verify == 0">正在审核</text>
|
||||
<text class="fs-24 pt-22" v-show="item.is_verify == 0">通过后将展示在列表</text>
|
||||
<text class="fs-28" v-show="item.is_verify == -1">审核未通过</text>
|
||||
<text class="fs-24 pt-22" v-show="item.is_verify == -1">查看未通过原因</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_box box-border">
|
||||
<view class="w-full lh-40rpx fs-28 line2">{{item.title}}</view>
|
||||
<view class="pt-22 fs-22 text--w111-999 flex-between-center">
|
||||
<view class="flex-y-center" @tap.stop="toUser">
|
||||
<image class="w-34 h-34 rd-50-p111-" :src="item.author_image"></image>
|
||||
<text class="pl-8">{{item.author}}</text>
|
||||
</view>
|
||||
<view class="flex-y-center" :class="{'text-red': item.is_like}" @tap.stop="contentLike(item)">
|
||||
<text class="iconfont fs-22" :class="item.is_like ? 'icon-icon_Like_2' : 'icon-ic_Like'"></text>
|
||||
<text class="pl-10">{{item.like_num}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { communityListApi, getCommunityConfig, communityLikeApi } from "@/api/community.js";
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import {LOGIN_STATUS} from '@/config/cache';
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'community',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videoList: [],
|
||||
bgColor: '',
|
||||
infoColor: '',
|
||||
mbCongfig: 0,
|
||||
prConfig: 0, //背景边距
|
||||
numConfig: 0,
|
||||
allList: [], // 全部列表
|
||||
leftList: [], // 左边列表
|
||||
rightList: [], // 右边列表
|
||||
mark: 0, // 列表标记
|
||||
boxHeight: [], // 下标0和1分别为左列和右列高度
|
||||
type:0,
|
||||
updateNum:10,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLogin','uid']),
|
||||
navStyle() {
|
||||
return {
|
||||
'border-radius':`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`,
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.headerBgColor.color[0].item} 0%, ${this.dataConfig.headerBgColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
titleStyle() {
|
||||
let fontStyle = 'normal';
|
||||
let fontWeight = 'normal';
|
||||
switch (this.dataConfig.titleText.tabVal) {
|
||||
case 0:
|
||||
fontWeight = 'bold'
|
||||
break;
|
||||
case 2:
|
||||
fontStyle = 'italic'
|
||||
fontWeight = 'bold'
|
||||
break;
|
||||
}
|
||||
return {
|
||||
'font-style': this.dataConfig.titleText.tabVal == 2 ? 'italic' : '',
|
||||
'font-size': `${this.dataConfig.titleNumber.val * 2}rpx`,
|
||||
'font-weight': this.dataConfig.titleText.tabVal == 0 ? 'bold' : '',
|
||||
color: this.dataConfig.titleColor.color[0].item
|
||||
};
|
||||
},
|
||||
buttonStyle() {
|
||||
return {
|
||||
'font-size': `${this.dataConfig.bntNumber.val * 2}rpx`,
|
||||
'color': this.dataConfig.headerBntColor.color[0].item,
|
||||
};
|
||||
},
|
||||
|
||||
itemStyle() {
|
||||
let marginTop = 0;
|
||||
let marginLeft = 0;
|
||||
let marginRight = 0;
|
||||
if (this.dataConfig.styleConfig.tabVal == 0) {
|
||||
// marginLeft = `${this.dataConfig.videoSpace2.val * 2}rpx`;
|
||||
marginRight = `${this.dataConfig.videoSpace2.val * 2}rpx`;
|
||||
} else {
|
||||
marginTop = `${this.dataConfig.videoSpace.val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'margin-top': marginTop,
|
||||
'margin-right': marginRight,
|
||||
};
|
||||
},
|
||||
itemLastStyle() {
|
||||
let marginRight = 0;
|
||||
if (this.dataConfig.styleConfig.tabVal) {
|
||||
marginRight = `${this.dataConfig.videoSpace2.val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'margin-right': marginRight,
|
||||
};
|
||||
},
|
||||
imageRadius() {
|
||||
let borderRadius = [`${this.dataConfig.filletImg.val * 2}rpx`];
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius = [];
|
||||
for (let i = 0; i < this.dataConfig.filletImg.valList.length; i++) {
|
||||
borderRadius.push(`${this.dataConfig.filletImg.valList[i].val * 2}rpx`);
|
||||
}
|
||||
}
|
||||
return borderRadius.join(' ');
|
||||
},
|
||||
shortVideoWrapStyle(){
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
}
|
||||
},
|
||||
shortVideoStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
}
|
||||
},
|
||||
listStyle() {
|
||||
return {
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
wfItemStyle(){
|
||||
let windowWidth = uni.getWindowInfo().windowWidth;
|
||||
return {
|
||||
width: (windowWidth - 30 - (this.dataConfig.prConfig.val * 2))/2 + 'px'
|
||||
}
|
||||
},
|
||||
activeValue(){
|
||||
return this.dataConfig.selectConfig.activeValue || ''
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
// 监听列表数据变化
|
||||
videoList: {
|
||||
handler(nVal,oVal){
|
||||
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
||||
|
||||
if (!this.videoList.length ||
|
||||
(this.videoList.length === this.updateNum && this.videoList.length <= this.allList.length)) {
|
||||
this.allList = [];
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.mark = 0;
|
||||
}
|
||||
|
||||
// 如果列表有值，调用waterfall方法
|
||||
|
||||
if (this.videoList.length) {
|
||||
this.allList = this.videoList;
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.allList.forEach((v, i) => {
|
||||
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
||||
if(i % 2){
|
||||
this.rightList.push(v);
|
||||
}else{
|
||||
this.leftList.push(v);
|
||||
}
|
||||
}
|
||||
});
|
||||
if(this.allList.length < 3){
|
||||
this.mark = this.allList.length+1;
|
||||
}else if(this.allList.length <= 7){
|
||||
this.mark = this.allList.length - 1;
|
||||
}else{
|
||||
this.mark = this.allList.length - 2;
|
||||
}
|
||||
if(this.mark < this.allList.length){
|
||||
this.waterFall()
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep:true
|
||||
},
|
||||
|
||||
// 监听标记，当标记发生变化，则执行下一个item排序
|
||||
mark() {
|
||||
const len = this.allList.length;
|
||||
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
||||
this.waterFall();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getCommunityConfig().then(res=>{
|
||||
if(res.data.community_status == 1){
|
||||
this.getVideoList();
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
contentLike(item){
|
||||
if(!this.isLogin) return this.$util.Tips({
|
||||
title: '请登录'
|
||||
});
|
||||
let status = item.is_like == 1 ? 0 : 1;
|
||||
let that = this;
|
||||
communityLikeApi(item.id,{status}).then(res=>{
|
||||
item.is_like = item.is_like == 1 ? 0 : 1
|
||||
}).catch(err=>{
|
||||
return this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
// 瀑布流排序
|
||||
waterFall() {
|
||||
const i = this.mark;
|
||||
if (i == 0) {
|
||||
// 初始化，从左边开始插入
|
||||
this.leftList.push(this.allList[i]);
|
||||
// 更新左边列表高度
|
||||
this.getViewHeight(0);
|
||||
} else if (i == 1) {
|
||||
// 第二个item插入，默认为右边插入
|
||||
this.rightList.push(this.allList[i]);
|
||||
// 更新右边列表高度
|
||||
this.getViewHeight(1);
|
||||
} else {
|
||||
// 根据左右列表高度判断下一个item应该插入哪边
|
||||
if(!this.boxHeight.length){
|
||||
this.rightList.length < this.leftList.length
|
||||
? this.rightList.push(this.allList[i])
|
||||
: this.leftList.push(this.allList[i]);
|
||||
} else {
|
||||
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||||
if (leftOrRight) {
|
||||
this.rightList.push(this.allList[i])
|
||||
} else {
|
||||
this.leftList.push(this.allList[i])
|
||||
}
|
||||
}
|
||||
// 更新插入列表高度
|
||||
this.getViewHeight();
|
||||
}
|
||||
},
|
||||
// 获取列表高度
|
||||
getViewHeight() {
|
||||
// 使用nextTick，确保页面更新结束后，再请求高度
|
||||
this.$nextTick(() => {
|
||||
setTimeout(()=>{
|
||||
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
||||
res ? this.boxHeight[1] = res.height : '';
|
||||
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
|
||||
res ? this.boxHeight[0] = res.height : '';
|
||||
this.mark = this.mark + 1;
|
||||
}).exec();
|
||||
}).exec();
|
||||
},100)
|
||||
})
|
||||
},
|
||||
// item点击
|
||||
itemTap(item) {
|
||||
if(item.content_type == 1){
|
||||
uni.navigateTo({
|
||||
url: '/pages/discover/discoverDetails/index?id=' + item.id
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url: '/pages/discover/discoverVideo/index?id=' + item.id
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
getVideoList: function() {
|
||||
let that = this;
|
||||
communityListApi({
|
||||
page: 1,
|
||||
limit: this.dataConfig.numberConfig.val,
|
||||
topic_id: this.activeValue
|
||||
}).then(res => {
|
||||
that.videoList = res.data;
|
||||
});
|
||||
},
|
||||
more(id,type) {
|
||||
if(id == 0){
|
||||
uni.reLaunch({
|
||||
url: '/pages/discoverIndex/index'
|
||||
})
|
||||
}else{
|
||||
if(type == 1){
|
||||
uni.navigateTo({
|
||||
url: '/pages/discover/discoverDetails/index?id=' + id
|
||||
})
|
||||
}else{
|
||||
// #ifdef H5 || MP-WEIXIN
|
||||
uni.navigateTo({
|
||||
url: '/pages/discover/discoverVideo/index?id=' + id
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
let href = encodeURIComponent(`${HTTP_REQUEST_URL}/pages/discover/discoverVideo/index?content_type=2&id=${id}&token=${this.$Cache.get(LOGIN_STATUS)}`)
|
||||
uni.navigateTo({
|
||||
url: `/pages/discover/discoverVideo/app?url=${href}`
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shortVideo {
|
||||
overflow: hidden;
|
||||
|
||||
.nav {
|
||||
width: 100%;
|
||||
padding: 0 24rpx;
|
||||
height: 96rpx;
|
||||
background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 100%);
|
||||
position: relative;
|
||||
.clover{
|
||||
position: absolute;
|
||||
right: 190rpx;
|
||||
top: 20rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 24rpx 0;
|
||||
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.wf-page {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 20rpx;
|
||||
}
|
||||
.wf-item {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.wf-page1 .wf-item{
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.overflow-picture{
|
||||
max-height: 500rpx;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.info_box{
|
||||
padding: 24rpx 0;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
}
|
||||
.box-border{
|
||||
// border: 1rpx solid #eee;
|
||||
}
|
||||
.text-red{
|
||||
color: #e93323;
|
||||
}
|
||||
.player{
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(51, 51, 51, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
.shenhe{
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.pic-number{
|
||||
position: absolute;
|
||||
right: 16rpx;
|
||||
bottom: 16rpx;
|
||||
background: rgba(102, 102, 102, 0.50);
|
||||
}
|
||||
.copty-mask{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 296rpx;
|
||||
height: 369rpx;
|
||||
background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
|
||||
z-index: 20;
|
||||
}
|
||||
</style>
|
||||
736
view/uniapp/pages/index/components/coupon.vue
Normal file
736
view/uniapp/pages/index/components/coupon.vue
Normal file
@@ -0,0 +1,736 @@
|
||||
<template>
|
||||
<!-- 优惠券 -->
|
||||
<view :style="[couponWrapStyle]" v-show="!dataConfig.isHide && couponList.length">
|
||||
<view class="coupon-wrap" :style="[couponWrapBgColor]">
|
||||
<view v-if="dataConfig.styleConfig.tabVal == 0" class="coupon1">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="list acea-row">
|
||||
<view v-for="item in couponList" :key="item.id" class="item" :style="[couponItemFirstStyle, couponItemStyle]">
|
||||
<view class="text">
|
||||
<view class="money" :style="[couponMoneyColor]">
|
||||
<template v-if="item.coupon_type == 1">
|
||||
¥<text class="number">{{ item.coupon_price }}</text>
|
||||
</template>
|
||||
<template v-else-if="item.coupon_type == 2">
|
||||
<text class="number">{{ item.coupon_price / 10 }}</text>折
|
||||
</template>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text v-if="item.use_min_price">满{{ item.use_min_price }}可用</text>
|
||||
<text v-else>无门槛券</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.is_use == true" class="button" :style="[bntBgColor]">已领取</view>
|
||||
<view v-else-if="item.is_use == false" class="button" :style="[bntBgColor]" @click="receiveCoupon(item)">去领取</view>
|
||||
<view v-else-if="item.is_use == 2" class="button" :style="[bntBgColor]">已过期</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-else-if="dataConfig.styleConfig.tabVal == 1" class="coupon2">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="list acea-row">
|
||||
<view v-for="item in couponList" :key="item.id" class="item" :style="[couponItemStyle]">
|
||||
<view class="name">{{ item.type | typeFilter}}</view>
|
||||
<view class="text" :style="[couponMoneyColor]">
|
||||
<view class="money">
|
||||
<template v-if="item.coupon_type == 1">
|
||||
¥<text class="number">{{ item.coupon_price }}</text>
|
||||
</template>
|
||||
<template v-else-if="item.coupon_type == 2">
|
||||
<text class="number">{{ item.coupon_price / 10 }}</text>折
|
||||
</template>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text v-if="item.use_min_price">满{{ item.use_min_price }}可用</text>
|
||||
<text v-else>无门槛券</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.is_use == true" class="button" :style="[bntBgColor]">已领取</view>
|
||||
<view v-else-if="item.is_use == false" class="button" :style="[bntBgColor]" @click="receiveCoupon(item)">去领取</view>
|
||||
<view v-else-if="item.is_use == 2" class="button" :style="[bntBgColor]">已过期</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-else-if="dataConfig.styleConfig.tabVal == 2" class="coupon3" :style="[coupon3Color]">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="list acea-row">
|
||||
<view v-for="item in couponList" :key="item.id" class="item" :style="[couponItemStyle]">
|
||||
<view class="inner acea-row">
|
||||
<view class="text acea-row row-column row-middle row-center">
|
||||
<view class="money">
|
||||
<template v-if="item.coupon_type == 1">
|
||||
¥<text class="number">{{ item.coupon_price }}</text>
|
||||
</template>
|
||||
<template v-else-if="item.coupon_type == 2">
|
||||
<text class="number">{{ item.coupon_price / 10 }}</text>折
|
||||
</template>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text v-if="item.use_min_price">满{{ item.use_min_price }}可用</text>
|
||||
<text v-else>无门槛券</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.is_use == true" class="button acea-row row-middle">已领取</view>
|
||||
<view v-else-if="item.is_use == false" class="button acea-row row-middle" @click="receiveCoupon(item)">立即领取</view>
|
||||
<view v-else-if="item.is_use == 2" class="button acea-row row-middle">已过期</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-else-if="dataConfig.styleConfig.tabVal == 3" class="coupon4" :style="[coupon4Color]">
|
||||
<view class="content">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="list acea-row">
|
||||
<view v-for="item in couponList" :key="item.id" :style="[couponItemStyle]" class="item">
|
||||
<view class="name" :style="typeStyle">
|
||||
<view class="inner">{{ item.type | typeFilter }}</view>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="money" :style="[couponMoneyColor]">
|
||||
<template v-if="item.coupon_type == 1">
|
||||
¥<text class="number">{{ item.coupon_price }}</text>
|
||||
</template>
|
||||
<template v-else-if="item.coupon_type == 2">
|
||||
<text class="number">{{ item.coupon_price / 10 }}</text>折
|
||||
</template>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text v-if="item.use_min_price">满{{ item.use_min_price }}可用</text>
|
||||
<text v-else>无门槛券</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="station acea-row row-column row-middle row-center" :style="[bntBgColor]">
|
||||
<view class="station-name">先领券 再购物</view>
|
||||
<view class="station-info">领券下单·享购物优惠</view>
|
||||
<view class="button" @click="goCoupon">立即领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="dataConfig.styleConfig.tabVal == 4" class="coupon5">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="list acea-row">
|
||||
<view v-for="item in couponList" :key="item.id" class="item acea-row" :style="[bntBgColor,couponItemStyle]">
|
||||
<view class="text acea-row row-column row-middle row-center">
|
||||
<view class="money" :style="[couponMoneyColor]">
|
||||
<template v-if="item.coupon_type == 1">
|
||||
¥<text class="number">{{ item.coupon_price }}</text>
|
||||
</template>
|
||||
<template v-else-if="item.coupon_type == 2">
|
||||
<text class="number">{{ item.coupon_price / 10 }}</text>折
|
||||
</template>
|
||||
</view>
|
||||
<view class="info" :style="[couponMoneyColor]">
|
||||
<text v-if="item.use_min_price">满{{ item.use_min_price }}可用</text>
|
||||
<text v-else>无门槛券</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.is_use == true" class="button acea-row row-middle">已领取</view>
|
||||
<view v-else-if="item.is_use == false" class="button acea-row row-middle" @click="receiveCoupon(item)">领取</view>
|
||||
<view v-else-if="item.is_use == 2" class="button acea-row row-middle">已过期</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCoupons,
|
||||
setCouponReceive
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getCoupon();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
typeFilter(val){
|
||||
let obj = {
|
||||
0: '通用券',
|
||||
1: '品类券',
|
||||
2: '商品券',
|
||||
3: '品牌券',
|
||||
};
|
||||
return obj[val]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
couponList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLogin']),
|
||||
couponMoneyColor() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['color'] = this.dataConfig.couponMoneyColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
couponItemFirstStyle(){
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
return {
|
||||
background: this.dataConfig.couponBgColor.color[0].item
|
||||
}
|
||||
}else{
|
||||
return {
|
||||
background: 'var(--view-theme)'
|
||||
}
|
||||
}
|
||||
},
|
||||
couponItemStyle() {
|
||||
// let styleObject = {
|
||||
// 'margin-right': `${this.dataConfig.spacingConfig.val * 2}rpx`,
|
||||
// };
|
||||
// if (this.dataConfig.toneConfig.tabVal) {
|
||||
// styleObject['background'] = this.dataConfig.couponBgColor.color[0].item;
|
||||
// if (this.dataConfig.styleConfig.tabVal == 3) {
|
||||
// styleObject['background'] = this.dataConfig.couponBgColor.color[0].item;
|
||||
// }
|
||||
// }
|
||||
return {
|
||||
'margin-right': `${this.dataConfig.spacingConfig.val * 2}rpx`,
|
||||
}
|
||||
},
|
||||
typeStyle(){
|
||||
if (!this.dataConfig.toneConfig.tabVal) {
|
||||
return {
|
||||
background: 'var(--view-theme)',
|
||||
color: 'var(--view-theme)'
|
||||
}
|
||||
}else{
|
||||
return {
|
||||
background: this.dataConfig.couponMoneyColor.color[0].item,
|
||||
color: this.dataConfig.couponMoneyColor.color[0].item
|
||||
}
|
||||
}
|
||||
},
|
||||
bntBgColor() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['background'] = `linear-gradient(180deg, ${this.dataConfig.bntBgColor.color[0].item} 0%, ${this.dataConfig.bntBgColor.color[1].item} 100%)`;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
coupon3Color() {
|
||||
let styleObject = {
|
||||
'--coupon3-color': 'var(--view-theme)',
|
||||
};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['--coupon3-color'] = this.dataConfig.couponMoneyColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
coupon4Color() {
|
||||
let styleObject = {
|
||||
'--coupon4-color': 'var(--view-theme)',
|
||||
};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['--coupon4-color'] = this.dataConfig.couponBgColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
couponWrapBgColor() {
|
||||
let styleObject = {
|
||||
'--module-color': this.dataConfig.moduleColor2.color[0].item,
|
||||
};
|
||||
if (this.dataConfig.styleConfig.tabVal == 1) {
|
||||
styleObject['--module-color'] = `linear-gradient(90deg,${this.dataConfig.moduleColor.color[0].item} 0%,${this.dataConfig.moduleColor.color[1].item} 100%)`;
|
||||
}
|
||||
// if (this.dataConfig.styleConfig.tabVal == 3) {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
styleObject['border-radius'] = borderRadius;
|
||||
// }
|
||||
return styleObject;
|
||||
},
|
||||
couponWrapStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getCoupon();
|
||||
},
|
||||
methods: {
|
||||
getCoupon: function() {
|
||||
let that = this;
|
||||
let limit = that.$config.LIMIT;
|
||||
getCoupons({
|
||||
page: 1,
|
||||
limit: this.dataConfig.numberConfig.val >= limit ? limit : this.dataConfig.numberConfig.val,
|
||||
}).then(res => {
|
||||
that.$set(that, 'couponList', res.data.list);
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
receiveCoupon: function(item) {
|
||||
let that = this;
|
||||
if (!that.isLogin) {
|
||||
this.$emit('changeLogin');
|
||||
} else {
|
||||
setCouponReceive(item.id)
|
||||
.then(function() {
|
||||
item.is_use = true;
|
||||
that.$set(that, 'couponList', that.couponList);
|
||||
that.$util.Tips({
|
||||
title: "领取成功"
|
||||
});
|
||||
})
|
||||
.catch(function(err) {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
goCoupon() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/coupon/index'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.coupon-wrap {
|
||||
background: var(--module-color);
|
||||
}
|
||||
|
||||
.coupon1 {
|
||||
padding: 24rpx 0 24rpx 24rpx;
|
||||
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: 156rpx;
|
||||
height: 156rpx;
|
||||
border-radius: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-right: 12rpx;
|
||||
background: var(--view-theme);
|
||||
|
||||
.text {
|
||||
width: 144rpx;
|
||||
height: 156rpx;
|
||||
padding-top: 22rpx;
|
||||
border: 2rpx solid #FCEAE9;
|
||||
border-radius: 16rpx;
|
||||
margin: -20rpx auto 0;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.money {
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
font-size: 18rpx;
|
||||
line-height: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 76rpx;
|
||||
padding-top: 28rpx;
|
||||
border-radius: 0 0 32rpx 32rpx;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 156rpx;
|
||||
height: 20rpx;
|
||||
border: 8rpx solid #FCEAE9;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-right-radius: 78rpx 20rpx;
|
||||
border-bottom-left-radius: 78rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon2 {
|
||||
padding: 24rpx 0 24rpx 24rpx;
|
||||
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
width: 204rpx;
|
||||
height: 232rpx;
|
||||
padding-top: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 0;
|
||||
margin-right: 12rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.money {
|
||||
height: 48rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 18rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 136rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
margin: 12rpx auto 0;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
line-height: 48rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon3 {
|
||||
padding: 24rpx 0 24rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
width: 274rpx;
|
||||
height: 150rpx;
|
||||
border: 1rpx solid var(--coupon3-color);
|
||||
border-radius: 16rpx;
|
||||
margin-top: 0;
|
||||
margin-right: 12rpx;
|
||||
background: var(--coupon3-color);
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: 100%;
|
||||
border-radius: 15rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border: 1rpx solid var(--coupon3-color);
|
||||
border-radius: 50%;
|
||||
background: var(--module-color);
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border: 1rpx solid var(--coupon3-color);
|
||||
border-radius: 50%;
|
||||
background: var(--module-color);
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
height: 48rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: var(--coupon3-color);
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 8rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: var(--coupon3-color);
|
||||
}
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
width: 74rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 28rpx;
|
||||
color: var(--coupon3-color);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
bottom: 12rpx;
|
||||
left: 0;
|
||||
border-left: 1rpx dashed var(--coupon3-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon5 {
|
||||
padding: 24rpx 0 24rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
width: 228rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
background: linear-gradient(0deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
border-radius: 12rpx;
|
||||
background: radial-gradient(circle at left 54rpx, var(--module-color) 11rpx, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%) top;
|
||||
}
|
||||
|
||||
.money {
|
||||
height: 48rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 56rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon4 {
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
padding: 20rpx 296rpx 20rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
background: var(--coupon4-color);
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
width: 140rpx;
|
||||
height: 132rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 108rpx;
|
||||
height: 38rpx;
|
||||
line-height: 38rpx;
|
||||
border-radius: 0 0 19rpx 19rpx;
|
||||
margin: 0 auto;
|
||||
background: var(--coupon4-color);
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: var(--coupon4-color);
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0 0 19rpx 19rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.money {
|
||||
height: 46rpx;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: var(--coupon4-color);
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 4rpx;
|
||||
text-align: center;
|
||||
font-size: 18rpx;
|
||||
line-height: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.station {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 296rpx;
|
||||
// padding-left: 12rpx;
|
||||
border-radius: 0 24rpx 24rpx 0;
|
||||
// background: radial-gradient(circle at -180rpx 86rpx, transparent 200rpx, var(--coupon4-color) 0%, var(--coupon4-color) 100%);
|
||||
background: linear-gradient(0deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
// filter: drop-shadow(-16rpx 0rpx 10rpx rgba(0, 0, 0, 0.10));
|
||||
}
|
||||
|
||||
.station-name {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.station-info {
|
||||
margin-top: 4rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
color: #F5F5F5;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 160rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
line-height: 48rpx;
|
||||
color: var(--coupon4-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
view/uniapp/pages/index/components/customerService.vue
Normal file
108
view/uniapp/pages/index/components/customerService.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<!-- 在线客服 -->
|
||||
<view class="custmer" v-show="!dataConfig.isHide">
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<view class="customerService" :class="positions?'':'on'" :style="'top:'+topConfig" @touchmove.stop.prevent="setTouchMove" @click="licks">
|
||||
<view class="pictrue">
|
||||
<image :src="logoConfig"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<view class="customerService" :class="positions?'':'on'" :style="'top:'+topConfig" @touchmove.stop.prevent="setTouchMove" v-if="routineContact === 0" @click="licks">
|
||||
<view class="pictrue">
|
||||
<image :src="logoConfig"></image>
|
||||
</view>
|
||||
</view>
|
||||
<button class="customerService-sty" :class="positions?'':'on'" :style="'top:'+topConfig" @touchmove.stop.prevent="setTouchMove" open-type='contact' v-if="routineContact === 1">
|
||||
<image class="pictrue" :src="logoConfig"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
name: 'customerService',
|
||||
computed: mapGetters(['userInfo']),
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType:{
|
||||
type: String | Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
routineContact: parseFloat(this.dataConfig.routine_contact_type),
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
topConfig: this.dataConfig.topConfig.val?this.dataConfig.topConfig.val>=80?80+'%':this.dataConfig.topConfig.val+'%':'30%',
|
||||
positions: this.dataConfig.locationConfig.tabVal
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
licks(){
|
||||
if (this.dataConfig.buttonConfig.tabVal) {
|
||||
let userInfo = {}
|
||||
if(typeof this.userInfo === 'string'){
|
||||
userInfo = JSON.parse(this.userInfo)
|
||||
}else{
|
||||
userInfo = this.userInfo
|
||||
}
|
||||
this.$util.getCustomer(userInfo)
|
||||
} else{
|
||||
this.$util.JumpPath(this.dataConfig.logoConfig.link);
|
||||
}
|
||||
// let userInfo = {}
|
||||
// if(typeof this.userInfo === 'string'){
|
||||
// userInfo = JSON.parse(this.userInfo)
|
||||
// }else{
|
||||
// userInfo = this.userInfo
|
||||
// }
|
||||
// this.$util.getCustomer(userInfo)
|
||||
},
|
||||
setTouchMove(e) {
|
||||
var that = this;
|
||||
if (e.touches[0].clientY < 545 && e.touches[0].clientY > 66) {
|
||||
that.topConfig = e.touches[0].clientY+'px'
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.custmer {
|
||||
touch-action: none;
|
||||
}
|
||||
.customerService,.customerService-sty {
|
||||
position: fixed;
|
||||
right: 20rpx;
|
||||
z-index: 40;
|
||||
&.on {
|
||||
left:20rpx;
|
||||
}
|
||||
.pictrue {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.customerService-sty{
|
||||
background-color: rgba(0,0,0,0) !important;
|
||||
}
|
||||
</style>
|
||||
318
view/uniapp/pages/index/components/follow.vue
Normal file
318
view/uniapp/pages/index/components/follow.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<!-- 关注公众号 -->
|
||||
<view v-if="!dataConfig.isHide">
|
||||
<view :style="[followWrapStyle]">
|
||||
<view :style="[followStyle]" class="follow acea-row row-between-wrapper">
|
||||
<view class="picTxt acea-row row-middle">
|
||||
<view class="pictrue">
|
||||
<easy-loadimage :image-src="dataConfig.imgConfig.url" width="92rpx" height="92rpx" borderRadius="46rpx"></easy-loadimage>
|
||||
</view>
|
||||
<view class="name line1">
|
||||
{{ dataConfig.titleConfig.value }}
|
||||
</view>
|
||||
</view>
|
||||
<view :style="[buttonStyle]" class="notes acea-row row-center-wrapper" @click="followTap">
|
||||
关注
|
||||
</view>
|
||||
<view class="iconfont icon-ic_close"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="followCode" v-if="followCode">
|
||||
<view class="pictrue">
|
||||
<view class="title">关注公众号</view>
|
||||
<view class="tips">活动福利，第一时间了解</view>
|
||||
<view class="code-bg">
|
||||
<image class="imgs" show-menu-by-longpress :src="dataConfig.codeConfig.url" mode=""></image>
|
||||
</view>
|
||||
<!-- #ifdef MP || APP-PLUS -->
|
||||
<view class="btn" @tap="savePic">保存图片</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="btn" v-show="isWeixin" @tap="savePic">长按保存图片</view>
|
||||
<view class="btn" v-show="!isWeixin" @tap="savePic">保存图片</view>
|
||||
<!-- #endif -->
|
||||
<view class="close acea-row row-center-wrapper" @click="closeFollowCode">
|
||||
<text class="iconfont icon-ic_close"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mask"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {follow} from '@/api/api.js';
|
||||
import {getSubscribe} from '@/api/public';
|
||||
// #ifdef H5
|
||||
import Auth from '@/libs/wechat';
|
||||
// #endif
|
||||
export default {
|
||||
name: 'follow',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
followCode: false,
|
||||
followUrl: '',
|
||||
bgColor: '',
|
||||
imgConfig: '',
|
||||
mbConfig: 0,
|
||||
themeColor: '',
|
||||
titleConfig: 0,
|
||||
subscribe: false,
|
||||
// #ifdef H5
|
||||
isWeixin: Auth.isWeixin(),
|
||||
//#endif
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
buttonStyle() {
|
||||
return {
|
||||
'border-color': this.dataConfig.themeColor.color[0].item,
|
||||
'color': this.dataConfig.themeColor.color[0].item,
|
||||
};
|
||||
},
|
||||
followStyle() {
|
||||
let borderRadius = [];
|
||||
if (this.dataConfig.fillet.type) {
|
||||
for (let i = 0; i < this.dataConfig.fillet.valList.length; i++) {
|
||||
borderRadius.push(`${this.dataConfig.fillet.valList[i].val * 2}rpx`);
|
||||
}
|
||||
} else {
|
||||
borderRadius = [`${this.dataConfig.fillet.val * 2}rpx`];
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius.join(' '),
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.bgColor.color[0].item} 0%, ${this.dataConfig.bgColor.color[1].item} 100%)`,
|
||||
'color': this.dataConfig.themeColor.color[0].item,
|
||||
};
|
||||
},
|
||||
followWrapStyle() {
|
||||
return {
|
||||
'padding': `0 ${this.dataConfig.prConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
getSubscribe().then(res => {
|
||||
this.subscribe = res.data.subscribe || false;
|
||||
}).catch(() => {})
|
||||
},
|
||||
methods: {
|
||||
savePic(){
|
||||
// #ifdef H5
|
||||
var a = document.createElement('a'); // 生成一个a元素
|
||||
a.download = 'wechat'; // 设置图片名称
|
||||
a.style.display = "none";
|
||||
a.href = this.dataConfig.codeConfig.url; // 将生成的URL设置为a.href属性
|
||||
document.body.appendChild(a); // 将a标签追加到文档对象中
|
||||
a.click(); // 触发a的单击事件
|
||||
a.remove(); // 一次性的，用完就删除a标签
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
let that = this;
|
||||
uni.downloadFile({
|
||||
url: that.dataConfig.codeConfig.url, //图片地址
|
||||
success: function(response){
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success() {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: response.tempFilePath,
|
||||
success: function(res) {
|
||||
that.closeFollowCode();
|
||||
that.$util.Tips({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: '保存失败'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: response.tempFilePath,
|
||||
success: function(res) {
|
||||
that.closeFollowCode();
|
||||
that.$util.Tips({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: '保存失败'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
//#ifdef APP-PLUS
|
||||
let that = this
|
||||
uni.downloadFile({
|
||||
url: that.dataConfig.codeConfig.url, //图片地址
|
||||
success: function(response){
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: response.tempFilePath,
|
||||
success: function(res) {
|
||||
that.posterImageClose();
|
||||
that.$util.Tips({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: '保存失败'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
followTap() {
|
||||
this.followCode = true;
|
||||
},
|
||||
closeFollowCode() {
|
||||
this.followCode = false
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.follow {
|
||||
padding: 14rpx 32rpx 14rpx 30rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.picTxt {
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: var(--view-theme);
|
||||
width: 112rpx;
|
||||
height: 56rpx;
|
||||
border: 1px solid var(--view-theme);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.followCode {
|
||||
.pictrue {
|
||||
width: 548rpx;
|
||||
height: 758rpx;
|
||||
border-radius: 48rpx;
|
||||
background: #FFFFFF;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.title {
|
||||
padding: 48rpx 0 46rpx;
|
||||
border-top-left-radius: 48rpx;
|
||||
border-top-right-radius: 48rpx;
|
||||
border-bottom-right-radius: 274rpx 40rpx;
|
||||
border-bottom-left-radius: 274rpx 40rpx;
|
||||
background: linear-gradient(90deg, #FF7931 0%, var(--view-theme) 100%);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
line-height: 56rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.code-bg {
|
||||
width: 312rpx;
|
||||
height: 312rpx;
|
||||
margin: 24rpx auto 0;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 420rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
margin: 40rpx auto 60rpx;
|
||||
background: linear-gradient(90deg, #FF7931 0%, var(--view-theme) 100%);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
bottom: -108rpx;
|
||||
left: 50%;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 2rpx solid #CCCCCC;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
792
view/uniapp/pages/index/components/goodList.vue
Normal file
792
view/uniapp/pages/index/components/goodList.vue
Normal file
@@ -0,0 +1,792 @@
|
||||
<template>
|
||||
<view :style="[boxStyle]" v-if="tempArr.length && !dataConfig.isHide">
|
||||
<view>
|
||||
<!-- 单列 -->
|
||||
<view v-if="goodStyleConfig == 0">
|
||||
<view class="w-full flex justify-between item bg--w111-fff p-20"
|
||||
v-for="(item,index) in tempArr" :key="index"
|
||||
@tap="goDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:borderSrc="item.activity_frame.image"
|
||||
width="224rpx"
|
||||
height="224rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="flex-1 flex-col justify-between pl-20">
|
||||
<view class="w-full fs-28 h-80 lh-40rpx line2"
|
||||
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
||||
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
|
||||
<BaseTag
|
||||
:text="label.label_name"
|
||||
:color="label.color"
|
||||
:background="label.bg_color"
|
||||
:borderColor="label.border_color"
|
||||
:circle="label.border_color ? true : false"
|
||||
:imgSrc="label.icon"
|
||||
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
||||
</view>
|
||||
<view class="flex-between-center" v-if="onlyShowPrice">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor"></baseMoney>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
|
||||
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="flex-y-center mt-4">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
|
||||
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
|
||||
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-end">
|
||||
<view class="flex-y-center">
|
||||
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
|
||||
<text class="fs-22 text--w111-999 pl-16" v-if="checkboxInfo.includes(4)">评分{{item.star}}</text>
|
||||
</view>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
|
||||
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两列瀑布流 -->
|
||||
<view class="wf-page" v-if="goodStyleConfig == 1">
|
||||
<!-- left -->
|
||||
<view class="w-full">
|
||||
<view id="left" v-if="leftList.length">
|
||||
<view v-for="(item,index) in leftList" :key="index" class="wf-item" :style="[wfItemStyle]" @tap="goDetail(item)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage
|
||||
mode="widthFix"
|
||||
:image-src="item.image"
|
||||
:borderSrc="item.activity_frame.image"
|
||||
width="100%"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
</view>
|
||||
<view class="info_box">
|
||||
<view class="w-full line2 fs-28 text--w111-333 lh-40rpx"
|
||||
v-if="checkboxInfo.includes(0)" :style="[productStyle]">
|
||||
<text v-if="item.brand_name" class="brand-tag">{{ item.brand_name }}</text>
|
||||
{{item.store_name}}</view>
|
||||
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
|
||||
<BaseTag
|
||||
:text="label.label_name"
|
||||
:color="label.color"
|
||||
:background="label.bg_color"
|
||||
:borderColor="label.border_color"
|
||||
:circle="label.border_color ? true : false"
|
||||
:imgSrc="label.icon"
|
||||
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
||||
</view>
|
||||
<view class="flex-between-center mt-20" v-if="onlyShowPrice">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor"></baseMoney>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="flex-y-center mt-8">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
|
||||
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
|
||||
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between-center mt-20">
|
||||
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- right -->
|
||||
<view class="w-full">
|
||||
<view id="right" v-if="rightList.length">
|
||||
<view v-for="(item,index) in rightList" :key="index"
|
||||
class="wf-item" :style="[wfItemStyle]" @tap="goDetail(item)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage
|
||||
mode="widthFix"
|
||||
:image-src="item.image"
|
||||
:borderSrc="item.activity_frame.image"
|
||||
width="100%"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
</view>
|
||||
<view class="info_box">
|
||||
<view class="w-full line2 fs-28 text--w111-333 lh-40rpx"
|
||||
v-if="checkboxInfo.includes(0)" :style="[productStyle]">
|
||||
<text v-if="item.brand_name" class="brand-tag">{{ item.brand_name }}</text>
|
||||
{{item.store_name}}</view>
|
||||
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
|
||||
<BaseTag
|
||||
:text="label.label_name"
|
||||
:color="label.color"
|
||||
:background="label.bg_color"
|
||||
:borderColor="label.border_color"
|
||||
:circle="label.border_color ? true : false"
|
||||
:imgSrc="label.icon"
|
||||
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
||||
</view>
|
||||
<view class="flex-between-center mt-20" v-if="onlyShowPrice">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor"></baseMoney>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="flex-y-center mt-8">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
|
||||
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
|
||||
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between-center mt-20">
|
||||
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两列展示(横向) -->
|
||||
<view class="pt-32 pr-24 pb-32 pl-24" :style="[moduleColor]" v-if="goodStyleConfig == 3">
|
||||
<view class="grid-column-2 grid-gap-20rpx">
|
||||
<view class="flex" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:borderSrc="item.activity_frame.image"
|
||||
width="144rpx"
|
||||
height="144rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="flex-1 pl-20">
|
||||
<view class="w-full fs-26 h-72 lh-36rpx line2 mb-20"
|
||||
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 三列 -->
|
||||
<view class="pt-32 pr-24 pb-32 pl-24" :style="[moduleColor]" v-if="goodStyleConfig == 2">
|
||||
<view class="grid-column-3 grid-gap-20rpx">
|
||||
<view v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:borderSrc="item.activity_frame.image"
|
||||
width="100%"
|
||||
height="210rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full fs-28 h-80 lh-40rpx line2 mt-20"
|
||||
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
||||
<view class="flex-between-center mt-14">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 大图展示 -->
|
||||
<view v-if="goodStyleConfig ==4">
|
||||
<view class="w-full item" v-for="(item,index) in tempArr" :key="index"
|
||||
@tap="goDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
height="360rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="rd-b-24rpx p-24 bg--w111-fff">
|
||||
<view class="w-full line1 fs-28 text--w111-333 lh-40rpx mt-22"
|
||||
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
||||
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
|
||||
<BaseTag
|
||||
:text="label.label_name"
|
||||
:color="label.color"
|
||||
:background="label.bg_color"
|
||||
:borderColor="label.border_color"
|
||||
:circle="label.border_color ? true : false"
|
||||
:imgSrc="label.icon"
|
||||
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
||||
</view>
|
||||
<view class="flex-between-center" v-if="onlyShowPrice">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor"></baseMoney>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
|
||||
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="flex-y-center mt-8">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8"
|
||||
v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
|
||||
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
|
||||
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-end">
|
||||
<view class="flex-y-center">
|
||||
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
|
||||
<text class="fs-22 text--w111-999 pl-16" v-if="checkboxInfo.includes(4)">评分{{item.star}}</text>
|
||||
</view>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
|
||||
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 横向滑动 -->
|
||||
<view class="pt-32 pb-32 pl-24" :style="[moduleColor]" v-if="goodStyleConfig == 5">
|
||||
<scroll-view scroll-x="true" show-scrollbar="false"
|
||||
class="white-nowrap vertical-middle w-full">
|
||||
<view class="inline-block mr-20" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:borderSrc="item.activity_frame.image"
|
||||
width="200rpx"
|
||||
height="200rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-200 fs-28 h-80 lh-40rpx line2 break_word mt-20"
|
||||
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
||||
<view class="flex-between-center mt-8">
|
||||
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
||||
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_increase fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
||||
<view class="flex-center cart-btn">
|
||||
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<productWindow
|
||||
:attr="attr"
|
||||
:isShow='1'
|
||||
:iSplus='1'
|
||||
:iScart='1'
|
||||
:fangda="false"
|
||||
type="2"
|
||||
:storeInfo="storeInfo"
|
||||
@myevent="onMyEvent"
|
||||
@ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal"
|
||||
@iptCartNum="iptCartNum" @goCat="goCatNum" id='product-window' :is_vip="is_vip"></productWindow>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getProductslist, getAttr } from '@/api/store.js';
|
||||
import skuSelect from '@/mixins/skuSelect.js'
|
||||
import { toLogin } from '@/libs/login.js';
|
||||
import { mapGetters, mapState } from 'vuex';
|
||||
import { getCartCounts } from '@/api/order.js';
|
||||
import { goShopDetail } from '@/libs/order.js';
|
||||
import productWindow from '@/components/productWindow';
|
||||
export default {
|
||||
name: 'goodList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
productWindow
|
||||
},
|
||||
mixins: [skuSelect],
|
||||
data() {
|
||||
return {
|
||||
tempArr: [],
|
||||
type:0,
|
||||
attr: {
|
||||
cartAttr: false,
|
||||
productAttr: [],
|
||||
productSelect: {}
|
||||
},
|
||||
id: 0,
|
||||
productValue: [],
|
||||
attrValue: '', //已选属性
|
||||
storeName: '', //多属性产品名称
|
||||
is_vip: 0, //是否是会员
|
||||
storeInfo: {},
|
||||
allList: [], // 全部列表
|
||||
leftList: [], // 左边列表
|
||||
rightList: [], // 右边列表
|
||||
mark: 0, // 列表标记
|
||||
boxHeight: [], // 下标0和1分别为左列和右列高度
|
||||
updateNum:10
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听列表数据变化
|
||||
tempArr: {
|
||||
handler(nVal,oVal){
|
||||
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
||||
if (!this.tempArr.length ||
|
||||
(this.tempArr.length === this.updateNum && this.tempArr.length <= this.allList.length)) {
|
||||
this.allList = [];
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.mark = 0;
|
||||
}
|
||||
// 如果列表有值，调用waterfall方法
|
||||
|
||||
if (this.tempArr.length) {
|
||||
this.allList = this.tempArr;
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.allList.forEach((v, i) => {
|
||||
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
||||
if(i % 2){
|
||||
this.rightList.push(v);
|
||||
}else{
|
||||
this.leftList.push(v);
|
||||
}
|
||||
}
|
||||
});
|
||||
if(this.allList.length < 3){
|
||||
this.mark = this.allList.length+1;
|
||||
}else if(this.allList.length <= 7){
|
||||
this.mark = this.allList.length - 1;
|
||||
}else{
|
||||
this.mark = this.allList.length - 2;
|
||||
}
|
||||
if(this.mark < this.allList.length){
|
||||
this.waterFall()
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep:true
|
||||
},
|
||||
// 监听标记，当标记发生变化，则执行下一个item排序
|
||||
mark() {
|
||||
const len = this.allList.length;
|
||||
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
||||
this.waterFall();
|
||||
}
|
||||
},
|
||||
dataConfig() {
|
||||
this.productslist();
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
...mapState({
|
||||
cartNum: state => state.indexData.cartNum
|
||||
}),
|
||||
...mapGetters(['isLogin', 'uid', 'cartNum']),
|
||||
/*外层盒子样式*/
|
||||
boxStyle(){
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
}
|
||||
},
|
||||
styleConfig(){
|
||||
return this.dataConfig.styleConfig.tabVal
|
||||
},
|
||||
wfItemStyle(){
|
||||
let windowWidth = uni.getWindowInfo().windowWidth;
|
||||
return {
|
||||
width: (windowWidth - 10 - (this.dataConfig.prConfig.val * 2))/2 + 'px'
|
||||
}
|
||||
},
|
||||
/*商品图片圆角样式*/
|
||||
imgStyle(){
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.styleConfig.tabVal == 1) {
|
||||
borderRadius = `${this.dataConfig.filletImg.val * 2}rpx ${this.dataConfig.filletImg.val * 2}rpx 0 0`;
|
||||
}
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
if (this.dataConfig.styleConfig.tabVal == 1) {
|
||||
borderRadius = `${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx 0 0`;
|
||||
}
|
||||
}
|
||||
return borderRadius
|
||||
},
|
||||
/*商品名称样式*/
|
||||
productStyle(){
|
||||
return {
|
||||
color: this.dataConfig.goodsNameColor.color[0].item,
|
||||
fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : '500'
|
||||
}
|
||||
},
|
||||
/* 展示信息 */
|
||||
checkboxInfo(){
|
||||
return this.dataConfig.checkboxInfo.type
|
||||
},
|
||||
/* 价格颜色 */
|
||||
priceColor(){
|
||||
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.goodsPriceColor.color[0].item : 'var(--view-theme)'
|
||||
},
|
||||
/* 原价颜色 */
|
||||
otPriceColor(){
|
||||
return this.dataConfig.goodsPriceColor.color[0].item
|
||||
},
|
||||
btnStyle(){
|
||||
return this.dataConfig.bntStyleConfig.tabVal
|
||||
},
|
||||
showBtn(){
|
||||
return this.dataConfig.cartConfig.tabVal
|
||||
},
|
||||
/* 按钮颜色 */
|
||||
btnBgColor(){
|
||||
return {
|
||||
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.bntBgColor.color[0].item} 0%,${this.dataConfig.bntBgColor.color[1].item} 100%)`: 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)'
|
||||
}
|
||||
},
|
||||
btnTextColor(){
|
||||
return {
|
||||
color: '#FFFFFF',
|
||||
background: this.dataConfig.toneCartConfig.tabVal ? `linear-gradient(90deg, ${this.dataConfig.bntBgColor.color[0].item} 0%, ${this.dataConfig.bntBgColor.color[1].item} 100%)` : 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)',
|
||||
}
|
||||
},
|
||||
/*商品数量*/
|
||||
numberConfig(){
|
||||
return this.dataConfig.numberConfig.val
|
||||
},
|
||||
/*商品模板*/
|
||||
goodStyleConfig(){
|
||||
return this.dataConfig.styleConfig.tabVal
|
||||
},
|
||||
/*检索条件 0综合 1销量 2价格*/
|
||||
goodsSort(){
|
||||
return this.dataConfig.goodsSort.tabVal
|
||||
},
|
||||
/*按照什么方式选择商品 0 指定商品 1 指定品牌 2指定分类 3 商品标签 */
|
||||
typeConfig(){
|
||||
return this.dataConfig.typeConfig.activeValue
|
||||
},
|
||||
bntConfig(){
|
||||
return this.dataConfig.bntConfig.tabVal
|
||||
},
|
||||
onlyShowPrice(){
|
||||
if(this.checkboxInfo.toString() == '0,2' || this.checkboxInfo.toString() == '2,0' || this.checkboxInfo.toString() == '2'){
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
},
|
||||
moduleColor(){
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
background: `linear-gradient(90deg,${this.dataConfig.moduleColor.color[0].item} 0%,${this.dataConfig.moduleColor.color[1].item} 100%)`
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// #ifndef APP-PLUS
|
||||
// this.$eventHub.$on('product_video_observe', () => {
|
||||
// this.observeVideo();
|
||||
// });
|
||||
// #endif
|
||||
},
|
||||
mounted() {
|
||||
this.productslist();
|
||||
},
|
||||
methods: {
|
||||
observeVideo() {
|
||||
let observer = uni.createIntersectionObserver(this, { observeAll: true });
|
||||
observer.relativeToViewport().observe('.video', res => {
|
||||
if (res.intersectionRatio) {
|
||||
uni.createVideoContext(res.id, this).play();
|
||||
} else{
|
||||
uni.createVideoContext(res.id, this).pause();
|
||||
}
|
||||
});
|
||||
},
|
||||
productslist() {
|
||||
let limit = this.$config.LIMIT;
|
||||
let data = {};
|
||||
if (this.typeConfig == 1) {
|
||||
data = {
|
||||
ids: this.dataConfig.goodsList.ids.join(','),
|
||||
};
|
||||
} else {
|
||||
data = {
|
||||
priceOrder: this.goodsSort == 2 ? 'desc' : '',
|
||||
salesOrder: this.goodsSort == 1 ? 'desc' : '',
|
||||
brand_id: this.typeConfig == 2 ? this.dataConfig.brandList.brandVal.join(',') : '',
|
||||
store_label_id: this.typeConfig == 4 ? this.dataConfig.goodsLabel.activeValue.join(',') : '',
|
||||
cate_id: this.typeConfig == 3 ? this.dataConfig.classList.classVal.join(',') : '',
|
||||
page:1,
|
||||
limit: this.numberConfig
|
||||
};
|
||||
}
|
||||
getProductslist(data).then(res => {
|
||||
this.tempArr = res.data;
|
||||
});
|
||||
},
|
||||
goDetail(item) {
|
||||
goShopDetail(item, this.$store.state.app.uid).catch(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
});
|
||||
});
|
||||
},
|
||||
// 商品详情接口；
|
||||
getAttrs(id) {
|
||||
let that = this;
|
||||
getAttr(id, 0).then(res => {
|
||||
that.$set(that.attr, 'productAttr', res.data.productAttr);
|
||||
that.$set(that, 'productValue', res.data.productValue);
|
||||
that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
|
||||
that.$set(that, 'storeInfo', res.data.storeInfo);
|
||||
that.DefaultSelect();
|
||||
})
|
||||
},
|
||||
addCartChange(item, index){
|
||||
if(this.bntConfig == 1){
|
||||
if(item.spec_type){
|
||||
this.goCartDuo(item);
|
||||
}else{
|
||||
this.goCartDan(item,index);
|
||||
}
|
||||
}else{
|
||||
this.goDetail(item);
|
||||
}
|
||||
|
||||
},
|
||||
getCartNum() {
|
||||
let that = this;
|
||||
getCartCounts().then(res => {
|
||||
this.$store.commit('indexData/setCartNum', res.data.count)
|
||||
});
|
||||
},
|
||||
// 瀑布流排序
|
||||
waterFall() {
|
||||
const i = this.mark;
|
||||
if (i == 0) {
|
||||
// 初始化，从左边开始插入
|
||||
this.leftList.push(this.allList[i]);
|
||||
// 更新左边列表高度
|
||||
this.getViewHeight(0);
|
||||
} else if (i == 1) {
|
||||
// 第二个item插入，默认为右边插入
|
||||
this.rightList.push(this.allList[i]);
|
||||
// 更新右边列表高度
|
||||
this.getViewHeight(1);
|
||||
} else {
|
||||
// 根据左右列表高度判断下一个item应该插入哪边
|
||||
if(!this.boxHeight.length){
|
||||
this.rightList.length < this.leftList.length
|
||||
? this.rightList.push(this.allList[i])
|
||||
: this.leftList.push(this.allList[i]);
|
||||
} else {
|
||||
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||||
if (leftOrRight) {
|
||||
this.rightList.push(this.allList[i])
|
||||
} else {
|
||||
this.leftList.push(this.allList[i])
|
||||
}
|
||||
}
|
||||
// 更新插入列表高度
|
||||
this.getViewHeight();
|
||||
}
|
||||
},
|
||||
// 获取列表高度
|
||||
getViewHeight() {
|
||||
// 使用nextTick，确保页面更新结束后，再请求高度
|
||||
this.$nextTick(() => {
|
||||
setTimeout(()=>{
|
||||
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
||||
res ? this.boxHeight[1] = res.height : '';
|
||||
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
|
||||
res ? this.boxHeight[0] = res.height : '';
|
||||
this.mark = this.mark + 1;
|
||||
}).exec();
|
||||
}).exec();
|
||||
},100)
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// $page-padding: 10px;
|
||||
// $grid-gap: 10px;
|
||||
.wf-page {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 20rpx;
|
||||
}
|
||||
.wf-item {
|
||||
// width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.wf-page1 .wf-item{
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.item ~ .item{
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.wf-page .wf-item .pictrue{
|
||||
max-height: 560rpx;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.info_box{
|
||||
padding: 16rpx 20rpx;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.bg--w111-484643{
|
||||
background: linear-gradient(90deg, #484643 0%, #1F1B17 100%);
|
||||
}
|
||||
.text--w111-FDDAA4{
|
||||
color: #FDDAA4;
|
||||
}
|
||||
.svip_rd{
|
||||
border-radius: 14rpx 0 8rpx 14rpx;
|
||||
}
|
||||
.cart-btn{
|
||||
// background:rgba(255,255,255,0.9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
79
view/uniapp/pages/index/components/guide.vue
Normal file
79
view/uniapp/pages/index/components/guide.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<!-- 辅助线 -->
|
||||
<view v-show="!dataConfig.isHide">
|
||||
<view class="lines" :style="[lineWrapStyle]">
|
||||
<view class="item" :style="[lineStyle]"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'guide',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
heightConfig: 0,
|
||||
lineColor: '',
|
||||
// lineStyle: 0,
|
||||
lrEdge: 0,
|
||||
mbConfig: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
lineWrapStyle() {
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.lrEdge.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background-color': this.dataConfig.lineBgColor.color[0].item
|
||||
};
|
||||
},
|
||||
lineStyle() {
|
||||
let borderStyle = '';
|
||||
switch (this.dataConfig.lineStyle.tabVal) {
|
||||
case 1:
|
||||
borderStyle = 'solid';
|
||||
break;
|
||||
case 2:
|
||||
borderStyle = 'dotted';
|
||||
break;
|
||||
default:
|
||||
borderStyle = 'dashed';
|
||||
break;
|
||||
}
|
||||
return {
|
||||
'border-style': borderStyle,
|
||||
'border-color': this.dataConfig.lineColor.color[0].item,
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.lines {
|
||||
padding: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.item {
|
||||
box-sizing: border-box;
|
||||
border-bottom-color: red;
|
||||
border-width: 0 0 1rpx;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
view/uniapp/pages/index/components/headerSerch.vue
Normal file
216
view/uniapp/pages/index/components/headerSerch.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<!-- 搜索框 -->
|
||||
<view v-if="!dataConfig.isHide">
|
||||
<view class="header" :style="[headerStyle]">
|
||||
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
||||
<view :style="{height:statusBarHeight + 'px'}"></view>
|
||||
<!-- #endif -->
|
||||
<view class="serch-wrapper acea-row row-middle" :style="[serchWrapperStyle]">
|
||||
<view class="logo skeleton-rect" v-if="!dataConfig.styleConfig.tabVal && dataConfig.logoConfig.url">
|
||||
<image :src="dataConfig.logoConfig.url" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="title" v-if="dataConfig.styleConfig.tabVal == 1 && dataConfig.titleConfig.value" @click="goLink">{{ dataConfig.titleConfig.value }}</view>
|
||||
<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle skeleton-rect" hover-class="none">
|
||||
<view class="search acea-row row-middle" :class="{ 'row-center': dataConfig.styleConfig.tabVal == 2 && !dataConfig.styleSearchConfig.tabVal }" :style="[searchStyle]">
|
||||
<text class="iconfont icon-ic_search"></text>
|
||||
<swiper v-if="hotWords.length" :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true" class="swiper"
|
||||
:style="{ color: dataConfig.hotWordsColor.color[0].item }">
|
||||
<swiper-item v-for="(item, index) in hotWords" :key="index">
|
||||
{{ item.val }}
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<text v-else>{{ dataConfig.tipConfig.value }}</text>
|
||||
</view>
|
||||
<template v-if="dataConfig.styleConfig.tabVal == 2">
|
||||
<view v-if="dataConfig.styleSearchConfig.tabVal == 1" class="button"
|
||||
:style="{ background: dataConfig.searchBgColor.color[0].item, color: dataConfig.searchTxtColor.color[0].item }">搜索</view>
|
||||
<view v-else-if="dataConfig.styleSearchConfig.tabVal == 2" class="button2" :style="{ color: dataConfig.searchColor.color[0].item }">搜索</view>
|
||||
</template>
|
||||
</navigator>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view :style="[menuButtonStyle]"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height: marTop + 'px'}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let statusBarHeight = uni.getWindowInfo().statusBarHeight;
|
||||
export default {
|
||||
name: 'headerSerch',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
special: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: statusBarHeight,
|
||||
marTop: 40,
|
||||
bgColor: this.dataConfig.moduleColor.color,
|
||||
boxStyle: '',
|
||||
logoConfig: '',
|
||||
mbConfig: '',
|
||||
txtStyle: '',
|
||||
hotWords: [],
|
||||
prConfig: '',
|
||||
tabVal: '',
|
||||
radioVal: '',
|
||||
textColor: '',
|
||||
textStyle: '',
|
||||
titleConfig: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
headerStyle() {
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val*2}rpx ${this.dataConfig.prConfig.val*2}rpx ${this.dataConfig.bottomConfig.val*2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
serchWrapperStyle() {
|
||||
let borderRadius = [];
|
||||
if (this.dataConfig.fillet.type) {
|
||||
for (let i = 0; i < this.dataConfig.fillet.valList.length; i++) {
|
||||
borderRadius.push(`${this.dataConfig.fillet.valList[i].val*2}rpx`);
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < 4; i++) {
|
||||
borderRadius.push(`${this.dataConfig.fillet.val*2}rpx`);
|
||||
}
|
||||
}
|
||||
return {
|
||||
borderRadius: borderRadius.join(' '),
|
||||
background: `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
searchStyle() {
|
||||
return {
|
||||
background: this.dataConfig.searchBoxColor.color[0].item,
|
||||
color: this.dataConfig.tipColor.color[0].item,
|
||||
};
|
||||
},
|
||||
menuButtonStyle(){
|
||||
let res = wx.getMenuButtonBoundingClientRect();
|
||||
return {
|
||||
width: res.width + 'px',
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
that.hotWords = that.dataConfig.hotWords.list.filter(item => {
|
||||
if (item.val) {
|
||||
return item;
|
||||
}
|
||||
});
|
||||
uni.setStorageSync('hotList', that.hotWords);
|
||||
that.$store.commit('hotWords/setHotWord', that.hotWords);
|
||||
setTimeout(() => {
|
||||
// 获取小程序头部高度
|
||||
let info = uni.createSelectorQuery().in(this).select(".header");
|
||||
info.boundingClientRect(function(data) {
|
||||
that.marTop = data.height
|
||||
}).exec()
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
goLink() {
|
||||
let url = this.dataConfig.linkConfig.value;
|
||||
this.$util.JumpPath(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.serch-wrapper {
|
||||
|
||||
&.center {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-right: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.header {
|
||||
z-index: 30;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
.serch-wrapper {
|
||||
height: 96rpx;
|
||||
padding: 18rpx 30rpx;
|
||||
|
||||
.logo {
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.input {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
.search {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #F5F5F5;
|
||||
font-size: 28rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 16rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
flex: 1;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
top: 4rpx;
|
||||
right: 4rpx;
|
||||
height: 52rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 26rpx;
|
||||
background: #E93323;
|
||||
font-weight: 500;
|
||||
line-height: 52rpx;
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.button2 {
|
||||
margin-left: 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.row-center uni-swiper-item, .row-center swiper-item{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
842
view/uniapp/pages/index/components/homeComb.vue
Normal file
842
view/uniapp/pages/index/components/homeComb.vue
Normal file
@@ -0,0 +1,842 @@
|
||||
<template>
|
||||
<view class="page_count" v-if="!dataConfig.isHide">
|
||||
<view class="bg-img" v-if="imgUrls.length">
|
||||
<image :class="{ active: index == swiperCur }"
|
||||
v-for="(i, index) in imgUrls" :key="index" :src="i.img"></image>
|
||||
</view>
|
||||
<view class="bag-gradient" :style="[bgGradientStyle]"></view>
|
||||
<!--搜索-->
|
||||
<view class="my-main">
|
||||
<view class="mp-header" id="home" :style="[mpHeaderStyle]">
|
||||
<view class="sys-head" :style="{height: statusBarHeight + 'px'}"></view>
|
||||
<view class="serch-box">
|
||||
<view class="serch-wrapper flex">
|
||||
<view class="logo skeleton-rect">
|
||||
<image :src="logoUpImg" mode="heightFix"></image>
|
||||
</view>
|
||||
<navigator v-if="hotWords.length" :url="'/pages/goods/goods_search/index?searchVal='+searchVal" :class="logoConfig ? 'input' : 'uninput'" hover-class="none"
|
||||
class="skeleton-rect" :style="[inputStyle]">
|
||||
<view class='swiperTxt'>
|
||||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true" circular="true" @change="textChange">
|
||||
<block v-for="(item,index) in hotWords" :key='index'>
|
||||
<swiper-item catchtouchmove='catchTouchMove'>
|
||||
<view class='acea-row row-between-wrapper'>
|
||||
<view class='text acea-row row-between-wrapper'>
|
||||
<view class='newsTitle line1'>{{item.val}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<text class="iconfont icon-ic_search"></text>
|
||||
</navigator>
|
||||
<navigator v-else url="/pages/goods/goods_search/index" hover-class="none" class="skeleton-rect input" :style="[inputStyle]">
|
||||
{{ dataConfig.inputConfig.value }}
|
||||
<text class="iconfont icon-ic_search"></text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="'height:'+ (statusBarHeight+43) +'px'" v-if="!special && searchShow"></view>
|
||||
<view v-if="!dataConfig.classConfig.tabVal" class="navTabBox tabNav">
|
||||
<view class="longTab" :style="{ width: `${mainWidth}px` }">
|
||||
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
|
||||
<view class="longItem" v-for="(item,index) in tabListConfig" :key="index"
|
||||
:class="{ click: index == tabClick }" :id="'id'+index" :data-index="index"
|
||||
:style="{marginRight: `${dataConfig.contentConfig.val * 2}rpx`}"
|
||||
@click="changeTab(item,index)">{{item.text.val}}</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="category" @click="showCategory">
|
||||
<text class="iconfont icon-a-ic_Imageandtextsorting" :style="'color:'+(isScrolled?txtColor:'#fff')"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isCategory" class="category_count">
|
||||
<view class="sys-head tui-skeleton" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="fs-28">精选类目</view>
|
||||
<view class="cate_count grid-column-4 grid-gap-16rpx mt-32">
|
||||
<view class="category_item" :class="index===tabClick?'clicks':''" @click="changeTab(item,index)" v-for="(item,index) in tabListConfig" :key="index" :id="'ids'+index">
|
||||
{{item.text.val}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiperBg pb-20">
|
||||
<!-- :style="{ paddingBottom: isMenu ? '30rpx' : '30rpx'}" -->
|
||||
<view class="swiper page_swiper" v-if="imgUrls.length">
|
||||
<swiper
|
||||
:autoplay="true"
|
||||
:circular="circular"
|
||||
:interval="intervals"
|
||||
:duration="duration"
|
||||
:current="swiperCur"
|
||||
:previous-margin="swiperMargin"
|
||||
:next-margin="swiperMargin"
|
||||
:style="{'height': imageH + 'px'}"
|
||||
@change="swiperChange">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" :style="[imageStyle]" mode="aspectFill" class="slide-image"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!--重置小圆点的样式 -->
|
||||
<view class="dots acea-row" :class="{
|
||||
'row-center': dataConfig.docPosition.tabVal == 1,
|
||||
'row-right': dataConfig.docPosition.tabVal == 2,
|
||||
}">
|
||||
<view v-if="dataConfig.docConfig.tabVal == 2" class="dot3">
|
||||
<view class="dot" :style="[progressWidth,dotBgColor]">
|
||||
<view class="active" :style="[progressValue,dotColor]"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="acea-row" :class="{
|
||||
dot1: dataConfig.docConfig.tabVal == 0,
|
||||
dot2: dataConfig.docConfig.tabVal == 1,
|
||||
dot4: dataConfig.docConfig.tabVal == 3,
|
||||
}">
|
||||
<view v-for="(item, index) in imgUrls" :key="index" class="dot" :class="{ active: index == swiperCur }" :style="[dotBgColor,index==swiperCur?dotColor:'']"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isCategory" class="mask" @click="isCategory = false"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCategoryList
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
getCategoryVersion
|
||||
} from '@/api/api.js';
|
||||
let statusBarHeight = uni.getWindowInfo().statusBarHeight;
|
||||
export default {
|
||||
name: 'homeComb',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isScrolled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isScale: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMenu: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
special: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: statusBarHeight,
|
||||
autoplay: true,
|
||||
interval: this.dataConfig.numConfig.val * 1000 || 2500,
|
||||
duration: 500,
|
||||
logoConfig: this.dataConfig.logoConfig.url,
|
||||
tabClick: 0, //导航栏被点击
|
||||
isLeft: 0, //导航栏下划线位置
|
||||
isWidth: 0, //每个导航栏占位
|
||||
mainWidth: 0,
|
||||
tabLeft: 0,
|
||||
tabTitle: [],
|
||||
isTop: 0,
|
||||
navHeight: 38,
|
||||
indicatorDots: false,
|
||||
circular: true,
|
||||
intervals: 3000,
|
||||
imgUrls: [], //图片轮播数据
|
||||
swiperCur: 0,
|
||||
searchVal: '',
|
||||
bgColor: this.dataConfig.swiperConfig.list.length ? this.dataConfig.swiperConfig.list[0].img : '',
|
||||
isCategory: false,
|
||||
classColor: '',
|
||||
txtColor: '',
|
||||
hotWordShow: false,
|
||||
bgColorLeft: '',
|
||||
bgColorRight: '',
|
||||
searchShow: false,
|
||||
imageH:160,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
swiperMargin() {
|
||||
return this.dataConfig.styleConfig.tabVal ? '50rpx' : '10rpx';
|
||||
},
|
||||
bgGradientStyle(){
|
||||
return {
|
||||
'background-image': `linear-gradient(to bottom, rgba(245,245,245,0) 0%, rgba(245,245,245,0) 50%, ${this.dataConfig.gradientColor ? this.dataConfig.gradientColor.color[0].item : '#f5f5f5'} 100%)`
|
||||
}
|
||||
},
|
||||
mpHeaderStyle() {
|
||||
let style = {};
|
||||
if (this.isScrolled && this.dataConfig.searchConfig.tabVal) {
|
||||
style.background = `linear-gradient(90deg, #FFFFFF 50%, #FFFFFF 100%)`;
|
||||
style.position = `fixed`;
|
||||
this.searchShow = true;
|
||||
} else {
|
||||
this.searchShow = false;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
inputStyle() {
|
||||
let style = {};
|
||||
if (this.isScrolled && this.dataConfig.searchConfig.tabVal) {
|
||||
style.background = `#F5F5F5`;
|
||||
style.color = `#BBBBBB`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
progressWidth() {
|
||||
return {
|
||||
width: `${this.dataConfig.swiperConfig.list.length * 20}rpx`,
|
||||
};
|
||||
},
|
||||
progressValue() {
|
||||
return {
|
||||
width: `${(this.swiperCur + 1) / this.dataConfig.swiperConfig.list.length * 100}%`,
|
||||
};
|
||||
},
|
||||
dotBgColor() {
|
||||
return {
|
||||
background: this.dataConfig.dotBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
dotColor() {
|
||||
return {
|
||||
background: this.dataConfig.dotColor.color[0].item,
|
||||
};
|
||||
},
|
||||
imageStyle() {
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
};
|
||||
},
|
||||
tabListConfig() {
|
||||
let tabList = this.dataConfig.tabListConfig.list;
|
||||
tabList.unshift({
|
||||
classPage: {
|
||||
id: 0
|
||||
},
|
||||
dataType: {
|
||||
tabVal: 0
|
||||
},
|
||||
microPage: {
|
||||
id: 0
|
||||
},
|
||||
text: {
|
||||
val: '首页'
|
||||
},
|
||||
})
|
||||
return tabList
|
||||
},
|
||||
hotWords() {
|
||||
return this.dataConfig.hotWords.list.filter(item => {
|
||||
return item.val;
|
||||
});
|
||||
},
|
||||
longItemStyle(){
|
||||
return {
|
||||
marginRight: `${this.dataConfig.contentConfig.val * 2}rpx`,
|
||||
fontSize: `${this.dataConfig.fontSize?.val * 2}rpx`,
|
||||
color: `${this.dataConfig.nameColor?.color[0]?.item}`
|
||||
};
|
||||
},
|
||||
logoUpImg() {
|
||||
let img = '';
|
||||
if(this.isScrolled && this.dataConfig.searchConfig.tabVal && this.dataConfig.logoUpConfig && this.dataConfig.logoUpConfig.url){
|
||||
img = this.dataConfig.logoUpConfig.url;
|
||||
}else{
|
||||
img = this.dataConfig.logoConfig.url;
|
||||
}
|
||||
return img;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var that = this
|
||||
// 获取设备宽度
|
||||
uni.getSystemInfo({
|
||||
success(e) {
|
||||
that.mainWidth = e.windowWidth
|
||||
that.isWidth = (e.windowWidth - 65) / 8
|
||||
}
|
||||
})
|
||||
that.imgUrls = that.dataConfig.swiperConfig.list;
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
that.hotWords.forEach(item => {
|
||||
if (item.val) {
|
||||
this.hotWordShow = true;
|
||||
}
|
||||
})
|
||||
that.computedHeight();
|
||||
uni.setStorageSync('hotList', that.hotWords);
|
||||
},
|
||||
methods: {
|
||||
goDetail(url) {
|
||||
let urls = url.info[1].value
|
||||
this.$util.JumpPath(urls);
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
swiperChange(e) {
|
||||
let {
|
||||
current,
|
||||
source
|
||||
} = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.swiperCur = e.detail.current;
|
||||
this.bgColor = this.imgUrls[e.detail.current]['img']
|
||||
}
|
||||
},
|
||||
computedHeight(){
|
||||
let that =this;
|
||||
let windowWidth = uni.getWindowInfo().windowWidth;
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: (res) => {
|
||||
let height = res.height * ((windowWidth - 20) / res.width)
|
||||
that.$set(that, 'imageH', height.toFixed(2));
|
||||
}
|
||||
})
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
textChange(e) {
|
||||
let {
|
||||
current,
|
||||
source
|
||||
} = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.searchVal = this.hotWords[e.detail.current]['val']
|
||||
}
|
||||
},
|
||||
/**显示全部分类*/
|
||||
showCategory() {
|
||||
this.isCategory = true;
|
||||
},
|
||||
/*跳转为页面*/
|
||||
changeTab(item, index) {
|
||||
if (this.tabClick == index) return;
|
||||
this.tabClick = index; //设置导航点击了哪一个
|
||||
this.isLeft = index * this.isWidth + 16; //设置下划线位置
|
||||
this.isCategory = false;
|
||||
let data = {
|
||||
type: item.dataType.tabVal, // 0 微页面 1 商品分类
|
||||
microPage: item.microPage.id,
|
||||
classPage: item.classPage.id,
|
||||
};
|
||||
this.$emit('bindSortId', data);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scrollColor {
|
||||
transition: background-color .5s ease;
|
||||
background-color: #fff;
|
||||
color: #333 !important;
|
||||
|
||||
.longItem {
|
||||
// color: #333 !important;
|
||||
|
||||
&.click {
|
||||
&::after {
|
||||
background: #333 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page_count {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
filter: blur(0);
|
||||
overflow: hidden;
|
||||
image.active {
|
||||
opacity: 1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(30rpx);
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
// image {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// filter: blur(30rpx);
|
||||
// transform: scale(1.5);
|
||||
// }
|
||||
}
|
||||
}
|
||||
.bag-gradient{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.my-main {
|
||||
transition: background-color .5s ease;
|
||||
}
|
||||
|
||||
.swiperTxt {
|
||||
width: 300rpx;
|
||||
height: 100%;
|
||||
line-height: 58rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiperTxt .text {
|
||||
width: 480rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.swiperTxt .text .newsTitle {
|
||||
width: 300rpx;
|
||||
font-size: 24rpx;
|
||||
// color: #fff;
|
||||
}
|
||||
|
||||
.swiperTxt swiper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mp-header {
|
||||
z-index: 99;
|
||||
// position: fixed;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
&.on {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.serch-box {
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.serch-wrapper {
|
||||
align-items: center;
|
||||
/* #ifdef MP */
|
||||
padding: 0 220rpx 0 30rpx;
|
||||
/* #endif */
|
||||
/* #ifndef MP */
|
||||
padding: 0 30rpx;
|
||||
/* #endif */
|
||||
height: 100%;
|
||||
|
||||
&.on {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.input,
|
||||
.uninput {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 30rpx;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: 25rpx;
|
||||
top: 13rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabNav {
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.navTabBox {
|
||||
color: #FFFFFF;
|
||||
padding: 0 57rpx 0 30rpx;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
// position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
// padding-top: 5px;
|
||||
|
||||
&.on {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
/* #ifdef MP */
|
||||
width: 640rpx;
|
||||
/* #endif */
|
||||
/* #ifndef MP */
|
||||
width: 666rpx;
|
||||
/* #endif */
|
||||
height: 82rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.click {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.longTab {
|
||||
// height: 34px;
|
||||
|
||||
.longItem {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
max-width: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
line-height: 82rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.click {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 57rpx;
|
||||
height: 45rpx;
|
||||
padding-left: 11rpx;
|
||||
line-height: 45rpx;
|
||||
z-index: 10;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.iconfont {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 2rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #FFFFFF 0%, rgba(216, 216, 216, 0) 100%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.isFixed {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.category_count {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 32rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
|
||||
.cate_count {
|
||||
.category_item {
|
||||
padding: 0 20rpx;
|
||||
height: 72rpx;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
&.clicks {
|
||||
background-color: var(--view-minorColorT);
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
z-index: 22;
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
.longItem,
|
||||
.click,
|
||||
.category text {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.underline {
|
||||
background: #000 !important;
|
||||
}
|
||||
|
||||
.input,
|
||||
.uninput {
|
||||
background: rgba(0, 0, 0, 0.22) !important;
|
||||
}
|
||||
|
||||
.click {
|
||||
&::after {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiperBg {
|
||||
z-index: 1;
|
||||
|
||||
.page_swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 15rpx;
|
||||
overflow-x: hidden;
|
||||
z-index: 20;
|
||||
padding: 5rpx 10rpx 0;
|
||||
|
||||
// uni-swiper {
|
||||
// height: 320rpx;
|
||||
// }
|
||||
|
||||
swiper-item {
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.swiper-item,
|
||||
image,
|
||||
.acea-row.row-between-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
swiper {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
image {
|
||||
transform: scale(0.93);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
swiper-item.active,
|
||||
swiper-item.scalex {
|
||||
image {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*用来包裹所有的小圆点 */
|
||||
.dots {
|
||||
// width: 156rpx;
|
||||
// height: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
left: 20rpx;
|
||||
bottom: 23rpx;
|
||||
}
|
||||
|
||||
/*未选中时的小圆点样式 */
|
||||
.dot1 {
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 16rpx;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
background: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot2 {
|
||||
.dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 5rpx;
|
||||
margin-right: 8rpx;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
width: 18rpx;
|
||||
background: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot4 {
|
||||
.dot {
|
||||
width: 20rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: #DDDDDD;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
&.active {
|
||||
background: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot3 {
|
||||
.dot {
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 10rpx;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*选中以后的小圆点样式 */
|
||||
.active {
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
background: #E93323;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.dot0 .uni-swiper-dots-horizontal {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
/deep/.dot1 .uni-swiper-dots-horizontal {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/deep/.dot2 .uni-swiper-dots-horizontal {
|
||||
left: 90%;
|
||||
}
|
||||
</style>
|
||||
70
view/uniapp/pages/index/components/hotspot.vue
Normal file
70
view/uniapp/pages/index/components/hotspot.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="w-full" :style="[hotspotWrapStyle]" v-if="!dataConfig.isHide">
|
||||
<view class="hotspot">
|
||||
<image :src="dataConfig.picStyle.url" mode="widthFix" class="image" :style="[imageRadius]"></image>
|
||||
<view v-for="(item, index) in dataConfig.picStyle.list" :key="item.number" :style="{
|
||||
top: `${item.starY}rpx`,
|
||||
left: `${item.starX}rpx`,
|
||||
width: `${item.areaWidth}rpx`,
|
||||
height: `${item.areaHeight}rpx`,
|
||||
}" class="area" @click="goPage(item.link)"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
imageRadius() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
};
|
||||
},
|
||||
hotspotWrapStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goPage(link) {
|
||||
this.$util.JumpPath(link);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hotspot {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.area {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
view/uniapp/pages/index/components/index.js
Normal file
9
view/uniapp/pages/index/components/index.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const path = require('path')
|
||||
const files = require.context('./', false, /\.vue$/)
|
||||
|
||||
const modules = {}
|
||||
files.keys().forEach(key => {
|
||||
const name = path.basename(key, '.vue')
|
||||
modules[name] = files(key).default || files(key)
|
||||
})
|
||||
export default modules
|
||||
872
view/uniapp/pages/index/components/liveBroadcast.vue
Normal file
872
view/uniapp/pages/index/components/liveBroadcast.vue
Normal file
@@ -0,0 +1,872 @@
|
||||
<template>
|
||||
<!-- 小程序直播 -->
|
||||
<!-- #ifdef MP -->
|
||||
<view v-show="!dataConfig.isHide">
|
||||
<view :style="liveWrapperStyle">
|
||||
<view class="mb-config" :style="liveStyle">
|
||||
<template v-if="dataConfig.styleConfig.tabVal == 0">
|
||||
<view class="live-wrapper-a">
|
||||
<navigator class="live-item-a" v-for="(item,index) in liveList" :key="item.id" :style="liveWrapStyle"
|
||||
:url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.room_id + '&custom_params=' + customParams" hover-class="none">
|
||||
<view class="img-box" :style="liveItemStyle">
|
||||
<view class="label-a acea-row row-middle" v-if="item.live_status == 101">
|
||||
<text class="iconfont icon-ic_video1"></text>
|
||||
<text>直播中</text>
|
||||
</view>
|
||||
<view class="label-b acea-row row-middle" v-else-if="item.live_status == 102">
|
||||
<view class="txt acea-row row-middle">预告</view>
|
||||
<view class="msg">{{ item.show_time }}</view>
|
||||
</view>
|
||||
<view class="label-c acea-row row-middle" v-else-if="item.live_status == 103">
|
||||
<text>回放</text>
|
||||
</view>
|
||||
<easy-loadimage :image-src="item.cover_img" width="100%" height="400rpx"></easy-loadimage>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title line2" v-if="titleShow">{{ item.name }}</view>
|
||||
<view class="people acea-row row-middle" v-if="anchorShow">
|
||||
<easy-loadimage class="image" :image-src="item.anchor_img" width="40rpx" height="40rpx" borderRadius=""></easy-loadimage>
|
||||
<text>主播：{{ item.anchor_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="dataConfig.styleConfig.tabVal == 1">
|
||||
<view class="live-wrapper-b">
|
||||
<navigator class="live-item acea-row" v-for="(item,index) in liveList" :key="item.id" :style="liveWrapStyle"
|
||||
:url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.room_id + '&custom_params=' + customParams" hover-class="none">
|
||||
<view class="img-box" :style="liveItemStyle">
|
||||
<view class="label-a" v-if="item.live_status == 101">
|
||||
<text class="iconfont icon-ic_video1"></text>
|
||||
<text>直播中</text>
|
||||
</view>
|
||||
<view class="label-b" v-else-if="item.live_status == 102">
|
||||
<view class="txt acea-row row-middle">预告</view>
|
||||
<view class="msg">{{ item.show_time }}</view>
|
||||
</view>
|
||||
<view class="label-c" v-else-if="item.live_status == 103">
|
||||
<text>回放</text>
|
||||
</view>
|
||||
<easy-loadimage
|
||||
:image-src="item.cover_img"
|
||||
width="332rpx" height="236rpx"
|
||||
borderRadius="16rpx 0rpx 0rpx 16rpx"></easy-loadimage>
|
||||
</view>
|
||||
<view class="info acea-row row-column">
|
||||
<view class="title line2" v-if="titleShow">{{ item.name }}</view>
|
||||
<view class="goods-wrapper acea-row">
|
||||
<view class="goods-item" v-for="goodsItem in item.goods">
|
||||
<easy-loadimage
|
||||
:image-src="goodsItem.cover_img"
|
||||
width="96rpx"
|
||||
height="96rpx"
|
||||
borderRadius="8rpx"></easy-loadimage>
|
||||
<view class="money">¥{ goodsItem.price }</view>
|
||||
<view class="num acea-row row-center-wrapper">+5</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="dataConfig.styleConfig.tabVal == 2">
|
||||
<view class="live-wrapper-c">
|
||||
<scroll-view class="scroll-view" scroll-x="true">
|
||||
<navigator class="live-item" v-for="(item,index) in liveList" :key="item.id" :style="liveWrapStyle"
|
||||
:url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.room_id + '&custom_params=' + customParams" hover-class="none">
|
||||
<view class="img-box" :style="liveItemStyle">
|
||||
<view class="label-a" v-if="item.live_status == 101">
|
||||
<text class="iconfont icon-ic_video1"></text>
|
||||
<text>直播中</text>
|
||||
</view>
|
||||
<view class="label-b acea-row" v-else-if="item.live_status == 102">
|
||||
<view class="txt">预告</view>
|
||||
<view class="msg">{{ item.show_time }}</view>
|
||||
</view>
|
||||
<view class="label-c" v-else-if="item.live_status == 103">
|
||||
<text>回放</text>
|
||||
</view>
|
||||
<easy-loadimage
|
||||
:image-src="item.cover_img"
|
||||
width="280rpx"
|
||||
height="200rpx"
|
||||
borderRadius="16rpx"></easy-loadimage>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title line1" v-if="titleShow">{{ item.name }}</view>
|
||||
<view class="people acea-row row-middle" v-if="anchorShow">
|
||||
<easy-loadimage class="image"
|
||||
:image-src="item.anchor_img"
|
||||
width="40rpx"
|
||||
height="40rpx"
|
||||
borderRadius="20rpx"></easy-loadimage>
|
||||
<text>主播：{{ item.anchor_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="dataConfig.styleConfig.tabVal == 3">
|
||||
<view class="live-wrapper-d">
|
||||
<template v-for="(item,index) in liveList">
|
||||
<navigator v-if="index" class="live-item-b" :key="item.id" :style="liveWrapStyle"
|
||||
:url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.room_id + '&custom_params=' + customParams" hover-class="none">
|
||||
<view class="info">
|
||||
<view class="acea-row row-middle">
|
||||
<view class="label-a acea-row row-middle" v-if="item.live_status == 101">
|
||||
<text class="iconfont icon-ic_video1"></text>
|
||||
<text>直播中</text>
|
||||
</view>
|
||||
<view class="label-b acea-row row-middle" v-else-if="item.live_status == 102">
|
||||
<text>预告</text>
|
||||
</view>
|
||||
<view class="label-c acea-row row-middle" v-else-if="item.live_status == 103">
|
||||
<text>回放</text>
|
||||
</view>
|
||||
<view class="title line1" v-if="titleShow">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="people acea-row row-middle" v-if="anchorShow">
|
||||
<easy-loadimage class="image" :image-src="item.anchor_img" width="40rpx" height="40rpx" borderRadius="20rpx"></easy-loadimage>
|
||||
<text>主播：{{ item.anchor_name }}</text>
|
||||
<text class="time">{{ item.show_time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator v-else class="live-item-a" :style="liveItemStyle"
|
||||
:url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.room_id + '&custom_params=' + customParams" hover-class="none">
|
||||
<view class="img-box">
|
||||
<view class="label-a" v-if="item.live_status == 101">
|
||||
<text class="iconfont icon-ic_video1"></text>
|
||||
<text>直播中</text>
|
||||
</view>
|
||||
<view class="label-b acea-row" v-else-if="item.live_status == 102">
|
||||
<view class="txt">预告</view>
|
||||
<view class="msg">{{ item.show_time }}</view>
|
||||
</view>
|
||||
<view class="label-c acea-row row-middle" v-else-if="item.live_status == 103">
|
||||
<text>回放</text>
|
||||
</view>
|
||||
<easy-loadimage :image-src="item.cover_img" width="100%" height="670rpx"></easy-loadimage>
|
||||
</view>
|
||||
<view class="info" v-if="titleShow || anchorShow">
|
||||
<view class="title line1" v-if="titleShow">{{ item.name }}</view>
|
||||
<view class="people acea-row row-middle" v-if="anchorShow">
|
||||
<easy-loadimage class="image" :image-src="item.anchor_img" width="40rpx" height="40rpx" borderRadius="20rpx"></easy-loadimage>
|
||||
<text>主播：{{ item.anchor_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
getLiveList
|
||||
} from '@/api/api.js';
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
name: 'liveBroadcast',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// endBg: this.dataConfig.endBg.color[0].item,
|
||||
// notBg: this.dataConfig.notBg.color[0].item,
|
||||
// playBg: this.dataConfig.playBg.color[0].item,
|
||||
listStyle: 0,
|
||||
mbConfig: 0,
|
||||
liveList: [],
|
||||
customParams: 0,
|
||||
bg: '',
|
||||
titleColor: '',
|
||||
prConfig: '',
|
||||
boxShadow: '',
|
||||
// limit: 0,
|
||||
itemStyle: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
liveWrapperStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
liveStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
liveWrapStyle() {
|
||||
let marginTop = 0;
|
||||
let marginLeft = 0;
|
||||
let marginRight = 0;
|
||||
if (this.dataConfig.styleConfig.tabVal == 2) {
|
||||
marginLeft = `${this.dataConfig.liveConfig.val * 2}rpx`;
|
||||
marginRight = `${this.dataConfig.liveConfig.val * 2}rpx`;
|
||||
} else {
|
||||
marginTop = `${this.dataConfig.liveConfig.val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'margin-top': marginTop,
|
||||
'margin-left': marginLeft,
|
||||
'margin-right': marginRight,
|
||||
};
|
||||
},
|
||||
liveItemStyle() {
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
};
|
||||
},
|
||||
anchorShow() {
|
||||
return this.dataConfig.checkboxInfo.type.includes(1);
|
||||
},
|
||||
titleShow() {
|
||||
return this.dataConfig.checkboxInfo.type.includes(0);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
uid: {
|
||||
handler(newV, oldValue) {
|
||||
this.getCustomParams();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getLiveList();
|
||||
},
|
||||
methods: {
|
||||
getCustomParams() {
|
||||
this.customParams = encodeURIComponent(JSON.stringify({
|
||||
pid: this.uid
|
||||
}));
|
||||
},
|
||||
getLiveList: function() {
|
||||
let limit = this.$config.LIMIT;
|
||||
getLiveList(1, this.dataConfig.numberConfig.val == undefined ? 10 : this.dataConfig.numberConfig.val)
|
||||
.then(res => {
|
||||
this.liveList = res.data;
|
||||
})
|
||||
.catch(res => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pageOn {
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.label-img {
|
||||
width: 20rpx !important;
|
||||
height: 20rpx !important;
|
||||
}
|
||||
|
||||
.bgred-img {
|
||||
width: 21rpx !important;
|
||||
height: 22rpx !important;
|
||||
}
|
||||
|
||||
.live-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 16rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.live-top {
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
width: 180rpx;
|
||||
height: 54rpx;
|
||||
border-radius: 0rpx 0px 18rpx 0px;
|
||||
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
/* #ifdef H5 */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.live-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 6rpx;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
&.mores {
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
width: 320rpx;
|
||||
display: inline-block;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 320rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.live-title {
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.live-top {
|
||||
width: 120rpx;
|
||||
height: 36rpx;
|
||||
font-size: 22rpx;
|
||||
|
||||
image {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.live-wrapper-a {
|
||||
padding: 20rpx;
|
||||
|
||||
.live-item-a {
|
||||
&:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
height: 400rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 24rpx 0 0;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.people {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.image {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-a {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
background: linear-gradient(90deg, #FF2851 0%, #FF2851 100%);
|
||||
font-size: 22rpx;
|
||||
line-height: 40rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-b {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx 0 0;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.txt {
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
margin-right: 12rpx;
|
||||
background: linear-gradient(90deg, #208FF2 0%, #3FA6FF 98%);
|
||||
}
|
||||
}
|
||||
|
||||
.label-c {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
background: linear-gradient(90deg, #6D80AC 0%, #889EBD 100%);
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.live-wrapper-b {
|
||||
padding: 20rpx;
|
||||
|
||||
.live-item {
|
||||
&:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
width: 332rpx;
|
||||
height: 236rpx;
|
||||
background: #F3F9FF;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding: 20rpx 0 24rpx 24rpx;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-a {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
left: 12rpx;
|
||||
z-index: 2;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 18rpx;
|
||||
background: linear-gradient(90deg, #FF2851 0%, #FF2851 100%);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-b {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
left: 12rpx;
|
||||
z-index: 2;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx 0 0;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.txt {
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 18rpx;
|
||||
margin-right: 12rpx;
|
||||
background: linear-gradient(90deg, #208FF2 0%, #3FA6FF 98%);
|
||||
}
|
||||
}
|
||||
|
||||
.label-c {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
left: 12rpx;
|
||||
z-index: 2;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 18rpx;
|
||||
background: linear-gradient(90deg, #6D80AC 0%, #889EBD 100%);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.goods-wrapper {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.goods-item {
|
||||
position: relative;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 26rpx;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
line-height: 26rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
font-size: 28rpx;
|
||||
color: #FEFEFE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.live-wrapper-c {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.scroll-view {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.live-item {
|
||||
display: inline-block;
|
||||
width: 280rpx;
|
||||
|
||||
+.live-item {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
width: 280rpx;
|
||||
height: 200rpx;
|
||||
background: #F3F9FF;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-top: 16rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.people {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.image {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 16rpx 0rpx 20rpx 0rpx;
|
||||
background: linear-gradient(90deg, #FF2851 0%, #FF2851 100%);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 8rpx;
|
||||
font-size: 24rpx
|
||||
}
|
||||
}
|
||||
|
||||
.label-b {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx 0 0;
|
||||
border-radius: 16rpx 0rpx 20rpx 0rpx;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.txt {
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 16rpx 0rpx 20rpx 0rpx;
|
||||
margin-right: 12rpx;
|
||||
background: linear-gradient(90deg, #208FF2 0%, #3FA6FF 98%);
|
||||
}
|
||||
}
|
||||
|
||||
.label-c {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 16rpx 0rpx 20rpx 0rpx;
|
||||
background: linear-gradient(90deg, #6D80AC 0%, #889EBD 100%);
|
||||
font-size: 22rpx;
|
||||
line-height: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.live-wrapper-d {
|
||||
padding: 20rpx;
|
||||
|
||||
.live-item-a {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.img-box {
|
||||
width: 100%;
|
||||
height: 670rpx;
|
||||
background: #F3F9FF;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 24rpx;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.people {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.image {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-a {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
background: linear-gradient(90deg, #FF2851 0%, #FF2851 100%);
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-b {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx 0 0;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.txt {
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
margin-right: 12rpx;
|
||||
background: linear-gradient(90deg, #208FF2 0%, #3FA6FF 98%);
|
||||
}
|
||||
}
|
||||
|
||||
.label-c {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 0 20rpx 20rpx 0;
|
||||
background: linear-gradient(90deg, #6D80AC 0%, #889EBD 100%);
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.live-item-b {
|
||||
padding: 24rpx 24rpx 20rpx;
|
||||
border: 1rpx solid #EEEEEE;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.people {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.time {
|
||||
padding-left: 12rpx;
|
||||
margin-left: 12rpx;
|
||||
border-left: 1rpx solid #EEEEEE;
|
||||
line-height: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label-a {
|
||||
height: 32rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
background: linear-gradient(90deg, #FF2851 0%, #FF2851 100%);
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-b {
|
||||
height: 32rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
background: linear-gradient(90deg, #208FF2 0%, #3FA6FF 98%);
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-c {
|
||||
height: 32rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
background: linear-gradient(90deg, #6D80AC 0%, #889EBD 100%);
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bgblue {
|
||||
width: 220rpx;
|
||||
height: 38rpx;
|
||||
background: rgba(0, 0, 0, 0.36);
|
||||
overflow: hidden;
|
||||
|
||||
.txt {
|
||||
position: relative;
|
||||
left: -5rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background: linear-gradient(270deg, #2FA1F5 0%, #0076FF 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
font-size: 32rpx;
|
||||
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
|
||||
.iconfont {
|
||||
font-size: 26rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
260
view/uniapp/pages/index/components/menus.vue
Normal file
260
view/uniapp/pages/index/components/menus.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<!-- 金刚区 -->
|
||||
<view v-if="menus.length && !dataConfig.isHide" :style="[boxStyle]">
|
||||
<view :style="[boxContentStyle]">
|
||||
<view class="swiper" v-if="isShowConfig">
|
||||
<swiper :interval="3000" :duration="500" :style="'height:'+navHigh+'px;'" @change='bannerfun'>
|
||||
<block>
|
||||
<swiper-item v-for="(item,indexw) in menuList" :key="indexw">
|
||||
<view class="menu" :id="'nav' + indexw" :style="[gridColumns]">
|
||||
<view class="flex-col flex-center"
|
||||
v-for="(itemn,indexn) in item.list" :key="indexn"
|
||||
v-show="itemn.show == 1"
|
||||
@click="menusTap(itemn.info[1].value)">
|
||||
<view class="pictrue skeleton-radius" v-if="menuStyleConfig !== 2"
|
||||
>
|
||||
<easy-loadimage
|
||||
:image-src="itemn.img"
|
||||
width="90rpx"
|
||||
height="90rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
</view>
|
||||
<view class="fs-24" :class="{'mt-14': menuStyleConfig == 0}"
|
||||
:style="[nameColor]"
|
||||
v-if="menuStyleConfig !== 1">{{ itemn.info[0].value }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="menu" :style="[gridColumns]">
|
||||
<view class="flex-col flex-center"
|
||||
v-for="(item, index) in menus" :key="index"
|
||||
v-show="item.show == 1"
|
||||
@click="menusTap(item.info[1].value)">
|
||||
<view class="pictrue skeleton-radius" v-if="menuStyleConfig !== 2"
|
||||
>
|
||||
<easy-loadimage
|
||||
:image-src="item.img"
|
||||
width="90rpx"
|
||||
height="90rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
</view>
|
||||
<view class="fs-24" :class="{'mt-14': menuStyleConfig == 0}"
|
||||
:style="[nameColor]"
|
||||
v-if="menuStyleConfig !== 1">{{ item.info[0].value }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dot acea-row row-center-wrapper" v-if="menuList.length > 1 && isShowConfig">
|
||||
<view class="dot-item line_dot-item"
|
||||
:style="{'background-color': active==index ? dotSelectColor : dotColor}"
|
||||
v-for="(item,index) in menuList" :key="index"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'menus',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navHigh: 0,
|
||||
menuList: [],
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rowsNum(){
|
||||
return this.dataConfig.rowsNum.tabVal
|
||||
},
|
||||
number(){
|
||||
return this.dataConfig.number.tabVal
|
||||
},
|
||||
dotColor(){
|
||||
return this.dataConfig.pointerColor.color[0].item
|
||||
},
|
||||
menus(){
|
||||
return this.dataConfig.menuConfig.list || []
|
||||
},
|
||||
isShowConfig(){
|
||||
return this.dataConfig.showConfig.tabVal
|
||||
},
|
||||
boxStyle(){
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
}
|
||||
},
|
||||
boxContentStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
background: `linear-gradient(90deg, ${this.dataConfig.bgColor.color[0].item} 0%, ${this.dataConfig.bgColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
imgStyle(){
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return borderRadius
|
||||
},
|
||||
//分几行展示，一行展示多少个
|
||||
gridColumns() {
|
||||
if (this.dataConfig.number.tabVal == 0) {
|
||||
return {
|
||||
gridTemplateColumns: 'repeat(3, 1fr)'
|
||||
}
|
||||
} else if (this.dataConfig.number.tabVal == 1) {
|
||||
return {
|
||||
gridTemplateColumns: 'repeat(4, 1fr)'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
gridTemplateColumns: 'repeat(5, 1fr)'
|
||||
}
|
||||
}
|
||||
},
|
||||
menuStyleConfig(){
|
||||
return this.dataConfig.menuStyleConfig.tabVal
|
||||
},
|
||||
dotColor(){
|
||||
return this.dataConfig.pointerBgColor.color[0].item
|
||||
},
|
||||
dotSelectColor(){
|
||||
return this.dataConfig.pointerColor.color[0].item
|
||||
},
|
||||
nameColor(){
|
||||
return {
|
||||
color: this.dataConfig.nameColor?.color[0]?.item || '#333333'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSwiperCount();
|
||||
this.$nextTick(() => {
|
||||
if (this.menuList.length&&this.isShowConfig) {
|
||||
let that = this
|
||||
// #ifdef H5
|
||||
that.menuHeight()
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
setTimeout(() => {
|
||||
that.menuHeight()
|
||||
},150)
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getSwiperCount(){
|
||||
/* rowsNum 显示行数 0: 1行 1: 2行 2: 3行 3 4行 */
|
||||
/* number 单行显示 0: 3个 1: 4个 2: 5个 */
|
||||
this.pageNum((this.rowsNum + 1) * (this.number + 3));
|
||||
},
|
||||
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: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
.item {
|
||||
margin-right: 42rpx;
|
||||
width: 90rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-row-gap: 24rpx;
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.swiper {
|
||||
z-index: 20;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
swiper,
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
783
view/uniapp/pages/index/components/newVip.vue
Normal file
783
view/uniapp/pages/index/components/newVip.vue
Normal file
@@ -0,0 +1,783 @@
|
||||
<template>
|
||||
<view :style="[newVipWrapStyle]" v-if="(couponList.length || productList.length || newcomer_integral) && !dataConfig.isHide">
|
||||
<view class="newVip2" :style="[newVip2Background,newVipBorderRadius]" v-if="dataConfig.styleConfig.tabVal">
|
||||
<view class="header acea-row row-between row-middle">
|
||||
<view class="title-box acea-row row-middle">
|
||||
<image :src="`${imgHost}/statics/images/newVip1.png`" class="image"></image>
|
||||
<view class="info">超值优惠 限时专享</view>
|
||||
</view>
|
||||
<view class="more" @click="goNewList">去逛逛<text class="iconfont icon-ic_rightarrow"></text></view>
|
||||
</view>
|
||||
<view class="wrapper">
|
||||
<view class="coupon" v-if="couponList.length && dataConfig.checkboxInfo.type.includes(1)">
|
||||
<view class="title">新人红包</view>
|
||||
<view class="content">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="list acea-row">
|
||||
<view v-for="item in couponList" :key="item.id" class="item">
|
||||
<view class="back" :style="[couponStyle]"></view>
|
||||
<view class="money" :style="[moneyStyle]">
|
||||
<view v-if="item.coupon_type == 1">¥<text class="number">{{ item.coupon_price }}</text></view>
|
||||
<view v-else-if="item.coupon_type == 2"><text class="number">{{ parseFloat(item.coupon_price)/10 }}</text>折</view>
|
||||
</view>
|
||||
<view v-if="item.use_min_price" class="info" :style="[couponInfoStyle]">满{{ item.use_min_price }}可用</view>
|
||||
<view v-else class="info" :style="[couponInfoStyle]">无门槛券</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product" v-if="productList.length && dataConfig.checkboxInfo.type.includes(2)">
|
||||
<view class="title">新人商品专区</view>
|
||||
<view class="content">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="px-20 grid-column-4 grid-gap-16rpx">
|
||||
<view class="w-full" v-for="(item,index) in productList" :key="item.id" @click="goDetail(item)">
|
||||
<easy-loadimage :image-src="item.image" width="144rpx" height="144rpx" borderRadius="12rpx"></easy-loadimage>
|
||||
<view class="money">¥<text class="number">{{ item.price }}</text></view>
|
||||
<view class="name w-140 line1">{{ item.store_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bonus acea-row row-middle" v-if="dataConfig.checkboxInfo.type.includes(0)">
|
||||
<image :src="`${imgHost}/statics/images/newVip2.png`" class="image"></image>
|
||||
<view class="text">
|
||||
<view class="info acea-row row-middle">
|
||||
新用户注册领积分
|
||||
<view class="red" :style="[bonusRedStyle]">
|
||||
<view class="inner acea-row row-middle">
|
||||
<image :src="`${imgHost}/statics/images/newVip3.png`" class="image"></image>
|
||||
+{{ newcomer_integral }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">新用户注册后即可获得积分</view>
|
||||
</view>
|
||||
<view class="button" :style="[buttonStyle]" @click="goNewList">去看看</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="newVip" v-else>
|
||||
<view class="header acea-row row-between row-middle">
|
||||
<view class="title">新人专享福利</view>
|
||||
<view class="more" @click="goNewList">更多优惠<text class="iconfont icon-ic_rightarrow"></text></view>
|
||||
</view>
|
||||
<view class="bonus" :style="[bonusStyle]" v-if="dataConfig.checkboxInfo.type.includes(0)">
|
||||
<view class="inner acea-row row-middle">
|
||||
<image :src="`${imgHost}/statics/images/newVip3.png`" class="image"></image>
|
||||
新用户注册即可
|
||||
<text class="red" :style="[bonusRedStyle]">赠送积分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon" v-if="dataConfig.checkboxInfo.type.includes(1) && couponList.length">
|
||||
<view class="title">专属优惠券</view>
|
||||
<view class="content acea-row" :style="[couponContentStyle]">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="list acea-row">
|
||||
<view v-for="item in couponList" :key="item.id" class="item" :style="[couponStyle]">
|
||||
<view class="item-top acea-row row-center row-middle">
|
||||
<view class="money" :style="[moneyStyle]">
|
||||
<view v-if="item.coupon_type == 1">¥<text class="number">{{ item.coupon_price }}</text></view>
|
||||
<view v-else-if="item.coupon_type == 2"><text class="number">{{ parseFloat(item.coupon_price)/10 }}</text>折</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-bottom acea-row row-column row-center row-middle">
|
||||
<view class="name" :style="[couponTypeStyle]">
|
||||
<text v-if="item.coupon_type == 1">品类券</text>
|
||||
<text v-else-if="item.coupon_type == 2">商品券</text>
|
||||
<text v-else-if="item.coupon_type == 3">品牌券</text>
|
||||
<text v-else>通用券</text>
|
||||
</view>
|
||||
<view v-if="item.use_min_price" class="info">满{{ item.use_min_price }}可用</view>
|
||||
<view v-else class="info">无门槛券</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="station" :style="[stationStyle]">
|
||||
<view class="money">¥<text class="number">{{ totalPrice }}</text></view>
|
||||
<view class="info">新人专享优惠券</view>
|
||||
<view class="button" :style="[buttonStyle]" @click="goUser">一键领取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product" v-if="productList.length && dataConfig.checkboxInfo.type.includes(2)">
|
||||
<view class="title">新人商品专区</view>
|
||||
<view class="content">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="grid-column-4 grid-gap-16rpx">
|
||||
<view class="w-full" v-for="(item,index) in productList" :key="item.id" @click="goDetail(item)">
|
||||
<easy-loadimage :image-src="item.image" width="100%" height="144rpx" borderRadius="12rpx"></easy-loadimage>
|
||||
<view class="w-140 line1">{{ item.store_name }}</view>
|
||||
<view class="money" :style="[productMoneyStyle]">¥<text class="number">{{ item.price }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
newcomerList
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
computed: mapGetters(['isLogin']),
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
couponList: [],
|
||||
productList: [],
|
||||
newcomer_integral: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
totalPrice() {
|
||||
return this.couponList.reduce((total, item) => {
|
||||
return this.$util.$h.Add(total, item.coupon_price);
|
||||
}, 0);
|
||||
},
|
||||
bonusStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['border-color'] = this.dataConfig.integralBgColor.color[0].item;
|
||||
styleObject['background'] = this.dataConfig.integralBgColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
bonusRedStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
if (this.dataConfig.styleConfig.tabVal) {
|
||||
styleObject['background'] = this.dataConfig.integralTxtColor.color[0].item;
|
||||
styleObject['color'] = this.dataConfig.integralTxtColor.color[0].item;
|
||||
} else {
|
||||
styleObject['color'] = this.dataConfig.tipsColor.color[0].item;
|
||||
}
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
moneyStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneCouponConfig.tabVal) {
|
||||
styleObject['color'] = this.dataConfig.couponMoneyColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
buttonStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
if (this.dataConfig.styleConfig.tabVal) {
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.bntColor.color[0].item} 0%, ${this.dataConfig.bntColor.color[1].item} 100%)`;
|
||||
}
|
||||
}
|
||||
if (this.dataConfig.toneCouponConfig.tabVal) {
|
||||
if (!this.dataConfig.styleConfig.tabVal) {
|
||||
styleObject['color'] = this.dataConfig.bntTxtColor.color[0].item;
|
||||
}
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
couponTypeStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneCouponConfig.tabVal) {
|
||||
styleObject['color'] = this.dataConfig.couponTypeColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
couponStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneCouponConfig.tabVal) {
|
||||
if (this.dataConfig.styleConfig.tabVal) {
|
||||
styleObject['margin-right'] = `${this.dataConfig.spacingConfig2.val * 2}rpx`;
|
||||
styleObject['background'] = this.dataConfig.couponBgColor2.color[0].item;
|
||||
} else {
|
||||
styleObject['margin-right'] = `${this.dataConfig.spacingConfig.val * 2}rpx`;
|
||||
}
|
||||
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
couponContentStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneCouponConfig.tabVal) {
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.couponBgColor.color[0].item} 0%, ${this.dataConfig.couponBgColor.color[1].item} 100%)`;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
stationStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneCouponConfig.tabVal) {
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.vipBgColor.color[0].item} 0%, ${this.dataConfig.vipBgColor.color[1].item} 100%)`;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
productMoneyStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneGoodsConfig.tabVal) {
|
||||
styleObject['color'] = this.dataConfig.priceColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
couponInfoStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneCouponConfig.tabVal) {
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.bntBgColor.color[1].item} 0%, ${this.dataConfig.bntBgColor.color[0].item} 100%)`;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
// 组件背景
|
||||
newVip2Background() {
|
||||
return {
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 99%)`,
|
||||
};
|
||||
},
|
||||
// 背景圆角
|
||||
newVipBorderRadius() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
};
|
||||
},
|
||||
// 底部背景
|
||||
newVipWrapStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_details/index?id=${item.id}&type=7`
|
||||
});
|
||||
},
|
||||
goNewList() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/new_customer/index`
|
||||
});
|
||||
},
|
||||
goUser() {
|
||||
uni.switchTab({
|
||||
url: `/pages/users/user_coupon/index`
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
let limit = this.$config.LIMIT;
|
||||
newcomerList({
|
||||
page: 1,
|
||||
limit: limit,
|
||||
}).then(res => {
|
||||
let newcomer_integral = res.data.newcomer_integral;
|
||||
this.couponList = res.data.newcomer_coupon;
|
||||
this.productList = res.data.newcomer_products;
|
||||
if (Array.isArray(newcomer_integral)) {
|
||||
this.newcomer_integral = 0;
|
||||
} else {
|
||||
this.newcomer_integral = newcomer_integral;
|
||||
}
|
||||
}).catch(err => {
|
||||
return this.$util.Tips({
|
||||
title: err.msg
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.newVip {
|
||||
padding: 0 20rpx 40rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.header {
|
||||
height: 96rpx;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bonus {
|
||||
border: 1rpx solid var(--view-theme);
|
||||
border-radius: 17rpx;
|
||||
background: var(--view-theme);
|
||||
|
||||
.inner {
|
||||
height: 80rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.coupon {
|
||||
.title {
|
||||
padding: 28rpx 0 20rpx;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
padding: 12rpx 190rpx 12rpx 12rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(270deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: 144rpx;
|
||||
height: 188rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 0;
|
||||
margin-right: 8rpx;
|
||||
background: radial-gradient(circle at left 94rpx, transparent 6rpx, #FFFFFF 0) top left,
|
||||
radial-gradient(circle at right 94rpx, transparent 6rpx, #FFFFFF 0) top right;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 72rpx 188rpx;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 94rpx;
|
||||
right: 10rpx;
|
||||
left: 10rpx;
|
||||
border-top: 1rpx dashed #D8D8D8;
|
||||
}
|
||||
|
||||
.item-top,
|
||||
.item-bottom {
|
||||
height: 94rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 4rpx;
|
||||
font-size: 18rpx;
|
||||
line-height: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.station {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 190rpx;
|
||||
height: 100%;
|
||||
padding-top: 40rpx;
|
||||
border-radius: 0 24rpx 24rpx 0;
|
||||
background: linear-gradient(270deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -20rpx;
|
||||
width: 20rpx;
|
||||
height: 210rpx;
|
||||
background: linear-gradient(270deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.money {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 18rpx;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 136rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 26rpx;
|
||||
margin: 12rpx auto 0;
|
||||
background: #FFFFFF;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
line-height: 52rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product {
|
||||
.title {
|
||||
padding: 28rpx 0 20rpx;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 158rpx;
|
||||
margin-top: 0;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 12rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.money {
|
||||
margin-top: 8rpx;
|
||||
// text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 22rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.newVip2 {
|
||||
padding: 0 24rpx 32rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(270deg, #FF7931 0%, #E93323 100%);
|
||||
|
||||
.header {
|
||||
height: 92rpx;
|
||||
|
||||
.info {
|
||||
position: relative;
|
||||
padding-left: 12rpx;
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 1rpx;
|
||||
height: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 156rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
padding-bottom: 20rpx;
|
||||
.title {
|
||||
padding: 24rpx 20rpx 20rpx;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
width: 152rpx;
|
||||
height: 168rpx;
|
||||
margin-top: 0;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 152rpx;
|
||||
height: 148rpx;
|
||||
border-radius: 20rpx;
|
||||
background: var(--view-theme);
|
||||
}
|
||||
|
||||
.money {
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
left: 6rpx;
|
||||
width: 140rpx;
|
||||
height: 156rpx;
|
||||
padding-top: 36rpx;
|
||||
border: 2rpx solid #FCEAE9;
|
||||
border-radius: 20rpx;
|
||||
background: #FFFFFF;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: var(--view-theme);
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 152rpx;
|
||||
height: 78rpx;
|
||||
padding-top: 34rpx;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 152rpx;
|
||||
height: 20rpx;
|
||||
border: 8rpx solid #FCEAE9;
|
||||
border-bottom-right-radius: 76rpx 20rpx;
|
||||
border-bottom-left-radius: 76rpx 20rpx;
|
||||
border-top-color: transparent;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product {
|
||||
padding-bottom: 20rpx;
|
||||
.title {
|
||||
padding: 20rpx 20rpx 20rpx;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 144rpx;
|
||||
margin-top: 0;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
margin-top: 18rpx;
|
||||
// text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: SemiBold;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 6rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.bonus {
|
||||
padding: 26rpx 26rpx 26rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
padding-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.red {
|
||||
border-radius: 16rpx;
|
||||
margin-left: 8rpx;
|
||||
background: var(--view-theme);
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
line-height: 32rpx;
|
||||
color: var(--view-theme);
|
||||
|
||||
.image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: 32rpx;
|
||||
padding: 0 7rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 114rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 26rpx;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
line-height: 52rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
236
view/uniapp/pages/index/components/news.vue
Normal file
236
view/uniapp/pages/index/components/news.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<!-- 新闻播报 -->
|
||||
<view :style="[newsStyle]" v-if="!dataConfig.isHide">
|
||||
<view class="news" v-if="dataConfig.styleConfig.tabVal" :style="[newsWrapperStyle]">
|
||||
<view class="acea-row row-between-wrapper news-top">
|
||||
<view v-if="dataConfig.titleConfig.tabVal" :style="[titleStyle]">{{ dataConfig.titleTxtConfig.value }}</view>
|
||||
<image v-else :src="dataConfig.imgConfig.url" mode="aspectFit" class="image"></image>
|
||||
<view v-if="!dataConfig.buttonConfig.tabVal" class="more"
|
||||
@click="moreTab(linkConfig)" :style="[moreStyle]">更多<text
|
||||
class="iconfont icon-ic_rightarrow"></text></view>
|
||||
</view>
|
||||
<view class="news-bottom">
|
||||
<view v-for="(item, index) in newsList" :key="index"
|
||||
class="acea-row row-middle item" :style="[itemStyle]"
|
||||
@tap="moreTab(item.chiild[1].val)">
|
||||
<view class="number">{{ index + 1 }}</view>
|
||||
<view class="text">{{ item.chiild[0].val }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="news-scroll acea-row row-middle" :style="[newsWrapperStyle]" v-else>
|
||||
<view class="news-left">
|
||||
<view class="text" v-if="dataConfig.titleConfig.tabVal" :style="[leftStyle]">{{ dataConfig.titleTxtConfig.value }}</view>
|
||||
<image class="image" :src="dataConfig.imgConfig.url" mode="aspectFit" v-else></image>
|
||||
</view>
|
||||
<view class="news-center" :style="[itemStyle]">
|
||||
<view v-if="dataConfig.rollConfig.tabVal" @tap="moreTab(newsList[0].chiild[1].val)">
|
||||
<uniNoticeBar class="w-full" scrollable single showGetMore background-color="transparent" :color="dataConfig.newsColor.color[0].item" :speed="50"
|
||||
:text="newsList[0].chiild[0].val"></uniNoticeBar>
|
||||
</view>
|
||||
<swiper v-else class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration" vertical="true" circular="true">
|
||||
<swiper-item v-for="(item,index) in newsList" :key="index">
|
||||
<view @tap="moreTab(item.chiild[1].val)">{{ item.chiild[0].val }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view v-if="!dataConfig.buttonConfig.tabVal" class="iconfont icon-ic_rightarrow" :style="[moreStyle]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniNoticeBar from '@/components/uniNoticeBar/uni-notice-bar.vue';
|
||||
export default {
|
||||
components: {
|
||||
uniNoticeBar
|
||||
},
|
||||
name: 'news',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
autoplay: true,
|
||||
duration: 500,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
newsStyle() {
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
newsWrapperStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
background: `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
moreStyle() {
|
||||
return {
|
||||
color: this.dataConfig.bntColor.color[0].item,
|
||||
};
|
||||
},
|
||||
titleStyle() {
|
||||
return {
|
||||
color: this.dataConfig.titleColor.color[0].item,
|
||||
};
|
||||
},
|
||||
leftStyle(){
|
||||
return {
|
||||
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg, ${this.dataConfig.titleBgColor.color[0].item} 0%, ${this.dataConfig.titleBgColor.color[1].item} 100%)` : 'var(--view-theme)',
|
||||
color: this.dataConfig.toneConfig.tabVal ? this.dataConfig.titleColor.color[0].item : '#ffffff'
|
||||
}
|
||||
},
|
||||
itemStyle() {
|
||||
return {
|
||||
color: this.dataConfig.newsColor.color[0].item,
|
||||
};
|
||||
},
|
||||
linkConfig(){
|
||||
return this.dataConfig.linkConfig.value ? this.dataConfig.linkConfig.value : '/pages/extension/news_list/index'
|
||||
},
|
||||
newsList(){
|
||||
return this.dataConfig.listConfig.list.filter(item=> item.show);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
moreTab(url) {
|
||||
this.$util.JumpPath(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.news-scroll {
|
||||
height: 88rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.news-left {
|
||||
margin-right: 16rpx;
|
||||
|
||||
.text {
|
||||
height: 40rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 8rpx;
|
||||
// background: #FCEAE9;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
// color: #E93323;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.news-scroll .news-center {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 36rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.news-scroll .swiper {
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.news-scroll .iconfont {
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.news {
|
||||
padding: 32rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.news-top {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
line-height: 36rpx;
|
||||
color: #333333;
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 140rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.news-bottom {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.item {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #282828;
|
||||
|
||||
+.item {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
.number {
|
||||
color: #E93323;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.number {
|
||||
color: #FF7300;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
.number {
|
||||
color: #FFC300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 30rpx;
|
||||
font-family: SemiBold;
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
388
view/uniapp/pages/index/components/pictureCube.vue
Normal file
388
view/uniapp/pages/index/components/pictureCube.vue
Normal file
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<!-- 图片魔方 -->
|
||||
<view class="pictureCube" :style="[boxStyle]" v-if="picList.length && !dataConfig.isHide">
|
||||
<view class="advert-item-1 flex-1" :style="[grdiGap]" v-if="style==0">
|
||||
<view v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<easy-loadimage mode="widthFix" width="100%" :image-src="item.image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-1 grid-column-2" :style="[colGap]" v-else-if="style==1">
|
||||
<view class="item w-full" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<easy-loadimage :mode="filterMode(item.objectFit || 'cover')" width="100%" :height="imageH + 'rpx'" :image-src="item.image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-1 grid-column-3" :style="[colGap]" v-else-if="style==2">
|
||||
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<easy-loadimage :mode="filterMode(item.objectFit || 'cover')" width="100%" :height="imageH + 'rpx'" :image-src="item.image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advert-item-4 flex-1" :style="[grdiGap]" v-else-if="style==3">
|
||||
<view class="pic1" @click="goDetail(picList[0])">
|
||||
<easy-loadimage mode="aspectFill" width="100%" :height="imageH + 'rpx'" :image-src="picList[0].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic2" @click="goDetail(picList[1])">
|
||||
<easy-loadimage :mode="filterMode(picList[1].objectFit || 'cover')" width="100%" :height="imageH + 'rpx'" :image-src="picList[1].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic3" @click="goDetail(picList[2])">
|
||||
<easy-loadimage mode="widthFix" width="100%" height="100%" :image-src="picList[2].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advert-item-5 flex-1" :style="[grdiGap]" v-else-if="style==4">
|
||||
<view class="pic1" @click="goDetail(picList[0])">
|
||||
<easy-loadimage mode="widthFix" width="100%" height="100%" :image-src="picList[0].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic2" @click="goDetail(picList[1])">
|
||||
<easy-loadimage mode="aspectFill" width="100%" :height="imageH + 'rpx'" :image-src="picList[1].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic3" @click="goDetail(picList[2])">
|
||||
<easy-loadimage :mode="filterMode(picList[2].objectFit || 'cover')" width="100%" :height="imageH + 'rpx'" :image-src="picList[2].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advert-item-6 flex-1" :style="[grdiGap]" v-else-if="style==5">
|
||||
<view class="pic1" @click="goDetail(picList[0])">
|
||||
<easy-loadimage width="100%" :height="imageH + 'rpx'" :image-src="picList[0].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic2 h-full" @click="goDetail(picList[1])">
|
||||
<easy-loadimage :mode="filterMode(picList[1].objectFit || 'cover')" width="100%" height="100%" :image-src="picList[1].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic3 h-full" @click="goDetail(picList[2])">
|
||||
<easy-loadimage :mode="filterMode(picList[2].objectFit || 'cover')" width="100%" height="100%" :image-src="picList[2].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advert-item-7 flex-1" :style="[grdiGap]" v-else-if="style==6">
|
||||
<view class="pic1" @click="goDetail(picList[0])">
|
||||
<easy-loadimage mode="aspectFill" width="100%" :height="imageH + 'rpx'" :image-src="picList[0].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic2" @click="goDetail(picList[1])">
|
||||
<easy-loadimage :mode="filterMode(picList[1].objectFit || 'cover')" width="100%" :height="imageH + 'rpx'" :image-src="picList[1].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic3" @click="goDetail(picList[2])">
|
||||
<easy-loadimage :mode="filterMode(picList[2].objectFit || 'cover')" width="100%" height="100%" :image-src="picList[2].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-column-2 flex-1" :style="[grdiGap]" v-else-if="style==7">
|
||||
<view class="w-full" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
|
||||
<easy-loadimage :mode="filterMode(item.objectFit || 'cover')" width="100%" :height="imageH + 'rpx'" :image-src="item.image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advert-item-9 flex-1" :style="[grdiGap]" v-else-if="style==8">
|
||||
<view class="pic1" @click="goDetail(picList[0])">
|
||||
<easy-loadimage width="100%" height="100%" :height="imageH + 'rpx'" :image-src="picList[0].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic2 " @click="goDetail(picList[1])">
|
||||
<easy-loadimage :mode="filterMode(picList[1].objectFit || 'cover')" width="100%" height="100%" :height="imageH + 'rpx'" :image-src="picList[1].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic3" @click="goDetail(picList[2])">
|
||||
<easy-loadimage width="100%" height="100%" :height="templateH + 'rpx'" :image-src="picList[2].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic4" @click="goDetail(picList[3])">
|
||||
<easy-loadimage :mode="filterMode(picList[3].objectFit || 'cover')" width="100%" height="100%" :height="templateH + 'rpx'" :image-src="picList[3].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic5" @click="goDetail(picList[4])">
|
||||
<easy-loadimage :mode="filterMode(picList[4].objectFit || 'cover')" width="100%" height="100%" :height="templateH + 'rpx'" :image-src="picList[4].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advert-item-6 flex-1" :style="[grdiGap]" v-else-if="style==9">
|
||||
<view class="pic1" @click="goDetail(picList[0])">
|
||||
<easy-loadimage width="100%" :height="imageH + 'rpx'" :image-src="picList[0].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic2" @click="goDetail(picList[1])">
|
||||
<easy-loadimage :mode="filterMode(picList[1].objectFit || 'cover')" width="100%" height="100%" :image-src="picList[1].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="pic3 h-full flex-between-center" >
|
||||
<view class="flex-1 h-full" @click="goDetail(picList[2])">
|
||||
<easy-loadimage :mode="filterMode(picList[2].objectFit || 'cover')" width="100%" height="100%" :image-src="picList[2].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
<view class="flex-1 h-full" :style="{'margin-left': dataConfig.imgConfig.val*2 + 'rpx'}" @click="goDetail(picList[3])">
|
||||
<easy-loadimage :mode="filterMode(picList[3].objectFit || 'cover')" width="100%" height="100%" :image-src="picList[3].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-1" v-else-if="style==10">
|
||||
<view class="h-full" @click="goDetail(picList[0])">
|
||||
<easy-loadimage mode="widthFix" width="100%" :image-src="picList[0].image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</view>
|
||||
<view class="advert12" :style="[autoHeight]" v-else-if="style==11">
|
||||
<template v-if="dataConfig.picStyle.docPicList.length">
|
||||
<view v-for="(item,index) in dataConfig.picStyle.docPicList" :key="index" :style="{
|
||||
top: `${item.doc.startY*2}rpx`,
|
||||
left: `${item.doc.startX*2}rpx`,
|
||||
width: `${item.doc.w}px`,
|
||||
height: `${item.doc.h*2}rpx`,
|
||||
borderWidth: `${dataConfig.imgConfig.val*2}rpx`,
|
||||
}" class="item" @click="goDetail(item)">
|
||||
<easy-loadimage mode="aspectFill" width="100%" height="100%" :imageSrc="item.img" class="image" :borderRadius="imgBorderRadius"></easy-loadimage>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'pictureCube',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
picList: this.dataConfig.picStyle.picList,
|
||||
style: this.dataConfig.styleConfig.tabVal,
|
||||
imageH: 0,
|
||||
templateH: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
boxStyle(){
|
||||
return {
|
||||
padding: `0 ${this.dataConfig.prConfig.val*2}rpx ${this.dataConfig.bottomConfig.val*2}rpx`,
|
||||
marginTop: `${this.dataConfig.topConfig.val*2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item
|
||||
}
|
||||
},
|
||||
filletImg() {
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
}
|
||||
},
|
||||
colGap(){
|
||||
return {
|
||||
'grid-column-gap': `${this.dataConfig.imgConfig.val*2}rpx`
|
||||
}
|
||||
},
|
||||
grdiGap(){
|
||||
return {
|
||||
'grid-gap': `${this.dataConfig.imgConfig.val*2}rpx`
|
||||
}
|
||||
},
|
||||
imgBorderRadius() {
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return borderRadius
|
||||
},
|
||||
autoHeight(){
|
||||
let windowWidth = uni.getWindowInfo().windowWidth;
|
||||
return {
|
||||
height: windowWidth + 'px'
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.computedHeight();
|
||||
},
|
||||
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);
|
||||
},
|
||||
basePicHeight(index){
|
||||
let that = this;
|
||||
let windowWidth = uni.getWindowInfo().windowWidth;
|
||||
let prConfig = this.dataConfig.prConfig.val * 2;
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.picList[index].image),
|
||||
success: (res) => {
|
||||
if (res && res.height > 0){
|
||||
let height = 0;
|
||||
if(that.style == 2){
|
||||
height = res.height * ((250 - prConfig) / res.width);
|
||||
}else{
|
||||
height = res.height * ((windowWidth - prConfig) / res.width);
|
||||
}
|
||||
this.$set(that, 'imageH', height);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
computedHeight(){
|
||||
if(this.picList.length){
|
||||
let that = this;
|
||||
this.$nextTick((e)=>{
|
||||
if(this.style == 4){
|
||||
//计算第二张图片的高度
|
||||
this.basePicHeight(1)
|
||||
} else if(this.style == 8){
|
||||
//计算两行各自第一张的高度
|
||||
this.basePicHeight(0);
|
||||
this.computeTemplateEight();
|
||||
} else {
|
||||
//计算第一张图片的高度
|
||||
this.basePicHeight(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computeTemplateEight(){
|
||||
let that = this;
|
||||
let windowWidth = uni.getWindowInfo().windowWidth;
|
||||
let prConfig = this.dataConfig.prConfig.val * 2;
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.picList[2].image),
|
||||
success: (res) => {
|
||||
if (res && res.height > 0){
|
||||
let height = res.height * ((250 - prConfig) / res.width);
|
||||
this.$set(that, 'templateH', height);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
filterMode(val){
|
||||
let obj = {
|
||||
cover: 'aspectFill',
|
||||
contain: 'aspectFit',
|
||||
fill: 'scaleToFill'
|
||||
};
|
||||
return obj[val]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pictureCube {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
|
||||
.advert-item-1 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr; /* 一列 */
|
||||
grid-template-rows: auto auto; /* 两行 */
|
||||
}
|
||||
|
||||
.advert-item-4 {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto; /* 上面两行，下面一行 */
|
||||
grid-template-columns: 1fr 1fr; /* 上面两列等分 */
|
||||
.pic1{
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.pic2{
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
.pic3{
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.advert-item-5 {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto; /* 上面两行，下面一行 */
|
||||
grid-template-columns: 1fr 1fr; /* 上面两列等分 */
|
||||
.pic1{
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
.pic2{
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
.pic3{
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.advert-item-6 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /* 左右两列 */
|
||||
grid-template-rows: auto; /* 自动行高 */
|
||||
align-items: stretch; /* 确保所有元素的高度一致 */
|
||||
.pic1{
|
||||
grid-column: 1 / 2; /* 第一列 */
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
.pic2{
|
||||
grid-column: 2 / 3; /* 第二列 */
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pic3{
|
||||
grid-column: 2 / 3; /* 第二列 */
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.advert-item-7 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /* 左右两列 */
|
||||
grid-template-rows: auto; /* 自动行高 */
|
||||
align-items: stretch; /* 确保所有元素的高度一致 */
|
||||
.pic1{
|
||||
grid-column: 1 / 2; /* 第一列 */
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pic2{
|
||||
grid-column: 1 / 2; /* 第二列 */
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
.pic3{
|
||||
grid-column: 2 / 3; /* 第二列 */
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.advert-item-9 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr); /* 6 列 */
|
||||
grid-template-rows: auto auto; /* 自动行高 */
|
||||
.pic1{
|
||||
grid-column: 1 / 4; /* 第一列 */
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pic2{
|
||||
grid-column: 4 / 7; /* 第二列 */
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
.pic3{
|
||||
grid-column: 1 / 3; /* 第二列 */
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
.pic4{
|
||||
grid-column: 3 / 5; /* 第二列 */
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
.pic5{
|
||||
grid-column: 5 / 7; /* 第二列 */
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.advert12 {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
371
view/uniapp/pages/index/components/pointsMall.vue
Normal file
371
view/uniapp/pages/index/components/pointsMall.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<view :style="[pointsMallWrapStyle]" v-if="!dataConfig.isHide">
|
||||
<view class="pointsMall" :style="[pointsMallStyle,goodsWrapperStyle]">
|
||||
<view class="acea-row row-middle row-between header" :style="[headerStyle]">
|
||||
<view v-if="dataConfig.titleConfig.tabVal" class="title" :style="[titleStyle]">{{ dataConfig.titleTxtConfig.value }}</view>
|
||||
<easy-loadimage v-else :image-src="titleImage" width="176rpx" height="32rpx"></easy-loadimage>
|
||||
<view class="more" :style="[buttonStyle]" @click="goPointsMall">
|
||||
<text>更多</text>
|
||||
<text class="iconfont icon-ic_rightarrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="dataConfig.goodStyleConfig.tabVal == 0" class="goods-wrapper0">
|
||||
<scroll-view class="scroll-view" scroll-x="true">
|
||||
<view class="item" v-for="item in goodsList" :key="item.id" @click="goGoodsDetails(item.id)">
|
||||
<easy-loadimage :image-src="item.image" width="224rpx" height="224rpx" :borderRadius="goodsImage"></easy-loadimage>
|
||||
<view class="price-box acea-row row-middle" :style="[priceBoxStyle]">
|
||||
<view class="point">{{ item.integral }}</view>
|
||||
<view class="">积分+{{ item.price }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-else-if="dataConfig.goodStyleConfig.tabVal == 1" class="goods-wrapper">
|
||||
<view class="acea-row goods-list">
|
||||
<view class="item" v-for="item in goodsList" :key="item.id" @click="goGoodsDetails(item.id)">
|
||||
<easy-loadimage :image-src="item.image" width="100%" height="212rpx" :borderRadius="goodsImage"></easy-loadimage>
|
||||
<view class="price-box acea-row row-middle" :style="[priceBoxStyle]">
|
||||
<view class="acea-row row-middle">
|
||||
<image class="image" :src="`${imgHost}/statics/images/newVip3.png`" mode="aspectFit"></image>
|
||||
<text class="num" :style="[numStyle]">{{ item.integral }}</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<text class="text--w111-333">+</text>
|
||||
<text class="num" :style="[numStyle]">{{ item.price }}</text>
|
||||
<text>元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title line1" :style="[goodsTitleStyle]">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="dataConfig.goodStyleConfig.tabVal == 2" class="goods-wrapper2">
|
||||
<view class="acea-row goods-list">
|
||||
<view class="item" v-for="item in goodsList" :key="item.id" @click="goGoodsDetails(item.id)">
|
||||
<easy-loadimage :image-src="item.image" width="100%" height="324rpx" :borderRadius="goodsImage"></easy-loadimage>
|
||||
<view class="title line2" :style="[goodsTitleStyle]">{{ item.title }}</view>
|
||||
<view class="price-box acea-row row-middle" :style="[priceBoxStyle]">
|
||||
<view class="">
|
||||
<image class="image" :src="`${imgHost}/statics/images/newVip3.png`" mode="aspectFit"></image>
|
||||
<text class="num point" :style="[numStyle]">{{ item.integral }}</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<text class="text--w111-333">+</text>
|
||||
<text class="num" :style="[numStyle]">{{ item.price }}</text>
|
||||
<text>元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getStoreIntegralList
|
||||
} from '@/api/activity.js';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
goodsList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
headerStyle() {
|
||||
let background = `linear-gradient(90deg, ${this.dataConfig.headerBgColor.color[0].item} 0%, ${this.dataConfig.headerBgColor.color[1].item} 100%)`;
|
||||
if (this.dataConfig.styleConfig.tabVal) {
|
||||
background = `url(${this.dataConfig.imgBgConfig.url})`;
|
||||
}
|
||||
return {
|
||||
'background-image': background,
|
||||
};
|
||||
},
|
||||
goodsWrapperStyle() {
|
||||
let color = this.dataConfig.moduleColor2.color;
|
||||
if (this.dataConfig.styleConfig.tabVal) {
|
||||
color = this.dataConfig.moduleColor.color;
|
||||
}
|
||||
return {
|
||||
'background-image': `linear-gradient(270deg, ${color[0].item} 0%, ${color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
pointsMallStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
};
|
||||
},
|
||||
buttonStyle() {
|
||||
let color = this.dataConfig.headerBntColor2.color[0].item;
|
||||
if (this.dataConfig.styleConfig.tabVal) {
|
||||
color = this.dataConfig.headerBntColor.color[0].item;
|
||||
}
|
||||
return {
|
||||
'font-size': this.dataConfig.bntNumber.val,
|
||||
'color': color,
|
||||
};
|
||||
},
|
||||
titleImage() {
|
||||
let url = this.dataConfig.imgConfig2.url;
|
||||
if (this.dataConfig.styleConfig.tabVal) {
|
||||
url = this.dataConfig.imgConfig.url;
|
||||
}
|
||||
return url;
|
||||
},
|
||||
titleStyle() {
|
||||
let fontStyle = 'normal';
|
||||
let fontWeight = 'normal';
|
||||
if (this.dataConfig.titleConfig.tabVal) {
|
||||
switch (this.dataConfig.titleText.tabVal) {
|
||||
case 0:
|
||||
fontWeight = 'bold';
|
||||
break;
|
||||
case 2:
|
||||
fontStyle = 'italic';
|
||||
break;
|
||||
}
|
||||
}
|
||||
return {
|
||||
'font-style': fontStyle,
|
||||
'font-weight': fontWeight,
|
||||
};
|
||||
},
|
||||
goodsImage() {
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return borderRadius;
|
||||
},
|
||||
priceBoxStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
if (this.dataConfig.goodStyleConfig.tabVal) {
|
||||
styleObject['color'] = this.dataConfig.goodsUnitPriceColor.color[0].item;
|
||||
} else {
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.priceBgColor.color[0].item} 0%, ${this.dataConfig.priceBgColor.color[1].item} 100%)`;
|
||||
styleObject['color'] = this.dataConfig.goodsPriceColor.color[0].item;
|
||||
}
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
goodsTitleStyle() {
|
||||
return {
|
||||
'color': this.dataConfig.goodsNameColor.color[0].item,
|
||||
};
|
||||
},
|
||||
// 数字样式
|
||||
numStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['color'] = this.dataConfig.goodsPriceColor2.color[0].item;
|
||||
}else{
|
||||
styleObject['color'] = this.dataConfig.goodsPriceColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
pointsMallWrapStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val}rpx ${this.dataConfig.prConfig.val}rpx ${this.dataConfig.bottomConfig.val}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val}rpx`,
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getStoreIntegralList();
|
||||
},
|
||||
methods: {
|
||||
getStoreIntegralList() {
|
||||
let limit = this.$config.LIMIT;
|
||||
getStoreIntegralList({
|
||||
page: 1,
|
||||
limit: this.dataConfig.numberConfig.val
|
||||
}).then(res => {
|
||||
this.goodsList = res.data;
|
||||
});
|
||||
},
|
||||
goPointsMall() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/points_mall/index`
|
||||
});
|
||||
},
|
||||
goGoodsDetails(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_details/index?id=${id}&type=4`
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pointsMall {
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 96rpx;
|
||||
padding: 0 24rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-wrapper {
|
||||
.goods-list {
|
||||
padding: 0 10rpx 12rpx;
|
||||
|
||||
.item {
|
||||
flex: 0 0 33.33%;
|
||||
min-width: 0;
|
||||
padding: 0 10rpx 20rpx;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 16rpx 0 0;
|
||||
background: none;
|
||||
font-family: SemiBold;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 4rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #282828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-wrapper2 {
|
||||
padding: 0 10rpx 8rpx;
|
||||
|
||||
.item {
|
||||
flex: 0 0 50%;
|
||||
min-width: 0;
|
||||
padding: 0 10rpx 20rpx;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 16rpx 0 0;
|
||||
background: none;
|
||||
font-family: SemiBold;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.point {
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-wrapper0 {
|
||||
padding: 0 0 32rpx 20rpx;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
white-space: nowrap;
|
||||
padding: 20rpx 0 20rpx 20rpx;
|
||||
border-radius: 16rpx 0 0 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 224rpx;
|
||||
margin: 0 20rpx 0 0;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 2rpx 20rpx 20rpx 20rpx;
|
||||
margin: 16rpx 0 0;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
font-family: SemiBold;
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.point {
|
||||
font-weight: 600;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
391
view/uniapp/pages/index/components/presale.vue
Normal file
391
view/uniapp/pages/index/components/presale.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<view :style="[boxStyle]" v-if="productList.length && !dataConfig.isHide">
|
||||
<view :style="[boxContentStyle]">
|
||||
<!-- 预售头部 -->
|
||||
<view class="w-full h-96 px-24 flex-between-center bg-cover" :style="[headerStyle]">
|
||||
<view class="flex-y-center">
|
||||
<text class="fs-32 lh-44rpx fw-500" :style="[titleStyle]" v-if="titleConfig">{{titleTxtConfig}}</text>
|
||||
<image :src="titleImg" class="w-140 h-32" v-else></image>
|
||||
<text class="fs-28 text--w111-ccc px-16" :style="[dividerColor]">|</text>
|
||||
<text class="fs-26 text--w111-999 lh-36rpx" :style="[tipsColor]">{{tipTxt}}</text>
|
||||
</view>
|
||||
<view class="flex-y-center fs-24 text--w111-999" :style="[headerBntColor]"
|
||||
@tap="goPage('/pages/activity/presell/index')">
|
||||
<text>{{rightBntTxt}}</text>
|
||||
<text class="iconfont icon-ic_rightarrow fs-24"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 预售列表 -->
|
||||
<!-- 单列 -->
|
||||
<view class="pt-32 pr-20 pb-32 pl-20 bg--w111-fff" :style="[contentBox]" v-if="goodStyleConfig == 0">
|
||||
<view class="w-full flex justify-between item"
|
||||
v-for="(item,index) in productList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="240rpx"
|
||||
height="240rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="flex-1 flex-col justify-between pl-20 h-240">
|
||||
<view class="w-full fs-28 h-80 lh-40rpx line2" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.store_name}}</view>
|
||||
<view class="flex w-full h-68 rd-8rpx relative"
|
||||
:style="{background: dataConfig.goodsBntColor.color[0].item}"
|
||||
v-if="!showBtn">
|
||||
<view class="flex-y-center pl-20 fs-22 btn-left " :style="{color: dataConfig.goodsBntColor.color[0].item}">
|
||||
<!-- v-if="checkboxInfo.includes(2)" -->
|
||||
<baseMoney
|
||||
:money="item.price"
|
||||
symbolSize="26"
|
||||
integerSize="40"
|
||||
decimalSize="26"
|
||||
weight
|
||||
preFix="预售:"
|
||||
preFixSize="22"
|
||||
:textColor="priceColor"
|
||||
:color="priceColor"></baseMoney>
|
||||
</view>
|
||||
<view class="flex-center fs-26 fw-bold text--w111-fff btn-right" :style="[btnBgColor]">{{item.presale_pay_status | filterType}}</view>
|
||||
<image class="shandian" src="@/static/img/presale.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两列 -->
|
||||
<view class="grid-column-2 grid-gap-22rpx pt-32 pr-20 pb-32 pl-20"
|
||||
v-if="goodStyleConfig == 1">
|
||||
<view v-for="(item,index) in productList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
height="324rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line2 mt-16 fs-28 lh-40rpx"
|
||||
:style="[productStyle]" v-if="checkboxInfo.includes(0)">{{item.store_name}}</view>
|
||||
<view class="flex justify-between items-end mt-10">
|
||||
<view class="flex-col">
|
||||
<baseMoney
|
||||
:money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-26 text--w111-999 pt-14 Regular"
|
||||
:style="[otPriceColor]">¥{{item.ot_price}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24 text--w111-fff bg--w111-E93323'
|
||||
v-if="!showBtn" :style="[btnBgColor]">去预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 三列 -->
|
||||
<view class="grid-column-3 grid-gap-18rpx pt-32 pr-20 pb-32 pl-20"
|
||||
v-if="goodStyleConfig == 2">
|
||||
<view v-for="(item,index) in productList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="100%"
|
||||
height="212rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.store_name}}</view>
|
||||
<view class="flex items-baseline mt-12">
|
||||
<baseMoney :money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
preFix="预售价"
|
||||
preFixSize="22"
|
||||
:textColor="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
</view>
|
||||
<view class="text-line fs-24 text--w111-999 Regular lh-32rpx"
|
||||
:style="[otPriceColor]" v-if="checkboxInfo.includes(3)">¥{{item.ot_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 滑动 -->
|
||||
<scroll-view scroll-x="true" show-scrollbar="false"
|
||||
class="white-nowrap vertical-middle w-full pt-32 pb-32"
|
||||
v-if="goodStyleConfig == 3">
|
||||
<view class="inline-block ml-20" v-for="(item,index) in productList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
width="224rpx"
|
||||
height="224rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-222 line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.store_name}}</view>
|
||||
<view class="flex items-baseline mt-12">
|
||||
<baseMoney :money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
preFix="预售价"
|
||||
preFixSize="22"
|
||||
:textColor="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
</view>
|
||||
<view class="text-line fs-24 text--w111-999 Regular lh-32rpx"
|
||||
:style="[otPriceColor]" v-if="checkboxInfo.includes(3)">¥{{item.ot_price}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAdvancellList } from '@/api/activity.js';
|
||||
export default {
|
||||
name: 'presale',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType:{
|
||||
type: String | Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
filterType(val){
|
||||
let obj = {
|
||||
1: '未开始',
|
||||
2: '进行中',
|
||||
3: '已结束'
|
||||
};
|
||||
return obj[val]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
productList: [],
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
boxStyle(){
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
}
|
||||
},
|
||||
boxContentStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
background: `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
/*商品模板*/
|
||||
goodStyleConfig(){
|
||||
return this.dataConfig.goodStyleConfig.tabVal
|
||||
},
|
||||
styleConfig(){
|
||||
return this.dataConfig.styleConfig.tabVal
|
||||
},
|
||||
headerStyle(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx 0 0`
|
||||
}else{
|
||||
borderRadius = `${br} ${br} 0 0`
|
||||
}
|
||||
return {
|
||||
backgroundImage: this.styleConfig ? 'url(' + imgBgUrl + ')' : `linear-gradient(90deg,${this.dataConfig.headerBgColor.color[0].item} 0%,${this.dataConfig.headerBgColor.color[1].item} 100%)`,
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
contentBox(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `0 0 ${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx`
|
||||
}else{
|
||||
borderRadius = `0 0 ${br} ${br}`
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
/*标题是文本还是图片*/
|
||||
titleConfig(){
|
||||
return this.dataConfig.titleConfig.tabVal
|
||||
},
|
||||
/*标题文本*/
|
||||
titleTxtConfig(){
|
||||
return this.dataConfig.titleTxtConfig.value
|
||||
},
|
||||
/*标题图片*/
|
||||
titleImg(){
|
||||
return this.styleConfig ? this.titleUrl : this.titleColorUrl
|
||||
},
|
||||
titleColorUrl(){
|
||||
return this.dataConfig.imgColorConfig.url
|
||||
},
|
||||
titleUrl(){
|
||||
return this.dataConfig.imgConfig.url
|
||||
},
|
||||
titleStyle(){
|
||||
return {
|
||||
'font-style': this.dataConfig.titleText.tabVal == 2 ? 'italic' : '',
|
||||
'font-size': `${this.dataConfig.titleNumber.val * 2}rpx`,
|
||||
'font-weight': this.dataConfig.titleText.tabVal == 0 ? 'bold' : '',
|
||||
color: this.dataConfig.titleColor.color[0].item
|
||||
}
|
||||
},
|
||||
/*标题提示文字*/
|
||||
tipsColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.tipsColor.color[0].item : this.dataConfig.tipsColor2.color[0].item
|
||||
}
|
||||
},
|
||||
/*分割线颜色*/
|
||||
dividerColor(){
|
||||
return {
|
||||
color: this.dataConfig.dividerColor.color[0].item
|
||||
}
|
||||
},
|
||||
/*头部提示语文本*/
|
||||
tipTxt(){
|
||||
return this.dataConfig.tipTxtConfig.value
|
||||
},
|
||||
/*头部按钮文本*/
|
||||
rightBntTxt(){
|
||||
return this.dataConfig.rightBntConfig.value
|
||||
},
|
||||
/*头部按钮样式*/
|
||||
headerBntColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.headerBntColor.color[0].item : this.dataConfig.headerBntColor2.color[0].item,
|
||||
fontSize: `${this.dataConfig.bntNumber.val * 2}rpx`
|
||||
}
|
||||
},
|
||||
/*商品图片圆角样式*/
|
||||
imgStyle(){
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return borderRadius
|
||||
},
|
||||
/*商品名称样式*/
|
||||
productStyle(){
|
||||
return {
|
||||
color: this.dataConfig.goodsNameColor.color[0].item,
|
||||
fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : '500'
|
||||
}
|
||||
},
|
||||
/* 展示信息 */
|
||||
checkboxInfo(){
|
||||
return this.dataConfig.checkboxInfo.type
|
||||
},
|
||||
/* 价格颜色 */
|
||||
priceColor(){
|
||||
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.presalePriceColor.color[0].item : 'var(--view-theme)'
|
||||
},
|
||||
/* 原价颜色 */
|
||||
otPriceColor(){
|
||||
return this.dataConfig.goodsPriceColor.color[0].item
|
||||
},
|
||||
showBtn(){
|
||||
return this.dataConfig.presaleConfig.tabVal
|
||||
},
|
||||
/* 按钮颜色 */
|
||||
btnBgColor(){
|
||||
return {
|
||||
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.goodsBntColor.color[0].item} 0%,${this.dataConfig.goodsBntColor.color[1].item} 100%)`: 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)'
|
||||
}
|
||||
},
|
||||
/*商品数量*/
|
||||
numberConfig(){
|
||||
return this.dataConfig.numberConfig.val
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
goPage(url){
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
let limit = this.$config.LIMIT;
|
||||
getAdvancellList({
|
||||
page: 1,
|
||||
limit: this.numberConfig>=limit?limit:this.numberConfig,
|
||||
time_type:0
|
||||
}).then(res => {
|
||||
this.productList = res.data.list;
|
||||
})
|
||||
},
|
||||
goDetails(item){
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_details/index?id=${item.id}&type=6`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Regular{
|
||||
font-family: 'Regular';
|
||||
}
|
||||
.bg-cover{
|
||||
background-size: cover;
|
||||
}
|
||||
.item ~ .item{
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.badge{
|
||||
width: 152rpx;
|
||||
height: 26rpx;
|
||||
background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
|
||||
border-radius: 20rpx;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 16rpx 0;
|
||||
}
|
||||
.btn-left{
|
||||
width: 60%;
|
||||
border-radius: 8rpx 0 0 8rpx;
|
||||
background:rgba(255,255,255,0.9);
|
||||
}
|
||||
.btn-right{
|
||||
width: 40%;
|
||||
border-radius: 0 8rpx 8rpx 0;
|
||||
}
|
||||
.shandian{
|
||||
width: 48rpx;
|
||||
height: 74rpx;
|
||||
position: absolute;
|
||||
// transform: scale(1.1);
|
||||
left: 60%;
|
||||
top: 0;
|
||||
margin-top: -2rpx;
|
||||
margin-left: -22rpx;
|
||||
}
|
||||
</style>
|
||||
702
view/uniapp/pages/index/components/promotionList.vue
Normal file
702
view/uniapp/pages/index/components/promotionList.vue
Normal file
@@ -0,0 +1,702 @@
|
||||
<template>
|
||||
<!-- 促销列表 -->
|
||||
<view v-if="!dataConfig.isHide" :style="[bottomBgColor]">
|
||||
<view class="index-product-wrapper" :style="[contentStyle]">
|
||||
<view :style="{height:navBdH+'px'}" class="nav-bd-box">
|
||||
<view class="nav-bd" :class="{
|
||||
'nav-bd2': dataConfig.styleConfig.tabVal == 1,
|
||||
'nav-bd3': dataConfig.styleConfig.tabVal == 2,
|
||||
'nav-bd4': dataConfig.styleConfig.tabVal == 3,
|
||||
'nav-bd5': dataConfig.styleConfig.tabVal == 4,
|
||||
}" :style="[fixedStyle]">
|
||||
<scroll-view class="scroll-view" scroll-x="true">
|
||||
<view class="item"
|
||||
v-for="(item,index) in explosiveMoney" :key="index"
|
||||
:class="{on: index == ProductNavindex}" @click="ProductNavTab(item,index)">
|
||||
<view v-if="dataConfig.styleConfig.tabVal == 4" class="image-wrap">
|
||||
<image :src="item.image" class="image"></image>
|
||||
</view>
|
||||
<view class="txt" :style="[index == ProductNavindex ? textColor : fontStyle]">{{item.chiild[0].val}}</view>
|
||||
<view v-if="[1,2].includes(dataConfig.styleConfig.tabVal)" class="line"
|
||||
:style="[index == ProductNavindex ? lineColor : {}]"></view>
|
||||
<view class="label" v-if="dataConfig.styleConfig.tabVal == 0 && item.chiild[1].val" :style="[index == ProductNavindex ? decorateColor : {}]">
|
||||
{{ item.chiild[1].val }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-16">
|
||||
<goodList v-if="goodDataConfig" :dataConfig="goodDataConfig" @detail="goDetail"></goodList>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {
|
||||
// getProductslist
|
||||
// } from '@/api/store.js';
|
||||
let statusBarHeight = uni.getWindowInfo().statusBarHeight;
|
||||
import goodList from './goodList.vue';
|
||||
import homeCombVue from './homeComb.vue';
|
||||
export default {
|
||||
name: 'promotionList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
},
|
||||
productVideoStatus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isHeaderSerch:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showHomeComb:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
components: {
|
||||
goodList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight,
|
||||
tempArr: [],
|
||||
iSshowH: false,
|
||||
ProductNavindex: 0,
|
||||
explosiveMoney: this.dataConfig.tabConfig.list,
|
||||
// imgStyle: this.dataConfig.imgStyle.type,
|
||||
mbConfig: 0,
|
||||
themeColor: '',
|
||||
titleShow: 0, //标题是否显示
|
||||
opriceShow: 0, //原价是否显示
|
||||
priceShow: 0, //价格是否显示
|
||||
couponShow: 0, //优惠券标签是否显示
|
||||
titleConfig: 0, //标题位置
|
||||
fontColor: '',
|
||||
labelColor: '',
|
||||
txtColor: '',
|
||||
infoColor: '',
|
||||
goodType: this.dataConfig.tabConfig.list[0].tabVal,
|
||||
loadend: false,
|
||||
loading: false,
|
||||
limit: this.$config.LIMIT,
|
||||
page: 1,
|
||||
canPlay: false,
|
||||
autoplay: false,
|
||||
activeValue: this.dataConfig.tabConfig.list[0],
|
||||
goodDataConfig: null,
|
||||
sticky: false,
|
||||
navBdH: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
numConfig(){
|
||||
return this.dataConfig.tabConfig.list[this.ProductNavindex].numConfig.val
|
||||
},
|
||||
decorateColor() {
|
||||
if(this.dataConfig.toneConfig.tabVal){
|
||||
let color = this.dataConfig.decorateColor.color;
|
||||
let background = `linear-gradient(90deg, ${color[0].item} 0%, ${color[1].item} 100%)`;
|
||||
if (this.dataConfig.styleConfig.tabVal == 2) {
|
||||
color = this.dataConfig.decorateColor2.color;
|
||||
background = color[0].item;
|
||||
}
|
||||
return {
|
||||
background: background,
|
||||
}
|
||||
}else{
|
||||
return {
|
||||
background: `linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%)`
|
||||
}
|
||||
}
|
||||
},
|
||||
textColor() {
|
||||
if(this.dataConfig.toneConfig.tabVal){
|
||||
let color = this.dataConfig.textColor.color[0].item;
|
||||
let bgColor = this.dataConfig.decorateColor.color;
|
||||
let background = '';
|
||||
let fontSize = '';
|
||||
if ([0,2].includes(this.dataConfig.styleConfig.tabVal)) {
|
||||
color = this.dataConfig.textColor2.color[0].item;
|
||||
fontSize = this.dataConfig.activeFontSize?.val * 2 + 'rpx'
|
||||
} else if ([3,4].includes(this.dataConfig.styleConfig.tabVal)) {
|
||||
color = '#ffffff';
|
||||
background = `linear-gradient(90deg, ${bgColor[0].item} 0%, ${bgColor[1].item} 100%)`;
|
||||
} else if (this.dataConfig.styleConfig.tabVal == 1){
|
||||
color = this.dataConfig.textColor.color[0].item,
|
||||
fontSize = this.dataConfig.activeFontSize?.val * 2 + 'rpx'
|
||||
}
|
||||
return {
|
||||
color: color,
|
||||
background:background,
|
||||
fontSize: fontSize
|
||||
}
|
||||
}else{
|
||||
if(this.dataConfig.styleConfig.tabVal == 1){
|
||||
return {
|
||||
color: '#282828',
|
||||
fontSize: this.dataConfig.activeFontSize?.val * 2 + 'rpx'
|
||||
}
|
||||
}else if([3,4].includes(this.dataConfig.styleConfig.tabVal)){
|
||||
return {
|
||||
background: 'linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%)',
|
||||
color: '#ffffff',
|
||||
fontSize: this.dataConfig.activeFontSize?.val * 2 + 'rpx'
|
||||
}
|
||||
}else{
|
||||
return {
|
||||
color: 'var(--view-theme)',
|
||||
fontSize: this.dataConfig.activeFontSize?.val * 2 + 'rpx'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
fontStyle(){
|
||||
return {
|
||||
color: this.dataConfig.nameColor?.color[0].item,
|
||||
fontSize: this.dataConfig.fontSize?.val * 2 + 'rpx'
|
||||
}
|
||||
},
|
||||
bottomBgColor() {
|
||||
return {
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
}
|
||||
},
|
||||
contentStyle(){
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val*2}rpx ${this.dataConfig.prConfig.val*2}rpx ${this.dataConfig.bottomConfig.val*2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val*2}rpx`,
|
||||
}
|
||||
},
|
||||
lineColor(){
|
||||
let diy = this.dataConfig.toneConfig.tabVal;
|
||||
let type = this.dataConfig.styleConfig.tabVal;
|
||||
let color = this.dataConfig.decorateColor.color;
|
||||
let bgColor = `linear-gradient(90deg, ${color[0].item} 0%, ${color[1].item} 100%)`;
|
||||
if(type == 1){
|
||||
return {
|
||||
background: diy ? bgColor : 'linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%)'
|
||||
}
|
||||
}else if(type == 2){
|
||||
return {
|
||||
'border-bottom-color': diy ? this.dataConfig.decorateColor2.color[0].item : 'var(--view-theme)'
|
||||
}
|
||||
}
|
||||
},
|
||||
fixedTop(){
|
||||
if(this.isHeaderSerch || this.showHomeComb){
|
||||
return (this.statusBarHeight + 43)+'px'
|
||||
}else{
|
||||
return this.statusBarHeight + 'px'
|
||||
}
|
||||
},
|
||||
fixedStyle(){
|
||||
return {
|
||||
position:this.sticky?'fixed':'static',
|
||||
top:this.fixedTop,
|
||||
background:this.sticky?'#FFFFFF':'none',
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeValue: {
|
||||
handler(value) {
|
||||
let that = this;
|
||||
let type = that.goodType == 0 ? 3 : that.goodType;
|
||||
let goodDataConfig = {
|
||||
styleConfig: {
|
||||
tabVal: 1
|
||||
},
|
||||
goodsList: this.activeValue.goodsList,
|
||||
brandList: this.activeValue.brandConfig,
|
||||
classList: {
|
||||
classVal: this.activeValue.selectConfig.activeValue
|
||||
},
|
||||
goodsLabel: this.activeValue.goodsLabel,
|
||||
typeConfig: {
|
||||
activeValue: type
|
||||
},
|
||||
goodsSort: {
|
||||
tabVal: this.activeValue.goodsSort,
|
||||
},
|
||||
numberConfig: {
|
||||
val: that.numConfig
|
||||
},
|
||||
bntStyleConfig: this.dataConfig.bntStyleConfig,
|
||||
cartConfig: this.dataConfig.cartConfig,
|
||||
bntConfig: this.dataConfig.bntConfig,
|
||||
filletImg: {
|
||||
type: 0,
|
||||
val: 8,
|
||||
},
|
||||
checkboxInfo: {
|
||||
type: [0, 1, 2, 3, 4, 5],
|
||||
},
|
||||
toneConfig: {
|
||||
tabVal: 0,
|
||||
},
|
||||
toneCartConfig: this.dataConfig.toneCartConfig,
|
||||
bntBgColor: this.dataConfig.bntBgColor,
|
||||
goodsName: {
|
||||
tabVal: 1,
|
||||
},
|
||||
goodsNameColor: {
|
||||
color: [{
|
||||
item: '#333333'
|
||||
}],
|
||||
},
|
||||
goodsPriceColor: {
|
||||
color: [{
|
||||
item: 'var(--view-theme)'
|
||||
}],
|
||||
},
|
||||
topConfig: {
|
||||
val: 0,
|
||||
},
|
||||
prConfig: {
|
||||
val: this.dataConfig.prConfig.val,
|
||||
},
|
||||
bottomConfig: {
|
||||
val: 0,
|
||||
},
|
||||
mbConfig: {
|
||||
val: 0,
|
||||
},
|
||||
moduleColor:{
|
||||
color:[
|
||||
{item: '#ffffff'},
|
||||
{item: '#ffffff'}
|
||||
]
|
||||
},
|
||||
bottomBgColor: this.dataConfig.bottomBgColor,
|
||||
fillet: {
|
||||
type: 0,
|
||||
val: 0,
|
||||
},
|
||||
};
|
||||
that.goodDataConfig = goodDataConfig;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
// goodType: {
|
||||
// handler(value) {
|
||||
// value !== undefined && this.getGroomList();
|
||||
// },
|
||||
// immediate: true
|
||||
// },
|
||||
},
|
||||
created() {
|
||||
let that = this;
|
||||
let type = that.goodType == 0 ? 3 : that.goodType;
|
||||
let goodDataConfig = {
|
||||
styleConfig: {
|
||||
tabVal: 1
|
||||
},
|
||||
goodsList: this.activeValue.goodsList,
|
||||
brandList: this.activeValue.brandConfig,
|
||||
classList: {
|
||||
classVal: this.activeValue.selectConfig.activeValue
|
||||
},
|
||||
goodsLabel: this.activeValue.goodsLabel,
|
||||
typeConfig: {
|
||||
activeValue: type
|
||||
},
|
||||
goodsSort: {
|
||||
tabVal: this.activeValue.goodsSort,
|
||||
},
|
||||
numberConfig: {
|
||||
val: that.numConfig
|
||||
},
|
||||
bntStyleConfig: this.dataConfig.bntStyleConfig,
|
||||
cartConfig: this.dataConfig.cartConfig,
|
||||
bntConfig: this.dataConfig.bntConfig,
|
||||
filletImg: {
|
||||
type: 0,
|
||||
val: 8,
|
||||
},
|
||||
checkboxInfo: {
|
||||
type: [0, 1, 2, 3, 4, 5],
|
||||
},
|
||||
toneConfig: {
|
||||
tabVal: 0,
|
||||
},
|
||||
toneCartConfig: this.dataConfig.toneCartConfig,
|
||||
bntBgColor: this.dataConfig.bntBgColor,
|
||||
goodsName: {
|
||||
tabVal: 1,
|
||||
},
|
||||
goodsNameColor: {
|
||||
color: [{
|
||||
item: '#333333'
|
||||
}],
|
||||
},
|
||||
goodsPriceColor: {
|
||||
color: [{
|
||||
item: 'var(--view-theme)'
|
||||
}],
|
||||
},
|
||||
topConfig: {
|
||||
val: 0,
|
||||
},
|
||||
prConfig: {
|
||||
val: this.dataConfig.prConfig.val,
|
||||
},
|
||||
bottomConfig: {
|
||||
val: 0,
|
||||
},
|
||||
moduleColor:{
|
||||
color:[
|
||||
{item: '#ffffff'},
|
||||
{item: '#ffffff'}
|
||||
]
|
||||
},
|
||||
mbConfig: {
|
||||
val: 0,
|
||||
},
|
||||
bottomBgColor: {
|
||||
color: [{
|
||||
item: ''
|
||||
}],
|
||||
},
|
||||
fillet: {
|
||||
type: 0,
|
||||
val: 0,
|
||||
},
|
||||
};
|
||||
that.goodDataConfig = goodDataConfig;
|
||||
},
|
||||
mounted() {
|
||||
let view = uni.createSelectorQuery().in(this).select(".nav-bd");
|
||||
let views = uni.createSelectorQuery().in(this).select(".nav-bd-box");
|
||||
let positionTop = this.statusBarHeight + 43;
|
||||
view.boundingClientRect((data) => {
|
||||
this.navBdH = data.height;
|
||||
}).exec();
|
||||
if (!this.dataConfig.slideConfig.tabVal) {
|
||||
uni.$on('onPageScroll', () => {
|
||||
views.boundingClientRect((data) => {
|
||||
|
||||
this.sticky = data.top <= positionTop;
|
||||
}).exec();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 促销列表的点击事件；
|
||||
changeTab(item) {
|
||||
this.goodType = item.tabVal;
|
||||
this.activeValue = item;
|
||||
// this.tempArr = [];
|
||||
// this.page = 1;
|
||||
// this.loadend = false;
|
||||
// let onloadH = true;
|
||||
// this.getGroomList(onloadH);
|
||||
},
|
||||
// 精品推荐
|
||||
getGroomList(onloadH) {
|
||||
let that = this;
|
||||
let type = that.goodType == 0 ? 3 : that.goodType;
|
||||
if (that.loadend) return false;
|
||||
if (that.loading) return false;
|
||||
if (onloadH) {
|
||||
that.$set(that, 'iSshowH', true);
|
||||
}
|
||||
let datas = {
|
||||
page: that.page,
|
||||
limit: this.numConfig
|
||||
};
|
||||
if (type == 1) {
|
||||
datas.ids = that.activeValue.goodsList.ids.join();
|
||||
} else if (type == 2) {
|
||||
datas.brand_id = that.activeValue.brandConfig.brandVal.join();
|
||||
} else if (type == 3) {
|
||||
datas.cate_id = that.activeValue.selectConfig.activeValue.join();
|
||||
} else if (type == 4) {
|
||||
datas.store_label_id = that.activeValue.goodsLabel.activeValue.join();
|
||||
}
|
||||
getProductslist(datas)
|
||||
.then(({
|
||||
data
|
||||
}) => {
|
||||
that.$set(that, 'iSshowH', false);
|
||||
let maxPage = Math.ceil(this.numConfig / this.limit);
|
||||
let list = data,
|
||||
loadend = list.length < that.limit || that.page >= maxPage;
|
||||
let tempArr = that.$util.SplitArray(list, that.tempArr);
|
||||
that.$set(that, 'tempArr', tempArr.slice(0, this.numConfig));
|
||||
that.loadend = loadend;
|
||||
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
|
||||
that.page = that.page + 1;
|
||||
that.loading = false;
|
||||
})
|
||||
.catch(res => {
|
||||
that.loading = false;
|
||||
that.loadTitle = '加载更多';
|
||||
});
|
||||
},
|
||||
// 首发新品切换
|
||||
ProductNavTab(item, index) {
|
||||
this.ProductNavindex = index;
|
||||
this.changeTab(item);
|
||||
},
|
||||
goDetail(item) {
|
||||
this.$emit('detail', item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 这里可以自行配置
|
||||
$border-radius: 10px;
|
||||
|
||||
.index-product-wrapper {
|
||||
|
||||
&.on {
|
||||
min-height: 1500rpx;
|
||||
}
|
||||
|
||||
.nav-bd {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
|
||||
&.nav-bd2 {
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 18rpx 0;
|
||||
margin-right: 56rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
&.on {
|
||||
.txt {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
// .line {
|
||||
// background: linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%);
|
||||
// }
|
||||
}
|
||||
|
||||
.txt {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 22rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-bd3 {
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 18rpx 0;
|
||||
margin-right: 56rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
&.on {
|
||||
.txt {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #E93323;
|
||||
}
|
||||
|
||||
// .line {
|
||||
// border-bottom-color: var(--view-theme);
|
||||
// }
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
left: 50%;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border: 4rpx solid transparent;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-bd4 {
|
||||
.item {
|
||||
padding: 16rpx 0;
|
||||
margin-right: 16rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
&.on {
|
||||
.txt {
|
||||
background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.txt {
|
||||
height: 48rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-bd5 {
|
||||
.item {
|
||||
padding: 20rpx 0;
|
||||
margin-right: 16rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
&.on {
|
||||
.image-wrap {
|
||||
border-color: var(--view-theme);
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.txt {
|
||||
// background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
border: 3rpx solid transparent;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border: 1rpx solid #EEEEEE;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.txt {
|
||||
height: 40rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
padding: 20rpx 0 14rpx;
|
||||
margin-right: 66rpx;
|
||||
text-align: center;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 36rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 36rpx;
|
||||
}
|
||||
|
||||
&.on {
|
||||
.txt {
|
||||
font-weight: 500;
|
||||
color: #E93323;
|
||||
}
|
||||
|
||||
.label {
|
||||
background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
height: 38rpx;
|
||||
padding: 0 12rpx;
|
||||
border-radius: 19rpx;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 38rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
311
view/uniapp/pages/index/components/ranking.vue
Normal file
311
view/uniapp/pages/index/components/ranking.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view :style="[boxStyle]" v-if="!dataConfig.isHide">
|
||||
<view class="p-24" :style="[boxContentStyle]" @tap="goRank">
|
||||
<view class="flex-between-center">
|
||||
<text class="fs-32 fw-500" v-if="titleConfig">{{ titleTxtConfig }}</text>
|
||||
<image :src="titleImg" class="w-102 h-32" v-else></image>
|
||||
<text class="fs-24 text--w111-999" :style="[headerBntColor]">
|
||||
{{ headerBtnText }}
|
||||
<text class="iconfont icon-ic_rightarrow fs-24"></text>
|
||||
</text>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full mt-32" show-scrollbar="false" v-if="styleConfig == 0">
|
||||
<view class="inline-block mr-20">
|
||||
<view class="rank-card" :style="[rankCardStyle]">
|
||||
<view class="fs-28 lh-40rpx fw-600 flex-y-center" :style="[rankItemTitleStyle]">
|
||||
<text class="iconfont icon-ic_fire fs-32"></text>
|
||||
<text class="pl-8">销量榜</text>
|
||||
</view>
|
||||
<view class="rd-12rpx bg--w111-fff mt-18 p-14 h-400" v-if="sales.length">
|
||||
<view class="rank-pro-item flex-y-center" v-for="(item, index) in sales" :key="index">
|
||||
<view class="w-108 h-108 relative">
|
||||
<easy-loadimage :image-src="item.image" width="108rpx" height="108rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="rank_count fs-24 text--w111-fff flex-center" :class="'rank-count' + (index + 1)">{{ index + 1 }}</view>
|
||||
</view>
|
||||
<view class="pl-16">
|
||||
<view class="w-180 line1 fs-26 lh-36rpx mb-8">{{ item.store_name }}</view>
|
||||
<baseMoney :money="item.price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inline-block mr-20">
|
||||
<view class="rank-card" :style="[rankCardStyle]">
|
||||
<view class="fs-28 lh-40rpx fw-600 flex-y-center" :style="[rankItemTitleStyle]">
|
||||
<text class="iconfont icon-ic_fire fs-32"></text>
|
||||
<text class="pl-8">收藏榜</text>
|
||||
</view>
|
||||
<view class="rd-12rpx bg--w111-fff mt-18 p-14 h-400" v-if="collect.length">
|
||||
<view class="rank-pro-item flex-y-center" v-for="(item, index) in collect" :key="index">
|
||||
<view class="w-108 h-108 relative">
|
||||
<easy-loadimage :image-src="item.image" width="108rpx" height="108rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="rank_count fs-24 text--w111-fff flex-center" :class="'rank-count' + (index + 1)">{{ index + 1 }}</view>
|
||||
</view>
|
||||
<view class="pl-16">
|
||||
<view class="w-130 line1 fs-26 lh-36rpx mb-8">{{ item.store_name }}</view>
|
||||
<baseMoney :money="item.price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inline-block mr-20">
|
||||
<view class="rank-card" :style="[rankCardStyle]">
|
||||
<view class="fs-28 lh-40rpx fw-600 flex-y-center" :style="[rankItemTitleStyle]">
|
||||
<text class="iconfont icon-ic_fire fs-32"></text>
|
||||
<text class="pl-8">好评榜</text>
|
||||
</view>
|
||||
<view class="rd-12rpx bg--w111-fff mt-18 p-14 h-400" v-if="star.length">
|
||||
<view class="rank-pro-item flex-y-center" v-for="(item, index) in star" :key="index">
|
||||
<view class="w-108 h-108 relative">
|
||||
<easy-loadimage :image-src="item.image" width="108rpx" height="108rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="rank_count fs-24 text--w111-fff flex-center" :class="'rank-count' + (index + 1)">{{ index + 1 }}</view>
|
||||
</view>
|
||||
<view class="pl-16">
|
||||
<view class="w-130 line1 fs-26 lh-36rpx mb-8">{{ item.store_name }}</view>
|
||||
<baseMoney :money="item.price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- <scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full mt-28"
|
||||
show-scrollbar="false" v-else>
|
||||
<view class="inline-block mr-20" v-for="item in 4" :key="item">
|
||||
<view>
|
||||
<view class="w-204 h-204 relative">
|
||||
<image class="w-full h-full rd-16rpx" src="https://test-pro30.crmeb.net/uploads/thumb_water/0998eb5cef0946cc00eb5f0e17ca3e94.png"></image>
|
||||
<image class="abs-lt w-72 h-72"
|
||||
:src="`${imgHost}/statics/images/product/rank_icon${item}.png`" v-if="item < 4"></image>
|
||||
</view>
|
||||
<view class="w-204 mt-20 mb-10 fs-26 line1">小米新款高配说不定是你的房间看</view>
|
||||
<baseMoney money="350.00" symbolSize="20" integerSize="28" decimalSize="28" color="#e93323" weight></baseMoney>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view> -->
|
||||
<view class="mt-26" v-else>
|
||||
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full mt-20" show-scrollbar="false">
|
||||
<view class="inline-block type-3 rd-16rpx mr-24" :style="[rankCardStyle]" v-if="sales.length">
|
||||
<view class="fs-26 fw-500" :style="[rankItemTitleStyle]">销量榜</view>
|
||||
<view class="flex mt-20">
|
||||
<view class="w-296 h-296 relative mr-12">
|
||||
<image :src="sales[0].image" class="w-full h-full" :style="{ borderRadius: imgStyle }"></image>
|
||||
<image class="abs-lt w-72 h-72" :src="`${imgHost}/statics/images/product/rank_icon1.png`"></image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="relative">
|
||||
<easy-loadimage :image-src="sales[1].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon2.png`"></image>
|
||||
</view>
|
||||
<view class="w-142 h-142 relative mt-12" v-if="sales.length > 2">
|
||||
<easy-loadimage :image-src="sales[2].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon3.png`"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-20 fs-26 w-280 line1">{{ sales[0].store_name }}</view>
|
||||
<view class="flex items-baseline mt-10">
|
||||
<baseMoney :money="sales[0].price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
||||
<text class="fs-20 text--w111-999 text-line pl-8">¥{{ sales[0].ot_price || '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inline-block type-3 rd-16rpx mr-24" :style="[rankCardStyle]" v-if="star.length">
|
||||
<view class="fs-26 fw-500" :style="[rankItemTitleStyle]">好评榜</view>
|
||||
<view class="flex mt-20">
|
||||
<view class="w-296 h-296 relative mr-12">
|
||||
<image :src="star[0].image" class="w-full h-full" :style="{ borderRadius: imgStyle }"></image>
|
||||
<image class="abs-lt w-72 h-72" :src="`${imgHost}/statics/images/product/rank_icon1.png`"></image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="w-142 h-142 relative">
|
||||
<easy-loadimage :image-src="star[1].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon2.png`"></image>
|
||||
</view>
|
||||
<view class="w-142 h-142 relative mt-12" v-if="sales.length > 2">
|
||||
<easy-loadimage :image-src="star[2].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon3.png`"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-20 fs-26 w-280 line1">{{ star[0].store_name }}</view>
|
||||
<view class="flex items-baseline mt-10">
|
||||
<baseMoney :money="star[0].price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
||||
<text class="fs-20 text--w111-999 text-line pl-8">¥{{ star[0].ot_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inline-block type-3 rd-16rpx mr-24" :style="[rankCardStyle]" v-if="collect.length">
|
||||
<view class="fs-26 fw-500" :style="[rankItemTitleStyle]">收藏榜</view>
|
||||
<view class="flex mt-20">
|
||||
<view class="w-296 h-296 relative mr-12">
|
||||
<image :src="collect[0].image" class="w-full h-full" :style="{ borderRadius: imgStyle }"></image>
|
||||
<image class="abs-lt w-72 h-72" :src="`${imgHost}/statics/images/product/rank_icon1.png`"></image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="w-142 h-142 relative">
|
||||
<easy-loadimage :image-src="collect[1].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon2.png`"></image>
|
||||
</view>
|
||||
<view class="w-142 h-142 relative mt-12" v-if="collect.length > 2">
|
||||
<easy-loadimage :image-src="collect[2].image" width="142rpx" height="142rpx" :borderRadius="imgStyle"></easy-loadimage>
|
||||
<image class="abs-lt w-48 h-48" :src="`${imgHost}/statics/images/product/rank_icon3.png`"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-20 fs-26 w-280 line1">{{ collect[0].store_name }}</view>
|
||||
<view class="flex items-baseline mt-10">
|
||||
<baseMoney :money="collect[0].price" symbolSize="20" integerSize="28" decimalSize="28" :color="priceColor" weight></baseMoney>
|
||||
<text class="fs-20 text--w111-999 text-line pl-8">¥{{ collect[0].ot_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import { diyRankApi } from '@/api/activity.js';
|
||||
export default {
|
||||
name: 'ranking',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
collect: [],
|
||||
sales: [],
|
||||
star: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
boxStyle() {
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item
|
||||
};
|
||||
},
|
||||
boxContentStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius = `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${
|
||||
this.dataConfig.fillet.valList[2].val * 2
|
||||
}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
background: `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`
|
||||
};
|
||||
},
|
||||
styleConfig() {
|
||||
return this.dataConfig.styleConfig.tabVal;
|
||||
},
|
||||
/*标题是文本还是图片*/
|
||||
titleConfig() {
|
||||
return this.dataConfig.titleConfig.tabVal;
|
||||
},
|
||||
/*标题文本*/
|
||||
titleTxtConfig() {
|
||||
return this.dataConfig.titleTxtConfig.value;
|
||||
},
|
||||
/*标题图片*/
|
||||
titleImg() {
|
||||
return this.dataConfig.imgConfig.url;
|
||||
},
|
||||
/*卡片颜色和圆角*/
|
||||
rankCardStyle() {
|
||||
let filletBg = this.dataConfig.filletBg.type;
|
||||
let valListBg = this.dataConfig.filletBg.valList;
|
||||
let filletValBg = this.dataConfig.filletBg.val;
|
||||
console.log(filletBg, 'filletBg');
|
||||
return {
|
||||
'border-radius': filletBg ? valListBg[0].val + 'px ' + valListBg[1].val + 'px ' + valListBg[3].val + 'px ' + valListBg[2].val + 'px' : filletValBg + 'px',
|
||||
background: `linear-gradient(90deg,${this.dataConfig.listBgColor.color[0].item} 0%,${this.dataConfig.listBgColor.color[1].item} 100%)`
|
||||
};
|
||||
},
|
||||
/*商品图片圆角样式*/
|
||||
imgStyle() {
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius = `${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${
|
||||
this.dataConfig.filletImg.valList[2].val * 2
|
||||
}rpx`;
|
||||
}
|
||||
return borderRadius;
|
||||
},
|
||||
rankItemTitleStyle() {
|
||||
return {
|
||||
color: this.dataConfig.toneConfig.tabVal ? this.dataConfig.classColor.color[0].item : 'var(--view-theme)'
|
||||
};
|
||||
},
|
||||
/* 价格颜色 */
|
||||
priceColor() {
|
||||
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.goodsPriceColor.color[0].item : 'var(--view-theme)';
|
||||
},
|
||||
/*头部按钮样式*/
|
||||
headerBntColor() {
|
||||
return {
|
||||
color: this.dataConfig.headerBntColor.color[0].item,
|
||||
fontSize: `${this.dataConfig.bntNumber.val * 2}rpx`
|
||||
};
|
||||
},
|
||||
headerBtnText() {
|
||||
return this.dataConfig.rightBntConfig.value;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
diyRankApi().then((res) => {
|
||||
this.collect = res.data.collect;
|
||||
this.sales = res.data.sales;
|
||||
this.star = res.data.star;
|
||||
});
|
||||
},
|
||||
goRank() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/columnGoods/rank/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rank-card {
|
||||
width: 372rpx;
|
||||
padding: 22rpx 16rpx 18rpx;
|
||||
}
|
||||
.rank_count {
|
||||
width: 30rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
.rank-count1 {
|
||||
background-image: url('@/static/img/rank1_icon.png');
|
||||
}
|
||||
.rank-count2 {
|
||||
background-image: url('@/static/img/rank2_icon.png');
|
||||
}
|
||||
.rank-count3 {
|
||||
background-image: url('@/static/img/rank3_icon.png');
|
||||
}
|
||||
.type-3 {
|
||||
padding: 20rpx 36rpx 20rpx 18rpx;
|
||||
}
|
||||
.rank-pro-item ~ .rank-pro-item {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
</style>
|
||||
102
view/uniapp/pages/index/components/richText.vue
Normal file
102
view/uniapp/pages/index/components/richText.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<!-- 富文本 -->
|
||||
<view v-if="!dataConfig.isHide" :style="[richTextWrapStyle]">
|
||||
<view class="richText" v-if="description" :style="[richTextStyle]">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- <rich-text :nodes="description"></rich-text> -->
|
||||
<jyf-parser :html="description" :tag-style="tagStyle" ref="article"></jyf-parser>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<view v-html="description"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import parser from '@/components/jyf-parser/jyf-parser';
|
||||
export default {
|
||||
name: 'richText',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
components: { 'jyf-parser': parser },
|
||||
data() {
|
||||
return {
|
||||
bgColor: '',
|
||||
lrConfig: 0,
|
||||
udConfig: 0,
|
||||
tagStyle: {
|
||||
img: 'width:100%;display:block;',
|
||||
table: 'width:100%',
|
||||
video: 'width:100%;float:left;'
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
description() {
|
||||
let description = this.dataConfig.richText.val;
|
||||
if (description) {
|
||||
description = description.replace(
|
||||
/<img/gi,
|
||||
'<img style="max-width:100%;height:auto;float:left;display:block" '
|
||||
);
|
||||
description = description.replace(
|
||||
/<video/gi,
|
||||
'<video style="width:100%;height:auto;display:block" '
|
||||
);
|
||||
}
|
||||
return description;
|
||||
},
|
||||
richTextStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
'background': this.dataConfig.bgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
richTextWrapStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.lrConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.udConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.richText {
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
// margin: 0 20rpx;
|
||||
// border-radius: 24rpx;
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/uni-video {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/deep/video {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
471
view/uniapp/pages/index/components/seckill.vue
Normal file
471
view/uniapp/pages/index/components/seckill.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<!-- 秒杀列表 -->
|
||||
<view :style="[boxStyle]" v-if="spikeList.length && !dataConfig.isHide">
|
||||
<view :style="[boxContentStyle]">
|
||||
<!-- 秒杀头部 -->
|
||||
<view class="w-full h-96 px-24 flex-between-center bg-cover" :style="[headerStyle]">
|
||||
<view class="flex-y-center">
|
||||
<text class="fs-32 lh-44rpx fw-500" :style="[titleStyle]" v-if="titleConfig">{{titleTxtConfig}}</text>
|
||||
<image :src="titleImg" class="w-140 h-32" v-else></image>
|
||||
<text class="fs-26 text--w111-999 lh-36rpx pl-20" :style="[tipsColor]">距离结束</text>
|
||||
<countDown
|
||||
:is-day="false"
|
||||
tip-text=" "
|
||||
day-text=" "
|
||||
hour-text=":"
|
||||
minute-text=":"
|
||||
second-text=" "
|
||||
:datatime="datatime"
|
||||
:bgColor="numberBgColor"
|
||||
:colors="numberColor"
|
||||
:dotColor="dotColor"></countDown>
|
||||
</view>
|
||||
<view class="flex-y-center fs-24 text--w111-999" :style="[headerBntColor]"
|
||||
@tap="goPage('/pages/activity/goods_seckill/index')">
|
||||
<text>{{rightBntTxt}}</text>
|
||||
<text class="iconfont icon-ic_rightarrow fs-24"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 单列 -->
|
||||
<view class="pt-32 pr-20 pb-32 pl-20" :style="[contentBox]"
|
||||
v-if="goodStyleConfig == 0">
|
||||
<view class="w-full flex justify-between item"
|
||||
v-for="(item,index) in spikeList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:border-src="item.activity_image"
|
||||
width="240rpx"
|
||||
height="240rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="flex-1 flex-col justify-between pl-20 h-240">
|
||||
<view>
|
||||
<view class="w-full fs-28 h-80 lh-40rpx line2" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="w-full flex-y-center mt-20" v-if="checkboxInfo.includes(1)">
|
||||
<view class="progress relative">
|
||||
<view class="active" :style="{'width': item.percent +'%',background:progressBgColor}"></view>
|
||||
<image src="@/static/img/lightning.png" class="lightning"
|
||||
:style="{left: item.percent == 100 ? '107px' : item.percent +'%'}"></image>
|
||||
</view>
|
||||
<text class="fs-22 lh-30rpx pl-12" :style="{color: priceColor}">{{item.percent +'%'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-end">
|
||||
<view class="flex-col">
|
||||
<baseMoney
|
||||
:money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36" weight
|
||||
:color="priceColor"
|
||||
preFix="秒杀价"
|
||||
preFixSize="24"
|
||||
:textColor="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-28 pt-14 Regular"
|
||||
v-if="checkboxInfo.includes(3)"
|
||||
:style="[otPriceColor]">¥{{item.ot_price.toString().split('.')[1] ? item.ot_price : item.ot_price + '.00'}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24'
|
||||
v-if="!showBtn" :style="[btnBgColor]">去抢购</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 两列 -->
|
||||
<view class="grid-column-2 grid-gap-22rpx pt-32 pr-20 pb-32 pl-20" v-if="goodStyleConfig == 1">
|
||||
<view v-for="(item,index) in spikeList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:border-src="item.activity_image"
|
||||
width="100%"
|
||||
height="324rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line2 mt-16 fs-28 lh-40rpx"
|
||||
:style="[productStyle]" v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex justify-between items-end mt-10">
|
||||
<view class="flex-col">
|
||||
<baseMoney
|
||||
:money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<text class="text-line fs-28 text--w111-999 pt-14 Regular"
|
||||
v-if="checkboxInfo.includes(3)" :style="[otPriceColor]"
|
||||
>¥{{item.ot_price.toString().split('.')[1] ? item.ot_price : item.ot_price + '.00'}}</text>
|
||||
</view>
|
||||
<view class='w-144 h-56 rd-30rpx flex-center fs-24'
|
||||
v-if="!showBtn" :style="[btnBgColor]">去抢购</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 三列 -->
|
||||
<view class="grid-column-3 grid-gap-18rpx pt-32 pr-20 pb-32 pl-20" v-if="goodStyleConfig == 2">
|
||||
<view v-for="(item,index) in spikeList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:border-src="item.activity_image"
|
||||
width="100%"
|
||||
height="212rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-full line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="price-box flex-center relative" v-if="checkboxInfo.includes(2)">
|
||||
<baseMoney :money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
color="#ffffff"
|
||||
></baseMoney>
|
||||
<image src="@/static/img/shandian.png" class="shandian"></image>
|
||||
</view>
|
||||
<view class="text-line fs-24 text--w111-999 Regular lh-32rpx mt-10"
|
||||
:style="[otPriceColor]" v-if="checkboxInfo.includes(3)"
|
||||
>¥{{item.ot_price.toString().split('.')[1] ? item.ot_price : item.ot_price + '.00'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 滑动 -->
|
||||
<scroll-view scroll-x="true" show-scrollbar="false"
|
||||
class="white-nowrap vertical-middle w-full pt-32 pb-32"
|
||||
v-if="goodStyleConfig == 3">
|
||||
<view class="inline-block ml-20" v-for="(item,index) in spikeList" :key="index"
|
||||
@tap="goDetails(item)">
|
||||
<easy-loadimage
|
||||
:image-src="item.image"
|
||||
:border-src="item.activity_image"
|
||||
width="224rpx"
|
||||
height="224rpx"
|
||||
:borderRadius="imgStyle"></easy-loadimage>
|
||||
<view class="w-222 line1 mt-16 fs-26" :style="[productStyle]"
|
||||
v-if="checkboxInfo.includes(0)">{{item.title}}</view>
|
||||
<view class="flex justify-between items-end mt-16">
|
||||
<view>
|
||||
<baseMoney :money="item.price"
|
||||
symbolSize="24"
|
||||
integerSize="36"
|
||||
decimalSize="36"
|
||||
weight
|
||||
:color="priceColor"
|
||||
v-if="checkboxInfo.includes(2)"></baseMoney>
|
||||
<view class="text-line fs-24 text--w111-999 Regular lh-32rpx"
|
||||
:style="[otPriceColor]" v-if="checkboxInfo.includes(3)"
|
||||
>¥{{item.ot_price.toString().split('.')[1] ? item.ot_price : item.ot_price + '.00'}}</view>
|
||||
</view>
|
||||
<view class="qiang flex-center fs-24"
|
||||
v-if="!showBtn" :style="[btnBgColor]">抢</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countDown from '@/components/countDown';
|
||||
import {
|
||||
getSeckillIndexTime,
|
||||
getSeckillList
|
||||
} from '@/api/activity.js';
|
||||
export default {
|
||||
options: {
|
||||
styleIsolation: 'shared' ,
|
||||
},
|
||||
name: 'seckill',
|
||||
components:{
|
||||
countDown
|
||||
},
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType:{
|
||||
type: String | Number,
|
||||
default:0
|
||||
},
|
||||
pullReset:{
|
||||
type: Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datatime:'',
|
||||
spikeList: [],
|
||||
seckillTimeIndex:0,
|
||||
seckillTime: [],
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
pullReset(val){
|
||||
if(val == 1){
|
||||
this.getSeckillIndexTime();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
boxStyle(){
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
background: this.dataConfig.bottomBgColor.color[0].item,
|
||||
}
|
||||
},
|
||||
boxContentStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
background: `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
contentBox(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `0 0 ${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx`
|
||||
}else{
|
||||
borderRadius = `0 0 ${br} ${br}`
|
||||
}
|
||||
return {
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
/*商品模板*/
|
||||
goodStyleConfig(){
|
||||
return this.dataConfig.goodStyleConfig.tabVal
|
||||
},
|
||||
styleConfig(){
|
||||
return this.dataConfig.styleConfig.tabVal
|
||||
},
|
||||
headerStyle(){
|
||||
let br = `${this.dataConfig.fillet.val * 2}rpx`,
|
||||
borderRadius= '',
|
||||
imgBgUrl = this.dataConfig.imgBgConfig.url;
|
||||
if (this.dataConfig.fillet.type){
|
||||
borderRadius = `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx 0 0`
|
||||
}else{
|
||||
borderRadius = `${br} ${br} 0 0`
|
||||
}
|
||||
return {
|
||||
backgroundImage: this.styleConfig ? 'url(' + imgBgUrl + ')' : `linear-gradient(90deg,${this.dataConfig.headerBgColor.color[0].item} 0%,${this.dataConfig.headerBgColor.color[1].item} 100%)`,
|
||||
borderRadius,
|
||||
|
||||
}
|
||||
},
|
||||
/*标题是文本还是图片*/
|
||||
titleConfig(){
|
||||
return this.dataConfig.titleConfig.tabVal
|
||||
},
|
||||
/*标题文本*/
|
||||
titleTxtConfig(){
|
||||
return this.dataConfig.titleTxtConfig.value
|
||||
},
|
||||
/*标题图片*/
|
||||
titleImg(){
|
||||
return this.styleConfig ? this.titleUrl : this.titleColorUrl
|
||||
},
|
||||
titleColorUrl(){
|
||||
return this.dataConfig.imgColorConfig.url
|
||||
},
|
||||
titleUrl(){
|
||||
return this.dataConfig.imgConfig.url
|
||||
},
|
||||
titleStyle(){
|
||||
return {
|
||||
'font-style': this.dataConfig.titleText.tabVal == 2 ? 'italic' : '',
|
||||
'font-size': `${this.dataConfig.titleNumber.val * 2}rpx`,
|
||||
'font-weight': this.dataConfig.titleText.tabVal == 0 ? 'bold' : '',
|
||||
color: this.dataConfig.titleColor.color[0].item
|
||||
}
|
||||
},
|
||||
/*标题提示文字*/
|
||||
tipsColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.tipsColor.color[0].item : this.dataConfig.tipsColor2.color[0].item
|
||||
}
|
||||
},
|
||||
/*头部按钮文本*/
|
||||
rightBntTxt(){
|
||||
return this.dataConfig.rightBntConfig.value
|
||||
},
|
||||
/*头部按钮样式*/
|
||||
headerBntColor(){
|
||||
return {
|
||||
color: this.styleConfig ? this.dataConfig.headerBntColor.color[0].item : this.dataConfig.headerBntColor2.color[0].item,
|
||||
fontSize: `${this.dataConfig.bntNumber.val * 2}rpx`
|
||||
}
|
||||
},
|
||||
/*商品图片圆角样式*/
|
||||
imgStyle(){
|
||||
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
||||
if (this.dataConfig.filletImg.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
|
||||
}
|
||||
return borderRadius
|
||||
},
|
||||
/*商品名称样式*/
|
||||
productStyle(){
|
||||
return {
|
||||
color: this.dataConfig.goodsNameColor.color[0].item,
|
||||
fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : 'bold'
|
||||
}
|
||||
},
|
||||
/* 展示信息 */
|
||||
checkboxInfo(){
|
||||
return this.dataConfig.checkboxInfo.type
|
||||
},
|
||||
/* 价格颜色 */
|
||||
priceColor(){
|
||||
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.seckillPriceColor.color[0].item : 'var(--view-theme)'
|
||||
},
|
||||
/* 原价颜色 */
|
||||
otPriceColor(){
|
||||
return {
|
||||
color: this.dataConfig.goodsPriceColor.color[0].item
|
||||
}
|
||||
},
|
||||
showBtn(){
|
||||
return this.dataConfig.seckillConfig.tabVal
|
||||
},
|
||||
/* 按钮颜色 */
|
||||
btnBgColor(){
|
||||
return {
|
||||
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.goodsBntColor.color[1].item} 0%,${this.dataConfig.goodsBntColor.color[0].item} 100%)`: 'linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%)',
|
||||
color: this.dataConfig.goodsBntTxtColor.color[0].item
|
||||
}
|
||||
},
|
||||
progressBgColor(){
|
||||
return this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.progressColor.color[0].item} 0%,${this.dataConfig.progressColor.color[1].item} 100%)`: 'linear-gradient(45deg, var(--view-gradient) 0%, var(--view-theme) 100%)'
|
||||
},
|
||||
/*倒计时背景色*/
|
||||
numberBgColor(){
|
||||
return this.styleConfig ? `linear-gradient(90deg, ${this.dataConfig.numberBgColor.color[0].item}, ${this.dataConfig.numberBgColor.color[1].item})` : this.dataConfig.numberBgColor2.color[0].item
|
||||
},
|
||||
numberColor(){
|
||||
return this.styleConfig ? this.dataConfig.numberColor.color[0].item : this.dataConfig.numberColor2.color[0].item
|
||||
},
|
||||
dotColor(){
|
||||
return this.styleConfig ? this.dataConfig.numberBgColor.color[0].item : this.dataConfig.numberBgColor2.color[0].item
|
||||
},
|
||||
/*商品数量*/
|
||||
numberConfig(){
|
||||
return this.dataConfig.numberConfig.val
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSeckillIndexTime();
|
||||
},
|
||||
methods: {
|
||||
goPage(url){
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
goDetails(item){
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/goods_details/index?id=' + item.id + '&type=1&time_id=' + this.timeList[this.active].id
|
||||
})
|
||||
},
|
||||
getSeckillIndexTime() {
|
||||
let limit = this.$config.LIMIT;
|
||||
let params = {
|
||||
page: 1,
|
||||
limit: this.numberConfig>=limit?limit:this.numberConfig,
|
||||
type: 'index'
|
||||
}
|
||||
getSeckillIndexTime().then(res => {
|
||||
this.timeList = res.data.seckillTime;
|
||||
this.active = res.data.seckillTimeIndex;
|
||||
if (res.data.seckillTimeIndex === -1) {
|
||||
return;
|
||||
}
|
||||
this.datatime = res.data.seckillTime[res.data.seckillTimeIndex].stop
|
||||
let id = res.data.seckillTime[res.data.seckillTimeIndex].id
|
||||
getSeckillList(id, params).then(({data}) => {
|
||||
this.spikeList = data
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Regular{
|
||||
font-family: 'Regular';
|
||||
}
|
||||
::v-deep .styleAll{
|
||||
padding: 0 8rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.bg-cover{
|
||||
background-size: cover;
|
||||
}
|
||||
.item ~ .item{
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.progress{
|
||||
width:240rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: rgba(253, 240, 237, 1);
|
||||
.active{
|
||||
height: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(45deg, #FF7931 0%, #E93323 100%);
|
||||
}
|
||||
.lightning{
|
||||
position: absolute;
|
||||
top: -2rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
.price-box{
|
||||
width: 150rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(45deg, var(--view-gradient) 0%, var(--view-theme) 100%);
|
||||
border-radius: 0px 8rpx 8rpx 0px;
|
||||
margin: 20rpx 0 0 10rpx;
|
||||
.shandian{
|
||||
position: absolute;
|
||||
width: 24rpx;
|
||||
height: 44rpx;
|
||||
top: 0;
|
||||
left: -10rpx;
|
||||
}
|
||||
}
|
||||
.qiang{
|
||||
width: 66rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(45deg, #FF7931 0%, #E93323 100%);
|
||||
border-radius: 0px 22rpx 22rpx 0px;
|
||||
position: relative;
|
||||
&:before{
|
||||
content:'';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -10rpx;
|
||||
width: 24rpx;
|
||||
height: 40rpx;
|
||||
background-image: url('@/static/img/shandian.png');
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
234
view/uniapp/pages/index/components/signIn.vue
Normal file
234
view/uniapp/pages/index/components/signIn.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<view :style="[signWrapStyle]" v-if="!dataConfig.isHide">
|
||||
<view class="signIn" :style="[signStyle]">
|
||||
<view v-if="dataConfig.styleConfig.tabVal" class="text-wrap acea-row row-middle">
|
||||
<image src="../../../static/images/sign-icon-04.png" mode="widthFix" class="image"></image>
|
||||
<view class="text">
|
||||
<view class="name-wrap acea-row row-middle">
|
||||
<view class="name">签到立即获取</view>
|
||||
<view class="num acea-row row-middle" :style="[numStyle]">
|
||||
<view class="inner" :class="{ opacity: !dataConfig.toneConfig.tabVal }">
|
||||
<image src="../../../static/images/sign-icon-01.png" mode="widthFix" class="icon"></image>
|
||||
+{{ sign_give_point }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>连续签到{{nextContinuousSignRewardList.days||0}}天，额外活动{{nextContinuousSignRewardList.point}}积分</view>
|
||||
</view>
|
||||
<view class="button" :style="[buttonStyle]" @click="goUserSgin">立即签到</view>
|
||||
</view>
|
||||
<view v-else class="week-wrap acea-row row-middle">
|
||||
<view class="week acea-row">
|
||||
<view v-for="(item, index) in signList" :key="index" class="item acea-row row-column row-center-wrapper">
|
||||
<image v-if="item.is_sign" src="../../../static/images/sign-icon-03.png" mode="widthFix" class="image"></image>
|
||||
<image v-else-if="item.type == 1" src="../../../static/images/sign-icon-01.png" mode="widthFix" class="image"></image>
|
||||
<image v-else-if="item.type == 2" src="../../../static/images/sign-icon-02.png" mode="widthFix" class="image"></image>
|
||||
<view>周{{ index | weekFormat }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="button" :style="[buttonStyle]" @click="goUserSgin">签到</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getSign
|
||||
} from '@/api/api.js';
|
||||
export default {
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
weekFormat: function(value) {
|
||||
return ['一', '二', '三', '四', '五', '六', '日'][value];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
today: 0,
|
||||
signList: [],
|
||||
sign_give_point: 0,
|
||||
nextContinuousSignRewardList: {
|
||||
days: 0,
|
||||
point: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
buttonStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.bntBgColor.color[0].item} 0%, ${this.dataConfig.bntBgColor.color[1].item} 100%)`;
|
||||
styleObject['color'] = this.dataConfig.bntTxtColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
signStyle() {
|
||||
let color = this.dataConfig.styleConfig.tabVal ? this.dataConfig.moduleColor.color : this.dataConfig.moduleColor2.color;
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
'background': `linear-gradient(270deg, ${color[0].item} 0%, ${color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
signWrapStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
numStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['background'] = this.dataConfig.labelBgColor.color[0].item;
|
||||
styleObject['color'] = this.dataConfig.labelTxtColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const t = new Date();
|
||||
const d = t.getDay();
|
||||
this.today = d;
|
||||
this.getSign();
|
||||
},
|
||||
methods: {
|
||||
goUserSgin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/user_sgin/index'
|
||||
})
|
||||
},
|
||||
getSign() {
|
||||
getSign().then(res => {
|
||||
if(res.data.nextContinuousSignRewardList.length){
|
||||
this.nextContinuousSignRewardList = res.data.nextContinuousSignRewardList[0];
|
||||
}
|
||||
this.sign_give_point = res.data.sign_give_point;
|
||||
this.signList = res.data.signList[0];
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.signIn {
|
||||
padding: 24rpx;
|
||||
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.week-wrap {
|
||||
height: 156rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(to right, #FFE8F5, #F1FBFD);
|
||||
|
||||
.week {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
color: #999999;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 48rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 88rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
margin: 0 20rpx;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 48rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
height: 140rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.image {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.name-wrap {
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.num {
|
||||
border-radius: 16rpx;
|
||||
margin-left: 4rpx;
|
||||
background: var(--view-theme);
|
||||
font-size: 20rpx;
|
||||
line-height: 32rpx;
|
||||
color: var(--view-theme);
|
||||
|
||||
.inner {
|
||||
height: 32rpx;
|
||||
padding: 0 6rpx 0 8rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.opacity {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 140rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 26rpx;
|
||||
margin: 0 20rpx;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 52rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
129
view/uniapp/pages/index/components/skeletons.vue
Normal file
129
view/uniapp/pages/index/components/skeletons.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="skeleton">
|
||||
<!-- #ifdef MP || APP -->
|
||||
<view class="blank"></view>
|
||||
<!-- #endif -->
|
||||
<view class="header acea-row row-between-wrapper">
|
||||
<view class="left"></view>
|
||||
<view class="right"></view>
|
||||
</view>
|
||||
<view class="tabNav acea-row row-between-wrapper">
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
</view>
|
||||
<view class="swipers"></view>
|
||||
<view class="nav acea-row row-between-wrapper">
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
</view>
|
||||
<view class="nav acea-row row-between-wrapper">
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
</view>
|
||||
<view class="header acea-row row-between-wrapper">
|
||||
<view class="left"></view>
|
||||
<view class="right"></view>
|
||||
</view>
|
||||
<view class="coupon acea-row row-between-wrapper">
|
||||
<view class="item"></view>
|
||||
<view class="item"></view>
|
||||
</view>
|
||||
<view class="goodList">
|
||||
<view class="item acea-row row-between row-top">
|
||||
<view class="pictrue"></view>
|
||||
<view class="text">
|
||||
<view class="name"></view>
|
||||
<view class="money"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.skeleton{
|
||||
padding: 0 30rpx;
|
||||
.blank{
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
.header{
|
||||
.left{
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.right{
|
||||
width: 460rpx;
|
||||
height: 50rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
.tabNav{
|
||||
margin-top: 20rpx;
|
||||
.item{
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
.swipers{
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.nav{
|
||||
margin: 20rpx 0;
|
||||
.item{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
.coupon{
|
||||
margin-top: 20rpx;
|
||||
.item{
|
||||
width: 330rpx;
|
||||
height: 120rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
.goodList{
|
||||
margin-top: 20rpx;
|
||||
.item{
|
||||
.pictrue{
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.text{
|
||||
.name{
|
||||
width: 440rpx;
|
||||
height: 76rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.money{
|
||||
width: 100rpx;
|
||||
height: 34rpx;
|
||||
background-color: #e9e9e9;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
306
view/uniapp/pages/index/components/swiperBg.vue
Normal file
306
view/uniapp/pages/index/components/swiperBg.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<!-- 带背景轮播图 -->
|
||||
<view class="swiperBg" :style="[swiperBgStyle]" v-if="!dataConfig.isHide">
|
||||
<template v-if="dataConfig.swiperConfig.list.length">
|
||||
<view class="colorBg" :style="[colorBgStyle]"></view>
|
||||
<view class="swiper">
|
||||
<swiper :style="'height:'+ imageH +'rpx;'" :autoplay="true" :previous-margin="swiperMargin" :next-margin="swiperMargin" :circular="circular" :interval="interval" :duration="duration"
|
||||
@change="bannerfun" v-if="imageH">
|
||||
<swiper-item v-for="(item,index) in dataConfig.swiperConfig.list" :key="index">
|
||||
<view @click="goDetail(item)" class="swiper-item" :class="{ active: active == index }">
|
||||
<image :src="item.img" mode="aspectFill" class="image" :style="[imageStyle]"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="noPic" v-else>图片加载中...</view>
|
||||
<view class="dot acea-row" :style="[dotStyle]">
|
||||
<view class="progress" v-if="dataConfig.docConfig.tabVal == 2" :style="[progressWidth,dotItemStyle]">
|
||||
<view class="inner" :style="[progressValue,dotItemActiveStyle]"></view>
|
||||
</view>
|
||||
<view class="acea-row" :class="{ small: dataConfig.docConfig.tabVal == 1, line: dataConfig.docConfig.tabVal == 3 }" v-else>
|
||||
<view class="dot-item" v-for="(item, index) in dataConfig.swiperConfig.list" :key="index" :class="{ active: active == index }"
|
||||
:style="[active == index ? dotItemActiveStyle : dotItemStyle]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'swiperBg',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
imgUrls: [], //图片轮播数据
|
||||
bgColor: '', //轮播背景颜色
|
||||
marginTop: 0, //组件上边距
|
||||
paddinglr: 0, //轮播左右边距
|
||||
docConfig: 0, //指示点样式
|
||||
imgConfig: 0, //是否为圆角
|
||||
imageH: 0,
|
||||
isColor: 0,
|
||||
txtStyle: 0,
|
||||
dotColor: '',
|
||||
current: 1, //数字指示器当前
|
||||
active: 0, //一般指示器当前
|
||||
swiperMargin: '',
|
||||
swiperMargin: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
swiperBgStyle() {
|
||||
return {
|
||||
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
};
|
||||
},
|
||||
colorBgStyle() {
|
||||
let styleObject = {
|
||||
'background': this.dataConfig.bgColor.color[0].item,
|
||||
};
|
||||
if (this.dataConfig.styleConfig.tabVal == 1) {
|
||||
styleObject['height'] = '50%';
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
imageStyle() {
|
||||
return {
|
||||
borderRadius: `${this.dataConfig.filletImg.val * 2}rpx`,
|
||||
};
|
||||
},
|
||||
dotStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.docPosition.tabVal) {
|
||||
styleObject['justify-content'] = this.dataConfig.docPosition.tabVal == 1 ? 'center' : 'flex-end';
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
dotItemStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['background'] = this.dataConfig.dotBgColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
dotItemActiveStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['background'] = this.dataConfig.dotColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
progressWidth() {
|
||||
return {
|
||||
width: `${this.dataConfig.swiperConfig.list.length * 20}rpx`,
|
||||
};
|
||||
},
|
||||
progressValue() {
|
||||
return {
|
||||
width: `${this.current / this.dataConfig.swiperConfig.list.length * 100}%`,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
imageH(nVal, oVal) {
|
||||
let self = this
|
||||
this.imageH = nVal
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.imgUrls = this.dataConfig.swiperConfig.list
|
||||
if (this.dataConfig.styleConfig.tabVal == 2) {
|
||||
this.swiperMargin = '55rpx';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.imgUrls.length) {
|
||||
let that = this;
|
||||
this.$nextTick((e) => {
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: (res) => {
|
||||
if (res && res.height > 0) {
|
||||
// that.$set(that, 'imageH',
|
||||
// res.height / res
|
||||
// .width * 750)
|
||||
let height = res.height * ((750 - this.dataConfig.prConfig.val * 4) / res.width)
|
||||
that.$set(that, 'imageH', height);
|
||||
} else {
|
||||
that.$set(that, 'imageH', 375);
|
||||
}
|
||||
},
|
||||
fail: function(error) {
|
||||
that.$set(that, 'imageH', 375);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bannerfun(e) {
|
||||
this.active = e.detail.current;
|
||||
this.current = e.detail.current + 1;
|
||||
},
|
||||
//替换安全域名
|
||||
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.info[0].value;
|
||||
this.$util.JumpPath(urls);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.noPic {
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
background-color: #F0F0F0;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.swiperBg {
|
||||
position: relative;
|
||||
.colorBg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
z-index: 20;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.dot-item {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 16rpx;
|
||||
background: #DDDDDD;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--view-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
.dot-item {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 5rpx;
|
||||
margin-right: 8rpx;
|
||||
|
||||
&.active {
|
||||
width: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
.dot-item {
|
||||
width: 20rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
background: #DDDDDD;
|
||||
|
||||
.inner {
|
||||
width: 33%;
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
background: var(--view-theme);
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale(0.9);
|
||||
transition: 0.3s;
|
||||
|
||||
&.active {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 圆形指示点
|
||||
&.circular {
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 10rpx !important;
|
||||
height: 10rpx !important;
|
||||
background: rgba(0, 0, 0, .4) !important
|
||||
}
|
||||
|
||||
/deep/.uni-swiper-dot-active {
|
||||
background: #fff !important
|
||||
}
|
||||
}
|
||||
|
||||
// 方形指示点
|
||||
&.square {
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 20rpx !important;
|
||||
height: 5rpx !important;
|
||||
border-radius: 3rpx;
|
||||
background: rgba(0, 0, 0, .4) !important
|
||||
}
|
||||
|
||||
/deep/.uni-swiper-dot-active {
|
||||
background: #fff !important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
150
view/uniapp/pages/index/components/swipers.vue
Normal file
150
view/uniapp/pages/index/components/swipers.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<!-- 轮播图 -->
|
||||
<view v-show="!dataConfig.isHide">
|
||||
<view class="swipers" :class="[docConfig?'square':'circular',imgConfig?'':'fillet']" v-if="imgUrls.length && tabConfig" :style="'padding:0 '+lrConfig+'rpx;margin-top:' + mbConfig +'rpx;'">
|
||||
<swiper :style="'height:'+(imageH+10)+'rpx;'" indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval" :duration="duration"
|
||||
indicator-color="#E4E4E4" indicator-active-color="#E93323" :previous-margin="itemEdge+'rpx'" :next-margin="itemEdge+'rpx'" :current="swiperCur"
|
||||
@change="swiperChange">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{active:index == swiperCur}">
|
||||
<navigator :url='item.info[1].title' class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
|
||||
<image :src="item.img" class="slide-image" mode="widthFix"></image>
|
||||
</navigator>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view :style="'margin-top:' + mbConfig +'rpx;'" v-if="!tabConfig">
|
||||
<navigator :url="item.info[1].title" hover-class="none" class="advert" :class="imgConfig?'':'fillet'" :style="'padding:0 '+lrConfig+'rpx;'" v-for="(item,index) in imgUrls" :key="index">
|
||||
<image :src="item.img"></image>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'swiper',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType:{
|
||||
type: String | Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 2500,
|
||||
duration: 500,
|
||||
swiperCur: 0,
|
||||
imgUrls: [],
|
||||
docConfig: this.dataConfig.docConfig.type,
|
||||
imgConfig: this.dataConfig.imgConfig.type,
|
||||
itemEdge: this.dataConfig.itemEdge.val,
|
||||
lrConfig: this.dataConfig.lrConfig.val,
|
||||
mbConfig: this.dataConfig.mbConfig.val,
|
||||
tabConfig: this.dataConfig.tabConfig.tabVal,
|
||||
imageH: 0
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
imageH(nVal,oVal){
|
||||
this.imageH = nVal
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.imgUrls = this.dataConfig.swiperConfig.list
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: function(res) {
|
||||
that.$set(that, 'imageH', res.height);
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// swiper
|
||||
swiperChange(e) {
|
||||
this.swiperCur = e.detail.current
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.advert{
|
||||
box-sizing: border-box;
|
||||
image{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.swipers {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
/* 设置圆角 */
|
||||
&.fillet {
|
||||
border-radius: 10rpx;
|
||||
|
||||
image {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
swiper,
|
||||
.swiper-item,
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
image{
|
||||
transform: scale(.93);
|
||||
transition: all .6s ease;
|
||||
}
|
||||
swiper-item.active {
|
||||
image {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
// 圆形指示点
|
||||
&.circular{
|
||||
/deep/.uni-swiper-dot{
|
||||
width: 10rpx!important;
|
||||
height: 10rpx!important;
|
||||
background: rgba(0,0,0,.4)!important
|
||||
}
|
||||
/deep/.uni-swiper-dot-active{
|
||||
background: #fff!important
|
||||
}
|
||||
}
|
||||
// 方形指示点
|
||||
&.square{
|
||||
/deep/.uni-swiper-dot{
|
||||
width: 20rpx!important;
|
||||
height: 5rpx!important;
|
||||
border-radius: 3rpx;
|
||||
background: rgba(0,0,0,.4)!important
|
||||
}
|
||||
/deep/.uni-swiper-dot-active{
|
||||
background: #fff!important
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
329
view/uniapp/pages/index/components/tabNav.vue
Normal file
329
view/uniapp/pages/index/components/tabNav.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<!-- 商品分类 -->
|
||||
<view v-if="!dataConfig.isHide">
|
||||
<view :class="{
|
||||
tabNav1: dataConfig.styleConfig.tabVal == 0,
|
||||
tabNav2: dataConfig.styleConfig.tabVal == 1,
|
||||
tabNav3: dataConfig.styleConfig.tabVal == 2,
|
||||
isFixed: isFixed
|
||||
}">
|
||||
<view :style="[tabNavStyle]">
|
||||
<view :style="[tabNavBgColor]">
|
||||
<scroll-view scroll-x="true" :scroll-left="tabLeft" scroll-with-animation>
|
||||
<view class="list acea-row row-middle">
|
||||
<view v-for="(item, index) in tabListConfig" :key="index" :class="{ on: index == tabClick }"
|
||||
:style="[index == tabClick ? textStyle : textNormalStyle]" class="item" @click="longClick(item, index)">
|
||||
{{ item.text.val }}
|
||||
<text v-if="dataConfig.styleConfig.tabVal != 2" class="line" :style="[lineStyle]"></text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isFixed" class="h-80"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCategoryList
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
getCategoryVersion
|
||||
} from '@/api/api.js';
|
||||
export default {
|
||||
name: 'tabNav',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean | String | Number,
|
||||
default: false
|
||||
},
|
||||
fromType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabTitle: [],
|
||||
tabLeft: 0,
|
||||
isWidth: 0, //每个导航栏占位
|
||||
tabClick: 0, //导航栏被点击
|
||||
isLeft: 0, //导航栏下划线位置
|
||||
fixedTop: 0,
|
||||
isTop: 0,
|
||||
navHeight: 45,
|
||||
tabList: 45,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
lineStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
switch (this.dataConfig.styleConfig.tabVal) {
|
||||
case 0:
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.decorateColor.color[0].item} 0%, ${this.dataConfig.decorateColor.color[1].item} 100%)`;
|
||||
break;
|
||||
case 1:
|
||||
styleObject['border-bottom-color'] = this.dataConfig.decorateColor2.color[0].item;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
textStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
switch (this.dataConfig.styleConfig.tabVal) {
|
||||
case 0:
|
||||
styleObject['color'] = this.dataConfig.textColor.color[0].item;
|
||||
styleObject['fontSize'] = this.dataConfig.activeFontSize?.val * 2 + 'rpx';
|
||||
break;
|
||||
case 1:
|
||||
styleObject['color'] = this.dataConfig.textColor2.color[0].item;
|
||||
styleObject['fontSize'] = this.dataConfig.activeFontSize?.val * 2 + 'rpx';
|
||||
break;
|
||||
case 2:
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.decorateColor.color[0].item} 0%, ${this.dataConfig.decorateColor.color[1].item} 100%)`;
|
||||
styleObject['color'] = this.dataConfig.textColor3.color[0].item;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
textNormalStyle(){
|
||||
return {
|
||||
'font-size': this.dataConfig.fontSize.val * 2 + 'rpx',
|
||||
'color': this.dataConfig.nameColor.color[0].item
|
||||
|
||||
}
|
||||
},
|
||||
tabNavBgColor() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
tabNavStyle() {
|
||||
return {
|
||||
'background-color': this.dataConfig.bottomBgColor.color[0].item,
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
};
|
||||
},
|
||||
tabListConfig() {
|
||||
let tabList = this.dataConfig.tabListConfig.list;
|
||||
tabList.unshift({
|
||||
classPage: {
|
||||
id: 0
|
||||
},
|
||||
dataType: {
|
||||
tabVal: 0
|
||||
},
|
||||
microPage: {
|
||||
id: 0
|
||||
},
|
||||
text: {
|
||||
val: '首页'
|
||||
},
|
||||
});
|
||||
return tabList
|
||||
},
|
||||
},
|
||||
created() {
|
||||
let that = this;
|
||||
that.getAllCategory();
|
||||
// 获取设备宽度
|
||||
uni.getSystemInfo({
|
||||
success(e) {
|
||||
that.isWidth = e.windowWidth / 5
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 导航栏点击
|
||||
longClick(item, index) {
|
||||
if (this.tabTitle.length > 5) {
|
||||
this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
|
||||
}
|
||||
this.tabClick = index //设置导航点击了哪一个
|
||||
this.isLeft = index * this.isWidth //设置下划线位置
|
||||
let data = {
|
||||
type: item.dataType.tabVal, //0 商品分类 1 微页面
|
||||
microPage: item.microPage.id,
|
||||
classPage: item.classPage.id,
|
||||
};
|
||||
this.$emit('bindSortId', data);
|
||||
},
|
||||
setCategory(data) {
|
||||
data.unshift({
|
||||
"id": -99,
|
||||
'cate_name': '首页'
|
||||
})
|
||||
this.tabTitle = data;
|
||||
// #ifdef MP || APP-PLUS
|
||||
this.isTop = (uni.getWindowInfo().statusBarHeight + 43) + 'px'
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.isTop = 0
|
||||
// #endif
|
||||
},
|
||||
getCategory() {
|
||||
getCategoryList().then(res => {
|
||||
uni.setStorageSync('category', JSON.stringify(res.data));
|
||||
this.setCategory(res.data);
|
||||
})
|
||||
},
|
||||
// 获取导航
|
||||
getAllCategory: function() {
|
||||
let that = this;
|
||||
let category = uni.getStorageSync('category');
|
||||
if (category) {
|
||||
getCategoryVersion().then(res => {
|
||||
let categoryVersion = uni.getStorageSync('categoryVersion');
|
||||
if (res.data.version === categoryVersion) {
|
||||
this.setCategory(JSON.parse(category));
|
||||
} else {
|
||||
uni.setStorageSync('categoryVersion', res.data.version);
|
||||
this.getCategory();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getCategory();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.isFixed {
|
||||
z-index: 45;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.tabNav1 {
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
height: 80rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
height: 80rpx;
|
||||
margin: 0 55rpx 0 0;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
color: #333333;
|
||||
|
||||
&:last-child {
|
||||
margin: 0 24rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.on {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 22rpx;
|
||||
left: 50%;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 8rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabNav2 {
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
height: 80rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
height: 80rpx;
|
||||
margin: 0 55rpx 0 0;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
color: #333333;
|
||||
|
||||
&:last-child {
|
||||
margin: 0 24rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.on {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: var(--view-theme);
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
left: 50%;
|
||||
z-index: -1;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border: 4rpx solid var(--view-theme);
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabNav3 {
|
||||
.list {
|
||||
flex-wrap: nowrap;
|
||||
height: 80rpx;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 0 15rpx 0 0;
|
||||
font-size: 28rpx;
|
||||
line-height: 80rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.on {
|
||||
height: 48rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
line-height: 48rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
view/uniapp/pages/index/components/titles.vue
Normal file
113
view/uniapp/pages/index/components/titles.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<!-- 标题 -->
|
||||
<view v-if="!dataConfig.isHide" :style="[titleWrapperStyle]">
|
||||
<view :style="[titleWrapStyle]">
|
||||
<view @click="goLink" class="title acea-row row-middle row-between" :style="[titleLocation]">
|
||||
<view :style="[titleStyle]">{{dataConfig.titleConfig.value}}</view>
|
||||
<view class="more" v-if="!dataConfig.buttonConfig.tabVal" :style="[moreStyle]">
|
||||
{{dataConfig.titleConfigRight.value}}
|
||||
<text class="iconfont icon-ic_rightarrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'titles',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
titleWrapperStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
titleWrapStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.titleColor.color[0].item} 0%, ${this.dataConfig.titleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
titleStyle() {
|
||||
let style = {
|
||||
'font-size': `${this.dataConfig.fontSize.val * 2}rpx`,
|
||||
'color': this.dataConfig.themeColor.color[0].item,
|
||||
};
|
||||
switch (this.dataConfig.textStyle.tabVal) {
|
||||
case 1:
|
||||
style['font-style'] = 'italic';
|
||||
break;
|
||||
case 2:
|
||||
style['font-weight'] = 'bold';
|
||||
break;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
titleLocation() {
|
||||
if(this.dataConfig.buttonConfig.tabVal){
|
||||
let style = {}
|
||||
switch (this.dataConfig.textPosition.tabVal) {
|
||||
case 1:
|
||||
style['justify-content'] = 'center';
|
||||
break;
|
||||
case 2:
|
||||
style['justify-content'] = 'flex-end';
|
||||
break;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
moreStyle() {
|
||||
return {
|
||||
'font-size': `${this.dataConfig.buttonText.val * 2}rpx`,
|
||||
'color': this.dataConfig.buttonColor.color[0].item,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goLink() {
|
||||
this.$util.JumpPath(this.dataConfig.linkConfig.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.title {
|
||||
justify-content: space-between;
|
||||
padding: 26rpx 24rpx;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
color: #333333;
|
||||
|
||||
.more {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
552
view/uniapp/pages/index/components/userInfor.vue
Normal file
552
view/uniapp/pages/index/components/userInfor.vue
Normal file
@@ -0,0 +1,552 @@
|
||||
<template>
|
||||
<view :style="[componentStyle]" v-if="!dataConfig.isHide">
|
||||
<view class="userInfor" :style="[userInfoStyle]" @click="goLogin">
|
||||
<view class="left acea-row row-middle">
|
||||
<view class="pictrue acea-row row-center-wrapper">
|
||||
<image :src="diyInfo.avatar" v-if="diyInfo.avatar && isLogin"></image>
|
||||
<image v-if="!diyInfo.avatar && isLogin" :src="dataConfig.logoConfig.url || '@/static/images/f.png'"></image>
|
||||
<image v-if="!isLogin" :src="dataConfig.logoConfig.url || '@/static/images/f.png'"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view v-if="!isLogin" class="name">请点击登录</view>
|
||||
<view v-else class="name acea-row row-middle">
|
||||
<view class="nameCon line1">{{ diyInfo.nickname }}</view>
|
||||
<view class="lable" v-if="diyInfo.level>0" :style="[lableStyle]">
|
||||
<text class="iconfont icon-ic_crown1"></text>
|
||||
{{ diyInfo.vip_name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="acea-row row-middle" v-if="isLogin && diyInfo.level>0">
|
||||
<view class="progress" :style="[progressStyle]">
|
||||
<view class="bg-reds" :style="[bgRedsStyle]">
|
||||
</view>
|
||||
</view>
|
||||
<view class="percent">{{diyInfo.exp?diyInfo.exp.split('.')[0]:0}}/{{diyInfo.next_exp || 0}}</view>
|
||||
</view>
|
||||
<view class="phone acea-row row-middle" v-if="isLogin && diyInfo.level<=0 && diyInfo.phone">
|
||||
<text>{{diyInfo.phone}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isLogin" class="right acea-row row-bottom">
|
||||
<template v-if="dataConfig.styleConfig.tabVal == 1">
|
||||
<view class="item" v-if="checkType.indexOf(1) > -1" @click.stop="goIntegral">
|
||||
<view class="num">{{diyInfo.integral||0}}</view>
|
||||
<view>积分</view>
|
||||
</view>
|
||||
<view class="item" v-if="checkType.indexOf(2) > -1" @click.stop="goMoney">
|
||||
<view class="num">{{diyInfo.now_money||0}}</view>
|
||||
<view>余额</view>
|
||||
</view>
|
||||
<view class="item" v-if="checkType.indexOf(0) > -1" @click.stop="goCoupon">
|
||||
<view class="num">{{diyInfo.coupon_num||0}}</view>
|
||||
<view>优惠券</view>
|
||||
</view>
|
||||
<view class="item" v-if="checkType.indexOf(4) > -1" @click.stop="goCollection">
|
||||
<view class="num">{{diyInfo.collectCount||0}}</view>
|
||||
<view>收藏</view>
|
||||
</view>
|
||||
<view class="item" v-if="checkType.indexOf(5) > -1" @click.stop="goVisit">
|
||||
<view class="num">{{diyInfo.visit_num||0}}</view>
|
||||
<view>浏览</view>
|
||||
</view>
|
||||
<view class="item" v-if="(checkType.indexOf(3) > -1) || !isLogin" @click.stop="tapQrCode">
|
||||
<view class="iconfont icon-a-ic_QRcode"></view>
|
||||
<view>会员码</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="item" v-if="dataConfig.styleConfig.tabVal == 0 && checkType.indexOf(3) != -1" @click.stop="tapQrCode">
|
||||
<view class="iconfont icon-a-ic_QRcode"></view>
|
||||
<view>会员码</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="dataConfig.styleConfig.tabVal == 0 && isLogin" class="bottom acea-row row-middle">
|
||||
<view v-if="checkType.indexOf(1) != -1" class="item" @click.stop="goIntegral">
|
||||
<view class="num">{{diyInfo.integral||2}}</view>
|
||||
<view>积分</view>
|
||||
</view>
|
||||
<view v-if="checkType.indexOf(2) != -1" class="item" @click.stop="goMoney">
|
||||
<view class="num">{{diyInfo.now_money||6}}</view>
|
||||
<view>余额</view>
|
||||
</view>
|
||||
<view v-if="checkType.indexOf(0) != -1" class="item" @click.stop="goCoupon">
|
||||
<view class="num">{{diyInfo.coupon_num||0}}</view>
|
||||
<view>优惠券</view>
|
||||
</view>
|
||||
<view v-if="checkType.indexOf(4) != -1" class="item" @click.stop="goCollection">
|
||||
<view class="num">{{diyInfo.collectCount||0}}</view>
|
||||
<view>收藏</view>
|
||||
</view>
|
||||
<view v-if="checkType.indexOf(5) != -1" class="item" @click.stop="goVisit">
|
||||
<view class="num">{{diyInfo.visit_num||0}}</view>
|
||||
<view>浏览</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="codePopup" :style="colorStyle" v-show="isCode">
|
||||
<view class="header acea-row row-between-wrapper">
|
||||
<view class="title" :class="{'on': codeIndex == index,'onLeft':codeIndex == 1}" v-for="(item, index) in codeList" :key="index" @click="tapCode(index)">{{item.name}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="acea-row row-center-wrapper">
|
||||
<w-barcode :options="config.bar"></w-barcode>
|
||||
</view>
|
||||
<view class="acea-row row-center-wrapper" style="margin-top: 35rpx;">
|
||||
<w-qrcode :options="config.qrc" @generate="hello"></w-qrcode>
|
||||
</view>
|
||||
<view class="codeNum">{{config.bar.code}}</view>
|
||||
<view class="tip">如遇到扫码失败请将屏幕调至最亮重新扫码</view>
|
||||
</view>
|
||||
<view class="iconfont icon-guanbi2" @click="closeCode"></view>
|
||||
</view> -->
|
||||
<!-- <view class="mark" v-if="isCode"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colors from "@/mixins/color";
|
||||
import {
|
||||
diyUserInfo
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
getlevelInfo,
|
||||
getRandCode
|
||||
} from '@/api/user.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex';
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['isLogin']),
|
||||
lableStyle() {
|
||||
let styleObject = {
|
||||
'background': this.colorToRgba(this.currentLevelColor, 0.2),
|
||||
'color': this.currentLevelColor,
|
||||
};
|
||||
return styleObject;
|
||||
},
|
||||
componentStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
progressStyle() {
|
||||
let styleObject = {};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['background'] = this.dataConfig.progressBgColor.color[0].item;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
bgRedsStyle() {
|
||||
let diyInfo = this.diyInfo;
|
||||
let styleObject = {
|
||||
'width': `${diyInfo.exp>diyInfo.next_exp?100:(this.$util.$h.Div(parseInt(diyInfo.exp), diyInfo.next_exp)*100 >=5? this.$util.$h.Div(parseInt(diyInfo.exp), diyInfo.next_exp)*100:5)}%`,
|
||||
};
|
||||
if (this.dataConfig.toneConfig.tabVal) {
|
||||
styleObject['background'] = `linear-gradient(90deg, ${this.dataConfig.progressColor.color[0].item} 0%, ${this.dataConfig.progressColor.color[1].item} 100%)`;
|
||||
}
|
||||
return styleObject;
|
||||
},
|
||||
userInfoStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'border-radius': borderRadius,
|
||||
'background': `linear-gradient(90deg, ${this.dataConfig.moduleColor.color[0].item} 0%, ${this.dataConfig.moduleColor.color[1].item} 100%)`,
|
||||
};
|
||||
},
|
||||
},
|
||||
name: 'userInfor',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
bar: {
|
||||
code: '',
|
||||
color: ['#000'],
|
||||
bgColor: '#FFFFFF', // 背景色
|
||||
width: 480, // 宽度
|
||||
height: 110 // 高度
|
||||
},
|
||||
qrc: {
|
||||
code: '',
|
||||
size: 380, // 二维码大小
|
||||
level: 3, //等级 0～4
|
||||
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
||||
border: {
|
||||
color: ['#eee', '#eee'], //边框颜色支持渐变色
|
||||
lineWidth: 3, //边框宽度
|
||||
},
|
||||
// img: '/static/logo.png', //图片
|
||||
// iconSize: 40, //二维码图标的大小
|
||||
color: ['#333', '#333'], //边框颜色支持渐变色
|
||||
}
|
||||
},
|
||||
codeList: [{
|
||||
name: '会员码'
|
||||
}, {
|
||||
name: '付款码'
|
||||
}],
|
||||
codeIndex: 0,
|
||||
isCode: false,
|
||||
bgColor: '',
|
||||
textColor: '',
|
||||
progressColor: this.dataConfig.progressColor.color,
|
||||
mbCongfig: 0,
|
||||
prConfig: 0, //背景边距
|
||||
itemStyle: 0,
|
||||
checkType: this.dataConfig.checkboxInfo.type,
|
||||
diyInfo: {},
|
||||
currentLevelColor: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.isLogin) {
|
||||
this.getDiyUserInfo();
|
||||
this.getlevelInfo();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getDiyUserInfo();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hello(res) {
|
||||
// console.log(321,res)
|
||||
},
|
||||
getCode() {
|
||||
getRandCode().then(res => {
|
||||
let code = res.data.code;
|
||||
this.config.bar.code = code;
|
||||
this.config.qrc.code = code;
|
||||
}).catch(err => {
|
||||
return this.$util.Tips(err);
|
||||
})
|
||||
},
|
||||
tapQrCode() {
|
||||
// this.isCode = true;
|
||||
// this.codeIndex = 0;
|
||||
// this.$nextTick(function() {
|
||||
// let code = this.diyInfo.bar_code;
|
||||
// this.config.bar.code = code;
|
||||
// this.config.qrc.code = code;
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/user_member_code/index'
|
||||
})
|
||||
},
|
||||
closeCode() {
|
||||
this.isCode = false
|
||||
this.isextension = false
|
||||
},
|
||||
tapCode(index) {
|
||||
this.codeIndex = index;
|
||||
if (index == 1) {
|
||||
this.getCode();
|
||||
} else {
|
||||
let code = this.diyInfo.bar_code;
|
||||
this.config.bar.code = code;
|
||||
this.config.qrc.code = code;
|
||||
}
|
||||
},
|
||||
goIntegral() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/user_integral/index'
|
||||
})
|
||||
},
|
||||
goMoney() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/user_money/index'
|
||||
})
|
||||
},
|
||||
goCollection() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/user_goods_collection/index'
|
||||
})
|
||||
},
|
||||
goVisit() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/visit_list/index'
|
||||
})
|
||||
},
|
||||
goCoupon() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/user_coupon/index'
|
||||
})
|
||||
},
|
||||
goLogin() {
|
||||
if (!this.isLogin) {
|
||||
this.$emit('changeLogin');
|
||||
}
|
||||
},
|
||||
getDiyUserInfo() {
|
||||
diyUserInfo().then(res => {
|
||||
this.diyInfo = res.data;
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
getlevelInfo() {
|
||||
getlevelInfo().then(res => {
|
||||
const {
|
||||
level_info,
|
||||
level_list
|
||||
} = res.data;
|
||||
const currentLevel = level_list.find(item => item.grade == level_info.grade);
|
||||
if (currentLevel) {
|
||||
this.currentLevelColor = currentLevel.color;
|
||||
}
|
||||
});
|
||||
},
|
||||
colorToRgba(str, n) {
|
||||
// 十六进制颜色值的正则表达式
|
||||
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||
let sColor = str.toLowerCase();
|
||||
// 十六进制颜色转换为RGB格式
|
||||
if (sColor && reg.test(sColor)) {
|
||||
if (sColor.length === 4) {
|
||||
let sColorNew = '#';
|
||||
for (let i = 1; i < 4; i += 1) {
|
||||
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
|
||||
}
|
||||
sColor = sColorNew;
|
||||
}
|
||||
// 处理六位颜色值
|
||||
const sColorChange = [];
|
||||
for (let k = 1; k < 7; k += 2) {
|
||||
sColorChange.push(parseInt(`0x${sColor.slice(k, k + 2)}`, 16));
|
||||
}
|
||||
return `rgba(${sColorChange.join(',')}, ${n})`;
|
||||
}
|
||||
return sColor;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.userInfor {
|
||||
// flex: 1;
|
||||
// padding: 28rpx 20rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.mark {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.codePopup .icon-guanbi2 {
|
||||
margin-top: 75rpx !important;
|
||||
}
|
||||
|
||||
&.pageOn {
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20rpx;
|
||||
left: 20rpx;
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 34rpx 0;
|
||||
margin: 0;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999999;
|
||||
|
||||
.num {
|
||||
font-family: SemiBold;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
margin-left: 8rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 32rpx 20rpx;
|
||||
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border: 1px solid #EEEEEE;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
//color: #333333;
|
||||
font-size: 28rpx;
|
||||
|
||||
.name {
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.nameCon {
|
||||
max-width: 190rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lable {
|
||||
height: 32rpx;
|
||||
padding: 0 8rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-left: 8rpx;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
line-height: 32rpx;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 4rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
background-color: #EEEEEE;
|
||||
width: 120rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 7rpx;
|
||||
position: relative;
|
||||
margin-right: 8rpx;
|
||||
|
||||
.bg-reds {
|
||||
width: 0;
|
||||
height: 14rpx;
|
||||
border-radius: 7rpx;
|
||||
transition: width 0.6s ease;
|
||||
background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.percent {
|
||||
font-size: 20rpx;
|
||||
line-height: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-weight: 400;
|
||||
//color: #666666;
|
||||
font-size: 20rpx;
|
||||
margin-top: 6rpx;
|
||||
|
||||
.icon-shouji2 {
|
||||
margin-right: 4rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 108rpx;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
|
||||
.num {
|
||||
margin: 0 0 12rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 40rpx;
|
||||
margin: 0 0 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20rpx;
|
||||
left: 20rpx;
|
||||
border-top: 1px solid #EEEEEE;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
padding: 42rpx 0 40rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.num {
|
||||
margin: 0 0 12rpx;
|
||||
font-family: SemiBold;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
71
view/uniapp/pages/index/components/videos.vue
Normal file
71
view/uniapp/pages/index/components/videos.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view :style="[videoWrapStyle]" v-if="!dataConfig.isHide">
|
||||
<view class="video-box" id="myVideo" :style="[videoStyle]">
|
||||
<video class="video" object-fit="cover" :src="dataConfig.videoConfig.url" :poster="dataConfig.imgConfig.url" controls></video>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 视频高度
|
||||
videoStyle() {
|
||||
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
||||
if (this.dataConfig.fillet.type) {
|
||||
borderRadius =
|
||||
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
||||
}
|
||||
return {
|
||||
'height': this.height + 'px',
|
||||
'border-radius': borderRadius,
|
||||
};
|
||||
},
|
||||
videoWrapStyle() {
|
||||
return {
|
||||
'padding': `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
||||
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
||||
'background': this.dataConfig.bottomBgColor.color[0].item,
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#myVideo').boundingClientRect(data => {
|
||||
switch (this.dataConfig.scaleConfig.tabVal) {
|
||||
case 0:
|
||||
this.height = data.width * 9 / 16;
|
||||
break;
|
||||
case 1:
|
||||
this.height = data.width * 3 / 4;
|
||||
break;
|
||||
default:
|
||||
this.height = data.width;
|
||||
break;
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-box {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user