Browse Source
Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/ec.uniapp-master
Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/ec.uniapp-master
# Conflicts: # pages.json # pages/store/cart/cart.vuemaster
29 changed files with 1133 additions and 851 deletions
-
8common/styles/iconfont.css
-
1components/index-banner/index-banner.vue
-
54components/lf-code/helper.js
-
2components/lf-code/index.js
-
88components/lf-code/lf-barcode.vue
-
85components/lf-code/lf-qrcode.vue
-
15components/lf-indexFind/lf-indexFind.vue
-
14components/lf-indexShopMatrix/lf-indexShopMatrix.vue
-
11components/lf-multiColumnAd/lf-multiColumnAd.vue
-
8components/lf-nav/lf-nav.vue
-
8components/lf-seckill/lf-seckill.vue
-
149components/lf-tabbar/animate.scss
-
182components/lf-tabbar/lf-tabbar-box.vue
-
259components/lf-tabbar/lf-tabbar-item.vue
-
126components/lf-tabbar/lf-tabbar.vue
-
121components/lf-tabbar/style.scss
-
10components/lf-tabbar/utils.js
-
38pages.json
-
5pages/discover/discover.vue
-
5pages/index/category/category.vue
-
142pages/index/eventRegistration/eventRegistration.vue
-
34pages/index/index/index.vue
-
279pages/point/shoppingMall/shoppingMall.vue
-
199pages/user/member/code.vue
-
9pages/user/my/center.vue
-
1pages/user/my/my.vue
-
2pages/user/my/myEventRegistrationList.vue
-
5pages/user/personal/personal.vue
-
16store/index.js
@ -0,0 +1,54 @@ |
|||||
|
// 判断arr是否为一个数组，返回一个bool值
|
||||
|
function isArray(arr) { |
||||
|
return Object.prototype.toString.call(arr) === '[object Array]'; |
||||
|
} |
||||
|
// 深度克隆
|
||||
|
function deepClone(obj) { |
||||
|
// 对常见的“非”值，直接返回原来值
|
||||
|
if ([null, undefined, NaN, false].includes(obj)) return obj; |
||||
|
if (typeof obj !== "object" && typeof obj !== 'function') { |
||||
|
//原始类型直接返回
|
||||
|
return obj; |
||||
|
} |
||||
|
var o = isArray(obj) ? [] : {}; |
||||
|
for (let i in obj) { |
||||
|
if (obj.hasOwnProperty(i)) { |
||||
|
o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i]; |
||||
|
} |
||||
|
} |
||||
|
return o; |
||||
|
} |
||||
|
|
||||
|
function getUUid(len = 32, firstU = true, radix = null) { |
||||
|
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); |
||||
|
let uuid = []; |
||||
|
radix = radix || chars.length; |
||||
|
|
||||
|
if (len) { |
||||
|
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
|
||||
|
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]; |
||||
|
} else { |
||||
|
let r; |
||||
|
// rfc4122标准要求返回的uuid中,某些位为固定的字符
|
||||
|
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'; |
||||
|
uuid[14] = '4'; |
||||
|
|
||||
|
for (let i = 0; i < 36; i++) { |
||||
|
if (!uuid[i]) { |
||||
|
r = 0 | Math.random() * 16; |
||||
|
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
|
||||
|
if (firstU) { |
||||
|
uuid.shift(); |
||||
|
return 'u' + uuid.join(''); |
||||
|
} else { |
||||
|
return uuid.join(''); |
||||
|
} |
||||
|
} |
||||
|
export { |
||||
|
deepClone, |
||||
|
getUUid |
||||
|
}; |
||||
2
components/lf-code/index.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,88 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<!-- #ifdef MP-WEIXIN --> |
||||
|
<canvas :canvas-id="item.id" :id="item.id" :style="{width:width,height: height}" v-for="(item,index) in listCode" :key="item.id" /> |
||||
|
<!-- #endif --> |
||||
|
|
||||
|
<!-- #ifndef MP-WEIXIN --> |
||||
|
<canvas :canvas-id="id" :id="id" :style="{width:width,height: height}" /> |
||||
|
<!-- #endif --> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
import QRCODE from './index.js'; |
||||
|
import { getUUid, deepClone } from './helper.js' |
||||
|
export default { |
||||
|
name: 'WBarcode', |
||||
|
props:{ |
||||
|
options:{ |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: () =>{ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
listCode: [], |
||||
|
id: getUUid(), |
||||
|
height: null, |
||||
|
width: null, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// https://ext.dcloud.net.cn/plugin?id=4662 |
||||
|
this.height = this.options.height + 'rpx'; |
||||
|
this.width = this.options.width + 'rpx'; |
||||
|
this.SpecialTreatment(this.options) |
||||
|
this.$nextTick(()=>{ |
||||
|
this.generateCode(); |
||||
|
}) |
||||
|
}, |
||||
|
watch: { |
||||
|
options:{ |
||||
|
deep: true, |
||||
|
handler (val) { |
||||
|
this.height = val.height + 'rpx'; |
||||
|
this.width = val.width + 'rpx'; |
||||
|
this.SpecialTreatment(val) |
||||
|
// #ifdef H5 |
||||
|
setTimeout(()=>{// h5平台动态改变canvas大小 |
||||
|
this.generateCode(); |
||||
|
},50) |
||||
|
// #endif |
||||
|
|
||||
|
// #ifdef APP-NVUE || APP-PLUS || MP || QUICKAPP-WEBVIEW || QUICKAPP-WEBVIEW-HUAWEI || QUICKAPP-WEBVIEW-UNION |
||||
|
this.generateCode(); |
||||
|
// #endif |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
SpecialTreatment (val) {//微信小程序渲染多个canvas特殊处理 |
||||
|
// #ifdef MP-WEIXIN |
||||
|
let obj = deepClone(val); |
||||
|
this.id = obj.id = getUUid(); |
||||
|
this.listCode = [obj] |
||||
|
// #endif |
||||
|
}, |
||||
|
generateCode () { |
||||
|
try{ |
||||
|
const parameter = {...this.options,id: this.id,ctx: this}; |
||||
|
QRCODE.BarCode(parameter,(res)=>{ |
||||
|
this.$emit('generate',res) |
||||
|
}) |
||||
|
}catch(err){} |
||||
|
}, |
||||
|
async saveImg (){ |
||||
|
try{ |
||||
|
const res = await QRCODE.SaveImg({id: this.id,width: this.width,height: this.width,ctx: this}); |
||||
|
return res |
||||
|
}catch(e){} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,85 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<!-- #ifdef MP-WEIXIN --> |
||||
|
<canvas :canvas-id="item.id" :id="item.id" :style="{width:size,height: size}" v-for="(item,index) in listCode" :key="item.id" /> |
||||
|
<!-- #endif --> |
||||
|
|
||||
|
<!-- #ifndef MP-WEIXIN --> |
||||
|
<canvas :canvas-id="id" :id="id" :style="{width:size,height: size}" /> |
||||
|
<!-- #endif --> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
import QRCODE from './index.js'; |
||||
|
import { getUUid, deepClone } from './helper.js' |
||||
|
export default { |
||||
|
name: 'WQrcode', |
||||
|
props:{ |
||||
|
options:{ |
||||
|
type: Object, |
||||
|
required: true, |
||||
|
default: () =>{ |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
listCode:[], |
||||
|
id: getUUid(), |
||||
|
size: null, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// https://ext.dcloud.net.cn/plugin?id=4662 |
||||
|
this.size = this.options.size + 'rpx'; |
||||
|
this.SpecialTreatment(this.options) |
||||
|
this.$nextTick(()=>{ |
||||
|
this.generateCode(); |
||||
|
}) |
||||
|
}, |
||||
|
watch: { |
||||
|
options:{ |
||||
|
deep: true, |
||||
|
handler (val) { |
||||
|
this.size = val.size +'rpx'; |
||||
|
this.SpecialTreatment(val) |
||||
|
// #ifdef H5 |
||||
|
setTimeout(()=>{// h5平台动态改变canvas大小 |
||||
|
this.generateCode(); |
||||
|
},50) |
||||
|
// #endif |
||||
|
|
||||
|
// #ifdef APP-NVUE || APP-PLUS || MP || QUICKAPP-WEBVIEW || QUICKAPP-WEBVIEW-HUAWEI || QUICKAPP-WEBVIEW-UNION |
||||
|
this.generateCode(); |
||||
|
// #endif |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
SpecialTreatment (val) {//微信小程序渲染多个canvas特殊处理 |
||||
|
// #ifdef MP-WEIXIN |
||||
|
let obj = deepClone(val); |
||||
|
this.id = obj.id = getUUid(); |
||||
|
this.listCode = [obj] |
||||
|
// #endif |
||||
|
}, |
||||
|
generateCode () { |
||||
|
try{ |
||||
|
const parameter = {...this.options,id: this.id,ctx: this}; |
||||
|
QRCODE.QRCode(parameter,(res)=>{ |
||||
|
this.$emit('generate',res) |
||||
|
}) |
||||
|
}catch(err){} |
||||
|
}, |
||||
|
async saveImg (){ |
||||
|
try{ |
||||
|
const res = await QRCODE.SaveImg({id: this.id,width: this.size,height: this.size,ctx: this}); |
||||
|
return res |
||||
|
}catch(e){} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -1,149 +0,0 @@ |
|||||
.animate__animated { |
|
||||
animation-duration: 0.5s; |
|
||||
animation-fill-mode: both; |
|
||||
} |
|
||||
|
|
||||
@keyframes zoomIn { |
|
||||
from { |
|
||||
opacity: 0; |
|
||||
-webkit-transform: scale3d(0.3, 0.3, 0.3); |
|
||||
transform: scale3d(0.3, 0.3, 0.3); |
|
||||
} |
|
||||
|
|
||||
50% { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.animate__zoomIn { |
|
||||
animation-name: zoomIn; |
|
||||
} |
|
||||
|
|
||||
@keyframes bounce { |
|
||||
|
|
||||
from, |
|
||||
20%, |
|
||||
53%, |
|
||||
to { |
|
||||
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|
||||
-webkit-transform: translate3d(0, 0, 0); |
|
||||
transform: translate3d(0, 0, 0); |
|
||||
} |
|
||||
|
|
||||
40%, |
|
||||
43% { |
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); |
|
||||
transform: translate3d(0, -30px, 0) scaleY(1.1); |
|
||||
} |
|
||||
|
|
||||
70% { |
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); |
|
||||
transform: translate3d(0, -15px, 0) scaleY(1.05); |
|
||||
} |
|
||||
|
|
||||
80% { |
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|
||||
transform: translate3d(0, 0, 0) scaleY(0.95); |
|
||||
} |
|
||||
|
|
||||
90% { |
|
||||
transform: translate3d(0, -4px, 0) scaleY(1.02); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.animate__bounce { |
|
||||
animation-name: bounce; |
|
||||
transform-origin: center bottom; |
|
||||
} |
|
||||
|
|
||||
@keyframes rubberBand { |
|
||||
from { |
|
||||
transform: scale3d(1, 1, 1); |
|
||||
} |
|
||||
|
|
||||
30% { |
|
||||
transform: scale3d(1.25, 0.75, 1); |
|
||||
} |
|
||||
|
|
||||
40% { |
|
||||
transform: scale3d(0.75, 1.25, 1); |
|
||||
} |
|
||||
|
|
||||
50% { |
|
||||
transform: scale3d(1.15, 0.85, 1); |
|
||||
} |
|
||||
|
|
||||
65% { |
|
||||
transform: scale3d(0.95, 1.05, 1); |
|
||||
} |
|
||||
|
|
||||
75% { |
|
||||
transform: scale3d(1.05, 0.95, 1); |
|
||||
} |
|
||||
|
|
||||
to { |
|
||||
transform: scale3d(1, 1, 1); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.animate__rubberBand { |
|
||||
animation-name: rubberBand; |
|
||||
} |
|
||||
|
|
||||
@keyframes bounceIn { |
|
||||
|
|
||||
from, |
|
||||
20%, |
|
||||
40%, |
|
||||
60%, |
|
||||
80%, |
|
||||
to { |
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); |
|
||||
} |
|
||||
|
|
||||
0% { |
|
||||
opacity: 0; |
|
||||
transform: scale3d(0.3, 0.3, 0.3); |
|
||||
} |
|
||||
|
|
||||
20% { |
|
||||
transform: scale3d(1.1, 1.1, 1.1); |
|
||||
} |
|
||||
|
|
||||
40% { |
|
||||
transform: scale3d(0.9, 0.9, 0.9); |
|
||||
} |
|
||||
|
|
||||
60% { |
|
||||
opacity: 1; |
|
||||
transform: scale3d(1.03, 1.03, 1.03); |
|
||||
} |
|
||||
|
|
||||
80% { |
|
||||
transform: scale3d(0.97, 0.97, 0.97); |
|
||||
} |
|
||||
|
|
||||
to { |
|
||||
opacity: 1; |
|
||||
transform: scale3d(1, 1, 1); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.animate__bounceIn { |
|
||||
animation-name: bounceIn; |
|
||||
} |
|
||||
|
|
||||
@keyframes fadeIn { |
|
||||
from { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
to { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.animate__fadeIn { |
|
||||
animation-name: fadeIn; |
|
||||
} |
|
||||
@ -1,182 +0,0 @@ |
|||||
<template> |
|
||||
<view class="lb-tabbar"> |
|
||||
<view :class="[ |
|
||||
'lb-tabbar-content', |
|
||||
fixed ? 'lb-tabbar--fixed' : '' |
|
||||
]" |
|
||||
:style="{ |
|
||||
backgroundColor: bgColor, |
|
||||
paddingBottom: `${safeAreaHeight}px` |
|
||||
}"> |
|
||||
<view v-if="border" |
|
||||
class="lb-tabbar-border" |
|
||||
:style="{ |
|
||||
backgroundColor: borderColor, |
|
||||
top: raisedeHeight + 'px' |
|
||||
}"> |
|
||||
</view> |
|
||||
<slot></slot> |
|
||||
</view> |
|
||||
<view v-if="placeholder" |
|
||||
class="lb-tabbar-placeholder" |
|
||||
:style="{ |
|
||||
height: `${tabbarHeight}px` |
|
||||
}"> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// git https://github.com/liub1934/uni-lb-tabbar/tree/master/pages/demos |
|
||||
// demo https://github.liubing.me/uni-lb-tabbar/#/ |
|
||||
// fileDes https://ext.dcloud.net.cn/plugin?id=4124 |
|
||||
|
|
||||
const SAFE_AREA_INSET_BOTTOM = 34 |
|
||||
import { getPx } from './utils' |
|
||||
export default { |
|
||||
props: { |
|
||||
value: [String, Number], |
|
||||
height: { |
|
||||
type: String, |
|
||||
default: '50px' |
|
||||
}, |
|
||||
iconSize: { |
|
||||
type: String, |
|
||||
default: '22px' |
|
||||
}, |
|
||||
textSize: { |
|
||||
type: String, |
|
||||
default: '12px' |
|
||||
}, |
|
||||
textTop: { |
|
||||
type: String, |
|
||||
default: '5px' |
|
||||
}, |
|
||||
dotColor: { |
|
||||
type: String, |
|
||||
default: '#F56C6C' |
|
||||
}, |
|
||||
fixed: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
placeholder: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
animate: { |
|
||||
type: String, |
|
||||
default: 'rubberBand' |
|
||||
}, |
|
||||
closeAnimateOnRaisede: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
border: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
borderColor: { |
|
||||
type: String, |
|
||||
default: '#DCDFE6' |
|
||||
}, |
|
||||
bgColor: { |
|
||||
type: String, |
|
||||
default: '#FFF' |
|
||||
}, |
|
||||
inactiveColor: { |
|
||||
type: String, |
|
||||
default: '#909399' |
|
||||
}, |
|
||||
activeColor: { |
|
||||
type: String, |
|
||||
default: '#186c6b' |
|
||||
}, |
|
||||
inactiveTextColor: String, |
|
||||
activeTextColor: String, |
|
||||
safeAreaInsetBottom: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
hideTabbar: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
}, |
|
||||
raisedeScale: { |
|
||||
type: Number, |
|
||||
default: 2 |
|
||||
} |
|
||||
}, |
|
||||
data () { |
|
||||
return { |
|
||||
active: this.value, |
|
||||
activeItem: {}, |
|
||||
tabbarItems: [], |
|
||||
hasRaisede: false, |
|
||||
isIphoneX: false |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
tabbarItemsLength () { |
|
||||
return this.tabbarItems.length |
|
||||
}, |
|
||||
safeAreaHeight () { |
|
||||
return this.isIphoneX && this.safeAreaInsetBottom ? SAFE_AREA_INSET_BOTTOM : 0 // 苹果X等机型安全区高度 |
|
||||
}, |
|
||||
iconHeight () { |
|
||||
return getPx(this.iconSize) |
|
||||
}, |
|
||||
raisedeHeight () { |
|
||||
return this.hasRaisede ? this.iconHeight * this.raisedeScale / 2 : 0 // 凸起高度 |
|
||||
}, |
|
||||
tabbarHeight () { |
|
||||
const height = getPx(this.height) // 默认高度 |
|
||||
const raisedeHeight = this.hasRaisede ? this.iconHeight * this.raisedeScale / 2 : 0 // 凸起高度 |
|
||||
const tabbarHeight = height + this.safeAreaHeight + raisedeHeight // 整体高度 |
|
||||
return tabbarHeight |
|
||||
} |
|
||||
}, |
|
||||
provide () { |
|
||||
return { |
|
||||
tabbar: this |
|
||||
} |
|
||||
}, |
|
||||
created () { |
|
||||
if (this.hideTabbar) { |
|
||||
uni.hideTabBar() |
|
||||
} |
|
||||
const res = uni.getSystemInfoSync() |
|
||||
const { model, statusBarHeight } = res |
|
||||
if ( |
|
||||
(model.indexOf('iPhone') > -1 && statusBarHeight > 20) || |
|
||||
model.indexOf('iPhone X') > -1 || |
|
||||
model.indexOf('iPhone 1') > -1 |
|
||||
) { |
|
||||
this.isIphoneX = true |
|
||||
} |
|
||||
this.getTabbarHeight() |
|
||||
}, |
|
||||
methods: { |
|
||||
getTabbarHeight () { |
|
||||
return this.tabbarHeight |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
value (newVal) { |
|
||||
this.active = newVal |
|
||||
}, |
|
||||
active (newVal) { |
|
||||
this.activeItem = this.tabbarItems.find(item => item.name === newVal) |
|
||||
this.$emit('input', newVal) |
|
||||
this.$emit('change', this.activeItem) |
|
||||
}, |
|
||||
tabbarItemsLength () { |
|
||||
this.hasRaisede = !!this.tabbarItems.find(item => item.raisede) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
@import "./style.scss"; |
|
||||
</style> |
|
||||
@ -1,259 +0,0 @@ |
|||||
<template> |
|
||||
<view ref="item" |
|
||||
:class="[ |
|
||||
'lb-tabbar-item', |
|
||||
'animate__animated', |
|
||||
isActive ? 'lb-tabbar-item--active' : '' |
|
||||
]" |
|
||||
:style="{ |
|
||||
paddingTop: paddingBT + raisedeHeight + 'px', |
|
||||
paddingBottom: paddingBT + 'px', |
|
||||
width: '100%' |
|
||||
}" |
|
||||
@tap="handleTap"> |
|
||||
<view :class="[ |
|
||||
'lb-tabbar-item__icon', |
|
||||
`lb-tabbar-item__icon--${raisede ? 'raisede' : 'default'}`, |
|
||||
isAnimate ? `animate__animated animate__${tabbarInfo.animate}` : '', |
|
||||
isActive ? 'lb-my-active' : '' |
|
||||
]" |
|
||||
:style="{ |
|
||||
height: tabbarInfo.iconSize, |
|
||||
lineHeight: tabbarInfo.iconSize, |
|
||||
transform: raisede ? `translateY(-${ty}px) scale(${tabbarInfo.raisedeScale})` : '' |
|
||||
}"> |
|
||||
<!-- 图片图标 --> |
|
||||
<image v-if="isImage" |
|
||||
class="lb-tabbar-item__image" |
|
||||
:src="icon" |
|
||||
:style="{ |
|
||||
width: tabbarInfo.iconSize, |
|
||||
height: tabbarInfo.iconSize |
|
||||
}"> |
|
||||
</image> |
|
||||
|
|
||||
<!-- icon图标 --> |
|
||||
<text v-else |
|
||||
:class="[ |
|
||||
'lf-iconfont', |
|
||||
iconPrefix, |
|
||||
`${iconPrefix}-${icon}`, |
|
||||
isActive ? 'lb-tabbar-item__icon--active' : '' |
|
||||
]" |
|
||||
:style="{ |
|
||||
width: tabbarInfo.iconSize, |
|
||||
height: tabbarInfo.iconSize, |
|
||||
lineHeight: tabbarInfo.iconSize, |
|
||||
fontSize: tabbarInfo.iconSize, |
|
||||
color: isActive ? tabbarInfo.activeColor : tabbarInfo.inactiveColor |
|
||||
}">{{ iconCode }}</text> |
|
||||
|
|
||||
<!-- 非nvue dot info显示 --> |
|
||||
<!-- #ifndef APP-NVUE --> |
|
||||
<text v-if="dot || hasInfo" |
|
||||
:class="[ |
|
||||
dot && !hasInfo ? 'lb-tabbar-item__dot' : '', |
|
||||
hasInfo ? 'lb-tabbar-item__dot--info' : '', |
|
||||
'lb-tabbar-item__dot--style' |
|
||||
]" |
|
||||
:style="{ |
|
||||
backgroundColor: tabbarInfo.dotColor |
|
||||
}">{{ hasInfo ? info : '' }}</text> |
|
||||
<!-- #endif --> |
|
||||
</view> |
|
||||
|
|
||||
<!-- nvue dot info 显示 --> |
|
||||
<!-- #ifdef APP-NVUE --> |
|
||||
<text v-if="dot || hasInfo" |
|
||||
:class="[ |
|
||||
'lb-tabbar-item__dot--nvue', |
|
||||
'lb-tabbar-item__dot--style', |
|
||||
dot && !hasInfo ? 'lb-tabbar-item__dot' : '', |
|
||||
hasInfo ? 'lb-tabbar-item__dot--info' : '', |
|
||||
hasInfo ? 'lb-tabbar-item__dot--info' : '', |
|
||||
nvueDotShow ? 'lb-tabbar-item__dot--show' : '' |
|
||||
]" |
|
||||
:style="{ |
|
||||
backgroundColor: tabbarInfo.dotColor, |
|
||||
top: paddingBT + raisedeHeight + 'px', |
|
||||
right: dotLeft + 'px' |
|
||||
}">{{ hasInfo ? info : '' }}</text> |
|
||||
<!-- #endif --> |
|
||||
|
|
||||
<!-- 非nvue图标文字 --> |
|
||||
<!-- #ifndef APP-NVUE --> |
|
||||
<view :class="[ |
|
||||
'lb-tabbar-item__text', |
|
||||
isActive ? 'lb-tabbar-item__text--active' : '' |
|
||||
]" |
|
||||
:style="{ |
|
||||
fontSize: tabbarInfo.textSize, |
|
||||
lineHeight: tabbarInfo.textSize, |
|
||||
maxHeight: tabbarInfo.textSize, |
|
||||
marginTop: tabbarInfo.textTop, |
|
||||
color: isActive |
|
||||
? tabbarInfo.activeTextColor || tabbarInfo.activeColor |
|
||||
: tabbarInfo.inactiveTextColor || tabbarInfo.inactiveColor |
|
||||
}"> |
|
||||
<slot></slot> |
|
||||
<view v-if="raisede" |
|
||||
class="lb-tabbar-item__text--block" |
|
||||
:style="{ |
|
||||
height: tabbarInfo.textSize |
|
||||
}"> |
|
||||
</view> |
|
||||
</view> |
|
||||
<!-- #endif --> |
|
||||
|
|
||||
<!-- nvue图标文字 --> |
|
||||
<!-- #ifdef APP-NVUE --> |
|
||||
<text v-if="text || raisede" |
|
||||
:class="[ |
|
||||
'lb-tabbar-item__text', |
|
||||
isActive ? 'lb-tabbar-item__text--active' : '' |
|
||||
]" |
|
||||
:style="{ |
|
||||
fontSize: tabbarInfo.textSize, |
|
||||
height: tabbarInfo.textSize, |
|
||||
lineHeight: tabbarInfo.textSize, |
|
||||
marginTop: tabbarInfo.textTop, |
|
||||
color: isActive |
|
||||
? tabbarInfo.activeTextColor || tabbarInfo.activeColor |
|
||||
: tabbarInfo.inactiveTextColor || tabbarInfo.inactiveColor |
|
||||
}">{{ text || '' }}</text> |
|
||||
<!-- #endif --> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// #ifdef APP-NVUE |
|
||||
const dom = uni.requireNativePlugin('dom') |
|
||||
// #endif |
|
||||
import { getPx } from './utils' |
|
||||
export default { |
|
||||
props: { |
|
||||
name: [String, Number], |
|
||||
text: [String, Number], |
|
||||
icon: String, |
|
||||
iconPrefix: String, |
|
||||
dot: Boolean, |
|
||||
info: [String, Number], |
|
||||
raisede: Boolean, |
|
||||
path: String |
|
||||
}, |
|
||||
inject: ['tabbar'], |
|
||||
data () { |
|
||||
return { |
|
||||
tabbarInfo: {}, |
|
||||
itemWidth: 0, |
|
||||
dotLeft: 0, |
|
||||
nvueDotShow: false |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
isImage () { |
|
||||
return this.icon && this.icon.indexOf('/') > -1 |
|
||||
}, |
|
||||
isActive () { |
|
||||
return this.tabbarInfo.value === this.name |
|
||||
}, |
|
||||
isAnimate () { |
|
||||
return ( |
|
||||
this.isActive && |
|
||||
this.tabbarInfo.animate && |
|
||||
!(this.raisede && this.tabbarInfo.closeAnimateOnRaisede) |
|
||||
) |
|
||||
}, |
|
||||
height () { |
|
||||
return getPx(this.tabbarInfo.height) |
|
||||
}, |
|
||||
iconHeight () { |
|
||||
return getPx(this.tabbarInfo.iconSize) |
|
||||
}, |
|
||||
textSize () { |
|
||||
return getPx(this.tabbarInfo.textSize) |
|
||||
}, |
|
||||
textTop () { |
|
||||
return getPx(this.tabbarInfo.textTop) |
|
||||
}, |
|
||||
ty () { |
|
||||
return this.height / 2 - (this.textSize + this.textTop) / 2 |
|
||||
}, |
|
||||
iconCode () { |
|
||||
let code = '' |
|
||||
// #ifdef APP-NVUE |
|
||||
code = this.icon |
|
||||
// #endif |
|
||||
return code |
|
||||
}, |
|
||||
hasInfo () { |
|
||||
return this.info || this.info === 0 |
|
||||
}, |
|
||||
paddingBT () { |
|
||||
return (this.height - this.iconHeight - this.textSize - this.textTop) / 2 |
|
||||
}, |
|
||||
hasRaisede () { |
|
||||
return this.tabbar.hasRaisede |
|
||||
}, |
|
||||
raisedeHeight () { |
|
||||
return this.hasRaisede ? this.iconHeight * this.tabbarInfo.raisedeScale / 2 : 0 // 凸起高度 |
|
||||
}, |
|
||||
infoLength () { |
|
||||
return this.hasInfo ? (this.info + '').length : 0 |
|
||||
} |
|
||||
}, |
|
||||
created () { |
|
||||
this.tabbarInfo = this.tabbar._props |
|
||||
this.tabbar.tabbarItems.push(this._props) |
|
||||
}, |
|
||||
mounted() { |
|
||||
// #ifdef APP-NVUE |
|
||||
this.setNvueDot() |
|
||||
// #endif |
|
||||
}, |
|
||||
methods: { |
|
||||
handleTap () { |
|
||||
this.tabbar.active = this.name |
|
||||
this.$emit('click', this._props) |
|
||||
}, |
|
||||
// #ifdef APP-NVUE |
|
||||
setNvueDot () { |
|
||||
if (this.dot || this.hasInfo) { |
|
||||
this.$nextTick(() => { |
|
||||
const $el = this.$refs.item |
|
||||
dom.getComponentRect($el, res => { |
|
||||
this.itemWidth = res.size.width |
|
||||
const halfWidth = this.itemWidth / 2 |
|
||||
if (this.dot) { |
|
||||
this.dotLeft = halfWidth - 8 |
|
||||
} |
|
||||
if (this.hasInfo) { |
|
||||
const length = this.infoLength > 1 ? this.infoLength -1 : this.infoLength |
|
||||
this.dotLeft = halfWidth - 8 * length |
|
||||
} |
|
||||
this.nvueDotShow = true |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
// #endif |
|
||||
}, |
|
||||
// #ifdef APP-NVUE |
|
||||
watch: { |
|
||||
dot () { |
|
||||
this.setNvueDot() |
|
||||
}, |
|
||||
info () { |
|
||||
this.setNvueDot() |
|
||||
} |
|
||||
} |
|
||||
// #endif |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
@import "./style.scss"; |
|
||||
/* #ifndef APP-NVUE */ |
|
||||
@import "./animate.scss"; |
|
||||
/* #endif */ |
|
||||
</style> |
|
||||
@ -1,121 +0,0 @@ |
|||||
.lb-tabbar-content { |
|
||||
/* #ifndef APP-NVUE */ |
|
||||
display: flex; |
|
||||
/* #endif */ |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar--fixed { |
|
||||
position: fixed; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-border { |
|
||||
height: 1px; |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
top: 0; |
|
||||
transform: scaleY(0.5); |
|
||||
} |
|
||||
|
|
||||
/* #ifndef APP-NVUE */ |
|
||||
lb-tabbar-item { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
/* #endif */ |
|
||||
|
|
||||
.lb-tabbar-item { |
|
||||
flex: 1; |
|
||||
/* #ifndef APP-NVUE */ |
|
||||
display: flex; |
|
||||
/* #endif */ |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
position: relative; |
|
||||
// justify-content: flex-end; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__text { |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__text--active { |
|
||||
transition-property: color; |
|
||||
transition-duration: 0.3s; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__icon { |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-icon { |
|
||||
position: relative; |
|
||||
/* #ifndef APP-NVUE */ |
|
||||
line-height: 1; |
|
||||
font-size: inherit; |
|
||||
text-rendering: auto; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
/* #endif */ |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__icon--active { |
|
||||
transition-property: color; |
|
||||
transition-duration: 0.3s; |
|
||||
} |
|
||||
|
|
||||
.lb-my-active{ |
|
||||
transform: translateY(-16.5px) scale(2) !important; |
|
||||
color: yellow; |
|
||||
} |
|
||||
.lb-tabbar-item__icon--raisede { |
|
||||
background-color: #fff; |
|
||||
border-radius: 9999px; |
|
||||
position: relative; |
|
||||
/* #ifndef APP-NVUE */ |
|
||||
z-index: 1; |
|
||||
/* #endif */ |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__dot--style { |
|
||||
border-radius: 9999px; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__dot { |
|
||||
width: 8px; |
|
||||
height: 8px; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__dot--nvue { |
|
||||
opacity: 0; |
|
||||
transition-property: opacity; |
|
||||
transition-duration: 0.1s; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__dot--show { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
.lb-tabbar-item__dot--info { |
|
||||
height: 14px; |
|
||||
line-height: 14px; |
|
||||
/* #ifdef APP-NVUE */ |
|
||||
flex: 1; |
|
||||
/* #endif */ |
|
||||
margin-top: 5px; |
|
||||
font-size: 12px; |
|
||||
padding-left: 4px; |
|
||||
padding-right: 4px; |
|
||||
text-align: center; |
|
||||
color: #fff; |
|
||||
transform: translate(50%, -50%); |
|
||||
} |
|
||||
@ -1,10 +0,0 @@ |
|||||
export function getPx (val) { |
|
||||
if (!val) return 0 |
|
||||
if (val.indexOf('rpx') > -1) { |
|
||||
val = +val.replace('rpx', '') |
|
||||
val = uni.upx2px(val) |
|
||||
} else { |
|
||||
val = +val.replace('px', '') |
|
||||
} |
|
||||
return val |
|
||||
} |
|
||||
@ -0,0 +1,142 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="热门活动" :showIcon="true" bgColor="#fff" @changeHeight="e => nav_height = e"></lf-nav> |
||||
|
<view v-if="tab_list.length"> |
||||
|
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="tab_current" @change="tabChange"></u-tabs> |
||||
|
</view> |
||||
|
<swiper :style="{height: autoHeight}" :current="tab_current" @change="swiperChange"> |
||||
|
<swiper-item v-for="(item, index) in tab_list" :key="index"> |
||||
|
<scroll-view :style="{height: autoHeight}" :scroll-y="true"> |
||||
|
<view class="scroll-content"> |
||||
|
<view class="card" v-for="(item, index) in 3" :key="index"> |
||||
|
<view class="cover"> |
||||
|
<image class="img"></image> |
||||
|
</view> |
||||
|
<view class="info"> |
||||
|
<view class="title">海蓝之谜美颜会 9月15日场10:30场</view> |
||||
|
<view class="date">2021.09.01-2021.09.15</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 30rpx;"></view> |
||||
|
</scroll-view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
let _public = { |
||||
|
page: 1, |
||||
|
isPage: true, |
||||
|
loadingClass: true, |
||||
|
loadingText: '正在加载中' |
||||
|
} |
||||
|
return { |
||||
|
tab_current: 0, |
||||
|
tab_list: [{ |
||||
|
name: '正在进行', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '往期回顾', |
||||
|
list: [], |
||||
|
..._public |
||||
|
}], |
||||
|
scrollH: 0, |
||||
|
nav_height: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
autoHeight(){ |
||||
|
return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx)`; |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
let info = uni.getSystemInfoSync(); |
||||
|
this.scrollH = info.screenHeight; |
||||
|
}, |
||||
|
methods: { |
||||
|
tabChange(event){ |
||||
|
this.tab_current = event; |
||||
|
}, |
||||
|
swiperChange(event){ |
||||
|
this.tab_current = event.detail.current; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.scroll-content{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: center; |
||||
|
.card{ |
||||
|
width: 686rpx; |
||||
|
height: max-content; |
||||
|
background-color: #FFFFFF; |
||||
|
box-shadow: 1rpx 1rpx 6rpx 3rpx #e5e5e5; |
||||
|
margin-top: 30rpx; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
.cover{ |
||||
|
width: 686rpx; |
||||
|
height: 300rpx; |
||||
|
position: relative; |
||||
|
.img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: #EEEEEE; |
||||
|
} |
||||
|
} |
||||
|
.info{ |
||||
|
width: 686rpx; |
||||
|
height: max-content; |
||||
|
padding: 20rpx 30rpx; |
||||
|
box-sizing: border-box; |
||||
|
.title{ |
||||
|
font-size: 28rpx; |
||||
|
color: #222222; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.date{ |
||||
|
margin-top: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #555555; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// tabs 样式修改 |
||||
|
/deep/.u-scroll-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
/deep/.u-scroll-box .u-tab-bar { |
||||
|
background-color: #15716E!important; |
||||
|
width: 80rpx!important; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -12rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { |
||||
|
background-color: #15716E!important; |
||||
|
width: 56rpx!important; |
||||
|
position: absolute; |
||||
|
height: 5rpx!important; |
||||
|
left: 8rpx; |
||||
|
bottom: -4rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/ .u-tab-item { |
||||
|
font-size: 28rpx!important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,279 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="积分商城" titleColor="#fff" bgColor="transparent" :showIcon="true" :spreadOut="false"></lf-nav> |
||||
|
<view class="head"> |
||||
|
<view class="bg-view"></view> |
||||
|
</view> |
||||
|
<view class="menu"> |
||||
|
<view class="left"> |
||||
|
<view> |
||||
|
<text class="lf-iconfont icon--"></text> |
||||
|
<text class="point-num">783</text> |
||||
|
<text class="lf-iconfont icon--"></text> |
||||
|
</view> |
||||
|
<view class="lf-font-24">当前积分</view> |
||||
|
</view> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="item"> |
||||
|
<text class="lf-iconfont icon-- lf-font-50"></text> |
||||
|
<text>兑换记录</text> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<text class="lf-iconfont icon-- lf-font-50"></text> |
||||
|
<text>购物车</text> |
||||
|
<view class="angle-mark">99+</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="lf-m-t-30" v-if="tab_list.length"> |
||||
|
<u-tabs :list="tab_list" |
||||
|
active-color="#15716E" |
||||
|
inactive-color='#777777' |
||||
|
:is-scroll="true" |
||||
|
:current="tab_current" |
||||
|
@change="tabChange"> |
||||
|
</u-tabs> |
||||
|
</view> |
||||
|
<view class="page-item"> |
||||
|
<view class="filter"> |
||||
|
<view :class="{'filter-item': true, 'filter-active': index == filter_current}" |
||||
|
v-for="(item, index) in filter_list" :key="index" |
||||
|
@click="filter_current = index">{{ item }} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="goods"> |
||||
|
<lf-waterfall :list="goods_list"></lf-waterfall> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
lfWaterfall |
||||
|
}, |
||||
|
data(){ |
||||
|
let _public = { |
||||
|
page: 1, |
||||
|
isPage: true, |
||||
|
loadingClass: true, |
||||
|
loadingText: '正在加载中' |
||||
|
} |
||||
|
return { |
||||
|
tab_current: 0, |
||||
|
tab_list: [{ |
||||
|
name: '全部', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '时尚尖货', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '美容美妆', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '家具用品', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '儿童玩具', |
||||
|
list: [], |
||||
|
..._public |
||||
|
}], |
||||
|
filter_list: ['1～100','100～1万','1万～2万','2万～5万','>5万'], |
||||
|
filter_current: null, |
||||
|
goods_list: [ |
||||
|
{ |
||||
|
id: 10, |
||||
|
original_price: "4111.00", |
||||
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
||||
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
||||
|
price: "2412.00", |
||||
|
product_id: 1008, |
||||
|
sale: 0, |
||||
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
original_price: "4111.00", |
||||
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
||||
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
||||
|
price: "2412.00", |
||||
|
product_id: 1008, |
||||
|
sale: 0, |
||||
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
original_price: "4111.00", |
||||
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
||||
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
||||
|
price: "2412.00", |
||||
|
product_id: 1008, |
||||
|
sale: 0, |
||||
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
original_price: "4111.00", |
||||
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
||||
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
||||
|
price: "2412.00", |
||||
|
product_id: 1008, |
||||
|
sale: 0, |
||||
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
tabChange(event){ |
||||
|
this.tab_current = event; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
page{ |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.head{ |
||||
|
width: 750rpx; |
||||
|
height: 283rpx; |
||||
|
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
.bg-view{ |
||||
|
position: absolute; |
||||
|
right: -100rpx; |
||||
|
top: -200rpx; |
||||
|
width: 400rpx; |
||||
|
height: 400rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: rgba(255,255,255,0.04); |
||||
|
} |
||||
|
} |
||||
|
.menu{ |
||||
|
width: 686rpx; |
||||
|
height: 170rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
||||
|
border-radius: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 30rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
color: #15716E; |
||||
|
margin: -80rpx auto 0; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
.left{ |
||||
|
width: 340rpx; |
||||
|
.point-num{ |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
margin: 0 10rpx; |
||||
|
} |
||||
|
} |
||||
|
.item{ |
||||
|
width: 100rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
font-size: 24rpx; |
||||
|
position: relative; |
||||
|
&:nth-child(2n){ |
||||
|
margin-left: 40rpx; |
||||
|
} |
||||
|
.angle-mark{ |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
background-color: #FF9D9D; |
||||
|
color: #FFFFFF; |
||||
|
border-radius: 50%; |
||||
|
position: absolute; |
||||
|
right: 10rpx; |
||||
|
top: 10rpx; |
||||
|
font-size: 18rpx; |
||||
|
text-align: center; |
||||
|
line-height: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.page-item{ |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
.filter{ |
||||
|
width: 100%; |
||||
|
height: 83rpx; |
||||
|
border: 1rpx solid #e5e5e5; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 32rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.filter-item{ |
||||
|
width: 123rpx; |
||||
|
height: 43rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #777777; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 26rpx; |
||||
|
&:nth-child(n+2){ |
||||
|
margin-left: 28rpx; |
||||
|
} |
||||
|
&.filter-active{ |
||||
|
background-color: #15716E; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.goods{ |
||||
|
padding: 30rpx 32rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// tabs 样式修改 |
||||
|
/deep/.u-scroll-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
||||
|
width: max-content; |
||||
|
} |
||||
|
/deep/.u-scroll-box .u-tab-bar { |
||||
|
background-color: #15716E!important; |
||||
|
width: 80rpx!important; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -12rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { |
||||
|
background-color: #15716E!important; |
||||
|
width: 56rpx!important; |
||||
|
position: absolute; |
||||
|
height: 5rpx!important; |
||||
|
left: 8rpx; |
||||
|
bottom: -4rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/ .u-tab-item { |
||||
|
font-size: 28rpx!important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,199 @@ |
|||||
|
<template> |
||||
|
<view class="page"> |
||||
|
<lf-nav title="会员码" bgColor="transparent" :spreadOut="false" titleColor="#fff" :showIcon="true"></lf-nav> |
||||
|
<view class="bg-viewleft"></view> |
||||
|
<view class="bg-viewright"></view> |
||||
|
<view class="content"> |
||||
|
<view class="top"> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="avatar"> |
||||
|
<image src="https://picsum.photos/200"></image> |
||||
|
</view> |
||||
|
<view class="phone">182****5380</view> |
||||
|
</view> |
||||
|
<view class="card"> |
||||
|
<text class="lf-iconfont icon--1"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="balance">余额 ¥1829.83</view> |
||||
|
<view class="barcode"> |
||||
|
<lf-barcode :options="config.bar"></lf-barcode> |
||||
|
</view> |
||||
|
<view class="qrcode"> |
||||
|
<lf-qrcode :options="config.qrc"></lf-qrcode> |
||||
|
</view> |
||||
|
<view class="tips">{{ num }}s后自动刷新</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import lfBarcode from '@/components/lf-code/lf-barcode.vue'; |
||||
|
import lfQrcode from '@/components/lf-code/lf-qrcode.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
lfBarcode, |
||||
|
lfQrcode |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
config: { |
||||
|
bar: { |
||||
|
code: 'E01181016286106', |
||||
|
color: '#000', // 条形码的颜色 |
||||
|
bgColor: '#FFFFFF', // 背景色 |
||||
|
width: 586, // 宽度 |
||||
|
height: 210 // 高度 |
||||
|
}, |
||||
|
qrc: { |
||||
|
code: "https://weixin.qq.com/g/AwYAAHO3aO4zlasEij6bLsk4hlZd5XNFkkBmqyS55mLPFxmn5c9PaI1omqLhd24fABCD23333", |
||||
|
size: 352, // 二维码大小 |
||||
|
level: 4, //等级 0～4 |
||||
|
bgColor: '#FFFFFF', //二维码背景色 默认白色 |
||||
|
// border: { |
||||
|
// color: ['#8A2387', '#F27121'], //边框颜色支持渐变色 |
||||
|
// lineWidth: 3, //边框宽度 |
||||
|
// }, |
||||
|
// img: '/static/logo.png', //图片 |
||||
|
// iconSize: 40, //二维码图标的大小 |
||||
|
color: '#000000', //边框颜色支持渐变色 |
||||
|
} |
||||
|
}, |
||||
|
timer: null, |
||||
|
num: 90 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
this.refreshCode(); |
||||
|
}, |
||||
|
onUnload(){ |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// rpx 转 px |
||||
|
rpxTransformPx(num){ |
||||
|
let systemInfo = uni.getSystemInfoSync(); |
||||
|
let pxWidth = num / 750 * systemInfo.windowWidth; |
||||
|
return pxWidth; |
||||
|
}, |
||||
|
// 刷新code |
||||
|
refreshCode(){ |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
this.timer = setInterval(() => { |
||||
|
this.num--; |
||||
|
if(this.num <= 0){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
this.num = 90; |
||||
|
this.refreshCode(); // 重新执行 |
||||
|
} |
||||
|
}, 1000); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
page{ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.page{ |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background: linear-gradient(270deg, #187B7A 0%, #2FAAA7 100%, #22A2A0 100%); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
.bg-viewleft{ |
||||
|
position: absolute; |
||||
|
left: -100rpx; |
||||
|
top: 59rpx; |
||||
|
width: 585rpx; |
||||
|
height: 585rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: rgba(255,255,255,0.04); |
||||
|
} |
||||
|
.bg-viewright{ |
||||
|
position: absolute; |
||||
|
right: -38rpx; |
||||
|
top: 102rpx; |
||||
|
width: 127rpx; |
||||
|
height: 127rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: rgba(255,255,255,0.04); |
||||
|
} |
||||
|
.content{ |
||||
|
position: absolute; |
||||
|
top: 260rpx; |
||||
|
left: calc(50% - 343rpx); |
||||
|
width: 686rpx; |
||||
|
height: 986rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
.top{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 40rpx; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
align-items: center; |
||||
|
margin-top: -20rpx; |
||||
|
.avatar{ |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #FFFFFF; |
||||
|
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(21, 113, 110, 0.2); |
||||
|
border: 5rpx solid #FFFFFF; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-right: 20rpx; |
||||
|
&>image{ |
||||
|
width: 148rpx; |
||||
|
height: 148rpx; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
.phone{ |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #15716E; |
||||
|
} |
||||
|
.card{ |
||||
|
padding: 10rpx 20rpx; |
||||
|
&>text{ |
||||
|
font-size: 40rpx; |
||||
|
color: #15716E; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.balance{ |
||||
|
font-size: 32rpx; |
||||
|
color: #555555; |
||||
|
text-align: center; |
||||
|
font-weight: bold; |
||||
|
margin-top: 60rpx; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
.barcode, .qrcode{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-top: 30rpx; |
||||
|
} |
||||
|
.tips{ |
||||
|
font-size: 24rpx; |
||||
|
color: #777777; |
||||
|
text-align: center; |
||||
|
margin-top: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue