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

Merge branch 'dev-yxl' of gitee.com:zongzhige/shopxo-uniapp into dev

master
gongfuxiang 2024-10-10 09:39:33 +08:00
parent 46fd476bd2 3915500bc6
commit 0566717669
10 changed files with 172 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/diy/carousel.vue
View File

@ -6,7 +6,7 @@
<view class="swiper-item" :style="img_style" :class="['scale-defalt', { 'scale-1': animationData === index }]">
<imageEmpty :propImageSrc="item.carousel_img[0]" :propStyle="img_style" :propImgFit="img_fit" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{ 'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="video-class flex-row pa gap-10 align-c oh" :style="video_style" @tap.stop="video_play(item.carousel_video)">
<view v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{ 'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="video-class flex-row pa gap-10 align-c oh" :style="video_style" :data-value="item.carousel_video" @tap.stop="video_play">
<block v-if="new_style.video_type == 'img'">
<view class="video_img">
<imageEmpty :propImageSrc="new_style.video_img[0]" propImgFit="aspectFill" propErrorStyle="width: 28rpx;height: 28rpx;"></imageEmpty>
@ -24,7 +24,7 @@
<view class="wh-auto ht-auto pr" :style="img_style">
<imageEmpty :propImageSrc="item.carousel_img[0]" :propStyle="img_style" :propImgFit="img_fit" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{ 'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="video-class flex-row pa gap-10 align-c oh" :style="video_style" @tap.stop="video_play(item.carousel_video)">
<view v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{ 'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="video-class flex-row pa gap-10 align-c oh" :style="video_style" :data-value="item.carousel_video" @tap.stop="video_play">
<block v-if="new_style.video_type == 'img'">
<view class="video_img">
<imageEmpty :propImageSrc="new_style.video_img[0]" propImgFit="aspectFill" propErrorStyle="width: 28rpx;height: 28rpx;"></imageEmpty>
@ -49,12 +49,6 @@
<view v-for="(item, index2) in form.carousel_list" :key="index2" :style="indicator_style + (actived_index == index2 ? 'background:' + new_style.actived_color : '')" class="dot-item" />
</template>
</view>
<uni-popup ref="popup" type="center" border-radius="20rpx" :mask-click="false">
<view class="flex-col align-c jc-c gap-10">
<video :src="video_src" id="carousel_video" :autoplay="true" :controls="true" :loop="true" show-fullscreen-btn class="radius-md" :style="{ width: popup_width, height: popup_height }"></video>
<iconfont name="icon-qiandao-tancguanbi" size="56rpx" color="#666" @tap="video_close"></iconfont>
</view>
</uni-popup>
</view>
</template>
@ -100,7 +94,6 @@
img_fit: '',
dot_style: '',
video_style: '',
video_src: '',
popup_width: '0rpx',
popup_height: '0rpx',
// 样式二的处理
@ -250,23 +243,12 @@
style += gradient_computer(data) + padding_computer(video_padding) + `color: ${video_title_color};`;
return style;
},
video_play(list) {
this.setData({
video_src: list[0].url,
});
this.$refs.popup.open();
const videoContext = uni.createVideoContext('carousel_video');
if (!isEmpty(videoContext)) {
videoContext.play();
video_play(e) {
const list = e.currentTarget.dataset.value;
if (!isEmpty(list)) {
this.$emit('video_play', list[0].url, this.popup_width, this.popup_height);
}
},
video_close() {
const videoContext = uni.createVideoContext('carousel_video');
if (!isEmpty(videoContext)) {
videoContext.pause();
}
this.$refs.popup.close();
},
url_open(link) {
app.globalData.url_event(link);
},

8
components/diy/custom.vue
View File

@ -3,16 +3,16 @@
<view class="wh-auto ht-auto pr">
<view v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height) }">
<template v-if="item.key == 'text'">
<model-text :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
<model-text :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
<model-image :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :propValue="item.com_data" :propSourceList="form.data_source_content"></model-lines>
<model-lines :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
<model-icon :propkey="propkey" :propValue="item.com_data" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
</template>
</view>
</view>

56
components/diy/diy.vue
View File

@ -15,16 +15,16 @@
<!-- 基础组件 -->
<template v-if="item.is_enable == '1'">
<componentDiySearch v-if="item.key == 'search'" :propkey="item.id" :propValue="item.com_data"></componentDiySearch>
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propkey="item.id" :propValue="item.com_data"></componentDiyCarousel>
<componentDiyCarousel v-else-if="item.key == 'carousel'" :propkey="item.id" :propValue="item.com_data" @video_play="video_play"></componentDiyCarousel>
<componentDiyNavGroup v-else-if="item.key == 'nav-group'" :propkey="item.id" :propValue="item.com_data"></componentDiyNavGroup>
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :propkey="item.id" :propValue="item.com_data"></componentDiyUserInfo>
<componentDiyNotice v-else-if="item.key == 'notice'" :propkey="item.id" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propkey="item.id" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propkey="item.id" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propkey="item.id" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? 33 : 0"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propkey="item.id" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? 33 : 0"></componentDiyGoodsTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="index" :propkey="item.id" :propValue="item.com_data" :propTop="(!is_immersion_model ? temp_sticky_top : 0) + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="!is_immersion_model && is_header_top ? 33 : 0" @goods_buy_event="goods_buy_event"></componentDiyGoodsTabs>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :propkey="item.id" :propValue="item.com_data"></componentDiyGoodsList>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="index" :propkey="item.id" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propkey="item.id" :propValue="item.com_data"></componentDiyDataMagic>
<componentDiyCustom v-else-if="item.key == 'custom'" :propkey="item.id" :propValue="item.com_data"></componentDiyCustom>
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :propkey="item.id" :propValue="item.com_data"></componentDiyImgMagic>
@ -59,6 +59,17 @@
<component-bottom-line :propStatus="goods_bottom_line_status"></component-bottom-line>
</scroll-view>
</template>
<!-- 商品购买 -->
<view class="z-i-deep">
<component-goods-buy ref="goods_buy" v-on:CartSuccessEvent="goods_cart_back_event"></component-goods-buy>
<uni-popup ref="popup" type="center" border-radius="20rpx" :mask-click="false">
<view class="flex-col align-c jc-c gap-10">
<video :src="video_src" id="carousel_video" :autoplay="true" :controls="true" :loop="true" show-fullscreen-btn class="radius-md" :style="{ width: popup_width, height: popup_height }"></video>
<iconfont name="icon-qiandao-tancguanbi" size="56rpx" color="#666" @tap="video_close"></iconfont>
</view>
</uni-popup>
</view>
</view>
<!-- 当前diy页面底部菜单（非公共底部菜单） -->
@ -74,6 +85,7 @@
<script>
const app = getApp();
import { isEmpty } from '@/common/js/common/common.js';
import componentDiyHeader from '@/components/diy/header';
import componentDiyFooter from '@/components/diy/footer';
import componentDiyTabs from '@/components/diy/tabs';
@ -102,6 +114,7 @@
import componentGoodsList from '@/components/goods-list/goods-list';
import componentNoData from '@/components/no-data/no-data';
import componentBottomLine from '@/components/bottom-line/bottom-line';
import componentGoodsBuy from '@/components/goods-buy/goods-buy';
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
@ -152,6 +165,7 @@
componentGoodsList,
componentNoData,
componentBottomLine,
componentGoodsBuy
},
data() {
return {
@ -212,6 +226,12 @@
cache_key: app.globalData.data.cache_diy_data_key,
// 底部导航高度
footer_height_value: 0,
// 商品ref索引
goods_index: 0,
// 视频播放逻辑
video_src: '',
popup_width: '0rpx',
popup_height: '0rpx',
};
},
watch: {
@ -471,6 +491,36 @@
footer_height_value: value * 2 + 20,
});
},
goods_buy_event(index, goods = {}, params = {}, back_data = null) {
if ((this.$refs.goods_buy || null) != null) {
this.goods_index = index;
this.$refs.goods_buy.init(goods, params, back_data);
}
},
goods_cart_back_event(e) {
if ((this.$refs[`diy_goods_buy${this.goods_index}`][0] || null) != null) {
this.$refs[`diy_goods_buy${this.goods_index}`][0].goods_cart_back_event(e);
}
},
video_play(url, width, height) {
this.setData({
video_src: url,
popup_width: width,
popup_height: height
});
this.$refs.popup.open();
const videoContext = uni.createVideoContext('carousel_video');
if (!isEmpty(videoContext)) {
videoContext.play();
}
},
video_close() {
const videoContext = uni.createVideoContext('carousel_video');
if (!isEmpty(videoContext)) {
videoContext.pause();
}
this.$refs.popup.close();
},
},
};
</script>

64
components/diy/goods-list.vue
View File

@ -103,7 +103,7 @@
<block v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :style="{ width: '100%', height: new_style.content_outer_height * 2 + 'rpx' }">
<swiper-item v-for="(item1, index1) in shop_content_list" :key="index1" class="flex-row" :style="onter_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr" :class="layout_type" :style="layout_style" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr" :class="layout_type" :style="layout_style" :data-index="index1" :data-split-index="index" :data-value="item.goods_url" @tap="url_event">
<block v-if="!isEmpty(item)">
<view v-if="!isEmpty(item.new_cover)" :class="'flex-img' + theme">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
@ -154,11 +154,6 @@
</swiper>
</block>
</view>
<!-- 商品购买 -->
<component-goods-buy v-if="is_show_cart" ref="goods_buy" v-on:CartSuccessEvent="goods_cart_back_event"></component-goods-buy>
<!-- 购物车抛物线 -->
<component-cart-para-curve v-if="is_show_cart" ref="cart_para_curve"></component-cart-para-curve>
</view>
</template>
@ -167,14 +162,10 @@
import { isEmpty, common_styles_computer, get_math, gradient_handle, padding_computer, radius_computer } from '@/common/js/common/common.js';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
import componentBadge from '@/components/badge/badge';
import componentGoodsBuy from '@/components/goods-buy/goods-buy';
import componentCartParaCurve from '@/components/cart-para-curve/cart-para-curve';
export default {
components: {
imageEmpty,
componentBadge,
componentGoodsBuy,
componentCartParaCurve,
},
props: {
propValue: {
@ -190,7 +181,11 @@
propkey: {
type: String,
default: '',
}
},
propIndex: {
type: Number,
default: 0,
},
},
data() {
return {
@ -231,23 +226,19 @@
},
watch: {
propkey(val) {
this.setData({
form: this.propValue.content,
new_style: this.propValue.style,
});
this.init();
}
},
created() {
this.setData({
form: this.propValue.content,
new_style: this.propValue.style,
});
this.init();
},
methods: {
isEmpty,
init() {
this.setData({
form: this.propValue.content,
new_style: this.propValue.style,
});
let new_list = [];
// 指定商品并且指定商品数组不为空
if (!isEmpty(this.form.data_list) && this.form.data_type == '0') {
@ -438,25 +429,26 @@
goods = this.shop_content_list[index][split_index];
}
if (this.form.shop_button_effect == '0') {
app.globalData.goods_data_cache_handle(goods.id, goods);
app.globalData.url_open(goods.goods_url);
} else {
if ((this.$refs.goods_buy || null) != null) {
// 开启购物车抛物线效果则展示提示操作
let is_success_tips = this.propIsCartParaCurve ? 0 : 1;
this.$refs.goods_buy.init(
goods,
{
buy_event_type: 'cart',
is_direct_cart: 1,
is_success_tips: is_success_tips,
},
{
index: index,
split_index: split_index,
pos: e,
}
);
}
// 开启购物车抛物线效果则展示提示操作
let is_success_tips = this.propIsCartParaCurve ? 0 : 1;
this.$emit('goods_buy_event',
this.propIndex,
goods,
{
buy_event_type: 'cart',
is_direct_cart: 1,
is_success_tips: is_success_tips,
},
{
index: index,
split_index: split_index,
pos: e,
}
);
}
},
// 加入购物车成功回调

14
components/diy/goods-tabs.vue
View File

@ -2,7 +2,7 @@
<view class="goods-tabs ou" :style="style_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentGoodsList :propkey="diy_key" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
<componentGoodsList ref="diy_goods_list" :propkey="diy_key" :propIndex="propIndex" :propValue="goods_tabs" :propIsCommonStyle="false" @goods_buy_event="goods_buy_event"></componentGoodsList>
</view>
</view>
</template>
@ -49,6 +49,10 @@
type: String,
default: '',
},
propIndex: {
type: Number,
default: 0,
},
},
data() {
return {
@ -170,6 +174,14 @@
})
.exec();
},
goods_buy_event(index, goods = {}, params = {}, back_data = null) {
this.$emit('goods_buy_event', index, goods, params, back_data);
},
goods_cart_back_event(e) {
if ((this.$refs.diy_goods_list || null) != null) {
this.$refs.diy_goods_list.goods_cart_back_event(e);
}
}
},
};
</script>

31
components/diy/header.vue
View File

@ -1,6 +1,9 @@
<template>
<view v-if="(propValue || null) !== null" class="header-container">
<view class="header-around wh-auto header-z-3" :style="roll_style + position">
<view class="wh-auto ht-auto pa up_slide_bg" :style="up_slide_style">
<view class="wh-auto ht-auto" :style="up_slide_img_style"></view>
</view>
<view :style="top_content_style">
<view class="header-content flex-row align-s">
<view class="model-top flex-1 mt-1">
@ -127,21 +130,24 @@
// #endif
// 判断是否是沉浸模式
is_immersion_model: false,
up_slide_style: '',
up_slide_img_style: '',
};
},
watch: {
propScrollTop(newVal) {
if (this.header_background_type != 'color_image') {
if (newVal < this.header_top) {
this.setData({
// 20是大小误差
roll_style: this.roll_style + 'background: rgba(255,255,255,' + (newVal + 20 < this.header_top ? 0 : (newVal / this.header_top).toFixed(2)) + ');',
});
} else {
this.setData({
roll_style: this.roll_style + 'background: rgba(255,255,255,1);',
});
}
if (newVal < this.header_top) {
console.log(this.propValue);
const { up_slide_background_color_list, up_slide_background_direction, up_slide_background_img, up_slide_background_img_style } = this.propValue.style || {};
// 渐变
const gradient = { color_list: up_slide_background_color_list, direction: up_slide_background_direction };
// 背景图
const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
this.setData({
// 20是大小误差
up_slide_style: gradient_computer(gradient) + 'opacity:' + (newVal / (this.header_top + 33) > 1 ? 1 : (newVal / (this.header_top + 33)).toFixed(2)) + ';',
up_slide_img_style: background_computer(back),
});
}
},
propkey(val) {
@ -284,4 +290,7 @@
top: 0;
padding-left: 0;
}
.up_slide_bg {
z-index: -1;
}
</style>

12
components/diy/modules/custom/model-icon.vue
View File

@ -20,6 +20,10 @@
default: () => {
return {};
},
},
propkey: {
type: String,
default: '',
}
},
data() {
@ -28,6 +32,14 @@
com_style: '',
};
},
watch: {
propkey(val) {
this.setData({
form: this.propValue,
});
this.init();
}
},
created() {
this.setData({
form: this.propValue,

12
components/diy/modules/custom/model-image.vue
View File

@ -24,6 +24,10 @@
return {};
},
},
propkey: {
type: String,
default: '',
}
},
data() {
return {
@ -33,6 +37,14 @@
border_style: '',
};
},
watch: {
propkey(val) {
this.setData({
form: this.propValue,
});
this.init();
}
},
created() {
this.setData({
form: this.propValue,

12
components/diy/modules/custom/model-lines.vue
View File

@ -10,6 +10,10 @@
return {};
},
required: true,
},
propkey: {
type: String,
default: '',
}
},
data() {
@ -18,6 +22,14 @@
border_style: '',
};
},
watch: {
propkey(val) {
this.setData({
form: this.propValue,
});
this.init();
}
},
created() {
this.setData({
form: this.propValue,

12
components/diy/modules/custom/model-text.vue
View File

@ -27,6 +27,10 @@
default: () => {
return {};
},
},
propkey: {
type: String,
default: '',
}
},
data() {
@ -37,6 +41,14 @@
com_style: '',
};
},
watch: {
propkey(val) {
this.setData({
form: this.propValue,
});
this.init();
}
},
created() {
this.setData({
form: this.propValue,