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

2024-1-8

Browse Source
This commit is contained in:
guoxing
2024-01-08 11:52:50 +08:00
parent bfab09fdd4
commit 5cc5f8b81b
65 changed files with 9011 additions and 1788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
pages/home/UserFragment.vue
View File

@@ -1,165 +0,0 @@
<template>
<view class="page">
<view class="top">
<image class="img" :src="baseUrl" @click="chooseImage"></image>
<view class="top_right">
<text class="top_right_text1">{{name}}</text>
<text class="top_right_text2">{{orgName}}</text>
</view>
</view>
<!-- <view class="user-item-bg">
<UserItem src='https://supervise.yxtsoft.com/img/user/wdxm.png' text="我的项目" @click="click" clickId="0">
</UserItem>
</view> -->
<!-- <view class="user-item-bg">
<UserItem src='https://supervise.yxtsoft.com/img/user/smxx.png' text="实名信息" notes="完善信息" @click="click" clickId="1"></UserItem>
</view> -->
<!-- <view class="user-item-bg">
<UserItem src='https://supervise.yxtsoft.com/img/user/sz.png' text="设置" @click="click" clickId="2">
</UserItem>
</view>
<view class="user-item-bg">
<UserItem src='https://supervise.yxtsoft.com/img/user/wdxm.png' text="关注公众号" @click="click" clickId="8">
</UserItem>
</view> -->
<!-- #ifdef APP-PLUS -->
<!-- <view class="user-item-bg"> -->
<!-- <UserItem src='https://supervise.yxtsoft.com/img/user/zzjg.png' text="组织结构" @click="click" clickId="3"></UserItem>
<UserItem src='https://supervise.yxtsoft.com/img/user/xmgl.png' text="项目管理" @click="click" clickId="4"></UserItem>
<UserItem src='https://supervise.yxtsoft.com/img/user/ycgl.png' text="云仓管理" @click="click" clickId="5"></UserItem>
<UserItem src='https://supervise.yxtsoft.com/img/user/xtgl.png' text="系统管理" @click="click" clickId="6"></UserItem> -->
<!-- <UserItem src='https://supervise.yxtsoft.com/img/user/xtgl.png' text="检查更新" :notes="version" @click="click"
clickId="7">
</UserItem> -->
<!-- </view> -->
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
baseUrl: "",
name: "",
};
},
onShow() {
},
methods: {
chooseImage() {
// uni.navigateTo({
// url: '../index/SetUp2'
// });
},
click(id) {
switch (id) {
case "0":
uni.navigateTo({
url: '../index/MyProject'
});
break;
case "1":
break;
case "2":
uni.navigateTo({
url: '../index/SetUp'
});
// uni.navigateTo({
// url: '../index/DeviceException?sid=994d75b6-eb29-4733-bd48-dcfdf9f7dd47'
// });
break;
case "3":
break;
case "4":
break;
case "5":
break;
case "6":
break;
case "7":
APPUpdate(true);
break;
case "8":
uni.navigateTo({
url: '../index/interestAccount'
})
break;
}
},
}
}
</script>
<style lang="scss">
.page {
width: 100%;
height: 100%;
.top {
display: flex;
flex-direction: row;
align-items: center;
padding: 15px 25px;
.img {
margin-top: 10px;
margin-left: 10px;
width: 60px;
height: 60px;
border-radius: 5px;
}
.top_right {
margin-top: 10px;
flex: 1;
margin-left: 20px;
display: flex;
flex-direction: column;
.top_right_text1 {
width: 100%;
font-size: 20px;
font-weight: 800;
font-family: sans-serif;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.top_right_text2 {
margin-top: 5px;
font-size: 15px;
}
}
}
.user-item-bg {
background-color: #FFFFFF;
margin-top: 26rpx;
}
}
</style>

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

@@ -0,0 +1,249 @@
<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: 20px; 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>
<image src="@/static/right_icon.png" style="width: 15px;height: 15px;"></image>
</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: 60px;height: 70px;"></image>
<view style="display: flex;flex-direction: column;margin-left: 20px;flex: 1; width: 100%;">
<text style="color: #999;font-size: 14px;width: 100%;">{{item.remarks}}</text>
<view style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 5px;">
<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: 14px;;padding: 0px 8px;">{{item.count}}</text>
</view>
<text style="color: #FF5006;font-size: 14px;">￥{{item.price}}</text>
</view>
</view>
</view>
</view>
</view>
</z-paging>
<!-- </view> -->
</view>
</template>
<script>
export default {
data() {
return {
styleObject: {
// 'position': 'fixed',
// 'top':'80vw',
'margin-top': '78vw',
// '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: 85vw;
/* 加载背景图 */
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>

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

@@ -0,0 +1,435 @@
<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>
</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 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>
</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>
</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>
</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
},
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 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_family.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 5px);
}
.item2 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 5px);
}
.item3 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_affection.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 5px);
}
.item4 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 5px);
}
.item5 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_enterprise.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 5px);
}
.item6 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 5px);
}
.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>