sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

活动配置插件首页推荐支持图文，九方格，滚动样式

master
gongfuxiang 2022-05-15 17:10:22 +08:00
parent 8de4d48c65
commit 27d303731c
6 changed files with 158 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

@ -45,11 +45,11 @@
"/pages/user/user"
],
// 请求地址
request_url: 'https://d1.shopxo.vip/',
request_url: 'http://shopxo.com/',
// 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
static_url: 'https://d1.shopxo.vip/',
// 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
system_type: 'default',
system_type: 'yifan2',
// 基础信息
application_title: "ShopXO",
application_describe: "ShopXO开源商城、MIT协议、可商用、可二次开发、满足99%电商运营需求",

57
common/css/plugins.css
View File

@ -110,19 +110,31 @@
.plugins-label-top-right {
top: 0;
right: 0;
}
.plugins-label-bottom-left,
.plugins-label-bottom-center,
.plugins-label-bottom-right {
bottom: calc(100% - 380rpx);
}
.plugins-label-bottom-left {
bottom: calc(100% - 380rpx);
left: 0;
}
.plugins-label-bottom-center {
bottom: calc(100% - 380rpx);
width: 100%;
text-align: center;
}
.plugins-label-bottom-right {
bottom: calc(100% - 380rpx);
right: 0;
}
.plugins-activity-rolling-list .plugins-label-bottom-left,
.plugins-activity-rolling-list .plugins-label-bottom-center,
.plugins-activity-rolling-list .plugins-label-bottom-right {
bottom: calc(100% - 240rpx);
}
.plugins-activity-list .plugins-label-bottom-left,
.plugins-activity-list .plugins-label-bottom-center,
.plugins-activity-list .plugins-label-bottom-right {
bottom: 0;
}
/**
@ -180,6 +192,45 @@
height: 230rpx !important;
}
/**
* 活动配置 - 列表
*/
.plugins-activity-list .activity-img {
width: 190rpx !important;
height: 190rpx !important;
}
.plugins-activity-list .base {
width: calc(100% - 220rpx);
}
/*
* 活动配置 - 滚动
*/
.plugins-activity-rolling-list swiper {
height: 390rpx !important;
}
.plugins-activity-rolling-list .item .activity-img {
height: 240rpx !important;
}
/**
* 活动配置 - 九方格
*/
.plugins-activity-grid-list .item {
width: calc(50% - 10rpx);
float: left;
padding-bottom: 10rpx;
margin-bottom: 20rpx;
}
.plugins-activity-grid-list .item:nth-of-type(2n + 1) {
margin-right: 10rpx;
}
.plugins-activity-grid-list .item:nth-of-type(2n) {
margin-left: 10rpx;
}
.plugins-activity-grid-list .item .activity-img {
width: 100%;
height: 380rpx !important;
}
/**
* 门店 - 数据列表
*/

138
components/activity-list/activity-list.vue
View File

@ -1,14 +1,14 @@
<template>
<view>
<view v-if="(propData || null) != null && propData.length > 0">
<view>
<view v-if="(propConfig || null) != null && (propData || null) != null && propData.length > 0">
<block v-for="(floor, index) in propData" :key="index">
<block v-if="floor.goods_list.length > 0 && floor.home_data_location == propLocation">
<view class="spacing-nav-title">
<text class="text-wrapper" :style="'color:'+(floor.color || '#333')+';'">{{floor.title}}</text>
<text v-if="(floor.vice_title || null) != null" class="vice-name margin-left-lg cr-gray">{{floor.vice_title}}</text>
<navigator :url="'/pages/plugins/activity/detail/detail?id=' + floor.id" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
<navigator :url="floor.url" hover-class="none" class="arrow-right padding-right-xxxl cr-gray fr">更多</navigator>
</view>
<view class="floor-list wh-auto oh pr">
<view class="wh-auto oh pr">
<view v-if="floor.keywords_arr.length > 0" class="word-list scroll-view-horizontal margin-bottom-lg">
<scroll-view scroll-x>
<block v-for="(kv, ki) in floor.keywords_arr" :key="ki">
@ -16,45 +16,99 @@
</block>
</scroll-view>
</view>
<view class="goods-list">
<view v-for="(goods, index2) in floor.goods_list" :key="index2" class="goods bg-white border-radius-main oh pr">
<!-- 商品主体内容 -->
<navigator :url="'/pages/goods-detail/goods-detail?id=' + goods.id" hover-class="none">
<image class="goods-img dis-block" :src="goods.images" mode="aspectFit"></image>
<view class="goods-base padding-horizontal-main margin-top-sm">
<view class="goods-title multi-text margin-bottom-sm">{{goods.title}}</view>
<view class="sales-price">{{propCurrencySymbol}}{{goods.min_price}}</view>
</view>
</navigator>
<!-- 标签插件 -->
<view v-if="(propLabel || null) != null && propLabel.data.length > 0" :class="'plugins-label oh pa plugins-label-'+((propLabel.base.is_user_goods_label_icon || 0) == 0 ? 'text' : 'img')+' plugins-label-'+(propLabel.base.user_goods_show_style || 'top-left')">
<block v-for="(lv,li) in propLabel.data" :key="li">
<view v-if="lv.goods_ids.indexOf(goods.id) != -1" class="lv dis-inline-block va-m" :data-value="((propLabel.base.is_user_goods_label_url || 0) == 1) ? (lv.url || '') : ''" @tap="url_event">
<view v-if="(propLabel.base.is_user_goods_label_icon || 0) == 0" class="round cr-white bg-main text-size-xs fl" :style="((lv.bg_color || null) != null ? 'background-color:'+ lv.bg_color+' !important;' : '')+((lv.text_color || null) != null ? 'color:'+ lv.text_color+' !important;' : '')">{{lv.name}}</view>
<image v-else class="dis-block" :src="lv.icon" mode="scaleToFill"></image>
<block v-if="floor.style_type == 0">
<view v-if="floor.goods_list.length > 0" class="plugins-activity-list">
<view v-for="(item, index) in floor.goods_list" :key="index" class="item oh padding-main border-radius-main bg-white oh pr spacing-mb">
<!-- 商品主体内容 -->
<navigator :url="item.goods_url" hover-class="none">
<image class="activity-img fl radius" :src="item.images" mode="aspectFit"></image>
<view class="base fr">
<view class="multi-text">{{item.title}}</view>
<view v-if="(item.simple_desc || null) != null" class="cr-grey single-text margin-top-sm">{{item.simple_desc}}</view>
<view class="sales-price margin-top-sm">{{propCurrencySymbol}}{{item.min_price}}</view>
</view>
</block>
</navigator>
<!-- 标签插件 -->
<view v-if="(propLabel || null) != null && propLabel.data.length > 0" :class="'plugins-label oh pa plugins-label-'+((propLabel.base.is_user_goods_label_icon || 0) == 0 ? 'text' : 'img')+' plugins-label-'+(propLabel.base.user_goods_show_style || 'top-left')">
<block v-for="(lv,li) in propLabel.data" :key="li">
<view v-if="lv.goods_ids.indexOf(item.id) != -1" class="lv dis-inline-block va-m" :data-value="((propLabel.base.is_user_goods_label_url || 0) == 1) ? (lv.url || '') : ''" @tap="url_event">
<view v-if="(propLabel.base.is_user_goods_label_icon || 0) == 0" class="round cr-white bg-main text-size-xs fl" :style="((lv.bg_color || null) != null ? 'background-color:'+ lv.bg_color+' !important;' : '')+((lv.text_color || null) != null ? 'color:'+ lv.text_color+' !important;' : '')">{{lv.name}}</view>
<image v-else class="dis-block" :src="lv.icon" mode="scaleToFill"></image>
</view>
</block>
</view>
</view>
</view>
</view>
</block>
<block v-else-if="floor.style_type == 1">
<view v-if="floor.goods_list.length > 0" class="plugins-activity-grid-list">
<view v-for="(item, index) in floor.goods_list" :key="index" class="item oh border-radius-main bg-white oh pr spacing-mb">
<!-- 商品主体内容 -->
<navigator :url="item.goods_url" hover-class="none">
<image class="activity-img dis-block" :src="item.images" mode="aspectFit"></image>
<view class="base padding-horizontal-main margin-top-sm">
<view class="goods-title multi-text margin-bottom-sm">{{item.title}}</view>
<view class="sales-price">{{propCurrencySymbol}}{{item.min_price}}</view>
</view>
</navigator>
<!-- 标签插件 -->
<view v-if="(propLabel || null) != null && propLabel.data.length > 0" :class="'plugins-label oh pa plugins-label-'+((propLabel.base.is_user_goods_label_icon || 0) == 0 ? 'text' : 'img')+' plugins-label-'+(propLabel.base.user_goods_show_style || 'top-left')">
<block v-for="(lv,li) in propLabel.data" :key="li">
<view v-if="lv.goods_ids.indexOf(item.id) != -1" class="lv dis-inline-block va-m" :data-value="((propLabel.base.is_user_goods_label_url || 0) == 1) ? (lv.url || '') : ''" @tap="url_event">
<view v-if="(propLabel.base.is_user_goods_label_icon || 0) == 0" class="round cr-white bg-main text-size-xs fl" :style="((lv.bg_color || null) != null ? 'background-color:'+ lv.bg_color+' !important;' : '')+((lv.text_color || null) != null ? 'color:'+ lv.text_color+' !important;' : '')">{{lv.name}}</view>
<image v-else class="dis-block" :src="lv.icon" mode="scaleToFill"></image>
</view>
</block>
</view>
</view>
</view>
</block>
<block v-else-if="floor.style_type == 2">
<view class="plugins-activity-rolling-list scroll-view-horizontal border-radius-main oh spacing-mb">
<swiper :vertical="false" :autoplay="(propConfig.is_home_auto_play || 0) == 1" :circular="false" :display-multiple-items="floor.goods_list.length < 3 ? floor.goods_list.length : 3" interval="3000">
<block v-for="(item, index) in floor.goods_list" :key="index">
<swiper-item class="padding-right-main">
<view class="item bg-white border-radius-main oh pr ht-auto pr">
<!-- 商品主体内容 -->
<navigator :url="item.goods_url" hover-class="none">
<image class="activity-img dis-block wh-auto" :src="item.images" mode="aspectFit"></image>
<view class="padding-left-sm padding-right-sm margin-top-sm">
<view class="multi-text margin-bottom-sm">{{item.title}}</view>
<view class="sales-price">{{propCurrencySymbol}}{{item.min_price}}</view>
</view>
</navigator>
<!-- 标签插件 -->
<view v-if="(propLabel || null) != null && propLabel.data.length > 0" :class="'plugins-label oh pa plugins-label-'+((propLabel.base.is_user_goods_label_icon || 0) == 0 ? 'text' : 'img')+' plugins-label-'+(propLabel.base.user_goods_show_style || 'top-left')">
<block v-for="(lv,li) in propLabel.data" :key="li">
<view v-if="lv.goods_ids.indexOf(item.id) != -1" class="lv dis-inline-block va-m" :data-value="((propLabel.base.is_user_goods_label_url || 0) == 1) ? (lv.url || '') : ''" @tap="url_event">
<view v-if="(propLabel.base.is_user_goods_label_icon || 0) == 0" class="round cr-white bg-main text-size-xs fl" :style="((lv.bg_color || null) != null ? 'background-color:'+ lv.bg_color+' !important;' : '')+((lv.text_color || null) != null ? 'color:'+ lv.text_color+' !important;' : '')">{{lv.name}}</view>
<image v-else class="dis-block" :src="lv.icon" mode="scaleToFill"></image>
</view>
</block>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</block>
</view>
</block>
</block>
</block>
</view>
</view>
</template>
</view>
</template>
<script>
const app = getApp();
export default {
data() {
return {};
},
components: {},
const app = getApp();
export default {
data() {
return {};
},
components: {},
props: {
propCurrencySymbol: {
type: String,
default: app.globalData.data.currency_symbol
type: String,
default: app.globalData.data.currency_symbol
},
propLocation: {
type: [String,Number],
@ -69,17 +123,17 @@
default: []
},
propLabel: {
type: [Array,Object,String],
default: null
}
},
type: [Array,Object,String],
default: null
}
},
methods: {
// url事件
url_event(e) {
app.globalData.url_event(e);
}
}
};
</script>
<style>
}
};
</script>
<style>
</style>

2
components/blog-list/blog-list.vue
View File

@ -44,7 +44,7 @@
</view>
</block>
<block v-else-if="floor.style_type == 2">
<view class="plugins-blog-rolling-list scroll-view-horizontal border-radius-main oh">
<view class="plugins-blog-rolling-list scroll-view-horizontal border-radius-main oh spacing-mb">
<swiper :vertical="false" :autoplay="(propConfig.is_home_hot_auto_play || 0) == 1" :circular="false" :display-multiple-items="floor.blog_list.length < 3 ? floor.blog_list.length : 3" interval="3000">
<block v-for="(item, index) in floor.blog_list" :key="index">
<swiper-item class="padding-right-main">

2
pages/index/index.css
View File

@ -89,7 +89,7 @@
* 限时秒杀 - 插件
*/
.seckill .goods-list swiper {
height: 425rpx !important;
height: 435rpx !important;
}
.seckill .goods-list .item .goods-img {
width: 100%;

8
pages/index/index.vue
View File

@ -111,8 +111,8 @@
</view>
<!-- 活动配置-楼层顶部 - 插件 -->
<block v-if="(plugins_activity_data || null) != null && plugins_activity_data.length > 0">
<component-activity-list :propData="plugins_activity_data" propLocation="0" :propLabel="plugins_label_data" :propCurrencySymbol="currency_symbol"></component-activity-list>
<block v-if="(plugins_activity_data || null) != null">
<component-activity-list :propConfig="plugins_activity_data.base" :propData="plugins_activity_data.data" propLocation="0" :propLabel="plugins_label_data" :propCurrencySymbol="currency_symbol"></component-activity-list>
</block>
<!-- 博客-楼层顶部 - 插件 -->
@ -170,8 +170,8 @@
</block>
<!-- 活动配置-楼层底部 - 插件 -->
<block v-if="(plugins_activity_data || null) != null && plugins_activity_data.length > 0">
<component-activity-list :propData="plugins_activity_data" propLocation="1" :propLabel="plugins_label_data" :propCurrencySymbol="currency_symbol"></component-activity-list>
<block v-if="(plugins_activity_data || null) != null">
<component-activity-list :propConfig="plugins_activity_data.base" :propData="plugins_activity_data.data" propLocation="1" :propLabel="plugins_label_data" :propCurrencySymbol="currency_symbol"></component-activity-list>
</block>
<!-- 博客-楼层底部 - 插件 -->