product_platform/yxt-yyth-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
wong1988
2023-12-03 21:03:28 +08:00
parent bc58c2ca75
commit 24c3241ba8
1 changed files with 44 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
pages/card/card.vue
View File

@@ -3,91 +3,58 @@
<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"
<view class="btn" @click="bind"> :end-change-height="page.endHeight">
<image src="@/static/binding.png" style="width: 20px;height: 20px;"></image> </NavBar>
<text <view style="display: flex;flex-direction: column;align-items: center;">
style="line-height: 35px;font-size: 18px; text-align: center;color: #FE6B00;margin-left: 10px;">绑定新卡</text> <view class="btn" @click="bind">
<image src="@/static/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> </view>
<view style="display: flex;flex-direction: column; <view
background-color: #fff; 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;">
height: 50vh; z-index: 100;
border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -20px;">
<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :auto='true' hight="30px"
:autoHeight='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" <view v-for="(item,index) in data" :key="index"
style="display: flex;flex-direction: column;align-items: center;margin-top: 10px; " style="display: flex;flex-direction: column;align-items: center;margin-top: 14px; "
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)"> :class="item.showBtn==true?'oragin':'gray'" @click="detail(item)">
<!-- <view
style="display: flex;flex-direction: column;border: 1px solid #e29a68;width: 90%;border-radius: 20rpx;margin-top: 8px;">
<view class="use">
<image style="width: 70rpx;height: 70rpx;position: absolute;right: 40px;"
src="../../static/card_line.png"></image>
<image src="../../static/gift.png" style="width: 30px;height: 30px;padding-left: 6px;">
</image>
<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;">
<view style="font-size: 14px;padding: 2px;padding-left: 5px;padding-top: 7px;">
{{item.name}}
</view>
<view style="font-size: 12px;padding-left: 5px;padding-bottom: 6px;">{{item.time}}
</view>
</view>
<view v-if="item.showBtn" @click.stop="booking(item.sid)"
style="flex-shrink: 0;padding: 9px;font-size: 13px;z-index: 1;font-weight: 600;">预约提货
</view>
</view>
<view
style="width: 100%;text-align: center;padding-top: 20px;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;background-color: #fdf0ee;">
<view style="font-size: 16px;color: red;">{{item.pname}}</view>
<view class="bottom"
style="padding-bottom: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;font-size: 12px;margin-top: 10px;color: #666;width: 100%;">
{{item.state}}
</view>
</view>
</view> -->
<view class="item" :class="{ item2: !item.showBtn }" <view class="item" :class="{ item2: !item.showBtn }"
style="display: flex;flex-direction: row;width: 85%; margin-left: 10px; margin-right: 10px; padding: 16px; "> style="display: flex;flex-direction: row; padding: 16px;margin-left: 9px;margin-right: 9px;">
<view style="display: flex;flex-direction: row; align-items: center; flex: 1;"> <view style="display: flex;flex-direction: row; align-items: center; flex: 1;">
<image src="@/static/pack.png" mode="aspectFill" v-show="item.showBtn" <image src="@/static/pack.png" mode="aspectFill" v-show="item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" /> style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="@/static/pack2.png" mode="aspectFill" v-show="!item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<view style="display: flex;flex-direction: column;margin-right: 10px; "> <image src="@/static/pack2.png" mode="aspectFill" v-show="!item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<text style="font-size: 12px;color: #333;"> {{item.name}}</text> <view style="display: flex;flex-direction: column;padding-right: 10px;">
<text style="font-size: 13px;color: #333;"> {{item.name}}</text>
<text style="font-size: 12px;color: #999;margin-top: 5px;"> {{item.time}}</text> <text style="font-size: 12px;color: #999;margin-top: 5px;"> {{item.time}}</text>
<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: 12px;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: 13px; color: #FF6000;"> style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;">
{{item.state}}</text> {{item.state}}</text>
</view> </view>
</view> </view>
</view> </view>
<view style="font-size: 12px;color:#fff;
border-radius: 15px; height: 18px;padding: 3px 8px;
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
</view>
<view style="font-size: 12px;color:#fff;flex-shrink: 0;
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
</view>
</view> </view>
@@ -102,7 +69,9 @@
data() { data() {
return { return {
page: { page: {
remarks: '' remarks: '',
startHeight: 0,
endHeight: 0
}, },
data: [], data: [],
} }
@@ -112,11 +81,18 @@
// 相当与下拉刷新 // 相当与下拉刷新
this.$refs.paging.reload(true); this.$refs.paging.reload(true);
}) })
let info = uni.getSystemInfoSync();
this.page.startHeight = info.windowWidth * 0.6
this.page.endHeight = info.windowWidth * 0.8
}, },
onUnload() { onUnload() {
uni.$off('order'); uni.$off('order');
}, },
onPageScroll(res) {
// 渐变
this.$refs.nav.defaultColorBgAlpha(res)
},
methods: { methods: {
// 分页的请求 // 分页的请求
queryList(pageNo, pageSize) { queryList(pageNo, pageSize) {
@@ -169,23 +145,20 @@
<style> <style>
.top { .top {
width: 100%; width: 100vw;
height: 60vh; height: 126.66vw;
/* 加载背景图 */ /* 加载背景图 */
background-image: url(../../static/OIP-C.jpg); background-image: url(https://supervise.yxtsoft.com/lpk/image/hmoe_bj.png);
/* 让背景图基于容器大小伸缩 */ /* 让背景图基于容器大小伸缩 */
background-size: cover; background-size: cover;
} }
.btn { .btn {
margin-top: 45vh; margin-top: 97.86vw;
width: 83%; width: 83%;
margin-left: 30px;
margin-right: 30px;
background-color: #FFF; background-color: #FFF;
border-radius: 20px; border-radius: 45px;
display: flex; display: flex;
height: 40px;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -195,14 +168,14 @@
/* 加载背景图 */ /* 加载背景图 */
background-image: url(../../static/card_item.png); background-image: url(../../static/card_item.png);
/* 让背景图基于容器大小伸缩 */ /* 让背景图基于容器大小伸缩 */
background-size: cover; background-size: 100% 100%;
} }
.item2 { .item2 {
/* 加载背景图 */ /* 加载背景图 */
background-image: url(../../static/card_item2.png); background-image: url(../../static/card_item2.png);
/* 让背景图基于容器大小伸缩 */ /* 让背景图基于容器大小伸缩 */
background-size: cover; background-size: 100% 100%;
} }
.use { .use {