26 changed files with 966 additions and 144 deletions
@ -0,0 +1,249 @@ |
|||||
|
<template> |
||||
|
<view |
||||
|
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);" |
||||
|
class="app"> |
||||
|
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
||||
|
<z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='true'> |
||||
|
|
||||
|
<view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;background: #FFF7EA;margin-top: 10px; |
||||
|
padding: 10px 20px; |
||||
|
border-radius: 20px;"> |
||||
|
|
||||
|
<view class="item"> |
||||
|
<view class="left-circle"></view> |
||||
|
<view class="right-circle"></view> |
||||
|
<view class="item-line"></view> |
||||
|
|
||||
|
<view class="item-top"> |
||||
|
|
||||
|
<text class="item-top-code">预约单号：{{item.reserveCode}}</text> |
||||
|
<text class="item-top-state">{{item.stateValue}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item-bom"> |
||||
|
|
||||
|
<view class="item-bom-left"> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;"> |
||||
|
<text style="font-size: 16px;margin-right: 5px;">{{item.storeName}}</text> |
||||
|
<image src="../../static/phone-2.png" style="width: 15px;height: 15px;" |
||||
|
@click="makePhoneCall(item.linkPhone)"></image> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
||||
|
<image src="../../static/logo.png" style="width: 15px;height: 15px;margin-right: 5px;"> |
||||
|
</image> |
||||
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">提菜日期：</text> |
||||
|
<text style="font-size: 12px;color: #FF5006;">{{item.date}}</text> |
||||
|
</view> --> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;"> |
||||
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">提菜人：</text> |
||||
|
<text style="font-size: 12px;color: #333; margin-right: 5px;">{{item.userName}}</text> |
||||
|
<text style="font-size: 12px;color: #333; ">{{item.userPhone}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
||||
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">预约时间：</text> |
||||
|
<text style="font-size: 12px;color: #333;">{{item.createTime}}</text> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item-bom_right"> |
||||
|
|
||||
|
<image src="https://supervise.yxtsoft.com/lpk/image/daiticai.png" |
||||
|
style="width: 100px; height: 100px;z-index: 100;"> |
||||
|
</image> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item_list" v-if="item.showLsit"> |
||||
|
|
||||
|
<view v-for="(child,index) in item.goodsVo" |
||||
|
style="display: flex;flex-direction: row;width: 100%;"> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%; |
||||
|
padding-left: 10px;padding-right: 10px;margin-top: 8px;"> |
||||
|
<text style="font-size: 12px;color: #666;">{{child.goodName}}</text> |
||||
|
<text style="font-size: 12px;color: #666;">{{child.num}}{{child.unitName}}</text> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item_btn" v-if="item.showLsit" @click="showList(item)"> |
||||
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">展开</text> |
||||
|
<image src="../../static/zhankai.png" style="width: 15px;height: 15px;"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item_btn" v-if="!item.showLsit" @click="showList(item)"> |
||||
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">收起</text> |
||||
|
<image src="../../static/shouqi.png" style="width: 15px;height: 15px;"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</z-paging> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
styleObject: { |
||||
|
'padding-top': '10px', |
||||
|
'padding-bottom': '10px', |
||||
|
'border-radius': '15px', |
||||
|
'background': '#f2f2f2' |
||||
|
}, |
||||
|
data: [] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onLoad() { |
||||
|
// this.$refs.paging.complete(_this.data) |
||||
|
// this.$refs.paging.complete(true) |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
makePhoneCall(phone) { |
||||
|
if (this.stringIsNotEmpty(phone)) |
||||
|
wx.makePhoneCall({ |
||||
|
|
||||
|
phoneNumber: phone, |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
showList(item) { |
||||
|
item.showLsit = !item.showLsit |
||||
|
}, |
||||
|
// 分页的请求 |
||||
|
queryList(pageNo, pageSize) { |
||||
|
let _this = this |
||||
|
_this.$api.myOrderListByUserSid({ |
||||
|
"current": pageNo, |
||||
|
"size": pageSize, |
||||
|
"params": { |
||||
|
"customerSid": getApp().globalData.sid, |
||||
|
"state": '0', //0 未提货 1 已提货 |
||||
|
|
||||
|
} |
||||
|
}).then((resp) => { |
||||
|
// 添加数据源 |
||||
|
this.$refs.paging.complete(resp.records) |
||||
|
}).catch(e => { |
||||
|
// 出错了，点击重试 |
||||
|
_this.$refs.paging.complete(false); |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.app { |
||||
|
--bgcolor: #f2f2f2; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
// /*最重要的部分如下：*/ |
||||
|
// background-image: radial-gradient(circle at left 50%, #f2f2f2, #f2f2f2 12px, transparent 12px), |
||||
|
// radial-gradient(circle at right 50%, #f2f2f2, #f2f2f2 12px, transparent 12px); |
||||
|
|
||||
|
.item-line { |
||||
|
width: 100%; |
||||
|
border-bottom: 10rpx dashed #fff; |
||||
|
position: absolute; |
||||
|
height: 20rpx; |
||||
|
top: 50%; |
||||
|
} |
||||
|
|
||||
|
.left-circle { |
||||
|
background-color: var(--bgcolor); |
||||
|
position: absolute; |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border-radius: 50%; |
||||
|
top: 50%; |
||||
|
left: -50rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.right-circle { |
||||
|
background-color: var(--bgcolor); |
||||
|
position: absolute; |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border-radius: 50%; |
||||
|
top: 50%; |
||||
|
right: -50rpx; |
||||
|
} |
||||
|
|
||||
|
.item-top { |
||||
|
position: relative; //添加的定位 |
||||
|
z-index: 100; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 8px; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
|
||||
|
.item-top-code { |
||||
|
font-size: 13px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.item-top-state { |
||||
|
font-size: 14px; |
||||
|
color: #FF9900; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-bom { |
||||
|
position: relative; //添加的定位 |
||||
|
z-index: 100; |
||||
|
margin-top: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.item-bom-left { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.item-bom_right { |
||||
|
|
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item_list { |
||||
|
position: relative; //添加的定位 |
||||
|
z-index: 100; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.item_btn { |
||||
|
z-index: 100; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
justify-content: center; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,257 @@ |
|||||
|
<template> |
||||
|
<view |
||||
|
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);" |
||||
|
class="app"> |
||||
|
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
||||
|
<z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='true'> |
||||
|
|
||||
|
<view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;background: #fff;margin-top: 10px; |
||||
|
padding: 10px 20px; |
||||
|
border-radius: 20px;"> |
||||
|
|
||||
|
<view class="item"> |
||||
|
<view class="left-circle"></view> |
||||
|
<view class="right-circle"></view> |
||||
|
<view class="item-line"></view> |
||||
|
|
||||
|
<view class="item-top"> |
||||
|
|
||||
|
<text class="item-top-code">预约单号：{{item.reserveCode}}</text> |
||||
|
<text class="item-top-state">{{item.stateValue}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item-bom"> |
||||
|
|
||||
|
<view class="item-bom-left"> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;"> |
||||
|
<text |
||||
|
style="font-size: 16px;margin-right: 5px;color: #BBBBBB;">{{item.storeName}}</text> |
||||
|
<image src="../../static/phone-1.png" style="width: 15px;height: 15px;" |
||||
|
@click="makePhoneCall(item.linkPhone)"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
||||
|
<image src="../../static/time.png" style="width: 15px;height: 15px;margin-right: 5px;"> |
||||
|
</image> |
||||
|
<text style="font-size: 12px;color: #BBBBBB; margin-right: 5px;">提菜日期：</text> |
||||
|
<text style="font-size: 12px;color: #BBBBBB;">{{item.endTime}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;"> |
||||
|
<text style="font-size: 12px;color: #BBBBBB; margin-right: 5px;">提菜人：</text> |
||||
|
<text |
||||
|
style="font-size: 12px;color: #BBBBBB; margin-right: 5px;">{{item.userName}}</text> |
||||
|
<text style="font-size: 12px;color: #BBBBBB; ">{{item.userPhone}}</text> |
||||
|
</view> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
||||
|
<text style="font-size: 12px;color: #BBBBBB; margin-right: 5px;">预约时间：</text> |
||||
|
<text style="font-size: 12px;color: #BBBBBB;">{{item.createTime}}</text> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item-bom_right" style="box-sizing: border-box;"> |
||||
|
|
||||
|
<text style="opacity: 0.7;font-size: 18px;font-weight: 800;font-family: sans-serif;z-index: 101; |
||||
|
width: 100px; height: 100px;line-height: 100px; text-align: center; background: #666; |
||||
|
position: absolute;border-radius: 20px;color: #fff;">已失效</text> |
||||
|
|
||||
|
<image src="https://supervise.yxtsoft.com/lpk/image/daiticai.png" |
||||
|
style="width: 100px; height: 100px;z-index: 100;border-radius: 20px;"> |
||||
|
</image> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item_list" v-if="item.showLsit"> |
||||
|
|
||||
|
<view v-for="(child,index) in item.goodsVo" |
||||
|
style="display: flex;flex-direction: row;width: 100%;"> |
||||
|
|
||||
|
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%; |
||||
|
padding-left: 10px;padding-right: 10px;margin-top: 8px;"> |
||||
|
<text style="font-size: 12px;color: #BBBBBB;">{{child.goodName}}</text> |
||||
|
<text style="font-size: 12px;color: #BBBBBB;">{{child.num}}{{child.unitName}}</text> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="item_btn" v-if="item.showLsit" @click="showList(item)"> |
||||
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">展开</text> |
||||
|
<image src="../../static/zhankai.png" style="width: 15px;height: 15px;"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item_btn" v-if="!item.showLsit" @click="showList(item)"> |
||||
|
<text style="font-size: 12px;color: #999; margin-right: 5px;">收起</text> |
||||
|
<image src="../../static/shouqi.png" style="width: 15px;height: 15px;"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</z-paging> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
styleObject: { |
||||
|
'padding-top': '10px', |
||||
|
'padding-bottom': '10px', |
||||
|
'border-radius': '15px', |
||||
|
'background': '#f2f2f2' |
||||
|
}, |
||||
|
data: [] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onLoad() { |
||||
|
// this.$refs.paging.complete(_this.data) |
||||
|
// this.$refs.paging.complete(true) |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
makePhoneCall(phone) { |
||||
|
|
||||
|
if (this.stringIsNotEmpty(phone)) |
||||
|
|
||||
|
wx.makePhoneCall({ |
||||
|
|
||||
|
phoneNumber: phone, |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
showList(item) { |
||||
|
item.showLsit = !item.showLsit |
||||
|
}, |
||||
|
// 分页的请求 |
||||
|
queryList(pageNo, pageSize) { |
||||
|
let _this = this |
||||
|
_this.$api.myOrderListByUserSid({ |
||||
|
"current": pageNo, |
||||
|
"size": pageSize, |
||||
|
"params": { |
||||
|
"customerSid": getApp().globalData.sid, |
||||
|
"state": '1', //0 未提货 1 已提货 |
||||
|
|
||||
|
} |
||||
|
}).then((resp) => { |
||||
|
// 添加数据源 |
||||
|
this.$refs.paging.complete(resp.records) |
||||
|
}).catch(e => { |
||||
|
// 出错了，点击重试 |
||||
|
_this.$refs.paging.complete(false); |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.app { |
||||
|
--bgcolor: #f2f2f2; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
// /*最重要的部分如下：*/ |
||||
|
// background-image: radial-gradient(circle at left 50%, #f2f2f2, #f2f2f2 12px, transparent 12px), |
||||
|
// radial-gradient(circle at right 50%, #f2f2f2, #f2f2f2 12px, transparent 12px); |
||||
|
|
||||
|
.item-line { |
||||
|
width: 100%; |
||||
|
border-bottom: 10rpx dashed #EAEAEA; |
||||
|
position: absolute; |
||||
|
height: 20rpx; |
||||
|
top: 50%; |
||||
|
} |
||||
|
|
||||
|
.left-circle { |
||||
|
background-color: var(--bgcolor); |
||||
|
position: absolute; |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border-radius: 50%; |
||||
|
top: 50%; |
||||
|
left: -50rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.right-circle { |
||||
|
background-color: var(--bgcolor); |
||||
|
position: absolute; |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border-radius: 50%; |
||||
|
top: 50%; |
||||
|
right: -50rpx; |
||||
|
} |
||||
|
|
||||
|
.item-top { |
||||
|
position: relative; //添加的定位 |
||||
|
z-index: 100; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 8px; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
|
||||
|
.item-top-code { |
||||
|
font-size: 13px; |
||||
|
color: #BBBBBB; |
||||
|
} |
||||
|
|
||||
|
.item-top-state { |
||||
|
font-size: 14px; |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-bom { |
||||
|
position: relative; //添加的定位 |
||||
|
z-index: 100; |
||||
|
margin-top: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.item-bom-left { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.item-bom_right { |
||||
|
// position: relative; |
||||
|
// border-radius: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item_list { |
||||
|
position: relative; //添加的定位 |
||||
|
z-index: 100; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.item_btn { |
||||
|
z-index: 100; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
justify-content: center; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 376 B |
|
After Width: | Height: | Size: 620 B |
|
After Width: | Height: | Size: 636 B |
|
After Width: | Height: | Size: 202 B |
|
After Width: | Height: | Size: 370 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 220 B |
Loading…
Reference in new issue