chore(组件): 引入DiyMinx的js及修复组件错误
This commit is contained in:
@@ -3,29 +3,29 @@
|
||||
<view class="article-wrap" :style="warpCss">
|
||||
<view :class="['list-wrap', value.style]" :style="warpCss">
|
||||
<!-- 自动垂直滚动 -->
|
||||
<swiper class="auto-scroll-swiper"
|
||||
:style="swiperStyle"
|
||||
:vertical="swiperConfig.vertical !== false"
|
||||
:autoplay="swiperConfig.autoplay !== false"
|
||||
:circular="swiperConfig.circular !== false"
|
||||
:interval="swiperConfig.interval || 3000"
|
||||
:duration="swiperConfig.duration || 500"
|
||||
<swiper class="auto-scroll-swiper" :style="swiperStyle" :vertical="swiperConfig.vertical !== false"
|
||||
:autoplay="swiperConfig.autoplay !== false" :circular="swiperConfig.circular !== false"
|
||||
:interval="swiperConfig.interval || 3000" :duration="swiperConfig.duration || 500"
|
||||
:display-multiple-items="safeDisplayMultipleItems">
|
||||
<swiper-item v-for="(item, index) in list" :key="index" @click="toDetail(item)">
|
||||
<view class="swiper-item-content">
|
||||
<view :class="['item', value.ornament.type]" :style="itemCss">
|
||||
<view class="article-img">
|
||||
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
|
||||
<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>
|
||||
<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>
|
||||
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date')
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -38,14 +38,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 文章
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
// 文章
|
||||
export default {
|
||||
name: 'diy-article',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
@@ -149,14 +151,15 @@
|
||||
if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.article-wrap {
|
||||
.article-wrap {
|
||||
.list-wrap {
|
||||
.auto-scroll-swiper {
|
||||
height: 600rpx; /* 可以根据需要调整高度 */
|
||||
height: 600rpx;
|
||||
/* 可以根据需要调整高度 */
|
||||
width: 100%;
|
||||
|
||||
.swiper-item-content {
|
||||
@@ -258,5 +261,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,71 +1,74 @@
|
||||
<template>
|
||||
<view data-component-name="diy-audio">
|
||||
<view class="fui-audio style1" :style="{background:value.background}" v-if="value.type == 'style-2'">
|
||||
<view class="fui-audio style1" :style="{ background: value.background }" v-if="value.type == 'style-2'">
|
||||
<view class="content" style="padding-top: 20rpx;">
|
||||
<view class="name" :style="{color:value.textcolor}">{{value.text}}</view>
|
||||
<view class="author" :style="{color:value.subtitlecolor}">{{value.desc}}----{{value.id}}</view>
|
||||
<view class="name" :style="{ color: value.textcolor }">{{ value.text }}</view>
|
||||
<view class="author" :style="{ color: value.subtitlecolor }">{{ value.desc }}----{{ value.id }}</view>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="progressBar" :style="{width:audiowidth}"></view>
|
||||
<view class="progressBar" :style="{ width: audiowidth }"></view>
|
||||
</view>
|
||||
<view class="time" :style="{color:value.timecolor}">
|
||||
{{audiotime}}
|
||||
<view class="time" :style="{ color: value.timecolor }">
|
||||
{{ audiotime }}
|
||||
</view>
|
||||
<view @click="play()" class="start" :class="status?'iconj icon-07zanting':'iconj icon-bofang'" style="padding-top: 18rpx"></view>
|
||||
<view @click="play()" class="start" :class="status ? 'iconj icon-07zanting' : 'iconj icon-bofang'"
|
||||
style="padding-top: 18rpx"></view>
|
||||
</view>
|
||||
<view class="fui-audio style3" :style="{background:value.background}" v-else>
|
||||
<view class="fui-audio style3" :style="{ background: value.background }" v-else>
|
||||
<!-- <audio src="/static/audio/bgm.mp3" controls loop></audio> -->
|
||||
<view class="img">
|
||||
<image :src="$util.img(value.imageUrl)"></image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="name" :style="{color:value.textcolor}">{{value.text}}</view>
|
||||
<view class="author" :style="{color:value.subtitlecolor}">{{value.desc}}</view>
|
||||
<view class="name" :style="{ color: value.textcolor }">{{ value.text }}</view>
|
||||
<view class="author" :style="{ color: value.subtitlecolor }">{{ value.desc }}</view>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="progressBar" :style="{width:audiowidth}"></view>
|
||||
<view class="progressBar" :style="{ width: audiowidth }"></view>
|
||||
</view>
|
||||
<view class="time" :style="{color:value.timecolor}">
|
||||
<view class="time" :style="{ color: value.timecolor }">
|
||||
<!-- {{audios[value.id].audiotime}} -->
|
||||
{{audiotime}}
|
||||
{{ audiotime }}
|
||||
</view>
|
||||
<view @click="play()" class="start" :class="status?'iconj icon-07zanting':'iconj icon-bofang'"></view>
|
||||
<view @click="play()" class="start" :class="status ? 'iconj icon-07zanting' : 'iconj icon-bofang'"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 音频
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
// 音频
|
||||
export default {
|
||||
name: 'diy-audio',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
audiosObj:[],
|
||||
audiosObj: [],
|
||||
audios: {},
|
||||
audioContext:null,
|
||||
audiotime:'00:01',
|
||||
audiowidth:0,
|
||||
status:0,//1播放0停止
|
||||
audioContext: null,
|
||||
audiotime: '00:01',
|
||||
audiowidth: 0,
|
||||
status: 0,//1播放0停止
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// console.log(this.value)
|
||||
this.audios[this.value.id] = {
|
||||
audiotime:'00:01',
|
||||
audiowidth:0
|
||||
audiotime: '00:01',
|
||||
audiowidth: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
videoWarpCss: function() {
|
||||
videoWarpCss: function () {
|
||||
var obj = '';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
@@ -78,28 +81,28 @@
|
||||
},
|
||||
methods: {
|
||||
|
||||
play(){
|
||||
play() {
|
||||
|
||||
var t = this.value.id, a = this.audiosObj[t] || !1;
|
||||
var e = {
|
||||
audio:this.$util.img(this.value.audioUrl),
|
||||
audio: this.$util.img(this.value.audioUrl),
|
||||
}
|
||||
if (!a) {
|
||||
a = uni.createInnerAudioContext("audio_" + t);
|
||||
var i = this.audiosObj;
|
||||
i[t] = a, this.audiosObj = i
|
||||
// uni.setStorageSync('audio_list',audio_list)
|
||||
var audio_list = uni.getStorageSync('audio_list')?uni.getStorageSync('audio_list'):[]
|
||||
if(audio_list.includes(t) == false){
|
||||
var audio_list = uni.getStorageSync('audio_list') ? uni.getStorageSync('audio_list') : []
|
||||
if (audio_list.includes(t) == false) {
|
||||
audio_list.push(t)
|
||||
uni.setStorageSync('audio_list',audio_list)
|
||||
uni.setStorageSync('audio_list', audio_list)
|
||||
}
|
||||
}
|
||||
console.log(uni.getStorageSync('audio_list'))
|
||||
var n = this;
|
||||
// console.log(a)
|
||||
a.onPlay(function() {
|
||||
var e = setInterval(function() {
|
||||
a.onPlay(function () {
|
||||
var e = setInterval(function () {
|
||||
var i = a.currentTime / a.duration * 100 + "%", s = Math.floor(Math.ceil(a.currentTime) / 60), o = (Math.ceil(a.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(a.currentTime);
|
||||
s < 10 && (s = "0" + s);
|
||||
var u = s + ":" + o, c = n.audios;
|
||||
@@ -109,19 +112,19 @@
|
||||
});
|
||||
|
||||
var s = n.$util.img(n.value.audioUrl), o = n.audios[n.value.id].seconds || 0, r = 0, u = 1;
|
||||
0 == u && a.onEnded(function(e) {
|
||||
c[t].status = !1,n.status=!1,c[t].seconds = 0,console.log(c),n.audios = c;
|
||||
0 == u && a.onEnded(function (e) {
|
||||
c[t].status = !1, n.status = !1, c[t].seconds = 0, console.log(c), n.audios = c;
|
||||
});
|
||||
var c = n.audios;
|
||||
c[t] || (c[t] = {}), a.paused && 0 == o ? (a.src = s, a.play(), 1 == u && (a.loop = !0),
|
||||
c[t].status = !0,n.status=!0, n.pauseOther(t)) : a.paused && o > 0 ? (a.play(), 0 == r ? a.seek(o) : a.seek(0),
|
||||
c[t].status = !0,n.status=!0, n.pauseOther(t)) : (a.pause(), c[t].status = !1,n.status=!1),n.audios = c;
|
||||
c[t].status = !0, n.status = !0, n.pauseOther(t)) : a.paused && o > 0 ? (a.play(), 0 == r ? a.seek(o) : a.seek(0),
|
||||
c[t].status = !0, n.status = !0, n.pauseOther(t)) : (a.pause(), c[t].status = !1, n.status = !1), n.audios = c;
|
||||
console.log(n.audios)
|
||||
},
|
||||
pauseOther: function(e) {
|
||||
pauseOther: function (e) {
|
||||
var t = this;
|
||||
// console.log(this.audiosObj[this.value.id]);
|
||||
var i = this.audiosObj[this.value.id],a = this.value.id
|
||||
var i = this.audiosObj[this.value.id], a = this.value.id
|
||||
// console.log(i)
|
||||
// console.log(a)
|
||||
// if (a != e) {
|
||||
@@ -167,21 +170,21 @@
|
||||
},
|
||||
|
||||
|
||||
play_bak(){
|
||||
play_bak() {
|
||||
|
||||
var t = this.value.id
|
||||
this.audioContext = uni.createInnerAudioContext("audio_" + this.value.id);
|
||||
this.audioContext.src = this.$util.img(this.value.audioUrl);
|
||||
var that = this
|
||||
if(this.status == 1){
|
||||
if (this.status == 1) {
|
||||
this.audioContext.pause();
|
||||
this.status = 0
|
||||
return false
|
||||
}
|
||||
this.audioContext.play();
|
||||
this.status = 1
|
||||
this.audioContext.onCanplay(function(s){
|
||||
var e = setInterval(function() {
|
||||
this.audioContext.onCanplay(function (s) {
|
||||
var e = setInterval(function () {
|
||||
var i = parseFloat(that.audioContext.currentTime) / parseFloat(that.audioContext.duration) * 100 + "%", s = Math.floor(Math.ceil(that.audioContext.currentTime) / 60), o = (Math.ceil(that.audioContext.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(that.audioContext.currentTime);
|
||||
s < 10 && (s = "0" + s);
|
||||
var u = s + ":" + o, c = that.audios;
|
||||
@@ -203,12 +206,11 @@
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.fui-audio {
|
||||
.fui-audio {
|
||||
width: 100%;
|
||||
border: 1rpx solid #eeeeee;
|
||||
padding: 0 30rpx 0 20rpx;
|
||||
@@ -216,130 +218,135 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio .img {
|
||||
.fui-audio .img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio .img image {
|
||||
.fui-audio .img image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio .name {
|
||||
.fui-audio .name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio .author {
|
||||
.fui-audio .author {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio .time {
|
||||
.fui-audio .time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio .start {
|
||||
.fui-audio .start {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
.progressBar {
|
||||
height: 2rpx;
|
||||
width: 0;
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style1 {
|
||||
.fui-audio.style1 {
|
||||
height: 86rpx;
|
||||
line-height: 82rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style1 .img,.fui-audio.style2 .img {
|
||||
.fui-audio.style1 .img,
|
||||
.fui-audio.style2 .img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style1 .name,.fui-audio.style2 .name {
|
||||
.fui-audio.style1 .name,
|
||||
.fui-audio.style2 .name {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style1 .author,.fui-audio.style2 .author {
|
||||
.fui-audio.style1 .author,
|
||||
.fui-audio.style2 .author {
|
||||
float: left;
|
||||
margin-left: 12rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style1 .time,.fui-audio.style4 .time {
|
||||
.fui-audio.style1 .time,
|
||||
.fui-audio.style4 .time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style1 .start {
|
||||
.fui-audio.style1 .start {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 40rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style1 .progress {
|
||||
.fui-audio.style1 .progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style2 {
|
||||
.fui-audio.style2 {
|
||||
height: 86rpx;
|
||||
line-height: 82rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style2 .img {
|
||||
.fui-audio.style2 .img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style2 .time {
|
||||
.fui-audio.style2 .time {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style2 .name {
|
||||
.fui-audio.style2 .name {
|
||||
margin-left: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style2 .start {
|
||||
.fui-audio.style2 .start {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 30rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style2 .progress,.fui-audio.style3 .progress {
|
||||
.fui-audio.style2 .progress,
|
||||
.fui-audio.style3 .progress {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style3 {
|
||||
.fui-audio.style3 {
|
||||
padding: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style3 .start {
|
||||
.fui-audio.style3 .start {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
left: 28rpx;
|
||||
@@ -350,78 +357,80 @@
|
||||
border-radius: 50%;
|
||||
text-indent: 18rpx;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style3 .img,.fui-audio.style4 .img {
|
||||
.fui-audio.style3 .img,
|
||||
.fui-audio.style4 .img {
|
||||
float: left;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style3 .content {
|
||||
.fui-audio.style3 .content {
|
||||
width: 468rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style3 .content,.fui-audio.style4 .content {
|
||||
.fui-audio.style3 .content,
|
||||
.fui-audio.style4 .content {
|
||||
float: left;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style3 .content .name {
|
||||
.fui-audio.style3 .content .name {
|
||||
height: 40rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style3 .content .author {
|
||||
.fui-audio.style3 .content .author {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style3 .time {
|
||||
.fui-audio.style3 .time {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style4 {
|
||||
.fui-audio.style4 {
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style4 .content {
|
||||
.fui-audio.style4 .content {
|
||||
padding-bottom: 18rpx;
|
||||
height: 82rpx;
|
||||
width: 500rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style4 .start {
|
||||
.fui-audio.style4 .start {
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 30rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style4 .name {
|
||||
.fui-audio.style4 .name {
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style4 .author {
|
||||
.fui-audio.style4 .author {
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style4 .progress {
|
||||
.fui-audio.style4 .progress {
|
||||
background: #f5f5f5;
|
||||
height: 4rpx;
|
||||
position: absolute;
|
||||
@@ -430,15 +439,15 @@
|
||||
right: 30rpx;
|
||||
border-radius: 2rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fui-audio.style4 .progressBar {
|
||||
.fui-audio.style4 .progressBar {
|
||||
height: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.diy-audio>>>.uni-video-container {
|
||||
.diy-audio>>>.uni-video-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,13 +3,19 @@
|
||||
<view class="diy-bargain" :class="[value.template, value.style]" :style="warpCss">
|
||||
|
||||
<!-- 商品头部 -->
|
||||
<view v-if="value.titleStyle.isShow && list && list.length" :class="[value.titleStyle.style, 'bargain-head']" :style="{ backgroundImage: 'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')' }">
|
||||
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text" :style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
|
||||
<view v-if="value.titleStyle.isShow && list && list.length"
|
||||
:class="[value.titleStyle.style, 'bargain-head']"
|
||||
:style="{ backgroundImage: 'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')' }">
|
||||
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text"
|
||||
:style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
|
||||
{{ value.titleStyle.leftText }}
|
||||
</view>
|
||||
<image v-else class="left-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix"></image>
|
||||
<view class="head-content" v-if="value.titleStyle.style == 'style-1'" :style="{ color: value.titleStyle.textColor }">低至0元免费拿</view>
|
||||
<view class="head-right" :style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }" @click="$util.redirectTo('/pages_promotion/bargain/list')">
|
||||
<view class="head-content" v-if="value.titleStyle.style == 'style-1'"
|
||||
:style="{ color: value.titleStyle.textColor }">低至0元免费拿</view>
|
||||
<view class="head-right"
|
||||
:style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }"
|
||||
@click="$util.redirectTo('/pages_promotion/bargain/list')">
|
||||
<text>{{ value.titleStyle.more }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
@@ -17,19 +23,25 @@
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<template v-if="value.template == 'row1-of1'">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view class="content"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.btnStyle.control">
|
||||
<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 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 class="progress" v-if="value.style == 'style-2'">
|
||||
<view class="bg">
|
||||
<view class="curr" :style="{ width: progress(item) * 2 + 'rpx' }">
|
||||
<image class="progress-bar" mode="widthFix" :src="$util.img('public/uniapp/bargain/progress_bar_01.png')"/>
|
||||
<image class="progress-bar" mode="widthFix"
|
||||
:src="$util.img('public/uniapp/bargain/progress_bar_01.png')" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="num" v-if="item.is_bargaining">
|
||||
@@ -49,9 +61,14 @@
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">.{{ item.price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">.{{
|
||||
item.price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control" :style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
@@ -67,52 +84,86 @@
|
||||
|
||||
<template v-if="value.template == 'horizontal-slide'">
|
||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)" :lazy-load="true"/>
|
||||
<image class="bg" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix"/>
|
||||
<view class="num" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" :lazy-load="true" />
|
||||
<image class="bg"
|
||||
v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'"
|
||||
:src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix" />
|
||||
<view class="num"
|
||||
v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'"
|
||||
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
已砍{{ item.sale_num }}件
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<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 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 class="discount-price"
|
||||
v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.floor_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.floor_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.floor_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
'.' + item.floor_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
|
||||
:style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
|
||||
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
|
||||
@click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex)" :lazy-load="true"/>
|
||||
<image class="bg" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix"/>
|
||||
<view class="num" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(dataIndex)" :lazy-load="true" />
|
||||
<image class="bg"
|
||||
v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'"
|
||||
:src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix" />
|
||||
<view class="num"
|
||||
v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'"
|
||||
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
已砍{{ item.sale_num }}件
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<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 :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<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 class="discount-price" v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.floor_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.floor_price.split('.')[1] }}</text>
|
||||
<view class="discount-price"
|
||||
v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.floor_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
'.' + item.floor_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -126,13 +177,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
// 砍价商品
|
||||
export default {
|
||||
name: 'diy-bargain',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
@@ -150,7 +204,7 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: async function(nval) {
|
||||
componentRefresh: async function (nval) {
|
||||
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') await this.getDataing();
|
||||
this.getData();
|
||||
}
|
||||
@@ -307,35 +361,35 @@
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-bargain {
|
||||
.diy-bargain {
|
||||
overflow: hidden;
|
||||
|
||||
// 头部
|
||||
@@ -719,5 +773,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,14 +5,18 @@
|
||||
<view class="item" v-for="(item, index) in tabBarList.list" :key="item.id" @click="redirectTo(item.link)">
|
||||
<view class="bd">
|
||||
<block v-if="item.link.wap_url == '/pages_goods/cart'">
|
||||
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2" :animation="cartAnimation" id="tabbarCart">
|
||||
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2"
|
||||
:animation="cartAnimation" id="tabbarCart">
|
||||
<block v-if="verify(item.link)">
|
||||
<image v-if="item.selected_icon_type == 'img'" :src="$util.img(item.selectedIconPath)" />
|
||||
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath" :value="item.selected_style ? item.selected_style : null"></diy-icon>
|
||||
<image v-if="item.selected_icon_type == 'img'"
|
||||
:src="$util.img(item.selectedIconPath)" />
|
||||
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath"
|
||||
:value="item.selected_style ? item.selected_style : null"></diy-icon>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
|
||||
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath" :value="item.style ? item.style : null"></diy-icon>
|
||||
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath"
|
||||
:value="item.style ? item.style : null"></diy-icon>
|
||||
</block>
|
||||
<view class="cart-count-mark font-size-activity-tag"
|
||||
:class="{ max: item.link.wap_url == '/pages_goods/cart' && cartNumber > 99 }"
|
||||
@@ -24,21 +28,27 @@
|
||||
<block v-else>
|
||||
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2">
|
||||
<block v-if="verify(item.link)">
|
||||
<image v-if="item.selected_icon_type == 'img'" :src="$util.img(item.selectedIconPath)" />
|
||||
<image v-if="item.selected_icon_type == 'img'"
|
||||
:src="$util.img(item.selectedIconPath)" />
|
||||
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath"
|
||||
:value="item.selected_style ? item.selected_style : null"></diy-icon>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
|
||||
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath" :value="item.style ? item.style : null"></diy-icon>
|
||||
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath"
|
||||
:value="item.style ? item.style : null"></diy-icon>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<view class="label" v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'diy'" :style="{ color: verify(item.link) ? tabBarList.textHoverColor : tabBarList.textColor }">
|
||||
{{ lang =='en-us'?item.en_text:item.text }}
|
||||
<view class="label"
|
||||
v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'diy'"
|
||||
:style="{ color: verify(item.link) ? tabBarList.textHoverColor : tabBarList.textColor }">
|
||||
{{ lang == 'en-us' ? item.en_text : item.text }}
|
||||
</view>
|
||||
<view class="label" v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'default'" :style="{ color: verify(item.link) ? 'var(--base-color)' : '#333333' }">
|
||||
{{ lang =='en-us'?item.en_text:item.text }}
|
||||
<view class="label"
|
||||
v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'default'"
|
||||
:style="{ color: verify(item.link) ? 'var(--base-color)' : '#333333' }">
|
||||
{{ lang == 'en-us' ? item.en_text : item.text }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -49,7 +59,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
// 底部导航栏
|
||||
export default {
|
||||
name: 'diy-bottom-nav',
|
||||
props: {
|
||||
value: {
|
||||
@@ -60,9 +72,10 @@
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
lang:uni.getStorageSync("lang"),
|
||||
lang: uni.getStorageSync("lang"),
|
||||
currentRoute: '', //当前页面路径
|
||||
jumpFlag: true, //是否可以跳转，防止重复点击
|
||||
cartAnimation: {}
|
||||
@@ -132,25 +145,25 @@
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.placeholder {
|
||||
.placeholder {
|
||||
height: 112rpx;
|
||||
|
||||
&.bluge {
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe-area {
|
||||
.safe-area {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
.tab-bar {
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
@@ -284,10 +297,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar-placeholder {
|
||||
.tab-bar-placeholder {
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 112rpx);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,15 +2,16 @@
|
||||
<view data-component-name="diy-category-item" class="item-wrap" :class="type">
|
||||
<block v-if="type == 'category' && category.child_list && category.child_list.length">
|
||||
<view class="category-adv" v-if="category.image_adv" @click="diyRedirectTo(category.link_url)">
|
||||
<image :src="$util.img(category.image_adv)" mode="widthFix"/>
|
||||
<image :src="$util.img(category.image_adv)" mode="widthFix" />
|
||||
</view>
|
||||
|
||||
<block v-if="value.level == 2">
|
||||
<view class="category-title">{{ category.category_name }}</view>
|
||||
<view class="category-list">
|
||||
<view class="category-item" v-for="(one, oneIndex) in category.child_list" :key="oneIndex" @click="$util.redirectTo('/pages_goods/list', { category_id: one.category_id })">
|
||||
<view class="category-item" v-for="(one, oneIndex) in category.child_list" :key="oneIndex"
|
||||
@click="$util.redirectTo('/pages_goods/list', { category_id: one.category_id })">
|
||||
<view class="img-box">
|
||||
<image :src="$util.img(one.image)" mode="widthFix"/>
|
||||
<image :src="$util.img(one.image)" mode="widthFix" />
|
||||
</view>
|
||||
<view class="name">{{ one.category_name }}</view>
|
||||
</view>
|
||||
@@ -21,9 +22,10 @@
|
||||
<block v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
|
||||
<view class="category-title">{{ one.category_name }}</view>
|
||||
<view class="category-list">
|
||||
<view class="category-item" v-for="(two, twoIndex) in one.child_list" :key="twoIndex" @click="$util.redirectTo('/pages_goods/list', { category_id: two.category_id })">
|
||||
<view class="category-item" v-for="(two, twoIndex) in one.child_list" :key="twoIndex"
|
||||
@click="$util.redirectTo('/pages_goods/list', { category_id: two.category_id })">
|
||||
<view class="img-box">
|
||||
<image :src="$util.img(two.image)" mode="widthFix" :lazy-load="true"/>
|
||||
<image :src="$util.img(two.image)" mode="widthFix" :lazy-load="true" />
|
||||
</view>
|
||||
<view class="name">{{ two.category_name }}</view>
|
||||
</view>
|
||||
@@ -38,9 +40,14 @@
|
||||
<!-- 分类筛选 -->
|
||||
<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="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">
|
||||
<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="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>
|
||||
@@ -48,9 +55,12 @@
|
||||
</view>
|
||||
<uni-popup type="top" ref="screenCategoryPopup">
|
||||
<view class="screen-category-popup" @click="$refs.screenCategoryPopup.close()">
|
||||
<scroll-view scroll-y="true" class="screen-category" :class="{ 'screen-category-4': value.template == 4 }">
|
||||
<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="selectCategory(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>
|
||||
@@ -58,18 +68,23 @@
|
||||
</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">
|
||||
<scroll-view scroll-y="true" class="scroll-goods-view" lower-threshold="300" :scroll-top="scrollTop"
|
||||
@scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll">
|
||||
|
||||
<!--一级分类展示商品显示-->
|
||||
<view class="category-title" style="font-size: 28rpx;padding-bottom: 0;">{{ category.category_name }}</view>
|
||||
<view class="category-title" style="font-size: 28rpx;padding-bottom: 0;">{{ category.category_name
|
||||
}}</view>
|
||||
|
||||
<!--一级-->
|
||||
<view class="goods-list" :class="{ 'double-column': !isList, 'single-column': isList, 'show': true }" :data-template="value.template">
|
||||
<view class="goods-list"
|
||||
:class="{ 'double-column': !isList, 'single-column': isList, 'show': true }"
|
||||
:data-template="value.template">
|
||||
<block v-if="goodsList.length">
|
||||
<view class="goods-item" v-for="(item, index) in goodsList" :key="index" >
|
||||
<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
|
||||
<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>
|
||||
<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>
|
||||
<view class="info-wrap">
|
||||
<view class="name-wrap" @click="toDetail(item)">
|
||||
@@ -79,23 +94,28 @@
|
||||
<view class="discount-price">
|
||||
<block v-if="item.isinformation == 0">
|
||||
<text class="unit price-style small">￥</text>
|
||||
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
<text class="price price-style large">{{
|
||||
parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<text class="unit price-style small">咨询</text>
|
||||
</block>
|
||||
</view>
|
||||
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"/>
|
||||
<view class="member-price-tag"
|
||||
v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix" />
|
||||
</view>
|
||||
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"/>
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')"
|
||||
mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<view class="pro-info">
|
||||
<view class="delete-price font-size-activity-tag color-tip price-font" v-if="showMarketPrice(item)">
|
||||
<view class="delete-price font-size-activity-tag color-tip price-font"
|
||||
v-if="showMarketPrice(item)">
|
||||
<text class="unit">￥</text>
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
@@ -135,7 +155,7 @@
|
||||
</view>
|
||||
</block>
|
||||
<view class="category-empty" v-else>
|
||||
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix"/>
|
||||
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix" />
|
||||
</view>
|
||||
<!-- <view class="end-tips" ref="endTips" v-if="last && (categoryId == -1 || !category.child_list || (category.child_list && categoryId == category.child_list.length - 1))">已经到底了~</view>
|
||||
<view class="end-tips" ref="endTips" v-else @click="switchCategory('next')">
|
||||
@@ -150,10 +170,12 @@
|
||||
</view>
|
||||
|
||||
<block v-if="loadType == 'all' && goodsList.length">
|
||||
<view class="goods-list" :class="{ 'double-column': !isList, 'single-column': isList }" :data-template="value.template">
|
||||
<view class="goods-list" :class="{ 'double-column': !isList, 'single-column': isList }"
|
||||
:data-template="value.template">
|
||||
<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
|
||||
<view class="goods-img" @click="toDetail(item)">
|
||||
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" :lazy-load="true"/>
|
||||
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"
|
||||
:lazy-load="true" />
|
||||
<view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }}</view>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
@@ -164,24 +186,28 @@
|
||||
<view class="discount-price">
|
||||
<block v-if="item.isinformation == 0">
|
||||
<text class="unit price-style small">￥</text>
|
||||
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
<text class="price price-style large">{{
|
||||
parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{
|
||||
parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<text class="unit price-style small">咨询</text>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"/>
|
||||
<view class="member-price-tag"
|
||||
v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix" />
|
||||
</view>
|
||||
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"/>
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<view class="pro-info">
|
||||
<view class="delete-price font-size-activity-tag color-tip price-font" v-if="showMarketPrice(item)">
|
||||
<view class="delete-price font-size-activity-tag color-tip price-font"
|
||||
v-if="showMarketPrice(item)">
|
||||
<text class="unit">￥</text>
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
@@ -191,22 +217,27 @@
|
||||
<view class="color-base-bg select-sku" @click="toDetail(item)">立即购买</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view v-if="item.goods_spec_format" class="color-base-bg select-sku" @click="selectSku(item)">
|
||||
<view v-if="item.goods_spec_format" class="color-base-bg select-sku"
|
||||
@click="selectSku(item)">
|
||||
<text>选规格</text>
|
||||
<text class="num-tag" v-if="item.num">{{ item.num }}</text>
|
||||
</view>
|
||||
<block v-else>
|
||||
<block v-if="cartList['goods_' + item.goods_id]&&cartList['goods_' + item.goods_id]['sku_' + item.sku_id]">
|
||||
<block
|
||||
v-if="cartList['goods_' + item.goods_id] && cartList['goods_' + item.goods_id]['sku_' + item.sku_id]">
|
||||
<view class="num-action reduce" @click="reduce(item)">
|
||||
<text class="iconfont icon-jian"></text>
|
||||
</view>
|
||||
<view class="num">{{ cartList['goods_' + item.goods_id]['sku_' + item.sku_id].num }}</view>
|
||||
<view class="num-action" :id="'cart-num-' + index" @click="increase($event, item)">
|
||||
<view class="num">{{ cartList['goods_' + item.goods_id]['sku_' +
|
||||
item.sku_id].num }}</view>
|
||||
<view class="num-action" :id="'cart-num-' + index"
|
||||
@click="increase($event, item)">
|
||||
<text class="iconfont icon-jia"></text>
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="num-action" v-else :id="'cart-num-' + index" @click="increase($event, item, 0)">
|
||||
<view class="num-action" v-else :id="'cart-num-' + index"
|
||||
@click="increase($event, item, 0)">
|
||||
<text class="iconfont icon-jia"></text>
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
@@ -226,7 +257,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
|
||||
// 商品分类项
|
||||
export default {
|
||||
name: 'diy-category-item',
|
||||
props: {
|
||||
category: {
|
||||
@@ -259,6 +293,7 @@
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
type: 'goods',
|
||||
@@ -294,12 +329,12 @@
|
||||
}, 1000);
|
||||
},
|
||||
watch: {
|
||||
oneCategorySelect: function() {
|
||||
oneCategorySelect: function () {
|
||||
this.scrollTop = -1;
|
||||
this.goodsList = [];
|
||||
this.selectCategory(-1);
|
||||
},
|
||||
select: function() {
|
||||
select: function () {
|
||||
if (this.index == this.select) {
|
||||
this.scrollTop = 0;
|
||||
if (this.pageIndex == 0) {
|
||||
@@ -384,7 +419,7 @@
|
||||
if (res.code == 0 && res.data) {
|
||||
if (this.pageIndex == 1) this.goodsList = [];
|
||||
//切换英文标题
|
||||
if(uni.getStorageSync("lang") == 'en-us'){
|
||||
if (uni.getStorageSync("lang") == 'en-us') {
|
||||
// res.data.list.map(item => {
|
||||
// item.goods_name = item.en_goods_name;
|
||||
// return item;
|
||||
@@ -695,14 +730,15 @@
|
||||
if (isRefresh) this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.small{
|
||||
.small {
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
.item-wrap {
|
||||
}
|
||||
|
||||
.item-wrap {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0rpx;
|
||||
@@ -710,9 +746,9 @@
|
||||
&.goods {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-title {
|
||||
.category-title {
|
||||
padding: 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
// font-weight: bold;
|
||||
@@ -736,9 +772,9 @@
|
||||
&::before {
|
||||
margin-left: -80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-adv {
|
||||
.category-adv {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
@@ -748,15 +784,16 @@
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-list {
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: #fff;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.category-item {
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
@@ -794,9 +831,9 @@
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
.goods-list {
|
||||
/*双列*/
|
||||
display: none;
|
||||
margin: 0 24rpx;
|
||||
@@ -808,6 +845,7 @@
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -888,6 +926,7 @@
|
||||
margin-right: 6rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
color: var(--price-color);
|
||||
}
|
||||
@@ -902,6 +941,7 @@
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.sale {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
@@ -909,12 +949,14 @@
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
|
||||
// display: inline-block;
|
||||
// margin-left: 6rpx;
|
||||
// float: right;
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
line-height: 1;
|
||||
font-size: $font-size-tag !important;
|
||||
@@ -931,7 +973,8 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
|
||||
.sell-out {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
@@ -942,7 +985,8 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text{
|
||||
|
||||
text {
|
||||
color: #fff;
|
||||
font-size: 250rpx;
|
||||
}
|
||||
@@ -959,6 +1003,7 @@
|
||||
/* 单列布局 */
|
||||
&.single-column {
|
||||
flex-direction: column;
|
||||
|
||||
.goods-item {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
@@ -986,6 +1031,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**/
|
||||
/*.goods-item {
|
||||
padding: 0 0 26rpx 0;
|
||||
@@ -1222,9 +1268,9 @@
|
||||
line-height: 52rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.categoty-goods-wrap {
|
||||
.categoty-goods-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@@ -1234,9 +1280,9 @@
|
||||
height: 0;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen-category-wrap {
|
||||
.screen-category-wrap {
|
||||
display: flex;
|
||||
|
||||
.icon-unfold {
|
||||
@@ -1244,9 +1290,9 @@
|
||||
color: #999;
|
||||
padding: 0 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen-category {
|
||||
.screen-category {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
padding: 0 0 20rpx 0;
|
||||
@@ -1266,13 +1312,13 @@
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper-box {
|
||||
/deep/ .uni-popup__wrapper-box {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.screen-category-popup {
|
||||
.screen-category-popup {
|
||||
display: flex;
|
||||
|
||||
.screen-category {
|
||||
@@ -1290,9 +1336,9 @@
|
||||
.item {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.end-tips {
|
||||
.end-tips {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
@@ -1300,13 +1346,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .loading-layer {
|
||||
/deep/ .loading-layer {
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.category-empty {
|
||||
.category-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1325,9 +1371,9 @@
|
||||
color: #999;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen-category-4 .item {
|
||||
.screen-category-4 .item {
|
||||
background-color: #f2f2f2 !important;
|
||||
padding: 10rpx 24rpx;
|
||||
line-height: 1;
|
||||
@@ -1337,5 +1383,5 @@
|
||||
background-color: var(--main-color-shallow) !important;
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view data-component-name="diy-category" :class="['category-page-wrap', 'category-template-' + value.template]"
|
||||
:style="{height: 'calc(100vh - '+ tabBarHeight +')' }">
|
||||
:style="{ height: 'calc(100vh - ' + tabBarHeight + ')' }">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- <block v-if="value.template == 4">
|
||||
<view class="search-box" v-if="value.search" @click="$util.redirectTo('/pages_tool/goods/search')" :style="navbarInnerStyle">
|
||||
@@ -12,32 +12,41 @@
|
||||
<view :style="navbarInnerStyle" v-if="!value.search">商品分类</view>
|
||||
</block> -->
|
||||
<block v-if="value.template != 4">
|
||||
<!-- <view :style="navbarInnerStyle">商品分类</view> -->
|
||||
<view class="search-box" v-if="value.search" @click="onClickSearch()" @tap.stop="onClickSearch()" :style="wxSearchHeight">
|
||||
<!-- <view :style="navbarInnerStyle">商品分类</view> -->
|
||||
<view class="search-box" v-if="value.search" @click="onClickSearch()" @tap.stop="onClickSearch()"
|
||||
:style="wxSearchHeight">
|
||||
<view class="search-content">
|
||||
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" @click.stop="onClickSearch()" @tap.stop="onClickSearch()" disabled="true" />
|
||||
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')"
|
||||
confirm-type="search" @click.stop="onClickSearch()" @tap.stop="onClickSearch()"
|
||||
disabled="true" />
|
||||
<text class="iconfont icon-sousuo3"></text>
|
||||
</view>
|
||||
<view class="iconfont" :class="{ 'icon-apps': !isList, 'icon-list': isList }" @click.stop.prevent="changeListStyle()" ></view>
|
||||
<view class="iconfont" :class="{ 'icon-apps': !isList, 'icon-list': isList }"
|
||||
@click.stop.prevent="changeListStyle()"></view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="search-box" v-if="value.search" @click="onClickSearch()" @tap.stop="onClickSearch()">
|
||||
<view class="search-content">
|
||||
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" @click.stop="onClickSearch()" @tap.stop="onClickSearch()" disabled="true" />
|
||||
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search"
|
||||
@click.stop="onClickSearch()" @tap.stop="onClickSearch()" disabled="true" />
|
||||
<text class="iconfont icon-sousuo3"></text>
|
||||
</view>
|
||||
<view class="iconfont" :class="{ 'icon-apps': !isList, 'icon-list': isList }" @click.stop.prevent="changeListStyle()"></view>
|
||||
<view class="iconfont" :class="{ 'icon-apps': !isList, 'icon-list': isList }"
|
||||
@click.stop.prevent="changeListStyle()"></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)">
|
||||
<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)">
|
||||
<view class="image-warp" :class="[{ 'color-base-border': oneCategorySelect == index }]">
|
||||
<image :src="$util.img(item.image)" mode="aspectFill"/>
|
||||
<image :src="$util.img(item.image)" mode="aspectFill" />
|
||||
</view>
|
||||
<view :class="['text', { 'color-base-bg': oneCategorySelect == index }]">{{ item.category_name }}
|
||||
</view>
|
||||
<view :class="['text', { 'color-base-bg': oneCategorySelect == index }]">{{ item.category_name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="category-item-all" @click="$refs.templateFourPopup.open()">
|
||||
@@ -49,11 +58,13 @@
|
||||
<uni-popup type="top" ref="templateFourPopup" :top="uniPopupTop">
|
||||
<view class="template-four-popup">
|
||||
<scroll-view scroll-y="true" class="template-four-scroll" enable-flex="true">
|
||||
<view class="item" :class="{ selected: oneCategorySelect == index }" @click="templateFourOneFn(index)" v-for="(item, index) in templateFourData" :key="index">
|
||||
<view class="item" :class="{ selected: oneCategorySelect == index }"
|
||||
@click="templateFourOneFn(index)" v-for="(item, index) in templateFourData" :key="index">
|
||||
<view class="image-warp" :class="[{ 'color-base-border': oneCategorySelect == index }]">
|
||||
<image :src="$util.img(item.image)" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view :class="['text', { 'color-base-bg': oneCategorySelect == index }]">{{ item.category_name }}</view>
|
||||
<view :class="['text', { 'color-base-bg': oneCategorySelect == index }]">{{
|
||||
item.category_name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="pack-up" @click="$refs.templateFourPopup.close()">
|
||||
@@ -84,10 +95,11 @@
|
||||
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
|
||||
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
||||
@refresherrestore="onRestore">
|
||||
<view class="child-category" v-for="(item, index) in categoryTree" :key="index" :id="'category-' + index">
|
||||
<view class="child-category" v-for="(item, index) in categoryTree" :key="index"
|
||||
:id="'category-' + index">
|
||||
<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
|
||||
:select="select" :oneCategorySelect="oneCategorySelect" :isList="isList" @tologin="toLogin"
|
||||
@selectsku="selectSku($event, index)" @addCart="addCartPoint"
|
||||
:select="select" :oneCategorySelect="oneCategorySelect" :isList="isList"
|
||||
@tologin="toLogin" @selectsku="selectSku($event, index)" @addCart="addCartPoint"
|
||||
@loadfinish="getHeightArea"></diy-category-item>
|
||||
</view>
|
||||
<view class="end-tips" ref="endTips" :style="{ opacity: endTips }">已经到底了~</view>
|
||||
@@ -133,24 +145,28 @@
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index" v-for="(item, index) in carIconList"></view>
|
||||
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index"
|
||||
v-for="(item, index) in carIconList"></view>
|
||||
|
||||
<ns-goods-sku-category ref="skuSelect" @refresh="refreshData" @addCart="addCartPoint"></ns-goods-sku-category>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
|
||||
import nsGoodsSkuCategory from '@/components/ns-goods-sku/ns-goods-sku-category.vue';
|
||||
var contentWrapHeight, query, cartPosition;
|
||||
export default {
|
||||
import nsGoodsSkuCategory from '@/components/ns-goods-sku/ns-goods-sku-category.vue';
|
||||
import DiyMinx from './minx.js'
|
||||
var contentWrapHeight, query, cartPosition;
|
||||
|
||||
// 商品分类
|
||||
export default {
|
||||
components: {
|
||||
nsGoodsSkuCategory
|
||||
},
|
||||
@@ -163,6 +179,7 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
oneCategorySelect: 0,
|
||||
@@ -179,7 +196,7 @@
|
||||
loadType: '',
|
||||
templateFourData: [],
|
||||
isList: false,
|
||||
lang:uni.getStorageSync("lang")//en-us 英文
|
||||
lang: uni.getStorageSync("lang")//en-us 英文
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -212,7 +229,7 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
cartTotalMoney() {
|
||||
@@ -325,7 +342,7 @@
|
||||
this.categoryTree = this.templateFourData[0].child_list;
|
||||
}
|
||||
//切换英文标题
|
||||
if(this.lang == 'en-us'){
|
||||
if (this.lang == 'en-us') {
|
||||
this.categoryTree.map(item => {
|
||||
item?.child_list?.map(items => {
|
||||
items.category_name = items.en_category_name;
|
||||
@@ -532,19 +549,19 @@
|
||||
this.$util.redirectTo('/pages_tool/goods/search');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.category-page-wrap {
|
||||
.category-page-wrap {
|
||||
width: 100vw;
|
||||
// height: calc(100vh - var(--tab-bar-height, 0));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content-box {
|
||||
.content-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
@@ -576,14 +593,14 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-wrap .category-item-wrap {
|
||||
.tree-wrap .category-item-wrap {
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-wrap .category-item {
|
||||
.tree-wrap .category-item {
|
||||
line-height: 1.5;
|
||||
padding: 26rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
@@ -627,9 +644,9 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
.search-box {
|
||||
position: relative;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
@@ -677,9 +694,9 @@
|
||||
font-size: 36rpx;
|
||||
margin: 0 0rpx 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
.cart-box {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
@@ -752,9 +769,9 @@
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-point {
|
||||
.cart-point {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
position: fixed;
|
||||
@@ -762,9 +779,9 @@
|
||||
background: #f00;
|
||||
border-radius: 50%;
|
||||
transition: all 0.05s;
|
||||
}
|
||||
}
|
||||
|
||||
.category-empty {
|
||||
.category-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -781,18 +798,18 @@
|
||||
color: #999;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.end-tips {
|
||||
.end-tips {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding: 20rpx 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 风格四
|
||||
.category-template-4 {
|
||||
// 风格四
|
||||
.category-template-4 {
|
||||
.search-box {
|
||||
.search-content input {
|
||||
background-color: #f1f1f1;
|
||||
@@ -1018,5 +1035,5 @@
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
<script>
|
||||
// 自定义扩展组件
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-comp-extend',
|
||||
props: {
|
||||
@@ -11,11 +12,12 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
|
||||
<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">
|
||||
<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" :key="index"
|
||||
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
|
||||
@@ -18,7 +19,8 @@
|
||||
}" @click="couponAction(item, index)">
|
||||
|
||||
<view class="coupon-info">
|
||||
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
|
||||
<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>
|
||||
@@ -42,7 +44,8 @@
|
||||
|
||||
<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">
|
||||
<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,
|
||||
@@ -51,7 +54,8 @@
|
||||
marginLeft: couponItemHeight + 'px'
|
||||
}" @click="couponAction(item, index)">
|
||||
<view class="coupon-info">
|
||||
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
|
||||
<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>
|
||||
@@ -75,7 +79,8 @@
|
||||
|
||||
<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">
|
||||
<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,
|
||||
@@ -83,7 +88,8 @@
|
||||
marginRight: couponItemHeight + 'px',
|
||||
marginLeft: couponItemHeight + 'px'
|
||||
}" @click="couponAction(item, index)">
|
||||
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
|
||||
<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>
|
||||
@@ -92,7 +98,8 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -109,7 +116,8 @@
|
||||
|
||||
<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">
|
||||
<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,
|
||||
@@ -118,7 +126,8 @@
|
||||
marginLeft: couponItemHeight + 'px'
|
||||
}" @click="couponAction(item, index)">
|
||||
<view class="coupon-info">
|
||||
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
|
||||
<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>
|
||||
@@ -143,11 +152,13 @@
|
||||
<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)">
|
||||
<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 }">
|
||||
<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>
|
||||
@@ -159,12 +170,17 @@
|
||||
<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 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 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>
|
||||
@@ -175,7 +191,8 @@
|
||||
|
||||
<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">
|
||||
<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,
|
||||
@@ -185,7 +202,8 @@
|
||||
}" @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="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>
|
||||
@@ -206,7 +224,8 @@
|
||||
}">
|
||||
<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-if="parseFloat(item.at_least) > 0">满{{ item.at_least | moneyConduct }}元使用</text>
|
||||
<text class="limit" :style="{ color: value.limitColor }" v-else>无门槛使用</text>
|
||||
</view>
|
||||
|
||||
@@ -230,11 +249,13 @@
|
||||
<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)">
|
||||
<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 }">
|
||||
<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>
|
||||
@@ -244,9 +265,11 @@
|
||||
</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-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 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">
|
||||
@@ -268,8 +291,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 优惠券
|
||||
export default {
|
||||
// 优惠券
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-coupon',
|
||||
props: {
|
||||
value: {
|
||||
@@ -279,6 +303,7 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
couponList: [],
|
||||
@@ -298,14 +323,14 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getCanReceiveCouponQuery();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedCouponList() {
|
||||
var list = [];
|
||||
this.couponList.filter(function(item) {
|
||||
this.couponList.filter(function (item) {
|
||||
if (item.count != item.lead_count) list.push(item);
|
||||
});
|
||||
return list;
|
||||
@@ -453,17 +478,17 @@
|
||||
else return arr[0] + '.' + str;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.coupon-wrap {
|
||||
.coupon-wrap {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
// 风格一
|
||||
/deep/.coupon-style-one {
|
||||
// 风格一
|
||||
/deep/.coupon-style-one {
|
||||
height: 110rpx;
|
||||
|
||||
.coupon-item-box {
|
||||
@@ -506,10 +531,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 风格二
|
||||
/deep/.coupon-style-two {
|
||||
// 风格二
|
||||
/deep/.coupon-style-two {
|
||||
height: 96rpx;
|
||||
|
||||
.coupon-item-box {
|
||||
@@ -559,14 +584,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 风格三
|
||||
.coupon-wrap.coupon-box-3 {
|
||||
// 风格三
|
||||
.coupon-wrap.coupon-box-3 {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.coupon-style-three {
|
||||
/deep/.coupon-style-three {
|
||||
height: 284rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
@@ -610,10 +635,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 风格四
|
||||
/deep/.coupon-style-four {
|
||||
// 风格四
|
||||
/deep/.coupon-style-four {
|
||||
height: 108rpx;
|
||||
|
||||
.coupon-item-box {
|
||||
@@ -656,23 +681,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 样式一 */
|
||||
.coupon-all {
|
||||
/* 样式一 */
|
||||
.coupon-all {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
.coupon-list {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon {
|
||||
.coupon {
|
||||
width: 254rpx;
|
||||
height: 114rpx;
|
||||
border-radius: $border-radius;
|
||||
@@ -733,10 +758,10 @@
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//风格五
|
||||
.coupon-style-five {
|
||||
//风格五
|
||||
.coupon-style-five {
|
||||
.coupon-all {
|
||||
.coupon-box {
|
||||
width: 100%;
|
||||
@@ -821,10 +846,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//风格六
|
||||
.coupon-style-six {
|
||||
//风格六
|
||||
.coupon-style-six {
|
||||
height: 270rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -969,10 +994,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//风格七
|
||||
/deep/ .coupon-style-seven {
|
||||
//风格七
|
||||
/deep/ .coupon-style-seven {
|
||||
.wrap {
|
||||
display: flex;
|
||||
}
|
||||
@@ -1048,27 +1073,27 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,11 @@
|
||||
<template>
|
||||
<view :style="componentStyle">
|
||||
<scroll-view
|
||||
:class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
|
||||
:scroll-x="value.showStyle == 'singleSlide'"
|
||||
>
|
||||
<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"
|
||||
<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 + '%') + ';' }"
|
||||
>
|
||||
:style="{ width: (100 / value.rowCount + '%') + ';' }">
|
||||
<view style="display:flex;">
|
||||
<view :style="{
|
||||
'line-height': '1.2;',
|
||||
@@ -18,14 +13,8 @@
|
||||
'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>
|
||||
<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') + ';',
|
||||
@@ -51,7 +40,8 @@
|
||||
<script>
|
||||
import uvCountTo from '@/components/uv-count-to/uv-count-to.vue'
|
||||
import nsLogin from '@/components/ns-login/ns-login.vue'
|
||||
|
||||
import DiyMinx from './minx.js'
|
||||
// 自定义数字展示
|
||||
export default {
|
||||
name: 'diy-digit',
|
||||
components: {
|
||||
@@ -64,6 +54,7 @@ export default {
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
pageWidth: '',
|
||||
|
||||
@@ -1,47 +1,50 @@
|
||||
<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 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)"/>
|
||||
<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="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' }]"
|
||||
>
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
</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>
|
||||
<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="{
|
||||
<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)"
|
||||
>
|
||||
}" @click.stop="followGoods(item, index)">
|
||||
关注
|
||||
</view>
|
||||
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 1"
|
||||
:style="{
|
||||
<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)"
|
||||
>
|
||||
}" @click.stop="delFollowTip(item, index)">
|
||||
取消关注
|
||||
</view>
|
||||
</view>
|
||||
<view class="delete-price" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="delete-price" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
￥{{ item.discount_price }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -51,6 +54,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 自定义分晓商品列表
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-fenxiao-goods-list',
|
||||
props: {
|
||||
@@ -58,6 +63,7 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
@@ -80,7 +86,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
@@ -209,8 +215,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-fenxiao {
|
||||
}
|
||||
.diy-fenxiao {}
|
||||
|
||||
// 商品列表单列样式
|
||||
.goods-list.row1-of1 {
|
||||
@@ -218,9 +223,11 @@ export default {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
@@ -229,6 +236,7 @@ export default {
|
||||
width: 180rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -244,9 +252,11 @@ export default {
|
||||
.name-wrap {
|
||||
flex: 1;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
height: 72rpx;
|
||||
}
|
||||
@@ -257,25 +267,31 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.sale {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.price-wrap {
|
||||
white-space: nowrap;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
@@ -291,6 +307,7 @@ export default {
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.sale-btn {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
@@ -310,6 +327,7 @@ export default {
|
||||
.goods-list.row1-of2 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.goods-item {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
@@ -317,24 +335,30 @@ export default {
|
||||
margin-right: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
width: calc(50% - 10rpx);
|
||||
|
||||
&:nth-child(2n + 2) {
|
||||
width: calc(50% - 11rpx);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
width: calc(50% - 18rpx);
|
||||
|
||||
&:nth-child(2n-1) {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -355,9 +379,11 @@ export default {
|
||||
|
||||
.name-wrap {
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
height: 72rpx;
|
||||
}
|
||||
@@ -369,24 +395,30 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.sale {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price-wrap {
|
||||
white-space: nowrap;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
@@ -402,6 +434,7 @@ export default {
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.sale-btn {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<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">
|
||||
<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"/>
|
||||
<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>
|
||||
@@ -11,9 +15,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
export default {
|
||||
// 自定义浮动按钮
|
||||
import DiyMinx from './minx.js'
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
|
||||
// 自定义浮动按钮
|
||||
export default {
|
||||
name: 'diy-float-btn',
|
||||
props: {
|
||||
value: {
|
||||
@@ -23,16 +31,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
navHeight: 0,
|
||||
statusBarHeight: systemInfo.statusBarHeight
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
components: {},
|
||||
methods: {},
|
||||
@@ -60,11 +69,11 @@
|
||||
return this.$util.objToStyle(style);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.float-btn {
|
||||
.float-btn {
|
||||
position: fixed;
|
||||
bottom: 20%;
|
||||
right: 40rpx;
|
||||
@@ -110,5 +119,5 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,23 +7,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 关注公众号
|
||||
export default {
|
||||
// 关注公众号展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-follow-official-account',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -10,13 +10,14 @@
|
||||
<view class="fui-cell ">
|
||||
<view class="fui-cell-label">手机号码</view>
|
||||
<view class="fui-cell-info">
|
||||
<input v-model="Form.mobile" class="fui-input" maxlength="11" placeholder="请输入您的手机号" type="number" ></input>
|
||||
<input v-model="Form.mobile" class="fui-input" maxlength="11" placeholder="请输入您的手机号"
|
||||
type="number"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-cell ">
|
||||
<view class="fui-cell-label">您的邮箱</view>
|
||||
<view class="fui-cell-info">
|
||||
<input v-model="Form.mailbox" class="fui-input" placeholder="请输入您的邮箱" type="text" ></input>
|
||||
<input v-model="Form.mailbox" class="fui-input" placeholder="请输入您的邮箱" type="text"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-cell">
|
||||
@@ -37,23 +38,26 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 自定义表单
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-from',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
markers:[],
|
||||
Form:{
|
||||
realname:'',
|
||||
mobile:'',
|
||||
mailbox:'',
|
||||
citys:'',
|
||||
remark:'',
|
||||
markers: [],
|
||||
Form: {
|
||||
realname: '',
|
||||
mobile: '',
|
||||
mailbox: '',
|
||||
citys: '',
|
||||
remark: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
@@ -61,16 +65,16 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
markerst(){
|
||||
markerst() {
|
||||
return [{
|
||||
id:1,
|
||||
latitude:this.value.list[0].lat,
|
||||
longitude:this.value.list[0].lng
|
||||
id: 1,
|
||||
latitude: this.value.list[0].lat,
|
||||
longitude: this.value.list[0].lng
|
||||
}]
|
||||
},
|
||||
style() {
|
||||
@@ -86,7 +90,7 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitform(){
|
||||
submitform() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/member/information',
|
||||
data: this.Form,
|
||||
@@ -98,13 +102,13 @@
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-from{
|
||||
.diy-from {
|
||||
background: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,11 +2,14 @@
|
||||
<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 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"/>
|
||||
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit"
|
||||
@click="handlerClick(item)" @tap="handlerClick(item)" @error="imgError(index)"
|
||||
:style="itemCss" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -15,13 +18,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 商品品牌
|
||||
import uniGrid from '@/components/uni-grid/uni-grid.vue';
|
||||
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
|
||||
// 商品品牌
|
||||
import uniGrid from '@/components/uni-grid/uni-grid.vue';
|
||||
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
|
||||
|
||||
import DiyMinx from './minx.js'
|
||||
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
// 自定义商品品牌展示
|
||||
export default {
|
||||
name: 'diy-goods-brand',
|
||||
props: {
|
||||
value: {
|
||||
@@ -52,7 +55,7 @@
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getBrandList();
|
||||
}
|
||||
},
|
||||
@@ -118,17 +121,19 @@
|
||||
if (this.list[index]) this.list[index].image_url = this.$util.getDefaultImage().goods;
|
||||
},
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'goods-brand-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'goods-brand-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.toDetail(item);
|
||||
}})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.brand-wrap {
|
||||
.brand-wrap {
|
||||
&.shadow {
|
||||
margin-left: 8rpx;
|
||||
margin-right: 8rpx;
|
||||
@@ -163,5 +168,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,9 +2,13 @@
|
||||
<x-skeleton data-component-name="diy-goods-list" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view :class="['goods-list', goodsValue.template, goodsValue.style]" :style="goodsListWarpCss">
|
||||
<template v-if="goodsValue.template != 'horizontal-slide'">
|
||||
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)" @tap="handlerClick(item)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)"
|
||||
@tap="handlerClick(item)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<view class="goods-img-wrap">
|
||||
<image class="goods-img" :src="$util.img(item.goods_image, { size: goodsValue.template == 'large-mode' ? 'big' : 'mid' })" mode="widthFix" @error="imgError(index)" :style="{ borderRadius: goodsValue.imgAroundRadius * 2 + 'rpx' }"/>
|
||||
<image class="goods-img"
|
||||
:src="$util.img(item.goods_image, { size: goodsValue.template == 'large-mode' ? 'big' : 'mid' })"
|
||||
mode="widthFix" @error="imgError(index)"
|
||||
:style="{ borderRadius: goodsValue.imgAroundRadius * 2 + 'rpx' }" />
|
||||
<view class="sell-out" v-if="item.stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
@@ -19,7 +23,7 @@
|
||||
<view v-if="goodsValue.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.goodsNameStyle.color : '', fontWeight: goodsValue.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': goodsValue.nameLineMode == 'single' }, { 'multi-hidden': goodsValue.nameLineMode == 'multiple' }]">
|
||||
{{ lang=='en-us'?item.en_goods_name:item.goods_name }}
|
||||
{{ lang == 'en-us' ? item.en_goods_name : item.goods_name }}
|
||||
</view>
|
||||
<template v-if="goodsValue.tag">
|
||||
<view class="tag-wrap" v-if="goodsValue.tag.value == 'label' && item.label_name">
|
||||
@@ -32,13 +36,21 @@
|
||||
<view class="pro-info">
|
||||
<view class="discount-price">
|
||||
<view class="price-wrap" v-if="goodsValue.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ showPrice(item).split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ '.' + showPrice(item).split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{
|
||||
showPrice(item).split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{
|
||||
'.' + showPrice(item).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="member-price" v-if="(item.member_price && item.member_price == showPrice(item)) || item.promotion_type == 1">
|
||||
<image v-if="item.member_price && item.member_price == showPrice(item)" :src="$util.img('public/uniapp/index/VIP.png')"/>
|
||||
<image v-else-if="item.promotion_type == 1" :src="$util.img('public/uniapp/index/discount.png')"/>
|
||||
<view class="member-price"
|
||||
v-if="(item.member_price && item.member_price == showPrice(item)) || item.promotion_type == 1">
|
||||
<image v-if="item.member_price && item.member_price == showPrice(item)"
|
||||
:src="$util.img('public/uniapp/index/VIP.png')" />
|
||||
<image v-else-if="item.promotion_type == 1"
|
||||
:src="$util.img('public/uniapp/index/discount.png')" />
|
||||
</view>
|
||||
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(item)"
|
||||
class="delete-price price-font"
|
||||
@@ -98,10 +110,14 @@
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<scroll-view v-if="goodsValue.template == 'horizontal-slide' && goodsValue.slideMode == 'scroll'" class="scroll" :scroll-x="true">
|
||||
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)" @tap="handlerClick(item)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<scroll-view v-if="goodsValue.template == 'horizontal-slide' && goodsValue.slideMode == 'scroll'"
|
||||
class="scroll" :scroll-x="true">
|
||||
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)"
|
||||
@tap="handlerClick(item)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<view class="goods-img-wrap">
|
||||
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)" :lazy-load="true"/>
|
||||
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"
|
||||
:lazy-load="true" />
|
||||
<view class="sell-out" v-if="item.stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
@@ -115,7 +131,7 @@
|
||||
<view v-if="goodsValue.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.goodsNameStyle.color : '', fontWeight: goodsValue.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': goodsValue.nameLineMode == 'single' }, { 'multi-hidden': goodsValue.nameLineMode == 'multiple' }]">
|
||||
{{ lang=='en-us'?item.en_goods_name:item.goods_name }}
|
||||
{{ lang == 'en-us' ? item.en_goods_name : item.goods_name }}
|
||||
</view>
|
||||
<template v-if="goodsValue.tag">
|
||||
<view class="tag-wrap" v-if="goodsValue.tag.value == 'label' && item.label_name">
|
||||
@@ -128,18 +144,29 @@
|
||||
<view class="pro-info">
|
||||
<view class="discount-price">
|
||||
<view class="price-wrap" v-if="goodsValue.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ showPrice(item).split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ '.' + showPrice(item).split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{
|
||||
showPrice(item).split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{
|
||||
'.' + showPrice(item).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="member-price" v-if="(item.member_price && item.member_price == showPrice(item)) || item.promotion_type == 1">
|
||||
<image v-if="item.member_price && item.member_price == showPrice(item)" :src="$util.img('public/uniapp/index/VIP.png')"/>
|
||||
<image v-else-if="item.promotion_type == 1" :src="$util.img('public/uniapp/index/discount.png')"/>
|
||||
<view class="member-price"
|
||||
v-if="(item.member_price && item.member_price == showPrice(item)) || item.promotion_type == 1">
|
||||
<image v-if="item.member_price && item.member_price == showPrice(item)"
|
||||
:src="$util.img('public/uniapp/index/VIP.png')" />
|
||||
<image v-else-if="item.promotion_type == 1"
|
||||
:src="$util.img('public/uniapp/index/discount.png')" />
|
||||
</view>
|
||||
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(item)" class="delete-price price-font" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">
|
||||
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(item)"
|
||||
class="delete-price price-font"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">
|
||||
￥{{ showMarketPrice(item) }}
|
||||
</view>
|
||||
<view class="sale" v-if="goodsValue.saleStyle.control" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
|
||||
<view class="sale" v-if="goodsValue.saleStyle.control"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
|
||||
已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -147,11 +174,17 @@
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<swiper v-if="goodsValue.template == 'horizontal-slide' && goodsValue.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="goods-item" v-for="(dataItem, dataIndex) in list[pageIndex]" :key="dataIndex" @click="handlerClick(dataItem)" @tap="handlerClick(dataItem)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<swiper v-if="goodsValue.template == 'horizontal-slide' && goodsValue.slideMode == 'slide'"
|
||||
:autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
|
||||
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="goods-item" v-for="(dataItem, dataIndex) in list[pageIndex]" :key="dataIndex"
|
||||
@click="handlerClick(dataItem)" @tap="handlerClick(dataItem)"
|
||||
:class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<view class="goods-img-wrap">
|
||||
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(dataIndex)" :lazy-load="true"/>
|
||||
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imgError(dataIndex)" :lazy-load="true" />
|
||||
<view class="sell-out" v-if="dataItem.stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
@@ -165,7 +198,7 @@
|
||||
<view v-if="goodsValue.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.goodsNameStyle.color : '', fontWeight: goodsValue.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': goodsValue.nameLineMode == 'single' }, { 'multi-hidden': goodsValue.nameLineMode == 'multiple' }]">
|
||||
{{ lang=='en-us'?dataItem.en_goods_name:dataItem.goods_name }}
|
||||
{{ lang == 'en-us' ? dataItem.en_goods_name : dataItem.goods_name }}
|
||||
</view>
|
||||
<template v-if="goodsValue.tag">
|
||||
<view class="tag-wrap" v-if="goodsValue.tag.value == 'label' && dataItem.label_name">
|
||||
@@ -178,22 +211,32 @@
|
||||
<view class="pro-info">
|
||||
<view class="discount-price">
|
||||
<view class="price-wrap" v-if="goodsValue.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ showPrice(dataItem).split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + showPrice(dataItem).split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="member-price" v-if="(dataItem.member_price && dataItem.member_price == showPrice(dataItem)) || dataItem.promotion_type == 1">
|
||||
<image v-if="dataItem.member_price && dataItem.member_price == showPrice(dataItem)" :src="$util.img('public/uniapp/index/VIP.png')"/>
|
||||
<image v-else-if="dataItem.promotion_type == 1" :src="$util.img('public/uniapp/index/discount.png')"/>
|
||||
<view class="member-price"
|
||||
v-if="(dataItem.member_price && dataItem.member_price == showPrice(dataItem)) || dataItem.promotion_type == 1">
|
||||
<image
|
||||
v-if="dataItem.member_price && dataItem.member_price == showPrice(dataItem)"
|
||||
:src="$util.img('public/uniapp/index/VIP.png')" />
|
||||
<image v-else-if="dataItem.promotion_type == 1"
|
||||
:src="$util.img('public/uniapp/index/discount.png')" />
|
||||
</view>
|
||||
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(dataItem)" class="delete-price" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">
|
||||
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(dataItem)"
|
||||
class="delete-price"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">
|
||||
￥{{ showMarketPrice(dataItem) }}
|
||||
</view>
|
||||
<view class="sale" v-if="goodsValue.saleStyle.control" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
|
||||
<view class="sale" v-if="goodsValue.saleStyle.control"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
|
||||
已售{{ dataItem.sale_num }}{{ dataItem.unit ? dataItem.unit : '件' }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -204,14 +247,17 @@
|
||||
</swiper>
|
||||
</view>
|
||||
<ns-goods-sku-index ref="goodsSkuIndex" @addCart="addCartPoint"></ns-goods-sku-index>
|
||||
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index" v-for="(item, index) in carIconList"></view>
|
||||
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index"
|
||||
v-for="(item, index) in carIconList"></view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
|
||||
import DiyMinx from './minx.js'
|
||||
|
||||
// 自定义商品列表展示
|
||||
export default {
|
||||
name: 'diy-goods-list',
|
||||
components: {
|
||||
nsGoodsSkuIndex
|
||||
@@ -234,7 +280,7 @@
|
||||
page: 1,
|
||||
carIconList: {},
|
||||
cartAnimation: {},
|
||||
lang:uni.getStorageSync("lang")
|
||||
lang: uni.getStorageSync("lang")
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -253,7 +299,7 @@
|
||||
deep: true
|
||||
},
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getGoodsList();
|
||||
}
|
||||
},
|
||||
@@ -530,17 +576,19 @@
|
||||
},
|
||||
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'goods-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'goods-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.toDetail(item);
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-list {
|
||||
.goods-list {
|
||||
overflow: hidden;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
@@ -629,7 +677,8 @@
|
||||
.icon-diy {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
.sell-out{
|
||||
|
||||
.sell-out {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
@@ -640,15 +689,16 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text{
|
||||
|
||||
text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表单列样式
|
||||
.goods-list.row1-of1 {
|
||||
// 商品列表单列样式
|
||||
.goods-list.row1-of1 {
|
||||
.goods-item {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
@@ -750,15 +800,16 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
text{
|
||||
|
||||
.sell-out {
|
||||
text {
|
||||
font-size: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 两列（一行两列）
|
||||
.goods-list.row1-of2 {
|
||||
// 两列（一行两列）
|
||||
.goods-list.row1-of2 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
@@ -947,15 +998,16 @@
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
text{
|
||||
|
||||
.sell-out {
|
||||
text {
|
||||
font-size: 250rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表三列样式
|
||||
.goods-list.row1-of3 {
|
||||
// 商品列表三列样式
|
||||
.goods-list.row1-of3 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -1115,15 +1167,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
text{
|
||||
|
||||
.sell-out {
|
||||
text {
|
||||
font-size: 150rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表横向滚动样式
|
||||
.goods-list.horizontal-slide {
|
||||
// 商品列表横向滚动样式
|
||||
.goods-list.horizontal-slide {
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
@@ -1153,12 +1206,14 @@
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.goods-img-wrap{
|
||||
|
||||
.goods-img-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
max-height: 200rpx;
|
||||
@@ -1249,15 +1304,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
text{
|
||||
|
||||
.sell-out {
|
||||
text {
|
||||
font-size: 190rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表大图样式
|
||||
.goods-list.large-mode {
|
||||
// 商品列表大图样式
|
||||
.goods-list.large-mode {
|
||||
.goods-item {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
@@ -1282,6 +1338,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1369,14 +1426,15 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
text{
|
||||
|
||||
.sell-out {
|
||||
text {
|
||||
font-size: 500rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-action-wrap {
|
||||
.cart-action-wrap {
|
||||
position: relative;
|
||||
|
||||
.cart-num {
|
||||
@@ -1393,9 +1451,9 @@
|
||||
border-radius: 30rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-point {
|
||||
.cart-point {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
position: fixed;
|
||||
@@ -1403,9 +1461,9 @@
|
||||
background: #f00;
|
||||
border-radius: 50%;
|
||||
transition: all 0.05s;
|
||||
}
|
||||
}
|
||||
|
||||
.click-wrap {
|
||||
.click-wrap {
|
||||
.click-event {
|
||||
position: absolute;
|
||||
width: 2rpx;
|
||||
@@ -1415,5 +1473,5 @@
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,39 +2,57 @@
|
||||
<x-skeleton data-component-name="diy-goods-recommend" type="waterfall" :loading="loading" :configs="skeletonConfig">
|
||||
<view v-if="list.length" :class="['goods-list', goodsValue.style]" :style="goodsListWarpCss">
|
||||
<view class="top-wrap" v-if="goodsValue.topStyle.support">
|
||||
<text :class="['js-icon', goodsValue.topStyle.icon.value]" :style="{ backgroundColor: goodsValue.topStyle.icon.bgColor, color: goodsValue.topStyle.icon.color }"></text>
|
||||
<text :class="['js-icon', goodsValue.topStyle.icon.value]"
|
||||
:style="{ backgroundColor: goodsValue.topStyle.icon.bgColor, color: goodsValue.topStyle.icon.color }"></text>
|
||||
<text class="title" :style="{ color: goodsValue.topStyle.color }">{{ goodsValue.topStyle.title }}</text>
|
||||
<text class="line" :style="{ color: goodsValue.topStyle.subColor }"></text>
|
||||
<text class="sub" :style="{ color: goodsValue.topStyle.subColor }">{{ goodsValue.topStyle.subTitle }}</text>
|
||||
<text class="sub" :style="{ color: goodsValue.topStyle.subColor }">{{ goodsValue.topStyle.subTitle
|
||||
}}</text>
|
||||
</view>
|
||||
<swiper :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(item, index) in page" :key="index" :class="['swiper-item', [list[index].length / 3] >= 1 && 'flex-between']">
|
||||
<view class="goods-item" v-for="(dataItem, dataIndex) in list[index]" :key="dataIndex" @click="toDetail(dataItem)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<swiper-item v-for="(item, index) in page" :key="index"
|
||||
:class="['swiper-item', [list[index].length / 3] >= 1 && 'flex-between']">
|
||||
<view class="goods-item" v-for="(dataItem, dataIndex) in list[index]" :key="dataIndex"
|
||||
@click="toDetail(dataItem)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
|
||||
<div class="goods-img-wrap">
|
||||
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index,dataIndex)" :lazy-load="true"/>
|
||||
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imgError(index, dataIndex)" :lazy-load="true" />
|
||||
<view class="sell-out" v-if="dataItem.stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
</div>
|
||||
<view :class="['info-wrap', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="goodsValue.goodsNameStyle.control || goodsValue.priceStyle.mainControl || goodsValue.priceStyle.lineControl || goodsValue.labelStyle.support">
|
||||
<view :class="['info-wrap', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="goodsValue.goodsNameStyle.control || goodsValue.priceStyle.mainControl || goodsValue.priceStyle.lineControl || goodsValue.labelStyle.support">
|
||||
<view v-if="goodsValue.goodsNameStyle.control" class="goods-name"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.goodsNameStyle.color : '', fontWeight: goodsValue.goodsNameStyle.fontWeight ? 'bold' : '' }"
|
||||
:class="[{ 'using-hidden': goodsValue.nameLineMode == 'single' }, { 'multi-hidden': goodsValue.nameLineMode == 'multiple' }]">
|
||||
{{ dataItem.goods_name }}
|
||||
</view>
|
||||
<view class="pro-info">
|
||||
<view class="label-wrap" v-if="goodsValue.labelStyle.support" :style="{ background: goodsValue.labelStyle.bgColor, color: goodsValue.labelStyle.color }">
|
||||
<image :src="$util.img('app/component/view/goods_recommend/img/label.png')" mode="widthFix"/>
|
||||
<view class="label-wrap" v-if="goodsValue.labelStyle.support"
|
||||
:style="{ background: goodsValue.labelStyle.bgColor, color: goodsValue.labelStyle.color }">
|
||||
<image :src="$util.img('app/component/view/goods_recommend/img/label.png')"
|
||||
mode="widthFix" />
|
||||
<text>{{ goodsValue.labelStyle.title }}</text>
|
||||
</view>
|
||||
<view class="discount-price">
|
||||
<view class="price-wrap" v-if="goodsValue.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ showPrice(dataItem).split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ '.' + showPrice(dataItem).split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">￥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{
|
||||
showPrice(dataItem).split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{
|
||||
'.' + showPrice(dataItem).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(dataItem)" class="delete-price price-font" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">￥{{ showMarketPrice(dataItem) }}</view>
|
||||
<view class="sale" v-if="goodsValue.saleStyle.control" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
|
||||
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(dataItem)"
|
||||
class="delete-price price-font"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">
|
||||
￥{{ showMarketPrice(dataItem) }}</view>
|
||||
<view class="sale" v-if="goodsValue.saleStyle.control"
|
||||
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
|
||||
售{{ dataItem.sale_num }}{{ dataItem.unit ? dataItem.unit : '件' }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -48,7 +66,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 自定义商品推荐展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-goods-recommend',
|
||||
props: {
|
||||
value: {
|
||||
@@ -58,6 +78,7 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -88,7 +109,7 @@
|
||||
deep: true
|
||||
},
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getGoodsList();
|
||||
}
|
||||
},
|
||||
@@ -220,11 +241,11 @@
|
||||
return '';
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-list {
|
||||
.goods-list {
|
||||
.goods-item {
|
||||
line-height: 1;
|
||||
|
||||
@@ -240,7 +261,8 @@
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
|
||||
.sell-out {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
@@ -251,16 +273,17 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text{
|
||||
|
||||
text {
|
||||
color: #fff;
|
||||
font-size: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表横向滚动样式
|
||||
.goods-list.style-1 {
|
||||
// 商品列表横向滚动样式
|
||||
.goods-list.style-1 {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
background-repeat: round;
|
||||
@@ -324,7 +347,9 @@
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.goods-img, .goods-img-wrap {
|
||||
|
||||
.goods-img,
|
||||
.goods-img-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 196rpx;
|
||||
@@ -390,10 +415,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表横向滚动样式
|
||||
.goods-list.style-2 {
|
||||
// 商品列表横向滚动样式
|
||||
.goods-list.style-2 {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
background-repeat: round;
|
||||
@@ -450,7 +475,8 @@
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.goods-img, .goods-img-wrap {
|
||||
.goods-img,
|
||||
.goods-img-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
@@ -509,9 +535,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list.style-3 {
|
||||
.goods-list.style-3 {
|
||||
background-position: bottom;
|
||||
|
||||
.swiper {
|
||||
@@ -536,7 +562,8 @@
|
||||
// margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.goods-img, .goods-img-wrap {
|
||||
.goods-img,
|
||||
.goods-img-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
@@ -595,5 +622,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<view data-component-name="diy-graphic-nav" :style="componentStyle">
|
||||
<block v-if="value.showStyle == 'pageSlide'">
|
||||
<swiper :class="['graphic-nav', 'pageSlide', value.carousel.type]" circular :indicator-dots="false" :style="swiperHeight" @change="swiperChange">
|
||||
<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))">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
|
||||
:key="index"
|
||||
v-if="index >= [(numItem) * (value.pageCount * value.rowCount)] && index < [(numItem+1) * (value.pageCount * value.rowCount)]"
|
||||
v-if="index >= [(numItem) * (value.pageCount * value.rowCount)] && index < [(numItem + 1) * (value.pageCount * value.rowCount)]"
|
||||
:style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
@@ -22,7 +23,7 @@
|
||||
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
|
||||
mode="aspectFill"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', borderRadius: value.aroundRadius * 2 + 'rpx' }"
|
||||
:show-menu-by-longpress="true"/>
|
||||
:show-menu-by-longpress="true" />
|
||||
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
|
||||
:value="item.style ? item.style : null"
|
||||
@@ -47,24 +48,28 @@
|
||||
</swiper>
|
||||
|
||||
<view class="swiper-dot-box" v-if="isIndicatorDots" :class="value.carousel.type">
|
||||
<view v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))" :key="numIndex">
|
||||
<view class="swiper-dot" :class="{'active':numIndex==swiperCurrent}"></view>
|
||||
<view v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))"
|
||||
:key="numIndex">
|
||||
<view class="swiper-dot" :class="{ 'active': numIndex == swiperCurrent }"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
<scroll-view v-else :scroll-x="value.showStyle == 'singleSlide'" :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle ]">
|
||||
<scroll-view v-else :scroll-x="value.showStyle == 'singleSlide'"
|
||||
:class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="uni-scroll-view-content">
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list" :key="index" :style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
|
||||
<view class="graphic-img" v-if="value.mode != 'text'" :style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
|
||||
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list" :key="index"
|
||||
:style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
|
||||
<view class="graphic-img" v-if="value.mode != 'text'"
|
||||
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
|
||||
<image v-if="item.iconType == 'img'"
|
||||
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
|
||||
mode="aspectFill"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', borderRadius: value.aroundRadius * 2 + 'rpx' }"
|
||||
:show-menu-by-longpress="true"/>
|
||||
:show-menu-by-longpress="true" />
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
|
||||
:value="item.style ? item.style : null"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
|
||||
@@ -73,7 +78,8 @@
|
||||
{{ item.label.text }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-if="value.mode != 'img'" class="graphic-text" :style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
|
||||
<text v-if="value.mode != 'img'" class="graphic-text"
|
||||
:style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
</view>
|
||||
@@ -88,13 +94,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 自定义图形导航
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-graphic-nav',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
pageWidth: '',
|
||||
@@ -102,10 +111,10 @@
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
componentStyle() {
|
||||
@@ -162,37 +171,37 @@
|
||||
this.swiperCurrent = e.detail.current
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/* 固定显示 */
|
||||
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
|
||||
/* 固定显示 */
|
||||
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* 单行滑动 */
|
||||
.graphic-nav.singleSlide>>>.uni-scroll-view-content {
|
||||
/* 单行滑动 */
|
||||
.graphic-nav.singleSlide>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.graphic-nav.pageSlide>>>.uni-swiper-dots-horizontal {
|
||||
.graphic-nav.pageSlide>>>.uni-swiper-dots-horizontal {
|
||||
bottom: 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.graphic-nav.pageSlide.straightLine>>>.uni-swiper-dot {
|
||||
.graphic-nav.pageSlide.straightLine>>>.uni-swiper-dot {
|
||||
width: 30rpx;
|
||||
border-radius: 0;
|
||||
height: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.graphic-nav.pageSlide.circle>>>.uni-swiper-dot {
|
||||
.graphic-nav.pageSlide.circle>>>.uni-swiper-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.graphic-nav {
|
||||
.graphic-nav {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -269,9 +278,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dot-box {
|
||||
.swiper-dot-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -305,5 +314,5 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -55,7 +55,8 @@
|
||||
|
||||
<template v-if="item.componentName == 'Search'">
|
||||
<!-- 搜索 -->
|
||||
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global" :haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
||||
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global"
|
||||
:haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'RichText'">
|
||||
@@ -85,7 +86,8 @@
|
||||
|
||||
<template v-if="item.componentName == 'ManyGoodsList'">
|
||||
<!-- 多商品组 -->
|
||||
<diy-many-goods-list :value="item" :global="diyGlobalData.global" :scrollTop="scrollTop"></diy-many-goods-list>
|
||||
<diy-many-goods-list :value="item" :global="diyGlobalData.global"
|
||||
:scrollTop="scrollTop"></diy-many-goods-list>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'RubikCube'">
|
||||
@@ -256,8 +258,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 组件组
|
||||
export default {
|
||||
// 组件组展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
diyData: {
|
||||
@@ -274,6 +277,7 @@
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
diyGlobalData: null
|
||||
@@ -341,11 +345,11 @@
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-group {
|
||||
.diy-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,7 +5,9 @@
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)">
|
||||
</image>
|
||||
</view>
|
||||
<view class="content"
|
||||
@@ -16,9 +18,14 @@
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
'.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control" :style="{
|
||||
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
|
||||
@@ -32,51 +39,79 @@
|
||||
</template>
|
||||
<template v-if="value.template == 'horizontal-slide'">
|
||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image class="bg" v-if="value.saleStyle.control" :src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix"/>
|
||||
<view class="num" v-if="value.saleStyle.control" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
<image class="bg" v-if="value.saleStyle.control"
|
||||
:src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix" />
|
||||
<view class="num" v-if="value.saleStyle.control"
|
||||
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
已团{{ item.sell_num }}件
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<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 class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
'.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{ item.price }}</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{
|
||||
item.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
|
||||
:style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
|
||||
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
|
||||
@click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex)"/>
|
||||
<image class="bg" v-if="value.saleStyle.control" :src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix"/>
|
||||
<view class="num" v-if="value.saleStyle.control" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">已团{{ item.sell_num }}件</view>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(dataIndex)" />
|
||||
<image class="bg" v-if="value.saleStyle.control"
|
||||
:src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix" />
|
||||
<view class="num" v-if="value.saleStyle.control"
|
||||
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">已团{{
|
||||
item.sell_num }}件</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
|
||||
<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 class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.groupbuy_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
'.' + item.groupbuy_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{ item.price }}</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{
|
||||
item.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
@@ -87,13 +122,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 自定义团购展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-groupbuy',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -109,7 +147,7 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
@@ -232,35 +270,35 @@
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-groupbuy {
|
||||
.diy-groupbuy {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
@@ -458,5 +496,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
<script>
|
||||
// 辅助空白
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-horz-blank',
|
||||
props: {
|
||||
@@ -11,15 +12,16 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
horzBlankGaugeWrap: function() {
|
||||
horzBlankGaugeWrap: function () {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
@@ -32,7 +34,7 @@ export default {
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<view data-component-name="diy-horz-line" :style="{ borderTop: '2rpx ' + value.borderStyle + ' ' + value.color }"></view>
|
||||
<view data-component-name="diy-horz-line" :style="{ borderTop: '2rpx ' + value.borderStyle + ' ' + value.color }">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 辅助线
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-horz-line',
|
||||
props: {
|
||||
@@ -11,12 +13,13 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<view data-component-name="diy-hot-area" :style="hotAreaWarp" class="hot-area-box">
|
||||
<view class="simple-graph-wrap">
|
||||
<image :style="{ height: value.imgHeight }" :src="$util.img(value.imageUrl)" mode="widthFix" :show-menu-by-longpress="true"/>
|
||||
<image :style="{ height: value.imgHeight }" :src="$util.img(value.imageUrl)" mode="widthFix"
|
||||
:show-menu-by-longpress="true" />
|
||||
<!-- 热区功能 -->
|
||||
<view class="heat-map" v-for="(mapItem, mapIndex) in value.heatMapData" :key="mapIndex" :style="{
|
||||
width: mapItem.width + '%',
|
||||
@@ -14,7 +15,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 热区展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-hot-area',
|
||||
props: {
|
||||
value: {
|
||||
@@ -24,16 +27,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
hotAreaWarp: function() {
|
||||
hotAreaWarp: function () {
|
||||
var obj = '';
|
||||
obj = 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
@@ -46,18 +50,18 @@
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hot-area-box {
|
||||
.hot-area-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-graph-wrap {
|
||||
.simple-graph-wrap {
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -69,5 +73,5 @@
|
||||
.heat-map {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,7 +5,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 图标展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-icon',
|
||||
props: {
|
||||
icon: {
|
||||
@@ -19,13 +21,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
computed: {
|
||||
iconClass(){
|
||||
iconClass() {
|
||||
var _class = ' ' + this.icon;
|
||||
if (this.value && this.value.iconColor.length > 1) _class += ' gradient';
|
||||
return _class;
|
||||
},
|
||||
iconBgStyle(){
|
||||
iconBgStyle() {
|
||||
if (!this.value) return {};
|
||||
|
||||
var style = {
|
||||
@@ -33,18 +36,18 @@
|
||||
'background': ''
|
||||
};
|
||||
|
||||
if (this.value.iconBgImg) style['background'] += 'url('+ this.$util.img(this.value.iconBgImg) +') no-repeat bottom / contain'
|
||||
if (this.value.iconBgImg) style['background'] += 'url(' + this.$util.img(this.value.iconBgImg) + ') no-repeat bottom / contain'
|
||||
if (this.value.iconBgColor.length) {
|
||||
if (style.background) style.background += ',';
|
||||
if (this.value.iconBgColor.length == 1) {
|
||||
style.background += this.value.iconBgColor[0];
|
||||
} else {
|
||||
style['background'] += 'linear-gradient('+ this.value.iconBgColorDeg +'deg, '+ this.value.iconBgColor.join(',') +')';
|
||||
style['background'] += 'linear-gradient(' + this.value.iconBgColorDeg + 'deg, ' + this.value.iconBgColor.join(',') + ')';
|
||||
}
|
||||
}
|
||||
return this.$util.objToStyle(style);
|
||||
},
|
||||
iconStyle(){
|
||||
iconStyle() {
|
||||
if (!this.value) return {};
|
||||
|
||||
var style = {
|
||||
@@ -53,16 +56,16 @@
|
||||
if (this.value.iconColor.length == 1) {
|
||||
style.color = this.value.iconColor[0];
|
||||
} else {
|
||||
style['background'] = 'linear-gradient('+ this.value.iconColorDeg +'deg, '+ this.value.iconColor.join(',') +')';
|
||||
style['background'] = 'linear-gradient(' + this.value.iconColorDeg + 'deg, ' + this.value.iconColor.join(',') + ')';
|
||||
}
|
||||
return this.$util.objToStyle(style);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-icon {
|
||||
.diy-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 100%;
|
||||
@@ -73,12 +76,13 @@
|
||||
|
||||
.js-icon {
|
||||
font-size: 50%;
|
||||
line-height:1;
|
||||
line-height: 1;
|
||||
padding: 1rpx;
|
||||
|
||||
&.gradient {
|
||||
-webkit-background-clip:text!important;
|
||||
-webkit-text-fill-color:transparent;
|
||||
}
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,42 +1,26 @@
|
||||
<template>
|
||||
<view :style="componentStyle">
|
||||
<scroll-view
|
||||
:class="['image-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
|
||||
:scroll-x="value.showStyle == 'singleSlide'"
|
||||
>
|
||||
<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-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="{
|
||||
<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="{
|
||||
}" :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>
|
||||
}" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
|
||||
:show-menu-by-longpress="true" @tap="previewImg(item.imageUrl)"></image>
|
||||
</view>
|
||||
|
||||
<!-- 文字部分 -->
|
||||
@@ -55,6 +39,7 @@
|
||||
|
||||
<script>
|
||||
import nsLogin from '@/components/ns-login/ns-login.vue'
|
||||
import DiyMinx from './minx.js'
|
||||
|
||||
export default {
|
||||
name: 'diy-image-nav',
|
||||
@@ -67,6 +52,7 @@ export default {
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
pageWidth: '',
|
||||
@@ -125,9 +111,9 @@ export default {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: [this.$util.img(imageUrl)],
|
||||
success: (res) => {},
|
||||
fail: (res) => {},
|
||||
complete: (res) => {}
|
||||
success: (res) => { },
|
||||
fail: (res) => { },
|
||||
complete: (res) => { }
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
<view data-component-name="diy-img-ads" class="single-graph">
|
||||
<view :style="imgAdsMarginWarp" class="swiper-box">
|
||||
<block v-if="imgAdsValue.list.length == 1">
|
||||
<view class="simple-graph-wrap" :style="imgAdsSwiper" @click="handlerClick(imgAdsValue.list[0].link)" @tap="handlerClick(imgAdsValue.list[0].link)">
|
||||
<image :style="{ height: imgAdsValue.list[0].imgHeight }" :src="$util.img(imgAdsValue.list[0].imageUrl)" mode="widthFix" :show-menu-by-longpress="true"/>
|
||||
<view class="simple-graph-wrap" :style="imgAdsSwiper" @click="handlerClick(imgAdsValue.list[0].link)"
|
||||
@tap="handlerClick(imgAdsValue.list[0].link)">
|
||||
<image :style="{ height: imgAdsValue.list[0].imgHeight }"
|
||||
:src="$util.img(imgAdsValue.list[0].imageUrl)" mode="widthFix" :show-menu-by-longpress="true" />
|
||||
</view>
|
||||
</block>
|
||||
<swiper v-else class="swiper" :style="{ height: swiperHeight }" :class="{
|
||||
@@ -13,9 +15,11 @@
|
||||
}" :autoplay="true" :interval="imgAdsValue.interval" circular="true" :indicator-dots="isDots"
|
||||
indicator-color="rgba(130, 130, 130, .5)" :indicator-active-color="imgAdsValue.indicatorColor"
|
||||
@change="swiperChange">
|
||||
<swiper-item class="swiper-item" :style="imgAdsSwiper" v-for="(item, index) in imgAdsValue.list" :key="index" v-if="item.imageUrl" @click="handlerClick(item.link)" @tap="handlerClick(item.link)">
|
||||
<swiper-item class="swiper-item" :style="imgAdsSwiper" v-for="(item, index) in imgAdsValue.list"
|
||||
:key="index" v-if="item.imageUrl" @click="handlerClick(item.link)" @tap="handlerClick(item.link)">
|
||||
<view class="item" :style="imgAdsSwiper + 'height: ' + item.imgHeight">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :show-menu-by-longpress="true"/>
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
|
||||
:show-menu-by-longpress="true" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
@@ -26,7 +30,9 @@
|
||||
{ 'swiper-left': imgAdsValue.indicatorLocation == 'left' },
|
||||
{ 'swiper-right': imgAdsValue.indicatorLocation == 'right' }
|
||||
]">
|
||||
<view v-for="(numItem, numIndex) in imgAdsValue.list.length" :key="numIndex" :class="['swiper-dot', { active: numIndex == swiperIndex }]" :style="[numIndex == swiperIndex && { backgroundColor: imgAdsValue.indicatorColor }]"></view>
|
||||
<view v-for="(numItem, numIndex) in imgAdsValue.list.length" :key="numIndex"
|
||||
:class="['swiper-dot', { active: numIndex == swiperIndex }]"
|
||||
:style="[numIndex == swiperIndex && { backgroundColor: imgAdsValue.indicatorColor }]"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
@@ -34,9 +40,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 图片广告
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
// 图片广告
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-img-ads',
|
||||
props: {
|
||||
value: {
|
||||
@@ -60,15 +66,15 @@
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
imgAdsMarginWarp: function() {
|
||||
imgAdsMarginWarp: function () {
|
||||
var obj = '';
|
||||
obj = 'background-color:' + this.value.componentBgColor + ';';
|
||||
return obj;
|
||||
},
|
||||
imgAdsSwiper: function() {
|
||||
imgAdsSwiper: function () {
|
||||
var obj = '';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
@@ -78,13 +84,13 @@
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
singleGraphBg: function() {
|
||||
singleGraphBg: function () {
|
||||
var imgArr = [];
|
||||
for (let i = 0; i < this.imgAdsValue.list.length; i++) {
|
||||
let item = this.imgAdsValue.list[i];
|
||||
imgArr[i] = parseFloat(item.imgHeight);
|
||||
}
|
||||
imgArr.sort(function(a, b) {
|
||||
imgArr.sort(function (a, b) {
|
||||
return b - a;
|
||||
});
|
||||
var obj = '';
|
||||
@@ -136,17 +142,19 @@
|
||||
// #endif
|
||||
},
|
||||
async handlerClick(link) {
|
||||
await this.__$emitEvent({eventName: 'img-ads-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'img-ads-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.$util.diyRedirectTo(link);
|
||||
}})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.single-graph {
|
||||
.single-graph {
|
||||
width: 100%;
|
||||
line-height: 0;
|
||||
display: flex;
|
||||
@@ -154,9 +162,9 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-graph-wrap {
|
||||
.simple-graph-wrap {
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -168,9 +176,9 @@
|
||||
.heat-map {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item.active text {
|
||||
.item.active text {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -184,21 +192,21 @@
|
||||
overflow: hidden;
|
||||
padding: 0 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
.swiper-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
.swiper {
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
display: flex;
|
||||
@@ -225,9 +233,9 @@
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dot-box {
|
||||
.swiper-dot-box {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
width: 100%;
|
||||
@@ -269,42 +277,42 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
/deep/.uni-scroll-view::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
/deep/.uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper /deep/ .uni-swiper-dots-horizontal {
|
||||
.swiper /deep/ .uni-swiper-dots-horizontal {
|
||||
bottom: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-left /deep/ .uni-swiper-dots-horizontal {
|
||||
.swiper-left /deep/ .uni-swiper-dots-horizontal {
|
||||
left: 40rpx;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-right /deep/ .uni-swiper-dots-horizontal {
|
||||
.swiper-right /deep/ .uni-swiper-dots-horizontal {
|
||||
right: 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-angle /deep/ .uni-swiper-dots-horizontal .uni-swiper-dot {
|
||||
.carousel-angle /deep/ .uni-swiper-dots-horizontal .uni-swiper-dot {
|
||||
width: 24rpx;
|
||||
border-radius: 0;
|
||||
height: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot {
|
||||
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot {
|
||||
width: 18rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot-active {
|
||||
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot-active {
|
||||
width: 36rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -15,18 +15,23 @@
|
||||
}" v-if="value.styleType == 'fill'">
|
||||
{{ item.short_name ? item.short_name : item.category_name }}
|
||||
</view>
|
||||
<view class="text-con" :class="index == pageIndex ? 'active' : ''" :style="{ color: index == pageIndex ? value.selectColor : value.noColor }" v-else>
|
||||
<view class="text-con" :class="index == pageIndex ? 'active' : ''"
|
||||
:style="{ color: index == pageIndex ? value.selectColor : value.noColor }" v-else>
|
||||
{{ item.short_name ? item.short_name : item.category_name }}
|
||||
</view>
|
||||
<view class="color-base-bg line" v-if="index == pageIndex && value.styleType != 'fill'" :style="{ background: value.selectColor ? value.selectColor + '!important' : 'rgba(0,0,0,0)' + '!important' }">
|
||||
<view class="color-base-bg line" v-if="index == pageIndex && value.styleType != 'fill'"
|
||||
:style="{ background: value.selectColor ? value.selectColor + '!important' : 'rgba(0,0,0,0)' + '!important' }">
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<text class="iconfont icon-unfold unfold-arrows" :style="{ color: value.moreColor }" @click="unfoldMenu"></text>
|
||||
<text class="iconfont icon-unfold unfold-arrows" :style="{ color: value.moreColor }"
|
||||
@click="unfoldMenu"></text>
|
||||
</view>
|
||||
<uni-popup ref="navTopCategoryPop" type="top" :top="uniPopTop">
|
||||
<view class="nav-topcategory-pop">
|
||||
<text v-for="(item, index) in cateList" :key="index" :class="['category-item', { 'color-base-text color-base-border active': pageIndex == index }]" @click="changePageIndex(index)">
|
||||
<text v-for="(item, index) in cateList" :key="index"
|
||||
:class="['category-item', { 'color-base-text color-base-border active': pageIndex == index }]"
|
||||
@click="changePageIndex(index)">
|
||||
{{ item.short_name ? item.short_name : item.category_name }}
|
||||
</text>
|
||||
</view>
|
||||
@@ -40,57 +45,78 @@
|
||||
<slot name="components"></slot>
|
||||
<view class="index-category-box">
|
||||
<view class="category-goods" v-show="!isloading">
|
||||
<mescroll-uni :top="uniPopTop" ref="mescroll" @getData="getGoodsList" :background="'url(' + $util.img(bgUrl) + ') 0px -50px / 100% no-repeat'" :paddingBoth="'30rpx'" @touchmove.prevent.stop>
|
||||
<mescroll-uni :top="uniPopTop" ref="mescroll" @getData="getGoodsList"
|
||||
:background="'url(' + $util.img(bgUrl) + ') 0px -50px / 100% no-repeat'"
|
||||
:paddingBoth="'30rpx'" @touchmove.prevent.stop>
|
||||
<block slot="list">
|
||||
<!-- 二级分类 -->
|
||||
<view class="twoCategorylist" v-if="twoCategorylist != 'undefined' && twoCategorylist && twoCategorylist.length > 0">
|
||||
<view class="twoCategorylist"
|
||||
v-if="twoCategorylist != 'undefined' && twoCategorylist && twoCategorylist.length > 0">
|
||||
<view class="twoCategory min" v-if="twoCategorylist.length <= 5">
|
||||
<view class="twoCategory-page">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist" :key="index" @click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist"
|
||||
:key="index" @click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="item-box">
|
||||
<image :src="$util.img(item.image)" v-if="item.image" mode="aspectFill"/>
|
||||
<image :src="$util.getDefaultImage().goods" v-else mode="aspectFill"/>
|
||||
<image :src="$util.img(item.image)" v-if="item.image"
|
||||
mode="aspectFill" />
|
||||
<image :src="$util.getDefaultImage().goods" v-else
|
||||
mode="aspectFill" />
|
||||
<view>{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="twoCategory base" v-if="twoCategorylist.length > 5 && twoCategorylist.length <= 10">
|
||||
<view class="twoCategory base"
|
||||
v-if="twoCategorylist.length > 5 && twoCategorylist.length <= 10">
|
||||
<view class="twoCategory-page">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist" :key="index" @click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist"
|
||||
:key="index" @click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="item-box">
|
||||
<image :src="$util.img(item.image)" v-if="item.image" mode="aspectFill"/>
|
||||
<image :src="$util.getDefaultImage().goods" v-else mode="aspectFill"/>
|
||||
<image :src="$util.img(item.image)" v-if="item.image"
|
||||
mode="aspectFill" />
|
||||
<image :src="$util.getDefaultImage().goods" v-else
|
||||
mode="aspectFill" />
|
||||
<view>{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<swiper class="twoCategory big" :duration="500" v-if="twoCategorylist.length > 10" @change="swiperTocategoryChange">
|
||||
<swiper class="twoCategory big" :duration="500"
|
||||
v-if="twoCategorylist.length > 10" @change="swiperTocategoryChange">
|
||||
<swiper-item class="twoCategory-page" v-for="page in maxPage" :key="page">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist" :key="index" v-if="index >= (page - 1) * 10 && index < page * 10" @click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="swiper-item" v-for="(item, index) in twoCategorylist"
|
||||
:key="index" v-if="index >= (page - 1) * 10 && index < page * 10"
|
||||
@click="toCateGoodsList(item.category_id_2, 2)">
|
||||
<view class="item-box">
|
||||
<image :src="item.image" mode="aspectFill"/>
|
||||
<image :src="item.image" mode="aspectFill" />
|
||||
<view>{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="dot-box">
|
||||
<view class="dot-item" v-for="page in maxPage" v-if="maxPage > 1" :key="page" :class="twoCategorylistId == page - 1 ? 'active color-base-bg' : ''"></view>
|
||||
<view class="dot-item" v-for="page in maxPage" v-if="maxPage > 1"
|
||||
:key="page"
|
||||
:class="twoCategorylistId == page - 1 ? 'active color-base-bg' : ''">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分类广告 -->
|
||||
<image class="category_adv" v-if="cateList[pageIndex].image_adv" :src="$util.img(cateList[pageIndex].image_adv)" mode="widthFix"/>
|
||||
<image class="category_adv" v-if="cateList[pageIndex].image_adv"
|
||||
:src="$util.img(cateList[pageIndex].image_adv)" mode="widthFix" />
|
||||
|
||||
<view class="goods-list double-column" v-if="goodsList[pageIndex].list.length">
|
||||
<view class="goods-item" v-for="(item, index) in goodsList[pageIndex].list" :key="index" @click="toDetail(item)">
|
||||
<view class="goods-item" v-for="(item, index) in goodsList[pageIndex].list"
|
||||
:key="index" @click="toDetail(item)">
|
||||
<view class="goods-img">
|
||||
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
|
||||
<view class="color-base-bg goods-tag" v-if="value.goodsTag == 'default' && goodsTag(item) != ''">{{ goodsTag(item) }}</view>
|
||||
<image :src="goodsImg(item.goods_image)" mode="widthFix"
|
||||
@error="imgError(index)" />
|
||||
<view class="color-base-bg goods-tag"
|
||||
v-if="value.goodsTag == 'default' && goodsTag(item) != ''">{{
|
||||
goodsTag(item) }}</view>
|
||||
<view class="goods-tag-img" v-if="value.goodsTag == 'diy'">
|
||||
<image :src="$util.img(value.tagImg.imageUrl)"/>
|
||||
<image :src="$util.img(value.tagImg.imageUrl)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
@@ -99,21 +125,29 @@
|
||||
</view>
|
||||
<view class="lineheight-clear">
|
||||
<view class="discount-price">
|
||||
<text class="unit color-base-text font-size-tag">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="price color-base-text font-size-toolbar">{{ showPrice(item) }}</text>
|
||||
<text class="unit color-base-text font-size-tag">{{
|
||||
$lang('common.currencySymbol') }}</text>
|
||||
<text class="price color-base-text font-size-toolbar">{{
|
||||
showPrice(item) }}</text>
|
||||
</view>
|
||||
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)"><image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"/>
|
||||
<view class="member-price-tag"
|
||||
v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')"
|
||||
mode="widthFix" />
|
||||
</view>
|
||||
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"/>
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')"
|
||||
mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info">
|
||||
<view class="delete-price font-size-activity-tag color-tip" v-if="showMarketPrice(item)">
|
||||
<view class="delete-price font-size-activity-tag color-tip"
|
||||
v-if="showMarketPrice(item)">
|
||||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
<view class="sale font-size-activity-tag color-tip">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
|
||||
<view class="sale font-size-activity-tag color-tip">已售{{
|
||||
item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -135,8 +169,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsLoading from '@/components/ns-loading/ns-loading.vue';
|
||||
export default {
|
||||
import nsLoading from '@/components/ns-loading/ns-loading.vue';
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-index-page',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
@@ -152,6 +188,7 @@
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
components: {
|
||||
nsLoading
|
||||
},
|
||||
@@ -444,7 +481,7 @@
|
||||
// #ifdef H5
|
||||
if (this.pageIndex == 0) {
|
||||
// 标记当前页使用了mescroll (需延时,确保page已切换)
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
let uniPageDom = document.getElementsByTagName('uni-page')[0];
|
||||
uniPageDom && uniPageDom.removeAttribute('use_mescroll');
|
||||
}, 30);
|
||||
@@ -452,16 +489,16 @@
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.bg {
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-top-category {
|
||||
.nav-top-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
@@ -486,9 +523,9 @@
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-topcategory-pop {
|
||||
.nav-topcategory-pop {
|
||||
padding: 0 10rpx 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -510,9 +547,9 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.diyIndex {
|
||||
.diyIndex {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
white-space: nowrap;
|
||||
@@ -565,25 +602,25 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-page-box {
|
||||
.index-page-box {
|
||||
width: 100%;
|
||||
height: calc(100vh - 288rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.index-page-content {
|
||||
.index-page-content {
|
||||
width: 100%;
|
||||
// height: calc(100vh - 144px);
|
||||
}
|
||||
}
|
||||
|
||||
.index-category-box.active {
|
||||
.index-category-box.active {
|
||||
padding-bottom: 160rpx;
|
||||
padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
.index-category-box {
|
||||
.index-category-box {
|
||||
width: 100%;
|
||||
padding-bottom: 110rpx;
|
||||
padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
|
||||
@@ -691,20 +728,20 @@
|
||||
.category-goods {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.uni-scroll-view::-webkit-scrollbar {
|
||||
/deep/.uni-scroll-view::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list.double-column {
|
||||
.goods-list.double-column {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: $margin-updown;
|
||||
@@ -826,5 +863,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,20 @@
|
||||
<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">
|
||||
<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>
|
||||
</view>
|
||||
<view class="fui-list-inner" >
|
||||
<view class="title" style="color: ;height: 75rpx;">
|
||||
<text style="font-weight:600" :style="{color:item.textColor}">{{item.title}}</text>
|
||||
<view class="subtitle" style="font-size:24rpx" :style="{color:item.textColor}">{{item.desc}}</view>
|
||||
<view class="fui-list-inner">
|
||||
<view class="title" style="height: 75rpx;">
|
||||
<text style="font-weight:600" :style="{ color: item.textColor }">{{ item.title }}</text>
|
||||
<view class="subtitle" style="font-size:24rpx" :style="{ color: item.textColor }">{{ item.desc }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-remark jump" style="padding-right: 20rpx; text-align: center; line-height: 140rpx;">
|
||||
<span style="font-size:24rpx;padding: 14rpx 18rpx;border-radius:8rpx" :style="{background:item.BtBgColor,color:item.BtColor}" @click="previewSqs()">立即添加</span>
|
||||
<span style="font-size:24rpx;padding: 14rpx 18rpx;border-radius:8rpx"
|
||||
:style="{ background: item.BtBgColor, color: item.BtColor }" @click="previewSqs()">立即添加</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -20,13 +22,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'diy-picture',
|
||||
// 客服展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-kefu',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -37,7 +42,7 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
@@ -55,7 +60,7 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewSqs(){
|
||||
previewSqs() {
|
||||
var img = this.$util.img(this.value.list[1].imageUrl)
|
||||
uni.previewImage({
|
||||
current: img,
|
||||
@@ -63,9 +68,7 @@
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
@@ -3,33 +3,36 @@
|
||||
<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 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"
|
||||
<view v-for="(item, index) in value.list" @click="redirectTo(item.link)" class="fui-cell"
|
||||
:class="item.iconType == 'img' ? 'img-cell' : ''">
|
||||
<view class="fui-cell-icon" :style="{ 'color': item.style ? item.style.iconColor : '#333' }">
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon" :value="item.style ? item.style : null"
|
||||
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
|
||||
<image v-if="item.iconType == 'img'" mode="widthFix" :src="$util.img(item.imageUrl)" style="border-radius:6rpx;width: 60rpx;"></image>
|
||||
</view>
|
||||
<view class="fui-cell-text" style="color:#333;">{{item.title}}</view>
|
||||
<view class="fui-cell-remark" style="font-size: 24rpx;">{{lang=='en-us'?'view':'查看'}}</view>
|
||||
<image v-if="item.iconType == 'img'" mode="widthFix" :src="$util.img(item.imageUrl)"
|
||||
style="border-radius:6rpx;width: 60rpx;"></image>
|
||||
</view>
|
||||
<view class="fui-cell-text" style="color:#333;">{{ item.title }}</view>
|
||||
<view class="fui-cell-remark" style="font-size: 24rpx;">{{ lang == 'en-us' ? 'view' : '查看' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// 自定义列表菜单展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-listmenu',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
lang:uni.getStorageSync("lang")//en-us 英文
|
||||
lang: uni.getStorageSync("lang")//en-us 英文
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -37,7 +40,7 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
@@ -52,7 +55,7 @@
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
if(this.value.margin.top > 0)css += 'margin-top:' + this.value.margin.top * 2 + 'rpx;';
|
||||
if (this.value.margin.top > 0) css += 'margin-top:' + this.value.margin.top * 2 + 'rpx;';
|
||||
return css;
|
||||
}
|
||||
},
|
||||
@@ -67,11 +70,11 @@
|
||||
this.$util.diyRedirectTo(link);
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.img-cell{
|
||||
padding:0 16rpx !important;
|
||||
.img-cell {
|
||||
padding: 0 16rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,19 @@
|
||||
<template>
|
||||
<x-skeleton data-component-name="diy-live" type="banner" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="live-wrap" @click="handlerClick(liveInfo.roomid)" @tap="handlerClick(liveInfo.roomid)" v-if="liveInfo">
|
||||
<view class="live-wrap" @click="handlerClick(liveInfo.roomid)" @tap="handlerClick(liveInfo.roomid)"
|
||||
v-if="liveInfo">
|
||||
<view class="banner-wrap">
|
||||
<image :src="liveInfo.banner != '' ? $util.img(liveInfo.banner) : $util.img('public/uniapp/live/live_default_banner.png')"
|
||||
mode="widthFix" @error="liveInfo.banner = $util.img('public/uniapp/live/live_default_banner.png')"/>
|
||||
<image
|
||||
:src="liveInfo.banner != '' ? $util.img(liveInfo.banner) : $util.img('public/uniapp/live/live_default_banner.png')"
|
||||
mode="widthFix"
|
||||
@error="liveInfo.banner = $util.img('public/uniapp/live/live_default_banner.png')" />
|
||||
<view class="shade"></view>
|
||||
<view class="wrap">
|
||||
<view class="room-name">
|
||||
<text class="status-name font-size-base" :class="{ 'color-base-bg': liveInfo.live_status == '101' }">
|
||||
<text class="iconfont icon-zhibozhong font-size-sub" v-if="liveInfo.live_status == '101'"></text>
|
||||
<text class="status-name font-size-base"
|
||||
:class="{ 'color-base-bg': liveInfo.live_status == '101' }">
|
||||
<text class="iconfont icon-zhibozhong font-size-sub"
|
||||
v-if="liveInfo.live_status == '101'"></text>
|
||||
<text class="iconfont icon-zhibojieshu font-size-sub" v-else></text>
|
||||
{{ liveInfo.status_name }}
|
||||
</text>
|
||||
@@ -18,7 +23,9 @@
|
||||
</view>
|
||||
<view class="room-info" v-if="value.isShowAnchorInfo || value.isShowLiveGood">
|
||||
<block v-if="value.isShowAnchorInfo">
|
||||
<image :src="liveInfo.anchor_img != '' ? $util.img(liveInfo.anchor_img) : $util.getDefaultImage().head" class="anchor-img" @error="liveInfo.anchor_img = $util.getDefaultImage().head"/>
|
||||
<image
|
||||
:src="liveInfo.anchor_img != '' ? $util.img(liveInfo.anchor_img) : $util.getDefaultImage().head"
|
||||
class="anchor-img" @error="liveInfo.anchor_img = $util.getDefaultImage().head" />
|
||||
<text class="anchor-name">主播：{{ liveInfo.anchor_name }}</text>
|
||||
</block>
|
||||
<text class="separate" v-if="value.isShowAnchorInfo && value.isShowLiveGood">|</text>
|
||||
@@ -31,9 +38,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 直播
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
// 直播
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
components: {},
|
||||
name: 'diy-live',
|
||||
props: {
|
||||
@@ -63,7 +70,7 @@
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getLiveInfo();
|
||||
}
|
||||
},
|
||||
@@ -101,7 +108,8 @@
|
||||
this.changeLiveStatus(liveStatus);
|
||||
}
|
||||
})
|
||||
.catch(err => {console.log('get live status', err);
|
||||
.catch(err => {
|
||||
console.log('get live status', err);
|
||||
});
|
||||
|
||||
// 往后间隔1分钟或更慢的频率去轮询获取直播状态
|
||||
@@ -140,23 +148,25 @@
|
||||
});
|
||||
},
|
||||
async handlerClick(roomid) {
|
||||
await this.__$emitEvent({eventName: 'live-tap', data: roomid, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'live-tap', data: roomid, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.entryRoom(roomid);
|
||||
}})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.live-wrap {
|
||||
.live-wrap {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-wrap {
|
||||
.banner-wrap {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
@@ -214,9 +224,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-info {
|
||||
.room-info {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
@@ -240,10 +250,10 @@
|
||||
margin: 0 10rpx;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +1,26 @@
|
||||
<template>
|
||||
<view data-component-name="diy-many-goods-list" class="many-goods-list">
|
||||
<scroll-view scroll-x="true" class="many-goods-list-head" :scroll-into-view="'a' + cateIndex" :style="manyWrapCss">
|
||||
<view v-for="(item, index) in value.list" class="scroll-item" :class="{ active: index == cateIndex }" :id="'a' + index" :key="index" @click="handlerClick({item,index})" @tap="handlerClick({item,index})">
|
||||
<scroll-view scroll-x="true" class="many-goods-list-head" :scroll-into-view="'a' + cateIndex"
|
||||
:style="manyWrapCss">
|
||||
<view v-for="(item, index) in value.list" class="scroll-item" :class="{ active: index == cateIndex }"
|
||||
:id="'a' + index" :key="index" @click="handlerClick({ item, index })" @tap="handlerClick({ item, index })">
|
||||
<view class="split-line" v-if="index > 0"></view>
|
||||
<view class="cate">
|
||||
<view class="name" :style="{ color : value.headStyle.titleColor }">{{ item.title }}</view>
|
||||
<view class="name" :style="{ color: value.headStyle.titleColor }">{{ item.title }}</view>
|
||||
<view class="desc" :class="{ 'color-base-bg': index == cateIndex && item.desc }">{{ item.desc }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="many-goods-list-fill" :style="{'height': manyInfo.height}" v-if="fixedTop"></view>
|
||||
<diy-goods-list class="many-goods-list-body" v-if="goodsValue" :value="goodsValue" ref="diyGoodsList"></diy-goods-list>
|
||||
<view class="many-goods-list-fill" :style="{ 'height': manyInfo.height }" v-if="fixedTop"></view>
|
||||
<diy-goods-list class="many-goods-list-body" v-if="goodsValue" :value="goodsValue"
|
||||
ref="diyGoodsList"></diy-goods-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-many-goods-list',
|
||||
props: {
|
||||
value: {
|
||||
@@ -54,10 +57,10 @@
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.changeCateIndex(this.value.list[0], 0, true);
|
||||
},
|
||||
scrollTop: function(nval) {
|
||||
scrollTop: function (nval) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.select('.many-goods-list')
|
||||
@@ -169,25 +172,27 @@
|
||||
this.$refs.diyGoodsList.goodsValue = this.goodsValue;
|
||||
this.$refs.diyGoodsList.getGoodsList();
|
||||
},
|
||||
async handlerClick({item,index}) {
|
||||
await this.__$emitEvent({eventName: 'many-goods-list-tap', data: {item,index}, promiseCallback: (event, handler, awaitedResult) => {
|
||||
async handlerClick({ item, index }) {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'many-goods-list-tap', data: { item, index }, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.changeCateIndex(item, index, false);
|
||||
}})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.many-goods-list-head {
|
||||
.many-goods-list-head {
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
scroll-view {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
@@ -251,5 +256,5 @@
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,11 @@
|
||||
<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">
|
||||
<map
|
||||
id="map"
|
||||
style="width: 100%; height:600rpx"
|
||||
scale="12"
|
||||
:markers="markerst"
|
||||
bindupdated="bindupdated"
|
||||
:longitude="item.lng"
|
||||
:latitude="item.lat"
|
||||
show-location>
|
||||
<cover-view style="position:absolute;right:10px;bottom:30rpx;z-index:99999;background:#4390FF;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;" @click="handlerClick(item)" @tap="handlerClick(item)">
|
||||
<view class="fui-list-group merchgroup" style="margin-top:0" v-for="(item, index) in value.list">
|
||||
<map id="map" style="width: 100%; height:600rpx" scale="12" :markers="markerst" bindupdated="bindupdated"
|
||||
:longitude="item.lng" :latitude="item.lat" show-location>
|
||||
<cover-view
|
||||
style="position:absolute;right:10px;bottom:30rpx;z-index:99999;background:#4390FF;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;"
|
||||
@click="handlerClick(item)" @tap="handlerClick(item)">
|
||||
<cover-view style="font-size:24rpx">一键导航</cover-view>
|
||||
</cover-view>
|
||||
</map>
|
||||
@@ -20,9 +15,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 地图
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
// 地图
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-map',
|
||||
props: {
|
||||
value: {
|
||||
@@ -32,7 +27,7 @@
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
markers:[]
|
||||
markers: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -40,16 +35,16 @@
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
markerst(){
|
||||
markerst() {
|
||||
return [{
|
||||
id:1,
|
||||
latitude:this.value.list[0].lat,
|
||||
longitude:this.value.list[0].lng
|
||||
id: 1,
|
||||
latitude: this.value.list[0].lat,
|
||||
longitude: this.value.list[0].lng
|
||||
}]
|
||||
},
|
||||
style() {
|
||||
@@ -65,23 +60,23 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tomap(item){
|
||||
tomap(item) {
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(item.lat),
|
||||
longitude: parseFloat(item.lng),
|
||||
name:"一键导航",
|
||||
name: "一键导航",
|
||||
})
|
||||
},
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'map-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'map-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.tomap(item);
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
@@ -5,52 +5,63 @@
|
||||
<view class="member-info" :style="memberInfoStyle">
|
||||
<view class="info-wrap" :style="infoStyle" v-if="memberInfo">
|
||||
<view class="headimg" @click="getWxAuth">
|
||||
<image :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().head" mode="widthFix" @error="memberInfo.headimg = $util.getDefaultImage().head"/>
|
||||
<image :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.getDefaultImage().head"
|
||||
mode="widthFix" @error="memberInfo.headimg = $util.getDefaultImage().head" />
|
||||
</view>
|
||||
<view class="info">
|
||||
<!-- #ifdef MP -->
|
||||
<block v-if="(memberInfo.nickname.indexOf('u_') != -1 && memberInfo.nickname == memberInfo.username) || memberInfo.nickname == memberInfo.mobile">
|
||||
<block
|
||||
v-if="(memberInfo.nickname.indexOf('u_') != -1 && memberInfo.nickname == memberInfo.username) || memberInfo.nickname == memberInfo.mobile">
|
||||
<view class="nickname"><text class="name" @click="getWxAuth">点击授权头像昵称</text></view>
|
||||
</block>
|
||||
<view class="nickname" v-else>
|
||||
<text class="name" @click="getWxAuth">{{ memberInfo.nickname }}</text>
|
||||
<view class="member-level" v-if="(value.style == 1 || value.style == 2) && memberInfo.member_level" >
|
||||
<view class="member-level"
|
||||
v-if="(value.style == 1 || value.style == 2) && memberInfo.member_level">
|
||||
<!-- <text class="icondiy icon-system-huangguan"></text> -->
|
||||
<text class="level-name">{{ memberInfo.member_level_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-level" v-if="value.style == 3 && memberInfo.member_level" >
|
||||
<view class="member-level" v-if="value.style == 3 && memberInfo.member_level">
|
||||
<!-- <image :src="$util.img('public/uniapp/member/supervip_icon.png')" mode="widthFix" class="level-icon"/> -->
|
||||
<view class="level-name">{{ memberInfo.member_level_name }}</view>
|
||||
</view>
|
||||
<view class="member-level" v-if="value.style == 4 && memberInfo.member_level" >
|
||||
<image :src="$util.img('app/component/view/member_info/img/style_4_vip_tag.png')" mode="widthFix" class="level-icon"/>
|
||||
<view class="member-level" v-if="value.style == 4 && memberInfo.member_level">
|
||||
<image :src="$util.img('app/component/view/member_info/img/style_4_vip_tag.png')"
|
||||
mode="widthFix" class="level-icon" />
|
||||
<text class="level-name">{{ memberInfo.member_level_name }}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<block v-if="$util.isWeiXin() && ((memberInfo.nickname.indexOf('u_') != -1 && memberInfo.nickname == memberInfo.username) || memberInfo.nickname == memberInfo.mobile) ">
|
||||
<block
|
||||
v-if="$util.isWeiXin() && ((memberInfo.nickname.indexOf('u_') != -1 && memberInfo.nickname == memberInfo.username) || memberInfo.nickname == memberInfo.mobile)">
|
||||
<view class="nickname"><text class="name" @click="getWxAuth">点击获取微信头像</text></view>
|
||||
</block>
|
||||
<view class="nickname" v-else>
|
||||
<text class="name" @click="redirect('/pages_tool/member/info')">{{ memberInfo.nickname }}</text>
|
||||
<view class="member-level" v-if="(value.style == 1 || value.style == 2) && memberInfo.member_level">
|
||||
<text class="name" @click="redirect('/pages_tool/member/info')">{{ memberInfo.nickname
|
||||
}}</text>
|
||||
<view class="member-level"
|
||||
v-if="(value.style == 1 || value.style == 2) && memberInfo.member_level">
|
||||
<!-- <text class="icondiy icon-system-huangguan"></text> -->
|
||||
<text class="level-name">{{ memberInfo.member_level_name }}VIP1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-level" v-if="value.style == 3 && memberInfo.member_level" >
|
||||
<view class="member-level" v-if="value.style == 3 && memberInfo.member_level">
|
||||
<!-- <image :src="$util.img('public/uniapp/member/supervip_icon.png')" mode="widthFix" class="level-icon"/> -->
|
||||
<view class="level-name">{{ memberInfo.member_level_name }}</view>
|
||||
</view>
|
||||
|
||||
<view class="member-level" v-if="value.style == 4 && memberInfo.member_level" ><image :src="$util.img('app/component/view/member_info/img/style_4_vip_tag.png')" mode="widthFix" class="level-icon"/>
|
||||
<view class="member-level" v-if="value.style == 4 && memberInfo.member_level">
|
||||
<image :src="$util.img('app/component/view/member_info/img/style_4_vip_tag.png')"
|
||||
mode="widthFix" class="level-icon" />
|
||||
<text class="level-name">{{ memberInfo.member_level_name }}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view v-if="ischina == 1" style="background: #fff;height: 60rpx;width: 60rpx;border-radius: 50rpx;line-height:65rpx;text-align: center;color:#000" @click.stop="modifyInfo()">{{langIndex == 0?'CN':'EN'}}</view>
|
||||
<view v-if="ischina == 1"
|
||||
style="background: #fff;height: 60rpx;width: 60rpx;border-radius: 50rpx;line-height:65rpx;text-align: center;color:#000"
|
||||
@click.stop="modifyInfo()">{{ langIndex == 0 ? 'CN' : 'EN' }}</view>
|
||||
</view>
|
||||
|
||||
<view class="info-wrap" v-else :style="infoStyle" @click="redirect('/pages/member/index')">
|
||||
@@ -58,17 +69,21 @@
|
||||
<image :src="$util.getDefaultImage().head" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="nickname"><text class="name">{{$lang('login')}}</text></view>
|
||||
<view class="desc">{{$lang('loginTpis')}}</view>
|
||||
<view class="nickname"><text class="name">{{ $lang('login') }}</text></view>
|
||||
<view class="desc">{{ $lang('loginTpis') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-if="ischina == 1" style="background: #fff;height: 60rpx;width: 60rpx;border-radius: 50rpx;line-height:65rpx;text-align: center;color:#000" @click.stop="modifyInfo()">{{langIndex == 0?'CN':'EN'}}</view>
|
||||
<view v-if="ischina == 1"
|
||||
style="background: #fff;height: 60rpx;width: 60rpx;border-radius: 50rpx;line-height:65rpx;text-align: center;color:#000"
|
||||
@click.stop="modifyInfo()">{{ langIndex == 0 ? 'CN' : 'EN' }}</view>
|
||||
</view>
|
||||
|
||||
<view class="account-info" v-show="value.style == 1" :style="{ 'margin-left': parseInt(value.infoMargin) * 2 + 'rpx', 'margin-right': parseInt(value.infoMargin) * 2 + 'rpx' }">
|
||||
<view class="account-info" v-show="value.style == 1"
|
||||
:style="{ 'margin-left': parseInt(value.infoMargin) * 2 + 'rpx', 'margin-right': parseInt(value.infoMargin) * 2 + 'rpx' }">
|
||||
<view class="account-item" @click="redirect('/pages_tool/member/balance')">
|
||||
<view class="value price-font">
|
||||
{{ memberInfo ? (parseFloat(memberInfo.balance) + parseFloat(memberInfo.balance_money)).toFixed(2) : '--' }}
|
||||
{{ memberInfo ? (parseFloat(memberInfo.balance) +
|
||||
parseFloat(memberInfo.balance_money)).toFixed(2) : '--' }}
|
||||
</view>
|
||||
<view class="title">{{ $lang('balance') }}</view>
|
||||
</view>
|
||||
@@ -85,7 +100,7 @@
|
||||
<view class="title">{{ $lang('coupon') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--
|
||||
<!--
|
||||
<view class="super-member"
|
||||
v-if="superMember && (value.style == 1 || value.style == 2 || value.style == 3)"
|
||||
:style="superMemberStyle">
|
||||
@@ -152,9 +167,11 @@
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="account-info" v-show="value.style == 2" :style="{ 'margin-left': parseInt(value.infoMargin) * 2 + 'rpx', 'margin-right': parseInt(value.infoMargin) * 2 + 'rpx' }">
|
||||
<view class="account-info" v-show="value.style == 2"
|
||||
:style="{ 'margin-left': parseInt(value.infoMargin) * 2 + 'rpx', 'margin-right': parseInt(value.infoMargin) * 2 + 'rpx' }">
|
||||
<view class="account-item" @click="redirect('/pages_tool/member/balance')">
|
||||
<view class="value price-font">{{ memberInfo ? (parseFloat(memberInfo.balance) + parseFloat(memberInfo.balance_money)).toFixed(2) : '--' }}</view>
|
||||
<view class="value price-font">{{ memberInfo ? (parseFloat(memberInfo.balance) +
|
||||
parseFloat(memberInfo.balance_money)).toFixed(2) : '--' }}</view>
|
||||
<view class="title">{{ $lang('balance') }}</view>
|
||||
</view>
|
||||
<view class="solid"></view>
|
||||
@@ -185,7 +202,8 @@
|
||||
<view class="item-wrap">
|
||||
<text class="label">头像</text>
|
||||
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image :src="avatarUrl ? avatarUrl : $util.getDefaultImage().head" @error="avatarUrl = $util.getDefaultImage().head" mode="aspectFill"/>
|
||||
<image :src="avatarUrl ? avatarUrl : $util.getDefaultImage().head"
|
||||
@error="avatarUrl = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
<text class="iconfont icon-right color-tip"></text>
|
||||
</button>
|
||||
</view>
|
||||
@@ -197,8 +215,10 @@
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="item-wrap">
|
||||
<text class="label">头像</text>
|
||||
<button open-type="getAuthorize" scope="userInfo" @getAuthorize="aliappGetUserinfo" :plain="true" class="border-0">
|
||||
<image :src="avatarUrl ? avatarUrl : $util.getDefaultImage().head" @error="avatarUrl = $util.getDefaultImage().head" mode="aspectFill"/>
|
||||
<button open-type="getAuthorize" scope="userInfo" @getAuthorize="aliappGetUserinfo"
|
||||
:plain="true" class="border-0">
|
||||
<image :src="avatarUrl ? avatarUrl : $util.getDefaultImage().head"
|
||||
@error="avatarUrl = $util.getDefaultImage().head" mode="aspectFill" />
|
||||
<text class="iconfont icon-right color-tip"></text>
|
||||
</button>
|
||||
</view>
|
||||
@@ -217,14 +237,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
// 自定义会员中心——会员信息
|
||||
import nsContact from '@/components/ns-contact/ns-contact.vue';
|
||||
export default {
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
// 自定义会员中心——会员信息展示
|
||||
import nsContact from '@/components/ns-contact/ns-contact.vue';
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-member-info',
|
||||
props: {
|
||||
value: {
|
||||
@@ -237,6 +258,7 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
components: {
|
||||
nsContact
|
||||
},
|
||||
@@ -253,7 +275,7 @@
|
||||
|
||||
langList: [],
|
||||
langIndex: 0,
|
||||
ischina:0
|
||||
ischina: 0
|
||||
};
|
||||
},
|
||||
options: {
|
||||
@@ -269,7 +291,7 @@
|
||||
this.init();
|
||||
},
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
@@ -361,8 +383,8 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
modifyInfo(){
|
||||
this.$langConfig.change(this.langIndex==1?'zh-cn':'en-us')
|
||||
modifyInfo() {
|
||||
this.$langConfig.change(this.langIndex == 1 ? 'zh-cn' : 'en-us')
|
||||
},
|
||||
// isRefresh 是否刷新会员数据，true：刷新，false：不刷新
|
||||
init(isRefresh = true) {
|
||||
@@ -707,21 +729,21 @@
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// 增加超出隐藏，是为样式四进行占位【样式四是有定位部分】，定位部分也可以设置颜色
|
||||
.container {
|
||||
// 增加超出隐藏，是为样式四进行占位【样式四是有定位部分】，定位部分也可以设置颜色
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.common-wrap {
|
||||
.common-wrap {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// 会员信息
|
||||
.member-info {
|
||||
// 会员信息
|
||||
.member-info {
|
||||
.info-wrap {
|
||||
padding: 44rpx 30rpx;
|
||||
display: flex;
|
||||
@@ -784,6 +806,7 @@
|
||||
line-height: 1;
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
|
||||
.member-level {
|
||||
font-size: 24rpx;
|
||||
background: none;
|
||||
@@ -805,7 +828,8 @@
|
||||
&.auth {
|
||||
margin-left: 0;
|
||||
}
|
||||
.level-name{
|
||||
|
||||
.level-name {
|
||||
background: #31312d;
|
||||
color: rgb(242, 220, 172) !important;
|
||||
padding: 6rpx 24rpx;
|
||||
@@ -868,9 +892,9 @@
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-info {
|
||||
.account-info {
|
||||
display: flex;
|
||||
padding: 40rpx 0;
|
||||
align-items: center;
|
||||
@@ -902,9 +926,9 @@
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-style-1 {
|
||||
.data-style-1 {
|
||||
.account-info {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
@@ -920,16 +944,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-style-2 {
|
||||
.data-style-2 {
|
||||
.member-info {
|
||||
// border-radius: 0 0 100% 100%/0 0 70rpx 70rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.member-level {
|
||||
background: none;
|
||||
.level-name{
|
||||
|
||||
.level-name {
|
||||
background: #31312d;
|
||||
color: rgb(242, 220, 172) !important;
|
||||
padding: 6rpx 24rpx;
|
||||
@@ -980,9 +1005,9 @@
|
||||
color: var(--super-member-start-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-style-3 {
|
||||
.data-style-3 {
|
||||
.info-wrap view {
|
||||
color: #282c38;
|
||||
}
|
||||
@@ -1077,9 +1102,9 @@
|
||||
// font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-style-4 {
|
||||
.data-style-4 {
|
||||
position: relative;
|
||||
|
||||
.info-wrap {
|
||||
@@ -1250,9 +1275,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-code-popup {
|
||||
.member-code-popup {
|
||||
width: 100%;
|
||||
min-height: 900rpx;
|
||||
background: none;
|
||||
@@ -1352,21 +1377,21 @@
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .member-info-style4 .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
/deep/ .member-info-style4 .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.member-code-popup .popup-top {
|
||||
.member-code-popup .popup-top {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.member-complete-info-popup {
|
||||
.member-complete-info-popup {
|
||||
.complete-info-wrap {
|
||||
background: #fff;
|
||||
padding: 50rpx 40rpx 40rpx;
|
||||
@@ -1455,12 +1480,12 @@
|
||||
margin: 40rpx auto 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom,
|
||||
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom .uni-popup__wrapper-box {
|
||||
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom,
|
||||
.member-complete-info-popup /deep/ .uni-popup__wrapper.bottom .uni-popup__wrapper-box {
|
||||
border-top-left-radius: 30rpx !important;
|
||||
border-top-right-radius: 30rpx !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,53 +2,75 @@
|
||||
<view data-component-name="diy-member-my-order" class="common-wrap" :style="warpCss">
|
||||
<view class="order-wrap">
|
||||
<view class="status-wrap">
|
||||
<view class="item-wrap" @click="redirect('/pages_order/list?status=waitpay')" style="margin-right: 10rpx;">
|
||||
<view class="item-wrap" @click="redirect('/pages_order/list?status=waitpay')"
|
||||
style="margin-right: 10rpx;">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_pay.png')" mode="widthFix"/>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_pay_shade.png') + ')'"></view>
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_pay.png')" mode="widthFix" />
|
||||
<view class="icon-shade"
|
||||
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_pay_shade.png') + ')'">
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.waitPay.icon" v-if="value.icon.waitPay" :value="value.icon.waitPay.style ? value.icon.waitPay.style : null"></diy-icon>
|
||||
<diy-icon :icon="value.icon.waitPay.icon" v-if="value.icon.waitPay"
|
||||
:value="value.icon.waitPay.style ? value.icon.waitPay.style : null"></diy-icon>
|
||||
</template>
|
||||
<text v-if="orderNum.waitpay > 0" class="order-num color-base-bg price-font">{{ orderNum.waitpay > 99 ? '99+' : orderNum.waitpay }}</text>
|
||||
<text v-if="orderNum.waitpay > 0" class="order-num color-base-bg price-font">{{ orderNum.waitpay
|
||||
> 99 ? '99+' :
|
||||
orderNum.waitpay }}</text>
|
||||
</view>
|
||||
<view class="title">{{ $lang('waitpay') }}</view>
|
||||
</view>
|
||||
<view class="item-wrap" @click="redirect('/pages_order/list?status=waitsend')" style="margin-right: 10rpx;">
|
||||
<view class="item-wrap" @click="redirect('/pages_order/list?status=waitsend')"
|
||||
style="margin-right: 10rpx;">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_send.png')" mode="widthFix"></image>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_send_shade.png') + ')'"></view>
|
||||
<view class="icon-shade"
|
||||
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_send_shade.png') + ')'">
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.waitSend.icon" v-if="value.icon.waitSend" :value="value.icon.waitSend.style ? value.icon.waitSend.style : null"></diy-icon>
|
||||
<diy-icon :icon="value.icon.waitSend.icon" v-if="value.icon.waitSend"
|
||||
:value="value.icon.waitSend.style ? value.icon.waitSend.style : null"></diy-icon>
|
||||
</template>
|
||||
<text v-if="orderNum.waitsend > 0" class="order-num color-base-bg price-font">{{ orderNum.waitsend > 99 ? '99+' : orderNum.waitsend }}</text>
|
||||
<text v-if="orderNum.waitsend > 0" class="order-num color-base-bg price-font">{{
|
||||
orderNum.waitsend > 99 ? '99+'
|
||||
: orderNum.waitsend }}</text>
|
||||
</view>
|
||||
<view class="title">{{ $lang('waitsend') }}</view>
|
||||
</view>
|
||||
<view class="item-wrap" @click="redirect('/pages_order/list?status=waitconfirm')" style="margin-right: 10rpx;">
|
||||
<view class="item-wrap" @click="redirect('/pages_order/list?status=waitconfirm')"
|
||||
style="margin-right: 10rpx;">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_confirm.png')" mode="widthFix"/>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_confirm_shade.png') + ')'"></view>
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_confirm.png')" mode="widthFix" />
|
||||
<view class="icon-shade"
|
||||
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_confirm_shade.png') + ')'">
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.waitConfirm.icon" v-if="value.icon.waitConfirm" :value="value.icon.waitConfirm.style ? value.icon.waitConfirm.style : null"></diy-icon>
|
||||
<diy-icon :icon="value.icon.waitConfirm.icon" v-if="value.icon.waitConfirm"
|
||||
:value="value.icon.waitConfirm.style ? value.icon.waitConfirm.style : null"></diy-icon>
|
||||
</template>
|
||||
<text v-if="orderNum.waitconfirm > 0" class="order-num color-base-bg price-font">{{ orderNum.waitconfirm > 99 ? '99+' : orderNum.waitconfirm }}</text>
|
||||
<text v-if="orderNum.waitconfirm > 0" class="order-num color-base-bg price-font">{{
|
||||
orderNum.waitconfirm > 99 ?
|
||||
'99+' : orderNum.waitconfirm }}</text>
|
||||
</view>
|
||||
<view class="title">{{ $lang('waitconfirm') }}</view>
|
||||
</view>
|
||||
<view class="item-wrap" @click="redirect('/pages_order/list?status=waitrate')" style="margin-right: 10rpx;">
|
||||
<view class="item-wrap" @click="redirect('/pages_order/list?status=waitrate')"
|
||||
style="margin-right: 10rpx;">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_use.png')" mode="widthFix"/>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_rate_shade.png') + ')'"></view>
|
||||
<image :src="$util.img('public/uniapp/member/order/wait_use.png')" mode="widthFix" />
|
||||
<view class="icon-shade"
|
||||
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_rate_shade.png') + ')'">
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.waitUse.icon" v-if="value.icon.waitUse" :value="value.icon.waitUse.style ? value.icon.waitUse.style : null"></diy-icon>
|
||||
<diy-icon :icon="value.icon.waitUse.icon" v-if="value.icon.waitUse"
|
||||
:value="value.icon.waitUse.style ? value.icon.waitUse.style : null"></diy-icon>
|
||||
</template>
|
||||
<!-- <text v-if="orderNum.wait_use > 0" class="order-num color-base-bg price-font">{{ orderNum.wait_use > 99 ? '99+' : orderNum.wait_use }}</text> -->
|
||||
</view>
|
||||
@@ -57,13 +79,18 @@
|
||||
<view class="item-wrap" @click="redirect('/pages_tool/order/activist')">
|
||||
<view class="icon-block">
|
||||
<template v-if="value.style == 3">
|
||||
<image :src="$util.img('public/uniapp/member/order/refunding.png')" mode="widthFix"/>
|
||||
<view class="icon-shade" :style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/refunding_shade.png') + ')'"></view>
|
||||
<image :src="$util.img('public/uniapp/member/order/refunding.png')" mode="widthFix" />
|
||||
<view class="icon-shade"
|
||||
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/refunding_shade.png') + ')'">
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<diy-icon :icon="value.icon.refunding.icon" v-if="value.icon.refunding" :value="value.icon.refunding.style ? value.icon.refunding.style : null"></diy-icon>
|
||||
<diy-icon :icon="value.icon.refunding.icon" v-if="value.icon.refunding"
|
||||
:value="value.icon.refunding.style ? value.icon.refunding.style : null"></diy-icon>
|
||||
</template>
|
||||
<text v-if="orderNum.refunding > 0" class="order-num color-base-bg price-font">{{ orderNum.refunding > 99 ? '99+' : orderNum.refunding }}</text>
|
||||
<text v-if="orderNum.refunding > 0" class="order-num color-base-bg price-font">{{
|
||||
orderNum.refunding > 99 ?
|
||||
'99+' : orderNum.refunding }}</text>
|
||||
</view>
|
||||
<view class="title">{{ $lang('activist') }}</view>
|
||||
</view>
|
||||
@@ -74,14 +101,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 自定义会员中心——我的订单
|
||||
export default {
|
||||
// 自定义会员中心——我的订单展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-member-my-order',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
orderNum: {
|
||||
@@ -102,7 +131,7 @@
|
||||
this.init();
|
||||
},
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
@@ -171,16 +200,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.common-wrap {
|
||||
.common-wrap {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.order-wrap {
|
||||
.order-wrap {
|
||||
.status-wrap {
|
||||
display: flex;
|
||||
padding: 30rpx 0;
|
||||
@@ -194,6 +223,7 @@
|
||||
text-align: center;
|
||||
background: #f6f7f9;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.icon-block {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
@@ -245,5 +275,5 @@
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,9 +3,11 @@
|
||||
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig" v-if="value.ornament.type == 'default'">
|
||||
<view class="merch-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" :style="itemCss" @click="handlerClick(item)" @tap="handlerClick(item)">
|
||||
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index"
|
||||
:style="itemCss" @click="handlerClick(item)" @tap="handlerClick(item)">
|
||||
<view class="merch-img">
|
||||
<image class="cover-img" :src="$util.img(item.merch_image)" mode="widthFix" @error="imgError(index)" />
|
||||
<image class="cover-img" :src="$util.img(item.merch_image)" mode="widthFix"
|
||||
@error="imgError(index)" />
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<text class="title">{{ item.merch_name }}</text>
|
||||
@@ -17,21 +19,22 @@
|
||||
</view>
|
||||
</x-skeleton>
|
||||
<view v-else :style="warpCss">
|
||||
<scroll-view :scroll-x="true" :class="['merch-nav', 'singleSlide' ]">
|
||||
<scroll-view :scroll-x="true" :class="['merch-nav', 'singleSlide']">
|
||||
<!-- #ifdef MP -->
|
||||
<view class="uni-scroll-view-content">
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index" :style="{ width: 100 / 4 + '%' }" @click="handlerClick(item)" @tap="handlerClick(item)">
|
||||
<view class="graphic-img" v-if="value.mode != 'text'" :style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
|
||||
<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index"
|
||||
:style="{ width: 100 / 4 + '%' }" @click="handlerClick(item)" @tap="handlerClick(item)">
|
||||
<view class="graphic-img" v-if="value.mode != 'text'"
|
||||
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
|
||||
<image
|
||||
:src="$util.img(item.merch_image) || $util.img('public/uniapp/default_img/goods.png')"
|
||||
mode="aspectFill"
|
||||
:show-menu-by-longpress="true"
|
||||
style="max-width: 80rpx; max-height: 80rpx; border-radius: 50rpx;"
|
||||
/>
|
||||
mode="aspectFill" :show-menu-by-longpress="true"
|
||||
style="max-width: 80rpx; max-height: 80rpx; border-radius: 50rpx;" />
|
||||
</view>
|
||||
<text class="graphic-text" style="font-size: 28rpx; font-weight: normal; color: rgb(48, 49, 51);">
|
||||
<text class="graphic-text"
|
||||
style="font-size: 28rpx; font-weight: normal; color: rgb(48, 49, 51);">
|
||||
{{ item.merch_name }}
|
||||
</text>
|
||||
</view>
|
||||
@@ -45,9 +48,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 文章
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
// 文章
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-article',
|
||||
props: {
|
||||
value: {
|
||||
@@ -171,23 +174,24 @@
|
||||
if (this.list[index]) this.list[index].merch_image = this.$util.getDefaultImage().article;
|
||||
},
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'merch-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'merch-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.toDetail(item);
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/* 单行滑动 */
|
||||
.merch-nav.singleSlide>>>.uni-scroll-view-content {
|
||||
/* 单行滑动 */
|
||||
.merch-nav.singleSlide>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
|
||||
.merch-nav {
|
||||
.merch-nav {
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -264,8 +268,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.merch-wrap {
|
||||
}
|
||||
|
||||
.merch-wrap {
|
||||
.list-wrap {
|
||||
&.style-1 {
|
||||
.item {
|
||||
@@ -292,13 +297,15 @@
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
.desc{
|
||||
color:#888
|
||||
.desc {
|
||||
color: #888
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
// margin-bottom: 10rpx;
|
||||
@@ -354,5 +361,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,36 +3,45 @@
|
||||
<view class="diy-notes" :style="{ backgroundColor: value.componentBgColor }">
|
||||
<view class="diy-notes-top">
|
||||
<view class="notes-title" :style="{ color: value.titleTextColor }">{{ value.title }}</view>
|
||||
<view class="notes-more" @click="toMore()" :style="{ color: value.moreTextColor }">{{ value.more }}</view>
|
||||
<view class="notes-more" @click="toMore()" :style="{ color: value.moreTextColor }">{{ value.more }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="diy-notes-box" scroll-x="true" show-scrollbar="true">
|
||||
<view class="notes-box-item" v-for="(item, i) in dataList" :key="i" @click="handlerClick(item)" @tap="handlerClick(item)"
|
||||
:style="notesItemStyle">
|
||||
<view class="notes-box-item" v-for="(item, i) in dataList" :key="i" @click="handlerClick(item)"
|
||||
@tap="handlerClick(item)" :style="notesItemStyle">
|
||||
<view class="notes-item" v-if="item.status == 1">
|
||||
<view class="notes-item-con">
|
||||
<view class="notes-title">{{ item.note_title }}</view>
|
||||
<view class="notes-highlights-list" v-if="value.notesLabel == 1 && item.goods_highlights">
|
||||
<text class="color-base-bg" v-for="(labelItem, labelIndex) in item.label" :key="labelIndex">{{ labelItem }}</text>
|
||||
<text class="color-base-bg" v-for="(labelItem, labelIndex) in item.label"
|
||||
:key="labelIndex">{{ labelItem }}</text>
|
||||
</view>
|
||||
<view class="notes-intro">
|
||||
<text class="notes-label color-base-text">#{{ item.note_type == 'goods_item' ? '单品介绍' : '掌柜说' }}#</text>
|
||||
<text class="notes-label color-base-text">#{{ item.note_type == 'goods_item' ? '单品介绍' :
|
||||
'掌柜说' }}#</text>
|
||||
{{ item.note_abstract }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="notes-img-wrap" :class="{ 'notes-img-wrap-list': item.cover_type == 1 }">
|
||||
<image v-if="item.cover_type == 0" :src="$util.img(item.img)" @error="imageError(i)" mode="aspectFill" class="notes-item-image"/>
|
||||
<image v-else v-for="(imgItem, imgIndex) in item.img" :key="imgIndex" :src="$util.img(imgItem)" @error="imageError(i)" mode="aspectFit" class="notes-item-image-li"/>
|
||||
<image v-if="item.cover_type == 0" :src="$util.img(item.img)" @error="imageError(i)"
|
||||
mode="aspectFill" class="notes-item-image" />
|
||||
<image v-else v-for="(imgItem, imgIndex) in item.img" :key="imgIndex"
|
||||
:src="$util.img(imgItem)" @error="imageError(i)" mode="aspectFit"
|
||||
class="notes-item-image-li" />
|
||||
</view>
|
||||
|
||||
<view class="notes-item-con">
|
||||
<view class="notes-info" v-if="(value.readNum == 1 && item.is_show_read_num == 1) || (value.uploadTime == 1 && item.is_show_release_time == 1)">
|
||||
<view class="notes-info"
|
||||
v-if="(value.readNum == 1 && item.is_show_read_num == 1) || (value.uploadTime == 1 && item.is_show_release_time == 1)">
|
||||
<view class="notes-num">
|
||||
<text v-show="value.uploadTime == 1 && item.is_show_release_time == 1">{{ item.update_time_day }}</text>
|
||||
<text v-show="value.uploadTime == 1 && item.is_show_release_time == 1">{{
|
||||
item.update_time_day }}</text>
|
||||
</view>
|
||||
<view class="notes-num">
|
||||
<text v-show="value.readNum == 1 && item.is_show_read_num == 1">阅读 {{ item.initial_read_num + item.read_num }}</text>
|
||||
<text v-show="value.readNum == 1 && item.is_show_read_num == 1">阅读 {{
|
||||
item.initial_read_num + item.read_num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -46,8 +55,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-notes',
|
||||
props: {
|
||||
value: {
|
||||
@@ -74,7 +83,7 @@
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getDataList();
|
||||
}
|
||||
},
|
||||
@@ -183,29 +192,31 @@
|
||||
this.$forceUpdate();
|
||||
},
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'notes-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'notes-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.toDetail(item.note_id);
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-notes {
|
||||
.diy-notes {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-notes-top {
|
||||
.diy-notes-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -231,14 +242,14 @@
|
||||
position: relative;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.diy-notes-box {
|
||||
.diy-notes-box {
|
||||
width: 100%;
|
||||
padding: 30rpx 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.notes-box-item {
|
||||
.notes-box-item {
|
||||
width: calc(100% - 8rpx);
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
@@ -355,5 +366,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,18 +2,24 @@
|
||||
<view data-component-name="diy-notice" class="diy-notice">
|
||||
<view :class="['notice', value.contentStyle]" :style="noticeWrapCss">
|
||||
|
||||
<image v-if="value.iconType == 'img'" class="notice-img" :src="$util.img(value.imageUrl)" mode="heightFix"/>
|
||||
<diy-icon v-if="value.iconType == 'icon'" :icon="value.icon" :value="value.style ? value.style : 'null'" :style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
|
||||
<image v-if="value.iconType == 'img'" class="notice-img" :src="$util.img(value.imageUrl)"
|
||||
mode="heightFix" />
|
||||
<diy-icon v-if="value.iconType == 'icon'" :icon="value.icon" :value="value.style ? value.style : 'null'"
|
||||
:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
|
||||
<view class="notice-xian"></view>
|
||||
<view class="main-wrap">
|
||||
<!-- 横向滚动 -->
|
||||
<view class="horizontal-wrap" v-if="value.scrollWay == 'horizontal'">
|
||||
<view class="marquee-wrap">
|
||||
<view class="marquee" :style="marqueeStyle">
|
||||
<text v-for="(item, index) in list" :key="index" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item.title }}</text>
|
||||
<text v-for="(item, index) in list" :key="index"
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
item.title }}</text>
|
||||
</view>
|
||||
<view class="marquee" :style="marqueeAgainStyle">
|
||||
<text v-for="(item, index) in list" :key="index" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item.title }}</text>
|
||||
<text v-for="(item, index) in list" :key="index"
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
item.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -22,7 +28,8 @@
|
||||
<template v-if="value.scrollWay == 'upDown'">
|
||||
<swiper :vertical="true" :duration="500" autoplay="true" circular="true">
|
||||
<swiper-item v-for="(item, index) in list" :key="index" @touchmove.prevent.stop>
|
||||
<text class="beyond-hiding using-hidden" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">
|
||||
<text class="beyond-hiding using-hidden"
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
</swiper-item>
|
||||
@@ -46,14 +53,16 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// 公告
|
||||
export default {
|
||||
// 公告展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-notice',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
@@ -68,11 +77,11 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
if (this.value.sources == 'initial') this.getData();
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
mounted() {
|
||||
// 数据源：公告系统
|
||||
if (this.value.sources == 'initial') {
|
||||
@@ -83,7 +92,7 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
noticeWrapCss: function() {
|
||||
noticeWrapCss: function () {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
@@ -180,11 +189,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.notice {
|
||||
.notice {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -205,25 +214,25 @@
|
||||
background-color: #e4e4e4;
|
||||
margin: 0 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrap {
|
||||
.main-wrap {
|
||||
display: inline-block;
|
||||
width: calc(100% - 115rpx);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
swiper {
|
||||
swiper {
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.beyond-hiding {
|
||||
.beyond-hiding {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-popup {
|
||||
.notice-popup {
|
||||
padding: 0 30rpx 40rpx;
|
||||
background-color: #fff;
|
||||
|
||||
@@ -253,17 +262,17 @@
|
||||
button {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-wrap {
|
||||
.horizontal-wrap {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee-wrap {
|
||||
.marquee-wrap {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -271,9 +280,9 @@
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee {
|
||||
.marquee {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
@@ -286,9 +295,9 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@@ -296,5 +305,5 @@
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -39,7 +39,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 付款码
|
||||
// 付款码展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-payment-qrcode',
|
||||
props: {
|
||||
@@ -47,10 +48,11 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
computed: {
|
||||
warpCss() {
|
||||
var obj = '';
|
||||
@@ -59,7 +61,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
methods: {
|
||||
toLink() {
|
||||
@@ -72,7 +74,7 @@ export default {
|
||||
// #ifndef H5
|
||||
// 允许从相机和相册扫码,h5端不起作用
|
||||
uni.scanCode({
|
||||
success: function(res) {
|
||||
success: function (res) {
|
||||
console.log('条码类型：' + res.scanType);
|
||||
console.log('条码内容：' + res.result);
|
||||
}
|
||||
@@ -95,8 +97,10 @@ export default {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.qrocde-left {
|
||||
flex: 1;
|
||||
|
||||
.qrocde-desc {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 26rpx;
|
||||
@@ -105,16 +109,19 @@ export default {
|
||||
justify-content: center;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-tag;
|
||||
|
||||
.iconfont {
|
||||
margin-left: 10rpx;
|
||||
font-size: $font-size-tag;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.qrocde-action {
|
||||
padding-bottom: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -123,22 +130,27 @@ export default {
|
||||
width: 230rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: 46rpx;
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.action-name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qrocde-right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -149,15 +161,18 @@ export default {
|
||||
width: 90rpx;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
|
||||
.name {
|
||||
font-size: $font-size-sub;
|
||||
writing-mode: tb-rl;
|
||||
color: #fff;
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -172,6 +187,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-popup {
|
||||
padding: 0 30rpx 40rpx;
|
||||
background-color: #fff;
|
||||
@@ -185,6 +201,7 @@ export default {
|
||||
position: relative;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
float: right;
|
||||
@@ -192,10 +209,12 @@ export default {
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
max-height: 600rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<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;">
|
||||
<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 v-for="(item, index) in value.list" style="line-height: 0;">
|
||||
<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>
|
||||
<!-- <view wx:if="{{!childitem.linkurl}}" bindtap="previewImg" data-src="{{childitem.imgurl}}" style="padding:{{diyitem.style.paddingtop==0?0:diyitem.style.paddingtop+'rpx'}} {{diyitem.style.paddingleft==0?0:diyitem.style.paddingleft+'rpx'}}" wx:for="{{diyitem.data}}" wx:for-index="childid" wx:for-item="childitem" wx:key="{{childid}}">
|
||||
<image mode="widthFix" src="{{childitem.imgurl}}" style="{{bannerheight?'height:'+bannerheight+'px':'height:auto'}}"></image>
|
||||
@@ -13,8 +15,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-picture',
|
||||
props: {
|
||||
value: {
|
||||
@@ -31,7 +33,7 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
@@ -50,14 +52,14 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImg(img){
|
||||
previewImg(img) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: [this.$util.img(img)],
|
||||
success: function (res) {},
|
||||
fail: function (res) {},
|
||||
complete: function (res) {},
|
||||
success: function (res) { },
|
||||
fail: function (res) { },
|
||||
complete: function (res) { },
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
@@ -72,19 +74,19 @@
|
||||
},
|
||||
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
if (item.link.wap_url) {
|
||||
this.redirectTo(item.link);
|
||||
} else {
|
||||
this.previewImg(item.imageUrl);
|
||||
}
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
@@ -2,32 +2,45 @@
|
||||
<x-skeleton data-component-name="diy-pinfan" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-pinfan" :class="[value.template, value.style]" :style="warpCss">
|
||||
<template v-if="value.template == 'row1-of1'">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image,{size: 'mid'})" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
|
||||
<view class="content"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
|
||||
<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 class="tag-wrap" v-if="value.groupStyle.control || value.saleStyle.control">
|
||||
<view v-if="value.groupStyle.control" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '', borderColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
<text class="iconfont icon-yonghu3" :style="{ backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"></text>
|
||||
<view v-if="value.groupStyle.control"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '', borderColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
<text class="iconfont icon-yonghu3"
|
||||
:style="{ backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"></text>
|
||||
<text>{{ item.pintuan_num }}人团</text>
|
||||
</view>
|
||||
<view v-if="value.saleStyle.control" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '', borderColor: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
<view v-if="value.saleStyle.control"
|
||||
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '', borderColor: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
<text>已拼{{ item.order_num }}件</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ item.pintuan_price.split(".")[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ "."+item.pintuan_price.split(".")[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.pintuan_price.split(".")[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
"." + item.pintuan_price.split(".")[1] }}</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control" :style="{
|
||||
@@ -37,7 +50,8 @@
|
||||
}">
|
||||
<text class="text">{{ value.btnStyle.text }}</text>
|
||||
<text class="fan" v-if="item.reward_type == 4">返{{ item.reward_type_num }}积分</text>
|
||||
<text class="fan" v-if="item.reward_type == 1 || item.reward_type == 2">返￥{{ item.reward_type_num }}</text>
|
||||
<text class="fan" v-if="item.reward_type == 1 || item.reward_type == 2">返￥{{
|
||||
item.reward_type_num }}</text>
|
||||
<text class="fan" v-if="item.reward_type == 3">返优惠券</text>
|
||||
</button>
|
||||
</view>
|
||||
@@ -47,67 +61,101 @@
|
||||
|
||||
<template v-if="value.template == 'horizontal-slide'">
|
||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image,{size: 'mid'})" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<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 v-if="value.groupStyle.control" class="num">
|
||||
<text class="content-tuan-box" :style="{ color: value.theme == 'diy' ? value.groupStyle.color : '', backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
<text class="content-tuan-box"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.color : '', backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
{{ item.pintuan_num }}人团
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 4">
|
||||
<text class="content-tuan-price"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
|
||||
v-if="item.reward_type == 4">
|
||||
返{{ item.reward_type_num }}积分
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 1 || item.reward_type == 2">
|
||||
<text class="content-tuan-price"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
|
||||
v-if="item.reward_type == 1 || item.reward_type == 2">
|
||||
返￥{{ item.reward_type_num }}
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 3">返优惠券</text>
|
||||
<text class="content-tuan-price"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
|
||||
v-if="item.reward_type == 3">返优惠券</text>
|
||||
</view>
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ item.pintuan_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ "."+item.pintuan_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.pintuan_price.split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
"." + item.pintuan_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem,pageIndex) in page" :key="pageIndex" :class="['swiper-item',(list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
|
||||
:style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
|
||||
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
|
||||
@click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image,{size: 'mid'})" mode="widthFix" @error="imageError(dataIndex)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(dataIndex)" />
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<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 v-if="value.groupStyle.control" class="num">
|
||||
<text class="content-tuan-box" :style="{ color: value.theme == 'diy' ? value.groupStyle.color : '', backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
<text class="content-tuan-box"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.color : '', backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
|
||||
{{ item.pintuan_num }}人团
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 4">
|
||||
<text class="content-tuan-price"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
|
||||
v-if="item.reward_type == 4">
|
||||
返{{ item.reward_type_num }}积分
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 1 || item.reward_type == 2">
|
||||
<text class="content-tuan-price"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
|
||||
v-if="item.reward_type == 1 || item.reward_type == 2">
|
||||
返￥{{ item.reward_type_num }}
|
||||
</text>
|
||||
<text class="content-tuan-price" :style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }" v-if="item.reward_type == 3">
|
||||
<text class="content-tuan-price"
|
||||
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
|
||||
v-if="item.reward_type == 3">
|
||||
返优惠券
|
||||
</text>
|
||||
</view>
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ item.pintuan_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor +'!important' : '' }">{{ "."+item.pintuan_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
item.pintuan_price.split('.')[1] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
|
||||
"." + item.pintuan_price.split('.')[1] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -119,17 +167,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-pinfan',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonType:'',
|
||||
skeletonType: '',
|
||||
skeletonConfig: {},
|
||||
list: [],
|
||||
page: 1
|
||||
@@ -141,7 +191,7 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
@@ -265,35 +315,35 @@
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-pinfan {
|
||||
.diy-pinfan {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
@@ -536,5 +586,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +1,27 @@
|
||||
<template>
|
||||
<x-skeleton data-component-name="diy-pintuan" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-pintuan" :class="[value.template, value.style]" :style="warpCss">
|
||||
<view v-if="value.titleStyle.isShow && list && list.length" :class="[value.titleStyle.style, 'pintuan-head']" :style="{
|
||||
<view v-if="value.titleStyle.isShow && list && list.length"
|
||||
:class="[value.titleStyle.style, 'pintuan-head']" :style="{
|
||||
backgroundImage:
|
||||
'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')'
|
||||
}">
|
||||
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text" :style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
|
||||
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text"
|
||||
:style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
|
||||
{{ value.titleStyle.leftText }}
|
||||
</view>
|
||||
<image v-else class="left-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix"/>
|
||||
<image v-else class="left-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix" />
|
||||
<view class="head-content">
|
||||
<view class="img-warp">
|
||||
<block v-if="headData && headData.member_list && headData.member_list.length">
|
||||
<image v-for="(item, index) in headData.member_list" :key="index" :src="$util.img(item.member_img || 'public/static/img/default_img/square.png')" mode="aspectFill" @error="headImageError(index)"/>
|
||||
<image v-for="(item, index) in headData.member_list" :key="index"
|
||||
:src="$util.img(item.member_img || 'public/static/img/default_img/square.png')"
|
||||
mode="aspectFill" @error="headImageError(index)" />
|
||||
</block>
|
||||
<block v-else>
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill"/>
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill"/>
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill"/>
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill" />
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill" />
|
||||
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill" />
|
||||
</block>
|
||||
</view>
|
||||
<view :style="{ color: value.titleStyle.textColor }">
|
||||
@@ -25,18 +29,24 @@
|
||||
<text>{{ value.titleStyle.style == 'style-2' ? '人参与' : '人拼团成功' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="head-right" :style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }" @click="$util.redirectTo('/pages_promotion/pintuan/list')">
|
||||
<view class="head-right"
|
||||
:style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }"
|
||||
@click="$util.redirectTo('/pages_promotion/pintuan/list')">
|
||||
<text>{{ value.titleStyle.more }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if="value.template == 'row1-of1'">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
|
||||
<view class="content"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
|
||||
<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' }]">
|
||||
@@ -47,7 +57,8 @@
|
||||
color: value.theme == 'diy' ? value.groupStyle.bgColorStart : '',
|
||||
borderColor: value.theme == 'diy' ? value.groupStyle.bgColorStart : ''
|
||||
}">
|
||||
<text class="iconfont icon-yonghu3" :style="{ backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColorStart : '' }"></text>
|
||||
<text class="iconfont icon-yonghu3"
|
||||
:style="{ backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColorStart : '' }"></text>
|
||||
<text>{{ item.pintuan_num }}人团</text>
|
||||
</view>
|
||||
<view v-if="value.saleStyle.control"
|
||||
@@ -59,15 +70,19 @@
|
||||
<view class="bottom-wrap">
|
||||
<view class="price-wrap">
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ item.pintuan_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + item.pintuan_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -85,9 +100,12 @@
|
||||
|
||||
<template v-if="value.template == 'horizontal-slide'">
|
||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
<view v-if="value.groupStyle.control && value.style == 'style-1'" class="num" :style="{
|
||||
color: value.theme == 'diy' ? value.groupStyle.color : '',
|
||||
background: value.theme == 'diy' ? 'linear-gradient(to right,' + value.groupStyle.bgColorStart + ',' + value.groupStyle.bgColorEnd + ')' : ''
|
||||
@@ -95,7 +113,8 @@
|
||||
{{ item.pintuan_num }}人团
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view
|
||||
v-if="value.goodsNameStyle.control && (value.style == 'style-1' || value.style == 'style-3')"
|
||||
class="goods-name"
|
||||
@@ -104,22 +123,28 @@
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl && value.style != 'style-3'">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ item.pintuan_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + item.pintuan_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="other-info-wrap" v-if="value.style == 'style-3'">
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ item.pintuan_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + item.pintuan_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
@@ -131,11 +156,16 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
|
||||
:style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
|
||||
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
|
||||
@click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(dataIndex)" />
|
||||
<view v-if="value.groupStyle.control && value.style != 'style-2'" class="num" :style="{
|
||||
color: value.theme == 'diy' ? value.groupStyle.color : '',
|
||||
background: value.theme == 'diy' ? 'linear-gradient(to right,' + value.groupStyle.bgColorStart + ',' + value.groupStyle.bgColorEnd + ')' : ''
|
||||
@@ -143,18 +173,22 @@
|
||||
{{ item.pintuan_num }}人团
|
||||
</view>
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view v-if="value.goodsNameStyle.control && value.style != 'style-2'" 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 class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ item.pintuan_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + item.pintuan_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
@@ -169,17 +203,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-pintuan',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonType:'',
|
||||
skeletonType: '',
|
||||
skeletonConfig: {},
|
||||
list: [],
|
||||
page: 1,
|
||||
@@ -194,7 +230,7 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getData();
|
||||
this.getHeadData();
|
||||
}
|
||||
@@ -351,35 +387,35 @@
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-pintuan {
|
||||
.diy-pintuan {
|
||||
overflow: hidden;
|
||||
|
||||
.pintuan-head {
|
||||
@@ -772,5 +808,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,22 +2,29 @@
|
||||
<x-skeleton data-component-name="diy-presale" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-presale" v-if="list.length" :class="[value.template, value.style]" :style="warpCss">
|
||||
<template v-if="value.template == 'row1-of1'">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)" @tap="handlerClick(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)"
|
||||
@tap="handlerClick(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.btnStyle.control">
|
||||
<view class="content"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.btnStyle.control">
|
||||
<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 class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ showPrice(item).split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + showPrice(item).split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
@@ -33,22 +40,29 @@
|
||||
</template>
|
||||
<template v-if="value.template == 'horizontal-slide'">
|
||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)" @tap="handlerClick(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)"
|
||||
@tap="handlerClick(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<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 class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ showPrice(item).split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + showPrice(item).split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
@@ -56,24 +70,34 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @click="handlerClick(item)" @tap="handlerClick(item)":class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
|
||||
:style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
|
||||
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
|
||||
@click="handlerClick(item)" @tap="handlerClick(item)" :class="[value.ornament.type]"
|
||||
:style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(dataIndex)" />
|
||||
</view>
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<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 class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ showPrice(item).split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
|
||||
{{ '.' + showPrice(item).split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
@@ -87,8 +111,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-presale',
|
||||
props: {
|
||||
value: {
|
||||
@@ -98,7 +122,7 @@
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonType:'',
|
||||
skeletonType: '',
|
||||
skeletonConfig: {},
|
||||
list: [],
|
||||
page: 1
|
||||
@@ -111,7 +135,7 @@
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
@@ -240,41 +264,43 @@
|
||||
return price;
|
||||
},
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'presale-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'presale-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.toDetail(item);
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-presale {
|
||||
.diy-presale {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
@@ -439,5 +465,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,17 +4,15 @@
|
||||
<!-- #ifdef MP -->
|
||||
<view class="uni-scroll-view-content">
|
||||
<!-- #endif -->
|
||||
<view
|
||||
class="quick-nav-item"
|
||||
v-for="(item, index) in value.list"
|
||||
:key="index"
|
||||
@click="handlerClick(item)"
|
||||
@tap="handlerClick(item)"
|
||||
:style="{ background: 'linear-gradient(to right,' + item.bgColorStart ? item.bgColorStart : '' + ',' + item.bgColorEnd ? item.bgColorEnd : '' + ')' }"
|
||||
>
|
||||
<view class="quick-nav-item" v-for="(item, index) in value.list" :key="index"
|
||||
@click="handlerClick(item)" @tap="handlerClick(item)"
|
||||
:style="{ background: 'linear-gradient(to right,' + item.bgColorStart ? item.bgColorStart : '' + ',' + item.bgColorEnd ? item.bgColorEnd : '' + ')' }">
|
||||
<view class="quick-img" v-if="item.imageUrl || item.icon">
|
||||
<image v-if="item.iconType == 'img'" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')" mode="heightFix" :show-menu-by-longpress="true"></image>
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon" :value="item.style ? item.style : null" :style="{ fontSize: '60rpx' }"></diy-icon>
|
||||
<image v-if="item.iconType == 'img'"
|
||||
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
|
||||
mode="heightFix" :show-menu-by-longpress="true"></image>
|
||||
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
|
||||
:value="item.style ? item.style : null" :style="{ fontSize: '60rpx' }"></diy-icon>
|
||||
</view>
|
||||
<text class="quick-text" :style="{ color: item.textColor }">{{ item.title }}</text>
|
||||
</view>
|
||||
@@ -28,8 +26,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-quick-nav',
|
||||
props: {
|
||||
value: {
|
||||
@@ -39,11 +37,11 @@
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
componentStyle() {
|
||||
@@ -71,16 +69,18 @@
|
||||
this.$util.diyRedirectTo(link);
|
||||
},
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'quick-nav-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'quick-nav-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.redirectTo(item.link);
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.quick-nav >>> .uni-scroll-view-content {
|
||||
.quick-nav>>>.uni-scroll-view-content {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@@ -95,9 +95,11 @@
|
||||
border-radius: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
height: 48rpx;
|
||||
&:first-of-type{
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 12rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -106,6 +108,7 @@
|
||||
margin-right: 6rpx;
|
||||
height: 30rpx;
|
||||
line-height: 1;
|
||||
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
|
||||
@@ -26,10 +26,10 @@ export default {
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
richTextWarpCss: function() {
|
||||
richTextWarpCss: function () {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
@@ -41,12 +41,14 @@ export default {
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
methods: {
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({eventName: 'rich-text-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'rich-text-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -8,16 +8,22 @@
|
||||
<!-- 1左2右 -->
|
||||
<template v-if="value.mode == 'row1-lt-of2-rt'">
|
||||
<view class="template-left">
|
||||
<view :class="['item', value.mode]" @click="handlerClick(value.list[0].link)" @tap="handlerClick(value.list[0].link)" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }">
|
||||
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'" :style="list[0].pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
<view :class="['item', value.mode]" @click="handlerClick(value.list[0].link)"
|
||||
@tap="handlerClick(value.list[0].link)"
|
||||
:style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }">
|
||||
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'"
|
||||
:style="list[0].pageItemStyle" :show-menu-by-longpress="true" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="template-right">
|
||||
<template v-for="(item, index) in list">
|
||||
<template v-if="index > 0">
|
||||
<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)" @tap="handlerClick(item.link)" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :style="item.pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)"
|
||||
@tap="handlerClick(item.link)"
|
||||
:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
|
||||
:style="item.pageItemStyle" :show-menu-by-longpress="true" />
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
@@ -27,25 +33,32 @@
|
||||
<!-- 1左3右 -->
|
||||
<template v-else-if="value.mode == 'row1-lt-of1-tp-of2-bm'">
|
||||
<view class="template-left">
|
||||
<view :class="['item', value.mode]" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }" @click="handlerClick(value.list[0].link)" @tap="handlerClick(value.list[0].link)">
|
||||
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'" :style="list[0].pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
<view :class="['item', value.mode]"
|
||||
:style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }"
|
||||
@click="handlerClick(value.list[0].link)" @tap="handlerClick(value.list[0].link)">
|
||||
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'"
|
||||
:style="list[0].pageItemStyle" :show-menu-by-longpress="true" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="template-right">
|
||||
<view :class="['item', value.mode]" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: list[1].imgWidth, height: list[1].imgHeight + 'px' }" @click="handlerClick(value.list[1].link)" @tap="handlerClick(value.list[1].link)">
|
||||
<image :src="$util.img(value.list[1].imageUrl)" :mode="list[1].imageMode || 'scaleToFill'" :style="list[1].pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
<view :class="['item', value.mode]"
|
||||
:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: list[1].imgWidth, height: list[1].imgHeight + 'px' }"
|
||||
@click="handlerClick(value.list[1].link)" @tap="handlerClick(value.list[1].link)">
|
||||
<image :src="$util.img(value.list[1].imageUrl)" :mode="list[1].imageMode || 'scaleToFill'"
|
||||
:style="list[1].pageItemStyle" :show-menu-by-longpress="true" />
|
||||
</view>
|
||||
<view class="template-bottom">
|
||||
<template v-for="(item, index) in list">
|
||||
<template v-if="index > 1">
|
||||
<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)" @tap="handlerClick(item.link)"
|
||||
:style="{
|
||||
<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)"
|
||||
@tap="handlerClick(item.link)" :style="{
|
||||
marginRight: value.imageGap * 2 + 'rpx',
|
||||
width: item.imgWidth,
|
||||
height: item.imgHeight + 'px'
|
||||
}">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :style="item.pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
|
||||
:style="item.pageItemStyle" :show-menu-by-longpress="true" />
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
@@ -57,7 +70,8 @@
|
||||
<view :class="['item', value.mode]" v-for="(item, index) in list" :key="index"
|
||||
@click="handlerClick(item.link)" @tap="handlerClick(item.link)"
|
||||
:style="{ marginRight: value.imageGap * 2 + 'rpx', marginBottom: value.imageGap * 2 + 'rpx', width: item.widthStyle, height: item.imgHeight + 'px' }">
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :style="item.pageItemStyle" :show-menu-by-longpress="true"/>
|
||||
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
|
||||
:style="item.pageItemStyle" :show-menu-by-longpress="true" />
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
@@ -65,10 +79,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 魔方、橱窗
|
||||
import htmlParser from '@/common/js/html-parser';
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
// 魔方、橱窗
|
||||
import htmlParser from '@/common/js/html-parser';
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-rubik-cube',
|
||||
props: {
|
||||
value: {
|
||||
@@ -119,7 +133,7 @@
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
list() {
|
||||
@@ -361,163 +375,165 @@
|
||||
},
|
||||
|
||||
async handlerClick(link) {
|
||||
await this.__$emitEvent({eventName: 'rubik-cube-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'rubik-cube-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.$util.diyRedirectTo(link);
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.rubik-cube {
|
||||
.rubik-cube {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item {
|
||||
.rubik-cube .item {
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item image {
|
||||
.rubik-cube .item image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 一行两个
|
||||
.rubik-cube .item.row1-of2 {
|
||||
// 一行两个
|
||||
.rubik-cube .item.row1-of2 {
|
||||
box-sizing: border-box;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of2:nth-child(1) {
|
||||
.rubik-cube .item.row1-of2:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of2:nth-child(2) {
|
||||
.rubik-cube .item.row1-of2:nth-child(2) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 一行三个
|
||||
.rubik-cube .item.row1-of3 {
|
||||
// 一行三个
|
||||
.rubik-cube .item.row1-of3 {
|
||||
box-sizing: border-box;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of3:nth-child(1) {
|
||||
.rubik-cube .item.row1-of3:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of3:nth-child(3) {
|
||||
.rubik-cube .item.row1-of3:nth-child(3) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 一行四个
|
||||
.rubik-cube .item.row1-of4 {
|
||||
// 一行四个
|
||||
.rubik-cube .item.row1-of4 {
|
||||
box-sizing: border-box;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of4:nth-child(1) {
|
||||
.rubik-cube .item.row1-of4:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-of4:nth-child(4) {
|
||||
.rubik-cube .item.row1-of4:nth-child(4) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 两左两右
|
||||
.rubik-cube .item.row2-lt-of2-rt {
|
||||
// 两左两右
|
||||
.rubik-cube .item.row2-lt-of2-rt {
|
||||
// width: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(1) {
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(1) {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(2) {
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(2) {
|
||||
margin-right: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(3) {
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(3) {
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(4) {
|
||||
.rubik-cube .item.row2-lt-of2-rt:nth-child(4) {
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 一左两右
|
||||
.rubik-cube .template-left,
|
||||
.rubik-cube .template-right {
|
||||
// 一左两右
|
||||
.rubik-cube .template-left,
|
||||
.rubik-cube .template-right {
|
||||
// width: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .template-left .item.row1-lt-of2-rt:nth-child(1) {
|
||||
.rubik-cube .template-left .item.row1-lt-of2-rt:nth-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .template-right .item.row1-lt-of2-rt:nth-child(2) {
|
||||
.rubik-cube .template-right .item.row1-lt-of2-rt:nth-child(2) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube.row1-lt-of2-rt .template-right {
|
||||
.rubik-cube.row1-lt-of2-rt .template-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
// 一上两下
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(1) {
|
||||
// 一上两下
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(1) {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(2) {
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(2) {
|
||||
// width: 50%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(3) {
|
||||
.rubik-cube .item.row1-tp-of2-bm:nth-child(3) {
|
||||
// width: 50%;
|
||||
box-sizing: border-box;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 一左三右
|
||||
.rubik-cube .template-left .item.row1-lt-of1-tp-of2-bm {
|
||||
// 一左三右
|
||||
.rubik-cube .template-left .item.row1-lt-of1-tp-of2-bm {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .template-bottom {
|
||||
.rubik-cube .template-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.rubik-cube .template-bottom .item:nth-child(2) {
|
||||
.rubik-cube .template-bottom .item:nth-child(2) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +1,68 @@
|
||||
<template>
|
||||
<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">
|
||||
<block v-if="[1,2].includes(value.searchStyle)">
|
||||
<view :class="['search-box', 'search-box-' + value.searchStyle]" :style="searchWrapCss"
|
||||
@click="handlerSearchClick" @tap="handlerSearchClick">
|
||||
<block v-if="[1, 2].includes(value.searchStyle)">
|
||||
<view class="img" v-if="value.searchStyle == 2 && value.iconType == 'img'">
|
||||
<image :src="$util.img(value.imageUrl)" mode="heightFix"/>
|
||||
<image :src="$util.img(value.imageUrl)" mode="heightFix" />
|
||||
</view>
|
||||
<diy-icon class="icon" v-if="value.searchStyle == 2 && value.iconType == 'icon'" :icon="value.icon"
|
||||
:value="value.style ? value.style : 'null'"
|
||||
:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx' }"></diy-icon>
|
||||
<view class="search-content" :style="inputStyle">
|
||||
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title" v-model="searchText" @confirm="handlerSearchClick" disabled="true" :placeholderStyle="placeholderStyle" />
|
||||
<text class="iconfont icon-sousuo3" @click.stop="handlerSearchClick" @tap="handlerSearchClick" :style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
|
||||
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title"
|
||||
v-model="searchText" @confirm="handlerSearchClick" disabled="true"
|
||||
:placeholderStyle="placeholderStyle" />
|
||||
<text class="iconfont icon-sousuo3" @click.stop="handlerSearchClick" @tap="handlerSearchClick"
|
||||
:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="value.searchStyle == 3">
|
||||
<view class="search-content" :style="inputStyle" @click.stop="handlerSearchClick" @tap="handlerSearchClick">
|
||||
<text class="iconfont icon-sousuo3" :style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
|
||||
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title" v-model="searchText" @confirm="handlerSearchClick" disabled="true" @click.stop="handlerSearchClick" @tap="handlerSearchClick" :placeholderStyle="placeholderStyle" />
|
||||
<text class="search-content-btn" @click.stop="handlerSearchClick" @tap="handlerSearchClick" :style="{ 'backgroundColor': value.pageBgColor ? value.pageBgColor : 'rgba(0,0,0,0)' }">搜索</text>
|
||||
<view class="search-content" :style="inputStyle" @click.stop="handlerSearchClick"
|
||||
@tap="handlerSearchClick">
|
||||
<text class="iconfont icon-sousuo3"
|
||||
:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
|
||||
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title"
|
||||
v-model="searchText" @confirm="handlerSearchClick" disabled="true"
|
||||
@click.stop="handlerSearchClick" @tap="handlerSearchClick"
|
||||
:placeholderStyle="placeholderStyle" />
|
||||
<text class="search-content-btn" @click.stop="handlerSearchClick" @tap="handlerSearchClick"
|
||||
:style="{ 'backgroundColor': value.pageBgColor ? value.pageBgColor : 'rgba(0,0,0,0)' }">搜索</text>
|
||||
</view>
|
||||
<view class="img" v-if="value.iconType == 'img'" @click.stop="handlerRedirectToClick(value.searchLink)" @tap="handlerRedirectToClick(value.searchLink)"><image :src="$util.img(value.imageUrl)" mode="heightFix"/>
|
||||
<view class="img" v-if="value.iconType == 'img'"
|
||||
@click.stop="handlerRedirectToClick(value.searchLink)"
|
||||
@tap="handlerRedirectToClick(value.searchLink)">
|
||||
<image :src="$util.img(value.imageUrl)" mode="heightFix" />
|
||||
</view>
|
||||
<diy-icon class="icon" v-if="value.iconType == 'icon'" :icon="value.icon"
|
||||
:value="value.style ? value.style : 'null'"
|
||||
:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx' }"
|
||||
@click.stop="handlerRedirectToClick(value.searchLink)" @tap="handlerRedirectToClick(value.searchLink)"></diy-icon>
|
||||
@click.stop="handlerRedirectToClick(value.searchLink)"
|
||||
@tap="handlerRedirectToClick(value.searchLink)"></diy-icon>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 解决fixed定位后导航栏塌陷的问题 -->
|
||||
<view v-if="value.positionWay == 'fixed'" class="u-navbar-placeholder" :style="{ width: '100%', paddingTop: moduleHeight }"></view>
|
||||
<view v-if="value.positionWay == 'fixed'" class="u-navbar-placeholder"
|
||||
:style="{ width: '100%', paddingTop: moduleHeight }"></view>
|
||||
<ns-login ref="login"></ns-login>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
// 获取系统状态栏的高度
|
||||
let systemInfo = uni.getSystemInfoSync();
|
||||
let menuButtonInfo = {};
|
||||
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
||||
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
|
||||
import DiyMinx from './minx.js'
|
||||
import DiyMinx from './minx.js'
|
||||
|
||||
// 搜索
|
||||
export default {
|
||||
// 搜索
|
||||
export default {
|
||||
name: 'diy-search',
|
||||
props: {
|
||||
value: {
|
||||
@@ -222,40 +237,44 @@
|
||||
})
|
||||
},
|
||||
async handlerRedirectToClick(link) {
|
||||
await this.__$emitEvent({eventName: 'search-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'search-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.redirectTo(link);
|
||||
}})
|
||||
}
|
||||
})
|
||||
},
|
||||
async handlerSearchClick(item) {
|
||||
await this.__$emitEvent({eventName: 'search-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'search-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.search();
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .uni-input-placeholder {
|
||||
/deep/ .uni-input-placeholder {
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-search-wrap {
|
||||
.diy-search-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
.fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 991;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -275,9 +294,9 @@
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box-3 {
|
||||
.search-box-3 {
|
||||
.search-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -321,13 +340,13 @@
|
||||
margin-left: 20rpx;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-content {
|
||||
.search-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.search-content input {
|
||||
.search-content input {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 64rpx;
|
||||
@@ -335,9 +354,9 @@
|
||||
padding: 0 20rpx 0 40rpx;
|
||||
color: #333333;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-content .iconfont {
|
||||
.search-content .iconfont {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 4rpx;
|
||||
@@ -347,5 +366,5 @@
|
||||
width: 80rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +1,33 @@
|
||||
<template>
|
||||
<x-skeleton data-component-name="diy-seckill" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-seckill" v-if="timeList.length > 1 || (timeList.length == 1 && dataList.length)" :class="[value.template, value.style]" :style="wrapStyle">
|
||||
<view v-if="value.titleStyle.isShow && dataList && dataList.length" :class="['title-wrap', value.titleStyle.style]" :style="{
|
||||
<view class="diy-seckill" v-if="timeList.length > 1 || (timeList.length == 1 && dataList.length)"
|
||||
:class="[value.template, value.style]" :style="wrapStyle">
|
||||
<view v-if="value.titleStyle.isShow && dataList && dataList.length"
|
||||
:class="['title-wrap', value.titleStyle.style]" :style="{
|
||||
backgroundImage:
|
||||
'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')'
|
||||
}">
|
||||
<view v-if="value.titleStyle.leftStyle == 'text'" :style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
|
||||
<view v-if="value.titleStyle.leftStyle == 'text'"
|
||||
:style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
|
||||
{{ value.titleStyle.leftText }}
|
||||
</view>
|
||||
<image v-else class="title-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix"/>
|
||||
<text v-if="value.titleStyle.style == 'style-2' && isFuture" :style="{ color: value.titleStyle.textColor }" class="seckill-style-name">距离开始</text>
|
||||
<image v-else class="title-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix" />
|
||||
<text v-if="value.titleStyle.style == 'style-2' && isFuture"
|
||||
:style="{ color: value.titleStyle.textColor }" class="seckill-style-name">距离开始</text>
|
||||
<view class="time" :style="{ background: value.titleStyle.timeBgColor }">
|
||||
<text :style="{ color: value.titleStyle.textColor }" class="seckill-title-name text">{{ isFuture ? '距离开始' : '距离结束' }}</text>
|
||||
<text v-if="value.titleStyle.timeImageUrl" :class="['seckill-title-name icon', value.titleStyle.timeImageUrl]"></text>
|
||||
<text :style="{ color: value.titleStyle.textColor }" class="seckill-title-name text">{{ isFuture ?
|
||||
'距离开始' : '距离结束' }}</text>
|
||||
<text v-if="value.titleStyle.timeImageUrl"
|
||||
:class="['seckill-title-name icon', value.titleStyle.timeImageUrl]"></text>
|
||||
<text class="hour number" :style="titleTimeStyle">{{ seckillH ? seckillH : '00' }}</text>
|
||||
<text class="symbol" :style="{ color: value.titleStyle.colonColor }">:</text>
|
||||
<text class="minute number" :style="titleTimeStyle">{{ seckillI ? seckillI : '00' }}</text>
|
||||
<text class="symbol" :style="{ color: value.titleStyle.colonColor }">:</text>
|
||||
<text class="second number" :style="titleTimeStyle">{{ seckillS ? seckillS : '00' }}</text>
|
||||
</view>
|
||||
<view class="marketimg-box-title-right" v-if="value.titleStyle.moreSupport" :style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }" @click="toMore">
|
||||
<view class="marketimg-box-title-right" v-if="value.titleStyle.moreSupport"
|
||||
:style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }"
|
||||
@click="toMore">
|
||||
<text>{{ value.titleStyle.more }}</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
@@ -27,9 +35,12 @@
|
||||
|
||||
<view class="content-wrap">
|
||||
<template v-if="value.template == 'row1-of1'">
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="goods-name" v-if="value.goodsNameStyle.control"
|
||||
@@ -38,35 +49,47 @@
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="progress" v-if="value.progressStyle.control">
|
||||
<view class="bg" :style="{ backgroundColor: value.theme == 'diy' ? value.progressStyle.bgColor : '' }">
|
||||
<view class="bg"
|
||||
:style="{ backgroundColor: value.theme == 'diy' ? value.progressStyle.bgColor : '' }">
|
||||
<view class="curr" :style="{
|
||||
backgroundColor: value.theme == 'diy' ? value.progressStyle.currColor : '',
|
||||
width: (item.goods_stock + item.sale_num ? Math.floor((item.sale_num / (item.goods_stock + item.sale_num)) * 240) : 0) + 'rpx'
|
||||
}">
|
||||
<image v-if="value.style == 'style-2'" class="progress-bar" :src="$util.img('public/uniapp/seckill/progress_bar_01.png')" mode="widthFix"/>
|
||||
<image v-if="value.style == 'style-2'" class="progress-bar"
|
||||
:src="$util.img('public/uniapp/seckill/progress_bar_01.png')"
|
||||
mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="num" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '', borderColor: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
已抢{{ item.goods_stock + item.sale_num ? ((item.sale_num / (item.goods_stock + item.sale_num)) * 100).toFixed(2) : '0.00' }}%
|
||||
<view class="num"
|
||||
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '', borderColor: value.theme == 'diy' ? value.saleStyle.color : '' }">
|
||||
已抢{{ item.goods_stock + item.sale_num ? ((item.sale_num / (item.goods_stock +
|
||||
item.sale_num)) * 100).toFixed(2) : '0.00' }}%
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-wrap">
|
||||
<view class="price-wrap">
|
||||
<view class="discount-price">
|
||||
<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 : '' }">
|
||||
<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.seckill_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">
|
||||
{{ '.' + item.seckill_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl && value.style != 'style-2'" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="original-price price-font"
|
||||
v-if="value.priceStyle.lineControl && value.style != 'style-2'"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
<view class="price-font" v-else>
|
||||
<text :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">原价：</text>
|
||||
<text :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }" class="original-price">¥{{ item.price }}</text>
|
||||
<text
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">原价：</text>
|
||||
<text :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }"
|
||||
class="original-price">¥{{ item.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control && isLoad" :style="{
|
||||
@@ -82,9 +105,12 @@
|
||||
</template>
|
||||
|
||||
<template v-if="value.template == 'row1-of2'">
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view class="goods-name" v-if="value.goodsNameStyle.control"
|
||||
@@ -93,16 +119,20 @@
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" 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 : '' }">
|
||||
<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.seckill_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">
|
||||
{{ '.' + item.seckill_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="bottom-wrap">
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
<button v-if="value.btnStyle.control && isLoad" :style="{
|
||||
@@ -118,10 +148,14 @@
|
||||
</template>
|
||||
|
||||
<template v-if="value.template == 'horizontal-slide'">
|
||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true"
|
||||
:show-scrollbar="false">
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(index)" />
|
||||
</view>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view class="goods-name" v-if="value.goodsNameStyle.control"
|
||||
@@ -130,44 +164,62 @@
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
<view class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<image v-if="value.style == 'style-2'" class="tag" :src="$util.img('addon/seckill/component/view/seckill/img/style_4_tag.png')" mode="widthFix"/>
|
||||
<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 : '' }">
|
||||
<image v-if="value.style == 'style-2'" class="tag"
|
||||
:src="$util.img('addon/seckill/component/view/seckill/img/style_4_tag.png')"
|
||||
mode="widthFix" />
|
||||
<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.seckill_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">
|
||||
{{ '.' + item.seckill_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', dataList[pageIndex] && [dataList[pageIndex].length / 3].length >= 1 && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in dataList[pageIndex]" :key="dataIndex" @click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
|
||||
:style="{ height: swiperHeight }">
|
||||
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
|
||||
:class="['swiper-item', dataList[pageIndex] && [dataList[pageIndex].length / 3].length >= 1 && 'flex-between']">
|
||||
<view class="item" v-for="(item, dataIndex) in dataList[pageIndex]" :key="dataIndex"
|
||||
@click="toDetail(item.id)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex, pageIndex)"/>
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
|
||||
@error="imageError(dataIndex, pageIndex)" />
|
||||
</view>
|
||||
<view class="content" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view class="content"
|
||||
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
|
||||
<view class="goods-name" v-if="value.goodsNameStyle.control"
|
||||
: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 class="discount-price" v-if="value.priceStyle.mainControl">
|
||||
<image v-if="value.style == 'style-2'" class="tag" :src="$util.img('addon/seckill/component/view/seckill/img/style_4_tag.png')" mode="widthFix"/>
|
||||
<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 : '' }">
|
||||
<image v-if="value.style == 'style-2'" class="tag"
|
||||
:src="$util.img('addon/seckill/component/view/seckill/img/style_4_tag.png')"
|
||||
mode="widthFix" />
|
||||
<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.seckill_price.split('.')[0] }}
|
||||
</text>
|
||||
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">
|
||||
{{ '.' + item.seckill_price.split('.')[1] }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
¥{{ item.price }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -181,14 +233,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 秒杀
|
||||
export default {
|
||||
// 秒杀倒计时
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-seckill',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -221,7 +275,7 @@
|
||||
}
|
||||
},
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
wrapStyle() {
|
||||
@@ -385,7 +439,7 @@
|
||||
self.seckillH = obj.h;
|
||||
self.seckillI = obj.i;
|
||||
self.seckillS = obj.s;
|
||||
this.seckillInterval = setInterval(function() {
|
||||
this.seckillInterval = setInterval(function () {
|
||||
currTime = new Date();
|
||||
newTimes = currTime.getHours() * 60 * 60 + currTime.getMinutes() * 60 + currTime.getSeconds();
|
||||
if (self.isFuture) obj = self.$util.countDown(24 * 60 * 60 + tempArr[self.index].seckill_start_time - newTimes);
|
||||
@@ -408,7 +462,7 @@
|
||||
this.isLoad = true;
|
||||
if (this.seckillId) {
|
||||
this.getDataList(this.seckillId);
|
||||
}else{
|
||||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
@@ -471,35 +525,35 @@
|
||||
onPageHide() {
|
||||
clearInterval(this.seckillInterval);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/deep/.uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/::-webkit-scrollbar {
|
||||
/deep/::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-seckill {
|
||||
.diy-seckill {
|
||||
overflow: hidden;
|
||||
|
||||
.title-wrap.style-1 {
|
||||
@@ -1179,5 +1233,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,18 +2,26 @@
|
||||
<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">
|
||||
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]"
|
||||
:style="storeLabelWrapCss" :enable-flex="true">
|
||||
<view v-for="(item, index) in storeLabel" :key="index" :class="['item']">
|
||||
<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>
|
||||
<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>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]" :style="storeLabelWrapCss" :enable-flex="true">
|
||||
<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']">
|
||||
<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>
|
||||
<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>
|
||||
</scroll-view>
|
||||
</block>
|
||||
@@ -21,14 +29,16 @@
|
||||
</x-skeleton>
|
||||
</template>
|
||||
<script>
|
||||
// 门店标签
|
||||
export default {
|
||||
// 门店标签
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-store-label',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -50,12 +60,12 @@
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {
|
||||
componentRefresh: function (nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
storeLabelWrapCss: function() {
|
||||
storeLabelWrapCss: function () {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
@@ -121,11 +131,11 @@
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-store-label {
|
||||
.diy-store-label {
|
||||
.style-1 {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
@@ -166,5 +176,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -15,12 +15,14 @@
|
||||
</view>
|
||||
<view class="address-wrap" :style="{ color: value.textColor }">
|
||||
<text class="iconfont icon-dizhi"></text>
|
||||
<text v-if="globalStoreInfo && globalStoreInfo.store_id" @click="mapRoute" class="address">{{ globalStoreInfo.show_address }}</text>
|
||||
<text v-if="globalStoreInfo && globalStoreInfo.store_id" @click="mapRoute" class="address">{{
|
||||
globalStoreInfo.show_address }}</text>
|
||||
<text v-else>获取当前位置...</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-image" @click="selectStore()">
|
||||
<image :src="$util.img(globalStoreInfo.store_image)" v-if="globalStoreInfo && globalStoreInfo.store_image" mode="aspectFill"></image>
|
||||
<image :src="$util.img(globalStoreInfo.store_image)"
|
||||
v-if="globalStoreInfo && globalStoreInfo.store_image" mode="aspectFill"></image>
|
||||
<image :src="$util.getDefaultImage().store" v-else mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
@@ -30,7 +32,8 @@
|
||||
<view class="store-box store-three" @click="toStoreList()">
|
||||
<view class="store-info">
|
||||
<view class="store-image" @click="selectStore()">
|
||||
<image :src="$util.img(globalStoreInfo.store_image)" v-if="globalStoreInfo && globalStoreInfo.store_image" mode="aspectFill"></image>
|
||||
<image :src="$util.img(globalStoreInfo.store_image)"
|
||||
v-if="globalStoreInfo && globalStoreInfo.store_image" mode="aspectFill"></image>
|
||||
<image :src="$util.getDefaultImage().store" v-else mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info-box" :style="{ color: value.textColor }">
|
||||
@@ -44,7 +47,8 @@
|
||||
<text class="title" v-else>定位中...</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-icon" @click.stop="search()"><text class="iconfont icon-sousuo3" :style="{ color: value.textColor }"></text></view>
|
||||
<view class="store-icon" @click.stop="search()"><text class="iconfont icon-sousuo3"
|
||||
:style="{ color: value.textColor }"></text></view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
@@ -59,7 +63,8 @@
|
||||
<text class="title" v-else>定位中...</text>
|
||||
</view>
|
||||
<view class="store-right-search">
|
||||
<input type="text" class="uni-input font-size-tag" disabled placeholder="商品搜索" @click.stop="search()" />
|
||||
<input type="text" class="uni-input font-size-tag" disabled placeholder="商品搜索"
|
||||
@click.stop="search()" />
|
||||
<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -70,6 +75,7 @@
|
||||
<script>
|
||||
// 门店展示
|
||||
import Map from '@/common/js/map/openMap.js';
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-store',
|
||||
props: {
|
||||
@@ -77,15 +83,16 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
methods: {
|
||||
//跳转至门店列表
|
||||
toStoreList() {
|
||||
@@ -117,6 +124,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.store-info {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
@@ -151,6 +159,7 @@ export default {
|
||||
font-size: $font-size-goods-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.address-wrap {
|
||||
line-height: 1.2;
|
||||
font-size: $font-size-goods-tag;
|
||||
@@ -193,17 +202,21 @@ export default {
|
||||
align-self: flex-start;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.store-info {
|
||||
height: 106rpx;
|
||||
}
|
||||
|
||||
.switchover {
|
||||
display: flex;
|
||||
width: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.store-three {
|
||||
.store-info {
|
||||
height: auto;
|
||||
@@ -211,10 +224,12 @@ export default {
|
||||
flex-direction: inherit;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-left: 18rpx;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.store-icon text {
|
||||
font-size: 36rpx;
|
||||
color: #fff;
|
||||
@@ -228,6 +243,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
.icon-weizhi {
|
||||
margin-right: 6rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
<template>
|
||||
<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 }">
|
||||
<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;">
|
||||
<text :style="{ fontWeight: value.fontWeight}">{{ value.text }}</text>
|
||||
<text :style="{ fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
</block>
|
||||
<block v-if="value.style == 'style-1'" style="height: 40rpx; line-height: 40rpx;">
|
||||
<view class="text-left" :style="{ color: value.textColor}"><text>───</text></view>
|
||||
<text :style="{ fontWeight: value.fontWeight}">{{ value.text }}</text>
|
||||
<view class="text-right" :style="{ color: value.textColor}"><text>───</text></view>
|
||||
<view class="text-left" :style="{ color: value.textColor }"><text>───</text></view>
|
||||
<text :style="{ fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<view class="text-right" :style="{ color: value.textColor }"><text>───</text></view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-2'">
|
||||
<view class="style2">
|
||||
<text :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<text
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
value.text }}</text>
|
||||
<view class="xian" :style="{ background: value.textColor }">
|
||||
<view class="line-triangle" :style="{ borderColor: value.textColor }"></view>
|
||||
</view>
|
||||
@@ -19,13 +23,19 @@
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-3'">
|
||||
<view class="style3">
|
||||
<text :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx' ,fontWeight: value.fontWeight}">{{ value.text }}</text>
|
||||
<view class="inner-line" :style="{ background: value.textColor }"><view class="line-short" :style="{ background: value.textColor }"></view></view>
|
||||
<text
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
value.text }}</text>
|
||||
<view class="inner-line" :style="{ background: value.textColor }">
|
||||
<view class="line-short" :style="{ background: value.textColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="value.style == 'style-4'">
|
||||
<view class="style4">
|
||||
<text :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx',fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<text
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
value.text }}</text>
|
||||
<view class="line-box">
|
||||
<view class="line-left" :style="{ background: value.textColor }"></view>
|
||||
<view class="line-center" :style="{ borderColor: value.textColor }"></view>
|
||||
@@ -36,7 +46,9 @@
|
||||
<block v-else-if="value.style == 'style-5'">
|
||||
<view class="style5">
|
||||
<view class="style5-box" :style="{ color: value.textColor }">
|
||||
<text class="style5-title" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx' ,fontWeight: value.fontWeight}">{{ value.text }}</text>
|
||||
<text class="style5-title"
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
value.text }}</text>
|
||||
<view class="line-left" :style="{ background: value.textColor }"></view>
|
||||
<view class="line-right" :style="{ background: value.textColor }"></view>
|
||||
</view>
|
||||
@@ -45,7 +57,9 @@
|
||||
<block v-else-if="value.style == 'style-6'">
|
||||
<view class="style6">
|
||||
<view class="style6-box" :style="{ color: value.textColor }">
|
||||
<text class="style6-title" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx',fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<text class="style6-title"
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
value.text }}</text>
|
||||
<view class="style6-wrap" :style="{ color: value.textColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -53,7 +67,9 @@
|
||||
<block v-else-if="value.style == 'style-7'">
|
||||
<view class="style7">
|
||||
<view class="style7-box" :style="{ color: value.textColor }">
|
||||
<text class="style7-title" :style="{ background: value.textColor, fontSize: value.fontSize * 2 + 'rpx',fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<text class="style7-title"
|
||||
:style="{ background: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
value.text }}</text>
|
||||
<view class="style7-wrap" :style="{ color: value.textColor }"></view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -61,8 +77,11 @@
|
||||
<block v-else-if="value.style == 'style-8'">
|
||||
<view class="style8">
|
||||
<view class="style8-box" :style="{ color: value.textColor }">
|
||||
<text class="style8-title" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx',fontWeight: value.fontWeight }">{{ value.text }}</text>
|
||||
<view class="style8-wrap" :style="{ background: value.textColor, height: value.fontSize * 2 + 'rpx' }"></view>
|
||||
<text class="style8-title"
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
value.text }}</text>
|
||||
<view class="style8-wrap"
|
||||
:style="{ background: value.textColor, height: value.fontSize * 2 + 'rpx' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
@@ -70,17 +89,24 @@
|
||||
<view class="style9">
|
||||
<view class="style9-box">
|
||||
<view class="style9-center">
|
||||
<view class="left-img"><image :src="$util.img('public/uniapp/diy/style9-1.png')"/></view>
|
||||
<text class="style9-title" :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
<view class="left-img">
|
||||
<image :src="$util.img('public/uniapp/diy/style9-1.png')" />
|
||||
</view>
|
||||
<text class="style9-title"
|
||||
:style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
{{ value.text }}
|
||||
</text>
|
||||
<view class="right-img"><image :src="$util.img('public/uniapp/diy/style9-2.png')"/></view>
|
||||
<view class="style9-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="handlerClick(value.more.link)" @tap="handlerClick(value.more.link)">
|
||||
<view class="right-img">
|
||||
<image :src="$util.img('public/uniapp/diy/style9-2.png')" />
|
||||
</view>
|
||||
<view class="style9-more" v-if="value.more.isShow" :style="{ color: value.more.color }"
|
||||
@click.stop="handlerClick(value.more.link)" @tap="handlerClick(value.more.link)">
|
||||
{{ value.more.text }}
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text }}</text>
|
||||
<text class="sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
@@ -88,11 +114,10 @@
|
||||
<view class="style10">
|
||||
<view class="style10-box">
|
||||
<view class="style10-center">
|
||||
<view class="left-img"><image :src="$util.img('public/uniapp/diy/style10-1.png')"></image></view>
|
||||
<text
|
||||
class="style10-title"
|
||||
v-if="$util.img('public/uniapp/diy/style10-3.png')"
|
||||
:style="{
|
||||
<view class="left-img">
|
||||
<image :src="$util.img('public/uniapp/diy/style10-1.png')"></image>
|
||||
</view>
|
||||
<text class="style10-title" v-if="$util.img('public/uniapp/diy/style10-3.png')" :style="{
|
||||
backgroundImage: 'url(' + $util.img('public/uniapp/diy/style10-3.png') + ')',
|
||||
backgroundSize: 100 + '%',
|
||||
backgroundPositionY: 93 + '%',
|
||||
@@ -100,17 +125,20 @@
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
}">
|
||||
{{ value.text }}
|
||||
</text>
|
||||
<view class="right-img"><image :src="$util.img('public/uniapp/diy/style10-2.png')"></image></view>
|
||||
<view class="style10-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="handlerClick(value.more.link)" @tap="handlerClick(value.more.link)">
|
||||
<view class="right-img">
|
||||
<image :src="$util.img('public/uniapp/diy/style10-2.png')"></image>
|
||||
</view>
|
||||
<view class="style10-more" v-if="value.more.isShow" :style="{ color: value.more.color }"
|
||||
@click.stop="handlerClick(value.more.link)" @tap="handlerClick(value.more.link)">
|
||||
{{ value.more.text }}
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text }}</text>
|
||||
<text class="sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
@@ -120,56 +148,55 @@
|
||||
<view class="style11-conter">
|
||||
<view class="style11-conter-box">
|
||||
<view class="left">
|
||||
<view class="style11-title"
|
||||
:style="{
|
||||
<view class="style11-title" :style="{
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
}">
|
||||
{{ value.text }}
|
||||
</view>
|
||||
<view class="style11-sub" :style="{ color: value.subTitle.color }">{{ value.subTitle.text }}</view>
|
||||
<view class="style11-sub" :style="{ color: value.subTitle.color }">{{
|
||||
value.subTitle.text }}</view>
|
||||
</view>
|
||||
<view class="style11-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
<view class="style11-more" v-if="value.more.isShow" :style="{ color: value.more.color }"
|
||||
@click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
{{ value.more.text }}
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
|
||||
<image class="center-img" :src="$util.img('public/uniapp/diy/style11-1.png')" mode="widthFix"></image>
|
||||
<image class="center-img" :src="$util.img('public/uniapp/diy/style11-1.png')"
|
||||
mode="widthFix"></image>
|
||||
|
||||
<image class="right-img" :src="$util.img('public/uniapp/diy/style11-2.png')" mode="widthFix"></image>
|
||||
<image class="right-img" :src="$util.img('public/uniapp/diy/style11-2.png')"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="style12" v-if="value.style == 'style-12'">
|
||||
<view class="style12-title"
|
||||
:style="{
|
||||
<view class="style12-title" :style="{
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
}">
|
||||
{{ value.text }}
|
||||
</view>
|
||||
<text class="style12-sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text }}</text>
|
||||
<view class="style12-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
<text class="style12-sub-title" :style="{ color: value.subTitle.color }">{{ value.subTitle.text
|
||||
}}</text>
|
||||
<view class="style12-more" v-if="value.more.isShow" :style="{ color: value.more.color }"
|
||||
@click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
<text>{{ value.more.text }}</text>
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="style13" v-else-if="value.style == 'style-13'">
|
||||
<image class="left-img" :src="$util.img('public/uniapp/diy/style13-1.png')" mode="widthFix"></image>
|
||||
<view
|
||||
class="style13-title"
|
||||
:style="{
|
||||
<view class="style13-title" :style="{
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
}">
|
||||
{{ value.text }}
|
||||
</view>
|
||||
<image class="right-img" :src="$util.img('public/uniapp/diy/style13-1.png')" mode="widthFix"></image>
|
||||
@@ -177,19 +204,21 @@
|
||||
<view class="style14" v-else-if="value.style == 'style-14'">
|
||||
<view class="title-wrap">
|
||||
<view class="text">
|
||||
<text :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
<text
|
||||
:style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
{{ value.text }}
|
||||
</text>
|
||||
<text class="zone" :style="{ fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">专区</text>
|
||||
<text class="zone"
|
||||
:style="{ fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">专区</text>
|
||||
</view>
|
||||
<text class="iconfont icon-danxuan-xuanzhong" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="iconfont icon-danxuan-xuanzhong" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="iconfont icon-danxuan-xuanzhong" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<view
|
||||
class="sub-title"
|
||||
v-show="value.subTitle.text"
|
||||
:style="{ fontSize: value.subTitle.fontSize * 2 + 'rpx', color: value.subTitle.color }"
|
||||
>
|
||||
<text class="iconfont icon-danxuan-xuanzhong"
|
||||
:style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="iconfont icon-danxuan-xuanzhong"
|
||||
:style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="iconfont icon-danxuan-xuanzhong"
|
||||
:style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<view class="sub-title" v-show="value.subTitle.text"
|
||||
:style="{ fontSize: value.subTitle.fontSize * 2 + 'rpx', color: value.subTitle.color }">
|
||||
{{ value.subTitle.text }}
|
||||
</view>
|
||||
</view>
|
||||
@@ -206,48 +235,50 @@
|
||||
<text class="line" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="line" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="my">
|
||||
<text class="yuan" :style="{ backgroundColor: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="vertical" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="yuan"
|
||||
:style="{ backgroundColor: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="vertical"
|
||||
:style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
</text>
|
||||
</view>
|
||||
<text :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
<text
|
||||
:style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor, fontWeight: value.fontWeight }">
|
||||
{{ value.text }}
|
||||
</text>
|
||||
<view class="ornament" style="margin-left: 40rpx;">
|
||||
<text class="line" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="line" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="my">
|
||||
<text class="yuan" :style="{ backgroundColor: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="vertical" :style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="yuan"
|
||||
:style="{ backgroundColor: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
<text class="vertical"
|
||||
:style="{ color: value.textColor, fontWeight: value.fontWeight }"></text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="sub-title"
|
||||
v-show="value.subTitle.text"
|
||||
:style="{ fontSize: value.subTitle.fontSize * 2 + 'rpx', color: value.subTitle.color }"
|
||||
>
|
||||
<view class="sub-title" v-show="value.subTitle.text"
|
||||
:style="{ fontSize: value.subTitle.fontSize * 2 + 'rpx', color: value.subTitle.color }">
|
||||
{{ value.subTitle.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图十六 -->
|
||||
<view class="style16" v-if="value.style == 'style-16'">
|
||||
<view
|
||||
class="style16-title"
|
||||
:style="{
|
||||
<view class="style16-title" :style="{
|
||||
fontSize: value.fontSize * 2 + 'rpx',
|
||||
color: value.textColor,
|
||||
fontWeight: value.fontWeight
|
||||
}"
|
||||
>
|
||||
}">
|
||||
{{ value.text }}
|
||||
</view>
|
||||
<view class="style16-sub-title" v-show="value.subTitle.text" :style="{ color: value.subTitle.color, backgroundColor: value.subTitle.bgColor }">
|
||||
<text :class="['js-icon', value.subTitle.icon]" :style="{ backgroundColor: value.subTitle.bgColor }"></text>
|
||||
<view class="style16-sub-title" v-show="value.subTitle.text"
|
||||
:style="{ color: value.subTitle.color, backgroundColor: value.subTitle.bgColor }">
|
||||
<text :class="['js-icon', value.subTitle.icon]"
|
||||
:style="{ backgroundColor: value.subTitle.bgColor }"></text>
|
||||
<text :style="{ fontWeight: value.subTitle.fontWeight }">{{ value.subTitle.text }}</text>
|
||||
</view>
|
||||
<view class="style16-more" v-if="value.more.isShow" :style="{ color: value.more.color }" @click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
<view class="style16-more" v-if="value.more.isShow" :style="{ color: value.more.color }"
|
||||
@click.stop="$util.diyRedirectTo(value.more.link)">
|
||||
<text>{{ value.more.text }}</text>
|
||||
<view class="iconfont icon-right" :style="{ color: value.more.color }"></view>
|
||||
</view>
|
||||
@@ -269,11 +300,11 @@ export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
warpCss() {
|
||||
@@ -290,10 +321,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async handlerClick(link) {
|
||||
await this.__$emitEvent({eventName: 'text-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'text-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
$util.diyRedirectTo(link);
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -323,7 +356,7 @@ export default {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.diy-text .title > text {
|
||||
.diy-text .title>text {
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
@@ -541,9 +574,11 @@ export default {
|
||||
|
||||
.style8-box {
|
||||
text-align: left !important;
|
||||
.style8-title{
|
||||
|
||||
.style8-title {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.style8-wrap {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@@ -821,7 +856,8 @@ export default {
|
||||
font-size: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.iconfont{
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
@@ -849,6 +885,7 @@ export default {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.style14 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -856,28 +893,36 @@ export default {
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 0 20rpx;
|
||||
|
||||
text {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
.text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 24rpx;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.more {
|
||||
text:first-child {
|
||||
font-size: 28rpx;
|
||||
@@ -885,20 +930,25 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style15 {
|
||||
flex: 1;
|
||||
|
||||
text {
|
||||
padding: 0 !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ornament {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.line {
|
||||
border-left: 8rpx solid;
|
||||
transform: rotate(40deg);
|
||||
@@ -906,6 +956,7 @@ export default {
|
||||
height: 28rpx;
|
||||
display: block;
|
||||
margin-right: 12rpx;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
@@ -913,11 +964,13 @@ export default {
|
||||
top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.my {
|
||||
transform: rotate(40deg);
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
top: 4rpx;
|
||||
|
||||
.yuan {
|
||||
font-size: 100rpx;
|
||||
border-radius: 50%;
|
||||
@@ -925,6 +978,7 @@ export default {
|
||||
height: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
border-left: 8rpx solid;
|
||||
height: 20rpx;
|
||||
@@ -934,27 +988,32 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
opacity: 0.6;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.style16 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
|
||||
.style16-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
& > text {
|
||||
|
||||
&>text {
|
||||
max-width: 200rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.style16-title {
|
||||
text-align: left;
|
||||
max-width: 200rpx;
|
||||
@@ -962,6 +1021,7 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.style16-sub-title {
|
||||
margin-left: 20rpx;
|
||||
text-align: left;
|
||||
@@ -976,7 +1036,8 @@ export default {
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
position: relative;
|
||||
&> .js-icon {
|
||||
|
||||
&>.js-icon {
|
||||
padding: 8rpx;
|
||||
background-image: radial-gradient(transparent 30%, #fff);
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -1,98 +1,61 @@
|
||||
<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 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>
|
||||
<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>
|
||||
<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="{
|
||||
<view class="goods-name" :style="{
|
||||
'font-size': (value.font.size * 2 + 'rpx') + ';',
|
||||
'font-weight': value.font.weight + ';',
|
||||
'color': value.font.color + ';'
|
||||
}"
|
||||
>{{ item.title }}</view>
|
||||
}">{{ 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'"
|
||||
>
|
||||
<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 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="{
|
||||
<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>
|
||||
}" :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>
|
||||
<image style="width:30rpx;"
|
||||
:src="$util.img('addon/personnel/shop/view/enterprise/play.png')" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="video-text"
|
||||
:style="{
|
||||
<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>
|
||||
}">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 视频播放弹窗 -->
|
||||
<uni-popup
|
||||
ref="videoPopup"
|
||||
type="center"
|
||||
style="background:transparent;width:100%;height:100%;"
|
||||
>
|
||||
<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>
|
||||
<video class="adaptive-video" :autoPauseIfNavigate="true" :autoPauseIfOpenNative="true"
|
||||
:autoplay="false" :enableAutoRotation="true" id="myVideo" :src="video_url" :controls="true"></video>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
@@ -100,7 +63,7 @@
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
||||
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-video-list',
|
||||
components: {
|
||||
@@ -112,6 +75,7 @@ export default {
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
pageWidth: '',
|
||||
@@ -207,7 +171,9 @@ export default {
|
||||
width: calc(33.33% - 15rpx);
|
||||
}
|
||||
|
||||
&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -223,7 +189,9 @@ export default {
|
||||
&.shadow {
|
||||
width: calc(33.3333333% - 18rpx);
|
||||
|
||||
&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3) {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
@@ -370,7 +338,8 @@ export default {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:nth-of-type(1), &:nth-of-type(2) {
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -385,7 +354,8 @@ export default {
|
||||
margin-right: 8rpx !important;
|
||||
}
|
||||
|
||||
&:nth-of-type(1), &:nth-of-type(2) {
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 视频
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
// 视频
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-video',
|
||||
props: {
|
||||
value: {
|
||||
@@ -15,14 +17,14 @@
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
created() { },
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function(nval) {}
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
videoWarpCss: function() {
|
||||
videoWarpCss: function () {
|
||||
var obj = '';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
@@ -35,20 +37,22 @@
|
||||
},
|
||||
methods: {
|
||||
async handlerClick(videoUrl) {
|
||||
await this.__$emitEvent({eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
}})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
video {
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-video>>>.uni-video-container {
|
||||
.diy-video>>>.uni-video-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user