|
|
|
@ -1,45 +1,93 @@ |
|
|
|
<template> |
|
|
|
|
|
|
|
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
|
|
|
<z-paging ref="paging" v-model="data" @query="queryList" :auto='true'> |
|
|
|
|
|
|
|
<view v-for="(item,index) in data" style="display: flex;flex-direction: column;margin-top: 15px; margin-left: 15px; margin-right: 15px;"> |
|
|
|
<view |
|
|
|
style="display: flex;flex-direction: column;border: 1px solid #e29a68;width: 100%;border-radius: 20rpx;margin-top: 8px;" |
|
|
|
@click="detail(item.orderSid)"> |
|
|
|
|
|
|
|
<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.code}} |
|
|
|
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
|
|
|
<z-paging ref="paging" v-model="data" @query="queryList" :auto='true'> |
|
|
|
|
|
|
|
<view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-top: 15px;margin-left: 10px;margin-right: 10px;"> |
|
|
|
<!-- <view |
|
|
|
style="display: flex;flex-direction: column;border: 1px solid #e29a68;width: 100%;border-radius: 20rpx;margin-top: 8px;" |
|
|
|
@click="detail(item.orderSid)"> |
|
|
|
|
|
|
|
<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.code}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view |
|
|
|
style="flex-shrink: 0;padding: 9px;font-size: 13px;z-index: 1;font-weight: 600;">{{item.reserveDate}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view |
|
|
|
style="flex-shrink: 0;padding: 9px;font-size: 13px;z-index: 1;font-weight: 600;">{{item.reserveDate}} |
|
|
|
<view |
|
|
|
style="display: flex;flex-direction: column; padding: 10px;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;background-color: #fdf0ee;"> |
|
|
|
|
|
|
|
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;"> |
|
|
|
<text>礼包类型：</text> |
|
|
|
<text>{{item.bagName}}</text> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text>提货门店：</text> |
|
|
|
<text>{{item.store}}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view |
|
|
|
style="display: flex;flex-direction: column; padding: 10px;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;background-color: #fdf0ee;"> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<view class="item" :class="{ item2: item.state=='已提货' }" |
|
|
|
style="display: flex;flex-direction: row;padding: 15px 5px;" |
|
|
|
> |
|
|
|
|
|
|
|
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;"> |
|
|
|
<text>礼包类型：</text> |
|
|
|
<text>{{item.bagName}}</text> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text>提货门店：</text> |
|
|
|
<text>{{item.store}}</text> |
|
|
|
<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill" v-show="item.state=='未提货'" |
|
|
|
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|
|
|
|
|
|
|
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill" v-show="item.state=='已提货'" |
|
|
|
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|
|
|
|
|
|
|
<view style=" display: flex;flex-direction: column;"> |
|
|
|
|
|
|
|
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|
|
|
|
|
|
|
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text style="color: #333; font-size: 14px;">卡    号：</text> |
|
|
|
<text style="color: #333; font-size: 14px;">{{item.code}}</text> |
|
|
|
</view> |
|
|
|
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text style="color: #333; font-size: 14px;">提货门店：</text> |
|
|
|
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|
|
|
</view> |
|
|
|
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text style="color: #333; font-size: 14px;">提货日期：</text> |
|
|
|
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|
|
|
</view> |
|
|
|
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text style="color: #333; font-size: 14px;">提 货 人：</text> |
|
|
|
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|
|
|
</view> |
|
|
|
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text style="color: #333; font-size: 14px;">联系电话：</text> |
|
|
|
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|
|
|
</view> |
|
|
|
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text style="color: #333; font-size: 14px;">状    态：</text> |
|
|
|
<text style="font-size: 14px;" |
|
|
|
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|
|
|
</view> |
|
|
|
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|
|
|
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
</z-paging> |
|
|
|
|
|
|
|
</z-paging> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -83,33 +131,19 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
.item{ |
|
|
|
/* 加载背景图 */ |
|
|
|
background-image: url(../../static/card_bg1.png); |
|
|
|
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_item.png); |
|
|
|
/* 让背景图基于容器大小伸缩 */ |
|
|
|
background-size: cover; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.oragin {} |
|
|
|
|
|
|
|
uni-page-body, |
|
|
|
page { |
|
|
|
background: #FFFFFF; |
|
|
|
|
|
|
|
.item2{ |
|
|
|
/* 加载背景图 */ |
|
|
|
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_item2.png); |
|
|
|
/* 让背景图基于容器大小伸缩 */ |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
wangjiahai
2 years ago
