Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

tmp: 部分代码与UnishopV5结合，但是代码有严重缺陷

Browse Source
This commit is contained in:
ZF Sun
2025-12-20 15:30:39 +08:00
parent ed5181b382
commit e263a616f6
183 changed files with 31316 additions and 18590 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/diy-components/diy-article.vue
View File

@@ -1,26 +1,27 @@
<template>
<x-skeleton data-component-name="diy-article" type="list" :loading="loading" :configs="skeletonConfig">
<view class="article-wrap" :style="warpCss">
<view :class="['list-wrap', value.style]" :style="warpCss">
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :style="itemCss">
<view class="article-img">
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
</view>
<view class="info-wrap">
<text class="title">{{ item.article_title }}</text>
<text class="desc" style="color:#888;font-size: 24rpx; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">{{ item.article_abstract }}</text>
<view class="read-wrap">
<block v-if="item.category_name">
<text class="category-icon"></text>
<text>{{ item.category_name }}</text>
</block>
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
<view :style="value.pageStyle" v-if="loading || (list && list.length)">
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig">
<view class="article-wrap" :style="warpCss">
<view :class="['list-wrap', value.style]" :style="warpCss">
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :style="itemCss">
<view class="article-img">
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
</view>
<view class="info-wrap">
<text class="title">{{ item.article_title }}</text>
<view class="read-wrap">
<block v-if="item.category_name">
<text class="category-icon"></text>
<text>{{ item.category_name }}</text>
</block>
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'Y-m-d') }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</x-skeleton>
</x-skeleton>
</view>
</template>
<script>
@@ -29,7 +30,10 @@
name: 'diy-article',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

7
components/diy-components/diy-bargain.vue
View File

@@ -1,4 +1,5 @@
<template>
<view :style="value.pageStyle" v-if="loading || (list && list.length)">
<x-skeleton data-component-name="diy-bargain" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-bargain" :class="[value.template, value.style]" :style="warpCss">
@@ -123,6 +124,7 @@
</view>
</x-skeleton>
</view>
</template>
<script>
@@ -130,7 +132,10 @@
name: 'diy-bargain',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

66
components/diy-components/diy-category-item.vue
View File

@@ -33,14 +33,13 @@
</block>
<block v-if="type == 'goods'">
<view class="categoty-goods-wrap" v-if="loadType == 'part'"
:style="'padding-top:' + (value.search ? 0 : '20rpx')">
<view class="categoty-goods-wrap" v-if="loadType == 'part'" :style="'padding-top:' + (value.search ? 0 : '20rpx')">
<!-- 分类筛选 -->
<block v-if="category.child_list && value.goodsLevel == 2">
<view class="screen-category-wrap">
<scroll-view scroll-x="true" class="screen-category" :class="{ 'screen-category-4': value.template == 4 }" :scroll-with-animation="true" :scroll-into-view="scrollIntoView">
<view class="item" id="category-2--1" :class="{ selected: categoryId == -1 }" @click="selectCategoey(-1)">全部</view>
<view class="item" :id="'category-2-' + oneIndex" :class="{ selected: categoryId == oneIndex }" @click="selectCategoey(oneIndex)" v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
<view class="item" id="category-2--1" :class="{ selected: categoryId == -1 }" @click="selectCategory(-1)">全部</view>
<view class="item" :id="'category-2-' + oneIndex" :class="{ selected: categoryId == oneIndex }" @click="selectCategory(oneIndex)" v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
{{ one.category_name }}
</view>
</scroll-view>
@@ -50,14 +49,14 @@
<view class="screen-category-popup" @click="$refs.screenCategoryPopup.close()">
<scroll-view scroll-y="true" class="screen-category" :class="{ 'screen-category-4': value.template == 4 }">
<view class="title">全部</view>
<view class="item" :class="{ selected: categoryId == oneIndex }" @click="selectCategoey(oneIndex)" v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
<view class="item" :class="{ selected: categoryId == oneIndex }" @click="selectCategory(oneIndex)" v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
{{ one.category_name }}
</view>
</scroll-view>
</view>
</uni-popup>
</block>
<!---->
<scroll-view scroll-y="true" class="scroll-goods-view" lower-threshold="300" :scroll-top="scrollTop" @scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll">
<!--一级分类展示商品显示-->
@@ -70,6 +69,9 @@
<view class="goods-img" @click="toDetail(item)">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
<view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }}</view>
<view class="sell-out" v-if="item.goods_stock <= 0">
<text class="iconfont icon-shuqing"></text>
</view>
</view>
<view class="info-wrap">
<view class="name-wrap" @click="toDetail(item)">
@@ -293,7 +295,7 @@
oneCategorySelect: function() {
this.scrollTop = -1;
this.goodsList = [];
this.selectCategoey(-1);
this.selectCategory(-1);
},
select: function() {
if (this.index == this.select) {
@@ -607,7 +609,7 @@
}
this.$emit('selectsku', data);
},
selectCategoey(index) {
selectCategory(index) {
this.categoryId = index;
this.pageIndex = 0;
this.totalPage = 1;
@@ -667,7 +669,7 @@
this.$emit('switch', index);
} else {
let index = this.categoryId - 1;
this.selectCategoey(index);
this.selectCategory(index);
}
} else {
if (this.categoryId == -1 || (this.category.child_list && this.categoryId == this.category.child_list.length - 1)) {
@@ -675,7 +677,7 @@
this.$emit('switch', index);
} else {
let index = this.categoryId + 1;
this.selectCategoey(index);
this.selectCategory(index);
}
}
},
@@ -995,7 +997,27 @@
height: 100%;
}
}
.sell-out{
position: absolute;
z-index: 1;
width: 180rpx;
height: 180rpx;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
border-radius: $border-radius;
text{
color: #fff;
font-size: 150rpx;
position: absolute;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
}
}
.info-wrap {
flex: 1;
display: flex;
@@ -1171,10 +1193,28 @@
height: auto;
margin-right: 0;
line-height: 1;
position: relative;
image {
border-radius: 8rpx;
}
.sell-out{
position: absolute;
z-index: 1;
width: 100%;
height: auto;
top: 0;
left: 0;
bottom:0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
border-radius: $border-radius;
text{
color: #fff;
font-size: 240rpx;
}
}
}
.select-sku {
@@ -1200,7 +1240,7 @@
.screen-category-wrap {
display: flex;
padding-top: 20rpx;
.icon-unfold {
font-size: 24rpx;
color: #999;

185
components/diy-components/diy-category.vue
View File

@@ -2,20 +2,20 @@
<view data-component-name="diy-category" :class="['category-page-wrap', 'category-template-' + value.template]"
:style="{height: 'calc(100vh - '+ tabBarHeight +')' }">
<!-- #ifdef MP-WEIXIN -->
<!-- <block v-if="value.template == 4">
<block v-if="value.template == 4">
<view class="search-box" v-if="value.search" @click="$util.redirectTo('/pages_tool/goods/search')" :style="navbarInnerStyle">
<view class="search-content">
<input type="text" class="uni-input font-size-tag" maxlength="50" :placeholder="$lang('search')" confirm-type="search" disabled="true" />
<input type="text" class="uni-input font-size-tag" maxlength="50" :placeholder="$lang('search')" confirm-type="search" readonly="true" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
</view>
<view :style="navbarInnerStyle" v-if="!value.search">商品分类</view>
</block> -->
</block>
<block v-if="value.template != 4">
<!-- <view :style="navbarInnerStyle">商品分类</view> -->
<view :style="navbarInnerStyle">商品分类</view>
<view class="search-box" v-if="value.search" @click="$util.redirectTo('/pages_tool/goods/search')" :style="wxSearchHeight">
<view class="search-content">
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" disabled="true" />
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" readonly="true" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
</view>
@@ -24,11 +24,12 @@
<!-- #ifdef H5 -->
<view class="search-box" v-if="value.search" @click="$util.redirectTo('/pages_tool/goods/search')">
<view class="search-content">
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" disabled="true" />
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" readonly="true" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
</view>
<!-- #endif -->
<view class="template-four wx" v-if="value.template == 4">
<scroll-view scroll-x="true" class="template-four-wrap" :scroll-with-animation="true" :scroll-into-view="'category-one-' + oneCategorySelect" enable-flex="true">
<view class="category-item" :id="'category-one-' + index" v-for="(item, index) in templateFourData" :key="index" :class="{ select: oneCategorySelect == index }" @click="templateFourOneFn(index)">
@@ -71,12 +72,13 @@
{ 'border-bottom': value.template == 4 && select + 1 === index },
{ 'border-top': value.template == 4 && select - 1 === index }
]" @click="switchOneCategory(index)">
<view class="">{{ item.category_name }}</view>
<view>{{ item.category_name }}</view>
</view>
</view>
</scroll-view>
<view class="right-flex-wrap">
<scroll-view scroll-y="true" class="content-wrap" v-if="value.template == 1 || loadType == 'all'"
ref="contentWrap" :scroll-into-view="categoryId" :scroll-with-animation="true"
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
@@ -113,8 +115,8 @@
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix"></image>
<view class="tips">暂时没有分类哦！</view>
</view>
<!-- <view class="cart-box" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length">
<view class="cart-bottom-block" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length"></view>
<view class="cart-box" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length" :style="{ bottom: tabBarHeight }" :class="{ active: isIphoneX }">
<view class="left-wrap">
<view class="cart-icon" ref="cartIcon" :animation="cartAnimation" @click="$util.redirectTo('/pages/goods/cart')">
<text class="iconfont icon-ziyuan1"></text>
@@ -127,9 +129,10 @@
<text class="unit font-size-tag price-font">.{{ cartTotalMoney[1] ? cartTotalMoney[1] : '00' }}</text>
</view>
</view>
<view class="right-wrap"><button type="primary" class="settlement-btn" @click="settlement">去结算</button>
<view class="right-wrap">
<button type="primary" class="settlement-btn" @click="settlement">去结算</button>
</view>
</view> -->
</view>
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index" v-for="(item, index) in carIconList"></view>
@@ -176,34 +179,27 @@
cartAnimation: {},
loadType: '',
templateFourData: [],
isIphoneX: false, //判断手机是否是iphoneX以上,
lang:uni.getStorageSync("lang")//en-us 英文
};
},
created() {
this.isIphoneX = this.$util.uniappIsIPhoneX();
this.getCategoryTree();
this.loadType = this.value.goodsLevel == 1 && this.value.loadType == 'all' ? 'all' : 'part';
},
mounted() {
query = uni.createSelectorQuery().in(this);
query
.select('.content-wrap')
.boundingClientRect(data => {
if (data) contentWrapHeight = data.height;
})
.exec();
query.select('.content-wrap').boundingClientRect(data => {
if (data) contentWrapHeight = data.height;
}).exec();
setTimeout(() => {
query
.select('.end-tips')
.boundingClientRect(data => {
if (data && data.top > contentWrapHeight) this.endTips = 1;
})
.exec();
query
.select('.cart-icon')
.boundingClientRect(data => {
if (data) cartPosition = data;
})
.exec();
query.select('.end-tips').boundingClientRect(data => {
if (data && data.top > contentWrapHeight) this.endTips = 1;
}).exec();
query.select('.cart-icon').boundingClientRect(data => {
if (data) cartPosition = data;
}).exec();
if (this.value.template == 1) this.getHeightArea(-1);
}, 500);
},
@@ -250,7 +246,7 @@
style += 'padding-top:' + this.navbarHeight + 'px;';
style += 'text-align: center;';
style += 'line-height:' + menuButtonInfo.height * 2 + 'rpx;';
style += 'font-size: 14px;';
style += 'font-size: 16px;';
style += 'padding-bottom: 10rpx;';
}
return style;
@@ -282,27 +278,48 @@
pageShow() {
this.$store.dispatch('getCartNumber');
if (!this.heightArea.length) this.getHeightArea(-1);
this.dealCategoryData()
},
dealCategoryData() {
if (uni.getStorageSync('tabBarParams')) {
if (this.value.template != 4) {
this.categoryTree.forEach((item,index) => {
if(item.category_id == uni.getStorageSync('tabBarParams').split('=')[1]) {
this.select = index;
this.categoryId = 'category-' + index;
// 阻止切换分类之后滚动事件也立即执行
}
})
} else {
this.templateFourData.forEach((item,index) => {
if(item.category_id == uni.getStorageSync('tabBarParams').split('=')[1]) {
this.oneCategorySelect = index;
this.categoryId = 'category-' + index;
// 阻止切换分类之后滚动事件也立即执行
this.categoryTree = this.templateFourData[index].child_list || [];
this.select = 0;
}
})
}
uni.removeStorageSync('tabBarParams')
}
},
/**
* 获取高度区间
*/
getHeightArea(index) {
let heightArea = [];
query
.selectAll('.content-wrap .child-category')
.boundingClientRect(data => {
if (data && data.length) {
data.forEach((item, index) => {
if (index == 0) heightArea.push([0, item.height]);
else heightArea.push([heightArea[index - 1][1], heightArea[index - 1][1] +
item.height
]);
});
}
})
.exec();
query.selectAll('.content-wrap .child-category').boundingClientRect(data => {
if (data && data.length) {
data.forEach((item, index) => {
if (index == 0) heightArea.push([0, item.height]);
else heightArea.push([heightArea[index - 1][1], heightArea[index - 1][1] + item.height]);
});
}
}).exec();
this.heightArea = heightArea;
if (index != -1 && index < this.categoryTree.length - 1) this.$refs.categoryItem[index + 1].getGoodsList();
this.refreshData();
},
/**
* 获取全部分类
@@ -332,6 +349,7 @@
return item;
});
}
this.dealCategoryData()
}
}
});
@@ -364,8 +382,7 @@
break;
}
}
if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] -
scrollTop - contentWrapHeight < 300) {
if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] - scrollTop - contentWrapHeight < 300) {
this.$refs.categoryItem[this.select].getGoodsList();
}
}
@@ -433,6 +450,37 @@
});
},
settlement() {
// 是否有商品库存不足 不足最小购买数 超过最大购买数
var no_buy = false;
for (let k in this.cartList) {
let item = this.cartList[k];
for (let sku in item) {
if (item.max_buy && item.num > item.max_buy){
no_buy = true;
this.$util.showToast({title: '商品' + item.goods_name+'商品最多可购买'+item.max_buy+'件'})
break;
}
if (typeof item[sku] == 'object') {
if (item[sku].num > item[sku].stock){
no_buy = true;
this.$util.showToast({title: '商品' + item.goods_name+'库存不足'})
break;
}
if (item[sku].min_buy && item[sku].num < item[sku].min_buy){
no_buy = true;
this.$util.showToast({title: '商品' + item.goods_name+'商品最少要购买'+item[sku].min_buy+'件'})
break;
}
}
}
}
if(no_buy) return;
if (!this.cartIds.length || this.isSub) return;
this.isSub = true;
@@ -520,7 +568,7 @@
},
// 操作多规格商品弹框后，刷新商品数据
refreshData() {
this.$refs.categoryItem[this.select].loadGoodsCartNum(true);
if(this.$refs.categoryItem) this.$refs.categoryItem[this.select].loadGoodsCartNum(true);
}
}
};
@@ -529,7 +577,8 @@
<style lang="scss">
.category-page-wrap {
width: 100vw;
// height: calc(100vh - var(--tab-bar-height, 0));
height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: #fff;
@@ -584,10 +633,16 @@
view {
color: #222222;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
// white-space: nowrap;
// text-overflow: ellipsis;
line-height: 1.3;
overflow: hidden;
text-align: center;
// display: -webkit-box;
// -webkit-line-clamp: 2;
// -webkit-box-orient: vertical;
word-break: break-all;
max-height: 100rpx;
}
&.border-top {
@@ -667,6 +722,11 @@
.cart-box {
height: 100rpx;
width: 100%;
position: fixed;
left: 0;
bottom: var(--tab-bar-height, 0);
// bottom: calc( constant(safe-area-inset-bottom) + 110rpx );
// bottom: calc( env(safe-area-inset-bottom) + 110rpx );
background: #fff;
border-top: 1px solid #f5f5f5;
box-sizing: border-box;
@@ -739,6 +799,11 @@
}
}
.cart-box.active {
bottom: calc(constant(safe-area-inset-bottom) + 110rpx) !important;
bottom: calc(env(safe-area-inset-bottom) + 110rpx) !important;
}
.cart-point {
width: 26rpx;
height: 26rpx;
@@ -785,7 +850,7 @@
}
.cart-box {
position: relative;
// position: relative;
z-index: 2;
}
@@ -865,15 +930,30 @@
}
.text {
padding: 2rpx 16rpx;
padding: 2rpx 0;
border-radius: 40rpx;
font-size: $font-size-tag;
box-sizing: border-box;
width: 100%;
box-sizing: border-box;
text-align: center;
overflow: hidden;
}
.ellipsis {
// text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
&.selected {
.text {
background-color: $base-color;
color: var(--btn-text-color);
line-height: 1.3;
border: 4rpx solid transparent;
border-color: $base-color;
}
}
}
@@ -1004,4 +1084,7 @@
border-bottom-right-radius: 8rpx;
}
}
.cart-bottom-block {
height: 100rpx;
}
</style>

9
components/diy-components/diy-comp-extend.vue
View File

@@ -1,5 +1,7 @@
<template>
<view data-component-name="diy-comp-extend"></view>
<view data-component-name="diy-comp-extend" :style="value.pageStyle">
<view></view>
</view>
</template>
<script>
@@ -8,7 +10,10 @@ export default {
name: 'diy-comp-extend',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

571
components/diy-components/diy-coupon.vue
View File

@@ -1,23 +1,91 @@
<template>
<x-skeleton data-component-name="diy-coupon" type="banner" :loading="loading" :configs="skeletonConfig">
<view class="coupon-wrap" :class="'coupon-box-' + value.style" :style="[
value.couponType == 'img' && { backgroundImage: 'url(' + $util.img(value.couponBgUrl) + ')' },
value.couponType == 'color' && { backgroundColor: value.couponBgColor }
]">
<view :style="value.pageStyle" v-if="loading || (computedCouponList && computedCouponList.length)">
<x-skeleton type="banner" :loading="loading" :configs="skeletonConfig">
<view class="coupon-wrap" :class="'coupon-box-' + value.style" :style="[
value.couponType == 'img' && { backgroundImage: 'url(' + $util.img(value.couponBgUrl) + ')' },
value.couponType == 'color' && { backgroundColor: value.couponBgColor }
]">
<template v-if="value.style == '1'">
<swiper class="coupon-style-one" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<template v-if="value.style == '1'">
<swiper class="coupon-style-one" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view v-for="(item, index) in computedCouponList" class="coupon-item"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style1-bg.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view v-for="(item, index) in computedCouponList" class="coupon-item" v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style1-bg.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign">￥</text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '2'">
<swiper class="coupon-style-two" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_bg1.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign">￥</text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '领取' }}</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '3'">
<swiper class="coupon-style-three" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_shu.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign">￥</text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
@@ -26,125 +94,188 @@
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
<view class="coupon-type font-size-tag">
<text :style="{ color: value.limitColor }">{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}</text>
<view class="item-text">{{item.goods_type_name}}</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '领取' }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text }}
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用</view>
</view>
</swiper-item>
</swiper>
</template>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '4'">
<swiper class="coupon-style-four" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style4_bg.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign">￥</text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '立即领取' }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '2'">
<swiper class="coupon-style-two" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_bg1.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign">￥</text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
<template v-if="value.style == '5'">
<view class="coupon-style-five">
<view class="coupon-all">
<view class="coupon-box">
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="index" @click="couponAction(item, index)">
<image :src="$util.img('public/uniapp/coupon/style5_bg.png')"></image>
<view class="coupon">
<view class="coupon-info">
<view class="coupon-num" v-if="item.discount == '0.00'" :style="{ color: value.moneyColor }">
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">元</text>
</view>
<view class="coupon-num" v-else :style="{ color: value.moneyColor }">
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
</view>
<view class="coupon-line"></view>
<view class="coupon-content">
<view class="coupon-type">
<view class="coupon-name" :style="{ color: value.nameColor }">{{ item.coupon_name }}</view>
<text class="coupon-least" :style="{ color: value.limitColor }" v-if="item.at_least > 0">满{{ Number(item.at_least) }}元可用</text>
<text class="coupon-least" :style="{ color: value.limitColor }" v-else>无门槛优惠券</text>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '立即领取' }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</view>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text || '领取' }}
</view>
<view class="coupon-get use" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</template>
<template v-if="value.style == '3'">
<swiper class="coupon-style-three" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_shu.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign">￥</text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
<view class="coupon-type font-size-tag">
<text :style="{ color: value.limitColor }">{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}</text>
<view class="item-text" v-if="item.goods_type == 1">所有商品可用</view>
<view class="item-text" v-else-if="item.goods_type == 2">指定商品可用</view>
<view class="item-text" v-else-if="item.goods_type == 3">指定商品不可用</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text || '领取' }}
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '4'">
<swiper class="coupon-style-four" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style4_bg.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign">￥</text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
<template v-if="value.style == '6'">
<swiper class="coupon-style-six" circular>
<swiper-item class="style-six-wrap" v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex">
<view class="coupon" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-1.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-content">
<view class="price-wrap">
<text class="price" :style="{ color: value.moneyColor }">{{ (item.discount == '0.00' ? item.money : item.discount) | moneyConduct }}</text>
<text class="unit">{{ item.discount == '0.00' ? '元' : '折' }}</text>
</view>
<text class="text">优惠券</text>
</view>
<!-- <text class="btn" v-if="item.useState == 0" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">{{ value.btnStyle.text }}</text>
</text>
<text class="btn" v-if="parseInt(item.useState)" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">去使用</text>
</text> -->
<text class="btn" v-if="item.useState == 0" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">{{ value.btnStyle.text }}</text>
</text>
<text class="btn to-use" v-if="item.useState == 1" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">去使用</text>
</text>
<text class="btn disabled" v-if="item.useState == 2" :style="{
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">已抢光</text>
</text>
<text class="btn disabled" v-if="item.useState == 3" :style="{
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">已失效</text>
</text>
<text class="btn disabled" v-if="item.useState == 4" :style="{
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">已使用</text>
</text>
<text class="limit" :style="{ color: value.limitColor }" v-if="parseFloat(item.at_least) > 0">满{{ item.at_least | moneyConduct }}元使用</text>
<text class="limit" :style="{ color: value.limitColor }" v-else>无门槛使用</text>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text || '立即使用' }}
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '5'">
<view class="coupon-style-five">
<view class="coupon-all">
<view class="coupon-box">
<div v-if="computedCouponList.length <= 2" @click="$util.redirectTo('/pages/goods/category')"
class="coupon coupon-null" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-2.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}">
<div class="coupon-content" :style="{ color: value.moneyColor }">
<span class="price">+</span>
<span class="text">暂无优惠券</span>
</div>
<span class="limit" :style="{ color: value.limitColor }">去逛逛</span>
</div>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '7'">
<scroll-view class="coupon-style-seven" scroll-x="true">
<view class="wrap">
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="index" @click="couponAction(item, index)">
<image :src="$util.img('public/uniapp/coupon/style5_bg.png')"></image>
<image :src="$util.img('public/uniapp/coupon/style7_bg.png')"></image>
<view class="coupon">
<view class="coupon-info">
<view class="coupon-num" v-if="item.discount == '0.00'" :style="{ color: value.moneyColor }">
@@ -156,115 +287,32 @@
<text class="font-size-tag coupon-sign">折</text>
</view>
</view>
<view class="coupon-type">
<text class="coupon-name" :style="{ color: value.limitColor }" v-if="item.at_least > 0">满{{ Number(item.at_least) }}元可用</text>
<text class="coupon-name" :style="{ color: value.limitColor }" v-else>无门槛优惠券</text>
<view class="coupon-least" v-if="item.validity_type == 0" :style="{ color: value.limitColor }">有效期至{{ $util.timeStampTurnTime(item.end_time, 'Y-m-d') }}</view>
<view class="coupon-least" v-else-if="item.validity_type == 1" :style="{ color: value.limitColor }">领取后{{ item.fixed_term }}天有效</view>
<view class="coupon-least" v-else :style="{ color: value.limitColor }">领取后长期有效</view>
</view>
<view class="coupon-line"></view>
<view class="coupon-content">
<view class="coupon-type">
<view class="coupon-name" :style="{ color: value.nameColor }">{{ item.coupon_name }}</view>
<text class="coupon-least" :style="{ color: value.limitColor }" v-if="item.at_least > 0">满{{ Number(item.at_least) }}元可用</text>
<text class="coupon-least" :style="{ color: value.limitColor }" v-else>无门槛优惠券</text>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">{{ value.btnStyle.text || '立即领取' }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '立即领取' }}</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</view>
</view>
</view>
</view>
</template>
</scroll-view>
</template>
<template v-if="value.style == '6'">
<swiper class="coupon-style-six" circular>
<swiper-item class="style-six-wrap" v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex">
<view class="coupon" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-1.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-content">
<view class="price-wrap">
<text class="price" :style="{ color: value.moneyColor }">{{ (item.discount == '0.00' ? item.money : item.discount) | moneyConduct }}</text>
<text class="unit">{{ item.discount == '0.00' ? '元' : '折' }}</text>
</view>
<text class="text">优惠券</text>
</view>
<text class="btn" v-if="item.useState == 0" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">{{ value.btnStyle.text }}</text>
</text>
<text class="btn" v-if="parseInt(item.useState)" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">去使用</text>
</text>
<text class="limit" :style="{ color: value.limitColor }" v-if="parseFloat(item.at_least) > 0">满{{ item.at_least | moneyConduct }}元使用</text>
<text class="limit" :style="{ color: value.limitColor }" v-else>无门槛使用</text>
</view>
<ns-login ref="login"></ns-login>
<div v-if="computedCouponList.length <= 2" @click="$util.redirectTo('/pages/goods/category')"
class="coupon coupon-null" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-2.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}">
<div class="coupon-content" :style="{ color: value.moneyColor }">
<span class="price">+</span>
<span class="text">暂无优惠券</span>
</div>
<span class="limit" :style="{ color: value.limitColor }">去逛逛</span>
</div>
</swiper-item>
</swiper>
</template>
</view>
<template v-if="value.style == '7'">
<scroll-view class="coupon-style-seven" scroll-x="true">
<view class="wrap">
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="index" @click="couponAction(item, index)">
<image :src="$util.img('public/uniapp/coupon/style7_bg.png')"></image>
<view class="coupon">
<view class="coupon-info">
<view class="coupon-num" v-if="item.discount == '0.00'" :style="{ color: value.moneyColor }">
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">元</text>
</view>
<view class="coupon-num" v-else :style="{ color: value.moneyColor }">
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign">折</text>
</view>
</view>
<view class="coupon-type">
<text class="coupon-name" :style="{ color: value.limitColor }" v-if="item.at_least > 0">满{{ Number(item.at_least) }}元可用</text>
<text class="coupon-name" :style="{ color: value.limitColor }" v-else>无门槛优惠券</text>
<view class="coupon-least" :style="{ color: value.limitColor }">有效期至{{ $util.timeStampTurnTime(item.end_time, 'yearmonthday') }}</view>
</view>
<view class="coupon-line"></view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text || '立即领取' }}
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<ns-login ref="login"></ns-login>
</view>
</x-skeleton>
</x-skeleton>
</view>
</template>
<script>
@@ -313,17 +361,11 @@
couponItemHeight() {
var width = '';
const screenWidth = uni.getSystemInfoSync().windowWidth;
if (this.value.style == '1') width = [screenWidth - this.rpxUpPx(210) * 3 - this.rpxUpPx(this.value.margin
.both * 2) * 2] / 6;
else if (this.value.style == '2') width = [screenWidth - this.rpxUpPx(210) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
else if (this.value.style == '3') width = [screenWidth - this.rpxUpPx(24) * 2 - this.rpxUpPx(194) * 3 -
this.rpxUpPx(this.value.margin.both * 2) * 2
] / 6;
else if (this.value.style == '4') width = [screenWidth - this.rpxUpPx(206) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
else if (this.value.style == '6') width = [screenWidth - this.rpxUpPx(208) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
if (this.value.style == '1') width = [screenWidth - this.rpxUpPx(210) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else if (this.value.style == '2') width = [screenWidth - this.rpxUpPx(210) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else if (this.value.style == '3') width = [screenWidth - this.rpxUpPx(24) * 2 - this.rpxUpPx(194) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else if (this.value.style == '4') width = [screenWidth - this.rpxUpPx(206) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else if (this.value.style == '6') width = [screenWidth - this.rpxUpPx(208) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
return width;
},
@@ -357,12 +399,18 @@
if (data != null) {
this.couponList = data;
this.couponList.forEach(v => {
if (v.max_fetch != 0 && v.member_coupon_num && v.member_coupon_num >= v
.max_fetch) {
v.useState = 1;
} else {
v.useState = 0;
}
// if (v.count == v.lead_count) v.useState = 2;
// else if (v.max_fetch != 0 && v.member_coupon_num && v.member_coupon_num >= v.max_fetch) v.useState = 1;
// else v.useState = 0;
// if(v.received_type && v.received_type == 'expire'){
// v.useState = 2;
// }
if (v.count == v.lead_count) v.useState = 2;
else if (v.max_fetch == 0 || (v.max_fetch != 0 && !v.member_coupon_num) || (v.max_fetch != 0 && v.member_coupon_num && v.max_fetch > v.member_coupon_num)) v.useState = 0;
else if (v.wait_coupon_num) v.useState = 1
else if (v.lose_coupon_num) v.useState = 3;
else if (v.use_coupon_num) v.useState = 4;
});
}
this.loading = false;
@@ -372,18 +420,34 @@
couponAction(item, index) {
if (item.useState == 0) {
this.receiveCoupon(item, index);
} else if (parseInt(item.useState)) {
} else {
this.couponTap(item, index);
}
// if(item.received_type == 'out'){
// this.$util.showToast({
// title: '该优惠券已抢光'
// });
// }else if(item.received_type == 'expire'){
// this.$util.showToast({
// title: '该优惠券已过期'
// });
// }else if(item.received_type == 'limit'){
// this.$util.showToast({
// title: '该优惠券领取已达上限'
// });
// }
},
couponTap(item, index) {
if (item.count == item.lead_count) {
if(item.useState == 2){
this.$util.showToast({
title: '该优惠券已抢光'
});
return;
}
if (item.useState == 0) this.receiveCoupon(item, index);
else if (item.useState == 3 || item.useState == 4) this.$util.redirectTo('/pages_tool/member/coupon',{state: item.useState == 4 ? 2 : item.useState})
else this.toGoodsList(item);
},
// 领取优惠券
@@ -527,17 +591,21 @@
.coupon-get {
position: relative;
top: 2rpx;
top: 0;
right: 12rpx;
font-size: 24rpx;
letter-spacing: 16rpx;
width: 26rpx;
&.use {
top: 0;
right: 4rpx;
letter-spacing: 4rpx;
}
&.three-text {
line-height: 1.2;
}
}
.coupon-info {
@@ -873,6 +941,12 @@
line-height: 1;
transform: scale(0.8);
}
&.disabled {
background-color: #eee;
color: #909399;
}
}
.coupon-content {
@@ -1045,6 +1119,11 @@
font-size: $font-size-tag;
box-sizing: border-box;
flex-shrink: 0;
&.three-text {
writing-mode: vertical-rl;
}
}
}
}

276
components/diy-components/diy-digit.vue Normal file
View File

@@ -0,0 +1,276 @@
<template>
<view :style="componentStyle">
<scroll-view
:class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'"
>
<view class="uni-scroll-view-content">
<view
v-for="(item, index) in value.list"
:key="index"
:class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']"
:style="{ width: (100 / value.rowCount + '%') + ';' }"
>
<view style="display:flex;">
<view :style="{
'line-height': '1.2;',
'font-size': (value.font.titlesize * 2 + 'rpx') + ';',
'font-weight': '600;',
'color': value.font.titlecolor + ';'
}">
<uv-count-to
:ref="`countTo-${index}`"
:autoplay="true"
:startVal="30"
:endVal="item.title"
:decimals="getvalue(item.title)"
decimal="."
></uv-count-to>
<text :style="{
'margin-left': '4rpx;',
'font-size': (value.font.unitsize * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.unitcolor + ';'
}">{{ item.unit }}</text>
</view>
</view>
<view class="graphic-text">
<text :style="{
'font-size': (value.font.descsize * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.desccolor + ';'
}">{{ item.desc }}</text>
</view>
</view>
</view>
</scroll-view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
import uvCountTo from '@/components/uv-count-to/uv-count-to.vue'
import nsLogin from '@/components/ns-login/ns-login.vue'
export default {
name: 'diy-digit',
components: {
uvCountTo,
nsLogin
},
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0
}
},
created() {
// 组件创建时的逻辑
},
watch: {
componentRefresh(newValue) {
// 监听组件刷新
}
},
computed: {
componentStyle() {
let style = '';
style += 'background-image:url(' + this.$util.img(this.value.imageUrl) + ');background-size:100% 100%;';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
}
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
return style;
}
},
methods: {
// 获取小数位数
getvalue(value) {
return value % 1 !== 0 ? 2 : 0;
},
// 页面跳转
redirectTo(item) {
if (!item.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
console.log(item);
this.$util.diyRedirectTo(item);
} else {
this.$refs.login.open(item.wap_url);
}
},
// 轮播切换
swiperChange(event) {
this.swiperCurrent = event.detail.current;
}
}
}
</script>
<style lang="scss" scoped>
.graphic-nav {
padding: 16rpx;
box-sizing: border-box;
&.fixed-layout {
.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
}
}
&.singleSlide {
.uni-scroll-view-content {
display: flex;
}
.graphic-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.uni-swiper-dots-horizontal {
bottom: 0rpx;
}
&.straightLine {
.uni-swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.uni-swiper-dot {
width: 14rpx;
height: 14rpx;
}
}
}
.graphic-nav-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.graphic-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
.graphic-text {
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
&.alone {
padding-top: 0;
}
}
&.text {
.graphic-text {
padding-top: 0;
}
}
.graphic-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100rpx;
height: 100rpx;
font-size: 90rpx;
.tag {
position: absolute;
top: -10rpx;
right: -24rpx;
color: #fff;
border-radius: 24rpx;
border-bottom-left-radius: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: #606266;
}
}
}
&.pageSlide {
.graphic-nav-item {
flex-shrink: 0;
}
}
}
.newright {
margin-right: 16rpx;
}
.swiper-dot-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -20rpx;
padding-bottom: 8rpx;
.swiper-dot {
background-color: rgba(0, 0, 0, 0.3);
margin: 8rpx;
&.active {
background-color: #000;
}
}
&.straightLine {
.swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.swiper-dot {
width: 15rpx;
border-radius: 50%;
height: 15rpx;
}
}
}
</style>

85
components/diy-components/diy-fenxiao-goods-list.vue
View File

@@ -1,48 +1,48 @@
<template>
<view data-component-name="diy-fenxiao-goods-list" class="diy-fenxiao" v-if="list.length" :class="['goods-list', value.template, value.style]" :style="goodsListWarpCss">
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"/>
</view>
<view class="info-wrap" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<view class="name-wrap">
<view v-if="value.goodsNameStyle.control" class="goods-name"
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]"
>
{{ item.goods_name }}
</view>
<view :style="value.pageStyle" v-if="list && list.length">
<view class="diy-fenxiao" v-if="list.length" :class="['goods-list', value.template, value.style]" :style="goodsListWarpCss">
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"/>
</view>
<view class="pro-info">
<view class="discount-price">
<view class="price-wrap" v-if="value.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">赚 ￥</text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ item.commission_money.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ '.' + item.commission_money.split('.')[1] }}</text>
</view>
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 0"
:style="{
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}"
@click.stop="followGoods(item, index)"
<view class="info-wrap" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<view class="name-wrap">
<view v-if="value.goodsNameStyle.control" class="goods-name"
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]"
>
关注
</view>
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 1"
:style="{
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}"
@click.stop="delFollowTip(item, index)"
>
取消关注
{{ item.goods_name }}
</view>
</view>
<view class="delete-price" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
￥{{ item.discount_price }}
<view class="pro-info">
<view class="discount-price">
<view class="price-wrap" v-if="value.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">赚 ￥</text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ item.commission_money.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ '.' + item.commission_money.split('.')[1] }}</text>
</view>
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 0"
:style="{
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}"
@click.stop="followGoods(item, index)">
关注
</view>
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 1"
:style="{
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}"
@click.stop="delFollowTip(item, index)">
取消关注
</view>
</view>
<view class="delete-price" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
￥{{ item.discount_price }}
</view>
</view>
</view>
</view>
@@ -55,7 +55,10 @@ export default {
name: 'diy-fenxiao-goods-list',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

17
components/diy-components/diy-float-btn.vue
View File

@@ -1,12 +1,13 @@
<template>
<view data-component-name="diy-float-btn" class="float-btn" :class="{ left_top: value.bottomPosition == 1, right_top: value.bottomPosition == 2, left_bottom: value.bottomPosition == 3, right_bottom: value.bottomPosition == 4 }" :style="style">
<block v-for="(item, index) in value.list" :key="index">
<view class="button-box" @click="$util.diyRedirectTo(item.link)" :style="{ width: value.imageSize + 'px', height: value.imageSize + 'px', fontSize: value.imageSize + 'px' }">
<image v-if="!item.iconType || item.iconType == 'img'" :src="$util.img(item.imageUrl)" mode="aspectFit" :show-menu-by-longpress="true"/>
<diy-icon v-else-if="item.iconType && item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"></diy-icon>
</view>
</block>
<view :style="value.pageStyle">
<view class="float-btn" :class="{ left_top: value.bottomPosition == 1, right_top: value.bottomPosition == 2, left_bottom: value.bottomPosition == 3, right_bottom: value.bottomPosition == 4 }" :style="style">
<block v-for="(item, index) in value.list" :key="index">
<view class="button-box" @click="$util.diyRedirectTo(item.link)" :style="{ width: value.imageSize + 'px', height: value.imageSize + 'px', fontSize: value.imageSize + 'px' }">
<image v-if="!item.iconType || item.iconType == 'img'" :src="$util.img(item.imageUrl)" mode="aspectFit" :show-menu-by-longpress="true"/>
<diy-icon v-else-if="item.iconType && item.iconType == 'icon'" :icon="item.icon" :value="item.style ? item.style : null"></diy-icon>
</view>
</block>
</view>
</view>
</template>

11
components/diy-components/diy-follow-official-account.vue
View File

@@ -1,7 +1,9 @@
<template>
<!-- #ifdef MP -->
<view data-component-name="diy-follow-official-account" v-if="value.isShow">
<official-account></official-account>
<view :style="value.pageStyle">
<view v-if="value.isShow">
<official-account></official-account>
</view>
</view>
<!--#endif -->
</template>
@@ -12,7 +14,10 @@
name: 'diy-follow-official-account',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

26
components/diy-components/diy-goods-brand.vue
View File

@@ -1,17 +1,18 @@
<template>
<x-skeleton data-component-name="diy-goods-brand" type="waterfall" :loading="loading" :configs="skeletonConfig">
<view :class="['brand-wrap', value.ornament.type]" :style="warpCss">
<view :class="[value.style]">
<view class="title-wrap" v-show="value.title" :style="{ color: value.textColor, fontWeight: value.fontWeight ? 'bold' : '' }">{{ value.title }}
</view>
<view class="ul-wrap">
<view class="li-item" v-for="(item, index) in list" :key="index">
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="handlerClick(item)" @tap="handlerClick(item)" @error="imgError(index)" :style="itemCss"/>
<view :style="value.pageStyle" v-if="loading || (list && list.length)">
<x-skeleton type="waterfall" :loading="loading" :configs="skeletonConfig">
<view :class="['brand-wrap', value.ornament.type]" :style="warpCss">
<view :class="[value.style]">
<view class="title-wrap" v-show="value.title" :style="{ color: value.textColor, fontWeight: value.fontWeight ? 'bold' : '' }">{{ value.title }}</view>
<view class="ul-wrap">
<view class="li-item" v-for="(item, index) in list" :key="index">
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="toDetail(item)" @error="imgError(index)" :style="itemCss"/>
</view>
</view>
</view>
</view>
</view>
</x-skeleton>
</x-skeleton>
</view>
</template>
<script>
@@ -25,7 +26,10 @@
name: 'diy-goods-brand',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
components: {

2
components/diy-components/diy-graphic-nav.vue
View File

@@ -3,7 +3,7 @@
<block v-if="value.showStyle == 'pageSlide'">
<swiper :class="['graphic-nav', 'pageSlide', value.carousel.type]" circular :indicator-dots="false" :style="swiperHeight" @change="swiperChange">
<swiper-item class="graphic-nav-wrap"
v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))">
v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))" :key="numIndex">
<!-- #ifdef MP -->
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
:key="index"

290
components/diy-components/diy-image-nav.vue Normal file
View File

@@ -0,0 +1,290 @@
<template>
<view :style="componentStyle">
<scroll-view
:class="['image-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'"
>
<view class="uni-scroll-view-content">
<view
v-for="(item, index) in value.list"
:key="index"
:class="['image-nav-item', value.mode]"
style="margin-right: 28rpx;"
>
<!-- 图片部分 -->
<view v-if="value.mode != 'text'" class="image-img" :style="{
'font-size': (value.imageSize * 2 + 'rpx') + ';',
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}">
<image
v-if="item.link.wap_url"
:style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
:show-menu-by-longpress="true"
@tap="redirectTo(item.link)"
></image>
<image
v-else
:style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
:show-menu-by-longpress="true"
@tap="previewImg(item.imageUrl)"
></image>
</view>
<!-- 文字部分 -->
<text class="image-text" :style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'font-size': (value.font.size * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.color + ';'
}">{{ item.title }}</text>
</view>
</view>
</scroll-view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
import nsLogin from '@/components/ns-login/ns-login.vue'
export default {
name: 'diy-image-nav',
components: {
nsLogin
},
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0
}
},
created() {
// 组件创建时的逻辑
},
watch: {
componentRefresh(newValue) {
// 监听组件刷新
}
},
computed: {
componentStyle() {
let style = '';
style += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
}
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
return style;
},
swiperHeight() {
let height = 0;
if (this.value.mode == 'graphic') {
height = (49 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'img') {
height = (22 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'text') {
height = 43 * this.value.pageCount;
}
return 'height:' + (2 * height) + 'rpx';
},
isIndicatorDots() {
return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
}
},
methods: {
// 预览图片
previewImg(imageUrl) {
uni.previewImage({
current: 0,
urls: [this.$util.img(imageUrl)],
success: (res) => {},
fail: (res) => {},
complete: (res) => {}
});
},
// 页面跳转
redirectTo(link) {
if (!link.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
this.$util.diyRedirectTo(link);
} else {
this.$refs.login.open(link.wap_url);
}
},
// 轮播切换
swiperChange(event) {
this.swiperCurrent = event.detail.current;
}
}
}
</script>
<style lang="scss" scoped>
.image-nav {
padding: 16rpx;
box-sizing: border-box;
&.fixed-layout {
.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
}
}
&.singleSlide {
.uni-scroll-view-content {
display: flex;
}
.image-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.uni-swiper-dots-horizontal {
bottom: 0rpx;
}
&.straightLine {
.uni-swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.uni-swiper-dot {
width: 14rpx;
height: 14rpx;
}
}
}
.image-nav-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.image-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
.image-text {
padding-top: 12rpx;
line-height: 1.5;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
&.alone {
padding-top: 0;
}
}
&.text {
.image-text {
padding-top: 0;
}
}
.image-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 90rpx;
.tag {
position: absolute;
top: -10rpx;
right: -24rpx;
color: #fff;
border-radius: 24rpx;
border-bottom-left-radius: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: #606266;
}
}
}
}
.swiper-dot-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -20rpx;
padding-bottom: 8rpx;
.swiper-dot {
background-color: rgba(0, 0, 0, 0.3);
margin: 8rpx;
&.active {
background-color: #000;
}
}
&.straightLine {
.swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.swiper-dot {
width: 15rpx;
border-radius: 50%;
height: 15rpx;
}
}
}
</style>

4
components/diy-components/diy-index-page.vue
View File

@@ -268,7 +268,7 @@
.exec();
});
this.setModuleLocatinoFn();
this.setModuleLocationFn();
},
methods: {
initPageIndex() {
@@ -415,7 +415,7 @@
this.isUnfold = !this.isUnfold;
},
// 向vuex中的diyIndexPositionObj增加分类导航组件定位位置
setModuleLocatinoFn() {
setModuleLocationFn() {
const query = uni.createSelectorQuery().in(this);
query.select('.nav-top-category')
.boundingClientRect(data => {

2
components/diy-components/diy-kefu.vue
View File

@@ -1,6 +1,6 @@
<template>
<view data-component-name="diy-kefu" class="diy-kefu" :style="style">
<view class="fui-list-group merchgroup" v-for="(item,index) in value.list">
<view class="fui-list-group merchgroup" v-for="(item,index) in value.list" :key="index">
<view class="fui-list jump" v-if="index == 0">
<view class="fui-list-media">
<image class="round" :src="$util.img(item.imageUrl)" style="border-radius:6rpx"></image>

2
components/diy-components/diy-listmenu.vue
View File

@@ -3,7 +3,7 @@
<view class="fui-cell-group">
<!-- <image mode="widthFix" style="width: 100%;" :src="$util.img(item.imageUrl)"></image> -->
<view v-for="(item,index) in value.list" @click="redirectTo(item.link)" class="fui-cell" :class="item.iconType == 'img'?'img-cell':''">
<view v-for="(item,index) in value.list" @click="redirectTo(item.link)" class="fui-cell" :class="item.iconType == 'img'?'img-cell':''" :key="index">
<view class="fui-cell-icon" style="color:diyitem.style.iconcolo">
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"

2
components/diy-components/diy-map.vue
View File

@@ -1,6 +1,6 @@
<template>
<view data-component-name="diy-map" class="diy-map" :style="style">
<view class="fui-list-group merchgroup" style="margin-top:0" v-for="(item,index) in value.list">
<view class="fui-list-group merchgroup" style="margin-top:0" v-for="(item,index) in value.list" :key="index">
<map
id="map"
style="width: 100%; height:600rpx"

2
components/diy-components/diy-picture.vue
View File

@@ -1,7 +1,7 @@
<template>
<view data-component-name="diy-picture" class="diy-picture" :style="style">
<view class="fui-picture">
<view v-for="(item,index) in value.list" style="line-height: 0;">
<view v-for="(item,index) in value.list" style="line-height: 0;" :key="index">
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-if="item.link.wap_url" @click="handlerClick(item)" @tap="handlerClick(item)"></image>
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-else @click="handlerClick(item)" @tap="handlerClick(item)"></image>
</view>

4
components/diy-components/diy-pinfan.vue
View File

@@ -173,7 +173,7 @@
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().windowWidth;
const screenWidth = uni.getWindowInfo().windowWidth;
if (this.value.template == 'horizontal-slide') {
var width = "";
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy')
@@ -217,7 +217,7 @@
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
const screenWidth = uni.getWindowInfo().windowWidth;
var data = screenWidth * parseInt(res) / 750;
return Math.floor(data);
},

17
components/diy-components/diy-search.vue
View File

@@ -1,4 +1,5 @@
<template>
<view :style="value.pageStyle">
<view data-component-name="diy-search" class="diy-search">
<view class="diy-search-wrap" :class="value.positionWay" :style="fixedCss">
<view :class="['search-box','search-box-'+value.searchStyle]" :style="searchWrapCss" @click="handlerSearchClick" @tap="handlerSearchClick">
@@ -33,11 +34,19 @@
<view v-if="value.positionWay == 'fixed'" class="u-navbar-placeholder" :style="{ width: '100%', paddingTop: moduleHeight }"></view>
<ns-login ref="login"></ns-login>
</view>
</view>
</template>
<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let systemInfo = {};
try {
// 合并设备信息和窗口信息
systemInfo = {...uni.getDeviceInfo(), ...uni.getWindowInfo()};
} catch (e) {
// 兼容旧版本
systemInfo = uni.getSystemInfoSync();
}
let menuButtonInfo = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
@@ -125,7 +134,7 @@
},
fixedTop() {
let diyPositionObj = this.$store.state.diyGroupPositionObj;
let data = 0
let data = 0;
if (diyPositionObj.diySearch && diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
if (diyPositionObj.diySearch.moduleIndex > diyPositionObj.diyIndexPage.moduleIndex) {
data = diyPositionObj.nsNavbar.originalVal + diyPositionObj.diyIndexPage.originalVal;
@@ -175,7 +184,7 @@
},
mounted() {
if (this.value.positionWay == 'fixed')
this.setModuleLocatinoFn();
this.setModuleLocationFn();
},
methods: {
search() {
@@ -204,7 +213,7 @@
});
},
// 向vuex中的diyIndexPositionObj增加搜索组件定位位置
setModuleLocatinoFn() {
setModuleLocationFn() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.diy-search-wrap')

4
components/diy-components/diy-seckill.vue
View File

@@ -258,7 +258,7 @@
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().windowWidth;
const screenWidth = uni.getWindowInfo().windowWidth;
if (this.value.template == 'horizontal-slide') {
var width = '';
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy') width = this.rpxUpPx(this.value.goodsMarginNum * 2);
@@ -312,7 +312,7 @@
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().screenWidth;
const screenWidth = uni.getWindowInfo().screenWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},

11
components/diy-components/diy-store-label.vue
View File

@@ -1,9 +1,10 @@
<template>
<view :style="value.pageStyle">
<x-skeleton data-component-name="diy-store-label" type="banner" :loading="loading" :configs="skeletonConfig">
<view class="diy-store-label">
<block v-if="businessConfig.store_business == 'store'">
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]" :style="storeLabelWrapCss" :enable-flex="true">
<view v-for="(item, index) in storeLabel" :class="['item']">
<view v-for="(item, index) in storeLabel" :class="['item']" :key="index">
<diy-icon v-if="value.icon" class="icon-box" :icon="value.icon" :value="value.style ? value.style : 'null'"></diy-icon>
<text class="label-name" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item }}</text>
</view>
@@ -11,7 +12,7 @@
</block>
<block v-else>
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]" :style="storeLabelWrapCss" :enable-flex="true">
<view v-for="(item, index) in list" :class="['item']">
<view v-for="(item, index) in list" :class="['item']" :key="item.label_id || index">
<diy-icon v-if="value.icon" class="icon-box" :icon="value.icon" :value="value.style ? value.style : 'null'"></diy-icon>
<text class="label-name" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item.label_name }}</text>
</view>
@@ -19,6 +20,7 @@
</block>
</view>
</x-skeleton>
</view>
</template>
<script>
// 门店标签
@@ -26,7 +28,10 @@
name: 'diy-store-label',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

7
components/diy-components/diy-store.vue
View File

@@ -1,4 +1,5 @@
<template>
<view :style="value.pageStyle">
<view data-component-name="diy-store" class="store-wrap">
<block v-if="value.style == 1">
<view class="store-box store-one">
@@ -65,6 +66,7 @@
</view>
</block>
</view>
</view>
</template>
<script>
@@ -74,7 +76,10 @@ export default {
name: 'diy-store',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

7
components/diy-components/diy-text.vue
View File

@@ -1,4 +1,5 @@
<template>
<view :style="value.pageStyle">
<view data-component-name="diy-text" class="diy-text" @click="handlerClick(value.link)" @tap="handlerClick(value.link)" :style="warpCss">
<view :class="value.style == 'style-8' ? 'title2' : 'title'" :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor }">
<block v-if="value.style == 'style-0'" style="height: 40rpx; line-height: 40rpx;">
@@ -254,6 +255,7 @@
</view>
</view>
</view>
</view>
</template>
<script>
@@ -263,7 +265,10 @@ export default {
name: 'diy-text',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

704
components/diy-components/diy-video-list.vue Normal file
View File

@@ -0,0 +1,704 @@
<template>
<view :style="componentStyle">
<!-- 固定布局模式 -->
<view v-if="value.showStyle == 'fixed'" :class="['goods-list', 'row1-of' + value.rowCount]" style="padding:20rpx;">
<view
v-for="(item, index) in value.list"
:key="index"
class="goods-item"
@tap="showVideo(item)"
>
<view class="goods-img-wrap">
<image
class="goods-img"
style="border-radius:10rpx 10rpx 0 0;"
:src="$util.img(item.imageUrl)"
mode="widthFix"
@error="imgError(index)"
></image>
<view style="position:absolute;top:10rpx;right:10rpx;">
<image style="width:30rpx;" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')" mode="widthFix"></image>
</view>
</view>
<view class="info-wrap">
<view
class="goods-name"
:style="{
'font-size': (value.font.size * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.color + ';'
}"
>{{ item.title }}</view>
</view>
</view>
</view>
<!-- 其他布局模式 -->
<scroll-view
v-else
:class="['video-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'"
>
<view class="uni-scroll-view-content">
<view
v-for="(item, index) in value.list"
:key="index"
:class="['video-nav-item', value.mode]"
:style="{ width: (100 / value.rowCount + '%') + ';' }"
@tap="showVideo(item)"
>
<view class="video-img">
<image
v-if="item.iconType == 'img'"
:style="{
'max-width': '200rpx;',
'max-height': '200rpx;',
'border-radius': '8rpx;'
}"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
mode="widthFix"
:show-menu-by-longpress="true"
></image>
<view style="position:absolute;top:10rpx;right:10rpx;">
<image style="width:30rpx;" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')" mode="widthFix"></image>
</view>
</view>
<view
class="video-text"
:style="{
'margin-left': '16rpx;',
'font-size': (value.font.size * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.color + ';'
}"
>{{ item.title }}</view>
</view>
</view>
</scroll-view>
<!-- 视频播放弹窗 -->
<uni-popup
ref="videoPopup"
type="center"
style="background:transparent;width:100%;height:100%;"
>
<view class="video-container" style="position:fixed;top:30%;width:100%;left:0;">
<video
class="adaptive-video"
:autoPauseIfNavigate="true"
:autoPauseIfOpenNative="true"
:autoplay="false"
:enableAutoRotation="true"
id="myVideo"
:src="video_url"
:controls="true"
></video>
</view>
</uni-popup>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
name: 'diy-video-list',
components: {
uniPopup
},
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0,
video_url: ''
}
},
created() {
// 组件创建时的逻辑
},
watch: {
componentRefresh(newValue) {
// 监听组件刷新
}
},
computed: {
componentStyle() {
let style = '';
style += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
}
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
console.log(this.value);
return style;
},
swiperHeight() {
let height = 0;
if (this.value.mode == 'graphic') {
height = (49 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'img') {
height = (22 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'text') {
height = 43 * this.value.pageCount;
}
return 'height:' + (2 * height) + 'rpx';
},
isIndicatorDots() {
return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
}
},
methods: {
// 显示视频播放弹窗
showVideo(item) {
this.video_url = item.videoUrl;
this.$refs.videoPopup.open();
},
// 图片加载错误处理
imgError(index) {
// 图片加载失败的处理逻辑
console.log('图片加载失败:', index);
}
}
}
</script>
<style lang="scss" scoped>
.goods-name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.goods-list {
&.row1-of3 {
display: flex;
flex-wrap: wrap;
.goods-item {
position: relative;
display: flex;
flex-direction: column;
margin-top: 20rpx;
width: calc(33.3333333% - 14rpx);
box-sizing: border-box;
&:nth-child(3n + 3) {
width: calc(33.33% - 15rpx);
}
&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
margin-top: 0;
}
&:nth-child(3n) {
width: calc(33.3333333% - 15rpx);
}
&:nth-child(3n-1) {
margin-left: 20rpx;
margin-right: 20rpx;
}
&.shadow {
width: calc(33.3333333% - 18rpx);
&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
margin-top: 8rpx;
}
&:nth-child(1n) {
margin-left: 8rpx;
}
&:nth-child(3n-1) {
margin-left: 20rpx;
margin-right: 20rpx;
}
&:nth-child(3n) {
margin-right: 0;
margin-left: 0;
}
}
.goods-img-wrap {
position: relative;
overflow: hidden;
height: 220rpx;
}
.goods-img {
width: 100%;
}
.info-wrap {
display: flex;
flex-direction: column;
flex: 1;
.pro-info {
margin-top: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
.discount-price {
display: flex;
justify-content: space-between;
align-items: center;
.price-wrap {
white-space: nowrap;
.unit {
font-size: 24rpx !important;
}
.price {
font-size: 32rpx;
text {
font-weight: 700;
}
}
}
}
.delete-price {
text-decoration: line-through;
flex: 1;
line-height: 28rpx;
color: #909399;
font-size: 20rpx;
}
}
}
}
&.style-1 {
.pro-info {
.price-wrap {
line-height: 1;
}
.discount-price {
justify-content: unset !important;
align-items: baseline !important;
flex-wrap: wrap;
}
.delete-price {
margin-left: 10rpx;
}
}
}
&.style-2 {
.pro-info {
position: relative;
flex-direction: row !important;
align-items: center;
.price-wrap {
line-height: 1;
}
.discount-price {
align-items: flex-end !important;
flex-wrap: wrap;
justify-content: unset !important;
}
.delete-price {
margin: 20rpx 0;
flex-basis: 100% !important;
}
.buy-btn {
min-width: 112rpx;
height: 52rpx;
padding: 0 20rpx;
line-height: 52rpx;
text-align: center;
box-sizing: border-box;
}
}
}
.sell-out {
text {
font-size: 150rpx;
}
}
}
&.row1-of2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.goods-item {
position: relative;
margin-top: 20rpx;
width: calc(50% - 10rpx);
display: flex;
flex-direction: column;
box-sizing: border-box;
&:nth-child(2n) {
margin-right: 0 !important;
}
&:nth-of-type(1), &:nth-of-type(2) {
margin-top: 0;
}
&.shadow {
width: calc(50% - 18rpx);
&:nth-child(2n-1) {
margin-left: 8rpx;
}
&:nth-child(2n) {
margin-right: 8rpx !important;
}
&:nth-of-type(1), &:nth-of-type(2) {
margin-top: 8rpx;
}
}
.goods-img-wrap {
position: relative;
overflow: hidden;
height: 340rpx;
}
.goods-img {
width: 100%;
}
.info-wrap {
display: flex;
flex-direction: column;
flex: 1;
.sale {
flex-basis: 100%;
}
.pro-info {
margin-top: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
.discount-price {
.price-wrap {
white-space: nowrap;
.unit {
font-weight: 700;
font-size: 24rpx !important;
}
.price {
font-weight: 700;
font-size: 32rpx !important;
}
}
}
.delete-price {
text-decoration: line-through;
flex: 1;
line-height: 28rpx;
color: #909399;
font-size: 20rpx;
}
}
}
}
&.style-1 {
.pro-info {
.discount-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
.price-wrap {
display: inline-block;
text {
font-weight: 700;
}
line-height: 1;
}
}
.delete-price {
margin-top: 6rpx;
flex-basis: 100% !important;
}
}
}
&.style-2 {
.pro-info {
position: relative;
align-items: center;
.price-wrap {
line-height: 1;
}
.discount-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.delete-price {
margin-top: 4rpx;
flex-basis: 100% !important;
}
.sale {
line-height: 1;
margin-top: 10rpx;
}
.buy-btn {
min-width: 140rpx;
height: 52rpx;
padding: 0 20rpx;
line-height: 52rpx;
text-align: center;
box-sizing: border-box;
}
}
}
&.style-3 {
.pro-info {
.member-price {
margin-right: auto;
align-self: flex-end;
margin-bottom: 4rpx;
}
.sale {
line-height: 1;
align-self: center;
margin-top: 8rpx;
}
.discount-price {
display: flex;
flex-wrap: wrap;
flex: 1;
align-content: center;
.price-wrap {
display: flex;
align-items: baseline;
line-height: 1;
align-self: center;
}
}
}
.swiper {
padding: 20rpx 0;
}
}
.sell-out {
text {
font-size: 250rpx;
}
}
}
}
.video-container {
width: 100%;
height: 300px;
position: relative;
}
.adaptive-video {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
.video-nav {
padding: 16rpx;
box-sizing: border-box;
&.fixed-layout {
.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
&.singleSlide {
.uni-scroll-view-content {
display: flex;
}
.video-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.uni-swiper-dots-horizontal {
bottom: 0rpx;
}
&.straightLine {
.uni-swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.uni-swiper-dot {
width: 14rpx;
height: 14rpx;
}
}
}
.video-nav-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.video-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
.video-text {
padding-top: 12rpx;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
&.alone {
padding-top: 0;
}
}
&.text {
.video-text {
padding-top: 0;
}
}
.video-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 90rpx;
.tag {
position: absolute;
top: -10rpx;
right: -24rpx;
color: #fff;
border-radius: 24rpx;
border-bottom-left-radius: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: #606266;
}
}
}
}
.swiper-dot-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -20rpx;
padding-bottom: 8rpx;
.swiper-dot {
background-color: rgba(0, 0, 0, 0.3);
margin: 8rpx;
&.active {
background-color: #000;
}
}
&.straightLine {
.swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.swiper-dot {
width: 15rpx;
border-radius: 50%;
height: 15rpx;
}
}
}
</style>

7
components/diy-components/diy-video.vue
View File

@@ -1,5 +1,7 @@
<template>
<view :style="value.pageStyle">
<video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)" :poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover" @click="handlerClick(value.videoUrl)" @tap="handlerClick(value.videoUrl)"></video>
</view>
</template>
<script>
@@ -9,7 +11,10 @@
name: 'diy-video',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {