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