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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 113
      pages/card/card.vue

113
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; <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> background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
</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 {

Write Preview
Loading…
Cancel
Save