yxt_product
/
yxt-yyth-ui-miniprogram
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

111

master
wong1988 2 years ago
parent
bc58c2ca75
commit
24c3241ba8
1 changed files with 43 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 109
      pages/card/card.vue

109
pages/card/card.vue
View File

@ -3,91 +3,58 @@
<view style="display: flex;flex-direction: column;">
<view class="top">
<view class="btn" @click="bind">
<image src="@/static/binding.png" style="width: 20px;height: 20px;"></image>
<text
style="line-height: 35px;font-size: 18px; text-align: center;color: #FE6B00;margin-left: 10px;">绑定新卡</text>
<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="@/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 style="display: flex;flex-direction: column;
background-color: #fff;
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'>
<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: 10px; "
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px; "
: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 }"
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;">
<image src="@/static/pack.png" mode="aspectFill" v-show="item.showBtn"
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;" />
<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; ">
<view style="display: flex;flex-direction: column;padding-right: 10px;">
<text style="font-size: 12px;color: #333;"> {{item.name}}</text>
<text style="font-size: 13px;color: #333;"> {{item.name}}</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;">
<text style="font-size: 12px;color: #FF7100;"> {{item.pname}}</text>
<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: 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>
</view>
</view>
</view>
<view style="font-size: 12px;color:#fff;
border-radius: 15px; height: 18px;padding: 3px 8px;
<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() {
return {
page: {
remarks: ''
remarks: '',
startHeight: 0,
endHeight: 0
},
data: [],
}
@ -112,11 +81,18 @@
// 相当与下拉刷新
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) {
@ -169,23 +145,20 @@
<style>
.top {
width: 100%;
height: 60vh;
width: 100vw;
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;
}
.btn {
margin-top: 45vh;
margin-top: 97.86vw;
width: 83%;
margin-left: 30px;
margin-right: 30px;
background-color: #FFF;
border-radius: 20px;
border-radius: 45px;
display: flex;
height: 40px;
flex-direction: row;
justify-content: center;
align-items: center;
@ -195,14 +168,14 @@
/* 加载背景图 */
background-image: url(../../static/card_item.png);
/* 让背景图基于容器大小伸缩 */
background-size: cover;
background-size: 100% 100%;
}
.item2 {
/* 加载背景图 */
background-image: url(../../static/card_item2.png);
/* 让背景图基于容器大小伸缩 */
background-size: cover;
background-size: 100% 100%;
}
.use {

Write Preview
Loading…
Cancel
Save