bingyi/shopxo-uniapp
1
0
Fork 0
mirror of https://gitee.com/zongzhige/shopxo-uniapp.git synced 2026-06-06 02:38:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

魔方新增更多样式

Browse Source
This commit is contained in:
gongfuxiang
2024-04-23 22:33:08 +08:00
parent ed9fcb0544
commit e99ad12dd6
7 changed files with 130 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

@ -7,10 +7,10 @@
data: {
// 基础配置
// 数据接口请求地址
request_url: 'https://d1.shopxo.vip/',
request_url: 'http://shopxo.com/',
// 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
static_url: 'https://d1.shopxo.vip/',
static_url: 'http://shopxo.com/',
// 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
system_type: 'default',

2
common/css/page.css
View File

@ -1027,7 +1027,7 @@ button[disabled].bg-grey {
width: calc(100% - 220rpx);
}
.goods-data-list .base .base-bottom {
width: calc(100% - 260rpx);
width: calc(100% - 60rpx);
}
.goods-data-list .error-msg {
top: 24rpx;

11
components/goods-list/goods-list.vue
View File

@ -1,6 +1,6 @@
<template>
<view :class="theme_view">
<view class="plugins-goods" :class="data.style_type == 2 ? 'bg-white border-radius-main padding-main spacing-mb' : ''" v-if="(data || null) != null && (data.goods_list || null) != null && data.goods_list.length > 0">
<view class="plugins-goods" :class="data.style_type == 2 ? propStyleTypeTowClass : ''" v-if="(data || null) != null && (data.goods_list || null) != null && data.goods_list.length > 0">
<view v-if="(data.title || null) != null || (data.vice_title || null) != null" class="spacing-nav-title flex-row align-c jc-sb text-size-xs">
<view class="title-left">
<text v-if="(data.title || null) != null" class="text-wrapper" :class="data.style_type == 2 ? '' : 'title-left-border'" :style="'color:' + (data.color || '#333') + ';'">{{ data.title }}</text>
@ -29,7 +29,7 @@
</view>
</block>
<block v-if="(item.is_error || 0) == 0 && is_show_cart">
<view v-if="propOpenCart" class="bg-white right-cart-icon" :data-index="index" @tap.stop="goods_cart_event">
<view v-if="propOpenCart" class="bg-white right-cart-icon pr" :data-index="index" @tap.stop="goods_cart_event">
<iconfont name="icon-cart-inc" size="40rpx" :color="theme_color"></iconfont>
<view class="cart-badge-icon pa">
<component-badge :propNumber="item.user_cart_count || 0"></component-badge>
@ -131,7 +131,7 @@
<view class="single-text text-size-xs">{{ item.title }}</view>
<view v-if="(item.show_field_price_status || 0) == 1" class="margin-top-xs flex-row align-c">
<block v-if="(item.is_error || 0) == 0 && is_show_cart">
<view v-if="propOpenCart" class="bg-white right-cart-icon" :data-index="index" @tap.stop="goods_cart_event">
<view v-if="propOpenCart" class="bg-white right-cart-icon pr" :data-index="index" @tap.stop="goods_cart_event">
<iconfont name="icon-cart-inc" size="28rpx" :color="theme_color" propClass="pr top-xs margin-right-xs"></iconfont>
<view class="cart-badge-icon pa">
<component-badge :propNumber="item.user_cart_count || 0"></component-badge>
@ -215,6 +215,11 @@
type: [Array, Object],
default: [],
},
// 模式2默认class
propStyleTypeTowClass: {
type: String,
default: 'bg-white border-radius-main padding-main spacing-mb',
},
// 更多url地址
propMoreUrlKey: {
type: String,

162
components/magic-list/magic-list.vue
View File

@ -1,44 +1,76 @@
<template>
<view :class="theme_view">
<view v-if="(data_goods_list || null) != null && data_goods_list.length > 0">
<view v-for="(item, index) in data_goods_list" :key="index" class="bg-white border-radius-main spacing-mb">
<view class="padding-vertical-main" :style="(item.bg_images || null) !== null ? 'background-image: url(' + item.bg_images + ');background-size: auto 100%;' : ''">
<view class="hot-list flex-row flex-warp">
<view v-for="(item, index) in data_goods_list" :key="index" class="border-radius-main oh spacing-mb">
<block v-if="(item.data || null) != null && item.data.length > 0">
<!-- 上下滚动 -->
<view v-if="item.show_style == 0" class="hot-list flex-row flex-warp padding-vertical-main" :style="(item.bg_images || null) !== null ? 'background-image: url(' + item.bg_images + ');background-size: auto 100%;' : 'background: #fff;'">
<block v-for="(items, indexs) in item.data" :key="indexs">
<view :class="items.data.length % 2 == 0 ? 'flex-width-half' : items.data.length === indexs + 1 ? 'wh-auto' : 'flex-width-half'">
<view class="padding-horizontal-main">
<view class="flex-row align-c margin-bottom-xs" :data-value="items.url" @tap="url_event">
<text class="text-size fw-b single-text">{{ items.title }}</text>
<view class="hot-go margin-left-sm">
<block v-if="(items.icon || null) !== null">
<image :src="items.icon" mode="heightFix" class="ht-auto"> </image>
</block>
<block v-if="(items.data || null) != null && items.data.length > 0">
<view :class="items.data.length % 2 == 0 ? 'flex-width-half' : items.data.length === indexs + 1 ? 'wh-auto' : 'flex-width-half'">
<view class="padding-horizontal-main">
<view class="flex-row align-c margin-bottom-xs" :data-value="items.url" @tap="url_event">
<text class="text-size fw-b single-text">{{ items.title }}</text>
<view class="hot-go margin-left-sm">
<block v-if="(items.icon || null) !== null">
<image :src="items.icon" mode="heightFix" class="ht-auto"> </image>
</block>
</view>
</view>
</view>
<view class="cr-grey-9 text-size-xs margin-bottom-sm">{{ items.describe }}</view>
<swiper :class="items.data.length % 2 == 0 ? 'swiper-2' : items.data.length === indexs + 1 ? 'swiper-1' : 'swiper-2'" circular :autoplay="(items.rolling_time || null) !== null ? true : false" :vertical="propVertical" :interval="(items.rolling_time || null) !== null ? Number(items.rolling_time) * 1000 : '6000'" :duration="propDuration">
<swiper-item v-for="(itemss, indexss) in items.data" :key="indexss">
<view class="swiper-item">
<view class="flex-row">
<view v-for="(gv, gi) in itemss" :key="gi" :class="item.data.length % 2 == 0 ? 'flex-width-half' : items.data.length === indexs + 1 ? 'flex-width-half-2' : 'flex-width-half'">
<view class="tc" :data-index="index" :data-indexs="indexs" :data-indexss="indexss" :data-gi="gi" :data-value="(gv.goods_url || null) !== null ? gv.goods_url : ''" @tap="goods_event">
<image :src="(gv.images || null) !== null ? gv.images : ''" mode="heightFix" class="swiper-img border-radius-sm"> </image>
<view v-if="(gv.show_field_price_status || 0) == 1" class="price tc single-text">
<text class="sales-price va-m text-size-xss va-b">{{ gv.show_price_symbol }}</text>
<text class="sales-price va-m text-size-xs">{{ gv.min_price }}</text>
<text class="cr-grey va-m text-size-xss">{{ gv.show_price_unit }}</text>
<view class="cr-grey-9 text-size-xs margin-bottom-sm">{{ items.describe }}</view>
<swiper :class="items.data.length % 2 == 0 ? 'swiper-2' : items.data.length === indexs + 1 ? 'swiper-1' : 'swiper-2'" circular :autoplay="(items.rolling_time || null) !== null ? true : false" :vertical="propVertical" :interval="(items.rolling_time || null) !== null ? Number(items.rolling_time) * 1000 : '6000'" :duration="propDuration">
<swiper-item v-for="(itemss, indexss) in items.data" :key="indexss">
<view class="swiper-item">
<view class="flex-row">
<view v-for="(gv, gi) in itemss" :key="gi" :class="item.data.length % 2 == 0 ? 'flex-width-half' : items.data.length === indexs + 1 ? 'flex-width-half-2' : 'flex-width-half'">
<view class="tc" :data-index="index" :data-indexs="indexs" :data-indexss="indexss" :data-gi="gi" :data-value="(gv.goods_url || null) !== null ? gv.goods_url : ''" @tap="goods_event">
<image :src="(gv.images || null) !== null ? gv.images : ''" mode="heightFix" class="swiper-img border-radius-sm"> </image>
<view v-if="(gv.show_field_price_status || 0) == 1" class="price tc single-text">
<text class="sales-price va-m text-size-xss va-b">{{ gv.show_price_symbol }}</text>
<text class="sales-price va-m text-size-xs">{{ gv.min_price }}</text>
<text class="cr-grey va-m text-size-xss">{{ gv.show_price_unit }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</swiper-item>
</swiper>
</view>
</view>
</block>
</block>
</view>
<!-- 1切换滚动、2切换九宫格、3切换滚动 -->
<view v-else-if="item.show_style == 1 || item.show_style == 2 || item.show_style == 3" class="switch-tabs-item-list pr padding-top-main" :style="(item.bg_images || null) !== null ? 'background-image: url(' + item.bg_images + ');background-size: auto 100%;' : 'background: linear-gradient(180deg, '+theme_color+' 0%, '+theme_color_light+' 50%);'">
<view class="scroll-view-horizontal padding-left-main">
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'switch-tabs-item-' + show_style1_active_index">
<block v-for="(items, indexs) in item.data" :key="indexs">
<view :class="'tc cp dis-inline-block '+(indexs > 0 ? 'margin-left-xxl' : '')" :id="'switch-tabs-item-' + indexs" :data-indexs="indexs" @tap="switch_tabs_event">
<image v-if="(items.icon || null) != null" :src="items.icon" class="switch-tabs-item-icon va-m margin-right-xs" mode="aspectFit"></image>
<text class="cr-white text-size-md va-m" :class="show_style1_active_index == indexs ? 'text-size' : ''">{{ items.title }} </text>
<view class="lh-xs">
<iconfont name="icon-down-mark" size="36rpx" :color="show_style1_active_index == indexs ? '#fff' : 'transparent'" propClass="lh-xs"></iconfont>
</view>
</view>
</block>
</scroll-view>
</view>
<block v-for="(items, indexs) in item.data" :key="indexs">
<view v-if="show_style1_active_index == indexs">
<view v-if="(items.url || null) != null" :data-value="items.url" @tap="url_event" class="padding-right cr-white cp pa top-xxxxxl right-0 padding-top-xs">
<text>{{ $t('common.more') }}</text>
<iconfont name="icon-arrow-right" color="#fff"></iconfont>
</view>
<view v-if="(items.describe || null) != null" class="cr-white text-size-xs single-text padding-vertical-sm padding-horizontal-main">{{items.describe}}</view>
<view :class="(item.show_style == 1 || item.show_style == 2) ? 'padding-horizontal-main padding-top-sm' : (item.show_style == 3 ? 'padding-top-xs padding-bottom-main' : '')">
<component-goods-list :propData="{ style_type: parseInt(item.show_style)-1, goods_list: items.goods_list }" :propLabel="propLabel" :propCurrencySymbol="propCurrencySymbol" :propIsAutoPlay="(items.rolling_time || null) != null" :propIsCartParaCurve="true" propSource="index" propStyleTypeTowClass="border-radius-main padding-horizontal-main padding-top-xs"></component-goods-list>
</view>
</view>
</block>
</view>
</view>
</block>
</view>
</view>
</view>
@ -46,12 +78,16 @@
<script>
const app = getApp();
import componentGoodsList from '@/components/goods-list/goods-list';
export default {
name: 'recommend-hot',
data() {
return {
theme_view: app.globalData.get_theme_value_view(),
theme_color: app.globalData.get_theme_color(),
theme_color_light: app.globalData.get_theme_color(null, true),
data_goods_list: [],
show_style1_active_index: 0,
};
},
props: {
@ -73,6 +109,14 @@
type: Number,
default: 1000,
},
// 标签数据
propLabel: {
type: [Array, Object, String],
default: null,
}
},
components: {
componentGoodsList
},
// 属性值改变监听
watch: {
@ -104,25 +148,37 @@
app.globalData.url_event(e);
},
// tabs切换
switch_tabs_event(e) {
this.setData({
show_style1_active_index: e.currentTarget.dataset.indexs
});
},
// 轮播数据处理
set_data(data) {
let goods = data.goods;
goods.forEach((item) => {
item.data.forEach((items, indexs) => {
let swiperData = [];
if (item.data.length % 2 == 0) {
// 偶数
swiperData = app.globalData.group_arry(items.goods_list, 2);
} else {
// 奇数
if (item.data.length === indexs + 1) {
swiperData = app.globalData.group_arry(items.goods_list, 4);
} else {
swiperData = app.globalData.group_arry(items.goods_list, 2);
}
}
items.data = swiperData;
});
switch(parseInt(item.show_style || 0)) {
// 上下滚动数据处理
case 0 :
item.data.forEach((items, indexs) => {
let swiper_data = [];
if (item.data.length % 2 == 0) {
// 偶数
swiper_data = app.globalData.group_arry(items.goods_list, 2);
} else {
// 奇数
if (item.data.length === indexs + 1) {
swiper_data = app.globalData.group_arry(items.goods_list, 4);
} else {
swiper_data = app.globalData.group_arry(items.goods_list, 2);
}
}
items.data = swiper_data;
});
break;
}
});
this.setData({
data_goods_list: goods,
@ -133,6 +189,9 @@
</script>
<style scoped>
.hot-list {
gap: 10rpx 0;
}
.hot-list > .flex-width-half {
margin-bottom: 0;
}
@ -143,7 +202,6 @@
.hot-list > .flex-width-half:nth-child(even) {
position: relative;
}
.hot-list > .flex-width-half:nth-child(even)::before {
content: '';
height: 80%;
@ -154,27 +212,35 @@
top: 50%;
transform: translateY(-50%);
}
.hot-list .swiper-2 {
height: 176rpx;
}
.hot-list .swiper-2 .swiper-img {
height: 124rpx;
}
.hot-list .swiper-1 {
height: 187rpx;
}
.hot-list .swiper-1 .swiper-img {
height: 135rpx;
}
.hot-go {
height: 34rpx;
line-height: 34rpx;
}
.flex-width-half-2 {
width: 25%;
}
/**
* 切换滚动、切换九宫格、切换滚动
*/
.switch-tabs-item-list > .scroll-view-horizontal {
padding-right: 140rpx;
}
.switch-tabs-item-list .switch-tabs-item-icon {
width: 32rpx !important;
height: 32rpx !important;
}
</style>

2
pages/index/index.vue
View File

@ -162,7 +162,7 @@
<!-- 魔方 - 插件 -->
<view v-if="pv.plugins == 'magic' && (plugins_magic_data || null) != null">
<component-magic-list :propData="{...plugins_magic_data, ...{random: random_value}}" :propCurrencySymbol="currency_symbol"></component-magic-list>
<component-magic-list :propData="{...plugins_magic_data, ...{random: random_value}}" :propCurrencySymbol="currency_symbol" :propLabel="plugins_label_data"></component-magic-list>
</view>
</block>
</block>

4
static/icon/iconfont.css
View File

@ -14,6 +14,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-down-mark:before {
content: "\e729";
}
.icon-sigh-o:before {
content: "\e71f";
}

BIN
static/icon/iconfont.ttf
View File

Binary file not shown.