product_platform/ordermall_applet
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增预订商城项目

Browse Source
This commit is contained in:
myTest383
2024-12-02 08:51:10 +08:00
parent 2e55bab308
commit dafca7a329
539 changed files with 98459 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,304 @@
<template>
<view style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
<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',
'border-bottom-left-radius': '25px',
'border-bottom-right-radius': '25px',
'background': '#fff',
'padding-top': '10px',
'margin-bottom':"60px"
},
page: {
startHeight: 0,
endHeight: 0
},
data: [],
}
},
created() {
this.$bus.$on('order', msg => {
console.log("aaaaaaaaaaa4", msg)
this.$refs.paging.reload(true);
});
},
onShow(){
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: 0
})
}
},
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>

1431
pages/home/cloudCard2.vue Normal file
View File

File diff suppressed because it is too large Load Diff

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>

1165
pages/home/myCellar.vue Normal file
View File

File diff suppressed because it is too large Load Diff

724
pages/home/myHome.vue Normal file
View File

@@ -0,0 +1,724 @@
<template>
<view id="page">
<!-- 顶部 -->
<view class="top">
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
:end-change-height="page.endHeight"></NavBar>
<!-- 用户信息 -->
<view class="userinfo" @click="showDiaLog">
<!-- 头像 -->
<image class="head-img" :src="userInfo.photo"></image>
<view class="name-mob" style="flex: 1;">
<!-- 昵称 -->
<text>{{userInfo.nick}}</text>
<!-- 手机 -->
<text style="font-size:14px;">{{userInfo.mobile}}</text>
</view>
<image src="../../static/more_white.png"
style="width: 30px;height: 30px;margin-right: 10px;flex-shrink: 0;" :rotate="0"></image>
</view>
<view style="display: flex;flex-direction: row;align-items: center; width: 100%;
position: absolute;bottom: 8vw; ">
<view style="flex: 1;"></view>
<view style="margin-right: 20px;display: flex;flex-direction: row;align-items: center;"
@click="makePhoneCall()">
<image src="../../static/userService.png" style="width: 25px;height: 25px;margin-right: 5px;">
</image>
<text style="color: #fff;font-size: 16px;">联系我们</text>
</view>
</view>
</view>
<view class="view" style="z-index: 2;">
<!-- 滚动视图 -->
<scroll-view scroll-y="true" class="scroll-view" bindscrolltoupper="upper" bindscrolltolower="lower"
bindscroll="scroll">
<!-- 预约记录 -->
<view class="icon-cow">
<text class="title">预约记录</text>
<view class="group">
<!-- 待提菜 -->
<view class="icon-name" @click="itemClick('待提菜')">
<view class="icon">
<image class="img" src="../../static/img/record-query/waiting_extraction.png"
mode="aspectFill"></image>
<!-- <view v-if="data.count>0" class="count">{{data.count}}</view> -->
</view>
<text class="name">待提取</text>
</view>
<!-- 已提菜 -->
<view class="icon-name" @click="itemClick('已提菜')">
<view class="icon">
<image class="img" src="../../static/img/record-query/extracted.png" mode="aspectFill">
</image>
</view>
<text class="name">已提取</text>
</view>
<view class="icon-name"></view>
<view class="icon-name"></view>
</view>
</view>
<!-- 订单记录 -->
<view class="icon-cow">
<text class="title">订单记录</text>
<view class="group">
<view class="icon-name" @click="itemClick('我的订单')">
<view class="icon">
<image class="img" src="../../static/img/record-query/obligation.png" mode="aspectFill">
</image>
<!-- <view class="count">{{data.count}}</view> -->
</view>
<text class="name">我的订单</text>
</view>
<view class="icon-name" @click="itemClick('已失效')">
<view class="icon">
<image class="img" src="../../static/img/record-query/invalid.png" mode="aspectFill">
</image>
</view>
<text class="name">已失效</text>
</view>
<view class="icon-name"></view>
<view class="icon-name"></view>
</view>
</view>
<!-- 失效菜品 -->
<!-- <view class="icon-cow">
<text class="title">失效菜品</text>
<view class="group">
<view class="icon-name" @click="itemClick('已失效')">
<view class="icon">
<image class="img" src="../../static/img/record-query/invalid.png" mode="aspectFill">
</image>
</view>
<text class="name">已失效</text>
</view>
<view class="icon-name"></view>
<view class="icon-name"></view>
<view class="icon-name"></view>
</view>
</view> -->
<!-- 转赠记录 -->
<view class="icon-cow">
<text class="title">转赠记录</text>
<view class="group">
<!-- 赠与我的 -->
<view class="icon-name" @click="itemClick('赠与我的')">
<view class="icon">
<image class="img" src="../../static/img/record-query/gifted_to_me.png"
mode="aspectFill"></image>
</view>
<text class="name">收到的礼品</text>
</view>
<!-- 我的转赠 -->
<view class="icon-name" @click="itemClick('我的转赠')">
<view class="icon">
<image class="img" src="../../static/img/record-query/my_gift.png" mode="aspectFill">
</image>
</view>
<text class="name">发出的礼品</text>
</view>
<view class="icon-name"></view>
<view class="icon-name"></view>
</view>
</view>
<!-- 推荐有礼 -->
<view style="display: flex;flex-direction: column; border-radius: 10px;background: #fff;
padding: 10px; margin-top: 10px;width: 100%;box-sizing: border-box; visibility: hidden;">
<view style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;">
<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
<text
style="font-size: 15px;color: #101010;font-weight: 600;font-family: sans-serif;">推荐有礼</text>
<image src="../../static/share_gift.png"
style="margin-left: 5px; width: 20px;height: 20px;"></image>
</view>
<!-- <view style="display: flex;flex-direction: row;align-items: center;" @click="">
<text style="margin-right: 5px;color: #FF9900;font-size: 12px;">马上邀请</text>
<image src="../../static/right_icon.png" style="width: 15px;height: 15px;"></image>
</view> -->
<button open-type="share" style="margin-right: -20px;height: 20px;line-height: 20px;">
<view style="display: flex;flex-direction: row;align-items: center;">
<text style="margin-right: 5px;color: #FF9900;font-size: 12px;">马上邀请</text>
<image src="../../static/right_icon.png" style="width: 15px;height: 15px;"></image>
</view>
</button>
</view>
<text style="font-size: 12px;color: #4B4B4B; margin-top: 8px;"
v-if="recommend.remarks!=''">{{recommend.remarks}}</text>
<view style="display: flex;flex-direction: row;align-items: center; margin-top: 10px;"
v-if="recommend.vos.length>0">
<!-- <image :src="recommend.iconUrl" style="width: 30%;height: 100px; border-radius: 10px;"
mode="aspectFill">
</image> -->
<view
style="display: flex;flex-direction: column; margin-left:10px;width: 90%;box-sizing: border-box;">
<view v-for="(child,pos) in recommend.vos" :key="pos" @click="recommendClick(child)"
style="display: flex;flex-direction: column;width: 100%;box-sizing: border-box;">
<text
style="color: #424242; font-size: 13px;line-height: 25px;">*{{child.remarks}}</text>
</view>
</view>
</view>
</view>
<!-- </loading-state> -->
</scroll-view>
</view>
<!-- 获取手机号弹框 -->
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal1' @click="colseDialog1()"></view>
<view class="modalDlg4" catchtouchmove='preventTouchMove' v-if='showModal1'>
<view style="display: flex;flex-direction: column;background: #fff; width: 80%; border-radius: 20px;
">
<view
style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;margin-top: 20px;">
<image src="../../static/logo_icon.png" style="width: 10vw;height: 10vw;" mode="scaleToFill">
</image>
<text
style="margin-top: 5px;color: #333;font-size: 18px;font-weight: 600;font-family: sans-serif;">云菜窖</text>
</view>
<view style="display: flex;margin-top: 10px;margin-left: 20px; margin-right: 20px;">
<text style="color: #999;text-indent:2em;">为确保您能正常体验小程序功能，云菜窖需要获取您的手机号。</text>
</view>
<view
style="flex-shrink: 0;display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 20px;">
<button class="button1" @click="colseDialog1()">拒绝</button>
<button class="button2" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">同意</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showModal1: false,
butdisabled: true,
page: {
startHeight: 0,
endHeight: 0
},
data: {
count: "1",
},
userInfo: {
nick: "",
mobile: "绑定手机号",
photo: "../../static/userHead.png"
},
dialogInfo: {
url: "../../static/userHead.png",
name: "",
mobile: ""
},
headImage: "",
recommend: {
vos: []
},
banKInfo: null
}
},
onShow() {
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: 2
})
}
if (getApp().globalData.mobile == '')
this.showModal1 = true
this.getUserInfo()
this.myRecommend()
},
onLoad(options) {
// this.request()
let info = uni.getSystemInfoSync();
this.page.startHeight = info.windowWidth * 0.6
this.page.endHeight = info.windowWidth * 0.8
},
onPageScroll(res) {
// 渐变
this.$refs.nav.defaultColorBgAlpha(res)
},
methods: {
makePhoneCall() {
wx.makePhoneCall({
// phoneNumber: '15632127890',
phoneNumber: '13011576972',
})
},
getUserInfo() {
let _this = this
_this.$api.getUserInfo(getApp().globalData.sid).then((resp) => {
_this.userInfo = {
nick: resp.nick,
mobile: resp.mobile,
photo: resp.photo
}
_this.headImage = resp.data.photo
}).catch(e => {
})
},
myRecommend() {
let _this = this
_this.$api.myRecommend(getApp().globalData.sid).then((resp) => {
console.log("myRecommend>>>", resp)
_this.recommend = resp
}).catch(e => {
})
},
recommendClick(item) {
console.log("recommendClick>>>", item)
// uni.navigateTo({
// url: '/pages/records/recommendRecords'
// })
},
showDiaLog() {
uni.navigateTo({
url: '/pages/me/base_info'
})
},
colseDialog1() {
this.showModal1 = false
},
getPhoneNumber(e) {
let _this = this
console.log(e.detail.code)
_this.$api.getPhone({
userSid: getApp().globalData.sid,
code: e.detail.code
}).then((resp) => {
_this.showModal1 = false
getApp().globalData.mobile = resp
}).catch(e => {
console.log(e);
})
},
onShareAppMessage: function(res) {
// console.log("res", res)
// console.log("data", res.target.dataset)
// var data = res.target.dataset.info
// this.shareCard()
// // ①
// let shareData = JSON.stringify({
// // params: {
// // code: data.code,
// // codeKey: data.codeKey,
// // customerSid: ''
// // },
// // functionName: 'bindCard',
// // url: '/pages/detail/detail_affeection?sid=' + data.sid
// url: '/pages/home/myCellar?shareSid=' + getApp().globalData.sid,
// functionName: 'share'
// })
// // 转码传输
// let value = encodeURIComponent(shareData)
// return {
// title: '汇融农链-云菜窖',
// // ②
// path: '/pages/login/login?data=' + value,
// imageUrl: 'https://supervise.yxtsoft.com/lpk/image/share_invite.png', //自定义图片路径，显示图片长宽比是 5:4。
// success: function(res) {
// console.log('aaaa', "分享成功")
// },
// fail: function(res) {
// // 转发失败
// console.log('aaaa', "用户点击了取消")
// }
// }
let _this = this
const promise = new Promise(resolve => {
// 模拟网络请求
setTimeout(() => {
var params = {
customerSid: getApp().globalData.sid
}
_this.$api.recommendNewUsers(params).then((resp) => {
let shareData = JSON.stringify({
// params: {
// code: resp.transferCode,
// codeKey: resp.sid
// },
// functionName: 'bindCard',
// url: '/pages/bind/bind_cloudCard?code=' + resp
// .transferCode + "&codeKey=" + resp.sid
url: '/pages/home/myCellar?shareSid=' + getApp()
.globalData.sid + "&orderSid=" + resp.sid,
functionName: 'share'
})
// 转码传输
let value = encodeURIComponent(shareData)
resolve({
title: '汇融农链-云菜窖',
// ②
path: '/pages/login/login?data=' + value,
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/share_invite.png', //自定义图片路径，显示图片长宽比是 5:4。
})
}).catch(e => {
_this.shortToast('发生错误,请稍后再试.')
return
})
}, 0)
})
return promise
},
shareCard() {
let _this = this
var params = {
customerSid: getApp().globalData.sid
}
_this.$api.recommendNewUsers(params).then((resp) => {
}).catch(e => {})
},
itemClick(type) {
switch (type) {
case "待提菜":
// uni.navigateTo({
// url: '/pages/records/reservationRecords',
// })
uni.navigateTo({
url: '/pages/records/reservationRecords3',
})
break;
case "已提菜":
// uni.navigateTo({
// url: '/pages/records/reservationRecords2',
// })
uni.navigateTo({
url: '/pages/records/reservationRecords4',
})
break;
case "我的订单":
uni.navigateTo({
url: '/pages/records/orderRecords',
})
// uni.navigateTo({
// url:"/pages/records/orderDetail"
// })
break;
case "已失效":
uni.navigateTo({
url: '/pages/records/invalidGoods',
})
break;
case "待付款":
break;
case "已付款":
break;
case "赠与我的":
uni.navigateTo({
url: '/pages/records/transferRecords2',
})
break;
case "我的转赠":
uni.navigateTo({
url: '/pages/records/transferRecords',
})
break;
}
}
}
}
</script>
<style>
#page {
display: flex;
flex-direction: column;
height: 100vh;
background: -webkit-linear-gradient(left, #FEA65F, #FB9440);
box-sizing: border-box;
}
/* 顶部 */
.top {
width: 100vw;
/* height: 126.66vw; */
height: 65vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/my_bj.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
position: relative;
/*父元素位置要设置为相对*/
}
/* 顶部-用户信息 */
.top .userinfo {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 25vw;
margin-left: 8vw;
}
/* 顶部-用户信息-头像 */
.top .userinfo .head-img {
width: 60px;
height: 60px;
border-radius: 50%;
}
/* 顶部-用户信息-名称手机 */
.top .userinfo .name-mob {
display: flex;
flex-direction: column;
margin-left: 10px;
}
/* 顶部-用户信息-名称手机-文本样式 */
.top .userinfo .name-mob text {
font-size: 16px;
color: #fff;
}
/* 视图 */
.view {
box-sizing: border-box;
margin-top: -15px;
background: #F7F7F7;
height: calc(100vh - 45px - 65vw);
;
width: 100%;
border-radius: 15px;
}
/* 滚动视图 */
.scroll-view {
height: 100%;
width: 100%;
padding: 15px;
border-radius: 15px;
box-sizing: border-box;
}
/* 图标显示行 */
.icon-cow {
display: flex;
flex-direction: column;
border-radius: 10px;
background: #fff;
padding: 12px;
margin-bottom: 10px
}
/* 图标显示行-标题 */
.icon-cow .title {
font-size: 15px;
color: #101010;
font-weight: 600;
font-family: sans-serif;
}
/* 图标显示行-图标群 */
.icon-cow .group {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
}
/* 图标显示行-图标群-图标和名称*/
.icon-cow .group .icon-name {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 图标显示行-图标群-图标和名称-图标*/
.icon-cow .group .icon-name .icon {
position: relative;
width: 35px;
height: 35px;
}
/* 图标显示行-图标群-图标和名称-图标-图片*/
.icon-cow .group .icon-name .icon .img {
width: 28px;
height: 28px;
margin-left: 5px;
margin-top: 5px;
}
/* 图标显示行-图标群-图标和名称-图标-数量*/
.icon-cow .group .icon-name .icon .count {
border-radius: 50%;
text-align: center;
background: #f00;
color: #fff;
font-size: 8px;
position: absolute;
top: 2px;
right: 0px;
padding: 2px 5px;
width: auto;
}
/* 图标显示行-图标群-图标和名称-图标名称*/
.icon-cow .group .icon-name .name {
font-size: 13px;
color: #101010;
margin-top: 5px;
}
.sharebtn {
margin-right: -10px;
background: #f0f;
/* font-size: 12px;
color: #fff;
width: 30vw;
border-radius: 20px; */
}
.sharebtn::after {
border: none;
}
/* 弹窗样式 */
.model {
position: absolute;
width: 100%;
height: 100%;
background: #000;
z-index: 100000;
opacity: 0.7;
top: 0;
left: 0;
}
.modalDlg4 {
/* 设置超出滚动 */
overflow: auto;
position: fixed;
z-index: 100000;
display: flex;
width: 100%;
height: 100%;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button1 {
background: #fff;
color: #666;
flex: 1;
border-radius: 0px;
border-bottom-left-radius: 20px;
border: 1px solid #eee;
}
.button2 {
background: #fff;
color: #FF9900;
border-radius: 0px;
border-bottom-right-radius: 20px;
flex: 1;
border: 1px solid #eee;
}
button {
background: #fff;
color: #fff;
height: 42px;
line-height: 40px;
font-size: 13px;
padding: 0px 15px;
}
button::after {
border: 0;
}
</style>

32
pages/home/newUserPlay.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<view style="display: flex;flex-direction: column;width: 100%;height: 100%;box-sizing: border-box;">
<NavBar ref="nav" navTitle=" " :showIcon="true" >
</NavBar>
<image :src="page.url" style="width: 100%;height: 100vh;" mode="scaleToFill"></image>
</view>
</template>
<script>
export default {
data() {
return {
page:{
url:"",
}
}
},
onLoad(options) {
console.log("options",options)
this.page.url = JSON.parse(decodeURIComponent(options.url))
console.log("as",this.page.url)
},
methods: {
}
}
</script>
<style>
</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>

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

@@ -0,0 +1,546 @@
<template>
<view style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
<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',
'border-bottom-left-radius': '25px',
'border-bottom-right-radius': '25px',
'background': '#fff',
'padding-top': '10px',
'margin-bottom':"60px"
},
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);
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().setData({
selected: 1
})
}
},
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'
})
// uni.navigateTo({
// url: '/pages/home/myHome'
// })
},
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>

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

@@ -0,0 +1,278 @@
<template>
<view style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
<!-- 有列表的时候用 :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>
</view>
</template>
<script>
export default {
data() {
return {
styleObject: {
'padding-top': '10px',
'border-bottom-left-radius': '25px',
'border-bottom-right-radius': '25px',
'background': '#fff',
'margin-bottom': "60px"
},
data: []
}
},
onShow() {
},
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>