myTest383
4 months ago
51 changed files with 1725 additions and 1717 deletions
@ -1,46 +1,46 @@ |
|||
.tab-bar { |
|||
pointer-events: auto; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 50px; |
|||
/* background: #F69448; */ |
|||
display: flex; |
|||
padding-top: 5px; |
|||
padding-bottom: 5px; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/bom_navigation.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
/* padding-bottom: env(safe-area-inset-bottom); */ |
|||
pointer-events: auto; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 50px; |
|||
/* background: #F69448; */ |
|||
display: flex; |
|||
padding-top: 5px; |
|||
padding-bottom: 5px; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://ordermall.yxtsoft.com/lpkui/image/bom_navigation.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
/* padding-bottom: env(safe-area-inset-bottom); */ |
|||
} |
|||
|
|||
|
|||
.tab-bar-border { |
|||
background-color: rgba(246, 148, 72, 0.3); |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 1px; |
|||
transform: scaleY(0.5); |
|||
background-color: rgba(246, 148, 72, 0.3); |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 1px; |
|||
transform: scaleY(0.5); |
|||
} |
|||
|
|||
|
|||
.tab-bar-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
text-align: center; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
|
|||
.tab-bar-item cover-image { |
|||
width: 27px; |
|||
height: 27px; |
|||
width: 27px; |
|||
height: 27px; |
|||
} |
|||
|
|||
|
|||
.tab-bar-item cover-view { |
|||
margin-top: 3px; |
|||
font-size: 10px; |
|||
margin-top: 3px; |
|||
font-size: 10px; |
|||
} |
|||
@ -1,241 +1,243 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="首页" :showIcon="false" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view style="display: flex;flex-direction: column;align-items: center;"> |
|||
<view class="btn" @click="bind"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/binding.png" style="width: 15px;height: 15px;"> |
|||
</image> |
|||
<text |
|||
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #FE6B00;margin-left: 11px;">绑定新卡</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: column;background-color: #fff;height: 50vh; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;"> |
|||
|
|||
<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="false"> |
|||
|
|||
<view v-for="(item,index) in data" :key="index" |
|||
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;" |
|||
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)"> |
|||
|
|||
<view class="item" :class="{ item2: !item.showBtn }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号: {{item.serialNumber}}</text> |
|||
<text class="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0; |
|||
<view style="display: flex;flex-direction: column;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="首页" :showIcon="false" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view style="display: flex;flex-direction: column;align-items: center;"> |
|||
<view class="btn" @click="bind"> |
|||
<image src="https://ordermall.yxtsoft.com/lpkui/image/binding.png" |
|||
style="width: 15px;height: 15px;"> |
|||
</image> |
|||
<text |
|||
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #FE6B00;margin-left: 11px;">绑定新卡</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: column;background-color: #fff;height: 50vh; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;"> |
|||
|
|||
<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="false"> |
|||
|
|||
<view v-for="(item,index) in data" :key="index" |
|||
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;" |
|||
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)"> |
|||
|
|||
<view class="item" :class="{ item2: !item.showBtn }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://ordermall.yxtsoft.com/lpkui/image/pack.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://ordermall.yxtsoft.com/lpkui/image/pack2.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号: |
|||
{{item.serialNumber}}</text> |
|||
<text class="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0; |
|||
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</z-paging> |
|||
</view> |
|||
</view> |
|||
</z-paging> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.$on("order", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging.reload(true); |
|||
}) |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.cardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
dialogInputConfirm(val) { |
|||
// 网络请求 绑定 |
|||
}, |
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_bind' |
|||
}) |
|||
}, |
|||
detail(item) { |
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
booking(item) { |
|||
|
|||
if (!item.notRese) { |
|||
this.shortToast("该卡商品已全部预约。") |
|||
return |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_booking?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.$on("order", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging.reload(true); |
|||
}) |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.cardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
dialogInputConfirm(val) { |
|||
// 网络请求 绑定 |
|||
}, |
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_bind' |
|||
}) |
|||
}, |
|||
detail(item) { |
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
booking(item) { |
|||
|
|||
if (!item.notRese) { |
|||
this.shortToast("该卡商品已全部预约。") |
|||
return |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_booking?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/hmoe_bj.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.btn { |
|||
/* margin-top: 97.86vw; */ |
|||
margin-top: 60vw; |
|||
width: 83%; |
|||
background-color: #FFF; |
|||
border-radius: 45px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.showBtn { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.use { |
|||
display: flex; |
|||
flex-direction: row; |
|||
border-top-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
color: #FFF; |
|||
align-items: center; |
|||
background: linear-gradient(89.8deg, rgba(218, 51, 33, 1) -3.76%, rgba(237, 113, 53, 0) 300.05%); |
|||
} |
|||
|
|||
.gray { |
|||
filter: grayscale(100%); |
|||
-webkit-filter: grayscale(100%); |
|||
transition: filter 0.2s; |
|||
} |
|||
|
|||
|
|||
|
|||
.oragin {} |
|||
|
|||
uni-page-body, |
|||
page { |
|||
background: #FFFFFF; |
|||
} |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://ordermall.yxtsoft.com/lpkui/image/hmoe_bj.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.btn { |
|||
/* margin-top: 97.86vw; */ |
|||
margin-top: 60vw; |
|||
width: 83%; |
|||
background-color: #FFF; |
|||
border-radius: 45px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://ordermall.yxtsoft.com/lpkui/image/card_item.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://ordermall.yxtsoft.com/lpkui/image/card_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.showBtn { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.use { |
|||
display: flex; |
|||
flex-direction: row; |
|||
border-top-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
color: #FFF; |
|||
align-items: center; |
|||
background: linear-gradient(89.8deg, rgba(218, 51, 33, 1) -3.76%, rgba(237, 113, 53, 0) 300.05%); |
|||
} |
|||
|
|||
.gray { |
|||
filter: grayscale(100%); |
|||
-webkit-filter: grayscale(100%); |
|||
transition: filter 0.2s; |
|||
} |
|||
|
|||
|
|||
|
|||
.oragin {} |
|||
|
|||
uni-page-body, |
|||
page { |
|||
background: #FFFFFF; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue