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

预约提货商城小程序

Browse Source
This commit is contained in:
liupopo
2024-01-15 13:52:54 +08:00
commit 5a66559820
466 changed files with 78084 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
pages/home/cloudCard.vue Normal file
View File

@@ -0,0 +1,291 @@
<template>
<view style="display: flex;flex-direction: column;height: 100#;">
<view class="top">
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
:end-change-height="page.endHeight">
</NavBar>
<!-- <view class="topText">
冬储文化是中国传统文化的一部分，是古人顺应自然、因时而食的智慧体现，是刻在老一辈骨子里的温暖记忆!
</view> -->
</view>
<!-- <view
style="display: flex;flex-direction: column; height: 30vw; width: 100vw;background: #ff0;z-index: 1000; position: fixed; top:61vw ">
-->
<z-paging ref="paging" v-model="data" :pagingStyle='styleObject' @query="queryList" :refresher-enabled="true" >
<view style="display: flex;flex-direction: row;justify-content: space-between;
margin:5px 20px 0px 20px;padding-bottom: 10px; border-bottom: 2px #EFEFEF solid;">
<view style="display: flex;flex-direction: row;align-items: center;">
<view style="background: #FF9900; border-radius: 50%;width: 12px;height: 12px;"></view>
<view style="background: #FFCC7F; border-radius: 50%;width: 12px;height: 12px;"></view>
<text
style="margin-left: 8px;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;">精选蔬菜组合</text>
</view>
<!-- <view style="border: 1px #FF9900 solid;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;border-radius: 15px;
padding:5px 15px;" @click="optionalClick()">
+ 自选菜窖
</view> -->
</view>
<view v-for="(item,index) in data" :key="index"
style="display: flex;flex-direction: column;margin-top: 14px;width: 100%;"
@click="detail(item)">
<view :style="{'border-bottom':(index===data.length-1 ? 'none':'1px #EFEFEF solid')}" style="display: flex;flex-direction: column;
margin-left: 20px;margin-right: 20px;padding-bottom: 10px;flex: 1;">
<view style="display: flex;flex-direction: row;width: 100%; ">
<text style="flex: 1;margin-right: 10px;color: #000;font-size: 16px;">{{item.name}}</text>
<view style="display: flex;flex-direction: row;align-items: center;">
<text style="color: #FCA45C; font-size: 12px;margin-right: 5px;">订窖</text>
<image src="@/static/right_icon.png" style="width: 15px;height: 15px;"></image>
</view>
</view>
<view style="display: flex;flex-direction: row;align-items: center; margin-right: 10px;margin-top: 5px; width: 100%; ">
<image :src='item.iconUrl' style="width: 70px;height: 70px;" mode="aspectFit"></image>
<view style="display: flex;flex-direction: column;margin-left: 20px;flex: 1; width: 100%; margin-top: 5px;">
<text style="color: #999;font-size: 13px;width: 100%;line-height: 20px;">{{item.remarks}}</text>
<view style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 10px;">
<view style="display: flex;flex-direction: row;">
<text
style="border: 1px #EE752F solid; border-radius: 10px; color:#EE752F ; font-size: 14px;
margin-right: 10px;padding: 0px 8px;"
v-show="item.isRecommend=='1'">推荐</text>
<text
style="border: 1px #EE752F solid; border-radius: 10px; color: #EE752F;font-size: 12px;;padding: 0px 8px;">{{item.count}}</text>
</view>
<text style="color: #FF5006;font-size: 14px;">￥{{convertPrice(item.price)}}</text>
</view>
<view v-if="item.giftBagGoods.length>0">
<view style="height: 10px;"></view>
<view v-for="(child,pos) in item.giftBagGoods" :key="pos"
style="display: flex;flex-direction: row;align-items: center;width: calc(100vw - 120px);padding-top: 5px;box-sizing: border-box;">
<image src="../../static/tck_mx_icon.png" style="width: 9px;height: 9px;">
</image>
<view
style="font-size: 11px;color: #E99D42;padding-left: 5px;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
{{child.name}}
</view>
<view style="font-size: 11px;color: #E99D42;flex-shrink: 0;margin-left: 23px;">
{{child.count}}
</view>
<view style="font-size: 11px;color: #E99D42;min-width: 60px;text-align: right;padding-left: 5px;">
{{child.spec}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view slot="loadingMoreNoMore">
<view style="display: flex;flex-direction: column;justify-content: center; align-items: center; margin-top: 20px; border-top: 2px #efefef solid;
padding-top: 20px; margin-left:20px;margin-right: 20px;;">
<text style="color: #888888; font-size: 13px;">您也可以自由选菜，自建惠享云菜窖。</text>
<text style="color: #fff; font-size: 16px; font-weight: 600; font-family: sans-serif; background: #FCA45C; border-radius: 8px; padding: 10px 15px; margin-top: 15px;;" @click="optionalClick()">自建云菜窖</text>
</view>
<view style="height: 20px;"></view>
</view>
</z-paging>
<!-- </view> -->
</view>
</template>
<script>
export default {
data() {
return {
styleObject: {
// 'position': 'fixed',
// 'top':'80vw',
'margin-top': '68vw',
'border-top-left-radius': '25px',
'border-top-right-radius': '25px',
'background': '#fff',
'padding-top': '10px',
},
page: {
startHeight: 0,
endHeight: 0
},
data: [],
}
},
created() {
this.$bus.$on('order', msg => {
console.log("aaaaaaaaaaa4", msg)
this.$refs.paging.reload(true);
});
},
onLoad() {
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) {
let _this = this
_this.$api.appletGiftBagList().then((resp) => {
// 添加数据源
// this.$refs.paging.complete(resp.records)
this.$refs.paging.complete(resp)
}).catch(e => {
// 出错了，点击重试
_this.$refs.paging.complete(false);
})
},
detail(item) {
// 详情
uni.navigateTo({
url: '/pages/cloud/detail_cloudCard?sid=' + item.sid+"&name="+item.name
})
},
optionalClick(){
uni.navigateTo({
url: '/pages/cloud/optionalCard'
})
}
}
}
</script>
<style>
._ellipsis {
overflow-wrap: break-word;
}
.top {
width: 100vw;
/* height: 126.66vw; */
height: 75vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/clound_bj1.png);
/* background-image: url(../../static/clound_bj1.png); */
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.topText {
margin-top: 60vw;
margin-left: 7vw;
margin-right: 7vw;
border-radius: 15px;
background-color: #FFF0E5;
padding: 10px 10px;
font-size: 12px;
color: #FF9900;
font-weight: 600;
font-family: sans-serif;
}
.btn {
/* margin-top: 97.86vw; */
margin-top: 60vw;
width: 83%;
background-color: #FFF;
border-radius: 45px;
display: flex;
height: 13vw;
flex-direction: row;
justify-content: center;
align-items: center;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj1.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/carPerson.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.item2 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.showBtn {
visibility: hidden;
}
.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;
}
.oragin {}
uni-page-body,
page {
background: #FFFFFF;
}
</style>

260
pages/home/corporateCard.vue Normal file
View File

@@ -0,0 +1,260 @@
<template>
<view style="display: flex;flex-direction: column;">
<view class="top">
<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="https://supervise.yxtsoft.com/lpk/image/binding2.png" style="width: 20px;height: 20px;">
</image>
<text
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #fff;margin-left: 11px;">绑定企业卡</text>
</view>
</view>
</view>
<!--
<view
style="display: flex;flex-direction: column;background: #fff;height:55vh;border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.1vw;">
-->
<z-paging ref="paging" :pagingStyle='styleObject' v-model="data" @query="queryList" :refresher-enabled="true">
<view v-for="(item,index) in data" :key="index"
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;"
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)">
<view class="item" :class="{ item2: !item.showBtn }">
<!-- 外边 18px 内边 32px = 50px -->
<view style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">
<!-- 礼包图标 总60px -->
<view style="flex-shrink: 0;">
<image src="https://supervise.yxtsoft.com/lpk/image/enterpriseNormal.png" mode="aspectFill"
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/enterpriseLose.png" mode="aspectFill"
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
</view>
<view style="width: 100%;display: flex;flex-direction: column;">
<view style="display: flex;flex-direction: row; width: 100%;">
<view style="flex: 1; display: flex;flex-direction: column;">
<text class="_ellipsis"
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text>
<text class="_ellipsis"
style="font-size: 12px;color: ##6FADFF;margin-top: 5px;width: calc(100vw - 182px);">{{item.pname}}</text>
</view>
<text :class="(item.showBtn)?'state1':'state2'">
{{item.state}}</text>
</view>
<text style="font-size: 12px;color: ##6FADFF;margin-top: 5px;"
v-show="item.showBtn">企业卡内的商品及数量可以派生出“福礼卡”</text>
<text style="font-size: 12px;color: #999;margin-top: 5px;"
v-show="!item.showBtn">当前卡片已失效</text>
<!-- 按钮 24 + 48 = 72px-->
<view v-show="item.showBtn" style="font-size: 12px;color:#fff;flex-shrink: 0;
text-align: center;margin-top: 5px;
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box;
background: -webkit-linear-gradient(left,#0473FF,#A4CDFF);">发放福礼卡</view>
<!-- 蔬菜礼包经典款+状态
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<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: 12px; color: #FF6000;flex-shrink: 0;">
{{item.state}}</text>
</view> -->
</view>
</view>
</view>
</view>
</z-paging>
<!-- </view> -->
</view>
</template>
<script>
export default {
data() {
return {
data: [],
styleObject: {
'margin-top': '78vw',
'border-top-left-radius': '25px',
'border-top-right-radius': '25px',
'background': '#fff',
'padding-top': '10px',
},
page: {
remarks: '',
startHeight: 0,
endHeight: 0
},
}
},
created() {
this.$bus.$on('order3', msg => {
console.log("aaaaaaaaaaa4", msg)
this.$refs.paging.reload(true);
});
},
onLoad() {
let info = uni.getSystemInfoSync();
this.page.startHeight = info.windowWidth * 0.6
this.page.endHeight = info.windowWidth * 0.8
},
methods: {
// 分页的请求
queryList(pageNo, pageSize) {
let _this = this
_this.$api.empcardList({
"current": pageNo,
"size": pageSize,
"params": {
"customerSid": getApp().globalData.sid
}
}).then((resp) => {
// 添加数据源
this.$refs.paging.complete(resp.records)
}).catch(e => {
// 出错了，点击重试
_this.$refs.paging.complete(false);
})
},
bind() {
uni.navigateTo({
url: '/pages/bind/bind_enterpriseCard'
})
},
detail(item) {
if (item.showBtn) {
// 正常
uni.navigateTo({
url: '/pages/enterprise/corporate_card_detail?sid=' + item.sid
})
} else {
// 过期 已完成
uni.navigateTo({
url: '/pages/enterprise/corporate_card_detail2?sid=' + item.sid
})
}
}
}
}
</script>
<style>
._ellipsis {
overflow-wrap: break-word;
}
.top {
width: 100vw;
/* height: 126.66vw; */
height: 85vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj3.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.btn {
/* margin-top: 97.86vw; */
margin-top: 60vw;
width: 83%;
background-color: #FFF;
border-radius: 45px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 13vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj3.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/cardEnterprise.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.item2 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.showBtn {
visibility: hidden;
}
.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;
}
.oragin {}
uni-page-body,
page {
background: #FFFFFF;
}
.state1 {
height: 17px;
border: 1px #6FADFF solid;
margin-left: 10px;
border-radius: 15px;
padding: 3px 10px;
font-size: 12px;
color: #6FADFF;
flex-shrink: 0;
}
.state2 {
height: 17px;
border: 1px #D9D9D9 solid;
margin-left: 10px;
border-radius: 15px;
padding: 3px 10px;
font-size: 12px;
color: #7E7E7E;
flex-shrink: 0;
}
</style>

245
pages/home/giftCard.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<view style="display: flex;flex-direction: column;">
<view class="top">
<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="https://supervise.yxtsoft.com/lpk/image/binding2.png" style="width: 20px;height: 20px;">
</image>
<text
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #fff;margin-left: 11px;">绑定福礼卡</text>
</view>
</view>
</view>
<!--
<view
style="display: flex;flex-direction: column;background: #fff;height:55vh;border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.1vw;">
-->
<z-paging ref="paging2" v-model="data2" :pagingStyle='styleObject' @query="queryList2" :refresher-enabled="true">
<view v-for="(item,index) in data2" :key="index"
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;"
:class="item.showBtn==true?'oragin':'gray'" @click="detail2(item)">
<view class="item" :class="{ item2: !item.showBtn }">
<!-- 外边 18px 内边 32px = 50px -->
<view
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">
<!-- 礼包图标 总60px -->
<view style="flex-shrink: 0;">
<image src="https://supervise.yxtsoft.com/lpk/image/giftNormal.png" mode="aspectFill"
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/giftLose.png" mode="aspectFill"
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
</view>
<view
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;">
<view style="width: 100%;display: flex;flex-direction: row;">
<view style="flex: 1;display: flex;flex-direction: column;">
<text class="_ellipsis"
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text>
<text class="_ellipsis"
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);">
{{item.time}}</text>
</view>
<!-- 按钮 24 + 48 = 72px-->
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0;
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box;
background: -webkit-linear-gradient(left,#FF2B00,#FA6B54);">预约提货</view>
</view>
<!-- 蔬菜礼包经典款+状态 -->
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<text style="font-size: 15px;color: #FF2B00;">福礼卡</text>
<text
style="border: 1px #FF2B00 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF2B00;flex-shrink: 0;">
{{item.state}}</text>
</view>
</view>
</view>
</view>
</view>
</z-paging>
<!-- </view> -->
</view>
</template>
<script>
export default {
data() {
return {
styleObject:{
'margin-top': '78vw',
'border-top-left-radius': '25px',
'border-top-right-radius': '25px',
'background': '#fff',
'padding-top': '10px',
},
page: {
remarks: '',
startHeight: 0,
endHeight: 0
},
data: [],
data2: [],
currentTab: 0,
}
},
created() {
this.$bus.$on('order2', msg => {
console.log("aaaaaaaaaaa4", msg)
this.$refs.paging2.reload(true);
});
},
onLoad() {
let info = uni.getSystemInfoSync();
this.page.startHeight = info.windowWidth * 0.6
this.page.endHeight = info.windowWidth * 0.8
},
onUnload() {
uni.$off('order2');
},
onPageScroll(res) {
// 渐变
this.$refs.nav.defaultColorBgAlpha(res)
},
methods: {
// 分页的请求
queryList2(pageNo, pageSize) {
let _this = this
_this.$api.gifcardList({
"current": pageNo,
"size": pageSize,
"params": {
"customerSid": getApp().globalData.sid
}
}).then((resp) => {
// 添加数据源
this.$refs.paging2.complete(resp.records)
}).catch(e => {
// 出错了，点击重试
_this.$refs.paging2.complete(false);
})
},
bind() {
uni.navigateTo({
url: '/pages/bind/bind_giftCard'
})
},
detail2(item) {
if (item.showBtn) {
// 正常
uni.navigateTo({
url: '/pages/enterprise/welfare_card_detail?sid=' + item.sid
})
} else {
// 过期 已完成
uni.navigateTo({
url: '/pages/enterprise/welfare_card_detail2?sid=' + item.sid
})
}
},
}
}
</script>
<style>
._ellipsis {
overflow-wrap: break-word;
}
.top {
width: 100vw;
/* height: 126.66vw; */
height: 85vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj2.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.btn {
/* margin-top: 97.86vw; */
margin-top: 60vw;
width: 83%;
background-color: #FFF;
border-radius: 45px;
display: flex;
height: 13vw;
flex-direction: row;
justify-content: center;
align-items: center;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj2.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/cardGift.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.item2 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.showBtn {
visibility: hidden;
}
.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;
}
.oragin {}
uni-page-body,
page {
background: #FFFFFF;
}
</style>

244
pages/home/personCard.vue Normal file
View File

@@ -0,0 +1,244 @@
<template>
<view style="display: flex;flex-direction: column;height: 100#;">
<view class="top">
<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="https://supervise.yxtsoft.com/lpk/image/binding2.png" style="width: 20px;height: 20px;">
</image>
<text
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #fff;margin-left: 11px;">绑定个人卡</text>
</view>
</view>
</view>
<!-- <view
style="display: flex;flex-direction: column;background: #f0f; height: auto; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.1vw;"> -->
<z-paging ref="paging" v-model="data" :pagingStyle='styleObject' @query="queryList" :refresher-enabled="true">
<view v-for="(item,index) in data" :key="index"
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px; "
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)">
<view class="item" :class="{ item2: !item.showBtn }">
<!-- 外边 18px 内边 32px = 50px -->
<view
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">
<!-- 礼包图标 总60px -->
<view style="flex-shrink: 0;">
<image src="https://supervise.yxtsoft.com/lpk/image/personNormal.png" mode="aspectFill"
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/peronLose.png" mode="aspectFill"
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
</view>
<view
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;">
<view style="width: 100%;display: flex;flex-direction: row;">
<view style="flex: 1;display: flex;flex-direction: column;">
<text class="_ellipsis"
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text>
<text lass="_ellipsis"
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);">
{{item.time}}</text>
</view>
<!-- 按钮 24 + 48 = 72px-->
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0;
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box;
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
</view>
<!-- 蔬菜礼包经典款+状态 -->
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<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: 12px; color: #FF6000;flex-shrink: 0;">
{{item.state}}</text>
</view>
</view>
</view>
</view>
</view>
</z-paging>
<!-- </view> -->
</view>
</template>
<script>
export default {
data() {
return {
styleObject:{
'margin-top': '78vw',
'border-top-left-radius': '25px',
'border-top-right-radius': '25px',
'background': '#fff',
'padding-top': '10px',
},
page: {
remarks: '',
startHeight: 0,
endHeight: 0
},
data: [],
data2: [],
currentTab: 0,
}
},
created() {
this.$bus.$on('order', msg => {
console.log("aaaaaaaaaaa4", msg)
this.$refs.paging.reload(true);
});
},
onLoad() {
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) {
let _this = this
_this.$api.cardList({
"current": pageNo,
"size": pageSize,
"params": {
"customerSid": getApp().globalData.sid
}
}).then((resp) => {
// 添加数据源
this.$refs.paging.complete(resp.records)
}).catch(e => {
// 出错了，点击重试
_this.$refs.paging.complete(false);
})
},
bind() {
uni.navigateTo({
url: '/pages/bind/bind_personCard'
})
},
detail(item) {
if (item.showBtn) {
// 正常
uni.navigateTo({
url: '/pages/card/card_detail?sid=' + item.sid
})
} else {
// 过期 已完成
uni.navigateTo({
url: '/pages/card/card_detail2?sid=' + item.sid
})
}
},
}
}
</script>
<style>
._ellipsis {
overflow-wrap: break-word;
}
.top {
width: 100vw;
/* height: 126.66vw; */
height: 85vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj1.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.btn {
/* margin-top: 97.86vw; */
margin-top: 60vw;
width: 83%;
background-color: #FFF;
border-radius: 45px;
display: flex;
height: 13vw;
flex-direction: row;
justify-content: center;
align-items: center;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj1.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/carPerson.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.item2 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.showBtn {
visibility: hidden;
}
.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;
}
.oragin {}
uni-page-body,
page {
background: #FFFFFF;
}
</style>

533
pages/home/pickUpCard.vue Normal file
View File

@@ -0,0 +1,533 @@
<template>
<view style="display: flex;flex-direction: column;height: 100#;">
<view class="top">
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
:end-change-height="page.endHeight">
</NavBar>
<view style="display: flex;flex-direction: row;">
<!-- <view class="btn" @click="bind">
<image src="https://supervise.yxtsoft.com/lpk/image/binding.png" style="width: 20px;height: 20px;">
</image>
<text
style="height: 45px;line-height: 45px;font-size: 17px;font-weight: 600; text-align: center;color: #FF7100;margin-left: 11px;">绑定新卡</text>
</view> -->
<view style="flex: 1;"></view>
<!-- <text style="color: #fff;margin-top: 60vw; margin-right: 25px;" @click="bind">绑定新卡</text> -->
<image @click="bind" src="https://supervise.yxtsoft.com/lpk/image/bind2.png"
style="margin-top: 60vw; margin-right: 25px;width: 20px;height: 20px;">
</image>
</view>
</view>
<!-- <view
style="display: flex;flex-direction: column;background: #f0f; height: auto; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.1vw;"> -->
<z-paging ref="paging" v-model="data" :pagingStyle='styleObject' @query="queryList" :refresher-enabled="true" :auto="false">
<view v-for="(item,index) in data" :key="index"
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px; "
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)">
<!-- 家庭卡-->
<view v-show="item.type=='1'">
<view class="item" :class="{ item2: !item.showBtn }">
<!-- 外边 18px 内边 32px = 50px -->
<view
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">
<!-- 礼包图标 总60px -->
<view style="flex-shrink: 0;">
<image src="https://supervise.yxtsoft.com/lpk/image/home_family.png" mode="aspectFill"
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/home_notFamily.png"
mode="aspectFill" v-show="!item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
</view>
<view
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;">
<view style="width: 100%;display: flex;flex-direction: row;">
<view style="flex: 1;display: flex;flex-direction: column;">
<text class="_ellipsis"
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">窖号:{{item.serialNumber}}</text>
<text lass="_ellipsis"
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);">
{{item.time}}</text>
</view>
<!-- 按钮 24 + 48 = 72px-->
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0;
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box;
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
</view>
<!-- 蔬菜礼包经典款+状态 -->
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<text style="font-size: 15px;color: #FF7100;flex: 1;"> {{item.pname}}</text>
<text
style="margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;">
{{item.state}}</text>
</view>
<view v-if="item.list.length>0">
<view style="height: 10px;"></view>
<view v-for="(child,pos) in item.list" :key="pos"
style="display: flex;flex-direction: row;align-items: center;width: calc(100vw - 120px);padding-top: 5px;box-sizing: border-box;">
<image src="../../static/tck_mx_icon.png" style="width: 9px;height: 9px;">
</image>
<view
style="font-size: 11px;color: #E99D42;padding-left: 5px;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
{{child.goodsName}}
</view>
<view style="font-size: 11px;color: #E99D42;flex-shrink: 0;margin-left: 23px;">
{{child.content}}
</view>
<view style="font-size: 11px;color: #E99D42;min-width: 60px;text-align: right;padding-left: 5px;">
{{child.remarks}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 亲情卡-->
<view v-show="item.type=='2'">
<view class="item3" :class="{ item4: !item.showBtn }">
<!-- 外边 18px 内边 32px = 50px -->
<view
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">
<!-- 礼包图标 总60px -->
<view style="flex-shrink: 0;">
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png"
mode="aspectFill" v-show="item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/home_notAffection.png"
mode="aspectFill" v-show="!item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
</view>
<view
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;">
<view style="width: 100%;display: flex;flex-direction: row;">
<view style="flex: 1;display: flex;flex-direction: column;">
<text class="_ellipsis"
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">窖号:{{item.serialNumber}}</text>
<text lass="_ellipsis"
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);">
{{item.time}}</text>
</view>
<!-- 按钮 24 + 48 = 72px-->
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0;
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box;
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
</view>
<!-- 蔬菜礼包经典款+状态 -->
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<text style="font-size: 15px;color: #FF7100;flex: 1;"> {{item.pname}}</text>
<text
style="margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;">
{{item.state}}</text>
</view>
<view v-if="item.list.length>0">
<view style="height: 10px;"></view>
<view v-for="(child,pos) in item.list" :key="pos"
style="display: flex;flex-direction: row;align-items: center;width: calc(100vw - 120px);padding-top: 5px;box-sizing: border-box;">
<image src="../../static/tck_mx_icon.png" style="width: 9px;height: 9px;">
</image>
<view
style="font-size: 11px;color: #E99D42;padding-left: 5px;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
{{child.goodsName}}
</view>
<view style="font-size: 11px;color: #E99D42;flex-shrink: 0;margin-left: 23px;">
{{child.content}}
</view>
<view style="font-size: 11px;color: #E99D42;min-width: 60px;text-align: right;padding-left: 5px;">
{{child.remarks}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 企业卡-->
<view v-show="item.type=='3'">
<view class="item5" :class="{ item6: !item.showBtn }">
<!-- 外边 18px 内边 32px = 50px -->
<view
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">
<!-- 礼包图标 总60px -->
<view style="flex-shrink: 0;">
<image src="https://supervise.yxtsoft.com/lpk/image/home_enterprise.png"
mode="aspectFill" v-show="item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/home_notEnterprise.png"
mode="aspectFill" v-show="!item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
</view>
<view
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;">
<view style="width: 100%;display: flex;flex-direction: row;">
<view style="flex: 1;display: flex;flex-direction: column;">
<text class="_ellipsis"
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">窖号:{{item.serialNumber}}</text>
<text lass="_ellipsis"
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);">
{{item.time}}</text>
</view>
<!-- 按钮 24 + 48 = 72px-->
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0;
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box;
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
</view>
<!-- 蔬菜礼包经典款+状态 -->
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<text style="font-size: 15px;color: #FF7100;flex: 1;"> {{item.pname}}</text>
<text
style="margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;">
{{item.state}}</text>
</view>
<view v-if="item.list.length>0">
<view style="height: 10px;"></view>
<view v-for="(child,pos) in item.list" :key="pos"
style="display: flex;flex-direction: row;align-items: center;width: calc(100vw - 120px);padding-top: 5px;box-sizing: border-box;">
<image src="../../static/tck_mx_icon.png" style="width: 9px;height: 9px;">
</image>
<view
style="font-size: 11px;color: #E99D42;padding-left: 5px;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
{{child.goodsName}}
</view>
<view style="font-size: 11px;color: #E99D42;flex-shrink: 0;margin-left: 23px;">
{{child.content}}
</view>
<view style="font-size: 11px;color: #E99D42;min-width: 60px;text-align: right;padding-left: 5px;">
{{child.remarks}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</z-paging>
<!-- </view> -->
</view>
</template>
<script>
export default {
data() {
return {
styleObject: {
'margin-top': '68vw',
'border-top-left-radius': '25px',
'border-top-right-radius': '25px',
'background': '#fff',
'padding-top': '10px',
},
page: {
remarks: '',
startHeight: 0,
endHeight: 0
},
data: [],
data2: [],
currentTab: 0,
}
},
created() {
this.$bus.$on('order', msg => {
console.log("aaaaaaaaaaa4", msg)
this.$refs.paging.reload(true);
});
},
onLoad() {
let info = uni.getSystemInfoSync();
this.page.startHeight = info.windowWidth * 0.6
this.page.endHeight = info.windowWidth * 0.8
},
onShow() {
this.$refs.paging.reload(true);
},
onUnload() {
uni.$off('order');
},
onPageScroll(res) {
// 渐变
this.$refs.nav.defaultColorBgAlpha(res)
},
methods: {
// 分页的请求
queryList(pageNo, pageSize) {
let _this = this
_this.$api.pickUpCardList({
"current": pageNo,
"size": pageSize,
"params": {
"customerSid": getApp().globalData.sid
}
}).then((resp) => {
// 添加数据源
this.$refs.paging.complete(resp.records)
}).catch(e => {
// 出错了，点击重试
_this.$refs.paging.complete(false);
})
},
bind() {
uni.navigateTo({
url: '/pages/bind/bind_pickUpCard'
})
},
detail(item) {
console.log("aaa", item);
if (item.showBtn) {
// 正常
if (item.type == '1') {
console.log("111", item);
// 家庭卡
uni.navigateTo({
url: '/pages/detail/detail_family?sid=' + item.sid
})
}
if (item.type == '2') {
console.log("222", item);
// 亲情卡
uni.navigateTo({
url: '/pages/detail/detail_affeection?sid=' + item.sid
})
}
if (item.type == '3') {
console.log("333", item);
// 企业卡
uni.navigateTo({
url: '/pages/detail/detail_enterprise?sid=' + item.sid
})
}
} else {
// 过期 已完成
if (item.type == '1') {
// 家庭卡
uni.navigateTo({
url: '/pages/detail/detail_family2?sid=' + item.sid
})
}
if (item.type == '2') {
// 亲情卡
uni.navigateTo({
url: '/pages/detail/detail_affeection2?sid=' + item.sid
})
}
if (item.type == '3') {
// 企业卡
uni.navigateTo({
url: '/pages/detail/detail_enterprise2?sid=' + item.sid
})
}
}
},
}
}
</script>
<style>
._ellipsis {
overflow-wrap: break-word;
}
.top {
width: 100vw;
/* height: 126.66vw; */
height: 85vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj1.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.btn {
/* margin-top: 97.86vw; */
margin-top: 60vw;
width: 83%;
background-color: #FFF;
border-radius: 45px;
display: flex;
/* height: 13vw; */
flex-direction: row;
justify-content: center;
align-items: center;
/* 加载背景图 */
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj1.png); */
/* 让背景图基于容器大小伸缩 */
/* background-size: 100% 100%; */
}
.item {
border-radius: 8px;
width: calc(100% - 5px);
background-color: rgba(255, 248, 248, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 2px 3px 6px 0px rgba(255, 226, 222, 0.62);
}
.item2 {
/* 加载背景图 */
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); */
/* 让背景图基于容器大小伸缩 */
/* background-size: 100% 100%; */
/* width: calc(100% - 5px); */
width: calc(100% - 5px);
border-radius: 8px;
background-color: rgba(255, 251, 248, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 2px 3px 6px 0px rgba(238, 117, 47, 0.15);
}
.item3 {
/* 加载背景图 */
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_affection.png); */
/* 让背景图基于容器大小伸缩 */
/* background-size: 100% 100%; */
/* width: calc(100% - 5px); */
border-radius: 8px;
background-color: rgba(255, 254, 249, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 2px 3px 6px 0px rgba(224, 218, 168, 0.24);
}
.item4 {
/* 加载背景图 */
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); */
/* 让背景图基于容器大小伸缩 */
/* background-size: 100% 100%; */
/* width: calc(100% - 5px); */
width: calc(100% - 5px);
border-radius: 8px;
background-color: rgba(255, 251, 248, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 2px 3px 6px 0px rgba(238, 117, 47, 0.15);
}
.item5 {
/* 加载背景图 */
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_enterprise.png); */
/* 让背景图基于容器大小伸缩 */
/* background-size: 100% 100%; */
/* width: calc(100% - 5px); */
width: calc(100% - 5px);
border-radius: 8px;
background-color: rgba(255, 251, 248, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 2px 3px 6px 0px rgba(238, 117, 47, 0.15);
}
.item6 {
/* 加载背景图 */
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); */
/* 让背景图基于容器大小伸缩 */
/* background-size: 100% 100%; */
/* width: calc(100% - 5px); */
width: calc(100% - 5px);
border-radius: 8px;
background-color: rgba(255, 251, 248, 1);
color: rgba(16, 16, 16, 1);
box-shadow: 2px 3px 6px 0px rgba(238, 117, 47, 0.15);
}
.showBtn {
visibility: hidden;
}
.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;
}
.oragin {}
uni-page-body,
page {
background: #FFFFFF;
}
</style>

268
pages/home/recordList.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<!-- 有列表的时候用 :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;">
<view v-show="item.type=='1'" >
<view class="item" :class="{ item2: item.state=='已提货' }"
style="display: flex;flex-direction: row;padding: 25px 15px; ">
<view style="margin-left: 10px; margin-right: 10px;">
<image src="https://supervise.yxtsoft.com/lpk/image/personNormal.png" mode="aspectFill"
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/peronLose.png" mode="aspectFill"
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />
</view>
<view style=" display: flex;flex-direction: column;margin-right: 10px;">
<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;">卡&ensp;&ensp;&ensp;&ensp;号：</text>
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</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;">提&ensp;货&ensp;人：</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;">状&ensp;&ensp;&ensp;&ensp;态：</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 v-show="item.type=='2'">
<view class="item3" :class="{ item4: item.state=='已提货' }"
style="display: flex;flex-direction: row;padding: 25px 15px;">
<view style="margin-left: 10px; margin-right: 10px;">
<image src="https://supervise.yxtsoft.com/lpk/image/giftNormal.png" mode="aspectFill"
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/giftLose.png" mode="aspectFill"
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />
</view>
<view style=" display: flex;flex-direction: column; margin-right: 10px;">
<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;">窖&ensp;&ensp;&ensp;&ensp;号：</text>
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</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;">提&ensp;货&ensp;人：</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;">状&ensp;&ensp;&ensp;&ensp;态：</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 v-show="item.type=='3'">
<view class="item5" :class="{ item6: item.state=='已提货' }"
style="display: flex;flex-direction: row;padding: 25px 15px;">
<view style="margin-left: 10px; margin-right: 10px;">
<image src="https://supervise.yxtsoft.com/lpk/image/enterpriseNormal.png" mode="aspectFill"
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/enterpriseLose.png" mode="aspectFill"
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />
</view>
<view style=" display: flex;flex-direction: column; margin-right: 10px;">
<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;">窖&ensp;&ensp;&ensp;&ensp;号：</text>
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</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;">提&ensp;货&ensp;人：</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;">状&ensp;&ensp;&ensp;&ensp;态：</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>
</template>
<script>
export default {
data() {
return {
styleObject:{
'padding-top': '10px',
},
data: []
}
},
created() {
// this.$bus.$on('order', msg => {
// console.log("aaaaaaaaaaa4", msg)
// this.$refs.paging.reload(true);
// });
this.$bus.$on('order2', msg => {
console.log("aaaaaaaaaaa4", msg)
this.$refs.paging.reload(true);
});
},
methods: {
// 分页的请求
queryList(pageNo, pageSize) {
let _this = this
_this.$api.orderListByUserSid({
"current": pageNo,
"size": pageSize,
"params": {
"userSid": getApp().globalData.sid
}
}).then((resp) => {
// 添加数据源
this.$refs.paging.complete(resp.records)
}).catch(e => {
// 出错了，点击重试
_this.$refs.paging.complete(false);
})
},
detail(sid) {
uni.navigateTo({
url: '/pages/card/card_record_detail?sid=' + sid
})
},
}
}
</script>
<style>
.item {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_perosn_item1.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item2 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_person_item2.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item3 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_gift_item3.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item4 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_gift_item4.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item5 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item5.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item6 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item6.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
</style>

271
pages/home/recordList2.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<!-- 有列表的时候用 :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;">
<view v-show="item.type=='1'">
<view class="item" :class="{ item2: item.state=='已提货' }"
style="display: flex;flex-direction: row;padding: 25px 15px; ">
<view style="margin-left: 10px; margin-right: 10px;">
<image src="https://supervise.yxtsoft.com/lpk/image/home_family.png" mode="aspectFill"
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/home_notFamily.png" mode="aspectFill"
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />
</view>
<view style=" display: flex;flex-direction: column;margin-right: 10px;">
<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;">窖&ensp;&ensp;&ensp;&ensp;号：</text>
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</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;">提&ensp;货&ensp;人：</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;">状&ensp;&ensp;&ensp;&ensp;态：</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 v-show="item.type=='2'">
<view class="item3" :class="{ item4: item.state=='已提货' }"
style="display: flex;flex-direction: row;padding: 25px 15px;">
<view style="margin-left: 10px; margin-right: 10px;">
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" mode="aspectFill"
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/home_notAffection.png" mode="aspectFill"
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />
</view>
<view style=" display: flex;flex-direction: column; margin-right: 10px;">
<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;">窖&ensp;&ensp;&ensp;&ensp;号：</text>
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</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;">提&ensp;货&ensp;人：</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;">状&ensp;&ensp;&ensp;&ensp;态：</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 v-show="item.type=='3'">
<view class="item5" :class="{ item6: item.state=='已提货' }"
style="display: flex;flex-direction: row;padding: 25px 15px;">
<view style="margin-left: 10px; margin-right: 10px;">
<image src="https://supervise.yxtsoft.com/lpk/image/home_enterprise.png" mode="aspectFill"
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/home_notEnterprise.png" mode="aspectFill"
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" />
</view>
<view style=" display: flex;flex-direction: column; margin-right: 10px;">
<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;">窖&ensp;&ensp;&ensp;&ensp;号：</text>
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</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;">提&ensp;货&ensp;人：</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;">状&ensp;&ensp;&ensp;&ensp;态：</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>
</template>
<script>
export default {
data() {
return {
styleObject: {
'padding-top': '10px',
},
data: []
}
},
created() {
// this.$bus.$on('order', msg => {
// console.log("aaaaaaaaaaa4", msg)
// this.$refs.paging.reload(true);
// });
this.$bus.$on('order2', msg => {
console.log("aaaaaaaaaaa4", msg)
this.$refs.paging.reload(true);
});
},
methods: {
// 分页的请求
queryList(pageNo, pageSize) {
let _this = this
_this.$api.orderListByUserSid({
"current": pageNo,
"size": pageSize,
"params": {
"userSid": getApp().globalData.sid
}
}).then((resp) => {
// 添加数据源
this.$refs.paging.complete(resp.records)
}).catch(e => {
// 出错了，点击重试
_this.$refs.paging.complete(false);
})
},
detail(sid) {
uni.navigateTo({
url: '/pages/card/card_record_detail?sid=' + sid
})
},
}
}
</script>
<style>
.item {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_family_item1.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item2 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_family_item2.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item3 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_affection_item1.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item4 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_affection_item2.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item5 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item1.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
.item6 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item2.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
</style>