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

1111111

Browse Source
This commit is contained in:
guoxing
2024-02-01 10:57:56 +08:00
parent be49a3e45e
commit 8851cbf7dd
26 changed files with 966 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/records/reservationRecords.vue
View File

@@ -19,6 +19,14 @@
<text class="item_left">预约日期：</text>
<text class="item_rifht">{{item.reserveDate}}</text>
</view>
<view class="item">
<text class="item_left">提货门店：</text>
<text class="item_rifht">{{item.storeName}}</text>
</view>
<view class="item">
<text class="item_left">门店地址：</text>
<text class="item_rifht">{{item.address}}</text>
</view>
<view class="item">
<text class="item_left">提&ensp;货&ensp;人：</text>
<text class="item_rifht">{{item.userName}}</text>

8
pages/records/reservationRecords2.vue
View File

@@ -19,6 +19,14 @@
<text class="item_left">预约日期：</text>
<text class="item_rifht">{{item.reserveDate}}</text>
</view>
<view class="item">
<text class="item_left">提货门店：</text>
<text class="item_rifht">{{item.storeName}}</text>
</view>
<view class="item">
<text class="item_left">门店地址：</text>
<text class="item_rifht">{{item.address}}</text>
</view>
<view class="item">
<text class="item_left">提&ensp;货&ensp;人：</text>
<text class="item_rifht">{{item.userName}}</text>

249
pages/records/reservationRecords3.vue Normal file
View File

@@ -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>

257
pages/records/reservationRecords4.vue Normal file
View File

@@ -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>